refactor(DsfrTableHeaders): ♻️ convertit les stories au format CSF3

Author: laruiss

src/components/DsfrTable/DsfrTableHeaders.stories.ts

@@ -1,7 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrTable from './DsfrTable.vue'
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 
-export default {
+const meta = {
   component: DsfrTableHeaders,
   title: 'Composants/DsfrTableHeaders',
   argTypes: {
@@ -11,39 +13,40 @@ export default {
       description: 'Liste des en-têtes du tableau (tableau de string).',
     },
   },
-}
+} as Meta<typeof DsfrTableHeaders>
+
+export default meta
+type Story = StoryObj<typeof meta>
 
 const title = 'Utilisateurs'
 const headers = ['Nom', 'Prénom', 'Email', 'Téléphone', 'Portable', 'Statut']
 
-export const EnTetesDeTableau = (args) => ({
-  components: {
-    DsfrTable,
-    DsfrTableHeaders,
-  },
-
-  data () {
-    return {
-      ...args,
-    }
+export const EnTetesDeTableau: Story = {
+  args: {
+    title,
+    headers,
   },
-
-  template: `
+  render: (args: any) => ({
+    components: {
+      DsfrTable,
+      DsfrTableHeaders,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
       <DsfrTable
-        :title="title"
+        :title="args.title"
       >
         <template v-slot:header>
-          <DsfrTableHeaders :headers="headers" />
+          <DsfrTableHeaders :headers="args.headers" />
         </template>
         <tr>
           <td colspan="6">
             Corps du tableau
           </td>
         </tr>
       </DsfrTable>
-  `,
-})
-EnTetesDeTableau.args = {
-  title,
-  headers,
+    `,
+  }),
 }