docs: 📝 adapte la documentation du DsfrSelect avec optgroup

Author: JoelPagniez

src/components/DsfrSelect/DsfrSelect.md

@@ -18,6 +18,7 @@ La liste déroulante fournit une liste d’option parmi lesquelles l’utilisate
 | `required`               | `boolean`                                                                                   |                             |             | Indique si le select est obligatoire.                            |
 | `disabled`               | `boolean`                                                                                   |                             |             | Indique si le select est désactivé.                              |
 | `options`                | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]`                        |             | Options à sélectionner                                           |
+| `optionGroups`           | ` ({ label: string, options: (DsfrSelectOption \| { value: DsfrSelectOption, text: string, disabled?: boolean })[], disabled?: boolean })[] `| `[]` |   | Groupes d'options |
 | `label`                  | `string`                                                                                    | `''`                        |             | Texte du label associé au select.                                |
 | `name`                   | `string`                                                                                    |                             |             | Nom du champ.                                                    |
 | `description` deprecated | `string`                                                                                    |                             |             | Deprecated, utiliser hint plutôt.                                |

src/components/DsfrSelect/DsfrSelect.stories.ts

@@ -28,6 +28,11 @@ export default {
       description:
         'Liste des options proposées par le `<select>` à lui passer sous forme de tableau de string ou de tableau d’objets avec une propriété `"text"` et une propriété `"value"`',
     },
+    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`',
+    },
     description: {
       control: 'text',
       description: 'Description optionnelle du `select`',
@@ -386,3 +391,64 @@ ListeDeroulanteAvecOptionsInactives.args = {
   modelValue: 'Option 2',
   required: false,
 }
+
+export const ListeDeroulanteAvecOptionsGroupees = (args) => ({
+  components: {
+    DsfrSelect,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
+      <DsfrSelect
+        :required="required"
+        :label="label"
+        :optionGroups="optionGroups"
+        :description="description"
+        :success-message="successMessage"
+        :error-message="errorMessage"
+        :disabled="disabled"
+        v-model="modelValue"
+      />
+    </div>
+    `,
+
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+})
+
+ListeDeroulanteAvecOptionsGroupees.args = {
+  optionGroups: [
+    {
+      label: 'groupe 1',
+      options: [
+        { value: 'Value 1', text: 'Option 1' },
+        { value: 'Value 2', text: 'Option 2' },
+      ],
+    },
+    {
+      label: 'groupe 2',
+      disabled: true,
+      options: [
+        { value: 'Value 3', text: 'Option 3' },
+        { value: 'Value 4', text: 'Option 4' },
+        { value: 'Value 5', text: 'Option 5' },
+      ],
+    },
+  ],
+  label: 'Selection d’options groupées',
+  description: 'le groupe 1 est actif et le 2 est inactif, l‘option 1 est selectionnée par défaut',
+  successMessage: '',
+  errorMessage: '',
+  disabled: false,
+  modelValue: 'Value 1',
+  required: false,
+}

src/components/DsfrSelect/docs-demo/DsfrSelectDemo.vue

@@ -6,6 +6,7 @@ import DsfrSelect from '../DsfrSelect.vue'
 const selectedOption1 = ref(0)
 const selectedOption2 = ref(null)
 const selectedOption3 = ref('')
+const selectedOption4 = ref('')
 </script>
 
 <template>
@@ -30,6 +31,7 @@ const selectedOption3 = ref('')
       label="Label du select 3"
       border-bottom
       required
+      disabled
       :options="[
         { value: 'Value 1', text: 'Text 1' },
         { value: 'Value 2', text: 'Text 2' },
@@ -39,5 +41,30 @@ const selectedOption3 = ref('')
       ]"
     />
     Select 3 : {{ selectedOption3 }} ({{ typeof selectedOption3 }})
+    <DsfrSelect
+      v-model="selectedOption4"
+      label="Select 4 avec groupes d'options (optgroup) dont 1 est désactivé"
+      border-bottom
+      required
+      :option-groups="[
+        {
+          label: 'groupe 1',
+          options: [
+            { value: 'Value 1', text: 'Text 1' },
+            { value: 'Value 2', text: 'Text 2' },
+          ],
+        },
+        {
+          label: 'groupe 2',
+          disabled: true,
+          options: [
+            { value: 'Value 3', text: 'Text 3' },
+            { value: 'Value 4', text: 'Text 4' },
+            { value: 'Value 5', text: 'Text 5' },
+          ],
+        },
+      ]"
+    />
+    Select 4 : {{ selectedOption4 }} ({{ typeof selectedOption4 }})
   </div>
 </template>