docs: 📝 ajoute la documentation pour segmented

Author: laruiss

.vitepress/config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   appearance: { listenToStorageChanges: false }, // handling this in Story.vue itself to avoid flickering
 
   rewrites: {
+    'src/components/DsfrSegmented/DsfrSegmentedSet.md': 'composants/DsfrSegmentedSet.md',
     'src/components/:comp/:comp.md': 'composants/:comp.md',
     'docs/:splat*': ':splat*',
   },
@@ -100,6 +101,14 @@ export default defineConfig({
             text: 'DsfrNotice',
             link: '/composants/DsfrNotice.md',
           },
+          {
+            text: 'DsfrSegmented',
+            link: '/composants/DsfrSegmented.md',
+          },
+          {
+            text: 'DsfrSegmentedSet',
+            link: '/composants/DsfrSegmentedSet.md',
+          },
         ]
       },
       {

.vitepress/theme/icons.ts

@@ -1,4 +1,5 @@
 export {
+  GiChocolateBar,
   RiCloseLine,
   RiArrowDropDownLine,
   RiArrowDropUpLine,

docs/types.md

@@ -174,6 +174,12 @@ outline: [2,3]
 <<< ../src/components/DsfrSearchBar/DsfrSearchBar.types.ts
 :::
 
+### `DsfrSegmented` et `DsfrSegmentedSet`
+
+::: code-group
+<<< ../src/components/DsfrSegmented/DsfrSegmented.types.ts
+:::
+
 ### `DsfrSelect`
 
 ::: code-group

src/components/DsfrBackToTop/DsfrBactToTop.md

@@ -0,0 +1,61 @@
+# Documentation du Composant `DsfrSegmented`
+
+👋 Bonjour et bienvenue dans la documentation de `DsfrSegmented`, un composant radio boutonné avec une touche de « je ne sais quoi » à la française! C'est chic, c'est pratique, et en plus, ça supporte des icônes. Alors, allons-y !
+
+Le composant « contrôle segmenté » incite l'utilisateur à choisir entre plusieurs options d'affichage disponibles (vues), mutuellement exclusives avec une valeur sélectionnée par défaut (oui, ça c’est la version sérieuse de l’introduction à ce composant).
+
+La documentation sur les boutons segmentés sur le [DSFR sera ici](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/controle-segmente) (n’existe pas encore à l’heure où cette documentation est écrite, on est dans l’turfu, nous, qu’on vous dit !).
+
+La story sur l’alerte sur le storybook de [VueDsfr est ici](https://vue-ds.fr/?path=/docs/composants-dsfrsegmented--docs) (merci [Vincent Lainé](https://github.com/vincentlaine/) !).
+
+## Props
+
+| Nom        | Type                                     | Défaut         | Description                                                       |
+|------------|------------------------------------------|----------------|-------------------------------------------------------------------|
+| `id`       | `string`                                 | ID aléatoire   | Identifiant unique pour le composant.                             |
+| `name`     | `string`                                 | `undefined`    | Nom du groupe de boutons radio.                                   |
+| `modelValue` | `string \| number`                      | `''`           | La valeur actuellement sélectionnée.                             |
+| `value`    | `string \| number`                        | (requis)       | Valeur du bouton radio.                                           |
+| `label`    | `string`                                 | `''`           | Texte du label associé au bouton.                                 |
+| `disabled` | `boolean`                                | `false`        | Si `true`, désactive le bouton radio.                             |
+| `icon`     | `string \| InstanceType<typeof VIcon>['$props']` | `undefined` | Icône à afficher à côté du label (facultatif). Si la valeur est une string commençant par `'fr-'`, cette classe sera ajoutée à la balise `<label>`, sinon c’est une icône OhVueIcon qui sera utilisée                   |
+
+::: info Astuce 1
+
+`id`: Si non fourni, un ID est généré automatiquement pour éviter les conflits.
+
+:::
+
+::: info Astuce 2
+
+`icon`: Peut être soit une chaîne représentant le nom de l'icône, soit un objet de props pour `VIcon`.
+
+:::
+
+## Événements
+
+| Nom                | Valeur               | Description                                  |
+|--------------------|----------------------|----------------------------------------------|
+| `update:modelValue` | `string \| number`   | Émis lorsqu'une nouvelle valeur est sélectionnée. |
+
+## Slots
+
+Pas de slots ici ! Ce composant est aussi direct qu'un express Paris-Marseille.
+
+## Exemple
+
+```vue
+<DsfrSegmented
+  name="group1"
+  label="Option 1"
+  value="opt1"
+  v-model="selectedOption"
+  icon="some-icon-name"
+/>
+```
+
+`DsfrSegmented` s’utilise forcément à l’intérieur d’un `DsfrSegmentedSet`, ainsi, pour un résultat, consultez la documentation de [`DsfrSegmentedSet`](/composants/DsfrSegmentedSet).
+
+---
+
+Voilà ! Votre composant `DsfrSegmented` est prêt à ajouter une touche d'élégance et de fonctionnalité à votre interface. Amusez-vous bien ! 🎉

src/components/DsfrSegmented/DsfrSegmented.md

@@ -1,22 +1,29 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
+
 import { getRandomId } from '../../utils/random-utils'
 
 import type { DsfrSegmentedProps } from './DsfrSegmented.types'
-import { computed } from 'vue'
 
 export type { DsfrSegmentedProps }
 
 const props = withDefaults(defineProps<DsfrSegmentedProps>(), {
   id: () => getRandomId('basic', 'checkbox'),
-  modelValue: '',
-  label: '',
   hint: '',
   icon: undefined,
+  label: '',
+  modelValue: '',
+  name: undefined,
 })
 
 defineEmits<{(e: 'update:modelValue', payload: string | number): void}>()
 
 const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon } : props.icon)
+
+const dsfrIcon = computed(() => {
+  return props.icon && typeof props.icon === 'string' && props.icon.startsWith('fr-') ? props.icon : ''
+})
 </script>
 
 <template>
@@ -36,9 +43,10 @@ const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.
     <label
       :for="id"
       class="fr-label"
+      :class="{ [dsfrIcon]: dsfrIcon }"
     >
       <VIcon
-        v-if="icon"
+        v-if="icon && !dsfrIcon"
         v-bind="iconProps"
       />
       <span v-if="icon">&nbsp;</span>

src/components/DsfrSegmented/DsfrSegmented.vue

@@ -0,0 +1,84 @@
+# Contrôle segmenté - `DsfrSegmentedSet`
+
+🌟 Bienvenue dans l'univers de `DsfrSegmentedSet`, le chef d'orchestre de vos composants radio boutonnés `DsfrSegmented`. Ce composant est là pour vous aider à organiser et afficher un ensemble de choix avec élégance et fonctionnalité. Préparez-vous, ça va être aussi sympa qu'une balade sur la Seine !
+
+Le composant « contrôle segmenté » incite l'utilisateur à choisir entre plusieurs options d'affichage disponibles (vues), mutuellement exclusives avec une valeur sélectionnée par défaut (Il faut toujours ramener un peu de sérieux dans l’affaire...).
+
+La documentation sur les boutons segmentés sur le [DSFR sera ici](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/controle-segmente) (n’existe pas non plus à l’heure où cette documentation est écrite, on est trop en avance, nous !).
+
+La story sur l’alerte sur le storybook de [VueDsfr est ici](https://vue-ds.fr/?path=/docs/composants-dsfrsegmentedset--docs) (oui parce que nous on fait rien à moitié, nous 😏, merci [Vincent Lainé](https://github.com/vincentlaine/) !).
+
+## Props
+
+| Nom         | Type                                  | Défaut         | Description                                                    |
+|-------------|---------------------------------------|----------------|----------------------------------------------------------------|
+| `titleId`   | `string`                              | ID aléatoire   | Identifiant unique pour le titre du groupe.                    |
+| `disabled`  | `boolean`                             | `false`        | Si `true`, désactive tous les boutons radio du groupe.         |
+| `small`     | `boolean`                             | `false`        | Si `true`, Utilise la version réduite des contrôles segmentés.       |
+| `inline`    | `boolean`                             | `false`        | Si `true`, la légende sera alignée avec les boutons, sinon, ils seront chacun sur une ligne (`false`, défaut).                       |
+| `name`      | `string`                              | `'no-name'`    | Nom par défaut pour le groupe de boutons radio.                |
+| `hint`      | `string`                              | `undefined`    | Texte d'indice affiché sous la légende (facultatif).           |
+| `legend`    | `string`                              | `''`           | Texte de la légende pour le groupe de boutons radio.           |
+| `modelValue`| `string \| number`                    | (requis)       | La valeur actuellement sélectionnée.                           |
+| `options`   | `DsfrSegmentedProps[]`                | `[]`           | Tableau d’objets : chaque objet contient les props à passer à [`DsfrSegmented`](/composants/DsfrSegmented).                    |
+
+### Notes
+
+- `titleId`: Généré automatiquement si non spécifié.
+- `options`: Chaque élément représente un bouton radio avec ses props spécifiques.
+
+## Événements
+
+| Nom                | Valeur               | Description                                  |
+|--------------------|----------------------|----------------------------------------------|
+| `update:modelValue` | `string \| number`   | Émis lorsqu'une nouvelle valeur est sélectionnée dans le groupe. |
+
+## Slots
+
+1. **slot par défaut**: Permet de personnaliser les boutons radio individuellement.
+2. **Slot `legend`**: Permet de personnaliser la légende avec du contenu riche.
+
+## Exemple
+
+```vue
+<DsfrSegmentedSet
+  legend="Votre Choix"
+  :options="[
+    {
+      label: 'Croissant',
+      value: 'croissant',
+    },
+    {
+      label: 'Pain au chocolat (noooon ! Cho-co-la-tine ! C’est pas compliqué, pourtant !)',
+      value: 'chocolatine',
+      disabled: true,
+    }
+  ]"
+  v-model="selectedOption"
+/>
+```
+
+## Utilisation
+
+Assurez-vous d'importer `DsfrSegmentedSet` ainsi que `DsfrSegmented` dans votre projet. Puis, utilisez-le dans votre template en fournissant les props et les options nécessaires.
+
+::: code-group
+
+<Story data-title="Démo" min-h="150px">
+  <DsfrSegmentedDemo />
+</Story>
+
+<<< docs-demo/DsfrSegmentedDemo.vue [Code de la démo]
+
+<<< DsfrSegmentedSet.vue
+<<< DsfrSegmented.vue
+<<< DsfrSegmented.types.ts
+:::
+
+<script setup lang="ts">
+import DsfrSegmentedDemo from './docs-demo/DsfrSegmentedDemo.vue'
+</script>
+
+---
+
+Voilà, vous êtes prêt à utiliser `DsfrSegmentedSet` pour créer un ensemble élégant et fonctionnel de boutons radio. À vos marques, prêt, codez ! 🚀

src/components/DsfrSegmented/DsfrSegmentedSet.md

@@ -13,7 +13,7 @@ export default {
     },
     inline: {
       control: 'boolean',
-      description: 'Indique si la légende doit être allignée avec les boutons (`true`) ou chacun sur une ligne (`false`, défaut)',
+      description: 'Indique si la légende doit être alignée avec les boutons (`true`) ou chacun sur une ligne (`false`, défaut)',
     },
     name: {
       control: 'text',

src/components/DsfrSegmented/DsfrSegmentedSet.stories.ts

@@ -58,8 +58,8 @@ const onChange = ($event: string) => {
           <DsfrSegmented
             v-for="(option, i) of options"
             :key="option.value || i"
-            :name="name"
-            v-bind="option"
+            :name="name || option.name"
+            v-bind="{ ...option, disabled: disabled || option.disabled }"
             :model-value="modelValue"
             @update:model-value="onChange($event as string)"
           />

src/components/DsfrSegmented/DsfrSegmentedSet.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import DsfrSegmented from '../DsfrSegmented.vue'
+import DsfrSegmentedSet from '../DsfrSegmentedSet.vue'
+
+const region = ref<string | number>('')
+const viennoiserie = ref<string | number>('')
+
+const options = [
+  { label: 'Sud-ouest', value: 'Chocolatine' },
+  { label: 'Ailleurs', value: 'Pain au chocolat' },
+]
+</script>
+
+<template>
+  <div class="fr-container">
+    <div>
+      <DsfrSegmentedSet
+        name="region"
+        label="Région"
+        :options="options"
+        @update:model-value="region = $event"
+      />
+    </div>
+
+    <div
+      v-if="region"
+      class="fr-mt-4w"
+    >
+      <DsfrSegmentedSet
+        name="viennoiserie"
+        label="Viennoiserie"
+      >
+        <DsfrSegmented
+          icon="fr-icon-moon-line"
+          label="Croissant"
+          value="croissant"
+          :model-value="viennoiserie"
+          @update:model-value="viennoiserie = $event"
+        />
+        <DsfrSegmented
+          :label="region.toString()"
+          value="chocolatine"
+          :icon="{ name: 'gi-chocolate-bar' }"
+          :model-value="viennoiserie"
+          @update:model-value="viennoiserie = $event"
+        />
+      </DsfrSegmentedSet>
+      <p>
+        Vrai nom : {{ viennoiserie }}
+      </p>
+    </div>
+  </div>
+</template>