feat : sélecteur d'année dans le calendrier (3ᵉ niveau) (#83)

## 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>
This commit was merged in pull request #83.
This commit is contained in:
2026-06-22 09:28:55 +00:00
committed by Autin
parent b0f060f909
commit 41010060ff
21 changed files with 1443 additions and 24 deletions
@@ -1,5 +1,5 @@
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
import {ref} from 'vue'
import {nextTick, ref} from 'vue'
import {useCalendarView} from './useCalendarView'
describe('useCalendarView', () => {
@@ -65,4 +65,27 @@ describe('useCalendarView', () => {
expect(currentMonth.value).toBe(4)
expect(currentYear.value).toBe(2026)
})
it('paginates years by 12 in years view', () => {
const {yearPageStart, goToNext, goToPrev} = useCalendarView(ref('years'))
const start = yearPageStart.value
goToNext()
expect(yearPageStart.value).toBe(start + 12)
goToPrev()
expect(yearPageStart.value).toBe(start)
})
it('selectYear sets the current year', () => {
const {currentYear, selectYear} = useCalendarView(ref('days'))
selectYear(2030)
expect(currentYear.value).toBe(2030)
})
it('recenters the year page on entering years view (current - 4)', async () => {
const mode = ref<'days' | 'months' | 'years'>('days')
const {yearPageStart} = useCalendarView(mode)
mode.value = 'years'
await nextTick()
expect(yearPageStart.value).toBe(2022) // 2026 - 4 (année courante en 2e ligne / 2e col)
})
})