- focusedKey assure exactement un tab focalisable quand l'actif est hors fenêtre
- aria-labelledby conditionnel + fallback aria-label pour panneaux dont le bouton n'est pas rendu
- DOM non-fenêtré identique à l'origine (plus de wrapper flex parasite)
- reset de la fenêtre (startIndex) au remplacement des tabs
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ajout d'une prop maxVisibleTabs activant un fenêtrage carousel (sans
animation) avec flèches gauche/droite. Les flèches sont désactivées aux
bornes, les panneaux hors fenêtre restent montés, et startIndex est
clampé si tabs/maxVisibleTabs changent.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Les options du dropdown (et le « tout sélectionner ») passaient reserveMessageSpace
par défaut → chaque ligne réservait un min-h-[1rem] inutile, d'où le gros espacement.
On force :reserve-message-space=false sur ces Checkbox internes.
Retire aussi la carte de démo playground hors-sujet.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ajoute reserveMessageSpace (défaut true) pour permettre de ne pas réserver
la ligne de message d'aide quand aucun message n'est présent. Comportement
inchangé par défaut. La famille date hérite via $attrs → CalendarField.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ajoute une prop booléenne reserveMessageSpace (défaut true) aux 10 composants
de la famille input. Par défaut, comportement inchangé (ligne message toujours
rendue avec min-h-[1rem]). À false, la ligne ne prend aucun espace en l'absence
de message, et s'affiche sans min-h quand un message est présent.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Le composant accédait à props.modelValue.length sans garde alors que modelValue
était requis ; un usage non bindé (ex. page playground readonly) plantait le rendu SSR.
modelValue devient optionnel avec défaut [].
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bordure noire forcée (même vide), suppression du bleu focus/primary, label
et icône en text-black si rempli sinon text-m-muted, float piloté par isFilled
uniquement en readonly. Bouton clear et astérisque inchangés.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Découple readonly de disabled : le champ affiche border-black + curseur default,
l'icône suit text-black/text-m-muted selon isFilled, et le bouton "add" conserve
son guard onAdd sans porter l'apparence désactivée (opacity-40/cursor-not-allowed).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Applique le traitement readonly canonique (isReadonly, shouldFloatLabel,
mergedInputClass sans grow-height, bordure noire fixe, sans focus:border-m-primary,
mergedLabelClass sans peer-focus, iconStateClass sans isFocused) sur les 6 composants
InputText, InputEmail, InputAmount, InputAutocomplete, InputPassword et InputTextArea.
L'œil de InputPassword reste cliquable en readonly. Tests TDD ajoutés (3 cas par fichier).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Nouveau token de largeur partagé `w-m-btn-action` (150px) exposé via
tailwind.config.ts + CSS var `--m-btn-action-width` dans malio.css.
Themable côté consommateur en redéfinissant la CSS var dans son :root.
- DataTable : pagination réalignée verticalement après l'introduction du
`min-h-[1rem]` sur MalioSelect — la barre passe en `items-center` et le
MalioSelect du sélecteur perPage est encapsulé dans un wrapper `h-12`
qui borne sa taille flex à la hauteur du field. Span « Lignes : » et
boutons Prev/Page/Next désormais centrés exactement sur le field.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui
faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est
désormais frère du body (comme MalioModal) : seul le body défile et le footer
reste fixé en bas. Tests, story, pages playground et doc alignés.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
| | |
## Description de la PR
## Modification du .env
## Check list
- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié
Reviewed-on: #50
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
Ajoute deux boutons à la toolbar avec popover en palette pour
appliquer une couleur de texte ou un surlignage sur la sélection.
- Extensions TipTap : @tiptap/extension-text-style,
@tiptap/extension-color, @tiptap/extension-highlight (multicolor).
- Palette de 8 couleurs (texte) + 8 pastels (surlignage) + reset.
- Indicateur de couleur active sous l'icône.
- Fermeture du popover sur clic extérieur, Echap, ou clic dans
l'éditeur.
- Inclut les améliorations rendu/markdown du commit précédent
(default outputFormat html, normalizeEditorInput, styles deep
pour h2/h3/p/ul/ol/blockquote).
- Tests : 4 nouveaux cas (15 au total).
- Story et COMPONENTS.md à jour.
Note : les couleurs ne sont pas sérialisables en markdown ; pour
les conserver au save/reload utiliser output-format=\"html\".
Co-Authored-By: RuFlo <ruv@ruv.net>
tristan
matthieu