MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
23a9729dcd8b6098f8bb4e844402f0a9548e7444
malio-layer-ui/CHANGELOG.md
T
tristan 336cb9e315 feat(ui) : saisie clavier MalioDate + bouton « + » InputEmail + séparateurs InputAmount (#MUI-42) (#68) 
Cette PR regroupe **trois évolutions** de la librairie (retours ERP).

---

## 1. MalioDate — saisie manuelle au clavier

Ajoute la **saisie manuelle au clavier** `JJ/MM/AAAA` sur `MalioDate` (opt-in via la prop `editable`), en plus de la sélection au calendrier.

- `CalendarField` (interne) gagne un mode `editable` : input non `readonly`, masque maska `##/##/####`, buffer local synchronisé sur la valeur, event `commit` au blur / à Entrée.
- `MalioDate` parse le texte (`parseDisplayToIso`), valide les bornes (`isDateInRange`) et gère un état d'erreur interne fusionné avec la prop `error` du consommateur.
- Le focus ouvre le popover ; la saisie invalide/hors bornes conserve le texte et affiche un message (`invalidMessage`, défaut `Date invalide`) ; la sélection au calendrier ou un changement externe de `modelValue` efface l'erreur.
- **Aucune régression** : `editable` défaut `false` ; le reste de la famille Date (DateRange/DateTime/DateWeek) est inchangé.

Nouvelles props `MalioDate` : `editable` (boolean, défaut false), `invalidMessage` (string, défaut Date invalide).

---

## 2. MalioInputEmail — bouton « + » d'ajout

Ajoute à `MalioInputEmail` le même bouton « + » que `MalioInputPhone` : un bouton optionnel qui émet un event `add` (ex. pour ajouter dynamiquement un autre champ email).

- Props `addable` (défaut `false`), `addIconName` (défaut `mdi:plus`), `addButtonLabel` (défaut `Ajouter une adresse email`) ; nouvel event `add()`.
- L'icône email étant à droite par défaut, une computed `effectiveIconPosition` la **déplace automatiquement à gauche** quand `addable` est actif, libérant la droite pour le bouton.
- Le bouton respecte `disabled`/`readonly` (pas d'émission).
- **Aucune régression** : `addable` défaut `false` ; la logique de sanitisation email (espaces, `lowercase`, caret) est intacte.

---

## 3. MalioInputAmount — séparateurs de milliers

Affiche les montants groupés à la française (`1 234 567,89` : espace pour les milliers, virgule décimale), **en temps réel** pendant la saisie, tout en gardant une valeur émise propre.

- La valeur émise (`modelValue`) reste une **chaîne numérique propre** : point décimal, sans espaces (`'1234567.89'`). Contrat consommateur inchangé.
- Fonctions pures extraites dans `composables/amountFormat.ts` (`normalizeAmount`, `formatGroupedAmount`, helpers curseur) — testées en isolation.
- À la frappe : parse → émission du modèle propre → reformatage groupé → repositionnement du curseur (comptage des caractères significatifs hors espaces).
- `maxLength` borne désormais la **longueur du modèle** (le `maxlength` natif, qui compterait les espaces, est retiré).
- **Activé par défaut** sur tous les `MalioInputAmount` ; format FR figé.

---

Spec et plan des trois features : `docs/superpowers/specs/` et `docs/superpowers/plans/`.

## Plan de test
- [x] `npm run test -- Date.test.ts` → 40 tests OK
- [x] `npm run test -- InputEmail.test.ts` → 52 tests OK
- [x] `npm run test -- amountFormat.test.ts InputAmount.test.ts` → 50 tests OK
- [x] `npm run lint` → 0 erreur
- [ ] Vérif manuelle playground `composant/date` : saisie valide → ISO ; `32/13/2026` → texte conservé + rouge ; sélection calendrier efface l'erreur
- [ ] Vérif manuelle playground `composant/input/inputEmail` : carte « Ajout dynamique » → le « + » ajoute un champ ; icône à gauche + bouton à droite
- [ ] Vérif manuelle playground `composant/input/inputAmount` : carte « Grand montant » → `1234567` s'affiche `1 234 567` en live, `modelValue` émis `1234567` ; curseur cohérent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #68
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-09 15:39:38 +00:00

8.9 KiB
Raw Blame History

Changelog

Liste des évolutions de la librairie Malio layer UI

[0.0.0]

Parameters

Added

  • [#333] Création d'un composant text
  • [#337] Création d'un composant select
  • [#362] Création d'un composant checkbox
  • [#363] Création d'un composant amount
  • [#364] Création d'un composant button radio
  • [#365] Création d'un composant number
  • [#366] Création d'un composant select checkbox
  • [#407] Création d'un composant time
  • Création d'un composant textarea
  • [#MUI-8] Création d'un composant mot de passe
  • [#MUI-9] Création d'un composant upload
  • [#MUI-14] Création d'un composant bouton icône
  • [#MUI-11] Création d'un composant navigation par onglets
  • [#MUI-20] Création d'un composant sidebar
  • [#MUI-23] Revoir la config couleur tailwind
  • [#MUI-10] Création d'un composant bouton
  • [#MUI-2] Faire un MCP pour la librairie de composant
  • [#MUI-15] Création d'un composant drawer
  • [#MUI-22] Création d'un composant datatable
  • [#MUI-27] Création d'un composant sélection de site
  • Création d'un composant rich text (TipTap) avec sortie markdown / HTML
  • [#MUI-30] Création d'un composant email
  • [#MUI-31] Création d'un composant téléphone
  • [#MUI-32] Création d'un composant saisie assistée (autocomplete)
  • [#MUI-34] Revoir le système de playground
  • [#MUI-33] Développer le composant Datepicker
  • [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
  • [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
  • [#MUI-37] Création d'un composant accordéon
  • [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
  • 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 (<MalioButton button-class="w-m-btn-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)
  • [#MUI-42] MalioDate : saisie clavier JJ/MM/AAAA optionnelle (prop editable, masque maska, validation au blur, message invalidMessage)
  • InputEmail : bouton + d'ajout optionnel (prop addable, event add), calqué sur InputPhone ; l'icône email passe à gauche quand le bouton est actif
  • InputAmount : affichage groupé des milliers à la française (1 234 567,89) en temps réel ; modelValue reste propre ('1234567.89') ; maxLength borne la longueur du modèle
  • [#MUI-42] Anneau de focus clavier standardisé (outline 2px m-primary, offset 2px) affiché uniquement à la navigation clavier (jamais au clic souris), sur l'ensemble des champs et contrôles : inputs (Text, Email, Password, Phone, Amount, Number + boutons ±, Upload, TextArea, Autocomplete), Select, SelectCheckbox, famille Date (Date, DateRange, DateTime, DateWeek), Button, ButtonIcon. Mécanique : composable useKbdFocusRing (détection de modalité clavier/souris) + utilitaires CSS .m-focus-ring (éléments à :focus-visible natif) et .m-focus-ring-kbd (champs texte, où :focus-visible se déclenche aussi à la souris)
  • [#MUI-42] Anneau « combo » : quand un dropdown / calendrier est ouvert (Autocomplete, Select, SelectCheckbox, Date), l'anneau entoure le champ et la liste / le calendrier d'un seul tenant, adapté au sens d'ouverture (utilitaires .m-combo-ring-top / .m-combo-ring-bottom)
  • [#MUI-42] Navigation clavier WAI-ARIA APG sur les listes déroulantes : Select et SelectCheckbox gagnent la navigation (flèches, Home/End, Entrée/Espace, Échap, Tab — absente jusque-là), avec scroll automatique de l'option active et aria-activedescendant ; InputAutocomplete complété (scroll auto, ArrowUp ouvre sur la dernière option, Home/End, Tab ferme)
  • [#MUI-42] SelectCheckbox : la ligne « Tout sélectionner » est intégrée à la navigation clavier ; le clic sur toute la ligne d'option (et plus seulement le label) coche/décoche
  • [#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

Changed

  • DataTable : libellés de pagination en français — Préc. / Suiv. (étaient Prev / Next) ; aria-labels déjà en français inchangés.
  • MalioButton : dimensions par défaut w-[180px] / h-[38px] (étaient w-[200px] / h-[40px]).
  • DataTable : tailles par défaut revues — texte header 16px (était 20px), texte body 14px (était 18px), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à 30px de haut, padding de 12px entre le bas du tableau et la barre de pagination, texte header et body passés en noir (text-black, étaient text-m-primary).
  • Select : nouvelle prop fieldClass pour surcharger les classes du field (notamment la hauteur h-[40px] jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à 30px.
  • [#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.
  • [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo ring-2 ring-m-primary/50 à l'anneau standard .m-focus-ring (outline plein, offset 2px), pour l'homogénéité avec les autres composants.

Fixed

  • DataTable : pagination réalignée verticalement après l'introduction du min-h-[1rem] du Select — la barre pagination passe en items-center, et le MalioSelect du sélecteur de perPage est encapsulé dans un wrapper h-12 qui borne sa taille flex à la hauteur du field (le slot vide déborde invisiblement en dessous). Span « Lignes : » et boutons Prev/Page/Next sont désormais centrés exactement sur le field (y=24)
  • Drawer : le slot #footer est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer
  • Hauteur des boutons de pagination du datatable alignée sur le select (40px)
  • Distribution de tailwind.config.ts aux projets consommateurs avec paths content absolus
  • Espace réservé (min-h-[1rem]) pour le paragraphe hint/error/success de 15 composants (Input*, Select*, Time*, CalendarField, Checkbox) — l'apparition d'une erreur ne décale plus les cellules voisines dans une grille
  • InputPhone : la croix + (add button) suit la même cascade d'état que les autres icônes du champ (muted / primary en focus / black quand rempli / danger / success) au lieu d'être figée en primary
  • Select / SelectCheckbox : le chevron suit l'état du champ (muted par défaut, primary à l'ouverture, black avec une option sélectionnée, danger / success en cas d'erreur ou succès) au lieu de text-current
  • InputTextArea : composant single-root (était multi-root) — le wrapper du message ne prend plus sa propre cellule de grille, row-span-2 fonctionne à nouveau
  • Label désactivé en text-m-muted (gris des bordures) au lieu de text-black/60 sur les inputs à floating-label (InputText, Email, Password, Amount, Phone, Upload, Autocomplete, TextArea, RichText)
  • InputAutocomplete : suppression de 4 sources de saut visuel au focus / ouverture (extra translate label, padding grow-height:focus, focus:pl-[11px], !border-b-0 remplacé par !border-b-transparent)
  • Select / SelectCheckbox : mêmes correctifs anti-saut (suppression du padding grow-height:focus et remplacement de !border-b-0 / !border-t-0 par leurs variantes transparent)
  • MalioButton : largeur par défaut alignée sur w-[200px] (au lieu de w-[240px]) pour correspondre au sizing des formulaires de l'app
  • [#MUI-42] RadioButton : ajout d'un focus visible au clavier (outline 2px m-primary, offset 2px) — l'input en appearance-none n'avait aucun indicateur de focus, seul l'outline: auto 1px du navigateur restait, quasi invisible. La navigation native (Tab entre groupes, flèches dans le groupe) reste inchangée
  • [#MUI-42] Checkbox : ajout d'un focus visible au clavier sur la case (outline 2px m-primary, offset 2px) — l'input réel est masqué (clip-path), aucun indicateur n'apparaissait à la tabulation
  • [#MUI-42] Select : le focus reste sur le bouton après sélection (un blur() renvoyait le focus au body, cassant la tabulation clavier — un Tab repartait du haut de page)
Reference in New Issue View Git Blame Copy Permalink