From 4f5eaaacb9ea01e1cb90919a0b7faea43a8f3ac4 Mon Sep 17 00:00:00 2001 From: tristan Date: Wed, 3 Jun 2026 12:11:06 +0200 Subject: [PATCH] =?UTF-8?q?docs=20:=20documentation=20required=20coh=C3=A9?= =?UTF-8?q?rente=20sur=20toute=20la=20famille=20formulaire?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) --- COMPONENTS.md | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index c903924..494db1e 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -2,6 +2,8 @@ Tous les composants sont auto-importés avec le préfixe `Malio`. Utiliser `v-model` pour le binding bidirectionnel sur les composants de formulaire. +> **Champ obligatoire :** sur les composants de formulaire, la prop `required` ajoute un astérisque rouge dans le label. C'est un repère visuel ; la sémantique « obligatoire » est portée par l'attribut natif `required` ou `aria-required`. + --- ## MalioInputText @@ -15,7 +17,7 @@ Champ texte avec label, icône optionnelle et support de masque de saisie. | `modelValue` | `string \| null` | `undefined` | Valeur (v-model) | | `disabled` | `boolean` | `false` | Désactive le champ | | `readonly` | `boolean` | `false` | Lecture seule | -| `required` | `boolean` | `false` | Champ requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | @@ -53,6 +55,7 @@ Champ mot de passe avec toggle visibilité. | `displayIcon` | `boolean` | `true` | Afficher l'icône toggle | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | @@ -79,7 +82,7 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'email'` pour suggérer l'email utilisateur) | | `disabled` | `boolean` | `false` | Désactive le champ | | `readonly` | `boolean` | `false` | Lecture seule | -| `required` | `boolean` | `false` | Champ requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `lowercase` | `boolean` | `false` | Normalise la saisie en minuscules à la frappe | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | @@ -118,7 +121,7 @@ Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outl | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'tel'` pour suggérer un numéro enregistré) | | `disabled` | `boolean` | `false` | Désactive le champ et le bouton + | | `readonly` | `boolean` | `false` | Lecture seule (désactive aussi le bouton +) | -| `required` | `boolean` | `false` | Champ requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | @@ -172,7 +175,7 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr | `minSearchText` | `string` | `'Tapez pour rechercher'` | Texte affiché tant que `minSearchLength` n'est pas atteint | | `disabled` | `boolean` | `false` | Désactive le champ et empêche l'ouverture | | `readonly` | `boolean` | `false` | Lecture seule (n'ouvre pas le dropdown) | -| `required` | `boolean` | `false` | Champ requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur (prioritaire) | | `success` | `string` | `''` | Message de succès | @@ -234,6 +237,7 @@ Champ montant avec icône devise (euro par défaut). | `label` | `string` | `''` | Label | | `iconName` | `string` | `'mdi:currency-eur'` | Icône devise | | `disabled` | `boolean` | `false` | Désactivé | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | **Events :** `update:modelValue(value: string)` @@ -256,6 +260,7 @@ Champ numérique avec boutons +/-. | `min` | `number \| string` | — | Valeur minimum | | `max` | `number \| string` | — | Valeur maximum | | `disabled` | `boolean` | `false` | Désactivé | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | **Events :** `update:modelValue(value: string)` @@ -279,6 +284,7 @@ Zone de texte multiligne avec compteur et redimensionnement. | `maxLength` | `number` | `800` | Longueur max | | `showCounter` | `boolean` | `false` | Afficher le compteur | | `disabled` | `boolean` | `false` | Désactivé | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | | `groupClass` | `string` | `''` | Classes CSS sur la div conteneur (utile pour `row-span-*`, `col-span-*`, etc.) | @@ -417,6 +423,7 @@ Case à cocher. | `label` | `string` | `''` | Label | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | **Events :** `update:modelValue(value: boolean)` @@ -440,6 +447,7 @@ Bouton radio (à utiliser en groupe avec le même `name`). | `name` | `string` | `''` | Nom du groupe radio | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | **Events :** `update:modelValue(value: string | number | boolean | null)` @@ -463,7 +471,7 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f | `name` | `string` | `''` | Attribut name | | `label` | `string` | `''` | Label flottant | | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | -| `required` | `boolean` | `false` | Requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | | `hint` | `string` | `''` | Texte d'aide | @@ -497,7 +505,7 @@ La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD" | `name` | `string` | `''` | Attribut name | | `label` | `string` | `''` | Label flottant | | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | -| `required` | `boolean` | `false` | Requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | | `hint` | `string` | `''` | Texte d'aide | @@ -530,7 +538,7 @@ La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2 | `name` | `string` | `''` | Attribut name | | `label` | `string` | `''` | Label flottant | | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | -| `required` | `boolean` | `false` | Requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | | `hint` | `string` | `''` | Texte d'aide | @@ -560,6 +568,7 @@ Sélecteur d'heure. | `label` | `string` | `''` | Label | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | **Events :** `update:modelValue(value: string)` @@ -582,7 +591,7 @@ Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes in | `label` | `string` | `''` | Label flottant | | `modelValue` | `string \| null` | `undefined` | Heure au format `"HH:MM"` (v-model) | | `placeholder` | `string` | `'HH:MM'` | Placeholder | -| `required` | `boolean` | `false` | Champ requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `disabled` | `boolean` | `false` | Désactive le champ | | `readonly` | `boolean` | `false` | Lecture seule | | `clearable` | `boolean` | `true` | Affiche la croix d'effacement | @@ -615,7 +624,7 @@ La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:M | `name` | `string` | `''` | Attribut name | | `label` | `string` | `''` | Label flottant | | `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | Placeholder | -| `required` | `boolean` | `false` | Requis | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `disabled` | `boolean` | `false` | Désactivé | | `readonly` | `boolean` | `false` | Lecture seule | | `hint` | `string` | `''` | Texte d'aide |