From 70b18a6281f4f03fd9bf4e0d751dc38c880362ff Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 22 May 2026 09:28:32 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20playground=20DateTime=20align=C3=A9?=
 =?UTF-8?q?=20sur=20les=20autres=20dates=20(Large=20+=20ERP)=20(#MUI-33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/date/datetime.vue | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/.playground/pages/composant/date/datetime.vue b/.playground/pages/composant/date/datetime.vue
index eeb468e..f7d0938 100644
--- a/.playground/pages/composant/date/datetime.vue
+++ b/.playground/pages/composant/date/datetime.vue
@@ -3,8 +3,8 @@
     <h1 class="text-2xl font-bold">MalioDateTime</h1>
 
     <div class="flex flex-wrap items-start gap-10">
-      <div class="w-[396px] space-y-3">
-        <h2 class="font-semibold">Simple</h2>
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
         <MalioDateTime
           v-model="value"
           label="Date et heure du rendez-vous"
@@ -13,27 +13,41 @@
         <div class="rounded border p-3 text-sm">
           <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
         </div>
-        <button
-          type="button"
-          class="rounded border px-3 py-1.5"
-          @click="value = null"
-        >
-          Réinitialiser
-        </button>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = '2026-12-25T09:30:00'"
+          >
+            Forcer le 25/12/2026 09:30
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
       </div>
 
       <div class="w-[396px] space-y-3">
-        <h2 class="font-semibold">Valeur initiale + bornes</h2>
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDateTime
+          v-model="erpValue"
+          label="Date et heure du rendez-vous"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO naïf) : <code>{{ erpValue ?? 'null' }}</code></p>
+        </div>
         <MalioDateTime
           v-model="bounded"
-          label="Créneau"
+          label="Créneau borné"
           :min="todayIso"
           :max="maxIso"
           hint="Entre aujourd'hui et +30 jours"
         />
-        <div class="rounded border p-3 text-sm">
-          <p>Valeur (ISO naïf) : <code>{{ bounded ?? 'null' }}</code></p>
-        </div>
       </div>
     </div>
   </div>
@@ -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>('2026-05-20T14:30:00')
 </script>