diff --git a/CHANGELOG.md b/CHANGELOG.md index 99ac67f..b3fa992 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,8 @@ Liste des évolutions de la librairie Malio layer UI * InputAutocomplete : prop `localFilter` pour le filtrage côté client des listes statiques (case-insensitive `label.includes(query)`), sans avoir à brancher `@search` * InputTextArea : la scrollbar passe en primary (bleu) au focus, comme la liste du Select * Token Tailwind partagé `w-m-btn-action` (150px) exposé via `tailwind.config.ts` + CSS var `--m-btn-action-width` dans `malio.css` — utilisable côté consommateur pour les boutons d'action (``), themable en redéfinissant la CSS var +* [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire (Select, SelectCheckbox, InputUpload, InputRichText gagnent la prop) +* [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`) ### Changed * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`. diff --git a/COMPONENTS.md b/COMPONENTS.md index 4a88b30..c903924 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -80,6 +80,7 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin | `disabled` | `boolean` | `false` | Désactive le champ | | `readonly` | `boolean` | `false` | Lecture seule | | `required` | `boolean` | `false` | Champ requis | +| `lowercase` | `boolean` | `false` | Normalise la saisie en minuscules à la frappe | | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | @@ -91,6 +92,8 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin | `labelClass` | `string` | `''` | Classes CSS label | | `groupClass` | `string` | `''` | Classes CSS conteneur | +> **Sanitisation à la saisie :** tous les espaces sont supprimés automatiquement au fil de la frappe (sans masque). Avec `lowercase=true`, la valeur est également convertie en minuscules à la frappe. La validation du format (ex. présence d'un `@`) reste à la charge du parent via la prop `error` ou la couche de validation. + **Events :** `update:modelValue(value: string)` ```vue @@ -304,6 +307,7 @@ Zone de texte multiligne avec compteur et redimensionnement. | `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) | | `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar | | `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) | +| `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 | @@ -334,6 +338,7 @@ Champ d'upload de fichier. | `accept` | `string` | `''` | Types de fichiers acceptés | | `displayIcon` | `boolean` | `true` | Afficher l'icône | | `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)`, `file-selected(file: File)` @@ -358,6 +363,7 @@ Liste déroulante. | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | | `disabled` | `boolean` | `false` | Désactivé | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) | | `rounded` | `string` | `'rounded-md'` | Classe border-radius | | `textField` | `string` | `'text-lg'` | Classe taille texte bouton | @@ -389,6 +395,7 @@ Liste déroulante multi-sélection avec checkboxes. | `selectAllLabel` | `string` | `'Tout sélectionner'` | Texte du sélecteur global | | `label` | `string` | `''` | Label | | `disabled` | `boolean` | `false` | Désactivé | +| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide | **Events :** `update:modelValue(value: (string | number)[])`