tristan
c96cb5112d
- 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>
69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<div class="space-y-6 p-4">
|
|
<h1 class="text-2xl font-bold">MalioDate</h1>
|
|
|
|
<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="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>
|
|
</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 erpValue = ref<string | null>(null)
|
|
const bounded = ref<string | null>(null)
|
|
</script>
|