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

## Pourquoi les changements ont été faits :
- Modernisation du composant DsfrToggleSwitch selon les conventions Vue 3
- Migration des 5 stories Storybook vers le format CSF3 moderne
- Amélioration de la cohérence avec les autres composants du projet
- Modernisation de l'utilisation des événements avec la fonction emit()

## Quelles modifications ont été apportées :
- Ajout de documentation JSDoc pour les événements émis
- Modernisation de la syntaxe emit avec types explicites
- Remplacement de $emit par emit() dans le template
- Conversion des 5 stories au format CSF3 avec Meta/StoryObj et satisfies
- Migration de l'options API vers la Composition API avec setup(), ref et watch
- Préservation des tests interactifs sur InterrupteurAvecTextePersonnalise
- Gestion réactive du modelValue avec watch pour déclencher onChange
- Échappement des apostrophes dans les descriptions argTypes françaises

Author: laruiss

src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.ts

@@ -1,11 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import { expect, fn, within } from 'storybook/test'
+import { ref, watch } from 'vue'
 
 import DsfrToggleSwitch from './DsfrToggleSwitch.vue'
 
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/interrupteur)
  */
-export default {
+const meta = {
   component: DsfrToggleSwitch,
   title: 'Composants/DsfrToggleSwitch',
   tags: ['formulaire'],
@@ -43,6 +46,7 @@ export default {
       action: fn(),
       description:
         'Appelé à chaque changement de la valeur `checked`.\n\n*N.B. : Ne fait pas partie du composant.*',
+      table: { category: 'Hors composant' },
     },
     activeText: {
       control: 'text',
@@ -61,168 +65,187 @@ export default {
         'Evènement de mise à jour de la valeur contenue dans modelValue',
     },
   },
-}
+} satisfies Meta<typeof DsfrToggleSwitch>
 
-export const Interrupteur = (args) => ({
-  components: { DsfrToggleSwitch },
-  data () {
-    return args
-  },
-  template: `
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Interrupteur: Story = {
+  render: (args) => ({
+    components: { DsfrToggleSwitch },
+    setup () {
+      watch(() => args.modelValue, (newVal) => {
+        args.onChange?.(newVal)
+      })
+
+      return {
+        args,
+      }
+    },
+    template: `
     <DsfrToggleSwitch
-      v-model="modelValue"
-      :label="label"
-      :hint="hint"
-      :disabled="disabled"
-      :input-id="inputId"
+      v-model="args.modelValue"
+      :label="args.label"
+      :hint="args.hint"
+      :disabled="args.disabled"
+      :input-id="args.inputId"
     />
   `,
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
-    },
+  }),
+  args: {
+    label: 'Interrupteur 1',
+    hint: 'Indice',
+    disabled: false,
+    inputId: 'toggle-1',
+    modelValue: true,
   },
-})
-Interrupteur.args = {
-  label: 'Interrupteur 1',
-  hint: 'Indice',
-  disabled: false,
-  inputId: 'toggle-1',
-  modelValue: true,
 }
 
-export const InterrupteurAvecLabelAGauche = (args) => ({
-  components: { DsfrToggleSwitch },
-  data () {
-    return args
-  },
-  template: `
+export const InterrupteurAvecLabelAGauche: Story = {
+  name: 'Interrupteur Avec Label À Gauche',
+  render: (args) => ({
+    components: { DsfrToggleSwitch },
+    setup () {
+      watch(() => args.modelValue, (newVal) => {
+        args.onChange?.(newVal)
+      })
+
+      return {
+        args,
+      }
+    },
+    template: `
     <DsfrToggleSwitch
-      v-model="modelValue"
-      :label="label"
-      :hint="hint"
-      :disabled="disabled"
-      :input-id="inputId"
-      :labelLeft="labelLeft"
+      v-model="args.modelValue"
+      :label="args.label"
+      :hint="args.hint"
+      :disabled="args.disabled"
+      :input-id="args.inputId"
+      :labelLeft="args.labelLeft"
     />
   `,
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
-    },
+  }),
+  args: {
+    label: 'Interrupteur 1',
+    hint: 'Indice',
+    disabled: false,
+    inputId: 'toggle-2',
+    modelValue: true,
+    labelLeft: true,
   },
-})
-InterrupteurAvecLabelAGauche.args = {
-  label: 'Interrupteur 1',
-  hint: 'Indice',
-  disabled: false,
-  inputId: 'toggle-2',
-  modelValue: true,
-  labelLeft: true,
 }
 
-export const InterrupteurAvecBordure = (args) => ({
-  components: { DsfrToggleSwitch },
-  data () {
-    return args
-  },
-  template: `
+export const InterrupteurAvecBordure: Story = {
+  render: (args) => ({
+    components: { DsfrToggleSwitch },
+    setup () {
+      watch(() => args.modelValue, (newVal) => {
+        args.onChange?.(newVal)
+      })
+
+      return {
+        args,
+      }
+    },
+    template: `
     <DsfrToggleSwitch
-      v-model="modelValue"
-      :label="label"
-      :hint="hint"
-      :disabled="disabled"
-      :input-id="inputId"
-      :borderBottom="borderBottom"
+      v-model="args.modelValue"
+      :label="args.label"
+      :hint="args.hint"
+      :disabled="args.disabled"
+      :input-id="args.inputId"
+      :borderBottom="args.borderBottom"
     />
   `,
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
-    },
+  }),
+  args: {
+    label: 'Interrupteur 1',
+    hint: 'Indice',
+    disabled: false,
+    inputId: 'toggle-3',
+    modelValue: true,
+    borderBottom: true,
   },
-})
-InterrupteurAvecBordure.args = {
-  label: 'Interrupteur 1',
-  hint: 'Indice',
-  disabled: false,
-  inputId: 'toggle-3',
-  modelValue: true,
-  borderBottom: true,
 }
 
-export const InterrupteurAvecTextePersonnalisé = (args) => ({
-  components: { DsfrToggleSwitch },
-  data () {
-    return args
-  },
-  template: `
+export const InterrupteurAvecTextePersonnalise: Story = {
+  name: 'Interrupteur Avec Texte Personnalisé',
+  render: (args) => ({
+    components: { DsfrToggleSwitch },
+    setup () {
+      watch(() => args.modelValue, (newVal) => {
+        args.onChange?.(newVal)
+      })
+
+      return {
+        args,
+      }
+    },
+    template: `
     <DsfrToggleSwitch
-      v-model="modelValue"
-      :label="label"
-      :hint="hint"
-      :input-id="inputId"
-      :active-text="activeText"
-      :inactive-text="inactiveText"
+      v-model="args.modelValue"
+      :label="args.label"
+      :hint="args.hint"
+      :disabled="args.disabled"
+      :input-id="args.inputId"
+      :active-text="args.activeText"
+      :inactive-text="args.inactiveText"
     />
   `,
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
-    },
+  }),
+  args: {
+    label: 'Interrupteur 1',
+    hint: 'Indice',
+    inputId: 'toggle-4',
+    modelValue: true,
+    disabled: false,
+    activeText: 'Autorisé',
+    inactiveText: 'Interdit',
   },
-})
-InterrupteurAvecTextePersonnalisé.args = {
-  label: 'Interrupteur 1',
-  hint: 'Indice',
-  inputId: 'toggle-4',
-  modelValue: true,
-  activeText: 'Autorisé',
-  inactiveText: 'Interdit',
-}
+  async play ({ canvasElement }) {
+    const canvas = within(canvasElement)
+    const toggleSwitch = canvas.getByLabelText('Interrupteur 1') as HTMLInputElement
+    expect(toggleSwitch).toHaveProperty('checked', true)
+    toggleSwitch.click()
+    expect(toggleSwitch).toHaveProperty('checked', false)
+    toggleSwitch.click()
+    expect(toggleSwitch).toHaveProperty('checked', true)
 
-export const InterrupteurSansTexte = (args) => ({
-  components: { DsfrToggleSwitch },
-  data () {
-    return args
+    const hint = canvas.getByText('Indice') as HTMLParagraphElement
+    expect(hint).toBeVisible()
   },
-  template: `
+}
+
+export const InterrupteurSansTexte: Story = {
+  render: (args) => ({
+    components: { DsfrToggleSwitch },
+    setup () {
+      watch(() => args.modelValue, (newVal) => {
+        args.onChange?.(newVal)
+      })
+
+      return {
+        args,
+      }
+    },
+    template: `
     <DsfrToggleSwitch
-      v-model="modelValue"
-      :label="label"
-      :hint="hint"
-      :input-id="inputId"
-      :no-text="noText"
+      v-model="args.modelValue"
+      :label="args.label"
+      :hint="args.hint"
+      :disabled="args.disabled"
+      :input-id="args.inputId"
+      :no-text="args.noText"
     />
   `,
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
-    },
+  }),
+  args: {
+    label: 'Interrupteur 1',
+    hint: 'Indice',
+    inputId: 'toggle-5',
+    modelValue: true,
+    disabled: true,
+    noText: true,
   },
-})
-InterrupteurSansTexte.args = {
-  label: 'Interrupteur 1',
-  hint: 'Indice',
-  inputId: 'toggle-5',
-  modelValue: true,
-  noText: true,
-}
-
-InterrupteurAvecTextePersonnalisé.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const toggleSwitch = canvas.getByLabelText('Interrupteur 1') as HTMLInputElement
-  expect(toggleSwitch.checked).toBe(true)
-  toggleSwitch.click()
-  expect(toggleSwitch.checked).toBe(false)
-  toggleSwitch.click()
-
-  const toggleSwitchLabel = canvas.getByText('Interrupteur 1') as HTMLLabelElement
-  toggleSwitchLabel.click()
-  expect(toggleSwitch.checked).toBe(false)
-  toggleSwitchLabel.click()
-  expect(toggleSwitch.checked).toBe(true)
-
-  const hint = canvas.getByText('Indice') as HTMLParagraphElement
-  expect(hint).toBeVisible()
 }

src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue

@@ -19,7 +19,10 @@ const props = withDefaults(defineProps<DsfrToggleSwitchProps>(), {
   name: undefined,
 })
 
-defineEmits<{ (e: 'update:modelValue', payload: boolean): void }>()
+const emit = defineEmits<{
+  /** Émis par le composant DsfrToggleSwitch */
+  'update:modelValue': [payload: boolean]
+}>()
 
 const labelId = computed(() => {
   return `${props.inputId}-hint-text`
@@ -44,7 +47,7 @@ const labelId = computed(() => {
       class="fr-toggle__input"
       :aria-describedby="labelId"
       :name="name"
-      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
     >
     <label
       :id="labelId"