From 4021240df3978893d708745ac483333f4a6c8d8e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 20 May 2026 15:16:17 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20MonthGrid=20n=C2=B0=20de=20semaine?=
 =?UTF-8?q?=20interactif=20+=20rep=C3=A8re=20(mode=20semaine)=20(#MUI-33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../malio/date/internal/MonthGrid.vue         | 41 ++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/app/components/malio/date/internal/MonthGrid.vue b/app/components/malio/date/internal/MonthGrid.vue
index 2a535dd..7a586c6 100644
--- a/app/components/malio/date/internal/MonthGrid.vue
+++ b/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