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

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

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()
+    api.goToHigherView()
-    expect(api.viewMode.value).toBe('days')
+    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')

app/components/malio/date/composables/useCalendarPopover.ts

@@ -2,7 +2,7 @@ import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
 
 export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
   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<HTMLElement | null>) {
     isOpen.value = false
     viewMode.value = 'days'
   }
-  const toggleView = () => {
+  const goToHigherView = () => {
-    viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
+    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<HTMLElement | null>) {
   onMounted(() => document.addEventListener('mousedown', onMouseDown))
   onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
 
-  return {isOpen, viewMode, open, close, toggleView}
+  return {isOpen, viewMode, open, close, goToHigherView}
 }