malio-layer-ui/app/story/date/datePicker.story.vue

<template>
  <Story title="Date/Date">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDate
          v-model="simpleValue"
          label="Date de naissance"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDate
          v-model="initialValue"
          label="Date du jour"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDate
          v-model="boundedValue"
          label="Date du rendez-vous"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Saisie clavier (editable)</h2>
        <MalioDate
          v-model="editableValue"
          label="Date de naissance"
          editable
          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
        <MalioDate
          v-model="initialValue"
          label="Date verrouillée"
          :clearable="false"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDate
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
        <MalioDate
          v-model="initialValue"
          label="Lecture seule"
          readonly
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDate
          v-model="errorValue"
          label="Date limite"
          error="Date invalide"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioDate
          v-model="initialValue"
          label="Date confirmée"
          success="Enregistrée"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Statuts par jour (markedDates) + @month-change</h2>
        <MalioDate
          v-model="markedValue"
          label="Jours validés / à corriger"
          hint="Ouvre le calendrier : jours verts (success) et rouges (danger)"
          :marked-dates="markedDates"
          @month-change="onMonthChange"
        />
        <p class="mt-2 text-sm text-m-muted">
          Mois affiché : <code>{{ shownMonth }}</code>
        </p>
      </div>
    </div>
  </Story>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MalioDate from '../../components/malio/date/Date.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 simpleValue = ref<string | null>(null)
const initialValue = ref<string | null>(todayIso)
const boundedValue = ref<string | null>(null)
const errorValue = ref<string | null>(null)
const editableValue = ref<string | null>(null)

const ym = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`
const markedDates = ref<Record<string, 'success' | 'danger'>>({
  [`${ym}-05`]: 'success',
  [`${ym}-06`]: 'success',
  [`${ym}-12`]: 'success',
  [`${ym}-09`]: 'danger',
  [`${ym}-20`]: 'danger',
})
const markedValue = ref<string | null>(null)
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
const shownMonth = ref('—')
const onMonthChange = ({month, year}: {month: number, year: number}) => {
  shownMonth.value = `${monthsLong[month]} ${year}`
}
</script>