MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : playground DateTime aligné sur les autres dates (Large + ERP) (#MUI-33)

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-05-22 09:28:32 +02:00
parent fc3dcadff6
commit 70b18a6281
1 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
.playground/pages/composant/date/datetime.vue
View File

@@ -3,8 +3,8 @@
<h1 class="text-2xl font-bold">MalioDateTime</h1> <h1 class="text-2xl font-bold">MalioDateTime</h1>
<div class="flex flex-wrap items-start gap-10"> <div class="flex flex-wrap items-start gap-10">
<div class="w-[396px] space-y-3"> <div class="w-[480px] space-y-3">
<h2 class="font-semibold">Simple</h2> <h2 class="font-semibold">Large (480px)</h2>
<MalioDateTime <MalioDateTime
v-model="value" v-model="value"
label="Date et heure du rendez-vous" label="Date et heure du rendez-vous"
@@ -13,27 +13,41 @@
<div class="rounded border p-3 text-sm"> <div class="rounded border p-3 text-sm">
<p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p> <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
</div> </div>
<button <div class="flex gap-2">
type="button" <button
class="rounded border px-3 py-1.5" type="button"
@click="value = null" class="rounded bg-m-primary px-3 py-1.5 text-white"
> @click="value = '2026-12-25T09:30:00'"
Réinitialiser >
</button> 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>
<div class="w-[396px] space-y-3"> <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 <MalioDateTime
v-model="bounded" v-model="bounded"
label="Créneau" label="Créneau borné"
:min="todayIso" :min="todayIso"
:max="maxIso" :max="maxIso"
hint="Entre aujourd'hui et +30 jours" 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> </div>
</div> </div>
@@ -49,5 +63,6 @@ const todayIso = toIso(now)
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000)) const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
const value = ref<string | null>(null) const value = ref<string | null>(null)
const erpValue = ref<string | null>(null)
const bounded = ref<string | null>('2026-05-20T14:30:00') const bounded = ref<string | null>('2026-05-20T14:30:00')
</script> </script>