feat : composant MalioDate (datepicker) avec calendrier, vue mois, bornes et effacement (#MUI-33)
Sous-composants internes (CalendarHeader, MonthGrid, MonthPicker), composant public Date.vue, tests d'intégration, story Histoire et page playground. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
53
.playground/pages/composant/date/date.vue
Normal file
53
.playground/pages/composant/date/date.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="max-w-md space-y-6">
|
||||
<h1 class="text-2xl font-bold">MalioDate</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<MalioDate
|
||||
v-model="bounded"
|
||||
label="Date bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
Reference in New Issue
Block a user