tristan
dc33cf4135
Polish across the form input components, plus two new features and a few
standalone fixes.
Fixes
-----
* Reserve hint/error/success paragraph space (min-h-[1rem]) in 15
components so a single error message no longer shifts neighboring grid
cells: InputText, Email, Password, Phone, Amount, Number, Upload,
Autocomplete, RichText, TextArea, Select, SelectCheckbox, Time,
TimePicker, CalendarField, Checkbox.
* InputPhone: the '+' add button now follows the icon-state cascade
(muted / primary on focus / black when filled / danger / success) like
the other field icons instead of being permanently primary.
* Select and SelectCheckbox: chevron color follows the field state
(muted by default, primary when open, black when an option is
selected, danger / success on error / success) instead of always being
text-current.
* InputTextArea: single-root component (was multi-root). The message
wrapper used to occupy its own grid cell, breaking row-span layouts.
Now flex flex-col, with the textarea area filling the available height
via flex-1 and the message inside the same root.
* Disabled labels use text-m-muted (border-gray) instead of text-black/60
(dark) across InputText, Email, Password, Amount, Phone, Upload,
Autocomplete, TextArea, RichText. Also removes an unreachable
peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60 rule that
twMerge was silently overriding with text-black.
* InputAutocomplete: eliminates four sources of visual jitter when
focusing / opening a field that already has a selected value.
- Drop peer-focus:-translate-y-[1.55rem] extra label translate.
- Drop the .grow-height:focus padding rule (no more height growth or
downward text shift on focus).
- Drop focus:pl-[11px] (no more 1px horizontal jump).
- Replace !border-b-0 with !border-b-transparent so the bottom border
still reserves its 1px while remaining invisible against the
dropdown.
* Select / SelectCheckbox: same anti-jitter treatment.
- Drop .grow-height:focus padding rule (~12px height growth gone).
- Replace !border-b-0 / !border-t-0 with !border-b-transparent /
!border-t-transparent across danger / success / primary branches.
* Button: default width 240px -> 200px to match the form button sizing
used across the app. Test updated to match.
Features
--------
* InputTextArea: scrollbar turns primary blue on focus
(scrollbar-color: rgb(var(--m-primary)) transparent), matching the
Select listbox styling.
* InputAutocomplete: new localFilter prop (default false). When enabled,
filters the options prop client-side based on the input value
(case-insensitive label.includes(query)), so static lists no longer
need a @search listener. Async/API usage keeps the existing behavior.
Playground "Simple statique" and "Avec icône à gauche" examples use
local-filter.
Playground
----------
* client.vue: tighter grid gap (gap-y-5) plus an example error on a
SelectCheckbox to visually exercise the message-space fix.
Tests
-----
All component test files include regression coverage for the above.
720/720 tests pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
4.1 KiB
Markdown
57 lines
4.1 KiB
Markdown
# 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
|
|
|
|
### 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`.
|
|
|
|
### Fixed
|
|
* 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
|