refactor(DsfrSelect): ✨ modernise les composants et migration CSF3 partielle

## Pourquoi les changements ont été faits :
- Amélioration de la documentation des slots avec defineSlots
- Modernisation de la syntaxe des émissions d'événements
- Migration partielle vers le format Storybook CSF3
- Harmonisation avec les conventions du projet

## Quelles modifications ont été apportées :
- Ajout de defineSlots() avec documentation complète des slots
- Migration de la syntaxe emit vers le format moderne avec documentation
- Conversion de la première story au format CSF3
- Ajout de la prop label dans les argTypes de Storybook
- Utilisation de hint au lieu de description (suivant la dépréciation)

Author: laruiss

src/components/DsfrSelect/DsfrSelect.stories.ts

@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import { fn } from 'storybook/test'
 
 import DsfrSelect from './DsfrSelect.vue'
@@ -17,12 +19,12 @@ export default {
     required: {
       control: 'boolean',
       description:
-        'Option permettant de rendre ce champ de formulaire obligatoire et d’assigner au label un astérisque afin de rendre ce changement visible',
+        'Option permettant de rendre ce champ de formulaire obligatoire et d'assigner au label un astérisque afin de rendre ce changement visible',
+    },
+    label: {
+      control: 'text',
+      description: 'Label associé au `select`, donne le focus sur ce dernier au clic',
     },
-    // label: {
-    //   control: 'text',
-    //   description: 'Label associé au `select`, donne le focus sur ce dernier au clic',
-    // },
     options: {
       control: 'object',
       description:
@@ -31,11 +33,15 @@ export default {
     optionGroups: {
       control: 'object',
       description:
-        'Liste des options groupées proposées par le `<select>` à lui passer sous forme de tableau d’objets (groupe) avec une propriété `"label"` et une propriété options qui est un tableau d‘options`',
+        'Liste des options groupées proposées par le `<select>` à lui passer sous forme de tableau d'objets (groupe) avec une propriété `"label"` et une propriété options qui est un tableau d'options`',
+    },
+    hint: {
+      control: 'text',
+      description: 'Texte d'aide associé au champ',
     },
     description: {
       control: 'text',
-      description: 'Description optionnelle du `select`',
+      description: 'Description optionnelle du `select` (déprécié, utiliser `hint`)',
     },
     successMessage: {
       control: 'text',
@@ -60,46 +66,37 @@ export default {
       control: 'boolean',
       description: 'Option empêchant toute interaction avec le `select`',
     },
-    'update:modelValue': {
-      control: 'text',
-      description: 'Événement émis lors du changement de l’option sélectionnée',
-    },
-    onChange: {
+    'onUpdate:modelValue': {
       action: fn(),
+      description: 'Événement émis lors du changement de l'option sélectionnée (visible dans l'onglet ***Actions*** de Storybook)',
     },
   },
-}
+} satisfies Meta<typeof DsfrSelect>
 
-export const ListeDeroulante = (args) => ({
-  components: {
-    DsfrSelect,
-  },
+export default meta
+type Story = StoryObj<typeof meta>
 
-  data () {
-    return {
-      ...args,
-    }
-  },
-
-  template: `
-    <DsfrSelect
-      :required="required"
-      :label="label"
-      :options="options"
-      :description="description"
-      :success-message="successMessage"
-      :error-message="errorMessage"
-      :disabled="disabled"
-      v-model="modelValue"
-    />
-  `,
-
-  watch: {
-    modelValue (newVal) {
-      this.onChange(newVal)
+export const ListeDeroulante: Story = {
+  render: (args) => ({
+    components: { DsfrSelect },
+    setup() {
+      return { args }
     },
-  },
-})
+    template: `
+      <DsfrSelect
+        :required="args.required"
+        :label="args.label"
+        :options="args.options"
+        :hint="args.hint"
+        :success-message="args.successMessage"
+        :error-message="args.errorMessage"
+        :disabled="args.disabled"
+        v-model="args.modelValue"
+        @update:model-value="args['onUpdate:modelValue']"
+      />
+    `,
+  }),
+}
 
 ListeDeroulante.args = {
   options: [
@@ -110,8 +107,8 @@ ListeDeroulante.args = {
     'Option 5',
     'Option 6',
   ],
-  label: 'Selection d’options',
-  description: 'Je suis une description, je décris, c’est ma raison d’être',
+  label: 'Sélection d'options',
+  hint: 'Je suis une description, je décris, c'est ma raison d'être',
   successMessage: '',
   errorMessage: '',
   disabled: false,

src/components/DsfrSelect/DsfrSelect.vue

@@ -25,7 +25,24 @@ const props = withDefaults(defineProps<DsfrSelectProps>(), {
   defaultUnselectedText: 'Sélectionner une option',
 })
 
-defineEmits<{ (e: 'update:modelValue', payload: string | number): void }>()
+defineEmits<{
+  /** Événement émis lors du changement de l'option sélectionnée */
+  'update:modelValue': [payload: string | number]
+}>()
+
+defineSlots<{
+  /**
+   * Slot pour personnaliser tout le contenu de la balise <label>
+   * cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise).
+   * Une **props porte le même nom pour un label simple** (texte sans mise en forme)
+   */
+  label: () => any
+  /**
+   * Slot pour indiquer que le champ est obligatoire.
+   * Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`)
+   */
+  'required-tip': () => any
+}>()
 
 if (props.description) {
   console.warn(
@@ -50,10 +67,8 @@ const messageType = computed(() => {
       class="fr-label"
       :for="selectId"
     >
-      <!-- @slot Slot pour personnaliser tout le contenu de la balise <label> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour un label simple** (texte sans mise en forme) -->
       <slot name="label">
         {{ label }}
-        <!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
         <slot name="required-tip">
           <span
             v-if="required"