From 9a752d08add470a49a57162ecbe67d4123abee5b Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 20 May 2026 13:58:23 +0200
Subject: [PATCH] feat : surlignage plage en pilule pleine cellule + playground
 DateRange en largeur ERP (#MUI-33)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../pages/composant/date/dateRange.vue        | 84 +++++++++++--------
 .../malio/date/internal/MonthGrid.vue         |  6 +-
 2 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/.playground/pages/composant/date/dateRange.vue b/.playground/pages/composant/date/dateRange.vue
index 5e8b0a0..4b0a553 100644
--- a/.playground/pages/composant/date/dateRange.vue
+++ b/.playground/pages/composant/date/dateRange.vue
@@ -1,42 +1,57 @@
 <template>
-  <div class="max-w-md space-y-6">
+  <div class="space-y-6 p-4">
     <h1 class="text-2xl font-bold">MalioDateRange</h1>
 
-    <MalioDateRange
-      v-model="value"
-      label="Période"
-      hint="Clique deux fois pour définir une plage"
-    />
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDateRange
+          v-model="value"
+          label="Période"
+          hint="Clique deux fois pour définir une plage"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
+          <p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = {start: '2026-12-20', end: '2026-12-31'}"
+          >
+            Forcer 20→31/12/2026
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
+      </div>
 
-    <div class="rounded border p-3 text-sm">
-      <p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
-      <p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDateRange
+          v-model="erpValue"
+          label="Période"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
+          <p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
+        </div>
+        <MalioDateRange
+          v-model="bounded"
+          label="Plage bornée"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+      </div>
     </div>
-
-    <div class="flex gap-2">
-      <button
-        type="button"
-        class="rounded bg-m-primary px-3 py-1.5 text-white"
-        @click="value = {start: '2026-12-20', end: '2026-12-31'}"
-      >
-        Forcer 20→31/12/2026
-      </button>
-      <button
-        type="button"
-        class="rounded border px-3 py-1.5"
-        @click="value = null"
-      >
-        Réinitialiser
-      </button>
-    </div>
-
-    <MalioDateRange
-      v-model="bounded"
-      label="Plage bornée"
-      :min="todayIso"
-      :max="maxIso"
-      hint="Entre aujourd'hui et +30 jours"
-    />
   </div>
 </template>
 
@@ -52,5 +67,6 @@ const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 
 const value = ref<RangeValue | null>(null)
+const erpValue = ref<RangeValue | null>(null)
 const bounded = ref<RangeValue | null>(null)
 </script>
diff --git a/app/components/malio/date/internal/MonthGrid.vue b/app/components/malio/date/internal/MonthGrid.vue
index 355faac..2a535dd 100644
--- a/app/components/malio/date/internal/MonthGrid.vue
+++ b/app/components/malio/date/internal/MonthGrid.vue
@@ -47,15 +47,15 @@
         >
           <span
             v-if="roleOf(cell) === 'in-range'"
-            class="absolute inset-0 bg-m-primary-light"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
           />
           <span
             v-else-if="roleOf(cell) === 'start'"
-            class="absolute inset-y-0 left-1/2 right-0 bg-m-primary-light"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
           />
           <span
             v-else-if="roleOf(cell) === 'end'"
-            class="absolute inset-y-0 left-0 right-1/2 bg-m-primary-light"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
           />
           <span
             class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"