fix(date) : borne la saisie clavier pour empêcher les dates absurdes (99/99/9999)

Le masque maska n'imposait que la forme (##/##/####), donc 99/99/9999 était saisissable puis rejeté a posteriori par la validation. Le métier veut que ce soit impossible à taper. buildBoundedMask(template) borne le premier chiffre de chaque champ (jour 0-3, mois 0-1, heure 0-2, minute 0-5) ; il distingue le mois des minutes (même lettre M) selon la présence d'heures. Les impossibilités fines (31/02, 29/02 non bissextile, hors min/max) restent captées par la validation, en filet. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-18 16:18:54 +02:00
parent 06c739cdc7
commit e8ee70e7fc
6 changed files with 126 additions and 7 deletions
@@ -391,10 +391,23 @@ describe('MalioDate', () => {
    it('utilise le message invalidMessage personnalisé', async () => {
      const wrapper = mountDate({editable: true, invalidMessage: 'Format incorrect'})
      const input = wrapper.get('[data-test="date-input"]')
-      await input.setValue('99/99/9999')
+      // 32/13/2026 : structurellement saisissable (3 ≤ 3, 1 ≤ 1) mais date inexistante.
+      await input.setValue('32/13/2026')
      await input.trigger('blur')
      expect(wrapper.text()).toContain('Format incorrect')
    })
+
+    it('empêche la frappe d\'une date absurde (99/99/9999 borné par le masque)', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('99/99/9999')
+      await input.trigger('blur')
+      // Le masque borne le 1er chiffre (jour 0-3, mois 0-1) : « 9 » est rejeté,
+      // la saisie absurde ne s'inscrit jamais et aucune date réelle n'est émise.
+      expect((input.element as HTMLInputElement).value).not.toContain('99')
+      const emitted = wrapper.emitted('update:modelValue') ?? []
+      expect(emitted.every(([value]) => value === null)).toBe(true)
+    })
  })

  describe('gabarit de saisie (editable)', () => {
@@ -0,0 +1,45 @@
+import {describe, it, expect} from 'vitest'
+import {buildBoundedMask} from './maskTemplate'
+
+describe('buildBoundedMask', () => {
+  it('borne la dizaine du jour à 0-3 (bloque la saisie de 9 → 99 impossible)', () => {
+    const {mask, tokens} = buildBoundedMask('JJ/MM/AAAA')
+    const dayTens = tokens[mask[0]]
+    expect(dayTens.pattern.test('9')).toBe(false)
+    expect(dayTens.pattern.test('3')).toBe(true)
+    expect(dayTens.pattern.test('0')).toBe(true)
+  })
+
+  it('borne la dizaine du mois à 0-1 (bloque 9x)', () => {
+    const {mask, tokens} = buildBoundedMask('JJ/MM/AAAA')
+    const monthTens = tokens[mask[3]]
+    expect(monthTens.pattern.test('9')).toBe(false)
+    expect(monthTens.pattern.test('1')).toBe(true)
+    expect(monthTens.pattern.test('0')).toBe(true)
+  })
+
+  it('laisse l’année libre et conserve les séparateurs', () => {
+    const {mask} = buildBoundedMask('JJ/MM/AAAA')
+    expect(mask).toBe('d#/m#/####')
+  })
+
+  it('borne l’heure à 0-2 et la minute à 0-5 (datetime), sans confondre minute et mois', () => {
+    const {mask, tokens} = buildBoundedMask('JJ/MM/AAAA HH:MM')
+    expect(mask).toBe('d#/m#/#### h#:n#')
+    const hourTens = tokens[mask[11]]
+    expect(hourTens.pattern.test('2')).toBe(true)
+    expect(hourTens.pattern.test('9')).toBe(false)
+    const minuteTens = tokens[mask[14]]
+    // La minute doit monter jusqu’à 5 — surtout PAS bornée comme un mois (0-1).
+    expect(minuteTens.pattern.test('5')).toBe(true)
+    expect(minuteTens.pattern.test('2')).toBe(true)
+    expect(minuteTens.pattern.test('9')).toBe(false)
+  })
+
+  it('ne borne que le premier chiffre de chaque champ (les unités restent 0-9)', () => {
+    const {mask} = buildBoundedMask('JJ/MM/AAAA')
+    // unités jour (index 1) et mois (index 4) = chiffre libre '#'
+    expect(mask[1]).toBe('#')
+    expect(mask[4]).toBe('#')
+  })
+})
@@ -0,0 +1,56 @@
+import type {MaskTokens} from 'maska'
+
+// Tokens maska bornant le PREMIER chiffre de chaque champ d'une date/heure.
+// Objectif : rendre impossible la frappe de valeurs absurdes (ex. 99/99/9999)
+// dès la saisie. Les impossibilités plus fines (31/02, 29/02 non bissextile,
+// dépassement min/max) restent du ressort de la validation, en filet de sécurité.
+const BOUND_TOKENS: MaskTokens = {
+  d: {pattern: /[0-3]/}, // jour : dizaine 0-3
+  m: {pattern: /[0-1]/}, // mois : dizaine 0-1
+  h: {pattern: /[0-2]/}, // heure : dizaine 0-2
+  n: {pattern: /[0-5]/}, // minute : dizaine 0-5
+}
+
+/**
+ * Construit un masque maska borné à partir d'un gabarit d'affichage
+ * (ex. `JJ/MM/AAAA`, `JJ/MM/AAAA HH:MM`).
+ *
+ * Chaque lettre devient un slot chiffre : le premier chiffre d'un champ est borné
+ * (token dédié), les suivants restent libres (`#`). Les séparateurs sont conservés.
+ *
+ * Le `M` désigne le mois avant les heures, et les minutes après — d'où le suivi de
+ * `seenHour` pour ne pas borner les minutes comme un mois (0-1 au lieu de 0-5).
+ */
+export function buildBoundedMask(template: string): {mask: string, tokens: MaskTokens} {
+  let mask = ''
+  let prev = ''
+  let seenHour = false
+
+  for (const ch of template) {
+    if (!/[A-Za-z]/.test(ch)) {
+      mask += ch // séparateur (/, espace, :)
+      prev = ch
+      continue
+    }
+
+    const letter = ch.toUpperCase()
+    if (letter === 'H') seenHour = true
+
+    const isFirstOfField = ch !== prev
+    if (!isFirstOfField) {
+      mask += '#' // unités : chiffre libre
+    } else if (letter === 'J') {
+      mask += 'd'
+    } else if (letter === 'M') {
+      mask += seenHour ? 'n' : 'm'
+    } else if (letter === 'H') {
+      mask += 'h'
+    } else {
+      mask += '#' // année (ou tout autre champ) : libre
+    }
+
+    prev = ch
+  }
+
+  return {mask, tokens: BOUND_TOKENS}
+}
@@ -128,6 +128,7 @@ import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
 import {useCalendarPopover} from '../composables/useCalendarPopover'
 import {useCalendarView} from '../composables/useCalendarView'
+import {buildBoundedMask} from '../composables/maskTemplate'
 import {useKbdFocusRing} from '../../shared/useKbdFocusRing'

 defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
@@ -190,12 +191,15 @@ const generatedId = useId()
 const root = ref<HTMLElement | null>(null)

 const draft = ref(props.displayValue)
-// Le masque maska est dérivé du gabarit (lettres → slot `#`, séparateurs conservés).
+// Le masque maska est dérivé du gabarit : chaque lettre devient un slot chiffre,
+// le premier chiffre de chaque champ est borné (jour 0-3, mois 0-1, heure 0-2,
+// minute 0-5) pour empêcher la frappe de valeurs absurdes (ex. 99/99/9999).
 // eager : pose les séparateurs (/, espace, :) dès qu'un groupe est complet.
-const maskaOptions = computed<MaskInputOptions>(() => ({
-  mask: props.editable ? props.placeholderTemplate.replace(/[A-Za-z]/g, '#') : undefined,
-  eager: props.editable,
-}))
+const maskaOptions = computed<MaskInputOptions>(() => {
+  if (!props.editable) return {eager: false}
+  const {mask, tokens} = buildBoundedMask(props.placeholderTemplate)
+  return {mask, tokens, eager: true}
+})
 const inputReadonly = computed(() => !props.editable || props.readonly || props.disabled)

 // Gabarit fantôme : la partie saisie (noire) + le reste du gabarit (gris), affiché