From c96cb5112dc9510b561c8ced2f0603bc90d0c6fa Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 20 May 2026 11:13:08 +0200
Subject: [PATCH] feat : ajustements visuels du datepicker selon maquette
 (#MUI-33)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- nouveau token couleur m-primary-light (#EFEFFD)
- popover en largeur du champ, shadow au lieu de bordure, collé au champ
- frames semaine (35x45) et jours alignés à 45px, cercle centré, font-medium
- colonne semaine étroite + marge, numéros en black/60 (semaine courante en black)
- vue mois en toutes lettres sur 3 colonnes, blocs 45px
- label bleu et grossissement calibré du champ à l'ouverture
- header sans hover, chevrons et titre plaqués en haut

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/date/date.vue     | 81 +++++++++++--------
 app/assets/css/malio.css                      |  1 +
 app/components/malio/date/Date.vue            | 21 +++--
 .../malio/date/internal/CalendarHeader.vue    | 22 ++---
 .../malio/date/internal/MonthGrid.vue         | 38 +++++----
 .../malio/date/internal/MonthPicker.vue       | 22 ++---
 tailwind.config.ts                            |  1 +
 7 files changed, 107 insertions(+), 79 deletions(-)

diff --git a/.playground/pages/composant/date/date.vue b/.playground/pages/composant/date/date.vue
index 382d982..320a5b2 100644
--- a/.playground/pages/composant/date/date.vue
+++ b/.playground/pages/composant/date/date.vue
@@ -1,41 +1,55 @@
 <template>
-  <div class="max-w-md space-y-6">
+  <div class="space-y-6 p-4">
     <h1 class="text-2xl font-bold">MalioDate</h1>
 
-    <MalioDate
-      v-model="value"
-      label="Date de naissance"
-      hint="Clique pour ouvrir le calendrier"
-    />
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDate
+          v-model="value"
+          label="Date de naissance"
+          hint="Clique pour ouvrir le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ value ?? '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 = '2026-12-25'"
+          >
+            Forcer le 25/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>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDate
+          v-model="erpValue"
+          label="Date du rendez-vous"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
+        </div>
+        <MalioDate
+          v-model="bounded"
+          label="Date 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 = '2026-12-25'"
-      >
-        Forcer le 25/12/2026
-      </button>
-      <button
-        type="button"
-        class="rounded border px-3 py-1.5"
-        @click="value = null"
-      >
-        Réinitialiser
-      </button>
-    </div>
-
-    <MalioDate
-      v-model="bounded"
-      label="Date bornée"
-      :min="todayIso"
-      :max="maxIso"
-      hint="Entre aujourd'hui et +30 jours"
-    />
   </div>
 </template>
 
@@ -49,5 +63,6 @@ const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 
 const value = ref<string | null>(null)
+const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 </script>
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index fbdb860..e9207a2 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -6,6 +6,7 @@
   :root {
     /* ── Globales ── */
     --m-primary: 34 39 131;         /* #222783 - Bleu Malio */
+    --m-primary-light: 239 239 253; /* #EFEFFD - Teinte claire du primary (fonds doux) */
     --m-bg: 243 244 248;            /* #F3F4F8 - Fond de page */
     --m-surface: 243 244 248;       /* #F3F4F8 - Fond hover/cartes */
     --m-text: 15 23 42;             /* #0F172A */
diff --git a/app/components/malio/date/Date.vue b/app/components/malio/date/Date.vue
index ae80a9f..cb50a8a 100644
--- a/app/components/malio/date/Date.vue
+++ b/app/components/malio/date/Date.vue
@@ -49,9 +49,9 @@
         </button>
         <Icon
           data-test="calendar-icon"
-          icon="mdi:calendar-outline"
-          :width="20"
-          :height="20"
+          icon="mdi:calendar-blank"
+          :width="24"
+          :height="24"
           :class="iconStateClass"
         />
       </div>
@@ -60,8 +60,7 @@
         v-if="isOpen"
         data-test="popover"
         role="dialog"
-        class="absolute left-0 top-[calc(100%-4px)] z-20 min-w-[320px] rounded-b-md border border-t-0 bg-white"
-        :class="popoverBorderClass"
+        class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
       >
         <CalendarHeader
           :view-mode="viewMode"
@@ -253,7 +252,7 @@ const mergedGroupClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none placeholder:text-transparent',
+    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
     isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
     hasError.value
@@ -261,7 +260,7 @@ const mergedInputClass = computed(() =>
       : hasSuccess.value
         ? 'border-m-success'
         : 'focus:border-m-primary',
-    isOpen.value ? '!rounded-b-none !border-b-0 border-m-primary' : '',
+    isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
     props.inputClass,
   ),
 )
@@ -274,7 +273,9 @@ const mergedLabelClass = computed(() =>
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : 'peer-placeholder-shown:text-m-muted text-black',
+        : isOpen.value
+          ? 'text-m-primary'
+          : 'peer-placeholder-shown:text-m-muted text-black',
     props.labelClass,
   ),
 )
@@ -286,10 +287,6 @@ const iconStateClass = computed(() => {
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'
 })
-
-const popoverBorderClass = computed(() =>
-  hasError.value ? 'border-m-danger' : hasSuccess.value ? 'border-m-success' : 'border-m-primary',
-)
 </script>
 
 <style scoped>
diff --git a/app/components/malio/date/internal/CalendarHeader.vue b/app/components/malio/date/internal/CalendarHeader.vue
index 03d7920..be9109e 100644
--- a/app/components/malio/date/internal/CalendarHeader.vue
+++ b/app/components/malio/date/internal/CalendarHeader.vue
@@ -1,44 +1,44 @@
 <template>
-  <div class="flex h-12 items-center justify-between border-b border-m-primary/20 px-2">
+  <div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
     <button
       type="button"
       data-test="header-prev"
-      class="rounded p-2 hover:bg-m-primary/10"
+      class="ml-2 flex self-start rounded"
       :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
       @click="emit('prev')"
     >
       <Icon
         icon="mdi:chevron-left"
-        :width="20"
-        :height="20"
+        :width="25"
+        :height="25"
       />
     </button>
 
     <button
       type="button"
       data-test="header-toggle"
-      class="flex items-center gap-1 rounded px-2 py-1 text-base font-medium hover:bg-m-primary/10"
+      class="flex gap-1 rounded text-base font-medium"
       @click="emit('toggle-view')"
     >
-      {{ label }}
+      <span class="mt-[2px]">{{ label }}</span>
       <Icon
         icon="mdi:chevron-down"
-        :width="16"
-        :height="16"
+        :width="25"
+        :height="25"
       />
     </button>
 
     <button
       type="button"
       data-test="header-next"
-      class="rounded p-2 hover:bg-m-primary/10"
+      class="mr-2 flex self-start rounded"
       :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
       @click="emit('next')"
     >
       <Icon
         icon="mdi:chevron-right"
-        :width="20"
-        :height="20"
+        :width="25"
+        :height="25"
       />
     </button>
   </div>
diff --git a/app/components/malio/date/internal/MonthGrid.vue b/app/components/malio/date/internal/MonthGrid.vue
index 6bdab10..13c3299 100644
--- a/app/components/malio/date/internal/MonthGrid.vue
+++ b/app/components/malio/date/internal/MonthGrid.vue
@@ -1,24 +1,29 @@
 <template>
   <div data-test="month-grid">
-    <div class="grid grid-cols-8">
-      <div class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted">
-        Sem
+    <div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
+      <div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
+        S
       </div>
       <div
         v-for="d in dayLabels"
         :key="d"
-        class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted"
+        class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
       >
         {{ d }}
       </div>
 
       <template
-        v-for="week in weeks"
+        v-for="(week, wIndex) in weeks"
         :key="week.days[0].isoDate"
       >
         <div
           data-test="week-number"
-          class="flex h-10 items-center justify-center bg-m-primary/10 text-sm text-m-primary/70"
+          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
+          :class="[
+            week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
+            wIndex === 0 ? 'rounded-t-md' : '',
+            wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
+          ]"
         >
           {{ week.weekNumber }}
         </div>
@@ -31,11 +36,16 @@
           :disabled="!inRange(cell.isoDate)"
           :aria-label="ariaLabel(cell)"
           :aria-disabled="!inRange(cell.isoDate)"
-          class="flex h-10 w-10 items-center justify-center text-sm transition-colors duration-100"
-          :class="cellClass(cell)"
+          class="flex h-[45px] w-full items-center justify-center"
+          :class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
           @click="onSelect(cell.isoDate)"
         >
-          {{ cell.day }}
+          <span
+            class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
+            :class="cellClass(cell)"
+          >
+            {{ cell.day }}
+          </span>
         </button>
       </template>
     </div>
@@ -77,12 +87,12 @@ const ariaLabel = (cell: DayCell) => {
 
 const cellClass = (cell: DayCell) => {
   const selected = props.selectedDate === cell.isoDate
-  if (!inRange(cell.isoDate)) return 'text-m-muted/30 cursor-not-allowed'
-  if (selected) return 'bg-m-primary text-white font-medium rounded-full'
-  const parts = ['cursor-pointer hover:bg-m-primary/10 rounded-full']
-  if (cell.isToday) parts.push('border border-m-primary text-m-primary font-semibold')
+  if (!inRange(cell.isoDate)) return 'text-m-muted/30'
+  if (selected) return 'bg-m-primary text-white'
+  const parts = ['hover:bg-m-primary/10']
+  if (cell.isToday) parts.push('border border-m-primary text-m-primary')
   else if (cell.isCurrentMonth) parts.push('text-black')
-  else parts.push('text-m-muted/50')
+  else parts.push('opacity-[60%]')
   return parts.join(' ')
 }
 
diff --git a/app/components/malio/date/internal/MonthPicker.vue b/app/components/malio/date/internal/MonthPicker.vue
index ec67dd6..2b525a1 100644
--- a/app/components/malio/date/internal/MonthPicker.vue
+++ b/app/components/malio/date/internal/MonthPicker.vue
@@ -1,21 +1,25 @@
 <template>
   <div
     data-test="month-picker"
-    class="grid grid-cols-4 gap-2 p-3"
+    class="grid grid-cols-3 gap-3"
   >
     <button
-      v-for="(name, index) in monthsShort"
+      v-for="(name, index) in months"
       :key="name"
       type="button"
       data-test="month"
       :data-month="index"
-      class="rounded py-3 text-sm transition-colors duration-100"
-      :class="index === selectedMonth
-        ? 'bg-m-primary text-white'
-        : 'text-black hover:bg-m-primary/10'"
+      class="flex h-[45px] w-full items-center justify-center"
       @click="emit('select', index)"
     >
-      {{ name }}
+      <span
+        class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
+        :class="index === selectedMonth
+          ? 'bg-m-primary text-white'
+          : 'text-black hover:bg-m-primary/10'"
+      >
+        {{ name }}
+      </span>
     </button>
   </div>
 </template>
@@ -27,6 +31,6 @@ defineProps<{selectedMonth?: number}>()
 
 const emit = defineEmits<{(e: 'select', month: number): void}>()
 
-const monthsShort = ['Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin',
-  'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc']
+const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
 </script>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 148df6b..e1d0573 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,6 +20,7 @@ export default {
       colors: {
         m: {
           primary: 'rgb(var(--m-primary) / <alpha-value>)',
+          'primary-light': 'rgb(var(--m-primary-light) / <alpha-value>)',
           surface: 'rgb(var(--m-surface) / <alpha-value>)',
           border: 'rgb(var(--m-border) / <alpha-value>)',
           text: 'rgb(var(--m-text) / <alpha-value>)',