docs(radio) : documente MalioRadioGroup (COMPONENTS + CHANGELOG)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-24 16:41:42 +02:00
parent 8d7abc3406
commit 29c2bf48d3
2 changed files with 39 additions and 0 deletions
+38
View File
@@ -499,6 +499,44 @@ Bouton radio (à utiliser en groupe avec le même `name`).
---
## MalioRadioGroup
Groupe de boutons radio : possède la valeur, le `name` partagé et **un seul** message (erreur/succès/aide) avec espace réservé comme les autres champs — un groupe en ligne s'aligne donc avec un `MalioSelect` voisin. Les options sont déclarées via `:options` ou via le slot par défaut (`<MalioRadioButton>`).
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `modelValue` | `string \| number \| boolean \| null` | `undefined` | Valeur sélectionnée (v-model) |
| `options` | `{label, value, disabled?}[]` | `[]` | Options déclaratives |
| `label` | `string` | `''` | Label de groupe (legend, lié par `aria-labelledby`) |
| `name` | `string` | auto | Nom natif partagé des radios |
| `inline` | `boolean` | `false` | Disposition horizontale |
| `disabled` | `boolean` | `false` | Désactive tout le groupe |
| `readonly` | `boolean` | `false` | Lecture seule |
| `required` | `boolean` | `false` | Champ requis (astérisque dans la legend) |
| `hint` / `error` / `success` | `string` | `''` | Message unique du groupe |
| `reserveMessageSpace` | `boolean` | `true` | Réserve la ligne de message (alignement) |
| `groupClass` / `inputClass` / `labelClass` | `string` | `''` | Overrides `twMerge` |
**Events :** `update:modelValue(value: string | number | boolean | null)`
**Accessibilité :** conteneur `role="radiogroup"`, `aria-labelledby` (si `label`), `aria-invalid` et `aria-describedby` sur le message unique. Les radios enfants héritent de l'état d'erreur/désactivé du groupe.
```vue
<MalioRadioGroup
v-model="prestation"
:options="[{label: 'Oui', value: 'oui'}, {label: 'Non', value: 'non'}]"
inline
error="Sélection requise"
/>
<MalioRadioGroup v-model="civilite" label="Civilité" inline>
<MalioRadioButton value="M" label="Monsieur" />
<MalioRadioButton value="Mme" label="Madame" />
</MalioRadioGroup>
```
---
## MalioDate
Sélecteur de date unique avec popover (grille de calendrier + vue mois/année).