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

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

app/components/malio/date/internal/CalendarHeader.vue

@@ -4,7 +4,7 @@
       type="button"
       data-test="header-prev"
       class="ml-2 flex self-start rounded"
-      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
+      :aria-label="prevLabel"
       @click="emit('prev')"
     >
       <Icon
@@ -18,10 +18,11 @@
       type="button"
       data-test="header-toggle"
       class="flex gap-1 rounded text-base font-medium"
-      @click="emit('toggle-view')"
+      @click="viewMode !== 'years' && emit('toggle-view')"
     >
       <span class="mt-[2px]">{{ label }}</span>
       <Icon
+        v-if="viewMode !== 'years'"
         icon="mdi:chevron-down"
         :width="25"
         :height="25"
@@ -32,7 +33,7 @@
       type="button"
       data-test="header-next"
       class="mr-2 flex self-start rounded"
-      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
+      :aria-label="nextLabel"
       @click="emit('next')"
     >
       <Icon
@@ -51,9 +52,10 @@ import {Icon} from '@iconify/vue'
 defineOptions({name: 'MalioDateCalendarHeader'})
 
 const props = defineProps<{
-  viewMode: 'days' | 'months'
+  viewMode: 'days' | 'months' | 'years'
   currentMonth: number
   currentYear: number
+  yearPageStart: number
 }>()
 
 const emit = defineEmits<{
@@ -64,7 +66,20 @@ const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
   'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
 
 const label = computed(() => {
+  if (props.viewMode === 'years') return `${props.yearPageStart} – ${props.yearPageStart + 11}`
+  if (props.viewMode === 'months') return `${props.currentYear}`
   const name = monthsLong[props.currentMonth]
   return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
 })
+
+const prevLabel = computed(() =>
+  props.viewMode === 'days' ? 'Mois précédent'
+    : props.viewMode === 'months' ? 'Année précédente'
+      : 'Période précédente',
+)
+const nextLabel = computed(() =>
+  props.viewMode === 'days' ? 'Mois suivant'
+    : props.viewMode === 'months' ? 'Année suivante'
+      : 'Période suivante',
+)
 </script>