tristan
41010060ff
## Sélecteur d'année dans le calendrier (3ᵉ niveau de navigation) Ajoute un 3ᵉ niveau de navigation à la famille de composants date, et corrige le bornage min/max du sélecteur de mois. ### Comportement - Clic sur le champ → calendrier (vue **jours**) - Clic sur l'en-tête → **sélecteur de mois** - **Re-clic sur l'en-tête → sélecteur d'année** (grille de 12 ans, chevrons paginant par pas de 12 ans, fenêtre centrée sur l'année courante − 5) - Clic sur une année → retour au sélecteur de mois ; clic sur un mois → retour à la grille de jours - Les props `min`/`max` **grisent les mois ET les années** hors plage (corrige l'asymétrie : le `MonthPicker` affichait jusqu'ici tous les mois) En-tête contextuel : « Mai 2026 » (jours) / « 2026 » (mois) / « 2020 – 2031 » (années). ### Périmètre - Shell partagé `internal/CalendarField.vue` → bénéficie aux 4 composants publics `Date`, `DateRange`, `DateTime`, `DateWeek` - **Aucune API publique modifiée** - Nouveau composant `internal/YearPicker.vue` (calqué sur `MonthPicker`) - Helpers purs `isMonthInRange` / `isYearInRange` (comparaison par préfixe ISO, bornes inclusives) - State machine `viewMode` à 3 niveaux (`useCalendarPopover` / `useCalendarView`) ### Tests - Suite date **246/246 verte**, ESLint propre - Unitaires : helpers, `YearPicker`, `MonthPicker` (grisage), composables (pagination ±12, recentrage, `selectYear`) - e2e `Date.test.ts` : flux complet jours→mois→années→mois→jours + grisage min/max ### Process Développé en brainstorming → spec → plan → exécution TDD (un commit par étape). Spec et plan inclus sous `docs/superpowers/`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #83 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
import {describe, expect, it} from 'vitest'
|
|
import {mount} from '@vue/test-utils'
|
|
import YearPicker from './YearPicker.vue'
|
|
|
|
const mountPicker = (props: {pageStart: number, selectedYear?: number, min?: string, max?: string}) =>
|
|
mount(YearPicker, {props})
|
|
|
|
describe('MalioDateYearPicker', () => {
|
|
it('renders 12 years from pageStart', () => {
|
|
const wrapper = mountPicker({pageStart: 2021})
|
|
const years = wrapper.findAll('[data-test="year"]')
|
|
expect(years).toHaveLength(12)
|
|
expect(years[0].attributes('data-year')).toBe('2021')
|
|
expect(years[11].attributes('data-year')).toBe('2032')
|
|
})
|
|
|
|
it('emits select with the clicked year', async () => {
|
|
const wrapper = mountPicker({pageStart: 2021})
|
|
await wrapper.get('[data-test="year"][data-year="2026"]').trigger('click')
|
|
expect(wrapper.emitted('select')?.[0]).toEqual([2026])
|
|
})
|
|
|
|
it('disables years outside [min, max] and does not emit', async () => {
|
|
const wrapper = mountPicker({pageStart: 2021, min: '2025-01-01', max: '2027-12-31'})
|
|
const out = wrapper.get('[data-test="year"][data-year="2024"]')
|
|
expect(out.attributes('disabled')).toBeDefined()
|
|
await out.trigger('click')
|
|
expect(wrapper.emitted('select')).toBeUndefined()
|
|
})
|
|
|
|
it('highlights the selected year', () => {
|
|
const wrapper = mountPicker({pageStart: 2021, selectedYear: 2026})
|
|
const span = wrapper.get('[data-test="year"][data-year="2026"] span')
|
|
expect(span.classes()).toContain('bg-m-primary')
|
|
})
|
|
})
|