feat: add DsfrDataTableV2 and DsfrTabsV2.vue

SocialGouv · Oct 2, 2024 · 5c3026f · 5c3026f
1 parent 13364c6
commit 5c3026f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -254,7 +254,9 @@ fileignoreconfig:
 - filename: packages/shared/src/components/PasswordInput.vue
   checksum: af4fe62dc455e943fcfacaa6ee0495e1ab20f9ed2094ad70c457b7a27ab46759
 - filename: packages/shared/src/components/Table/DsfrDataTableV2.vue
-  checksum: 6ee5e9bdac3acca80d5b4c48be080b7e3eb0501753f38adf1e2f80f8a3af9b54
+  checksum: 234f0db9a3e3dd4fbff644f2f597f87e4ab0ed08847b14f128482ea6b0aa7732
+- filename: packages/shared/src/type.ts
+  checksum: 8c75e8784ded25a61d6e14cd682bfe67e4ecdde5a6582fb83035fcae39a87b98
 - filename: pg/scripts/01-init.sql
   checksum: 20dd5b8d36b1b0517fe185d30003af7866ef5678eed4e7571a6d9797ec3b2a46
 - filename: pg/scripts/02/02-1-geo-init.sql

diff --git a/packages/shared/src/components/Table/DsfrDataTableV2.vue b/packages/shared/src/components/Table/DsfrDataTableV2.vue
@@ -1,12 +1,25 @@
 <script setup lang="ts" generic="T extends Row">
 import type { Component } from "vue";
 import { computed } from "vue";
+
+export type Primitive = string | number | boolean;
+
 export type Row = {
-  [key: string]: string | number | boolean | Row;
+  [key: string]: Primitive | Row;
 };
 
-export type Titles = {
-  key: string;
+export type NestedKeys<T> = {
+  [K in keyof T]: K extends string | number
+    ? T[K] extends Primitive
+      ? K
+      : T[K] extends Row
+        ? K | `${K}.${NestedKeys<T[K]>}`
+        : never
+    : never;
+}[keyof T];
+
+export type Titles<T> = {
+  key: NestedKeys<T>;
   label: string;
   options?: {
     isSortable?: boolean;
@@ -21,7 +34,7 @@ const props = withDefaults(
     tableTitle?: string;
     data: T[];
     size?: "sm" | "md" | "sg";
-    titles: Titles;
+    titles: Titles<T>;
     sortDirection?: "asc" | "desc";
     sort?: string;
     isSelectable?: boolean;
@@ -45,10 +58,10 @@ const props = withDefaults(
 );
 
 const emits = defineEmits<{
-  "update:sort": [string];
+  "update:sort": [NestedKeys<T>];
   "update:sort-direction": ["asc" | "desc"];
   "update:selected": [Array<T[RowId]>];
-  sort: [{ sort: string; direction: "asc" | "desc" }];
+  sort: [{ sort: NestedKeys<T>; direction: "asc" | "desc" }];
 }>();
 
 const selectedSync = computed({
@@ -60,7 +73,7 @@ const selectedSync = computed({
   },
 });
 
-const handleSort = (key: string) => {
+const handleSort = (key: NestedKeys<T>) => {
   if (props.sort === key) {
     const direction = props.sortDirection === "asc" ? "desc" : "asc";
     emits("update:sort-direction", direction);
@@ -162,12 +175,12 @@ const isSelected = (id: T[RowId]) => props.selected.includes(id);
                 v-for="(row, index) in data"
                 :key="row[props.rowId] as RowId"
                 :data-row-key="index + 1"
+                :aria-selected="isSelected(row[props.rowId] as T[RowId])"
               >
                 <th
                   v-if="props.isSelectable"
                   class="fr-cell--fixed"
                   scope="row"
-                  :aria-selected="isSelected(row[props.rowId] as T[RowId])"
                 >
                   <div class="fr-checkbox-group fr-checkbox-group--sm">
                     <input
@@ -198,8 +211,8 @@ const isSelected = (id: T[RowId]) => props.selected.includes(id);
                       :row="row"
                     />
                     <span v-else>{{
-                      title.key.includes(".")
-                        ? valueFromObject(title.key, row)
+                      typeof title.key === "string" && title.key.includes(".")
+                        ? valueFromObject(String(title.key), row)
                         : row[title.key]
                     }}</span>
                   </slot>

diff --git a/packages/shared/src/type.ts b/packages/shared/src/type.ts
@@ -0,0 +1,7 @@
+import type {
+  NestedKeys as ImportedNestedKeys,
+  Titles as ImportedTitles,
+} from "./components/Table/DsfrDataTableV2.vue";
+
+export type NestedKeys<T> = ImportedNestedKeys<T>;
+export type Titles<T> = ImportedTitles<T>;