diff --git a/app/components/malio/date/composables/useCalendarPopover.test.ts b/app/components/malio/date/composables/useCalendarPopover.test.ts index 206b5f4..a44c5c2 100644 --- a/app/components/malio/date/composables/useCalendarPopover.test.ts +++ b/app/components/malio/date/composables/useCalendarPopover.test.ts @@ -30,19 +30,21 @@ describe('useCalendarPopover', () => { expect(api.viewMode.value).toBe('days') }) - it('toggleView() switches between days and months', () => { + it('goToHigherView() climbs days -> months -> years and stops', () => { const {api} = mountHost() api.open() - api.toggleView() + api.goToHigherView() expect(api.viewMode.value).toBe('months') - api.toggleView() - expect(api.viewMode.value).toBe('days') + api.goToHigherView() + expect(api.viewMode.value).toBe('years') + api.goToHigherView() + expect(api.viewMode.value).toBe('years') // no-op au niveau le plus haut }) it('close() resets isOpen and viewMode', () => { const {api} = mountHost() api.open() - api.toggleView() + api.goToHigherView() api.close() expect(api.isOpen.value).toBe(false) expect(api.viewMode.value).toBe('days') diff --git a/app/components/malio/date/composables/useCalendarPopover.ts b/app/components/malio/date/composables/useCalendarPopover.ts index db179cc..9715a18 100644 --- a/app/components/malio/date/composables/useCalendarPopover.ts +++ b/app/components/malio/date/composables/useCalendarPopover.ts @@ -2,7 +2,7 @@ import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue' export function useCalendarPopover(rootRef: Ref) { const isOpen = ref(false) - const viewMode = ref<'days' | 'months'>('days') + const viewMode = ref<'days' | 'months' | 'years'>('days') const open = () => { isOpen.value = true @@ -12,8 +12,10 @@ export function useCalendarPopover(rootRef: Ref) { isOpen.value = false viewMode.value = 'days' } - const toggleView = () => { - viewMode.value = viewMode.value === 'days' ? 'months' : 'days' + const goToHigherView = () => { + if (viewMode.value === 'days') viewMode.value = 'months' + else if (viewMode.value === 'months') viewMode.value = 'years' + // 'years' : niveau le plus haut, no-op } const onMouseDown = (event: MouseEvent) => { @@ -24,5 +26,5 @@ export function useCalendarPopover(rootRef: Ref) { onMounted(() => document.addEventListener('mousedown', onMouseDown)) onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown)) - return {isOpen, viewMode, open, close, toggleView} + return {isOpen, viewMode, open, close, goToHigherView} }