feat(useDate): add new composable

[johnleider]

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { ExpansionPanel, createDate } from '@vuetify/v0'

  // Date composable
  const { adapter, locale } = createDate({ locale: 'en-US' })

  const now = ref(adapter.date()!)
  const selectedDate = ref(adapter.date('2024-06-15T10:30:00')!)

  // Formatted dates
  const formatted = computed(() => ({
    fullDate: adapter.format(selectedDate.value, 'fullDate'),
    shortDate: adapter.format(selectedDate.value, 'shortDate'),
    monthAndYear: adapter.format(selectedDate.value, 'monthAndYear'),
    weekday: adapter.format(selectedDate.value, 'weekday'),
    fullDateTime: adapter.format(selectedDate.value, 'fullDateTime'),
  }))

  // Navigation
  const boundaries = computed(() => ({
    startOfDay: adapter.toISO(adapter.startOfDay(selectedDate.value)),
    endOfDay: adapter.toISO(adapter.endOfDay(selectedDate.value)),
    startOfWeek: adapter.toISO(adapter.startOfWeek(selectedDate.value)),
    startOfMonth: adapter.toISO(adapter.startOfMonth(selectedDate.value)),
  }))

  // Week array for calendar grid
  const weekArray = computed(() => adapter.getWeekArray(selectedDate.value, 0))
  const weekdays = adapter.getWeekdays(0, 'short')

  // Arithmetic
  function addDays (days: number) {
    selectedDate.value = adapter.addDays(selectedDate.value, days)
  }

  function addMonths (months: number) {
    selectedDate.value = adapter.addMonths(selectedDate.value, months)
  }

  function goToToday () {
    selectedDate.value = adapter.date()!
  }

  // Comparison
  const comparison = computed(() => ({
    isAfterNow: adapter.isAfter(selectedDate.value, now.value),
    isBeforeNow: adapter.isBefore(selectedDate.value, now.value),
    isSameDay: adapter.isSameDay(selectedDate.value, now.value),
    daysFromNow: adapter.getDiff(selectedDate.value, now.value, 'days'),
  }))

  // ExpansionPanel example
  const panels = [
    { id: 'panel-1', title: 'Panel 1', content: 'This is the content for panel 1.' },
    { id: 'panel-2', title: 'Panel 2', content: 'This is the content for panel 2.' },
    { id: 'panel-3', title: 'Panel 3', content: 'This is the content for panel 3.' },
  ]

  const model = ref(['panel-2'])
</script>

<template>
  <div class="space-y-8">
    <!-- useDate Demo -->
    <section>
      <h2 class="text-xl font-bold mb-4">useDate (Temporal API)</h2>

      <div class="grid grid-cols-2 gap-4">
        <!-- Formatting -->
        <div class="border border-divider rounded-lg p-4">
          <h3 class="font-semibold mb-2">Formatting</h3>
          <div class="space-y-1 text-sm">
            <p><span class="opacity-60">fullDate:</span> {{ formatted.fullDate }}</p>
            <p><span class="opacity-60">shortDate:</span> {{ formatted.shortDate }}</p>
            <p><span class="opacity-60">monthAndYear:</span> {{ formatted.monthAndYear }}</p>
            <p><span class="opacity-60">weekday:</span> {{ formatted.weekday }}</p>
            <p><span class="opacity-60">fullDateTime:</span> {{ formatted.fullDateTime }}</p>
          </div>
        </div>

        <!-- Boundaries -->
        <div class="border border-divider rounded-lg p-4">
          <h3 class="font-semibold mb-2">Boundaries</h3>
          <div class="space-y-1 text-sm font-mono">
            <p><span class="opacity-60">startOfDay:</span> {{ boundaries.startOfDay }}</p>
            <p><span class="opacity-60">endOfDay:</span> {{ boundaries.endOfDay }}</p>
            <p><span class="opacity-60">startOfWeek:</span> {{ boundaries.startOfWeek }}</p>
            <p><span class="opacity-60">startOfMonth:</span> {{ boundaries.startOfMonth }}</p>
          </div>
        </div>

        <!-- Navigation -->
        <div class="border border-divider rounded-lg p-4">
          <h3 class="font-semibold mb-2">Navigation</h3>
          <div class="flex flex-wrap gap-2">
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addDays(-7)"
            >
              -7 days
            </button>
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addDays(-1)"
            >
              -1 day
            </button>
            <button
              class="px-3 py-1 bg-secondary text-on-secondary rounded"
              @click="goToToday"
            >
              Today
            </button>
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addDays(1)"
            >
              +1 day
            </button>
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addDays(7)"
            >
              +7 days
            </button>
          </div>
          <div class="flex flex-wrap gap-2 mt-2">
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addMonths(-1)"
            >
              Prev Month
            </button>
            <button
              class="px-3 py-1 bg-primary text-on-primary rounded"
              @click="addMonths(1)"
            >
              Next Month
            </button>
          </div>
        </div>

        <!-- Comparison -->
        <div class="border border-divider rounded-lg p-4">
          <h3 class="font-semibold mb-2">Comparison with Now</h3>
          <div class="space-y-1 text-sm">
            <p><span class="opacity-60">isAfterNow:</span> {{ comparison.isAfterNow }}</p>
            <p><span class="opacity-60">isBeforeNow:</span> {{ comparison.isBeforeNow }}</p>
            <p><span class="opacity-60">isSameDay:</span> {{ comparison.isSameDay }}</p>
            <p><span class="opacity-60">daysFromNow:</span> {{ comparison.daysFromNow }} days</p>
          </div>
        </div>
      </div>

      <!-- Calendar Grid -->
      <div class="mt-4 border border-divider rounded-lg p-4">
        <h3 class="font-semibold mb-2">
          Calendar: {{ adapter.format(selectedDate, 'monthAndYear') }}
        </h3>
        <div class="grid grid-cols-7 gap-1 text-center text-sm">
          <div
            v-for="day in weekdays"
            :key="day"
            class="font-semibold opacity-60 py-1"
          >
            {{ day }}
          </div>
          <template v-for="(week, wi) in weekArray" :key="wi">
            <div
              v-for="(date, di) in week"
              :key="`${wi}-${di}`"
              class="py-2 rounded cursor-pointer hover:bg-surface-tint"
              :class="{
                'opacity-40': !adapter.isSameMonth(date, selectedDate),
                'bg-primary text-on-primary': adapter.isSameDay(date, selectedDate),
                'ring-1 ring-primary': adapter.isSameDay(date, now),
              }"
              @click="selectedDate = date"
            >
              {{ adapter.getDate(date) }}
            </div>
          </template>
        </div>
      </div>

      <p class="mt-2 text-sm opacity-60">
        Selected: {{ adapter.toISO(selectedDate) }} | Locale: {{ locale }}
      </p>
    </section>

    <hr class="border-divider">

    <!-- ExpansionPanel Demo -->
    <section>
      <h2 class="text-xl font-bold mb-4">ExpansionPanel</h2>

      <ExpansionPanel.Root
        v-model="model"
        class="border border-divider rounded-lg border-solid overflow-hidden divide-y divide-divider"
        multiple
      >
        <ExpansionPanel.Item
          v-for="item in panels"
          :key="item.id"
          :value="item.id"
        >
          <ExpansionPanel.Activator
            v-slot="{ isSelected }"
            class="w-full px-3 py-2 border-none flex items-center gap-3 text-left cursor-pointer bg-surface hover:bg-surface-tint"
          >
            <span
              class="inline-flex items-center justify-center w-5 text-sm text-on-surface opacity-60"
              :class="isSelected ? 'text-primary' : undefined"
            >
              {{ isSelected ? '−' : '+' }}
            </span>
            <span class="flex-1 font-medium text-on-surface text-base">{{ item.title }}</span>
          </ExpansionPanel.Activator>

          <ExpansionPanel.Content class="pa-4">
            {{ item.content }}
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel.Root>

      <p class="mt-4 text-sm text-on-surface opacity-60">
        Expanded: {{ model.join(', ') }}
      </p>
    </section>
  </div>
</template>

[pkg-pr-new]

Open in StackBlitz

commit: 7f42703