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

2026-06-22T09:16:56Z

tristan commented

2026-06-22 09:16:56 +00:00

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

## 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)

tristan added 11 commits 2026-06-22 09:16:57 +00:00

docs : spec sélecteur d'année dans le calendrier (3e niveau) a5328de113

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs : plan d'implémentation sélecteur d'année (#date-year-picker) 7ea1292e2a

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : viewMode 3 niveaux + goToHigherView (#date-year-picker) f7fc54c070

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : helpers isMonthInRange/isYearInRange (#date-year-picker) 03d9775ddb

Recommit : Task 2 avait orphelin le commit d'origine (reset HEAD).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : pagination des années + selectYear + recentrage (#date-year-picker) ea379ce5e4

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : header contextuel jours/mois/années (#date-year-picker) 59212a241e

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : composant YearPicker avec bornage min/max (#date-year-picker) 288c7a9dfb

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : bornage min/max du MonthPicker (#date-year-picker) 5e5423c545

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : intégration du sélecteur d'année dans CalendarField (#date-year-picker) f314a1a06e

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat : propage min/max au popover + e2e sélecteur d'année (#date-year-picker) d8f54137de

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs : sélecteur d'année dans le calendrier (#date-year-picker) 0ec63e774d

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

tristan added 1 commit 2026-06-22 09:28:31 +00:00

feat : en-tête « Mois Année » constant + année courante centrée (2e ligne/2e col) + cycle de vues b07e001006

- l'en-tête affiche toujours « Mois Année » avec chevron bas dans les 3 vues
- le clic sur l'en-tête cycle jours -> mois -> années -> jours (goToHigherView -> cycleView)
- la grille d'années cale l'année courante en index 4 (yearPageStart = courante - 4)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

tristan merged commit 41010060ff into develop

2026-06-22 09:28:56 +00:00

tristan deleted branch feature/date-year-picker

2026-06-22 09:28:56 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MALIO-DEV/malio-layer-ui#83