MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Autin
2026-06-22 11:28:20 +02:00
parent 0ec63e774d
commit b07e001006
8 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/malio/date/Date.test.ts
+24 -6
View File
@@ -186,13 +186,29 @@ describe('MalioDate', () => {
})
describe('vue années', () => {
it('opens the year picker on second header toggle', async () => {
it('opens the year picker on second header toggle, current year centered (2nd row/2nd col)', async () => {
const wrapper = mountDate()
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> mois
await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> années
expect(wrapper.find('[data-test="year-picker"]').exists()).toBe(true)
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2021 – 2032')
// Le libellé reste « Mois Année » dans toutes les vues.
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
// Année courante (2026) en 2e ligne / 2e colonne d'une grille 3 colonnes = index 4.
const years = wrapper.findAll('[data-test="year"]')
expect(years[4].attributes('data-year')).toBe('2026')
expect(years[0].attributes('data-year')).toBe('2022')
})
it('cycles back to day view on third header toggle', async () => {
const wrapper = mountDate()
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> mois
await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> années
await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> jours
expect(wrapper.find('[data-test="year-picker"]').exists()).toBe(false)
expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
})
it('navigates days -> months -> years -> months -> days', async () => {
@@ -209,13 +225,15 @@ describe('MalioDate', () => {
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
})
it('paginates the year window with chevrons', async () => {
it('paginates the year window by 12 with chevrons', async () => {
const wrapper = mountDate()
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="header-toggle"]').trigger('click')
await wrapper.get('[data-test="header-toggle"]').trigger('click')
await wrapper.get('[data-test="header-next"]').trigger('click')
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2033 – 2044')
await wrapper.get('[data-test="header-toggle"]').trigger('click') // années : fenêtre 2022–2033
await wrapper.get('[data-test="header-next"]').trigger('click') // +12 -> 2034–2045
const years = wrapper.findAll('[data-test="year"]')
expect(years[0].attributes('data-year')).toBe('2034')
expect(years[11].attributes('data-year')).toBe('2045')
})
it('greys out years outside [min, max]', async () => {