feat(ui) : MalioDate/DateTime — event update:rawValue pour validation back-autoritative (#MUI-44) (#74)
## MUI-44 — Exposer la saisie brute invalide (`@update:rawValue`) Suite de MUI-43. Une app consommatrice (Starseed/ERP) fait de la **validation back-autoritative** : plutôt que bloquer le submit côté front, elle transmet la saisie invalide au serveur qui renvoie un `422` mappé inline. Or `MalioDate`/`MalioDateTime` **avalent** la saisie invalide (ni `modelValue`, ni texte brut) → le parent ne peut rien envoyer. ### Changements - Nouvel emit `(e: 'update:rawValue', value: string)` sur `Date.vue` et `DateTime.vue`, émis à chaque commit : - saisie **invalide** (non parsable ou hors `min`/`max`) → chaîne brute trimmée telle que tapée (ex. `"32/13/2026"`), **sans** emit `update:modelValue` ; - saisie **valide ou vide**, **clear**, **sélection au calendrier** (+ réglage d'heure pour DateTime) → `''`. - Canal **séparé** : `modelValue` reste `string` ISO `| null` (affichage + round-trip). Le parent construit son payload via `valid ? modelValue : rawValue`. ### Tests (TDD) 6 cas ajoutés par composant : malformé, hors bornes, valide, vidé, clear, sélection calendrier. Suite complète **987 ✓**, ESLint 0 erreur. ### Doc `COMPONENTS.md` (paragraphe + Events + exemples) et `CHANGELOG.md` (entrée MUI-44) à jour. ### Hors périmètre `DateRange`/`DateWeek` (pas de saisie texte libre). Branchement Starseed (`collectDenormalizationErrors`, `useFormErrors`) traité côté ERP. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #74 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #74.
This commit is contained in:
@@ -283,4 +283,58 @@ describe('MalioDateTime', () => {
|
||||
expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
|
||||
})
|
||||
})
|
||||
|
||||
describe('saisie brute (update:rawValue)', () => {
|
||||
it('émet le texte brut trimmé sur saisie malformée, sans émettre modelValue', async () => {
|
||||
const wrapper = mountDateTime({editable: true})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
await input.setValue('32/13/2026 14:30')
|
||||
await input.trigger('blur')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual(['32/13/2026 14:30'])
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('émet le texte brut trimmé sur saisie hors min/max', async () => {
|
||||
const wrapper = mountDateTime({editable: true, min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
await input.setValue('25/12/2026 10:00')
|
||||
await input.trigger('blur')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual(['25/12/2026 10:00'])
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('émet rawValue vide et l\'ISO sur saisie clavier valide', async () => {
|
||||
const wrapper = mountDateTime({editable: true})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
await input.setValue('20/05/2026 14:30')
|
||||
await input.trigger('blur')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual([''])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T14:30:00'])
|
||||
})
|
||||
|
||||
it('émet rawValue vide sur saisie vidée au blur', async () => {
|
||||
const wrapper = mountDateTime({editable: true, modelValue: '2026-05-20T14:30:00'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
await input.setValue('')
|
||||
await input.trigger('blur')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual([''])
|
||||
})
|
||||
|
||||
it('émet rawValue vide sur clear', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual([''])
|
||||
})
|
||||
|
||||
it('émet rawValue vide quand on sélectionne une date au calendrier', async () => {
|
||||
const wrapper = mountDateTime({editable: true})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
await input.setValue('32/13/2026 14:30')
|
||||
await input.trigger('blur')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual(['32/13/2026 14:30'])
|
||||
await input.trigger('focus')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:rawValue')?.at(-1)).toEqual([''])
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user