@saasmakers/ui 2.0.68 → 2.0.70

package/app/components/fields/FieldDate.vue

@@ -0,0 +1,758 @@
+<script lang="ts" setup>
+import type { FieldDate, FieldDatePreset } from '../../types/fields'
+import { getRelativeDateMessage } from '../../i18n/relativeDate'
+import { buildCalendarGrid, formatMonthLabel, formatPresetSub, getNextMonday, getNextSaturday, isBeforeDay, isSameDay, resolveLocaleCode, startOfLocalDay } from '../../utils/dateField'
+
+const props = withDefaults(defineProps<Omit<FieldDate, 'modelValue'>>(), {
+  background: 'white',
+  description: '',
+  disabled: false,
+  hideError: true,
+  label: '',
+  labelIcon: undefined,
+  min: undefined,
+  placeholder: '',
+  presets: undefined,
+  required: false,
+  size: 'base',
+  validation: undefined,
+  weekStartsOn: 1,
+})
+
+const emit = defineEmits<{
+  close: []
+  open: []
+}>()
+
+const { locale, t } = useI18n()
+
+const localeCode = computed(() => {
+  return resolveLocaleCode(locale.value)
+})
+
+const id = useId()
+const chipListId = `${id}-presets`
+const modelValue = defineModel<FieldDate['modelValue']>({ default: null })
+const opened = ref(false)
+const calendarOpen = ref(false)
+const panelRef = ref<HTMLElement>()
+const chipListRef = ref<HTMLElement>()
+const viewMonth = ref(startOfLocalDay(new Date()))
+const focusedDayIndex = ref(0)
+const { absoluteLabel, isOverdue, relativeLabel } = useRelativeDate(modelValue)
+const prefersReducedMotion = usePreferredReducedMotion()
+
+const panelAnimation = computed(() => {
+  if (prefersReducedMotion.value === 'reduce') {
+    return {
+      animate: { opacity: 1 },
+      initial: { opacity: 1 },
+    }
+  }
+
+  return fadeIn
+})
+
+const triggerIconSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'lg':
+      return '2xl'
+    case 'sm':
+      return 'lg'
+    default:
+      return 'xl'
+  }
+})
+
+const clearIconSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'lg':
+      return 'lg'
+    case 'sm':
+      return 'base'
+    default:
+      return 'base'
+  }
+})
+
+const today = computed(() => {
+  return startOfLocalDay(new Date())
+})
+
+const computedPresets = computed(() => {
+  if (props.presets) {
+    return props.presets
+  }
+
+  const currentToday = today.value
+  const weekday = currentToday.getDay()
+  const tomorrow = new Date(currentToday)
+
+  tomorrow.setDate(tomorrow.getDate() + 1)
+
+  const tomorrowDate = startOfLocalDay(tomorrow)
+
+  const items: FieldDatePreset[] = [
+    {
+      date: currentToday,
+      id: 'today',
+      label: getRelativeDateMessage(localeCode.value, 'today'),
+      sub: formatPresetSub(currentToday, localeCode.value),
+    },
+    {
+      date: tomorrowDate,
+      id: 'tomorrow',
+      label: getRelativeDateMessage(localeCode.value, 'tomorrow'),
+      sub: formatPresetSub(tomorrowDate, localeCode.value),
+    },
+  ]
+
+  if (weekday !== 0 && weekday !== 6) {
+    const weekendDate = getNextSaturday(currentToday)
+
+    items.push({
+      date: weekendDate,
+      id: 'weekend',
+      label: t('weekend'),
+      sub: formatPresetSub(weekendDate, localeCode.value),
+    })
+  }
+
+  const nextWeekDate = getNextMonday(currentToday)
+
+  items.push({
+    date: nextWeekDate,
+    id: 'nextWeek',
+    label: t('nextWeek'),
+    sub: formatPresetSub(nextWeekDate, localeCode.value),
+  })
+
+  return items
+})
+
+const chooseChipIndex = computed(() => {
+  return computedPresets.value.length
+})
+
+const chipsCount = computed(() => {
+  return chooseChipIndex.value + 1
+})
+
+const { highlightedIndex, onArrowKey, onHighlight, resetHighlight } = useChipNavigation({
+  containerRef: chipListRef,
+  count: chipsCount,
+})
+
+const calendarCells = computed(() => {
+  return buildCalendarGrid({
+    viewMonth: viewMonth.value,
+    weekStartsOn: props.weekStartsOn,
+  })
+})
+
+const monthLabel = computed(() => {
+  return formatMonthLabel(viewMonth.value, localeCode.value)
+})
+
+const weekdayLabels = computed(() => {
+  const labels: string[] = []
+  const referenceMonday = new Date(2024, 0, 1)
+
+  for (let index = 0; index < 7; index += 1) {
+    const date = new Date(referenceMonday)
+
+    date.setDate(referenceMonday.getDate() + ((props.weekStartsOn + index - 1 + 7) % 7))
+    labels.push(new Intl.DateTimeFormat(localeCode.value, { weekday: 'narrow' }).format(date))
+  }
+
+  return labels
+})
+
+watch(opened, (isOpened) => {
+  if (isOpened) {
+    emit('open')
+    resetHighlight(resolveInitialChipHighlight())
+
+    nextTick(() => {
+      chipListRef.value?.focus()
+
+      panelRef.value?.scrollIntoView({
+        behavior: prefersReducedMotion.value === 'reduce' ? 'auto' : 'smooth',
+        block: 'nearest',
+      })
+    })
+  }
+  else {
+    calendarOpen.value = false
+
+    emit('close')
+  }
+})
+
+watch(modelValue, (value) => {
+  if (value) {
+    viewMonth.value = startOfLocalDay(new Date(value.getFullYear(), value.getMonth(), 1))
+  }
+}, { immediate: true })
+
+function closePanel() {
+  opened.value = false
+  calendarOpen.value = false
+}
+
+function isDayDisabled(date: Date) {
+  return isBeforeDay(date, props.min)
+}
+
+function isPresetSelected(preset: FieldDatePreset) {
+  return modelValue.value ? isSameDay(preset.date, modelValue.value) : false
+}
+
+function onChipEnter() {
+  const index = highlightedIndex.value
+
+  if (index === chooseChipIndex.value) {
+    onOpenCalendar()
+
+    return
+  }
+
+  const preset = computedPresets.value[index]
+
+  if (preset) {
+    onPresetClick(preset)
+  }
+}
+
+function onChipListKeyDown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    onArrowKey(event, 'down')
+  }
+  else if (event.key === 'ArrowUp') {
+    onArrowKey(event, 'up')
+  }
+  else if (event.key === 'ArrowLeft') {
+    onArrowKey(event, 'left')
+  }
+  else if (event.key === 'ArrowRight') {
+    onArrowKey(event, 'right')
+  }
+  else if (event.key === 'Enter') {
+    event.preventDefault()
+    onChipEnter()
+  }
+  else if (event.key === 'Escape') {
+    event.preventDefault()
+    closePanel()
+  }
+}
+
+function onChipMouseDown(event: MouseEvent) {
+  event.preventDefault()
+}
+
+function onClearClick(event: MouseEvent) {
+  event.stopPropagation()
+
+  modelValue.value = null
+
+  closePanel()
+}
+
+function onCloseCalendar() {
+  calendarOpen.value = false
+
+  resetHighlight(chooseChipIndex.value)
+
+  nextTick(() => {
+    chipListRef.value?.focus()
+  })
+}
+
+function onContainerClick() {
+  if (!props.disabled) {
+    opened.value = !opened.value
+  }
+}
+
+function onContainerKeyDown(event: KeyboardEvent) {
+  if (!props.disabled && ['Enter', 'Space'].includes(event.code)) {
+    event.preventDefault()
+
+    opened.value = !opened.value
+  }
+}
+
+function onDayClick(date: Date) {
+  if (!isDayDisabled(date)) {
+    selectDate(date)
+  }
+}
+
+function onDayKeyDown(event: KeyboardEvent, date: Date, index: number) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    onCloseCalendar()
+
+    return
+  }
+
+  if (isDayDisabled(date)) {
+    return
+  }
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    selectDate(date)
+  }
+  else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+
+    focusedDayIndex.value = Math.max(0, index - 1)
+  }
+  else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+
+    focusedDayIndex.value = Math.min(calendarCells.value.length - 1, index + 1)
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+
+    focusedDayIndex.value = Math.max(0, index - 7)
+  }
+  else if (event.key === 'ArrowDown') {
+    event.preventDefault()
+
+    focusedDayIndex.value = Math.min(calendarCells.value.length - 1, index + 7)
+  }
+}
+
+function onNextMonth() {
+  viewMonth.value = new Date(viewMonth.value.getFullYear(), viewMonth.value.getMonth() + 1, 1)
+
+  nextTick(() => {
+    syncFocusedDayIndex()
+    panelRef.value?.querySelector<HTMLElement>('[role="gridcell"][tabindex="0"]')?.focus()
+  })
+}
+
+function onOpenCalendar() {
+  calendarOpen.value = true
+
+  resetHighlight(chooseChipIndex.value)
+  syncFocusedDayIndex()
+
+  nextTick(() => {
+    panelRef.value?.scrollIntoView({
+      behavior: prefersReducedMotion.value === 'reduce' ? 'auto' : 'smooth',
+      block: 'nearest',
+    })
+
+    panelRef.value?.querySelector<HTMLElement>('[role="gridcell"][tabindex="0"]')?.focus()
+  })
+}
+
+function onPresetClick(preset: FieldDatePreset) {
+  selectDate(preset.date)
+}
+
+function onPreviousMonth() {
+  viewMonth.value = new Date(viewMonth.value.getFullYear(), viewMonth.value.getMonth() - 1, 1)
+
+  nextTick(() => {
+    syncFocusedDayIndex()
+    panelRef.value?.querySelector<HTMLElement>('[role="gridcell"][tabindex="0"]')?.focus()
+  })
+}
+
+function resolveInitialChipHighlight() {
+  const selectedIndex = computedPresets.value.findIndex(preset => isPresetSelected(preset))
+
+  if (selectedIndex >= 0) {
+    return selectedIndex
+  }
+
+  if (calendarOpen.value) {
+    return chooseChipIndex.value
+  }
+
+  return 0
+}
+
+function selectDate(date: Date) {
+  modelValue.value = startOfLocalDay(date)
+
+  closePanel()
+}
+
+function syncFocusedDayIndex() {
+  const selectedIndex = calendarCells.value.findIndex(cell => modelValue.value && isSameDay(cell.date, modelValue.value))
+
+  focusedDayIndex.value = selectedIndex >= 0 ? selectedIndex : calendarCells.value.findIndex(cell => cell.inMonth)
+}
+</script>
+
+<template>
+  <div>
+    <FieldLabel
+      v-if="label"
+      :disabled="disabled"
+      :for-field="id"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="label"
+      :required="required"
+      :size="size"
+    />
+
+    <div
+      class="select-none overflow-hidden base-box field-uppercase"
+      :class="{
+        'field-disabled': disabled,
+        'base-border-interactive-focus-within': !disabled,
+        'bg-gray-100 dark:bg-gray-900': background === 'gray',
+        'bg-white dark:bg-gray-900': background === 'white',
+      }"
+    >
+      <div
+        :id="id"
+        class="flex cursor-pointer items-center gap-2 outline-none"
+        :class="{
+          'h-10': size === 'sm',
+          'h-12': size === 'base',
+          'h-14': size === 'lg',
+          'pl-3 pr-0': modelValue,
+          'px-3': !modelValue,
+        }"
+        role="button"
+        :aria-disabled="disabled"
+        :aria-expanded="opened"
+        tabindex="0"
+        @click="onContainerClick"
+        @keydown="onContainerKeyDown"
+      >
+        <BaseIcon
+          class="shrink-0"
+          color="gray"
+          :icon="getLayerIcon('calendar')"
+          :size="triggerIconSize"
+        />
+
+        <div
+          class="min-w-0 flex-1 truncate font-medium leading-normal tracking-tight uppercase"
+          :class="{
+            'pr-2': modelValue,
+            'text-xs': size === 'sm',
+            'text-sm': size === 'base',
+            'text-base': size === 'lg',
+          }"
+        >
+          <template v-if="modelValue">
+            <span
+              :class="{
+                'text-orange-600 dark:text-orange-400': isOverdue,
+                'text-gray-900 dark:text-gray-100': !isOverdue,
+              }"
+            >{{ relativeLabel }}</span><span class="text-gray-600 font-medium dark:text-gray-400"> · {{ absoluteLabel }}</span>
+          </template>
+
+          <span
+            v-else
+            class="truncate text-gray-600 dark:text-gray-400"
+          >
+            {{ placeholder || t('placeholder') }}
+          </span>
+        </div>
+
+        <button
+          v-if="modelValue"
+          :aria-label="t('clear')"
+          class="mr-3 inline-flex shrink-0 items-center self-center justify-center rounded-full base-control-hover p-1 text-gray-600 outline-none transition-[transform,colors] hover:scale-105 dark:text-gray-400"
+          type="button"
+          @click="onClearClick"
+        >
+          <BaseIcon
+            :icon="getLayerIcon('close')"
+            :size="clearIconSize"
+          />
+        </button>
+      </div>
+
+      <Motion
+        v-if="opened"
+        ref="panelRef"
+        :animate="panelAnimation.animate"
+        as="div"
+        :initial="panelAnimation.initial"
+      >
+        <div class="border-t base-border px-1.5 pb-1.5 pt-1">
+          <div
+            v-if="!calendarOpen"
+            :id="chipListId"
+            ref="chipListRef"
+            class="flex flex-wrap gap-1.5 outline-none"
+            :class="{
+              'text-xs': size === 'sm',
+              'text-sm': size === 'base',
+              'text-base': size === 'lg',
+            }"
+            :aria-activedescendant="`${id}-preset-${highlightedIndex}`"
+            role="listbox"
+            tabindex="0"
+            @keydown="onChipListKeyDown"
+          >
+            <BaseChip
+              v-for="(preset, index) in computedPresets"
+              :id="`${id}-preset-${index}`"
+              :key="preset.id"
+              :active="index === highlightedIndex"
+              active-highlight="indigo"
+              :aria-selected="index === highlightedIndex"
+              as="div"
+              hoverable
+              max-width
+              role="option"
+              variant="outline"
+              @click="onPresetClick(preset)"
+              @mousedown="onChipMouseDown"
+              @mouseenter="onHighlight(index)"
+            >
+              {{ preset.label }}<template v-if="preset.sub">
+                · {{ preset.sub }}
+              </template>
+            </BaseChip>
+
+            <BaseChip
+              :id="`${id}-preset-${chooseChipIndex}`"
+              :active="highlightedIndex === chooseChipIndex"
+              active-highlight="indigo"
+              :aria-selected="highlightedIndex === chooseChipIndex"
+              as="div"
+              hoverable
+              max-width
+              role="option"
+              variant="dashed"
+              @click="onOpenCalendar"
+              @mousedown="onChipMouseDown"
+              @mouseenter="onHighlight(chooseChipIndex)"
+            >
+              {{ t('choose') }}
+            </BaseChip>
+          </div>
+
+          <div
+            v-if="calendarOpen"
+            class="px-0.5"
+            role="grid"
+            :aria-label="monthLabel"
+            @keydown.escape.prevent="onCloseCalendar"
+          >
+            <div class="grid grid-cols-7 mb-0.5 gap-px">
+              <button
+                :aria-label="t('prevMonth')"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
+                type="button"
+                @click="onPreviousMonth"
+              >
+                <BaseIcon
+                  color="black"
+                  :icon="getLayerIcon('chevronLeft')"
+                  size="xs"
+                />
+              </button>
+
+              <span class="col-span-5 min-h-7 flex items-center justify-center text-xs text-gray-900 font-bold uppercase dark:text-gray-100">
+                {{ monthLabel }}
+              </span>
+
+              <button
+                :aria-label="t('nextMonth')"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
+                type="button"
+                @click="onNextMonth"
+              >
+                <BaseIcon
+                  color="black"
+                  :icon="getLayerIcon('chevronRight')"
+                  size="xs"
+                />
+              </button>
+            </div>
+
+            <div
+              class="grid grid-cols-7 gap-px"
+              role="row"
+            >
+              <div
+                v-for="(weekdayLabel, weekdayIndex) in weekdayLabels"
+                :key="`weekday-${weekdayIndex}`"
+                class="min-h-7 min-w-7 flex items-center justify-center text-xs text-gray-600 font-medium dark:text-gray-400"
+                role="columnheader"
+              >
+                {{ weekdayLabel }}
+              </div>
+            </div>
+
+            <div class="grid grid-cols-7 gap-px">
+              <button
+                v-for="(cell, index) in calendarCells"
+                :key="`${cell.date.toISOString()}-${index}`"
+                class="relative min-h-7 min-w-7 inline-flex items-center justify-center border border-transparent rounded-md text-xs font-medium outline-none"
+                :class="{
+                  'cursor-not-allowed text-gray-400 opacity-40 dark:text-gray-600': !cell.inMonth || isDayDisabled(cell.date),
+                  'base-bg-hover': cell.inMonth && !isDayDisabled(cell.date) && !(modelValue && isSameDay(cell.date, modelValue)),
+                  'text-indigo-600 font-bold dark:text-indigo-400': cell.inMonth && !isDayDisabled(cell.date) && isSameDay(cell.date, today) && !(modelValue && isSameDay(cell.date, modelValue)),
+                  'text-gray-600 dark:text-gray-400': cell.inMonth && !isDayDisabled(cell.date) && !isSameDay(cell.date, today) && !(modelValue && isSameDay(cell.date, modelValue)),
+                  'border-indigo-600/35 bg-indigo-600/[0.08] text-gray-900 dark:border-indigo-400/35 dark:bg-indigo-400/[0.08] dark:text-gray-100': modelValue && isSameDay(cell.date, modelValue),
+                  'ring-2 ring-indigo-600/35 dark:ring-indigo-400/35': index === focusedDayIndex && calendarOpen && !(modelValue && isSameDay(cell.date, modelValue)),
+                }"
+                :disabled="!cell.inMonth || isDayDisabled(cell.date)"
+                role="gridcell"
+                :tabindex="index === focusedDayIndex ? 0 : -1"
+                @click="onDayClick(cell.date)"
+                @keydown="onDayKeyDown($event, cell.date, index)"
+              >
+                {{ cell.date.getDate() }}
+
+                <span
+                  v-if="isSameDay(cell.date, today) && !(modelValue && isSameDay(cell.date, modelValue))"
+                  class="absolute bottom-0 h-0.5 w-0.5 rounded-full bg-indigo-600 dark:bg-indigo-400"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </Motion>
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :disabled="disabled"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "choose": "Wählen…",
+    "clear": "Datum entfernen",
+    "nextMonth": "Nächster Monat",
+    "nextWeek": "Nächste Woche",
+    "placeholder": "Fälligkeit hinzufügen",
+    "prevMonth": "Vorheriger Monat",
+    "weekend": "Dieses Wochenende"
+  },
+  "en": {
+    "choose": "Choose…",
+    "clear": "Remove date",
+    "nextMonth": "Next month",
+    "nextWeek": "Next week",
+    "placeholder": "Add a due date",
+    "prevMonth": "Previous month",
+    "weekend": "This weekend"
+  },
+  "es": {
+    "choose": "Elegir…",
+    "clear": "Quitar fecha",
+    "nextMonth": "Mes siguiente",
+    "nextWeek": "Próxima semana",
+    "placeholder": "Añadir fecha límite",
+    "prevMonth": "Mes anterior",
+    "weekend": "Este fin de semana"
+  },
+  "fr": {
+    "choose": "Choisir…",
+    "clear": "Retirer la date",
+    "nextMonth": "Mois suivant",
+    "nextWeek": "Semaine prochaine",
+    "placeholder": "Ajouter une échéance",
+    "prevMonth": "Mois précédent",
+    "weekend": "Ce week-end"
+  },
+  "id": {
+    "choose": "Pilih…",
+    "clear": "Hapus tanggal",
+    "nextMonth": "Bulan berikutnya",
+    "nextWeek": "Minggu depan",
+    "placeholder": "Tambahkan tenggat",
+    "prevMonth": "Bulan sebelumnya",
+    "weekend": "Akhir pekan ini"
+  },
+  "it": {
+    "choose": "Scegli…",
+    "clear": "Rimuovi data",
+    "nextMonth": "Mese successivo",
+    "nextWeek": "Prossima settimana",
+    "placeholder": "Aggiungi scadenza",
+    "prevMonth": "Mese precedente",
+    "weekend": "Questo weekend"
+  },
+  "ja": {
+    "choose": "選択…",
+    "clear": "日付を削除",
+    "nextMonth": "次の月",
+    "nextWeek": "来週",
+    "placeholder": "期限を追加",
+    "prevMonth": "前の月",
+    "weekend": "今週末"
+  },
+  "ko": {
+    "choose": "선택…",
+    "clear": "날짜 제거",
+    "nextMonth": "다음 달",
+    "nextWeek": "다음 주",
+    "placeholder": "마감일 추가",
+    "prevMonth": "이전 달",
+    "weekend": "이번 주말"
+  },
+  "nl": {
+    "choose": "Kiezen…",
+    "clear": "Datum verwijderen",
+    "nextMonth": "Volgende maand",
+    "nextWeek": "Volgende week",
+    "placeholder": "Deadline toevoegen",
+    "prevMonth": "Vorige maand",
+    "weekend": "Dit weekend"
+  },
+  "pl": {
+    "choose": "Wybierz…",
+    "clear": "Usuń datę",
+    "nextMonth": "Następny miesiąc",
+    "nextWeek": "Przyszły tydzień",
+    "placeholder": "Dodaj termin",
+    "prevMonth": "Poprzedni miesiąc",
+    "weekend": "Ten weekend"
+  },
+  "pt": {
+    "choose": "Escolher…",
+    "clear": "Remover data",
+    "nextMonth": "Mês seguinte",
+    "nextWeek": "Próxima semana",
+    "placeholder": "Adicionar prazo",
+    "prevMonth": "Mês anterior",
+    "weekend": "Este fim de semana"
+  },
+  "pt-BR": {
+    "choose": "Escolher…",
+    "clear": "Remover data",
+    "nextMonth": "Próximo mês",
+    "nextWeek": "Próxima semana",
+    "placeholder": "Adicionar prazo",
+    "prevMonth": "Mês anterior",
+    "weekend": "Neste fim de semana"
+  },
+  "vi": {
+    "choose": "Chọn…",
+    "clear": "Xóa ngày",
+    "nextMonth": "Tháng sau",
+    "nextWeek": "Tuần tới",
+    "placeholder": "Thêm hạn chót",
+    "prevMonth": "Tháng trước",
+    "weekend": "Cuối tuần này"
+  }
+}
+</i18n>