[#MUI-33] Développer le composant Datepicker (#50)
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #50 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #50.
This commit is contained in:
1440
docs/superpowers/plans/2026-05-20-datepicker.md
Normal file
1440
docs/superpowers/plans/2026-05-20-datepicker.md
Normal file
File diff suppressed because it is too large
Load Diff
1362
docs/superpowers/plans/2026-05-20-daterange.md
Normal file
1362
docs/superpowers/plans/2026-05-20-daterange.md
Normal file
File diff suppressed because it is too large
Load Diff
780
docs/superpowers/plans/2026-05-20-dateweek.md
Normal file
780
docs/superpowers/plans/2026-05-20-dateweek.md
Normal file
@@ -0,0 +1,780 @@
|
||||
# MalioDateWeek — 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:** Composant `<MalioDateWeek>` (sélection d'une semaine ISO en un clic, hover de semaine), réutilisant le shell + le rendu pilule de `DateRange`.
|
||||
|
||||
**Architecture:** Une semaine sélectionnée est une plage lundi→dimanche : `DateWeek` calcule ces bornes et les passe à `MonthGrid` (rendu pilule réutilisé). Ajout de 2 props additives à `MonthGrid` (n° de semaine cliquable + repère) et d'un module pur `dateWeek.ts`.
|
||||
|
||||
**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, TypeScript strict, Tailwind (`m-*`), `@iconify/vue`, Vitest + `@vue/test-utils` (jsdom).
|
||||
|
||||
**Référence spec :** `docs/superpowers/specs/2026-05-20-dateweek-design.md`
|
||||
|
||||
---
|
||||
|
||||
## Conventions
|
||||
|
||||
- Tests ciblés : `npx vitest run <chemin>` ; commits avec `--no-verify` en cas de hook flaky (suite complète lancée par le hook).
|
||||
- `data-test` réutilisés (`date-input`, `popover`, `header-*`, `day`+`data-iso`, `clear`, `calendar-icon`, `month`, `week-number`).
|
||||
- Nouveaux attributs sur la cellule n° de semaine : `data-week-start` (lundi de la ligne), `data-marked` (`"true"`/`"false"`).
|
||||
- Ordre : 1) `dateWeek.ts` → 2) extension `MonthGrid` → 3) `DateWeek.vue` + tests → 4) story + playground.
|
||||
|
||||
---
|
||||
|
||||
## Task 1 : Helpers purs `dateWeek.ts`
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/composables/dateWeek.ts`
|
||||
- Test: `app/components/malio/date/composables/dateWeek.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests (échouent)**
|
||||
|
||||
```ts
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
formatWeekDisplay,
|
||||
isValidIsoWeek,
|
||||
isoWeekToMonday,
|
||||
mondayOf,
|
||||
sundayOf,
|
||||
toIsoWeek,
|
||||
} from './dateWeek'
|
||||
|
||||
describe('dateWeek', () => {
|
||||
describe('mondayOf / sundayOf', () => {
|
||||
it('returns Monday and Sunday of a midweek date', () => {
|
||||
expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
|
||||
expect(sundayOf('2026-05-20')).toBe('2026-05-24')
|
||||
})
|
||||
it('keeps Monday on a Monday', () => {
|
||||
expect(mondayOf('2026-05-18')).toBe('2026-05-18')
|
||||
})
|
||||
it('returns the preceding Monday for a Sunday', () => {
|
||||
expect(mondayOf('2026-05-24')).toBe('2026-05-18')
|
||||
})
|
||||
})
|
||||
|
||||
describe('toIsoWeek', () => {
|
||||
it('returns the ISO week of a date', () => {
|
||||
expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
|
||||
})
|
||||
it('handles year boundaries', () => {
|
||||
expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
|
||||
})
|
||||
})
|
||||
|
||||
describe('isoWeekToMonday', () => {
|
||||
it('returns the Monday of a week string', () => {
|
||||
expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
|
||||
})
|
||||
it('round-trips with toIsoWeek', () => {
|
||||
for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
|
||||
const monday = isoWeekToMonday(w)
|
||||
expect(monday).not.toBeNull()
|
||||
expect(toIsoWeek(monday as string)).toBe(w)
|
||||
}
|
||||
})
|
||||
it('returns null for invalid input', () => {
|
||||
expect(isoWeekToMonday('2026-21')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W00')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W54')).toBeNull()
|
||||
expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
|
||||
})
|
||||
})
|
||||
|
||||
describe('isValidIsoWeek', () => {
|
||||
it('accepts a real ISO week', () => {
|
||||
expect(isValidIsoWeek('2026-W21')).toBe(true)
|
||||
})
|
||||
it('rejects malformed or impossible weeks', () => {
|
||||
expect(isValidIsoWeek('2026-21')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W00')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W54')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatWeekDisplay', () => {
|
||||
it('formats a week as a human label', () => {
|
||||
expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
it('returns empty string for invalid input', () => {
|
||||
expect(formatWeekDisplay('2026-W54')).toBe('')
|
||||
})
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer, vérifier l'échec** — `npx vitest run app/components/malio/date/composables/dateWeek.test.ts` → FAIL (import non résolu)
|
||||
|
||||
- [ ] **Step 3 : Implémenter**
|
||||
|
||||
```ts
|
||||
// app/components/malio/date/composables/dateWeek.ts
|
||||
import {formatIsoToDisplay} from './dateFormat'
|
||||
|
||||
const parseUtc = (iso: string): Date => {
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
return new Date(Date.UTC(y, m - 1, d))
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getUTCFullYear()
|
||||
const m = String(d.getUTCMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getUTCDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
export function mondayOf(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7 // dimanche = 7
|
||||
d.setUTCDate(d.getUTCDate() - (dayNum - 1))
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function sundayOf(iso: string): string {
|
||||
const d = parseUtc(mondayOf(iso))
|
||||
d.setUTCDate(d.getUTCDate() + 6)
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function toIsoWeek(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const isoYear = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(isoYear, 0, 1))
|
||||
const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
return `${isoYear}-W${String(week).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function isoWeekToMonday(week: string): string | null {
|
||||
const m = /^(\d{4})-W(\d{2})$/.exec(week)
|
||||
if (!m) return null
|
||||
const year = Number(m[1])
|
||||
const w = Number(m[2])
|
||||
if (w < 1 || w > 53) return null
|
||||
// Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
|
||||
const jan4 = new Date(Date.UTC(year, 0, 4))
|
||||
const jan4Day = jan4.getUTCDay() || 7
|
||||
const monday = new Date(jan4)
|
||||
monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
|
||||
const iso = toIso(monday)
|
||||
// Garde-fou : la semaine 53 n'existe pas pour toutes les années
|
||||
if (toIsoWeek(iso) !== week) return null
|
||||
return iso
|
||||
}
|
||||
|
||||
export function isValidIsoWeek(week: string): boolean {
|
||||
return isoWeekToMonday(week) !== null
|
||||
}
|
||||
|
||||
export function formatWeekDisplay(week: string): string {
|
||||
const monday = isoWeekToMonday(week)
|
||||
if (!monday) return ''
|
||||
const sunday = sundayOf(monday)
|
||||
const w = Number(week.slice(6))
|
||||
const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
|
||||
const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
|
||||
return `Semaine ${w} (${startDdMm} → ${endFull})`
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Lancer, vérifier le succès** — PASS
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/composables/dateWeek.ts app/components/malio/date/composables/dateWeek.test.ts
|
||||
git commit -m "feat : helpers purs de semaine ISO (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2 : Ajouts additifs à `MonthGrid.vue`
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/date/internal/MonthGrid.vue`
|
||||
|
||||
Couvert par `DateWeek.test.ts` (Task 3) ; non-régression par `Date.test.ts` / `DateRange.test.ts`.
|
||||
|
||||
- [ ] **Step 1 : Remplacer la cellule n° de semaine** par un élément polymorphe interactif
|
||||
|
||||
Dans le template, remplacer le bloc actuel :
|
||||
|
||||
```vue
|
||||
<div
|
||||
data-test="week-number"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
|
||||
:class="[
|
||||
week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</div>
|
||||
```
|
||||
|
||||
par :
|
||||
|
||||
```vue
|
||||
<component
|
||||
:is="interactiveWeekNumber ? 'button' : 'div'"
|
||||
data-test="week-number"
|
||||
:data-week-start="week.days[0].isoDate"
|
||||
:data-marked="markedWeekStart === week.days[0].isoDate"
|
||||
:type="interactiveWeekNumber ? 'button' : undefined"
|
||||
:disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
|
||||
:class="[
|
||||
weekNumberClass(week),
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
@click="onWeekNumberClick(week)"
|
||||
@mouseenter="onWeekNumberHover(week)"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</component>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Ajouter les props et la logique** (script)
|
||||
|
||||
Modifier les `defineProps`/`withDefaults` pour ajouter `interactiveWeekNumber` et `markedWeekStart`, importer `WeekRow`, et ajouter les helpers. Remplacer le bloc props :
|
||||
|
||||
```ts
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
month: number
|
||||
year: number
|
||||
selectedDate?: string | null
|
||||
rangeStart?: string | null
|
||||
rangeEnd?: string | null
|
||||
previewDate?: string | null
|
||||
interactiveWeekNumber?: boolean
|
||||
markedWeekStart?: string | null
|
||||
min?: string
|
||||
max?: string
|
||||
}>(),
|
||||
{
|
||||
selectedDate: null,
|
||||
rangeStart: undefined,
|
||||
rangeEnd: undefined,
|
||||
previewDate: undefined,
|
||||
interactiveWeekNumber: false,
|
||||
markedWeekStart: null,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
Mettre à jour l'import du composable pour récupérer `WeekRow` :
|
||||
|
||||
```ts
|
||||
import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
|
||||
```
|
||||
|
||||
Ajouter, après `const inRange = ...` :
|
||||
|
||||
```ts
|
||||
const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
|
||||
|
||||
const weekNumberClass = (week: WeekRow) => {
|
||||
if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
|
||||
const parts = ['bg-m-primary-light']
|
||||
parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
|
||||
if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onWeekNumberClick = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('select', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const onWeekNumberHover = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('hover', week.days[0].isoDate)
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Non-régression `Date` et `DateRange`**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/Date.test.ts app/components/malio/date/DateRange.test.ts`
|
||||
Expected: PASS (21 + 17). La cellule n° reste un `<div>` non interactif quand `interactiveWeekNumber` est `false`.
|
||||
|
||||
- [ ] **Step 4 : Lint** — `npx eslint app/components/malio/date/internal/MonthGrid.vue` → 0 erreur
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/internal/MonthGrid.vue
|
||||
git commit -m "feat : MonthGrid n° de semaine interactif + repère (mode semaine) (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3 : `DateWeek.vue` + tests
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/DateWeek.vue`
|
||||
- Test: `app/components/malio/date/DateWeek.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Créer `DateWeek.vue`**
|
||||
|
||||
```vue
|
||||
<!-- app/components/malio/date/DateWeek.vue -->
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="validWeek?.monday ?? null"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="onClear"
|
||||
@close="onClose"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:range-start="activeMonday"
|
||||
:range-end="activeSunday"
|
||||
:marked-week-start="validWeek?.monday ?? null"
|
||||
interactive-week-number
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => onSelect(iso, close)"
|
||||
@hover="onHover"
|
||||
/>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek, formatWeekDisplay} from './composables/dateWeek'
|
||||
|
||||
defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const hoverWeekStart = ref<string | null>(null)
|
||||
|
||||
const validWeek = computed(() => {
|
||||
if (props.modelValue && isValidIsoWeek(props.modelValue)) {
|
||||
return {monday: isoWeekToMonday(props.modelValue) as string}
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
|
||||
const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
|
||||
|
||||
const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
|
||||
|
||||
const onSelect = (iso: string, close: () => void) => {
|
||||
emit('update:modelValue', toIsoWeek(iso))
|
||||
hoverWeekStart.value = null
|
||||
close()
|
||||
}
|
||||
|
||||
const onHover = (iso: string | null) => {
|
||||
hoverWeekStart.value = iso ? mondayOf(iso) : null
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
hoverWeekStart.value = null
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
emit('update:modelValue', null)
|
||||
hoverWeekStart.value = null
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Écrire `DateWeek.test.ts`**
|
||||
|
||||
```ts
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateWeek from './DateWeek.vue'
|
||||
|
||||
type DateWeekProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
|
||||
const mountWeek = (props: DateWeekProps = {}) =>
|
||||
mount(DateWeekForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateWeek', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountWeek({label: 'Semaine'})
|
||||
expect(wrapper.get('label').text()).toBe('Semaine')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted week when modelValue is set', () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountWeek()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the month of the selected week', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('selects the week when a day is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('selects the week when the week number is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('previews the whole week on day hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('previews the whole week on week-number hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('marks the committed week number', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables a week fully outside min/max', async () => {
|
||||
const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
|
||||
expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
|
||||
const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
|
||||
expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountWeek({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountWeek({error: 'Semaine requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Semaine requise')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Lancer, vérifier le succès** — `npx vitest run app/components/malio/date/DateWeek.test.ts` → PASS (~14)
|
||||
|
||||
- [ ] **Step 4 : Lint + suite date complète**
|
||||
|
||||
Run: `npx eslint app/components/malio/date/ && npx vitest run app/components/malio/date/`
|
||||
Expected: 0 erreur lint ; tout vert (dont `Date` 21 et `DateRange` 17 inchangés).
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/DateWeek.vue app/components/malio/date/DateWeek.test.ts
|
||||
git commit -m "feat : composant MalioDateWeek (sélection semaine ISO) (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4 : Story + playground
|
||||
|
||||
**Files:**
|
||||
- Create: `app/story/date/dateWeek.story.vue`
|
||||
- Create: `.playground/pages/composant/date/dateWeek.vue`
|
||||
|
||||
- [ ] **Step 1 : Créer la story**
|
||||
|
||||
```vue
|
||||
<!-- app/story/date/dateWeek.story.vue -->
|
||||
<template>
|
||||
<Story title="Date/DateWeek">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDateWeek
|
||||
v-model="simpleValue"
|
||||
label="Semaine"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine de livraison"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateWeek
|
||||
v-model="boundedValue"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateWeek
|
||||
v-model="errorValue"
|
||||
label="Semaine"
|
||||
error="Semaine invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-W21')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Créer la page playground**
|
||||
|
||||
```vue
|
||||
<!-- .playground/pages/composant/date/dateWeek.vue -->
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateWeek</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="value"
|
||||
label="Semaine"
|
||||
hint="Clique un jour ou un n° de semaine"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-W52'"
|
||||
>
|
||||
Forcer 2026-W52
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="erpValue"
|
||||
label="Semaine"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateWeek
|
||||
v-model="bounded"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Vérification visuelle** — `npm run dev` → menu "Date" → page DateWeek : hover de semaine (ligne entière), clic jour/n° → sélection, repère n° en bleu plein, bornes. Et `npm run story:dev`.
|
||||
|
||||
- [ ] **Step 4 : Lint** — `npx eslint app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue` → 0 erreur
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue
|
||||
git commit -m "feat : story et page playground de MalioDateWeek (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-Review (effectuée à l'écriture)
|
||||
|
||||
**Couverture spec :** `dateWeek.ts` (mondayOf/sundayOf/toIsoWeek/isoWeekToMonday/isValidIsoWeek/formatWeekDisplay) ✓ T1 ; `MonthGrid` `interactiveWeekNumber`+`markedWeekStart`+`data-week-start`/`data-marked`+weekSelectable ✓ T2 ; `DateWeek` API + un clic + hover semaine + repère + clear + min/max overlap + invalide→null ✓ T3 ; affichage `"Semaine 21 (...)"` ✓ T1/T3 ; story+playground ✓ T4. modelValue `YYYY-Www` ✓.
|
||||
|
||||
**Placeholders :** aucun ; code complet.
|
||||
|
||||
**Cohérence des types :** `toIsoWeek(iso)→string`, `isoWeekToMonday(week)→string|null`, `mondayOf`/`sundayOf(iso)→string`, `formatWeekDisplay(week)→string` définis T1, consommés T3. `MonthGrid` props `interactiveWeekNumber`/`markedWeekStart` T2 → passées par `DateWeek` T3. Events `select`/`hover` (iso jour) réutilisés ; `DateWeek.onSelect` mappe via `toIsoWeek`, `onHover` via `mondayOf`. `WeekRow` importé de `useMonthMatrix` (déjà exporté). Le rendu pilule s'appuie sur `rangeStart`/`rangeEnd` (inchangés) → `Date`/`DateRange` non impactés.
|
||||
|
||||
**Écart assumé :** `MonthGrid` gagne `data-week-start`/`data-marked` (testabilité), conforme à la spec.
|
||||
712
docs/superpowers/plans/2026-05-22-datetime.md
Normal file
712
docs/superpowers/plans/2026-05-22-datetime.md
Normal file
@@ -0,0 +1,712 @@
|
||||
# MalioDateTime 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:** Ajouter un composant `MalioDateTime` (date + heure dans un seul champ) à la famille temporelle de `@malio/layer-ui`, en version intérimaire avec `<input type="time">` natif.
|
||||
|
||||
**Architecture:** Fine enveloppe autour du shell `internal/CalendarField.vue` (comme `MalioDate`). Le slot popover contient `MonthGrid` (jour) + un `<input type="time">` (heure) sous la grille. La valeur émise est l'ISO naïf `"YYYY-MM-DDTHH:MM:00"`. Logique de découpe/recomposition dans un nouveau composable `datetimeFormat.ts`.
|
||||
|
||||
**Tech Stack:** Vue 3 `<script setup lang="ts">`, TypeScript strict, Tailwind (`m-*`), `tailwind-merge`, Vitest + @vue/test-utils (jsdom).
|
||||
|
||||
**Conventions (rappel) :** Conventional Commits **avec espace avant `:`**, type minuscule, suffixe ticket `(#MUI-33)`, pas de préfixe `[#...]`. Terminer par `Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>`. Le hook pre-commit est flaky (timeouts WSL2) → après vérification ciblée `npx vitest run <chemin>`, committer avec `--no-verify`.
|
||||
|
||||
**Réfs spec :** `docs/superpowers/specs/2026-05-22-datetime-design.md`.
|
||||
|
||||
---
|
||||
|
||||
### Task 1 : Composable `datetimeFormat.ts`
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/composables/datetimeFormat.ts`
|
||||
- Test: `app/components/malio/date/composables/datetimeFormat.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests qui échouent**
|
||||
|
||||
Créer `app/components/malio/date/composables/datetimeFormat.test.ts` :
|
||||
|
||||
```ts
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
composeDateTime,
|
||||
formatIsoDateTimeToDisplay,
|
||||
isValidIsoDateTime,
|
||||
splitDateTime,
|
||||
} from './datetimeFormat'
|
||||
|
||||
describe('datetimeFormat', () => {
|
||||
describe('isValidIsoDateTime', () => {
|
||||
it('accepte un datetime ISO complet valide', () => {
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30:00')).toBe(true)
|
||||
expect(isValidIsoDateTime('2026-01-01T00:00:00')).toBe(true)
|
||||
expect(isValidIsoDateTime('2026-12-31T23:59:59')).toBe(true)
|
||||
})
|
||||
|
||||
it('rejette une date seule, des composants invalides ou une chaîne vide', () => {
|
||||
expect(isValidIsoDateTime('2026-05-20')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-13-01T00:00:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T24:00:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:60:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30:60')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30')).toBe(false)
|
||||
expect(isValidIsoDateTime('')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatIsoDateTimeToDisplay', () => {
|
||||
it('formate un datetime valide en JJ/MM/AAAA HH:MM', () => {
|
||||
expect(formatIsoDateTimeToDisplay('2026-05-20T14:30:00')).toBe('20/05/2026 14:30')
|
||||
})
|
||||
|
||||
it('renvoie une chaîne vide pour nul ou invalide', () => {
|
||||
expect(formatIsoDateTimeToDisplay(null)).toBe('')
|
||||
expect(formatIsoDateTimeToDisplay('2026-05-20')).toBe('')
|
||||
expect(formatIsoDateTimeToDisplay('nope')).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('splitDateTime', () => {
|
||||
it('découpe un datetime valide', () => {
|
||||
expect(splitDateTime('2026-05-20T14:30:00')).toEqual({date: '2026-05-20', time: '14:30'})
|
||||
})
|
||||
|
||||
it('renvoie date null et time vide pour nul, date seule ou invalide', () => {
|
||||
expect(splitDateTime(null)).toEqual({date: null, time: ''})
|
||||
expect(splitDateTime('2026-05-20')).toEqual({date: null, time: ''})
|
||||
expect(splitDateTime('nope')).toEqual({date: null, time: ''})
|
||||
})
|
||||
})
|
||||
|
||||
describe('composeDateTime', () => {
|
||||
it('recompose un datetime ISO avec secondes à 00', () => {
|
||||
expect(composeDateTime('2026-05-20', '14:30')).toBe('2026-05-20T14:30:00')
|
||||
})
|
||||
|
||||
it('utilise 00:00 quand l\\'heure est vide', () => {
|
||||
expect(composeDateTime('2026-05-20', '')).toBe('2026-05-20T00:00:00')
|
||||
})
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer les tests pour vérifier qu'ils échouent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/composables/datetimeFormat.test.ts`
|
||||
Expected: FAIL (module `./datetimeFormat` introuvable).
|
||||
|
||||
- [ ] **Step 3 : Écrire l'implémentation**
|
||||
|
||||
Créer `app/components/malio/date/composables/datetimeFormat.ts` :
|
||||
|
||||
```ts
|
||||
import {isValidIso} from './dateFormat'
|
||||
|
||||
const DATETIME_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):(\d{2})$/
|
||||
|
||||
export function isValidIsoDateTime(s: string): boolean {
|
||||
const m = DATETIME_RE.exec(s)
|
||||
if (!m) return false
|
||||
const [, date, hh, mm, ss] = m
|
||||
if (!isValidIso(date)) return false
|
||||
const h = Number(hh)
|
||||
const min = Number(mm)
|
||||
const sec = Number(ss)
|
||||
return h >= 0 && h <= 23 && min >= 0 && min <= 59 && sec >= 0 && sec <= 59
|
||||
}
|
||||
|
||||
export function formatIsoDateTimeToDisplay(s: string | null): string {
|
||||
if (!s || !isValidIsoDateTime(s)) return ''
|
||||
const [date, time] = s.split('T')
|
||||
const [y, mo, d] = date.split('-')
|
||||
const [hh, mm] = time.split(':')
|
||||
return `${d}/${mo}/${y} ${hh}:${mm}`
|
||||
}
|
||||
|
||||
export function splitDateTime(s: string | null): {date: string | null; time: string} {
|
||||
if (!s || !isValidIsoDateTime(s)) return {date: null, time: ''}
|
||||
const [date, time] = s.split('T')
|
||||
return {date, time: time.slice(0, 5)}
|
||||
}
|
||||
|
||||
export function composeDateTime(date: string, time: string): string {
|
||||
const t = time || '00:00'
|
||||
return `${date}T${t}:00`
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Lancer les tests pour vérifier qu'ils passent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/composables/datetimeFormat.test.ts`
|
||||
Expected: PASS (tous verts).
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/composables/datetimeFormat.ts app/components/malio/date/composables/datetimeFormat.test.ts
|
||||
git commit --no-verify -m "feat : composable datetimeFormat pour MalioDateTime (#MUI-33)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2 : Composant `DateTime.vue`
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/DateTime.vue`
|
||||
- Test: `app/components/malio/date/DateTime.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests qui échouent**
|
||||
|
||||
Créer `app/components/malio/date/DateTime.test.ts` :
|
||||
|
||||
```ts
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateTime_ from './DateTime.vue'
|
||||
|
||||
type DateTimeProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
|
||||
const mountDateTime = (props: DateTimeProps = {}) =>
|
||||
mount(DateTimeForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateTime', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
describe('rendu', () => {
|
||||
it('affiche le label et l\\'icône calendrier', () => {
|
||||
const wrapper = mountDateTime({label: 'Rendez-vous'})
|
||||
expect(wrapper.get('label').text()).toBe('Rendez-vous')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('affiche la valeur formatée date + heure dans le champ', () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('20/05/2026 14:30')
|
||||
})
|
||||
})
|
||||
|
||||
describe('popover', () => {
|
||||
it('ouvre la grille et l\\'input heure au clic', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-input"]').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('sélection', () => {
|
||||
it('émet le jour à 00:00 et garde le popover ouvert', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
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:modelValue')?.at(-1)).toEqual(['2026-05-19T00:00:00'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('applique l\\'heure réglée avant le clic du jour', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const time = wrapper.get('[data-test="time-input"]')
|
||||
;(time.element as HTMLInputElement).value = '09:15'
|
||||
await time.trigger('input')
|
||||
// pas d'émission tant qu'aucun jour n'est choisi
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
|
||||
})
|
||||
|
||||
it('met à jour l\\'heure quand une date est déjà choisie', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const time = wrapper.get('[data-test="time-input"]')
|
||||
;(time.element as HTMLInputElement).value = '08:45'
|
||||
await time.trigger('input')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
|
||||
})
|
||||
|
||||
it('initialise l\\'input heure depuis la valeur', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const time = wrapper.get('[data-test="time-input"]').element as HTMLInputElement
|
||||
expect(time.value).toBe('14:30')
|
||||
})
|
||||
})
|
||||
|
||||
describe('bornes min/max', () => {
|
||||
it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
|
||||
const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('effacement', () => {
|
||||
it('émet null au clic sur la croix', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
})
|
||||
|
||||
describe('accessibilité', () => {
|
||||
it('positionne aria-invalid et describedby sur erreur', () => {
|
||||
const wrapper = mountDateTime({error: 'Date requise'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Date requise')
|
||||
})
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer les tests pour vérifier qu'ils échouent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/DateTime.test.ts`
|
||||
Expected: FAIL (`DateTime.vue` introuvable).
|
||||
|
||||
- [ ] **Step 3 : Écrire l'implémentation**
|
||||
|
||||
Créer `app/components/malio/date/DateTime.vue` :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="datePart"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="onClear"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:selected-date="datePart"
|
||||
:min="min?.slice(0, 10)"
|
||||
:max="max?.slice(0, 10)"
|
||||
@select="onSelectDay"
|
||||
/>
|
||||
<!-- Bloc heure intérimaire : input natif, isolé pour remplacement futur par le sélecteur dédié. -->
|
||||
<div class="mt-[10px] flex items-center gap-2 border-t border-m-muted/30 pt-[10px]">
|
||||
<label
|
||||
:for="timeInputId"
|
||||
class="text-sm font-medium text-m-muted"
|
||||
>
|
||||
Heure
|
||||
</label>
|
||||
<input
|
||||
:id="timeInputId"
|
||||
data-test="time-input"
|
||||
type="time"
|
||||
:value="timeValue"
|
||||
class="rounded-md border border-m-muted bg-white px-2 py-1 text-base outline-none focus:border-m-primary"
|
||||
@input="onTimeInput"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId, watch} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
|
||||
|
||||
defineOptions({name: 'MalioDateTime', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA HH:MM',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const timeInputId = computed(() => `${props.id || `malio-datetime-${generatedId}`}-time`)
|
||||
|
||||
// pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
|
||||
const pendingTime = ref('')
|
||||
|
||||
const parts = computed(() => splitDateTime(props.modelValue ?? null))
|
||||
const datePart = computed(() => parts.value.date)
|
||||
const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue ?? null))
|
||||
const timeValue = computed(() => parts.value.time || pendingTime.value)
|
||||
|
||||
function onSelectDay(iso: string) {
|
||||
const time = parts.value.time || pendingTime.value || '00:00'
|
||||
emit('update:modelValue', composeDateTime(iso, time))
|
||||
}
|
||||
|
||||
function onTimeInput(e: Event) {
|
||||
const value = (e.target as HTMLInputElement).value
|
||||
if (!value) return
|
||||
if (datePart.value) {
|
||||
emit('update:modelValue', composeDateTime(datePart.value, value))
|
||||
}
|
||||
else {
|
||||
pendingTime.value = value
|
||||
}
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
pendingTime.value = ''
|
||||
emit('update:modelValue', null)
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val && !isValidIsoDateTime(val) && import.meta.dev) {
|
||||
console.warn(`[MalioDateTime] modelValue invalide ignoré : "${val}"`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Lancer les tests pour vérifier qu'ils passent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/DateTime.test.ts`
|
||||
Expected: PASS (tous verts).
|
||||
|
||||
Note : si `@input` ne déclenche pas `value` correctement en jsdom, utiliser `await time.setValue('09:15')` à la place du couple `.value =` + `.trigger('input')` dans les tests.
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/DateTime.vue app/components/malio/date/DateTime.test.ts
|
||||
git commit --no-verify -m "feat : composant MalioDateTime (date + heure) (#MUI-33)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3 : Page playground + entrée nav
|
||||
|
||||
**Files:**
|
||||
- Create: `.playground/pages/composant/date/datetime.vue`
|
||||
- Modify: `.playground/playground.nav.ts` (section `DATES & HEURES`)
|
||||
|
||||
- [ ] **Step 1 : Créer la page playground**
|
||||
|
||||
Créer `.playground/pages/composant/date/datetime.vue` :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateTime</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">Simple</h2>
|
||||
<MalioDateTime
|
||||
v-model="value"
|
||||
label="Date et heure du rendez-vous"
|
||||
hint="Choisis un jour puis une heure"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">Valeur initiale + bornes</h2>
|
||||
<MalioDateTime
|
||||
v-model="bounded"
|
||||
label="Créneau"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO naïf) : <code>{{ bounded ?? 'null' }}</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const bounded = ref<string | null>('2026-05-20T14:30:00')
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Ajouter l'entrée nav**
|
||||
|
||||
Dans `.playground/playground.nav.ts`, section `DATES & HEURES`, ajouter l'item après `Semaine` :
|
||||
|
||||
```ts
|
||||
{label: 'Date & heure', to: '/composant/date/datetime'},
|
||||
```
|
||||
|
||||
Le bloc devient :
|
||||
|
||||
```ts
|
||||
items: [
|
||||
{label: 'Date', to: '/composant/date/date'},
|
||||
{label: 'Plage de dates', to: '/composant/date/dateRange'},
|
||||
{label: 'Semaine', to: '/composant/date/dateWeek'},
|
||||
{label: 'Date & heure', to: '/composant/date/datetime'},
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
],
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Vérifier le lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: PASS (pas d'erreur sur les fichiers playground).
|
||||
|
||||
- [ ] **Step 4 : Commit**
|
||||
|
||||
```bash
|
||||
git add .playground/pages/composant/date/datetime.vue .playground/playground.nav.ts
|
||||
git commit --no-verify -m "feat : page playground MalioDateTime (#MUI-33)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4 : Story Histoire
|
||||
|
||||
**Files:**
|
||||
- Create: `app/story/date/dateTime.story.vue`
|
||||
|
||||
- [ ] **Step 1 : Créer la story**
|
||||
|
||||
Créer `app/story/date/dateTime.story.vue` (nom de fichier camelCase pour éviter `vue/multi-word-component-names`) :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Story title="Date/DateTime">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDateTime
|
||||
v-model="simpleValue"
|
||||
label="Date et heure"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Rendez-vous"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateTime
|
||||
v-model="boundedValue"
|
||||
label="Créneau"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateTime
|
||||
v-model="errorValue"
|
||||
label="Date limite"
|
||||
error="Date et heure requises"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Lecture seule"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateTime from '../../components/malio/date/DateTime.vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
|
||||
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-05-20T14:30:00')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Vérifier le lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: PASS.
|
||||
|
||||
- [ ] **Step 3 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/story/date/dateTime.story.vue
|
||||
git commit --no-verify -m "docs : story Histoire pour MalioDateTime (#MUI-33)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5 : Documentation (COMPONENTS.md + CHANGELOG.md)
|
||||
|
||||
**Files:**
|
||||
- Modify: `COMPONENTS.md`
|
||||
- Modify: `CHANGELOG.md`
|
||||
|
||||
- [ ] **Step 1 : Ajouter la section dans COMPONENTS.md**
|
||||
|
||||
Ouvrir `COMPONENTS.md`, repérer la section `MalioDate` (ou la famille date) et ajouter une section `MalioDateTime` calquée dessus, documentant :
|
||||
- Description : champ unique date + heure, popover (grille + sélecteur d'heure), version intérimaire avec `<input type="time">` natif.
|
||||
- `modelValue` : `string | null`, format `"YYYY-MM-DDTHH:MM:00"` (ISO naïf sans fuseau ; Symfony applique son fuseau).
|
||||
- Table des props identique à `MalioDate` (ajouter la note sur `min`/`max` bornant la date).
|
||||
- Émission `update:modelValue`.
|
||||
- Exemple d'usage :
|
||||
|
||||
```vue
|
||||
<MalioDateTime v-model="rdv" label="Date et heure du rendez-vous" />
|
||||
<!-- rdv === "2026-05-20T14:30:00" -->
|
||||
```
|
||||
|
||||
- Note : le sélecteur d'heure est intérimaire et sera remplacé par un composant dédié (maquette à venir).
|
||||
|
||||
Respecter le style et la structure exacts des sections existantes (titres, tableaux markdown).
|
||||
|
||||
- [ ] **Step 2 : Ajouter l'entrée CHANGELOG.md**
|
||||
|
||||
Dans `CHANGELOG.md`, sous `## [0.0.0]` → `### Added`, ajouter après la ligne `[#MUI-33] Développer le composant Datepicker` :
|
||||
|
||||
```
|
||||
* [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Commit**
|
||||
|
||||
```bash
|
||||
git add COMPONENTS.md CHANGELOG.md
|
||||
git commit --no-verify -m "docs : documente MalioDateTime (COMPONENTS + CHANGELOG) (#MUI-33)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Vérification finale
|
||||
|
||||
- [ ] `npx vitest run app/components/malio/date/` → toute la famille date verte.
|
||||
- [ ] `npm run lint` → pas d'erreur.
|
||||
- [ ] Revue finale du composant (cohérence avec la famille date, isolation du bloc heure pour remplacement futur).
|
||||
373
docs/superpowers/specs/2026-05-19-datepicker-design.md
Normal file
373
docs/superpowers/specs/2026-05-19-datepicker-design.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# MalioDate — Design Spec
|
||||
|
||||
Composant de sélection de date avec champ + popover calendrier. Première brique d'une famille de pickers temporels (futurs `DateRange`, `DateTime`).
|
||||
|
||||
**Ticket :** MUI-33
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
|
||||
## Périmètre v1
|
||||
|
||||
Sélection d'une date unique via un calendrier. Le champ est **readonly** (clic uniquement, pas de saisie clavier en v1). Locale FR hardcodée, semaine commençant le lundi.
|
||||
|
||||
**Inclus en v1 :**
|
||||
- Affichage `JJ/MM/AAAA` dans le champ, valeur ISO `YYYY-MM-DD` en `modelValue`
|
||||
- Surlignage du jour sélectionné et du jour "aujourd'hui"
|
||||
- Jours du mois précédent/suivant affichés grisés mais cliquables (naviguent vers le mois cible)
|
||||
- Bornes `min` / `max` (jours hors bornes désactivés)
|
||||
- Bouton effacer (croix) si `clearable`
|
||||
- Vue mois (grille 4×3) accessible via clic sur `Mois Année ⌄` dans le header
|
||||
- Numéros de semaine ISO 8601 dans une colonne à fond `m-primary/10`
|
||||
|
||||
**Reporté à plus tard :**
|
||||
- Saisie clavier dans le champ (parsing `JJ/MM/AAAA` manuel)
|
||||
- Navigation clavier dans la grille (flèches, Enter, Escape)
|
||||
- Vue années (sélection rapide d'une année)
|
||||
- Prop `disabledDates` (prédicat ou array)
|
||||
- i18n (autres langues)
|
||||
|
||||
## Architecture
|
||||
|
||||
Composant public unique `<MalioDate>` (autoimporté depuis `app/components/malio/date/Date.vue`), composé de sous-composants internes et de modules utilitaires colocalisés.
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
Date.vue # composant public (orchestration)
|
||||
Date.test.ts
|
||||
internal/
|
||||
CalendarHeader.vue # header mois/année + chevrons + toggle vue
|
||||
MonthGrid.vue # grille 6×7 jours + colonne semaine
|
||||
MonthPicker.vue # grille 4×3 mois
|
||||
composables/
|
||||
useMonthMatrix.ts # calcule la matrice 6×7 + n° semaines ISO
|
||||
dateFormat.ts # fonctions pures de format/parsing/validation
|
||||
useCalendarPopover.ts # état ouvert/fermé + click outside
|
||||
```
|
||||
|
||||
Les sous-composants `internal/` ne sont pas destinés à être consommés directement. Ils seront réutilisés par `DateRange` et `DateTime` à venir.
|
||||
|
||||
## Type `modelValue`
|
||||
|
||||
`string | null`, au format ISO `YYYY-MM-DD`. Le composant interne convertit en affichage `JJ/MM/AAAA` via `dateFormat.formatIsoToDisplay()`. Cette représentation a été retenue pour :
|
||||
- Cohérence avec `<MalioTime>` qui émet déjà une string (`"HH:MM"`)
|
||||
- Sérialisation directe vers une API REST/JSON sans conversion
|
||||
- Pas de piège de fuseau horaire (un objet `Date` JS porte une heure + un fuseau)
|
||||
- Comparaison lexicographique = comparaison chronologique (utile pour `min`/`max`)
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du champ |
|
||||
| `name` | `string` | `''` | Attribut `name` pour les `<form>` |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `modelValue` | `string \| null` | `undefined` | Date ISO `YYYY-MM-DD` (v-model) |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder du champ |
|
||||
| `required` | `boolean` | `false` | Attribut required |
|
||||
| `disabled` | `boolean` | `false` | Verrouille champ et calendrier |
|
||||
| `readonly` | `boolean` | `false` | Affiche la valeur mais bloque l'ouverture |
|
||||
| `hint` | `string` | `''` | Texte d'aide sous le champ |
|
||||
| `error` | `string` | `''` | Message d'erreur (bordure et texte rouges) |
|
||||
| `success` | `string` | `''` | Message succès (bordure et texte verts) |
|
||||
| `min` | `string` | `undefined` | Borne inférieure incluse, format ISO |
|
||||
| `max` | `string` | `undefined` | Borne supérieure incluse, format ISO |
|
||||
| `clearable` | `boolean` | `true` | Affiche une croix pour effacer la valeur |
|
||||
| `inputClass` | `string` | `''` | Override classes input (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Override classes label (twMerge) |
|
||||
| `groupClass` | `string` | `''` | Override classes wrapper (twMerge) |
|
||||
|
||||
Si `min`/`max` sont invalides (format incorrect ou `min > max`), ils sont ignorés silencieusement avec un warning console en dev.
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:modelValue` | `string \| null` | Date ISO sélectionnée, ou `null` si effacée |
|
||||
|
||||
## Slots
|
||||
|
||||
Aucun slot en v1. L'icône calendrier est fixée (`mdi:calendar-outline`).
|
||||
|
||||
## Sous-composants internes
|
||||
|
||||
### `CalendarHeader.vue`
|
||||
|
||||
Affiche la barre du haut du popover : `[‹] Mois Année [⌄] [›]`.
|
||||
|
||||
**Props :**
|
||||
- `viewMode: 'days' | 'months'`
|
||||
- `currentMonth: number` (0-11)
|
||||
- `currentYear: number`
|
||||
|
||||
**Events :**
|
||||
- `prev` — chevron gauche (interprété par le parent : mois précédent en vue jours, année précédente en vue mois)
|
||||
- `next` — chevron droit (idem)
|
||||
- `toggle-view` — clic sur le bouton central
|
||||
|
||||
### `MonthGrid.vue`
|
||||
|
||||
Rend la grille 6 lignes × 8 colonnes (semaine + 7 jours).
|
||||
|
||||
**Props :**
|
||||
- `month: number` (0-11)
|
||||
- `year: number`
|
||||
- `selectedDate?: string | null` (ISO)
|
||||
- `min?: string` (ISO)
|
||||
- `max?: string` (ISO)
|
||||
|
||||
**Events :**
|
||||
- `select` payload `string` — date ISO `YYYY-MM-DD` du jour cliqué
|
||||
|
||||
Utilise `useMonthMatrix(month, year)` pour générer les 6 lignes. La grille fait toujours 6 lignes (forcé) pour stabiliser la hauteur du popover entre les mois.
|
||||
|
||||
### `MonthPicker.vue`
|
||||
|
||||
Rend la grille 4×3 des mois.
|
||||
|
||||
**Props :**
|
||||
- `selectedMonth?: number` (0-11, mois courant à surligner)
|
||||
|
||||
**Events :**
|
||||
- `select` payload `number` (0-11)
|
||||
|
||||
Pas de gestion `min`/`max` au niveau mois en v1 — `MonthGrid` filtrera les jours hors bornes au retour vue jours.
|
||||
|
||||
## Composables
|
||||
|
||||
### `useMonthMatrix.ts`
|
||||
|
||||
```ts
|
||||
type DayCell = {
|
||||
isoDate: string // "YYYY-MM-DD"
|
||||
day: number // 1-31
|
||||
isCurrentMonth: boolean
|
||||
isToday: boolean
|
||||
}
|
||||
|
||||
type WeekRow = {
|
||||
weekNumber: number // ISO 8601, 1-53
|
||||
days: DayCell[] // toujours 7, Lun → Dim
|
||||
}
|
||||
|
||||
function useMonthMatrix(
|
||||
month: Ref<number>,
|
||||
year: Ref<number>
|
||||
): { weeks: ComputedRef<WeekRow[]> }
|
||||
```
|
||||
|
||||
Le premier jour de la grille est le lundi de la semaine contenant le 1er du mois affiché. La grille fait **toujours** 6 lignes (`WeekRow[]` de longueur 6), au besoin en débordant sur le mois suivant.
|
||||
|
||||
Les numéros de semaine suivent **ISO 8601** : la semaine 1 contient le premier jeudi de l'année.
|
||||
|
||||
### `dateFormat.ts`
|
||||
|
||||
Module de fonctions pures, **pas un composable réactif**. Le nommage sans préfixe `use` reflète sa nature.
|
||||
|
||||
```ts
|
||||
function formatIsoToDisplay(iso: string | null): string
|
||||
// "2026-05-19" → "19/05/2026", null/invalide → ""
|
||||
|
||||
function parseDisplayToIso(display: string): string | null
|
||||
// "19/05/2026" → "2026-05-19", invalide → null
|
||||
|
||||
function isValidIso(iso: string): boolean
|
||||
// "2026-05-19" → true, "2026-13-45" → false
|
||||
|
||||
function isDateInRange(iso: string, min?: string, max?: string): boolean
|
||||
// Comparaison lexicographique (= chronologique pour ISO)
|
||||
```
|
||||
|
||||
`parseDisplayToIso` est écrit dès la v1 même si non utilisé (le champ est readonly) — il sera réutilisé en v2 quand on rendra le champ éditable.
|
||||
|
||||
### `useCalendarPopover.ts`
|
||||
|
||||
```ts
|
||||
function useCalendarPopover(rootRef: Ref<HTMLElement | null>): {
|
||||
isOpen: Ref<boolean>
|
||||
viewMode: Ref<'days' | 'months'>
|
||||
open: () => void
|
||||
close: () => void
|
||||
toggleView: () => void
|
||||
}
|
||||
```
|
||||
|
||||
- `isOpen` et `viewMode` reset à `false` / `'days'` à la fermeture
|
||||
- Listener `mousedown` global attaché à `onMounted`, retiré à `onBeforeUnmount`
|
||||
- Fermeture si le clic est hors de `rootRef`
|
||||
- Pas de gestion clavier en v1
|
||||
|
||||
## Comportements détaillés
|
||||
|
||||
### Ouverture du popover
|
||||
|
||||
Clic sur le champ ou l'icône calendrier (sauf si `disabled` ou `readonly`) → `open()`. Vue initiale :
|
||||
- Si `modelValue` valide → grille du mois de cette date
|
||||
- Sinon → grille du mois courant (`new Date()`)
|
||||
|
||||
Le champ passe en mode "popover ouvert" : bordure du bas retirée, `rounded-b-none`, bordure latérale colorée (`m-primary` ou `m-danger`/`m-success` selon état).
|
||||
|
||||
### Sélection d'un jour (vue jours)
|
||||
|
||||
Clic sur une cellule jour cliquable :
|
||||
1. Émission `update:modelValue` avec la date ISO
|
||||
2. Fermeture du popover
|
||||
3. Réaffichage du champ avec la valeur formatée `JJ/MM/AAAA`
|
||||
|
||||
Cas spéciaux :
|
||||
- Jour hors mois courant : sélection normale, le popover se ferme (peu importe que la vue interne saute au mois cible, elle n'est plus visible)
|
||||
- Jour hors `min`/`max` : non cliquable, `cursor-not-allowed`, pas d'émission
|
||||
- Re-clic sur la date déjà sélectionnée : ré-émission de la même valeur, popover ferme
|
||||
|
||||
### Navigation chevrons (vue jours)
|
||||
|
||||
- Chevron gauche : `currentMonth -= 1` (décembre + `year -= 1` si on était en janvier)
|
||||
- Chevron droit : symétrique
|
||||
- Pas de bornage de navigation par `min`/`max` — on peut naviguer où on veut, seuls les jours sont désactivés
|
||||
|
||||
### Bascule vers la vue mois
|
||||
|
||||
Clic sur `Mois Année ⌄` → `toggleView()` → `viewMode = 'months'`.
|
||||
|
||||
En vue mois :
|
||||
- Header inchangé visuellement, mais les chevrons naviguent désormais l'**année** (`year ± 1`)
|
||||
- Le bouton central reste cliquable : un nouveau clic ramène à `viewMode = 'days'` (toggle binaire, validé Q4b)
|
||||
- Clic sur un mois dans la grille 4×3 → `currentMonth = mois cliqué`, retour `viewMode = 'days'` sans sélection de date
|
||||
|
||||
### Fermeture sans sélection
|
||||
|
||||
Clic en dehors du champ ET du popover → `close()`. `modelValue` inchangé. L'état interne (`currentMonth`, `currentYear`, `viewMode`) est **reset à la prochaine ouverture** selon la règle "Ouverture du popover" (pas de mémorisation).
|
||||
|
||||
### Bouton effacer
|
||||
|
||||
Si `modelValue !== null && clearable && !disabled && !readonly` :
|
||||
- Une croix `mdi:close` apparaît à gauche de l'icône calendrier
|
||||
- Clic émet `null` et `stopPropagation` pour ne pas ouvrir le popover
|
||||
|
||||
### États
|
||||
|
||||
- `disabled` : opacity réduite, curseur not-allowed, clic sans effet, croix masquée
|
||||
- `readonly` : affichage normal, clic sans effet sur l'ouverture, croix masquée
|
||||
|
||||
### Synchronisation `modelValue` externe
|
||||
|
||||
Si le parent change `modelValue` programmatiquement :
|
||||
- Le champ se met à jour (re-format)
|
||||
- Si le popover est ouvert, la vue saute au mois de la nouvelle valeur
|
||||
- Si la nouvelle valeur a un format invalide, le composant traite comme `null` et log un warning console en dev
|
||||
|
||||
## Style / CSS
|
||||
|
||||
### Popover
|
||||
|
||||
- `min-w-[320px]`, hauteur fixe ~`360px` (6 semaines × ~38px + header)
|
||||
- Position : `absolute top-[calc(100%-4px)] left-0 z-20`
|
||||
- `bg-white border border-t-0` (couleur selon état : `m-primary` / `m-danger` / `m-success`)
|
||||
- `rounded-b-md`
|
||||
- Transition : `opacity` 150ms à l'apparition, respect `prefers-reduced-motion`
|
||||
|
||||
### Header
|
||||
|
||||
- Hauteur `h-12`, `border-b border-m-primary/20`
|
||||
- Chevrons (`mdi:chevron-left` / `mdi:chevron-right`) : 20px, padding cliquable 8px, `hover:bg-m-primary/10 rounded`
|
||||
- Texte central : `text-base font-medium`, cliquable, `mdi:chevron-down` 16px à côté
|
||||
|
||||
### Grille jours
|
||||
|
||||
- En-tête `Sem | Lun | Mar | Mer | Jeu | Ven | Sam | Dim` : `text-xs uppercase text-m-muted font-medium`, 32px de hauteur
|
||||
- Cellule : `w-10 h-10 text-sm`, centrée
|
||||
- Colonne semaine : `bg-m-primary/10`, `text-m-primary/70`, non cliquable
|
||||
- Jour du mois courant : `text-black`
|
||||
- Jour hors mois : `text-m-muted/50`
|
||||
- Jour "aujourd'hui" : `border border-m-primary`, `text-m-primary font-semibold`
|
||||
- Jour sélectionné : `bg-m-primary text-white font-medium rounded-full` (prime sur "aujourd'hui")
|
||||
- Jour hors `min`/`max` : `text-m-muted/30 cursor-not-allowed`, non cliquable
|
||||
- Hover : `hover:bg-m-primary/10 rounded-full`
|
||||
|
||||
### Grille mois (MonthPicker)
|
||||
|
||||
- `grid grid-cols-4 gap-2 p-3`
|
||||
- Cellule : `py-3 text-sm rounded`
|
||||
- Libellés : `Janv | Févr | Mars | Avr | Mai | Juin | Juil | Août | Sept | Oct | Nov | Déc`
|
||||
- Mois sélectionné : `bg-m-primary text-white`
|
||||
- Hover : `hover:bg-m-primary/10`
|
||||
|
||||
### Champ
|
||||
|
||||
Reprend le pattern de `<MalioInputAutocomplete>` : label flottant, bordure `m-muted` au repos, `m-primary` au focus/open, `m-danger`/`m-success` selon état.
|
||||
|
||||
- Icône calendrier `mdi:calendar-outline` 20px, à droite, couleur dynamique selon état
|
||||
- Croix d'effacement `mdi:close` 16px, à gauche de l'icône, `text-m-muted hover:text-black`
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-invalid` synchronisé sur `error`
|
||||
- `aria-describedby` lié au texte de `hint`/`error`/`success`
|
||||
- `aria-expanded` sur le champ pour signaler l'état du popover
|
||||
- `aria-haspopup="dialog"` sur le champ
|
||||
- Label `<label for>` lié au champ
|
||||
- Cellules jour : `role="button"`, `aria-label="19 mai 2026"` (jour en toutes lettres pour les lecteurs d'écran)
|
||||
- Cellules désactivées : `aria-disabled="true"`
|
||||
- Navigation clavier dans la grille : **reportée v2** (Escape, flèches, Enter)
|
||||
|
||||
## Tests
|
||||
|
||||
### `Date.test.ts` (~30 cas)
|
||||
|
||||
Tests groupés par `describe` :
|
||||
- **Rendu** : label, placeholder, icône calendrier, affichage de la valeur formatée
|
||||
- **Popover** : ouverture au clic, fermeture au click outside, vue initiale selon `modelValue`
|
||||
- **Navigation** : chevrons en vue jours, passage décembre↔janvier avec changement d'année
|
||||
- **Sélection** : émission ISO correcte, fermeture après sélection, sélection d'un jour hors mois
|
||||
- **Bornes** : jours hors `min`/`max` non cliquables, comparaison ISO
|
||||
- **Vue mois** : bascule, chevrons en vue mois naviguent l'année, clic mois retourne en vue jours
|
||||
- **Clearable** : présence/absence de la croix, émission `null`, pas d'ouverture
|
||||
- **États** : `disabled` et `readonly` bloquent l'ouverture
|
||||
- **A11y** : `aria-invalid`, `aria-describedby`
|
||||
- **Synchro externe** : changement de `modelValue` programmatique
|
||||
|
||||
### `useMonthMatrix.test.ts` (~10 cas)
|
||||
|
||||
- Mois standard (mai 2026) produit 6×7 cellules
|
||||
- Mois commençant un lundi (toutes les cases du premier lundi sont du mois courant)
|
||||
- Mois finissant un dimanche
|
||||
- Année bissextile (février 2024 : 29 jours)
|
||||
- Numéro de semaine ISO en début d'année (janvier 2026 commence en semaine 1 ou 52/53 de 2025 ?)
|
||||
- Numéro de semaine ISO en fin d'année
|
||||
|
||||
### `dateFormat.test.ts` (~10 cas)
|
||||
|
||||
- `formatIsoToDisplay` : nominal, null, format invalide
|
||||
- `parseDisplayToIso` : nominal, format invalide, jour ou mois hors borne
|
||||
- `isValidIso` : nominal, faux positifs (32 jours, mois 13)
|
||||
- `isDateInRange` : sans bornes, avec min seul, avec max seul, avec les deux
|
||||
|
||||
Helper `mountComponent(props)` reprend le pattern existant des autres tests Malio. Environnement Vitest + jsdom (déjà configurés).
|
||||
|
||||
## Story Histoire `Date.story.vue`
|
||||
|
||||
Dans `app/story/date/Date.story.vue`. Variants :
|
||||
1. **Default** — vierge, label "Date de naissance"
|
||||
2. **Avec valeur initiale** — `modelValue="2026-05-19"`
|
||||
3. **Avec min/max** — borné aujourd'hui → +30 jours, label "Date du rendez-vous"
|
||||
4. **États** — disabled, readonly, error, success, hint
|
||||
5. **Non-clearable** — `clearable=false`
|
||||
6. **Required** — avec error si vide
|
||||
7. **Override de classes** — `inputClass`, `groupClass` custom
|
||||
|
||||
## Playground `.playground/pages/composant/date.vue`
|
||||
|
||||
Page de test dev :
|
||||
- Un `<MalioDate>` standalone
|
||||
- Affichage de la valeur courante en dessous
|
||||
- Boutons pour reset (`value = null`) et forcer une date (`value = '2026-12-25'`)
|
||||
- Un cas avec `min`/`max`
|
||||
|
||||
Lien ajouté dans `.playground/pages/index.vue`.
|
||||
|
||||
## Découpage de l'implémentation
|
||||
|
||||
Le plan d'implémentation (généré ensuite via `writing-plans`) découpera en étapes ordonnées :
|
||||
1. Composables purs (`dateFormat`, `useMonthMatrix`, `useCalendarPopover`) + leurs tests
|
||||
2. Sous-composants internes (`CalendarHeader`, `MonthGrid`, `MonthPicker`)
|
||||
3. Composant public `Date.vue`
|
||||
4. Tests d'intégration `Date.test.ts`
|
||||
5. Story Histoire + page playground
|
||||
243
docs/superpowers/specs/2026-05-20-daterange-design.md
Normal file
243
docs/superpowers/specs/2026-05-20-daterange-design.md
Normal file
@@ -0,0 +1,243 @@
|
||||
# MalioDateRange — Design Spec
|
||||
|
||||
Composant de sélection d'une **période** (date début / date fin) via un champ + popover calendrier. Deuxième brique de la famille temporelle, construite sur un shell partagé extrait de `MalioDate`.
|
||||
|
||||
**Ticket :** MUI-33 (suite)
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
**Spec liée :** `docs/superpowers/specs/2026-05-19-datepicker-design.md`
|
||||
|
||||
## Contexte & roadmap
|
||||
|
||||
`MalioDate` (sélection simple) est déjà livré. Suivront `DateWeek` et `DateTime`. Les 4 composants partagent le **même champ + popover + header + vue mois** ; seule la sélection diffère. On extrait donc un shell réutilisable `CalendarField` (Approche 3 retenue parce que la famille comptera 4 variantes — la duplication de coquille ×4 et la maintenance front en parallèle sont le vrai risque).
|
||||
|
||||
## Périmètre
|
||||
|
||||
Sélection d'une période sur **un seul mois** affiché (popover = largeur du champ, comme `Date`). Visuellement identique à `Date`, sauf :
|
||||
- on sélectionne **deux dates** (début/fin)
|
||||
- les jours **entre** les bornes ont un fond `bg-m-primary-light` (bleu clair)
|
||||
- les bornes (start/end) gardent le cercle plein `bg-m-primary`
|
||||
- **aperçu au survol** (hover preview) de la plage pendant la sélection
|
||||
|
||||
**Inclus :** sélection 2 clics, auto-inversion, hover preview, surlignage de plage (demi-barre aux bornes), bornes `min`/`max`, effacement, vue mois conservée.
|
||||
|
||||
**Reporté :** deux mois côte à côte, ajustement de la borne la plus proche au 3e clic (on garde le reset standard), saisie clavier, navigation clavier.
|
||||
|
||||
## Architecture (Approche 3 — shell partagé)
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
Date.vue # ENVELOPPE (refacto) — sélection simple
|
||||
DateRange.vue # ENVELOPPE (nouveau) — sélection période
|
||||
Date.test.ts # inchangé (filet de sécurité du refacto)
|
||||
DateRange.test.ts # nouveau
|
||||
internal/
|
||||
CalendarField.vue # NOUVEAU — shell : champ + popover + header + MonthPicker
|
||||
CalendarHeader.vue # inchangé
|
||||
MonthGrid.vue # étendu : props range + émission hover + data-range-role
|
||||
MonthPicker.vue # inchangé
|
||||
composables/
|
||||
useCalendarView.ts # NOUVEAU — état mois/année + navigation (extrait de Date.vue)
|
||||
useCalendarView.test.ts
|
||||
useCalendarPopover.ts # inchangé
|
||||
dateRange.ts # NOUVEAU — helpers purs de plage
|
||||
dateRange.test.ts
|
||||
dateFormat.ts # inchangé
|
||||
useMonthMatrix.ts # inchangé
|
||||
app/story/date/dateRange.story.vue
|
||||
.playground/pages/composant/date/dateRange.vue
|
||||
```
|
||||
|
||||
Flux :
|
||||
|
||||
```
|
||||
DateRange.vue (enveloppe)
|
||||
├─ état de sélection range ({start,end} + pendingStart + hoverDate)
|
||||
├─ displayValue ("19/05/2026 - 25/05/2026")
|
||||
└─ <CalendarField :display-value :sync-to=start ... @clear @close>
|
||||
├─ champ + popover (useCalendarPopover) + navigation (useCalendarView)
|
||||
├─ header + MonthPicker (viewMode='months')
|
||||
└─ <slot :current-month :current-year :close> ← viewMode='days'
|
||||
└─ <MonthGrid> mode range (rangeStart/rangeEnd/previewDate, @select, @hover)
|
||||
```
|
||||
|
||||
`CalendarField` ne connaît **rien** de la sélection : il gère champ, ouverture, navigation, et expose `{ currentMonth, currentYear, close }` au slot. Chaque enveloppe branche son `MonthGrid` et décide quand appeler `close()`.
|
||||
|
||||
## `useCalendarView.ts`
|
||||
|
||||
```ts
|
||||
function useCalendarView(viewMode: Ref<'days' | 'months'>): {
|
||||
currentMonth: Ref<number> // 0-11
|
||||
currentYear: Ref<number>
|
||||
goToPrev: () => void // viewMode==='months' ? année-1 : mois-1 (roulement déc↔jan)
|
||||
goToNext: () => void // idem +1
|
||||
selectMonth: (m: number) => void // currentMonth = m
|
||||
syncToIso: (iso: string | null) => void // mois/année depuis un ISO valide, sinon mois courant
|
||||
}
|
||||
```
|
||||
|
||||
Reprend la logique `onPrev`/`onNext`/`syncViewToValue` actuelle de `Date.vue`. Pur, testable seul.
|
||||
|
||||
## `CalendarField.vue` (shell)
|
||||
|
||||
**Props :**
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `displayValue` | `string` | **requis** | Texte affiché dans le champ (`''` si rien/incomplet) |
|
||||
| `syncTo` | `string \| null` | **requis** | ISO servant à caler le mois à l'ouverture |
|
||||
| `id`,`name`,`label`,`placeholder` | `string` | `''` / `'JJ/MM/AAAA'` | Champ |
|
||||
| `required`,`disabled`,`readonly` | `boolean` | `false` | États |
|
||||
| `hint`,`error`,`success` | `string` | `''` | Messages |
|
||||
| `clearable` | `boolean` | `true` | Croix d'effacement |
|
||||
| `inputClass`,`labelClass`,`groupClass` | `string` | `''` | Overrides twMerge |
|
||||
|
||||
**Events :**
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `clear` | — | Croix cliquée → l'enveloppe met son `modelValue` à `null` |
|
||||
| `close` | — | Popover fermé (clic dehors ou programmatique) → l'enveloppe annule sa sélection en cours |
|
||||
|
||||
**Slot par défaut** (scoped, rendu quand `viewMode==='days'`) : `{ currentMonth: number, currentYear: number, close: () => void }`.
|
||||
|
||||
**Comportement** (repris à l'identique de l'actuel `Date.vue`) : input readonly, label flottant (bleu à l'ouverture), icône calendrier, croix (si `clearable && displayValue && !disabled && !readonly`), grossissement calibré 48px, bordures/états, popover ombré largeur champ collé sous le champ, header (`prev`/`next`→`useCalendarView`, `toggle`→`useCalendarPopover.toggleView`), `MonthPicker` en vue mois (clic mois → `selectMonth` + retour vue jours), `syncToIso(syncTo)` à l'ouverture + watch resync. `isFilled` dérivé de `displayValue.length > 0`.
|
||||
|
||||
## `dateRange.ts` (helpers purs)
|
||||
|
||||
```ts
|
||||
type DateRangeValue = { start: string; end: string }
|
||||
|
||||
function normalizeRange(a: string, b: string): DateRangeValue
|
||||
// réordonne pour garantir start ≤ end
|
||||
|
||||
function resolveRangeBounds(
|
||||
start: string | null, end: string | null, preview: string | null,
|
||||
): { lo: string; hi: string } | null
|
||||
// pas de start → null ; end committé prioritaire, sinon preview, sinon {lo:start,hi:start}
|
||||
|
||||
type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
|
||||
function dayRangeRole(iso: string, bounds: { lo: string; hi: string } | null): DayRangeRole
|
||||
```
|
||||
|
||||
## `MonthGrid.vue` — extension
|
||||
|
||||
**Nouvelles props (optionnelles) :** `rangeStart?`, `rangeEnd?`, `previewDate?` (ISO ou null). Mode plage actif dès que `rangeStart` est passé ; sinon mode simple (`selectedDate`, comportement actuel inchangé).
|
||||
|
||||
**Nouvel event :** `hover` payload `string | null` — `mouseenter` d'un jour → ISO, `mouseleave` de la grille → `null`.
|
||||
|
||||
**Attribut testabilité :** chaque bouton jour porte `:data-range-role="role"` (`none`/`single`/`start`/`end`/`in-range`).
|
||||
|
||||
**Rendu d'un jour en mode plage** — bouton `relative` superposant 2 couches :
|
||||
1. Barre de fond absolue `bg-m-primary-light` : `in-range` → pleine largeur (`inset-0`) ; `start` → moitié droite (`left-1/2 right-0`) ; `end` → moitié gauche (`left-0 right-1/2`) ; `single`/`none` → aucune.
|
||||
2. Cercle (span `h-10 w-10`) au-dessus : `start`/`end`/`single` → `bg-m-primary` blanc ; `in-range` → transparent, texte noir ; `none` → rendu simple actuel (aujourd'hui, hors-mois…).
|
||||
|
||||
La barre passe sous les cercles, colonnes jointives → plage continue démarrant/finissant au centre des cercles.
|
||||
|
||||
## `DateRange.vue` (enveloppe)
|
||||
|
||||
**Props :** identiques à `Date` sauf `modelValue?: { start: string; end: string } | null`. (`id`,`name`,`label`,`placeholder`,`required`,`disabled`,`readonly`,`hint`,`error`,`success`,`min`,`max`,`clearable`,`inputClass`,`labelClass`,`groupClass`.)
|
||||
|
||||
**Emit :** `update:modelValue` → `{ start: string; end: string } | null`.
|
||||
|
||||
**État interne :**
|
||||
```ts
|
||||
pendingStart = ref<string | null>(null) // 1er clic en attente du 2e
|
||||
hoverDate = ref<string | null>(null) // survol pour le preview
|
||||
const isSelecting = computed(() => pendingStart.value !== null)
|
||||
```
|
||||
|
||||
**Passé au `<MonthGrid>` :**
|
||||
```ts
|
||||
rangeStart = isSelecting ? pendingStart : (modelValue?.start ?? null)
|
||||
rangeEnd = isSelecting ? null : (modelValue?.end ?? null)
|
||||
previewDate = isSelecting ? hoverDate : null
|
||||
// + :min :max :month :year (slot)
|
||||
```
|
||||
|
||||
**`displayValue` :** `''` pendant la sélection (1 seul jour choisi) ; `"JJ/MM/AAAA - JJ/MM/AAAA"` si plage complète ; `''` sinon. **`syncTo`** = `modelValue?.start ?? null`.
|
||||
|
||||
**Machine à états :**
|
||||
```
|
||||
onSelectDay(iso):
|
||||
si pendingStart === null: # 1er clic (ou reset après plage complète)
|
||||
pendingStart = iso ; hoverDate = null
|
||||
sinon: # 2e clic → complète
|
||||
{ start, end } = normalizeRange(pendingStart, iso) # auto-inversion
|
||||
emit('update:modelValue', { start, end })
|
||||
pendingStart = null ; hoverDate = null
|
||||
close() # ferme le popover (slot)
|
||||
|
||||
onHover(iso): # émis par MonthGrid
|
||||
si isSelecting: hoverDate = iso # preview seulement pendant la sélection
|
||||
|
||||
onClose(): # CalendarField émet 'close'
|
||||
pendingStart = null ; hoverDate = null # annule la sélection en cours, modelValue inchangé
|
||||
|
||||
onClear(): # CalendarField émet 'clear'
|
||||
emit('update:modelValue', null)
|
||||
pendingStart = null ; hoverDate = null
|
||||
```
|
||||
|
||||
- **3e clic** (plage complète) : `pendingStart===null` → nouveau `start`, ancienne plage masquée pendant la sélection (`rangeEnd=null`), remplacée à la complétion.
|
||||
- **min/max** : `MonthGrid` désactive les jours hors bornes → les 2 clics sont contraints.
|
||||
- **modelValue invalide** (start/end mal formés) : traité comme `null` + warning dev.
|
||||
|
||||
## Refacto `Date.vue`
|
||||
|
||||
API publique **inchangée**. Devient une enveloppe (~80 lignes) :
|
||||
```vue
|
||||
<CalendarField :display-value="displayValue" :sync-to="modelValue ?? null" ...props
|
||||
@clear="emit('update:modelValue', null)">
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid :month="currentMonth" :year="currentYear"
|
||||
:selected-date="modelValue ?? null" :min="min" :max="max"
|
||||
@select="(iso) => { emit('update:modelValue', iso); close() }" />
|
||||
</template>
|
||||
</CalendarField>
|
||||
```
|
||||
`displayValue = formatIsoToDisplay(modelValue)`. Watch modelValue invalide → warning dev (conservé). Mode simple : pas de `@close` (rien à annuler), pas de `@hover`.
|
||||
|
||||
**Les 21 tests de `Date.test.ts` doivent passer sans modification** : tous les `data-test` sont rendus par `CalendarField`/`MonthGrid`, donc présents dans le DOM monté de `Date`. C'est le filet de sécurité du refacto.
|
||||
|
||||
## Tests
|
||||
|
||||
### `dateRange.test.ts` (~12)
|
||||
- `normalizeRange` : ordonné, inversé, égal
|
||||
- `resolveRangeBounds` : pas de start → null ; start seul → `{lo,hi}=start` ; start+end ordonné ; start+preview ; preview avant start (inversion) ; end prioritaire sur preview
|
||||
- `dayRangeRole` : none (pas de bornes / hors plage), single (lo===hi), start, end, in-range
|
||||
|
||||
### `useCalendarView.test.ts` (~8, fake timers)
|
||||
- mois/année initiaux = aujourd'hui ; `goToNext`/`goToPrev` vue jours (+ roulement déc↔jan avec année) ; `goToNext`/`goToPrev` vue mois (année ±1) ; `selectMonth` ; `syncToIso` valide / null
|
||||
|
||||
### `Date.test.ts`
|
||||
Inchangé — doit rester vert (filet du refacto).
|
||||
|
||||
### `DateRange.test.ts` (~18)
|
||||
- Rendu : label, icône, `"19/05/2026 - 25/05/2026"` si modelValue, champ vide sinon
|
||||
- Ouverture popover, vue sur le mois du `start`
|
||||
- 1er clic → pas d'émission ; 2e clic → émet `{start,end}` + ferme
|
||||
- 2e clic avant le 1er → auto-inversion (start ≤ end)
|
||||
- Même jour ×2 → `{start:x, end:x}`
|
||||
- 3e clic → repart sur un nouveau start (pas d'émission avant le 2e)
|
||||
- Hover pendant sélection → `data-range-role="in-range"` sur jours intermédiaires ; pas de preview hors sélection
|
||||
- Rôles : `start`/`end`/`in-range` corrects via `data-range-role`
|
||||
- Clic dehors pendant sélection → annulation, `modelValue` inchangé
|
||||
- `clear` → émet `null`
|
||||
- min/max → jours hors bornes non cliquables
|
||||
- a11y : `aria-invalid` sur error
|
||||
|
||||
### Story `dateRange.story.vue`
|
||||
Default vide, plage initiale, min/max, états (disabled/readonly/error/success), non-clearable.
|
||||
|
||||
### Playground `.playground/pages/composant/date/dateRange.vue`
|
||||
`<MalioDateRange>` standalone + affichage `start → end`, boutons set/reset, cas borné.
|
||||
|
||||
## Découpage d'implémentation
|
||||
|
||||
1. Helpers purs `dateRange.ts` + tests
|
||||
2. Composable `useCalendarView.ts` + tests
|
||||
3. Shell `CalendarField.vue` (extraction depuis `Date.vue`)
|
||||
4. Refacto `Date.vue` en enveloppe → `Date.test.ts` doit rester vert
|
||||
5. Extension `MonthGrid.vue` (range + hover + data-range-role)
|
||||
6. `DateRange.vue` + `DateRange.test.ts`
|
||||
7. Story + playground
|
||||
168
docs/superpowers/specs/2026-05-20-dateweek-design.md
Normal file
168
docs/superpowers/specs/2026-05-20-dateweek-design.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# MalioDateWeek — Design Spec
|
||||
|
||||
Composant de sélection d'une **semaine ISO complète** (lundi→dimanche) via le shell calendrier partagé. Troisième brique de la famille temporelle.
|
||||
|
||||
**Ticket :** MUI-33 (suite)
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
**Specs liées :** `2026-05-19-datepicker-design.md`, `2026-05-20-daterange-design.md`
|
||||
|
||||
## Périmètre
|
||||
|
||||
Sélection d'une semaine entière en **un clic** (sur n'importe quel jour OU le numéro de semaine). Visuellement : la ligne de la semaine se surligne en pilule `bg-m-primary-light` (lundi arrondi gauche, dimanche arrondi droit), exactement comme une plage `DateRange` figée lun→dim. Survol = aperçu de la semaine. La cellule n° de la semaine sélectionnée passe en `bg-m-primary` (repère).
|
||||
|
||||
**Inclus :** clic jour/n° → semaine, hover de semaine, surlignage pilule, repère n° semaine, bornes `min`/`max` (semaine sélectionnable si elle chevauche), effacement, vue mois conservée.
|
||||
|
||||
**Reporté :** deux mois, saisie/navigation clavier.
|
||||
|
||||
## Donnée retournée
|
||||
|
||||
`modelValue: string | null` au format **ISO 8601 semaine `YYYY-Www`** (ex. `"2026-W21"`), comme l'`<input type="week">` natif. L'année est l'**année ISO de numérotation** (peut différer de l'année calendaire aux bords d'année). Affichage humain dans le champ : `"Semaine 21 (18/05 → 24/05/2026)"` (le `modelValue` reste `2026-W21`).
|
||||
|
||||
## Architecture (Approche 1 — réutilisation du rendu plage)
|
||||
|
||||
Une semaine sélectionnée **est** une plage lundi→dimanche : on réutilise le rendu pilule de `MonthGrid` (mode plage) en passant les bornes de la semaine active. Les events `select`/`hover` (jour) sont réutilisés ; l'enveloppe `DateWeek` mappe jour → semaine.
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
DateWeek.vue # NOUVEAU — enveloppe
|
||||
DateWeek.test.ts # nouveau
|
||||
internal/
|
||||
MonthGrid.vue # étendu : interactiveWeekNumber + markedWeekStart (additifs)
|
||||
CalendarField.vue # inchangé (shell réutilisé)
|
||||
CalendarHeader.vue # inchangé
|
||||
MonthPicker.vue # inchangé
|
||||
composables/
|
||||
dateWeek.ts # NOUVEAU — helpers semaine ISO (purs)
|
||||
dateWeek.test.ts # nouveau
|
||||
dateRange.ts # inchangé (rendu pilule réutilisé)
|
||||
dateFormat.ts # inchangé
|
||||
useCalendarView.ts # inchangé
|
||||
useCalendarPopover.ts # inchangé
|
||||
useMonthMatrix.ts # inchangé
|
||||
app/story/date/dateWeek.story.vue
|
||||
.playground/pages/composant/date/dateWeek.vue
|
||||
```
|
||||
|
||||
Flux :
|
||||
|
||||
```
|
||||
DateWeek.vue (enveloppe)
|
||||
├─ état : hoverWeekStart (lundi de la semaine survolée)
|
||||
├─ validWeek = isValidIsoWeek(modelValue) ? { monday: isoWeekToMonday(modelValue) } : null
|
||||
├─ activeMonday = hoverWeekStart ?? validWeek.monday → activeSunday = sundayOf(activeMonday)
|
||||
├─ displayValue = formatWeekDisplay(modelValue)
|
||||
└─ <CalendarField :display-value :sync-to=validWeek.monday @clear @close>
|
||||
└─ <MonthGrid
|
||||
:range-start=activeMonday :range-end=activeSunday ← pilule lun→dim réutilisée
|
||||
:marked-week-start=validWeek.monday ← repère n° semaine
|
||||
interactive-week-number ← n° semaine cliquable/hoverable
|
||||
:min :max
|
||||
@select="(iso)=>onSelect(iso, close)" @hover="onHover" />
|
||||
```
|
||||
|
||||
## `dateWeek.ts` (helpers purs)
|
||||
|
||||
```ts
|
||||
function mondayOf(iso: string): string // "2026-05-20" → "2026-05-18"
|
||||
function sundayOf(iso: string): string // "2026-05-20" → "2026-05-24"
|
||||
function toIsoWeek(iso: string): string // "2026-05-20" → "2026-W21" (année ISO + n° semaine)
|
||||
function isoWeekToMonday(week: string): string | null // "2026-W21" → "2026-05-18" ; invalide → null
|
||||
function isValidIsoWeek(week: string): boolean // "2026-W21" → true ; "2026-W54"/"2026-21" → false
|
||||
function formatWeekDisplay(week: string): string // "2026-W21" → "Semaine 21 (18/05 → 24/05/2026)" ; invalide → ""
|
||||
```
|
||||
|
||||
- Algo ISO 8601 : jeudi de la semaine pour l'année de numérotation ; lundi de la semaine contenant le 4 janvier = semaine 1.
|
||||
- `formatWeekDisplay` : `Semaine {n° sans zéro} ({JJ/MM lundi} → {JJ/MM/AAAA dimanche})`, réutilise `formatIsoToDisplay`.
|
||||
- Cas pièges testés : `2025-12-31` → `2026-W01`, `2027-01-01` → `2026-W53`, `2026-01-01` → `2026-W01`.
|
||||
|
||||
## `MonthGrid.vue` — ajouts additifs
|
||||
|
||||
Nouvelles props optionnelles (n'altèrent pas les modes simple/plage) :
|
||||
```ts
|
||||
interactiveWeekNumber?: boolean // défaut false
|
||||
markedWeekStart?: string | null // défaut null — lundi de la semaine repère
|
||||
```
|
||||
|
||||
Quand `interactiveWeekNumber === true` :
|
||||
- La cellule n° de semaine devient un `<button>` : `@click` émet `select(week.days[0].isoDate)`, `@mouseenter` émet `hover(week.days[0].isoDate)`. `:disabled` si `!weekSelectable`, où `weekSelectable = week.days.some(d => inRange(d.isoDate))`. `cursor-pointer` si sélectionnable.
|
||||
- Repère : si `week.days[0].isoDate === markedWeekStart`, la cellule n° passe en `bg-m-primary text-white` (au lieu de `bg-m-primary-light`).
|
||||
|
||||
Toujours (inoffensif hors mode semaine) : la cellule n° porte `:data-week-start="week.days[0].isoDate"` et `:data-marked="week.days[0].isoDate === markedWeekStart"`.
|
||||
|
||||
Inchangé : rendu pilule des jours piloté par `rangeStart`/`rangeEnd` ; events `select`/`hover` jour ; quand `interactiveWeekNumber` est `false`, la cellule n° reste un `<div>` non cliquable (aucune régression `Date`/`DateRange`).
|
||||
|
||||
## `DateWeek.vue` (enveloppe)
|
||||
|
||||
**Props :** identiques à `Date` sauf `modelValue?: string | null` (`YYYY-Www`).
|
||||
**Emit :** `update:modelValue` → `string | null`.
|
||||
|
||||
**État :**
|
||||
```ts
|
||||
hoverWeekStart = ref<string | null>(null)
|
||||
const validWeek = computed(() =>
|
||||
(props.modelValue && isValidIsoWeek(props.modelValue))
|
||||
? {monday: isoWeekToMonday(props.modelValue) as string}
|
||||
: null)
|
||||
const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
|
||||
const activeSunday = computed(() => activeMonday.value ? sundayOf(activeMonday.value) : null)
|
||||
```
|
||||
|
||||
**Passé à `MonthGrid` :** `range-start=activeMonday`, `range-end=activeSunday`, `marked-week-start=validWeek?.monday ?? null`, `interactive-week-number`, `min`, `max`, month/year du slot.
|
||||
|
||||
**`displayValue`** = `validWeek ? formatWeekDisplay(modelValue) : ''`. **`syncTo`** = `validWeek?.monday ?? null`.
|
||||
|
||||
**Comportement (1 clic) :**
|
||||
```
|
||||
onSelect(iso, close): # jour OU n° de semaine (= lundi)
|
||||
emit('update:modelValue', toIsoWeek(iso))
|
||||
hoverWeekStart = null
|
||||
close()
|
||||
|
||||
onHover(iso): # jour/n° survolé ; null au mouseleave
|
||||
hoverWeekStart = iso ? mondayOf(iso) : null
|
||||
|
||||
onClose(): hoverWeekStart = null
|
||||
onClear(): emit('update:modelValue', null) ; hoverWeekStart = null
|
||||
```
|
||||
|
||||
- Survol → toute la ligne en pilule via `activeMonday`.
|
||||
- Sélection en un clic → `YYYY-Www` + fermeture.
|
||||
- Repère de la semaine committée conservé pendant le survol d'une autre.
|
||||
- `modelValue` invalide → traité comme `null` + warning dev.
|
||||
|
||||
## Tests
|
||||
|
||||
### `dateWeek.test.ts` (~14)
|
||||
- `mondayOf`/`sundayOf` : mercredi, lundi (idempotent), dimanche
|
||||
- `toIsoWeek` : nominal + bords d'année (`2025-12-31`→`2026-W01`, `2027-01-01`→`2026-W53`, `2026-01-01`→`2026-W01`)
|
||||
- `isoWeekToMonday` : `2026-W21`→`2026-05-18` ; round-trip ; invalide → null
|
||||
- `isValidIsoWeek` : valide / `W00` / `W54` / format faux
|
||||
- `formatWeekDisplay` : `2026-W21`→`"Semaine 21 (18/05 → 24/05/2026)"` ; invalide → `""`
|
||||
|
||||
### `DateWeek.test.ts` (~14, `setSystemTime(2026-05-19)`)
|
||||
- Rendu label/icône, affichage `"Semaine ..."` si modelValue, champ vide sinon
|
||||
- Ouverture sur le mois de la semaine du modelValue
|
||||
- Clic d'un jour → émet le `YYYY-Www` de sa semaine + ferme
|
||||
- Clic du n° de semaine (`[data-test="week-number"][data-week-start="..."]`) → émet + ferme
|
||||
- Hover d'un jour → `data-range-role` start/in-range/end sur les 7 jours de la ligne ; autre ligne `none`
|
||||
- Hover du n° de semaine → même surlignage
|
||||
- Semaine committée → roles corrects + `data-marked="true"` sur la cellule n°
|
||||
- `clear` → émet `null`
|
||||
- min/max : semaine hors bornes n° désactivé + jours non cliquables ; semaine qui chevauche reste sélectionnable
|
||||
- `disabled`/`readonly` → pas d'ouverture
|
||||
- a11y : `aria-invalid` sur error
|
||||
|
||||
`Date.test.ts` / `DateRange.test.ts` restent verts (props additives).
|
||||
|
||||
### Story `dateWeek.story.vue`
|
||||
Default vide, semaine initiale, min/max, états (disabled/readonly/error/success), non-clearable.
|
||||
|
||||
### Playground `.playground/pages/composant/date/dateWeek.vue`
|
||||
Comparatif Large (480px) / ERP (396px), affichage `modelValue` + bornes du champ, boutons set/reset, cas borné.
|
||||
|
||||
## Découpage d'implémentation
|
||||
|
||||
1. `dateWeek.ts` (purs) + tests
|
||||
2. Extension `MonthGrid.vue` (interactiveWeekNumber + markedWeekStart + data attrs)
|
||||
3. `DateWeek.vue` + `DateWeek.test.ts`
|
||||
4. Story + playground
|
||||
146
docs/superpowers/specs/2026-05-22-datetime-design.md
Normal file
146
docs/superpowers/specs/2026-05-22-datetime-design.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# MalioDateTime — Design (version intérimaire)
|
||||
|
||||
**Date :** 2026-05-22
|
||||
**Ticket :** #MUI-33 (famille Datepicker)
|
||||
**Statut :** validé, prêt pour le plan d'implémentation
|
||||
|
||||
## Objectif
|
||||
|
||||
Ajouter un composant `MalioDateTime` à la famille temporelle de `@malio/layer-ui`, permettant de saisir **une date ET une heure** dans un seul champ avec popover.
|
||||
|
||||
Cette version est **intérimaire** : le sélecteur d'heure utilise un `<input type="time">` natif, le temps que la maquette du sélecteur d'heure dédié soit fournie. Le bloc heure est volontairement isolé pour pouvoir être remplacé sans toucher au reste.
|
||||
|
||||
## Valeur du modèle
|
||||
|
||||
`modelValue: string | null` au format **ISO naïf sans fuseau** : `"YYYY-MM-DDTHH:MM:00"` (ex. `"2026-05-20T14:30:00"`).
|
||||
|
||||
- Heure murale locale : un picker n'a pas de notion de fuseau.
|
||||
- Symfony (`DateTimeNormalizer`, RFC 3339) parse ce format et applique son fuseau configuré → zéro bug TZ/DST côté front.
|
||||
- Les secondes sont toujours `00` (le natif `type="time"` par défaut n'expose pas les secondes).
|
||||
- Cohérent avec `MalioDate` (`YYYY-MM-DD`) et `MalioTime` (`HH:MM`).
|
||||
|
||||
## Architecture
|
||||
|
||||
Fine enveloppe autour du shell partagé `internal/CalendarField.vue`, comme `MalioDate` / `MalioDateRange` / `MalioDateWeek`.
|
||||
|
||||
```
|
||||
MalioDateTime (Date/DateTime.vue)
|
||||
└─ CalendarField (champ + popover + header + navigation mois)
|
||||
slot #default={ currentMonth, currentYear, close }
|
||||
├─ MonthGrid (sélection du jour)
|
||||
└─ <input type="time"> (sélection de l'heure, sous la grille)
|
||||
```
|
||||
|
||||
Le `close` du slot n'est **pas** appelé sur sélection (contrairement à `MalioDate`) : on a besoin de date ET heure, la fermeture se fait au clic extérieur (déjà gérée par `CalendarField` via `useCalendarPopover`).
|
||||
|
||||
## Props
|
||||
|
||||
Identiques à `MalioDate` :
|
||||
|
||||
| Prop | Type | Défaut | Note |
|
||||
|---|---|---|---|
|
||||
| `id` | `string` | `''` | |
|
||||
| `name` | `string` | `''` | |
|
||||
| `label` | `string` | `''` | |
|
||||
| `modelValue` | `string \| null` | `undefined` | `"YYYY-MM-DDTHH:MM:00"` |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | |
|
||||
| `required` | `boolean` | `false` | |
|
||||
| `disabled` | `boolean` | `false` | |
|
||||
| `readonly` | `boolean` | `false` | |
|
||||
| `hint` | `string` | `''` | |
|
||||
| `error` | `string` | `''` | |
|
||||
| `success` | `string` | `''` | |
|
||||
| `min` | `string` | `undefined` | datetime ou date ; on borne la grille avec la partie date |
|
||||
| `max` | `string` | `undefined` | idem |
|
||||
| `clearable` | `boolean` | `true` | |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | |
|
||||
|
||||
**Émissions :** `update:modelValue: string | null`.
|
||||
|
||||
## Affichage du champ
|
||||
|
||||
`displayValue` = `formatIsoDateTimeToDisplay(modelValue)` → `"JJ/MM/AAAA HH:MM"` (ex. `20/05/2026 14:30`). Chaîne vide si `modelValue` nul ou invalide.
|
||||
|
||||
## Flux de sélection
|
||||
|
||||
État : `modelValue` est la source de vérité. Une ref locale `pendingTime: string` (`'HH:MM'` ou `''`) sert de pont quand l'heure est réglée avant qu'un jour soit choisi.
|
||||
|
||||
- **Partie date courante** = `splitDateTime(modelValue).date` (ou `null`).
|
||||
- **Valeur de l'`<input type="time">`** = `splitDateTime(modelValue).time` si présent, sinon `pendingTime`.
|
||||
|
||||
Interactions :
|
||||
|
||||
1. **Clic sur un jour `iso`** :
|
||||
- `heureEffective` = partie heure de `modelValue`, sinon `pendingTime`, sinon `'00:00'`.
|
||||
- émet `composeDateTime(iso, heureEffective)` → `"iso T heure:00"`.
|
||||
- le popover **reste ouvert**.
|
||||
2. **Changement de l'`<input type="time">` (`hhmm`)** :
|
||||
- si une partie date existe → émet `composeDateTime(datePart, hhmm)`.
|
||||
- sinon → stocke `hhmm` dans `pendingTime` (pas d'émission tant qu'aucun jour n'est choisi).
|
||||
- si `hhmm` est vidé (`''`) et qu'une date existe → on garde la date avec `00:00` ? **Non** : on n'émet rien sur vidage, on conserve la dernière valeur émise (le natif renvoie rarement `''` une fois rempli ; cas négligé pour l'intérim).
|
||||
3. **Effacer (croix)** : émet `null`, `pendingTime = ''`.
|
||||
|
||||
Bornes `min`/`max` : passées à `MonthGrid` après slice de la partie date (`min?.slice(0, 10)`). Pas de borne sur l'heure dans cette version.
|
||||
|
||||
## Composable `composables/datetimeFormat.ts`
|
||||
|
||||
Réutilise `isValidIso` de `dateFormat.ts` pour valider la partie date.
|
||||
|
||||
```ts
|
||||
// "YYYY-MM-DDTHH:MM:00" complet et valide ?
|
||||
export function isValidIsoDateTime(s: string): boolean
|
||||
|
||||
// "YYYY-MM-DDTHH:MM:00" -> "JJ/MM/AAAA HH:MM" (chaîne vide si invalide/nul)
|
||||
export function formatIsoDateTimeToDisplay(s: string | null): string
|
||||
|
||||
// "YYYY-MM-DDTHH:MM:00" -> { date: "YYYY-MM-DD" | null, time: "HH:MM" | '' }
|
||||
export function splitDateTime(s: string | null): { date: string | null; time: string }
|
||||
|
||||
// (date "YYYY-MM-DD", time "HH:MM") -> "YYYY-MM-DDTHH:MM:00"
|
||||
export function composeDateTime(date: string, time: string): string
|
||||
```
|
||||
|
||||
Règles :
|
||||
- `isValidIsoDateTime` : regex `^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$`, partie date valide via `isValidIso`, heure `00–23`, minutes `00–59`, secondes `00–59`.
|
||||
- `splitDateTime` : si `s` nul ou ne matche pas le motif datetime → `{ date: null, time: '' }`. Sinon découpe sur `T`, renvoie la date et `HH:MM` (5 premiers car. de la partie heure).
|
||||
- `composeDateTime(date, time)` : `${date}T${time}:00`. Si `time` vide → `${date}T00:00:00`.
|
||||
- `formatIsoDateTimeToDisplay` : si `!isValidIsoDateTime` → `''`. Sinon `${dd}/${mm}/${yyyy} ${hh}:${min}`.
|
||||
|
||||
## Tests
|
||||
|
||||
Colocalisés, Vitest + @vue/test-utils (jsdom), `vi.setSystemTime(new Date(2026, 4, 19))` pour déterminisme.
|
||||
|
||||
**`datetimeFormat.test.ts`** (helpers purs) :
|
||||
- `isValidIsoDateTime` : accepte `"2026-05-20T14:30:00"` ; rejette `"2026-05-20"`, `"2026-13-01T00:00:00"`, `"2026-05-20T24:00:00"`, `"2026-05-20T14:60:00"`, `""`, format sans secondes.
|
||||
- `formatIsoDateTimeToDisplay` : `"2026-05-20T14:30:00"` → `"20/05/2026 14:30"` ; nul/invalide → `''`.
|
||||
- `splitDateTime` : `"2026-05-20T14:30:00"` → `{ date: "2026-05-20", time: "14:30" }` ; `null` → `{ date: null, time: '' }` ; `"2026-05-20"` (date seule, non datetime) → `{ date: null, time: '' }`.
|
||||
- `composeDateTime` : `("2026-05-20", "14:30")` → `"2026-05-20T14:30:00"` ; `("2026-05-20", "")` → `"2026-05-20T00:00:00"`.
|
||||
|
||||
**`DateTime.test.ts`** (composant) :
|
||||
- Rendu : champ présent, placeholder `JJ/MM/AAAA HH:MM`, `displayValue` correct quand `modelValue` fourni.
|
||||
- Ouverture popover au clic → `MonthGrid` + `input[type=time]` visibles.
|
||||
- Clic sur un jour sans heure → émet `"<iso>T00:00:00"`, popover reste ouvert.
|
||||
- Clic sur un jour avec `pendingTime` réglé d'abord → émet `"<iso>T<pendingTime>:00"`.
|
||||
- Changement de l'heure avec date déjà choisie → émet `"<date>T<nouvelleHeure>:00"`.
|
||||
- Changement de l'heure sans date → **aucune émission**.
|
||||
- `clearable` : croix émet `null`.
|
||||
- `min`/`max` datetime → jours hors bornes désactivés dans la grille.
|
||||
- Accessibilité : label lié, `aria-invalid` sur erreur.
|
||||
|
||||
## Livrables
|
||||
|
||||
1. `app/components/malio/date/composables/datetimeFormat.ts`
|
||||
2. `app/components/malio/date/composables/datetimeFormat.test.ts`
|
||||
3. `app/components/malio/date/DateTime.vue`
|
||||
4. `app/components/malio/date/DateTime.test.ts`
|
||||
5. Page playground `.playground/pages/composant/date/datetime.vue` + entrée nav (`playground.nav.ts`)
|
||||
6. Story `app/story/date/dateTime.story.vue`
|
||||
7. `COMPONENTS.md` (section MalioDateTime)
|
||||
8. `CHANGELOG.md` (ligne sous `### Added`)
|
||||
|
||||
## Hors périmètre (intérim)
|
||||
|
||||
- Sélecteur d'heure dédié / maquette → itération ultérieure ; on remplacera le bloc `<input type="time">` isolé.
|
||||
- Bornes horaires (min/max sur l'heure).
|
||||
- Pas de minutes configurable (granularité native du navigateur).
|
||||
- Secondes dans l'UI.
|
||||
Reference in New Issue
Block a user