feat : MonthGrid n° de semaine interactif + repère (mode semaine) (#MUI-33)

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

@@ -19,17 +19,24 @@
         v-for="(week, wIndex) in weeks"
         :key="week.days[0].isoDate"
       >
-        <div
+        <component
+          :is="interactiveWeekNumber ? 'button' : 'div'"
           data-test="week-number"
-          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
+          :data-week-start="week.days[0].isoDate"
+          :data-marked="markedWeekStart === week.days[0].isoDate"
+          :type="interactiveWeekNumber ? 'button' : undefined"
+          :disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
+          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
           :class="[
-            week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
+            weekNumberClass(week),
             wIndex === 0 ? 'rounded-t-md' : '',
             wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
           ]"
+          @click="onWeekNumberClick(week)"
+          @mouseenter="onWeekNumberHover(week)"
         >
           {{ week.weekNumber }}
-        </div>
+        </component>
         <button
           v-for="cell in week.days"
           :key="cell.isoDate"
@@ -71,7 +78,7 @@
 
 <script setup lang="ts">
 import {computed, toRef} from 'vue'
-import {useMonthMatrix, type DayCell} from '../composables/useMonthMatrix'
+import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
 import {isDateInRange} from '../composables/dateFormat'
 import {dayRangeRole, resolveRangeBounds, type DayRangeRole} from '../composables/dateRange'
 
@@ -85,6 +92,8 @@ const props = withDefaults(
     rangeStart?: string | null
     rangeEnd?: string | null
     previewDate?: string | null
+    interactiveWeekNumber?: boolean
+    markedWeekStart?: string | null
     min?: string
     max?: string
   }>(),
@@ -93,6 +102,8 @@ const props = withDefaults(
     rangeStart: undefined,
     rangeEnd: undefined,
     previewDate: undefined,
+    interactiveWeekNumber: false,
+    markedWeekStart: null,
     min: undefined,
     max: undefined,
   },
@@ -111,6 +122,26 @@ const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
 
 const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
 
+const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
+
+const weekNumberClass = (week: WeekRow) => {
+  if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
+  const parts = ['bg-m-primary-light']
+  parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
+  if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
+  return parts.join(' ')
+}
+
+const onWeekNumberClick = (week: WeekRow) => {
+  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
+  emit('select', week.days[0].isoDate)
+}
+
+const onWeekNumberHover = (week: WeekRow) => {
+  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
+  emit('hover', week.days[0].isoDate)
+}
+
 const isRangeMode = computed(() => props.rangeStart !== undefined)
 const bounds = computed(() =>
   isRangeMode.value