refactor(DsfrSideMenuList): ♻️ modernise le composant et convertit les stories en CSF3

- Modernisation du composant DsfrSideMenuList selon les conventions Vue 3
- Migration des stories Storybook vers le format CSF3 moderne
- Amélioration de la cohérence avec les autres composants du projet
- Utilisation de la fonction emit au lieu de $emit pour une syntaxe plus moderne

- Ajout de defineSlots avec documentation TypeScript pour le slot default
- Modernisation de la syntaxe emit avec types explicites et JSDoc
- Remplacement de $emit par emit() dans le template pour plus de cohérence
- Conversion de la story au format CSF3 avec Meta/StoryObj et satisfies
- Migration de l'options API vers la Composition API avec setup() et ref
- Ajout de types TypeScript pour la fonction toggleExpandedForMenuWithId
- Échappement des apostrophes dans les descriptions argTypes françaises

Author: laruiss

src/components/DsfrSideMenu/DsfrSideMenuList.stories.ts

@@ -1,7 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuList from './DsfrSideMenuList.vue'
 
-function toggleExpandedForMenuWithId (menuItems, id) {
+function toggleExpandedForMenuWithId (menuItems: any[], id: string) {
   menuItems.forEach((menuItem) => {
     if (menuItem.id === id) {
       menuItem.expanded = !menuItem.expanded
@@ -13,13 +15,13 @@ function toggleExpandedForMenuWithId (menuItems, id) {
   })
 }
 
-export default {
+const meta = {
   component: DsfrSideMenuList,
   title: 'Composants/DsfrSideMenuList',
   argTypes: {
     headingTitle: {
       control: 'text',
-      description: 'Titre de la rubrique (c’est le titre du menu latéral)',
+      description: 'Titre de la rubrique (c\'est le titre du menu latéral)',
     },
     buttonLabel: {
       control: 'text',
@@ -45,84 +47,89 @@ export default {
   - \`id\`: identifiant unique d'item de menu
   - \`to\`: URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à \`to\` de \`RouterLink\` pour un lien interne
   - \`text\`: texte du menu
-  - \`active\`: indique que l’item de menu correspond à la page courante
+  - \`active\`: indique que l'item de menu correspond à la page courante
       `,
     },
   },
-}
+} satisfies Meta<typeof DsfrSideMenuList>
 
-export const MenuLateral = (args) => ({
-  components: {
-    DsfrSideMenu,
-    DsfrSideMenuList,
-  },
+export default meta
 
-  data () {
-    return {
-      ...args,
-    }
-  },
+type Story = StoryObj<typeof meta>
 
-  methods: {
-    toggleExpand (id) {
-      toggleExpandedForMenuWithId(this.menuItems, id)
+export const MenuLateral: Story = {
+  render: (args) => ({
+    components: {
+      DsfrSideMenu,
+      DsfrSideMenuList,
     },
-  },
 
-  template: `
+    setup () {
+      const toggleExpand = (id: string) => {
+        toggleExpandedForMenuWithId(args.menuItems, id)
+      }
+
+      return {
+        args,
+        toggleExpand,
+      }
+    },
+
+    template: `
     <DsfrSideMenu
-      :heading-title="headingTitle"
-      :buttonLabel="buttonLabel"
+      :heading-title="args.headingTitle"
+      :buttonLabel="args.buttonLabel"
       >
       <DsfrSideMenuList
-        :id="id"
-        :menu-items="menuItems"
+        :id="args.id"
+        :menu-items="args.menuItems"
         @toggle-expand="toggleExpand"
       />
     </DsfrSideMenu>
   `,
-})
-MenuLateral.args = {
-  buttonLabel: 'Dans cette rubrique',
-  headingTitle: 'Titre de la rubrique',
-  id: 'list',
-  menuItems: [
-    {
-      id: '11',
-      to: '/rubrique-1',
-      text: 'Premier titre de niveau 1',
-    },
-    {
-      id: '12',
-      to: '/rubrique-2',
-      text: 'Deuxième titre de niveau 1',
-      active: true,
-      menuItems: [
-        {
-          id: '21',
-          to: '/rubrique-2/sous-rubrique-1',
-          text: 'Premier titre de niveau 2',
-        },
-        {
-          id: '22',
-          to: '/rubrique-2/sous-rubrique-2',
-          text: 'Deuxième titre de niveau 2',
-          active: true,
-          menuItems: [
-            {
-              id: '31',
-              to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
-              text: 'Premier titre de niveau 3',
-            },
-            {
-              id: '32',
-              to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
-              text: 'Deuxième titre de niveau 3',
-              active: true,
-            },
-          ],
-        },
-      ],
-    },
-  ],
+  }),
+  args: {
+    buttonLabel: 'Dans cette rubrique',
+    headingTitle: 'Titre de la rubrique',
+    id: 'list',
+    menuItems: [
+      {
+        id: '11',
+        to: '/rubrique-1',
+        text: 'Premier titre de niveau 1',
+      },
+      {
+        id: '12',
+        to: '/rubrique-2',
+        text: 'Deuxième titre de niveau 1',
+        active: true,
+        menuItems: [
+          {
+            id: '21',
+            to: '/rubrique-2/sous-rubrique-1',
+            text: 'Premier titre de niveau 2',
+          },
+          {
+            id: '22',
+            to: '/rubrique-2/sous-rubrique-2',
+            text: 'Deuxième titre de niveau 2',
+            active: true,
+            menuItems: [
+              {
+                id: '31',
+                to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
+                text: 'Premier titre de niveau 3',
+              },
+              {
+                id: '32',
+                to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
+                text: 'Deuxième titre de niveau 3',
+                active: true,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
 }

src/components/DsfrSideMenu/DsfrSideMenuList.vue

@@ -15,7 +15,17 @@ const props = withDefaults(defineProps<DsfrSideMenuListProps>(), {
   menuItems: () => [],
 })
 
-defineEmits<{ (e: 'toggleExpand', payload: string): void }>()
+/**
+ * Événements émis par le composant DsfrSideMenuList
+ */
+const emit = defineEmits<{
+  toggleExpand: [payload: string]
+}>()
+
+defineSlots<{
+  /** Slot par défaut pour le contenu d'une liste du menu latéral */
+  default?: () => any
+}>()
 
 const {
   collapse,
@@ -62,7 +72,6 @@ const linkProps = (to: string | RouteLocationRaw | undefined) => {
     <ul
       class="fr-sidemenu__list"
     >
-      <!-- @slot Slot par défaut pour le contenu d’une liste du menu latéral -->
       <slot />
 
       <DsfrSideMenuListItem
@@ -85,7 +94,7 @@ const linkProps = (to: string | RouteLocationRaw | undefined) => {
             :active="!!menuItem.active"
             :expanded="!!menuItem.expanded"
             :control-id="(menuItem.id as string)"
-            @toggle-expand="menuItem.expanded = !menuItem.expanded"
+            @toggle-expand="emit('toggleExpand', $event)"
           >
             {{ menuItem.text }}
           </DsfrSideMenuButton>
@@ -95,7 +104,7 @@ const linkProps = (to: string | RouteLocationRaw | undefined) => {
             collapsable
             :expanded="!!menuItem.expanded"
             :menu-items="menuItem.menuItems"
-            @toggle-expand="$emit('toggleExpand', $event)"
+            @toggle-expand="emit('toggleExpand', $event)"
           />
         </template>
       </DsfrSideMenuListItem>