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

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

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

@@ -1,12 +1,21 @@
-import {ref, type Ref} from 'vue'
+import {ref, watch, type Ref} from 'vue'
 import {isValidIso} from './dateFormat'
 
-export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
+export function useCalendarView(viewMode: Ref<'days' | 'months' | 'years'>) {
   const today = new Date()
   const currentMonth = ref(today.getMonth())
   const currentYear = ref(today.getFullYear())
+  const yearPageStart = ref(today.getFullYear() - 5)
+
+  watch(viewMode, (mode) => {
+    if (mode === 'years') yearPageStart.value = currentYear.value - 5
+  })
 
   const goToPrev = () => {
+    if (viewMode.value === 'years') {
+      yearPageStart.value -= 12
+      return
+    }
     if (viewMode.value === 'months') {
       currentYear.value -= 1
       return
@@ -20,6 +29,10 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
   }
 
   const goToNext = () => {
+    if (viewMode.value === 'years') {
+      yearPageStart.value += 12
+      return
+    }
     if (viewMode.value === 'months') {
       currentYear.value += 1
       return
@@ -36,6 +49,10 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
     currentMonth.value = m
   }
 
+  const selectYear = (y: number) => {
+    currentYear.value = y
+  }
+
   const syncToIso = (iso: string | null) => {
     if (iso && isValidIso(iso)) {
       currentMonth.value = Number(iso.slice(5, 7)) - 1
@@ -47,5 +64,5 @@ export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
     }
   }
 
-  return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
+  return {currentMonth, currentYear, yearPageStart, goToPrev, goToNext, selectMonth, selectYear, syncToIso}
 }