feat(ui) : required cohérent + astérisque label + sanitisation email (MUI-41) (#60)
## Résumé (MUI-41) Harmonise l'état « obligatoire » des composants de formulaire et normalise le champ email. ### `required` + astérisque - Nouveau composant partagé `MalioRequiredMark` : astérisque rouge (`text-m-danger`, **16px**), `aria-hidden`. - Prop `required` désormais cohérente sur toute la famille formulaire ; quand vraie, l'astérisque s'affiche **dans le label**. - Prop ajoutée à `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText` (les autres l'avaient déjà). - Accessibilité : `required` natif là où l'élément le supporte, sinon `aria-required` (Select/SelectCheckbox sur le `<button>`, RichText sur le wrapper éditeur, Upload sur le champ visible). - `MalioSiteSelector` **exclu** volontairement (segmented control, pas de label de champ). ### Sanitisation email (`MalioInputEmail`) - Suppression de **tous les espaces** à la saisie (pas de masque). - Nouvelle prop opt-in `lowercase` (défaut `false`) : normalise en minuscules à la frappe (cohérent RG-1.21 Starseed). - Garde défensive curseur : l'API de sélection est interdite sur `type="email"` → repositionnement best-effort sans jamais lever. - La validation de format reste à la couche `error`. ### Docs & playground - `COMPONENTS.md` (doc `required` cohérente + note famille + `lowercase`) et `CHANGELOG.md` mis à jour. - Exemples playground `required` et email `lowercase` ajoutés. ## Test plan - [x] Suite complète : 42 fichiers / 771 tests verts - [x] Lint : 0 erreur - [x] Tests `aria-required` sur Select/SelectCheckbox/RichText - [ ] Vérif visuelle playground : astérisque 16px dans le label, email qui retire les espaces / minuscule Spec & plan : `docs/superpowers/specs/` et `docs/superpowers/plans/`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #60 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #60.
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
# État visuel `readonly` cohérent — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: superpowers:subagent-driven-development. Steps use checkbox (`- [ ]`) syntax.
|
||||
|
||||
**Goal:** Donner aux champs `readonly` un état visuel distinct et cohérent : bordure noire même vide, aucun grossissement/bleu au focus, label gris→noir selon rempli, icône gris→noir selon rempli.
|
||||
|
||||
**Architecture:** Pas de composant partagé (les styles sont dupliqués par composant, on suit ce pattern). Dans chaque composant on rend conditionnelles 4 zones de classes selon `readonly`. Le champ reste focusable (sélection/copie du texte) mais sans visuel de focus.
|
||||
|
||||
**Tech Stack:** Vue 3 `<script setup>`, Tailwind `m-*`, `twMerge`, Vitest + @vue/test-utils.
|
||||
|
||||
**Branche:** `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (on continue dessus).
|
||||
|
||||
---
|
||||
|
||||
## La recette commune (appliquée quand `readonly === true`)
|
||||
|
||||
Priorité inchangée : `error` puis `success` puis `disabled` passent TOUJOURS avant `readonly`. La recette readonly ne s'applique que dans la branche « état normal ».
|
||||
|
||||
1. **Bordure** : forcer `border-black` (même vide). Ne PAS inclure `border-m-muted` ni `focus:border-m-primary` quand readonly.
|
||||
2. **Grow + bleu** : ne PAS inclure la classe `grow-height` (donc pas de grossissement au focus) ni les classes `focus:*` (border, padding `focus:pl-*`/`focus:!pl-*`). Pour `InputTextArea` (pas de `grow-height`) : retirer `focus:border-m-primary` et le surlignage de focus `textarea-scrollbar-primary`.
|
||||
3. **Label** : utiliser `isFilled ? 'text-black' : 'text-m-muted'` ; ne PAS inclure `peer-focus:text-m-primary` ni les combos `peer-placeholder-shown`/`peer-[&:not(:placeholder-shown):not(:focus)]`. De plus, en readonly, `shouldFloatLabel` (ou équivalent qui pilote le float) doit ignorer `isFocused` → float basé sur `isFilled` seul (un champ readonly vide garde son label gris au repos).
|
||||
4. **Icône** : `isFilled ? 'text-black' : 'text-m-muted'` ; sauter la branche `isFocused → text-m-primary`. (`error`/`success`/`disabled` toujours prioritaires.)
|
||||
5. **Interaction** : `readonly` bloque l'ouverture (Upload : `openFilePicker` no-op ; pickers : déjà bloqué). Le champ reste sélectionnable (ne pas retirer la focusabilité).
|
||||
|
||||
Implémentation conseillée : un petit computed `isReadonly = computed(() => props.readonly && !props.disabled)` (disabled prime), puis dans chaque `twMerge(...)` remplacer les fragments concernés par des expressions ternaires sur `props.readonly`. Garder le code lisible et homogène avec l'existant du fichier.
|
||||
|
||||
### Patron de test (adapter le sélecteur input/textarea et le helper de montage du fichier)
|
||||
|
||||
```ts
|
||||
it('readonly : bordure noire même vide, pas de grow/bleu', () => {
|
||||
const wrapper = mountX({label: 'Champ', readonly: true}) // pas de modelValue → vide
|
||||
const field = wrapper.get('input') // ou 'textarea'
|
||||
expect(field.classes()).toContain('border-black')
|
||||
expect(field.classes()).not.toContain('border-m-muted')
|
||||
expect(field.classes()).not.toContain('grow-height') // sauf InputTextArea (pas de grow-height) : asserter l'absence de 'focus:border-m-primary'
|
||||
expect(field.classes()).not.toContain('focus:border-m-primary')
|
||||
})
|
||||
|
||||
it('readonly : label gris si vide, pas de bleu', () => {
|
||||
const wrapper = mountX({label: 'Champ', readonly: true})
|
||||
const label = wrapper.get('label')
|
||||
expect(label.classes()).not.toContain('peer-focus:text-m-primary')
|
||||
expect(label.classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('readonly rempli : label noir + icône noire', () => {
|
||||
const wrapper = mountX({label: 'Champ', readonly: true, modelValue: '...valeur remplie...'})
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
// si le composant a une icône d'état :
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
```
|
||||
|
||||
Pour les composants à icône d'état, ajouter aussi : readonly + vide → icône `text-m-muted`. Adapter `modelValue` au type (montant, date ISO, etc.). Pour les pickers, la « valeur remplie » se passe via la prop d'affichage habituelle (voir tests voisins).
|
||||
|
||||
---
|
||||
|
||||
## Task 1 : `InputUpload` (ajout de la prop `readonly`)
|
||||
|
||||
`InputUpload` n'a PAS de prop `readonly` aujourd'hui (son `<input type="text">` est `:readonly="true"` en dur pour empêcher la saisie). On AJOUTE une vraie prop `readonly`.
|
||||
|
||||
**Files:** Modify `app/components/malio/input/InputUpload.vue` ; Test `app/components/malio/input/InputUpload.test.ts`
|
||||
|
||||
- [ ] **Step 1 — tests d'abord** : ajouter le patron de test ci-dessus. Champ = `wrapper.get('input[type="text"]')`. Icône = `[data-test="icon"]` (le nuage). « rempli » = `modelValue: 'fichier.pdf'`.
|
||||
- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/InputUpload.test.ts`
|
||||
- [ ] **Step 3 — ajouter la prop** : `readonly?: boolean` dans `defineProps` + `readonly: false` dans `withDefaults`.
|
||||
- [ ] **Step 4 — appliquer la recette** dans `mergedInputClass`, `mergedLabelClass`, `iconStateClass` et `shouldFloatLabel` (float = `isFilled` quand readonly). Forcer `cursor-default` (au lieu de `cursor-pointer`) quand readonly.
|
||||
- [ ] **Step 5 — bloquer l'ouverture** : dans `openFilePicker`, `if (props.disabled || props.readonly) return`.
|
||||
- [ ] **Step 6 — run, PASS** : même commande. (Suite flaky connue : relancer le fichier si timeout non lié ; `--no-verify` si un timeout flaky bloque un commit déjà vérifié.)
|
||||
- [ ] **Step 7 — commit**
|
||||
```bash
|
||||
git add app/components/malio/input/InputUpload.vue app/components/malio/input/InputUpload.test.ts
|
||||
git commit -m "feat(ui) : état readonly visuel sur InputUpload (+ prop readonly)"
|
||||
```
|
||||
(corps + ligne vide + `Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>`)
|
||||
|
||||
---
|
||||
|
||||
## Task 2 : Inputs floating-label standard (lot de 6)
|
||||
|
||||
`InputText`, `InputEmail`, `InputAmount`, `InputAutocomplete`, `InputPassword`, `InputTextArea` ont déjà une prop `readonly`. Appliquer la recette à chacun.
|
||||
|
||||
**Files:** Modify les 6 `.vue` (`app/components/malio/input/InputText.vue`, `InputEmail.vue`, `InputAmount.vue`, `InputAutocomplete.vue`, `InputPassword.vue`, `InputTextArea.vue`) ; Test les 6 `*.test.ts` correspondants (`Input.test.ts` pour InputText, puis `InputEmail/InputAmount/InputAutocomplete/InputPassword/InputTextArea.test.ts`).
|
||||
|
||||
Spécificités par fichier :
|
||||
- **InputText / InputEmail / InputAmount** : structure identique (`mergedInputClass` avec `grow-height` + `focus:border-m-primary` + `focus:pl-[11px]` ; `mergedLabelClass` avec `peer-focus:text-m-primary` ; `iconStateClass` avec branche `isFocused`). Appliquer la recette 1-4.
|
||||
- **InputAutocomplete** : idem ; il a deux usages de `iconStateClass` (icône gauche + chevron) — appliquer la recette à `iconStateClass`. `isFilled` y inclut `hasSelection`.
|
||||
- **InputPassword** : recette 1-4. L'icône est le **toggle œil** (cliquable) : garder le `@click` de bascule ; seule la couleur suit la recette (pas de bleu). NE PAS rendre l'œil non-cliquable en readonly.
|
||||
- **InputTextArea** : classes **inline** dans le template (pas de `grow-height`). Recette : `isFilled ? border-black : border-m-muted` → `readonly ? border-black : (isFilled ? border-black : border-m-muted)` ; retirer `focus:border-m-primary` et le `isFocused ? 'textarea-scrollbar-primary'` quand readonly ; label idem. Pas d'icône (recette 4 N/A).
|
||||
|
||||
- [ ] **Step 1 — tests d'abord** : ajouter le patron à chacun des 6 fichiers test (champ = `input`, sauf TextArea = `textarea` ; pour TextArea ne pas asserter `grow-height`). Pour les composants à icône, asserter aussi l'icône (`[data-test="icon"]`). Adapter `modelValue` rempli au type (Amount : un montant valide).
|
||||
- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/Input.test.ts app/components/malio/input/InputEmail.test.ts app/components/malio/input/InputAmount.test.ts app/components/malio/input/InputAutocomplete.test.ts app/components/malio/input/InputPassword.test.ts app/components/malio/input/InputTextArea.test.ts`
|
||||
- [ ] **Step 3 — appliquer la recette** aux 6 `.vue`.
|
||||
- [ ] **Step 4 — run, PASS** : même commande (relancer un fichier si flaky).
|
||||
- [ ] **Step 5 — commit**
|
||||
```bash
|
||||
git add app/components/malio/input/InputText.vue app/components/malio/input/InputEmail.vue app/components/malio/input/InputAmount.vue app/components/malio/input/InputAutocomplete.vue app/components/malio/input/InputPassword.vue app/components/malio/input/InputTextArea.vue app/components/malio/input/Input.test.ts app/components/malio/input/InputEmail.test.ts app/components/malio/input/InputAmount.test.ts app/components/malio/input/InputAutocomplete.test.ts app/components/malio/input/InputPassword.test.ts app/components/malio/input/InputTextArea.test.ts
|
||||
git commit -m "feat(ui) : état readonly visuel sur les inputs floating-label"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3 : `InputPhone` (découpler readonly de disabled)
|
||||
|
||||
Aujourd'hui `InputPhone` traite `disabled || readonly` ensemble (bouton « add » + `opacity-40`, look désactivé). On découple : readonly applique la recette readonly (bordure noire, pas de look disabled), tout en restant non-éditable. L'action « add » reste bloquée en readonly mais le **champ** ne doit plus avoir l'apparence désactivée.
|
||||
|
||||
**Files:** Modify `app/components/malio/input/InputPhone.vue` ; Test `app/components/malio/input/InputPhone.test.ts`
|
||||
|
||||
- [ ] **Step 1 — tests d'abord** : patron readonly (champ = `input`, icône = `[data-test="icon"]`). Ajouter aussi une assertion que le champ readonly n'a PAS `opacity-40` (plus de look disabled). `modelValue` rempli = un numéro.
|
||||
- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/InputPhone.test.ts`
|
||||
- [ ] **Step 3 — appliquer la recette** à `mergedInputClass`/`mergedLabelClass`/`iconStateClass` (recette 1-4). Pour le bouton « add » (`mergedAddButtonClass`) : garder l'action bloquée en readonly (`onAdd` retourne déjà), mais retirer l'apparence `opacity-40 cursor-not-allowed` spécifique au readonly — la garder uniquement pour `disabled`. (En readonly, le bouton add suit la couleur d'icône readonly.)
|
||||
- [ ] **Step 4 — run, PASS** (relancer si flaky).
|
||||
- [ ] **Step 5 — commit**
|
||||
```bash
|
||||
git add app/components/malio/input/InputPhone.vue app/components/malio/input/InputPhone.test.ts
|
||||
git commit -m "feat(ui) : InputPhone readonly suit les règles readonly (plus de look disabled)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4 : Pickers `CalendarField` (date family) + `TimePicker`
|
||||
|
||||
`CalendarField` (rend Date/DateTime/DateRange/DateWeek) et `TimePicker` ont déjà une prop `readonly` qui bloque l'ouverture du popover. Appliquer la recette visuelle. Leur input interne est déjà `readonly` natif ; le float du label suit `isFilled || isOpen` — en readonly, `isOpen` reste faux (ouverture bloquée), donc float = `isFilled`. Forcer bordure noire, label gris→noir, icône gris→noir sans branche focus/open.
|
||||
|
||||
**Files:** Modify `app/components/malio/date/internal/CalendarField.vue`, `app/components/malio/time/TimePicker.vue` ; Test `app/components/malio/date/Date.test.ts` (couvre CalendarField) et `app/components/malio/time/TimePicker.test.ts`
|
||||
|
||||
- [ ] **Step 1 — tests d'abord** : patron readonly. Pour `Date.test.ts`, monter `mountDate({label, readonly: true})` et une variante remplie (passer une valeur de date ISO comme les tests voisins). Champ = l'input du composant (voir sélecteur utilisé par les tests voisins). Pour `TimePicker.test.ts`, utiliser le helper du fichier.
|
||||
- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/date/Date.test.ts app/components/malio/time/TimePicker.test.ts`
|
||||
- [ ] **Step 3 — appliquer la recette** à `CalendarField.vue` et `TimePicker.vue` (`mergedInputClass`/`mergedLabelClass`/`iconStateClass` ; float = `isFilled` en readonly). Vérifier que la croix « clear » reste masquée en readonly (déjà le cas — ne pas régresser).
|
||||
- [ ] **Step 4 — run, PASS** (relancer si flaky).
|
||||
- [ ] **Step 5 — commit**
|
||||
```bash
|
||||
git add app/components/malio/date/internal/CalendarField.vue app/components/malio/time/TimePicker.vue app/components/malio/date/Date.test.ts app/components/malio/time/TimePicker.test.ts
|
||||
git commit -m "feat(ui) : état readonly visuel sur pickers date/heure"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5 : Playground + vérification finale
|
||||
|
||||
**Files:** Modify les pages playground concernées sous `.playground/pages/composant/...`
|
||||
|
||||
- [ ] **Step 1 — exemples readonly** : ajouter sur chaque page concernée (inputText, inputEmail, inputAmount, inputAutocomplete, inputPassword, inputTextArea, inputPhone, **inputUpload** [manquant], date, timePicker) un exemple readonly : une instance vide (`:readonly="true"`) ET une instance remplie readonly, pour visualiser bordure noire vide + label/icône noir rempli. Suivre le pattern de chaque page ; si une page rend l'ajout coûteux, le signaler et passer (mais inputUpload est demandé explicitement, le faire).
|
||||
- [ ] **Step 2 — lint** : `npm run lint` → 0 erreur (baseline 24 warnings préexistants).
|
||||
- [ ] **Step 3 — suite complète** : `npm run test` → tout vert (relancer un fichier en cas de timeout flaky).
|
||||
- [ ] **Step 4 — commit**
|
||||
```bash
|
||||
git add .playground
|
||||
git commit -m "docs(playground) : exemples readonly"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Récapitulatif commits attendus
|
||||
1. `feat(ui) : état readonly visuel sur InputUpload (+ prop readonly)`
|
||||
2. `feat(ui) : état readonly visuel sur les inputs floating-label`
|
||||
3. `feat(ui) : InputPhone readonly suit les règles readonly (plus de look disabled)`
|
||||
4. `feat(ui) : état readonly visuel sur pickers date/heure`
|
||||
5. `docs(playground) : exemples readonly`
|
||||
|
||||
Note convention : le hook commit-msg malio impose un espace avant `:`.
|
||||
@@ -0,0 +1,460 @@
|
||||
# État « obligatoire » cohérent + normalisation email — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Exposer une prop `required` cohérente avec astérisque rouge dans le label sur toute la famille formulaire, et ajouter une sanitisation à la saisie (suppression des espaces + option `lowercase`) à `MalioInputEmail`.
|
||||
|
||||
**Architecture :** Un composant présentational partagé `MalioRequiredMark` (astérisque `aria-hidden`, token `text-m-danger`) est importé explicitement et rendu dans le `<label>` de chaque composant quand `required` est vrai. Les 4 composants sans la prop la reçoivent (+ câblage `aria-required` là où il n'y a pas de `required` natif). `MalioInputEmail.onInput` sanitise la valeur avant émission.
|
||||
|
||||
**Tech Stack :** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Tailwind (palette `m-*`), `tailwind-merge`, Vitest + `@vue/test-utils` (jsdom).
|
||||
|
||||
**Spec :** `docs/superpowers/specs/2026-06-03-required-asterisk-email-sanitization-design.md`
|
||||
|
||||
**Conventions de test (rappel) :** chaque fichier `*.test.ts` définit son propre helper de montage (nom variable : `mountInput`, `mountDate`, `mountCheckbox`, `mountTime`, `mountComponent`…) ou monte en inline. Le tableau de chaque tâche indique le helper exact à réutiliser.
|
||||
|
||||
**⚠️ Suite flaky :** des timeouts intermittents existent sur diverses suites. Si un test échoue par timeout sans rapport avec le changement, relancer le fichier ciblé ; ne pas conclure à un échec sans relance. Le hook pre-commit lance les tests — si un timeout flaky bloque un commit déjà vérifié manuellement, utiliser `git commit --no-verify`.
|
||||
|
||||
**Branche :** `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (rester dessus, ne pas créer de branche).
|
||||
|
||||
---
|
||||
|
||||
## Task 1 : Composant partagé `MalioRequiredMark`
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/shared/RequiredMark.vue`
|
||||
- Test: `app/components/malio/shared/RequiredMark.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire le test qui échoue**
|
||||
|
||||
Create `app/components/malio/shared/RequiredMark.test.ts` :
|
||||
|
||||
```ts
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import RequiredMark from './RequiredMark.vue'
|
||||
|
||||
describe('MalioRequiredMark', () => {
|
||||
it('rend un astérisque', () => {
|
||||
const wrapper = mount(RequiredMark)
|
||||
expect(wrapper.text()).toBe('*')
|
||||
})
|
||||
|
||||
it('est masqué pour les technologies d’assistance', () => {
|
||||
const wrapper = mount(RequiredMark)
|
||||
expect(wrapper.get('[data-test="required-mark"]').attributes('aria-hidden')).toBe('true')
|
||||
})
|
||||
|
||||
it('utilise le token de couleur danger', () => {
|
||||
const wrapper = mount(RequiredMark)
|
||||
expect(wrapper.get('[data-test="required-mark"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer le test, vérifier l'échec**
|
||||
|
||||
Run: `npm run test -- app/components/malio/shared/RequiredMark.test.ts`
|
||||
Expected: FAIL — `Failed to resolve import './RequiredMark.vue'` (le composant n'existe pas encore).
|
||||
|
||||
- [ ] **Step 3 : Créer le composant**
|
||||
|
||||
Create `app/components/malio/shared/RequiredMark.vue` :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<span
|
||||
data-test="required-mark"
|
||||
aria-hidden="true"
|
||||
class="ml-0.5 select-none text-m-danger"
|
||||
>*</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({name: 'MalioRequiredMark', inheritAttrs: false})
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Lancer le test, vérifier le succès**
|
||||
|
||||
Run: `npm run test -- app/components/malio/shared/RequiredMark.test.ts`
|
||||
Expected: PASS (3 tests).
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/shared/RequiredMark.vue app/components/malio/shared/RequiredMark.test.ts
|
||||
git commit -m "feat(ui): composant partagé MalioRequiredMark (astérisque champ obligatoire)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2 : Prop `required` + a11y + astérisque sur les 4 composants sans la prop
|
||||
|
||||
Composants : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`. Chacun reçoit la prop `required`, le câblage a11y adapté, l'import + le rendu de l'astérisque, et un test.
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/select/Select.vue`, `app/components/malio/select/SelectCheckbox.vue`, `app/components/malio/input/InputUpload.vue`, `app/components/malio/input/InputRichText.vue`
|
||||
- Test: `app/components/malio/select/Select.test.ts`, `app/components/malio/select/SelectCheckbox.test.ts`, `app/components/malio/input/InputUpload.test.ts`, `app/components/malio/input/InputRichText.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests qui échouent (un par composant)**
|
||||
|
||||
Patron d'assertion (à adapter au helper de chaque fichier) :
|
||||
|
||||
```ts
|
||||
it('affiche l’astérisque quand required est vrai', () => {
|
||||
const wrapper = /* monter avec { label: 'Champ', required: true, ...props requises } */
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n’affiche pas l’astérisque par défaut', () => {
|
||||
const wrapper = /* monter avec { label: 'Champ', ...props requises } */
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
|
||||
})
|
||||
```
|
||||
|
||||
Montage par fichier :
|
||||
|
||||
| Fichier test | Montage |
|
||||
|---|---|
|
||||
| `select/Select.test.ts` | inline : `mount(SelectForTest, {props: {label: 'Champ', required: true, options: [{label: 'A', value: 'a'}]}})` (et sans `required` pour le 2ᵉ test) |
|
||||
| `select/SelectCheckbox.test.ts` | inline : `mount(SelectCheckboxForTest, {props: {label: 'Champ', required: true, options: [{label: 'A', value: 'a'}]}})` |
|
||||
| `input/InputUpload.test.ts` | helper existant `mountComponent({label: 'Champ', required: true})` |
|
||||
| `input/InputRichText.test.ts` | helper existant `mountComponent({label: 'Champ', required: true})` |
|
||||
|
||||
> Note : pour `Select`/`SelectCheckbox`, reprendre la forme exacte des `options` et les `global.stubs` déjà utilisés dans les autres `it()` du fichier (copier un montage voisin).
|
||||
|
||||
- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
|
||||
|
||||
Run: `npm run test -- app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts`
|
||||
Expected: FAIL sur les nouveaux tests « affiche l’astérisque » (la prop/le rendu n'existent pas encore).
|
||||
|
||||
- [ ] **Step 3 : Ajouter la prop `required` (type + défaut) dans les 4 composants**
|
||||
|
||||
Dans chaque `defineProps<{…}>()`, ajouter la ligne :
|
||||
|
||||
```ts
|
||||
required?: boolean
|
||||
```
|
||||
|
||||
Dans chaque `withDefaults(…, { … })`, ajouter :
|
||||
|
||||
```ts
|
||||
required: false,
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Câbler l'accessibilité (un élément interactif par composant)**
|
||||
|
||||
`Select.vue` — sur le `<button>` déclencheur (là où sont déjà `:aria-expanded`, `:aria-controls`), ajouter :
|
||||
|
||||
```vue
|
||||
:aria-required="required || undefined"
|
||||
```
|
||||
|
||||
`SelectCheckbox.vue` — idem, sur son `<button>` déclencheur :
|
||||
|
||||
```vue
|
||||
:aria-required="required || undefined"
|
||||
```
|
||||
|
||||
`InputUpload.vue` — sur l'`<input type="file">`, ajouter l'attribut natif :
|
||||
|
||||
```vue
|
||||
:required="required"
|
||||
```
|
||||
|
||||
`InputRichText.vue` — sur le wrapper éditeur identifié par `:id="editorId"` (le conteneur de `<EditorContent>` en mode éditable), ajouter :
|
||||
|
||||
```vue
|
||||
:aria-required="required || undefined"
|
||||
```
|
||||
|
||||
- [ ] **Step 5 : Importer et rendre l'astérisque dans les 4 composants**
|
||||
|
||||
Dans le `<script setup>` de chacun, ajouter l'import (chemin relatif depuis `family/Component.vue`) :
|
||||
|
||||
```ts
|
||||
import MalioRequiredMark from '../shared/RequiredMark.vue'
|
||||
```
|
||||
|
||||
Dans le `<template>`, remplacer le rendu du libellé `{{ label }}` (celui à l'intérieur du `<label>` du champ — **pas** un `{{ opt.label }}`) par :
|
||||
|
||||
```vue
|
||||
{{ label }}<MalioRequiredMark v-if="required" />
|
||||
```
|
||||
|
||||
> Respecter l'indentation existante de chaque fichier. Pour `Select`/`SelectCheckbox`, viser le `{{ label }}` du `<label>` flottant, pas le `{{ opt.label }}` des options.
|
||||
|
||||
- [ ] **Step 6 : Lancer les tests, vérifier le succès**
|
||||
|
||||
Run: `npm run test -- app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts`
|
||||
Expected: PASS (anciens + nouveaux tests). En cas de timeout flaky non lié, relancer le fichier concerné.
|
||||
|
||||
- [ ] **Step 7 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/select/Select.vue app/components/malio/select/SelectCheckbox.vue app/components/malio/input/InputUpload.vue app/components/malio/input/InputRichText.vue app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts
|
||||
git commit -m "feat(ui): prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3 : Astérisque sur les composants ayant déjà `required`
|
||||
|
||||
Ces composants ont déjà la prop `required` (câblée nativement). On ajoute uniquement l'import + le rendu de l'astérisque + un test.
|
||||
|
||||
**Files (16 composants → 13 via CalendarField mutualisé) :**
|
||||
|
||||
| Composant `.vue` | Import à ajouter | Fichier test | Helper de montage |
|
||||
|---|---|---|---|
|
||||
| `input/InputText.vue` | `'../shared/RequiredMark.vue'` | `input/Input.test.ts` | `mountInput({label:'Champ', required:true})` |
|
||||
| `input/InputEmail.vue` | `'../shared/RequiredMark.vue'` | `input/InputEmail.test.ts` | `mountComponent({label:'Champ', required:true})` |
|
||||
| `input/InputPhone.vue` | `'../shared/RequiredMark.vue'` | `input/InputPhone.test.ts` | `mountComponent({label:'Champ', required:true})` |
|
||||
| `input/InputPassword.vue` | `'../shared/RequiredMark.vue'` | `input/InputPassword.test.ts` | `mountComponent({label:'Champ', required:true})` |
|
||||
| `input/InputTextArea.vue` | `'../shared/RequiredMark.vue'` | `input/InputTextArea.test.ts` | helper du fichier (`mount<…>` ; copier un montage voisin) |
|
||||
| `input/InputAmount.vue` | `'../shared/RequiredMark.vue'` | `input/InputAmount.test.ts` | helper du fichier |
|
||||
| `input/InputNumber.vue` | `'../shared/RequiredMark.vue'` | `input/InputNumber.test.ts` | helper du fichier |
|
||||
| `input/InputAutocomplete.vue` | `'../shared/RequiredMark.vue'` | `input/InputAutocomplete.test.ts` | `mountComponent({label:'Champ', required:true, …props requises})` |
|
||||
| `checkbox/Checkbox.vue` | `'../shared/RequiredMark.vue'` | `checkbox/Checkbox.test.ts` | `mountCheckbox({label:'Champ', required:true})` |
|
||||
| `radio/RadioButton.vue` | `'../shared/RequiredMark.vue'` | `radio/RadioButton.test.ts` | helper du fichier |
|
||||
| `time/Time.vue` | `'../shared/RequiredMark.vue'` | `time/Time.test.ts` | `mountTime({label:'Champ', required:true})` |
|
||||
| `time/TimePicker.vue` | `'../shared/RequiredMark.vue'` | `time/TimePicker.test.ts` | helper du fichier |
|
||||
| `date/internal/CalendarField.vue` | `'../../shared/RequiredMark.vue'` | `date/Date.test.ts` | `mountDate({label:'Champ', required:true})` |
|
||||
|
||||
> `CalendarField` rend le label de tout le date family (`Date`, `DateTime`, `DateRange`, `DateWeek`). Une seule modif + un seul test (via `Date.test.ts`) couvrent les quatre.
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests qui échouent (un couple par fichier test du tableau)**
|
||||
|
||||
Pour chaque fichier test listé, ajouter :
|
||||
|
||||
```ts
|
||||
it('affiche l’astérisque quand required est vrai', () => {
|
||||
const wrapper = /* helper du tableau, avec required: true */
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n’affiche pas l’astérisque par défaut', () => {
|
||||
const wrapper = /* helper du tableau, sans required */
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
|
||||
|
||||
Run: `npm run test -- app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/Date.test.ts`
|
||||
Expected: FAIL sur les nouveaux tests « affiche l’astérisque ».
|
||||
|
||||
- [ ] **Step 3 : Ajouter l'import + le rendu de l'astérisque dans les 13 `.vue`**
|
||||
|
||||
Dans chaque `<script setup>`, ajouter l'import indiqué dans la colonne « Import à ajouter ».
|
||||
|
||||
Dans chaque `<template>`, transformer le libellé du champ :
|
||||
|
||||
```vue
|
||||
{{ label }}<MalioRequiredMark v-if="required" />
|
||||
```
|
||||
|
||||
(Le `{{ label }}` est à l'intérieur du `<label v-if="label">` du champ. Respecter l'indentation propre à chaque fichier.)
|
||||
|
||||
- [ ] **Step 4 : Lancer les tests, vérifier le succès**
|
||||
|
||||
Run: `npm run test -- app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/Date.test.ts`
|
||||
Expected: PASS. (Vérifier notamment que `input/InputEmail.test.ts` « renders the label text » → `'Adresse email'` passe toujours : pas de `required` dans ce test, donc pas d'astérisque.) Relancer en cas de timeout flaky.
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/internal/CalendarField.vue app/components/malio/date/Date.test.ts
|
||||
git commit -m "feat(ui): astérisque required dans le label de la famille formulaire"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4 : Sanitisation de `MalioInputEmail`
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/input/InputEmail.vue`
|
||||
- Test: `app/components/malio/input/InputEmail.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests qui échouent**
|
||||
|
||||
Ajouter à `input/InputEmail.test.ts` :
|
||||
|
||||
```ts
|
||||
it('supprime tous les espaces saisis', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.get('input').setValue(' a b @ c.com ')
|
||||
const emits = wrapper.emitted('update:modelValue')!
|
||||
expect(emits[emits.length - 1]).toEqual(['ab@c.com'])
|
||||
expect(wrapper.get('input').element.value).toBe('ab@c.com')
|
||||
})
|
||||
|
||||
it('conserve la casse par défaut', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.get('input').setValue('User@Example.COM')
|
||||
const emits = wrapper.emitted('update:modelValue')!
|
||||
expect(emits[emits.length - 1]).toEqual(['User@Example.COM'])
|
||||
})
|
||||
|
||||
it('met en minuscules quand lowercase est vrai', async () => {
|
||||
const wrapper = mountComponent({lowercase: true})
|
||||
await wrapper.get('input').setValue('User@Example.COM')
|
||||
const emits = wrapper.emitted('update:modelValue')!
|
||||
expect(emits[emits.length - 1]).toEqual(['user@example.com'])
|
||||
})
|
||||
```
|
||||
|
||||
> Ajouter `lowercase?: boolean` au type `InputEmailProps` en tête du fichier de test (sinon TS refuse la prop dans le 3ᵉ test).
|
||||
|
||||
- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
|
||||
|
||||
Run: `npm run test -- app/components/malio/input/InputEmail.test.ts`
|
||||
Expected: FAIL — les espaces ne sont pas supprimés / `lowercase` inconnu.
|
||||
|
||||
- [ ] **Step 3 : Ajouter la prop `lowercase`**
|
||||
|
||||
Dans `defineProps<{…}>()` de `InputEmail.vue`, ajouter :
|
||||
|
||||
```ts
|
||||
lowercase?: boolean
|
||||
```
|
||||
|
||||
Dans `withDefaults(…, { … })`, ajouter :
|
||||
|
||||
```ts
|
||||
lowercase: false,
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Ajouter la fonction de sanitisation et réécrire `onInput`**
|
||||
|
||||
Ajouter la fonction pure (au-dessus de `onInput`) :
|
||||
|
||||
```ts
|
||||
const sanitizeEmail = (v: string) => {
|
||||
let out = v.replace(/\s+/g, '')
|
||||
if (props.lowercase) out = out.toLowerCase()
|
||||
return out
|
||||
}
|
||||
```
|
||||
|
||||
Remplacer le `onInput` existant par :
|
||||
|
||||
```ts
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const raw = target.value
|
||||
const sanitized = sanitizeEmail(raw)
|
||||
|
||||
if (sanitized !== raw) {
|
||||
// `<input type="email">` ne supporte pas l'API de sélection :
|
||||
// selectionStart vaut null, setSelectionRange lève. On garde defensivement.
|
||||
const caret = target.selectionStart
|
||||
target.value = sanitized
|
||||
if (caret !== null) {
|
||||
const newCaret = sanitizeEmail(raw.slice(0, caret)).length
|
||||
try {
|
||||
target.setSelectionRange(newCaret, newCaret)
|
||||
} catch {
|
||||
/* type d'input sans support de sélection — ignore */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localValue.value = sanitized
|
||||
}
|
||||
emit('update:modelValue', sanitized)
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 5 : Lancer les tests, vérifier le succès**
|
||||
|
||||
Run: `npm run test -- app/components/malio/input/InputEmail.test.ts`
|
||||
Expected: PASS (anciens tests inclus, dont « emits update:modelValue on input change » avec `'new@example.com'` qui n'a pas d'espace → inchangé).
|
||||
|
||||
- [ ] **Step 6 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/input/InputEmail.vue app/components/malio/input/InputEmail.test.ts
|
||||
git commit -m "feat(inputs): sanitisation email (suppression des espaces + option lowercase)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5 : Documentation (`COMPONENTS.md` + `CHANGELOG.md`)
|
||||
|
||||
**Files:**
|
||||
- Modify: `COMPONENTS.md`, `CHANGELOG.md`
|
||||
|
||||
- [ ] **Step 1 : `COMPONENTS.md` — lignes `required` manquantes**
|
||||
|
||||
Pour les sections `MalioSelect`, `MalioSelectCheckbox`, `MalioInputUpload`, `MalioInputRichText`, ajouter dans le tableau des props la ligne (au même format que les autres composants) :
|
||||
|
||||
```
|
||||
| `required` | `boolean` | `false` | Champ requis (affiche un astérisque rouge dans le label) |
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : `COMPONENTS.md` — note astérisque + prop `lowercase`**
|
||||
|
||||
- Dans l'introduction de la famille formulaire (ou la section des props communes), ajouter une phrase : « Lorsque `required` est vrai, un astérisque rouge est ajouté dans le label (visuel ; la sémantique est portée par l'attribut `required`/`aria-required`). »
|
||||
- Dans la section `MalioInputEmail`, ajouter la ligne de prop :
|
||||
|
||||
```
|
||||
| `lowercase` | `boolean` | `false` | Normalise la saisie en minuscules à la frappe |
|
||||
```
|
||||
|
||||
et préciser que les espaces sont supprimés automatiquement à la saisie (pas de masque ; la validation de format reste à la couche `error`).
|
||||
|
||||
- [ ] **Step 3 : `CHANGELOG.md` — entrées**
|
||||
|
||||
Sous le `### Added` de la version en cours (format `* [#…] …`), ajouter :
|
||||
|
||||
```
|
||||
* [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire
|
||||
* [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Commit**
|
||||
|
||||
```bash
|
||||
git add COMPONENTS.md CHANGELOG.md
|
||||
git commit -m "docs: required/astérisque + lowercase email (COMPONENTS + CHANGELOG)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 6 : Exemples playground + vérification finale
|
||||
|
||||
**Files:**
|
||||
- Modify: page(s) playground des composants concernés (selon `.playground/` ; cf. mémoire « Architecture playground »)
|
||||
|
||||
- [ ] **Step 1 : Ajouter des exemples légers**
|
||||
|
||||
Sur la page playground d'un composant représentatif (ex. `InputText`/`Select`), ajouter une instance `:required="true"`. Sur la page `InputEmail`, ajouter une instance `:lowercase="true"`. Si le coût d'intégration dépasse quelques minutes (routage/nav à câbler), le **noter** et passer — c'est hors scope strict du ticket.
|
||||
|
||||
- [ ] **Step 2 : Lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: 0 erreur. Corriger le cas échéant.
|
||||
|
||||
- [ ] **Step 3 : Suite de tests complète des fichiers touchés**
|
||||
|
||||
Run: `npm run test -- app/components/malio/shared app/components/malio/input app/components/malio/select app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date`
|
||||
Expected: PASS. En cas de timeout flaky, relancer le(s) fichier(s) concerné(s) individuellement.
|
||||
|
||||
- [ ] **Step 4 : Commit (si exemples playground ajoutés)**
|
||||
|
||||
```bash
|
||||
git add .playground
|
||||
git commit -m "docs(playground): exemples required + email lowercase"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Récapitulatif des commits attendus
|
||||
|
||||
1. `feat(ui): composant partagé MalioRequiredMark (astérisque champ obligatoire)`
|
||||
2. `feat(ui): prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText`
|
||||
3. `feat(ui): astérisque required dans le label de la famille formulaire`
|
||||
4. `feat(inputs): sanitisation email (suppression des espaces + option lowercase)`
|
||||
5. `docs: required/astérisque + lowercase email (COMPONENTS + CHANGELOG)`
|
||||
6. `docs(playground): exemples required + email lowercase` (optionnel)
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design — État « obligatoire » cohérent + normalisation email
|
||||
|
||||
- **Date** : 2026-06-03
|
||||
- **Ticket Malio UI** : MUI-41 (branche `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co`)
|
||||
- **Ticket Starseed lié** : ERP-101 (MAJ Malio UI + branchement `required` + stratégie de validation), découvert pendant ERP-63 (écran « Ajouter un client »)
|
||||
|
||||
## Contexte & problème
|
||||
|
||||
Pendant ERP-63, deux manques ont bloqué la mise en place de champs obligatoires :
|
||||
|
||||
1. Certains composants de formulaire n'exposent pas de prop `required` (`MalioSelect`, `MalioSelectCheckbox`), et **aucun composant n'affiche d'indicateur visuel** de champ obligatoire. Résultat : le bouton « Valider » se bloque sans feedback à l'utilisateur — anti-pattern UX.
|
||||
2. Tentation erronée de « masquer » l'email à la maska. Un email n'a **pas** de structure fixe : pas de masque. Le bon comportement est une **sanitisation** légère à la saisie + validation déléguée à la couche `error`.
|
||||
|
||||
État réel constaté (inventaire) : la **majorité** des composants ont déjà la prop `required` (câblée sur l'attribut HTML natif uniquement, sans astérisque). Seuls **5** ne l'ont pas : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`, `SiteSelector`. Aucun composant n'affiche d'astérisque. Il n'existe pas de composant de label partagé : chaque composant rend `{{ label }}` dans son propre `<label>` au style spécifique (floating labels).
|
||||
|
||||
## Objectifs
|
||||
|
||||
- Prop `required: boolean` cohérente sur **toute la famille formulaire**.
|
||||
- Quand `required` est vrai → **astérisque rouge dans le label**.
|
||||
- `MalioInputEmail` : sanitisation à la saisie (suppression de tous les espaces, option `lowercase`), **sans** masque ni validation de format.
|
||||
- Mettre à jour `COMPONENTS.md` et `CHANGELOG.md`.
|
||||
|
||||
## Hors scope
|
||||
|
||||
- Validation de format email (reste à la charge de la couche validation via la prop `error`, alimentée serveur ou check client).
|
||||
- Toute logique de masque sur l'email.
|
||||
- Refonte des suites de tests existantes.
|
||||
|
||||
## Décisions de cadrage (validées avec l'utilisateur)
|
||||
|
||||
| Décision | Choix retenu |
|
||||
|---|---|
|
||||
| Périmètre `required` + astérisque | **Toute la famille formulaire**, y compris `InputUpload`, `InputRichText`, `SiteSelector` |
|
||||
| Prop `lowercase` (email) | **Opt-in, défaut `false`** |
|
||||
| Espaces email | **Supprimer tous les espaces** (début, milieu, fin) ; préservation du curseur *best-effort* (voir caveat ci-dessous) |
|
||||
| Accessibilité astérisque | `aria-hidden="true"` — la sémantique est portée par l'attribut HTML natif `required` |
|
||||
|
||||
## Section 1 — Indicateur « obligatoire »
|
||||
|
||||
### Composant partagé `MalioRequiredMark`
|
||||
|
||||
Nouveau composant `app/components/malio/shared/RequiredMark.vue` (auto-importé `<MalioRequiredMark>`). Source unique de vérité pour couleur/espacement.
|
||||
|
||||
Rendu :
|
||||
|
||||
```vue
|
||||
<span aria-hidden="true" class="ml-0.5 select-none text-m-danger">*</span>
|
||||
```
|
||||
|
||||
- `aria-hidden="true"` : évite la double annonce, la sémantique est déjà sur l'attribut natif `required`.
|
||||
- Couleur via token existant `text-m-danger` (`--m-danger`, rouge `#F2696B`).
|
||||
- `defineOptions({ name: 'MalioRequiredMark', inheritAttrs: false })`.
|
||||
|
||||
### Intégration
|
||||
|
||||
Dans chaque composant de la famille, remplacer `{{ label }}` par :
|
||||
|
||||
```vue
|
||||
{{ label }}<MalioRequiredMark v-if="required" />
|
||||
```
|
||||
|
||||
L'astérisque vit **à l'intérieur du `<label>`** → il flotte avec le floating-label et reste dans la pastille blanche.
|
||||
|
||||
### Props à ajouter
|
||||
|
||||
`required?: boolean` (défaut `false`) sur les **4** composants qui ne l'ont pas et qui possèdent un label de champ : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`.
|
||||
|
||||
### Câblage accessibilité (a11y)
|
||||
|
||||
L'astérisque est `aria-hidden` : la sémantique « obligatoire » doit donc être portée par le DOM.
|
||||
|
||||
- **Élément natif `required` déjà câblé** (asterisque suffit) : `InputText`, `InputEmail`, `InputPhone`, `InputPassword`, `InputTextArea`, `InputAmount`, `InputNumber`, `InputAutocomplete`, `Checkbox`, `RadioButton`, `Time`, `TimePicker`, et `CalendarField` (date family).
|
||||
- **Pas de `required` natif** → ajouter `:aria-required="required || undefined"` sur l'élément interactif :
|
||||
- `Select` / `SelectCheckbox` : le `<button>` déclencheur (combobox).
|
||||
- `InputRichText` : le wrapper éditeur (`#editorId`, contenteditable via TipTap).
|
||||
- `InputUpload` : possède un `<input type="file">` natif → on câble `:required="required"` dessus (natif).
|
||||
|
||||
### Composants concernés par le rendu de l'astérisque
|
||||
|
||||
`InputText`, `InputEmail`, `InputPhone`, `InputPassword`, `InputTextArea`, `InputAmount`, `InputNumber`, `InputAutocomplete`, `InputUpload`, `InputRichText`, `Select`, `SelectCheckbox`, `Checkbox`, `RadioButton`, `Time`, `TimePicker`, et `CalendarField` (rendu mutualisé pour `Date`, `DateTime`, `DateRange`, `DateWeek`).
|
||||
|
||||
### Exclusion : `SiteSelector`
|
||||
|
||||
`MalioSiteSelector` est un **radiogroup de tuiles** (segmented control) : il n'a **pas de label de champ** (son `labelClass` style le nom de chaque tuile). Y placer un astérisque n'a pas de sens. Il est **exclu** du périmètre `required`/astérisque. À rouvrir si un besoin de « groupe obligatoire » émerge (ce serait alors un libellé de groupe distinct, hors de ce ticket).
|
||||
|
||||
### Alternative écartée
|
||||
|
||||
Inliner un `<span>` dans chaque composant : duplication, couleur/espacement à changer à ~20 endroits. Le composant partagé est préféré.
|
||||
|
||||
## Section 2 — Sanitisation `MalioInputEmail`
|
||||
|
||||
### Nouvelle prop
|
||||
|
||||
`lowercase?: boolean` (défaut `false`).
|
||||
|
||||
### Fonction de sanitisation (pure, testable)
|
||||
|
||||
```ts
|
||||
const sanitizeEmail = (v: string) => {
|
||||
let out = v.replace(/\s+/g, '') // supprime TOUT espace
|
||||
if (props.lowercase) out = out.toLowerCase()
|
||||
return out
|
||||
}
|
||||
```
|
||||
|
||||
### `onInput` réécrit
|
||||
|
||||
```ts
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const raw = target.value
|
||||
const sanitized = sanitizeEmail(raw)
|
||||
|
||||
if (sanitized !== raw) {
|
||||
// `<input type="email">` ne supporte PAS l'API de sélection :
|
||||
// selectionStart vaut null, setSelectionRange lève une exception.
|
||||
// On garde donc la repositionnement défensif (no-op sur type=email).
|
||||
const caret = target.selectionStart
|
||||
target.value = sanitized
|
||||
if (caret !== null) {
|
||||
const newCaret = sanitizeEmail(raw.slice(0, caret)).length
|
||||
try {
|
||||
target.setSelectionRange(newCaret, newCaret)
|
||||
} catch {
|
||||
/* type d'input sans support de sélection — ignore */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isControlled.value) localValue.value = sanitized
|
||||
emit('update:modelValue', sanitized)
|
||||
}
|
||||
```
|
||||
|
||||
Points clés :
|
||||
|
||||
- **Resynchro DOM** : `target.value = sanitized` même en mode contrôlé, pour que l'affichage colle toujours à la valeur émise.
|
||||
- **Caveat curseur** : la spec HTML interdit l'API de sélection sur `type="email"` (`selectionStart` = `null`, `setSelectionRange` lève). La repositionnement est donc **best-effort** et inactif sur l'email : sur le cas rare d'une suppression d'espace en milieu de chaîne, le curseur peut aller en fin. Les cas courants (espace en fin, collage) gardent naturellement le curseur en fin. Le code est gardé (`caret !== null` + `try/catch`) pour ne jamais lever.
|
||||
- **Collage** couvert (paste déclenche `input`).
|
||||
- **Inchangé** : `type="email"`, `inputmode="email"`, icône, et **aucune validation de format**.
|
||||
|
||||
## Section 3 — Tests, docs & livraison
|
||||
|
||||
### Tests (colocalisés `*.test.ts`)
|
||||
|
||||
- `RequiredMark.test.ts` — rend `*`, `aria-hidden="true"`, classe `text-m-danger`.
|
||||
- 1 test ciblé par composant équipé : `required: true` → astérisque présent dans le label ; défaut → absent. S'appuie sur le helper `mountComponent` existant de chaque fichier.
|
||||
- `InputEmail.test.ts` — espaces (début/milieu/fin) supprimés ; `lowercase=false` préserve la casse ; `lowercase=true` minuscule ; valeur émise sanitisée ; valeur DOM resynchronisée. Le curseur n'est pas testé (peu fiable en jsdom) → on teste la valeur.
|
||||
|
||||
⚠️ Suite de tests **flaky** connue (timeouts intermittents). Lancer les tests des fichiers touchés ; en cas de timeout non lié aux changements, relancer / documenter plutôt que conclure à un échec.
|
||||
|
||||
### Documentation (manuelle, requise par convention)
|
||||
|
||||
- `COMPONENTS.md` : ajouter la ligne `required` aux 5 composants manquants ; ajouter `lowercase` à `MalioInputEmail` ; mentionner en intro famille formulaire que `required` affiche un astérisque rouge.
|
||||
- `CHANGELOG.md` : entrée(s) `MUI-41` sous `### Added`, format existant (`* [#MUI-41] ...`).
|
||||
|
||||
### Playground / Histoire
|
||||
|
||||
Ajouter un exemple `required` + un exemple email `lowercase` sur les pages playground concernées si coût faible ; sinon signaler (hors scope strict).
|
||||
|
||||
### Découpage de livraison (1 PR, commits Conventional)
|
||||
|
||||
1. `feat(ui): MalioRequiredMark + prop required sur Select/SelectCheckbox/Upload/RichText/SiteSelector`
|
||||
2. `feat(ui): astérisque required dans le label de la famille formulaire`
|
||||
3. `feat(inputs): sanitisation email (suppression espaces + option lowercase)`
|
||||
4. `docs: COMPONENTS.md + CHANGELOG`
|
||||
|
||||
Branche : `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (inchangée).
|
||||
Reference in New Issue
Block a user