fix: MalioMultiSelect #92
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: MALIO-DEV/malio-layer-ui#92
Reference in New Issue
Block a user
Delete Branch "develop"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Description de la PR
Modification du .env
Check list
## Résumé Nouveau composant `MalioInputRichText` : éditeur WYSIWYG basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**, aligné sur le thème Malio (couleurs `m-*`, icônes `mdi:*`, états error / success / hint). ## Détails - **Toolbar** : gras, italique, barré, H2, H3, liste à puces, liste numérotée, citation, code inline, bloc de code, lien (prompt URL), undo / redo - **Sortie** : `markdown` (par défaut) ou `html` via la prop `outputFormat` - **Modes** : `editable`, `disabled`, `readonly` ; mode lecture seule (`editable=false`) rend le contenu en `prose` sans toolbar - **Accessibilité** : label `for/id`, `aria-invalid`, `aria-describedby`, `aria-pressed` sur les boutons toolbar - **Style** : floating focus border `m-primary`, error `m-danger`, success `m-success`, toolbar `bg-m-bg` ## Dépendances ajoutées (purement additives, aucun bump existant) - `@tiptap/vue-3` ^3.22.5 - `@tiptap/starter-kit` ^3.22.5 - `@tiptap/extension-placeholder` ^3.22.5 - `@tiptap/pm` ^3.22.5 - `tiptap-markdown` ^0.9.0 > Note : `@tiptap/extension-link` n'est pas installé séparément car StarterKit v3 l'inclut nativement (configuré via `StarterKit.configure({ link: { ... } })`). ## Test plan - [x] `npm run test` — 315/315 (12 nouveaux tests sur InputRichText) - [x] `npm run lint` — 0 erreur sur les fichiers ajoutés - [x] `npm run story:build` — Histoire build OK (story `Input/RichText` listée) - [x] `npm run dev` — playground `/composant/input/inputRichText` (vérification visuelle des 8 variantes : simple, hint, erreur, succès, readonly, disabled, lecture seule, sortie HTML) - [x] `npm run story:dev` — story `Input/RichText` avec docs ## Fichiers - `app/components/malio/input/InputRichText.vue` — composant - `app/components/malio/input/InputRichText.test.ts` — tests - `.playground/pages/composant/input/inputRichText.vue` — playground - `app/story/input/inputRichText.story.vue` — story Histoire - `histoire.config.ts` — alias ESM + `optimizeDeps` pour `tiptap-markdown` (sinon Histoire choisit la build UMD) - `CHANGELOG.md`, `COMPONENTS.md` — documentation Reviewed-on: #37 Co-authored-by: matthieu <matthieu@yuno.malio.fr> Co-committed-by: matthieu <matthieu@yuno.malio.fr>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>Ticket MUI-43 : exposer l'état de validité de MalioDate (saisie invalide avalée silencieusement) + portage de la saisie clavier sur MalioDateTime. ## Contenu **MalioDate** - Nouvel event `update:valid(boolean)` : `false` sur saisie malformée ou hors min/max (qui n'émet pas `modelValue`), `true` sinon ; émis dès le montage. La validité ne couvre pas `required` (champ vide = valide). **MalioDateTime** - Prop `editable` : saisie clavier `JJ/MM/AAAA HH:MM` (masque maska, validation au blur/Entrée, `invalidMessage`) + même `update:valid`. - Nouveau parseur `parseDisplayToIsoDateTime`. **Famille Date editable (Date + DateTime)** - Gabarit fantôme progressif : le format s'affiche en gris et se remplit au fil de la saisie (overlay ghost mirror, texte de l'input transparent). - Séparateurs (/, espace, :) posés automatiquement (maska `eager`), espace insécable pour éviter le collage `12/12/1999HH:MM`. - `CalendarField` : prop `placeholderTemplate` (le masque maska en est dérivé). **Corrections** - La croix d'effacement réinitialise la saisie clavier même après une date invalide (le v-model restant null, le champ ne se vidait pas). - Fix d'un test `Date.test.ts` cassé sur develop (`trigger('keydown.enter')` envoie key='enter' ≠ handler `e.key === 'Enter'`). ## Portée MalioDate seul pour la validité (les cousins DateRange/DateWeek n'ont pas de saisie clavier donc pas le bug). Sémantique `valid` = malformé only. ## Tests `app/components/malio/date/` : 187/187, ESLint propre. Vérifié visuellement dans le playground (page Date & heure). ## Doc COMPONENTS.md + CHANGELOG.md à jour. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #71 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>## MUI-45 — MalioDate : statut par jour (`markedDates`) + event `@month-change` Étend la famille `date` du layer de façon **générique** (aucune logique métier dans le layer) pour marquer des jours et exposer le mois affiché. **Bloquant** pour le ticket SIRH « Heures (vue Jour) : calendrier avec jours validés en vert ». ### Changements - **`MonthGrid.vue`** : prop `markedDates?: Record<string /* ISO yyyy-mm-dd */, 'success' | 'danger'>`. Fond tokenisé par jour (`bg-m-success/15` / `bg-m-danger/15`, par opacité — pas de nouveau token). **Précédence** : sélection (primary) > variante marquée ; le jour courant (`today`) **garde sa bordure ET reçoit le fond marqué**. - **`CalendarField.vue`** : emit `month-change { month: 0-11, year }` à l'ouverture du popover **et** à chaque navigation de mois. - **`Date.vue`** : expose `markedDates` (passée à `MonthGrid` via le slot) et réémet `month-change`. > `success` et `danger` suffisent dans un premier temps (pas de `warning`). > `month` est **0-11** (état brut de `useCalendarView`). ### Tests - `MonthGrid.test.ts` (nouveau) : variantes success/danger, précédence sélection, today marqué (bordure + fond) / non marqué. - `Date.test.ts` (+5) : `month-change` à l'ouverture (mois courant / mois de la valeur), à chaque nav, non ré-émis après fermeture, passthrough `markedDates`. - Suite complète : **998/998** verts, lint clean. ### Doc / démo - `COMPONENTS.md` (section MalioDate) + `CHANGELOG.md` (`[#MUI-45]`). - Story `app/story/date/datePicker.story.vue` + playground `.playground/pages/composant/date/date.vue`. ### Reste à faire (hors PR) - Publier une version du layer **> 1.4.6** incluant la famille `date` (débloque SIRH). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #76 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.