feat(ui) : gabarit fantome de saisie + saisie clavier DateTime + fix clear (#MUI-43)

- gabarit fantome progressif sur la famille Date editable (Date, DateTime) :
  le format s'affiche en gris et se remplit au fil de la saisie (overlay ghost)
- separateurs (/, espace, :) poses automatiquement (maska eager)
- espace insecable pour eviter le collage « 12/12/1999HH:MM »
- CalendarField : prop placeholderTemplate (masque maska derive), remplace mask
- fix : la croix reinitialise la saisie clavier meme apres une date invalide
- tests + COMPONENTS.md + CHANGELOG.md

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-11 17:11:30 +02:00
parent fee894e895
commit b77ab37cf4
6 changed files with 119 additions and 8 deletions
+3 -1
View File
@@ -51,7 +51,9 @@ Liste des évolutions de la librairie Malio layer UI
* [#MUI-42] InputUpload : prop `clearable` (croix `mdi:close` focusable qui vide le champ + event `clear`) et ouverture du sélecteur de fichier au clavier (Entrée / Espace)
* [#MUI-42] Famille Date : ouverture du calendrier au clavier (Entrée / Espace), fermeture par Échap
* [#MUI-43] MalioDate : event `update:valid` (booléen) exposant l'état de validité de la saisie (`false` sur date malformée ou hors `min`/`max`, qui n'émet pas `modelValue`) — permet au parent de bloquer le submit ; la validité ne couvre pas `required` (champ vide = valide)
* [#MUI-43] MalioDateTime : saisie clavier `JJ/MM/AAAA HH:MM` optionnelle (prop `editable`, masque maska, `invalidMessage`) + même event `update:valid` que MalioDate (mêmes règles, émis dès le montage). CalendarField : masque maska configurable via prop `mask` (défaut `##/##/####` inchangé). Nouveau parseur `parseDisplayToIsoDateTime`.
* [#MUI-43] MalioDateTime : saisie clavier `JJ/MM/AAAA HH:MM` optionnelle (prop `editable`, masque maska, `invalidMessage`) + même event `update:valid` que MalioDate (mêmes règles, émis dès le montage). Nouveau parseur `parseDisplayToIsoDateTime`.
* [#MUI-43] Famille Date editable (MalioDate, MalioDateTime) : gabarit fantôme progressif — le format (`JJ/MM/AAAA` / `JJ/MM/AAAA HH:MM`) s'affiche en gris et se remplit au fil de la saisie (tapé en noir, reste en gris) ; séparateurs (`/`, espace, `:`) posés automatiquement dès qu'un groupe est complet (maska `eager`). CalendarField : prop `placeholderTemplate` (le masque maska en est dérivé), remplace l'ancienne mécanique de masque codé en dur.
* [#MUI-43] CalendarField : la croix d'effacement réinitialise désormais la saisie clavier même après une date invalide (le `v-model` restant `null`, le champ se vidait pas).
### Changed
* DataTable : libellés de pagination en français — `Préc.` / `Suiv.` (étaient `Prev` / `Next`) ; aria-labels déjà en français inchangés.