feat(ui) : MalioDate/DateTime — validité, saisie clavier & gabarit (#MUI-43) (#71)

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>
2026-06-11 15:16:10 +00:00
parent 23a9729dcd
commit 9f9723d01c
10 changed files with 463 additions and 20 deletions
@@ -338,7 +338,9 @@ describe('MalioDate', () => {
      await input.trigger('focus')
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
      await input.setValue('19/05/2026')
-      await input.trigger('keydown.enter')
+      // Valeur DOM réelle de la touche Entrée ('Enter') ; `trigger('keydown.enter')`
+      // produirait `key: 'enter'`, qui ne matche pas le handler manuel `e.key === 'Enter'`.
+      await input.trigger('keydown', {key: 'Enter'})
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
@@ -351,4 +353,122 @@ describe('MalioDate', () => {
      expect(wrapper.text()).toContain('Format incorrect')
    })
  })
+
+  describe('gabarit de saisie (editable)', () => {
+    it('affiche le gabarit complet en gris quand editable + focus + vide', async () => {
+      const wrapper = mountDate({editable: true})
+      await wrapper.get('[data-test="date-input"]').trigger('focus')
+      const ghost = wrapper.get('[data-test="format-ghost"]')
+      expect(ghost.text()).toBe('JJ/MM/AAAA')
+      expect(wrapper.get('[data-test="ghost-remaining"]').classes()).toContain('text-m-muted')
+    })
+
+    it('remplit le gabarit au fur et à mesure de la saisie', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.trigger('focus')
+      await input.setValue('19')
+      // eager : le séparateur se pose dès que le groupe est complet (« 19 » → « 19/ »)
+      expect(wrapper.get('[data-test="format-ghost"]').text()).toBe('19/MM/AAAA')
+      expect(wrapper.get('[data-test="ghost-typed"]').text()).toBe('19/')
+      expect(wrapper.get('[data-test="ghost-typed"]').classes()).toContain('text-black')
+    })
+
+    it('pose le séparateur automatiquement dès qu\'un groupe est complet (eager)', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('1905')
+      expect((input.element as HTMLInputElement).value).toBe('19/05/')
+    })
+
+    it('n\'affiche pas de gabarit en mode non editable', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="format-ghost"]').exists()).toBe(false)
+    })
+
+    it('n\'affiche pas de gabarit quand editable mais vide et non focus', () => {
+      const wrapper = mountDate({editable: true})
+      expect(wrapper.find('[data-test="format-ghost"]').exists()).toBe(false)
+    })
+
+    it('vide le champ au clic sur la croix même après une saisie invalide (modelValue déjà null)', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect((input.element as HTMLInputElement).value).toBe('32/13/2026')
+      await wrapper.get('[data-test="clear"]').trigger('click')
+      expect((input.element as HTMLInputElement).value).toBe('')
+    })
+  })
+
+  describe('état de validité (update:valid)', () => {
+    it('émet valid=true au montage avec une valeur valide', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+
+    it('émet valid=true au montage quand le champ est vide', () => {
+      const wrapper = mountDate()
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+
+    it('émet valid=true sur saisie clavier valide', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('19/05/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+
+    it('émet valid=false sur saisie malformée sans émettre modelValue', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([false])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('émet valid=false sur saisie hors min/max', async () => {
+      const wrapper = mountDate({editable: true, min: '2026-05-10', max: '2026-05-20'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('25/12/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([false])
+    })
+
+    it('émet valid=true sur saisie vidée même si le champ est requis', async () => {
+      const wrapper = mountDate({editable: true, required: true, modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+    })
+
+    it('émet valid=true sur clear', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="clear"]').trigger('click')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+
+    it('émet valid=true quand on sélectionne une date au calendrier', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+
+    it('repasse valid=true quand modelValue change de l\'extérieur après une saisie invalide', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([false])
+      await wrapper.setProps({modelValue: '2026-05-19'})
+      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
+    })
+  })
 })