@treeui/vue 0.17.0 → 0.18.0

package/dist/components/TDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TDatePicker.js","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TDatePicker.js","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`name`,`value`],o=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`],ee={key:0,class:`t-date-picker__slot t-date-picker__slot--prefix`},te=[`data-placeholder`],s={class:`t-date-picker__slot t-date-picker__slot--suffix`},c=[`id`],ne={class:`t-date-picker__header`},l=[`disabled`],u=[`disabled`],d={class:`t-date-picker__weekdays`,"aria-hidden":`true`},re=[`aria-selected`],f=[`data-date`,`disabled`,`tabindex`,`aria-current`,`aria-label`,`onClick`,`onKeydown`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDatePicker`,props:{modelValue:{default:``},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:`Select date`},locale:{default:`en-US`},min:{default:``},max:{default:``},weekStartsOn:{default:0},id:{default:void 0}},emits:[`update:modelValue`,`update:open`,`open-change`,`select`],setup(p,{emit:m}){let h=(0,r.getTreeIcon)(`calendar`),g=(0,r.getTreeIcon)(`chevron-left`),_=(0,r.getTreeIcon)(`chevron-right`),v=p,y=m,b=(0,t.useAttrs)(),x=(0,n.startOfDay)(new Date),S=(0,t.computed)(()=>(0,n.parseDateValue)(v.modelValue)),C=(0,t.computed)(()=>(0,n.parseDateValue)(v.min)),w=(0,t.computed)(()=>(0,n.parseDateValue)(v.max)),T=v.id??(0,n.createId)(`t-date-picker`),E=`${T}-caption`,D=(0,t.ref)(null),O=(0,t.ref)(null),k=new Map,A=(0,t.ref)((0,n.startOfMonth)(S.value??x)),j=(0,t.ref)(S.value??x),M=(0,t.computed)(()=>{let{class:e,style:t,name:n,...r}=b;return r}),N=(0,t.computed)(()=>typeof b.name==`string`?b.name:void 0),P=(0,t.computed)(()=>[`t-date-picker`,`t-date-picker--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-open":I.value},b.class]),F=(0,t.computed)(()=>b.style),{value:I,setValue:L}=e.useControllableOpen((0,t.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),R=(0,t.computed)(()=>S.value?new Intl.DateTimeFormat(v.locale,{day:`numeric`,month:`long`,year:`numeric`}).format(S.value):v.placeholder),z=(0,t.computed)(()=>new Intl.DateTimeFormat(v.locale,{month:`long`,year:`numeric`}).format(A.value)),B=(0,t.computed)(()=>{let e=new Intl.DateTimeFormat(v.locale,{weekday:`short`}),t=(0,n.startOfWeek)(new Date(2024,0,7),v.weekStartsOn);return Array.from({length:7},(r,i)=>e.format((0,n.addDays)(t,i)))}),V=e=>!!(v.disabled||C.value&&e<C.value||w.value&&e>w.value),H=e=>{j.value=(0,n.startOfDay)(e),A.value=(0,n.startOfMonth)(e)};(0,t.watch)(S,e=>{if(e){H(e);return}I.value||H(x)},{immediate:!0});let U=(0,t.computed)(()=>{let e=(0,n.startOfWeek)((0,n.startOfMonth)(A.value),v.weekStartsOn);return Array.from({length:6},(t,r)=>Array.from({length:7},(t,i)=>{let a=(0,n.addDays)(e,r*7+i),o=(0,n.toDateValue)(a);return{date:a,dayLabel:a.getDate(),disabled:V(a),inMonth:a.getMonth()===A.value.getMonth(),isFocused:(0,n.isSameDay)(a,j.value),isSelected:(0,n.isSameDay)(a,S.value),isToday:(0,n.isSameDay)(a,x),key:o}}))}),W=(0,t.computed)(()=>!C.value||(0,n.startOfMonth)(A.value)>(0,n.startOfMonth)(C.value)),G=(0,t.computed)(()=>!w.value||(0,n.startOfMonth)(A.value)<(0,n.startOfMonth)(w.value)),K=()=>{let e=(0,n.toDateValue)(j.value);(0,t.nextTick)(()=>{k.get(e)?.focus()})},q=(e,t)=>{if(e instanceof HTMLButtonElement){k.set(t,e);return}k.delete(t)},J=()=>{v.disabled||(H(S.value??j.value??x),L(!0),K())},Y=(e=!1)=>{L(!1),e&&(0,t.nextTick)(()=>{O.value?.focus()})},ie=()=>{if(I.value){Y();return}J()},X=e=>{let t=(0,n.addMonths)(A.value,e);H(t),K()},Z=e=>{V(e)||(H(e),K())},Q=e=>{if(V(e))return;let t=(0,n.startOfDay)(e),r=(0,n.toDateValue)(t);H(t),y(`update:modelValue`,r),y(`select`,r),Y(!0)},ae=e=>{if(!v.disabled){if((0,n.isEscapeKey)(e)&&I.value){e.preventDefault(),Y();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),J())}},oe=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),Y(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),Q(t);return}switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((0,n.addDays)(t,-1));break;case`ArrowRight`:e.preventDefault(),Z((0,n.addDays)(t,1));break;case`ArrowUp`:e.preventDefault(),Z((0,n.addDays)(t,-7));break;case`ArrowDown`:e.preventDefault(),Z((0,n.addDays)(t,7));break;case`Home`:e.preventDefault(),Z((0,n.startOfWeek)(t,v.weekStartsOn));break;case`End`:e.preventDefault(),Z((0,n.addDays)((0,n.startOfWeek)(t,v.weekStartsOn),6));break;case`PageUp`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?-12:-1));break;case`PageDown`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?12:1));break;default:break}},$=e=>{if(!I.value)return;let t=e.target;t instanceof Node&&(D.value?.contains(t)||Y())};return(0,t.watch)(I,e=>{if(e){document.addEventListener(`pointerdown`,$);return}document.removeEventListener(`pointerdown`,$)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:D,class:(0,t.normalizeClass)(P.value),style:(0,t.normalizeStyle)(F.value),"data-state":(0,t.unref)(I)?`open`:`closed`},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`input`,{key:0,type:`hidden`,name:N.value,value:p.modelValue},null,8,a)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:O},M.value,{type:`button`,class:`t-date-picker__trigger`,disabled:p.disabled,"aria-controls":(0,t.unref)(I)?(0,t.unref)(T):void 0,"aria-haspopup":`dialog`,"aria-expanded":(0,t.unref)(I),"aria-invalid":p.invalid||void 0,onClick:ie,onKeydown:ae}),[e.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,ee,[(0,t.renderSlot)(e.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:`t-date-picker__value`,"data-placeholder":!S.value||void 0},(0,t.toDisplayString)(R.value),9,te),(0,t.createElementVNode)(`span`,s,[(0,t.renderSlot)(e.$slots,`suffix`,{},()=>[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)])])],16,o),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(I)&&!p.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(T),class:`t-date-picker__content`,role:`dialog`,"aria-modal":`false`,"aria-labelledby":E},[(0,t.createElementVNode)(`div`,ne,[(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!W.value,"aria-label":`Previous month`,onClick:n[0]||=e=>X(-1)},[(0,t.createVNode)((0,t.unref)(g),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,l),(0,t.createElementVNode)(`p`,{id:E,class:`t-date-picker__month`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!G.value,"aria-label":`Next month`,onClick:n[1]||=e=>X(1)},[(0,t.createVNode)((0,t.unref)(_),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)]),(0,t.createElementVNode)(`div`,d,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(B.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:e,class:`t-date-picker__weekday`},(0,t.toDisplayString)(e),1))),128))]),(0,t.createElementVNode)(`div`,{class:`t-date-picker__grid`,role:`grid`,"aria-labelledby":E},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(U.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`t-date-picker__row`,role:`row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.key,class:`t-date-picker__cell`,role:`gridcell`,"aria-selected":e.isSelected},[(0,t.createElementVNode)(`button`,{ref_for:!0,ref:t=>q(t,e.key),type:`button`,class:(0,t.normalizeClass)([`t-date-picker__day`,{"is-muted":!e.inMonth,"is-selected":e.isSelected,"is-today":e.isToday}]),"data-date":e.key,disabled:e.disabled,tabindex:e.isFocused?0:-1,"aria-current":e.isToday?`date`:void 0,"aria-label":e.key,onClick:t=>Q(e.date),onKeydown:t=>oe(t,e.date)},(0,t.toDisplayString)(e.dayLabel),43,f)],8,re))),128))]))),128))])],8,c)):(0,t.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=p;
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`name`,`value`],o=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`],ee={key:0,class:`t-date-picker__slot t-date-picker__slot--prefix`},te=[`data-placeholder`],s={class:`t-date-picker__slot t-date-picker__slot--suffix`},c=[`id`],ne={class:`t-date-picker__header`},l=[`disabled`],u=[`disabled`],d={class:`t-date-picker__weekdays`,"aria-hidden":`true`},re=[`aria-selected`],f=[`data-date`,`disabled`,`tabindex`,`aria-current`,`aria-label`,`onClick`,`onKeydown`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDatePicker`,props:{modelValue:{default:``},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:`Select date`},locale:{default:`en-US`},min:{default:``},max:{default:``},weekStartsOn:{default:0},id:{default:void 0}},emits:[`update:modelValue`,`update:open`,`open-change`,`select`],setup(p,{emit:m}){let h=(0,t.computed)(()=>(0,r.getTreeIcon)(`calendar`)),g=(0,t.computed)(()=>(0,r.getTreeIcon)(`chevron-left`)),_=(0,t.computed)(()=>(0,r.getTreeIcon)(`chevron-right`)),v=p,y=m,b=(0,t.useAttrs)(),x=(0,n.startOfDay)(new Date),S=(0,t.computed)(()=>(0,n.parseDateValue)(v.modelValue)),C=(0,t.computed)(()=>(0,n.parseDateValue)(v.min)),w=(0,t.computed)(()=>(0,n.parseDateValue)(v.max)),T=v.id??(0,n.createId)(`t-date-picker`),E=`${T}-caption`,D=(0,t.ref)(null),O=(0,t.ref)(null),k=new Map,A=(0,t.ref)((0,n.startOfMonth)(S.value??x)),j=(0,t.ref)(S.value??x),M=(0,t.computed)(()=>{let{class:e,style:t,name:n,...r}=b;return r}),N=(0,t.computed)(()=>typeof b.name==`string`?b.name:void 0),P=(0,t.computed)(()=>[`t-date-picker`,`t-date-picker--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-open":I.value},b.class]),F=(0,t.computed)(()=>b.style),{value:I,setValue:L}=e.useControllableOpen((0,t.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),R=(0,t.computed)(()=>S.value?new Intl.DateTimeFormat(v.locale,{day:`numeric`,month:`long`,year:`numeric`}).format(S.value):v.placeholder),z=(0,t.computed)(()=>new Intl.DateTimeFormat(v.locale,{month:`long`,year:`numeric`}).format(A.value)),B=(0,t.computed)(()=>{let e=new Intl.DateTimeFormat(v.locale,{weekday:`short`}),t=(0,n.startOfWeek)(new Date(2024,0,7),v.weekStartsOn);return Array.from({length:7},(r,i)=>e.format((0,n.addDays)(t,i)))}),V=e=>!!(v.disabled||C.value&&e<C.value||w.value&&e>w.value),H=e=>{j.value=(0,n.startOfDay)(e),A.value=(0,n.startOfMonth)(e)};(0,t.watch)(S,e=>{if(e){H(e);return}I.value||H(x)},{immediate:!0});let U=(0,t.computed)(()=>{let e=(0,n.startOfWeek)((0,n.startOfMonth)(A.value),v.weekStartsOn);return Array.from({length:6},(t,r)=>Array.from({length:7},(t,i)=>{let a=(0,n.addDays)(e,r*7+i),o=(0,n.toDateValue)(a);return{date:a,dayLabel:a.getDate(),disabled:V(a),inMonth:a.getMonth()===A.value.getMonth(),isFocused:(0,n.isSameDay)(a,j.value),isSelected:(0,n.isSameDay)(a,S.value),isToday:(0,n.isSameDay)(a,x),key:o}}))}),W=(0,t.computed)(()=>!C.value||(0,n.startOfMonth)(A.value)>(0,n.startOfMonth)(C.value)),G=(0,t.computed)(()=>!w.value||(0,n.startOfMonth)(A.value)<(0,n.startOfMonth)(w.value)),K=()=>{let e=(0,n.toDateValue)(j.value);(0,t.nextTick)(()=>{k.get(e)?.focus()})},q=(e,t)=>{if(e instanceof HTMLButtonElement){k.set(t,e);return}k.delete(t)},J=()=>{v.disabled||(H(S.value??j.value??x),L(!0),K())},Y=(e=!1)=>{L(!1),e&&(0,t.nextTick)(()=>{O.value?.focus()})},ie=()=>{if(I.value){Y();return}J()},X=e=>{let t=(0,n.addMonths)(A.value,e);H(t),K()},Z=e=>{V(e)||(H(e),K())},Q=e=>{if(V(e))return;let t=(0,n.startOfDay)(e),r=(0,n.toDateValue)(t);H(t),y(`update:modelValue`,r),y(`select`,r),Y(!0)},ae=e=>{if(!v.disabled){if((0,n.isEscapeKey)(e)&&I.value){e.preventDefault(),Y();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),J())}},oe=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),Y(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),Q(t);return}switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((0,n.addDays)(t,-1));break;case`ArrowRight`:e.preventDefault(),Z((0,n.addDays)(t,1));break;case`ArrowUp`:e.preventDefault(),Z((0,n.addDays)(t,-7));break;case`ArrowDown`:e.preventDefault(),Z((0,n.addDays)(t,7));break;case`Home`:e.preventDefault(),Z((0,n.startOfWeek)(t,v.weekStartsOn));break;case`End`:e.preventDefault(),Z((0,n.addDays)((0,n.startOfWeek)(t,v.weekStartsOn),6));break;case`PageUp`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?-12:-1));break;case`PageDown`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?12:1));break;default:break}},$=e=>{if(!I.value)return;let t=e.target;t instanceof Node&&(D.value?.contains(t)||Y())};return(0,t.watch)(I,e=>{if(e){document.addEventListener(`pointerdown`,$);return}document.removeEventListener(`pointerdown`,$)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:D,class:(0,t.normalizeClass)(P.value),style:(0,t.normalizeStyle)(F.value),"data-state":(0,t.unref)(I)?`open`:`closed`},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`input`,{key:0,type:`hidden`,name:N.value,value:p.modelValue},null,8,a)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:O},M.value,{type:`button`,class:`t-date-picker__trigger`,disabled:p.disabled,"aria-controls":(0,t.unref)(I)?(0,t.unref)(T):void 0,"aria-haspopup":`dialog`,"aria-expanded":(0,t.unref)(I),"aria-invalid":p.invalid||void 0,onClick:ie,onKeydown:ae}),[e.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,ee,[(0,t.renderSlot)(e.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:`t-date-picker__value`,"data-placeholder":!S.value||void 0},(0,t.toDisplayString)(R.value),9,te),(0,t.createElementVNode)(`span`,s,[(0,t.renderSlot)(e.$slots,`suffix`,{},()=>[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)])])],16,o),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(I)&&!p.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(T),class:`t-date-picker__content`,role:`dialog`,"aria-modal":`false`,"aria-labelledby":E},[(0,t.createElementVNode)(`div`,ne,[(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!W.value,"aria-label":`Previous month`,onClick:n[0]||=e=>X(-1)},[(0,t.createVNode)((0,t.unref)(g),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,l),(0,t.createElementVNode)(`p`,{id:E,class:`t-date-picker__month`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!G.value,"aria-label":`Next month`,onClick:n[1]||=e=>X(1)},[(0,t.createVNode)((0,t.unref)(_),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)]),(0,t.createElementVNode)(`div`,d,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(B.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:e,class:`t-date-picker__weekday`},(0,t.toDisplayString)(e),1))),128))]),(0,t.createElementVNode)(`div`,{class:`t-date-picker__grid`,role:`grid`,"aria-labelledby":E},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(U.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`t-date-picker__row`,role:`row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.key,class:`t-date-picker__cell`,role:`gridcell`,"aria-selected":e.isSelected},[(0,t.createElementVNode)(`button`,{ref_for:!0,ref:t=>q(t,e.key),type:`button`,class:(0,t.normalizeClass)([`t-date-picker__day`,{"is-muted":!e.inMonth,"is-selected":e.isSelected,"is-today":e.isToday}]),"data-date":e.key,disabled:e.disabled,tabindex:e.isFocused?0:-1,"aria-current":e.isToday?`date`:void 0,"aria-label":e.key,onClick:t=>Q(e.date),onKeydown:t=>oe(t,e.date)},(0,t.toDisplayString)(e.dayLabel),43,f)],8,re))),128))]))),128))])],8,c)):(0,t.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=p;
 //# sourceMappingURL=TDatePicker.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -58,7 +58,7 @@ var ce = ["data-state"], le = ["name", "value"], ue = [
 		"select"
 	],
 	setup(c, { emit: j }) {
-		let xe = k("calendar"), Se = k("chevron-left"), Ce = k("chevron-right"), M = c, N = j, P = ae(), F = T(/* @__PURE__ */ new Date()), I = r(() => w(M.modelValue)), L = r(() => w(M.min)), R = r(() => w(M.max)), z = M.id ?? se("t-date-picker"), B = `${z}-caption`, V = p(null), H = p(null), U = /* @__PURE__ */ new Map(), W = p(E(I.value ?? F)), G = p(I.value ?? F), we = r(() => {
+		let xe = r(() => k("calendar")), Se = r(() => k("chevron-left")), Ce = r(() => k("chevron-right")), M = c, N = j, P = ae(), F = T(/* @__PURE__ */ new Date()), I = r(() => w(M.modelValue)), L = r(() => w(M.min)), R = r(() => w(M.max)), z = M.id ?? se("t-date-picker"), B = `${z}-caption`, V = p(null), H = p(null), U = /* @__PURE__ */ new Map(), W = p(E(I.value ?? F)), G = p(I.value ?? F), we = r(() => {
 			let { class: e, style: t, name: n, ...r } = P;
 			return r;
 		}), K = r(() => typeof P.name == "string" ? P.name : void 0), Te = r(() => [

package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDateTimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TDateTimePicker.cjs","names":[],"sources":["../../src/components/TDateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\ninterface TimeOption {\n  disabled: boolean;\n  label: string;\n  value: number;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst dateOnlyPattern = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\nconst dateTimePattern = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2})(?::(\\d{2}))?$/;\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n    step?: number;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: 'Select date and time',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n    step: 60,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  change: [value: string];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst cloneDate = (value: Date) => new Date(value.getTime());\n\nconst formatPart = (value: number) => `${value}`.padStart(2, '0');\n\nconst endOfDay = (date: Date) =>\n  new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);\n\nconst parseBoundaryValue = (\n  value: string | null | undefined,\n  boundary: 'exact' | 'start' | 'end' = 'exact',\n) => {\n  if (!value) {\n    return null;\n  }\n\n  const dateOnlyMatch = value.match(dateOnlyPattern);\n  if (dateOnlyMatch) {\n    const [, yearToken, monthToken, dayToken] = dateOnlyMatch;\n    const year = Number.parseInt(yearToken, 10);\n    const month = Number.parseInt(monthToken, 10);\n    const day = Number.parseInt(dayToken, 10);\n    const hour = boundary === 'end' ? 23 : 0;\n    const minute = boundary === 'end' ? 59 : 0;\n    const second = boundary === 'end' ? 59 : 0;\n    const millisecond = boundary === 'end' ? 999 : 0;\n    const date = new Date(year, month - 1, day, hour, minute, second, millisecond);\n\n    if (\n      Number.isNaN(date.getTime()) ||\n      date.getFullYear() !== year ||\n      date.getMonth() !== month - 1 ||\n      date.getDate() !== day\n    ) {\n      return null;\n    }\n\n    return date;\n  }\n\n  const dateTimeMatch = value.match(dateTimePattern);\n  if (!dateTimeMatch) {\n    return null;\n  }\n\n  const [, yearToken, monthToken, dayToken, hourToken, minuteToken, secondToken] =\n    dateTimeMatch;\n  const year = Number.parseInt(yearToken, 10);\n  const month = Number.parseInt(monthToken, 10);\n  const day = Number.parseInt(dayToken, 10);\n  const hour = Number.parseInt(hourToken, 10);\n  const minute = Number.parseInt(minuteToken, 10);\n  const second = secondToken ? Number.parseInt(secondToken, 10) : 0;\n  const date = new Date(year, month - 1, day, hour, minute, second, 0);\n\n  if (\n    Number.isNaN(date.getTime()) ||\n    date.getFullYear() !== year ||\n    date.getMonth() !== month - 1 ||\n    date.getDate() !== day ||\n    date.getHours() !== hour ||\n    date.getMinutes() !== minute ||\n    date.getSeconds() !== second\n  ) {\n    return null;\n  }\n\n  return date;\n};\n\nconst toDateTimeValue = (date: Date) =>\n  `${toDateValue(date)}T${formatPart(date.getHours())}:${formatPart(date.getMinutes())}`;\n\nconst setDatePart = (source: Date, targetDate: Date) =>\n  new Date(\n    targetDate.getFullYear(),\n    targetDate.getMonth(),\n    targetDate.getDate(),\n    source.getHours(),\n    source.getMinutes(),\n    0,\n    0,\n  );\n\nconst setTimePart = (source: Date, hour: number, minute: number) =>\n  new Date(\n    source.getFullYear(),\n    source.getMonth(),\n    source.getDate(),\n    hour,\n    minute,\n    0,\n    0,\n  );\n\nconst resolveMinuteStep = (step: number) => {\n  if (!Number.isFinite(step) || step <= 0 || step % 60 !== 0) {\n    return 1;\n  }\n\n  const minuteStep = step / 60;\n  return minuteStep >= 60 ? 1 : minuteStep;\n};\n\nconst today = startOfDay(new Date());\nconst selectedDateTime = computed(() => parseBoundaryValue(props.modelValue, 'exact'));\nconst minDateTime = computed(() => parseBoundaryValue(props.min, 'start'));\nconst maxDateTime = computed(() => parseBoundaryValue(props.max, 'end'));\nconst pickerId = props.id ?? createId('t-date-time-picker');\nconst captionId = `${pickerId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\n\nconst clampToRange = (value: Date) => {\n  let nextValue = cloneDate(value);\n\n  if (minDateTime.value && nextValue < minDateTime.value) {\n    nextValue = cloneDate(minDateTime.value);\n  }\n\n  if (maxDateTime.value && nextValue > maxDateTime.value) {\n    nextValue = cloneDate(maxDateTime.value);\n  }\n\n  return nextValue;\n};\n\nconst createDefaultDraftDateTime = () => {\n  const reference = new Date();\n  const stepMilliseconds = Math.max(props.step, 60) * 1000;\n  const rounded = new Date(Math.ceil(reference.getTime() / stepMilliseconds) * stepMilliseconds);\n\n  rounded.setSeconds(0, 0);\n  return clampToRange(rounded);\n};\n\nconst initialDateTime = selectedDateTime.value ?? createDefaultDraftDateTime();\nconst draftDateTime = ref(initialDateTime);\nconst focusedDate = ref(startOfDay(initialDateTime));\nconst viewMonth = ref(startOfMonth(initialDateTime));\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  't-date-time-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDateTime.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDateTime.value);\n});\n\nconst draftPreview = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    month: 'long',\n    year: 'numeric',\n  }).format(draftDateTime.value),\n);\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst minuteStep = computed(() => resolveMinuteStep(props.step));\n\nconst minuteValues = computed(() => {\n  const values = new Set<number>();\n\n  for (let minute = 0; minute < 60; minute += minuteStep.value) {\n    values.add(minute);\n  }\n\n  values.add(draftDateTime.value.getMinutes());\n\n  return [...values].sort((left, right) => left - right);\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  const dayStart = startOfDay(date);\n  const dayEnd = endOfDay(date);\n\n  if (minDateTime.value && dayEnd < minDateTime.value) {\n    return true;\n  }\n\n  if (maxDateTime.value && dayStart > maxDateTime.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst isDateTimeDisabled = (value: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDateTime.value && value < minDateTime.value) {\n    return true;\n  }\n\n  if (maxDateTime.value && value > maxDateTime.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nconst syncDraftState = (dateTime: Date) => {\n  const nextValue = clampToRange(dateTime);\n  draftDateTime.value = nextValue;\n  syncCalendarView(nextValue);\n};\n\nwatch(\n  selectedDateTime,\n  (value) => {\n    if (isOpen.value) {\n      return;\n    }\n\n    syncDraftState(value ?? createDefaultDraftDateTime());\n  },\n  { immediate: true },\n);\n\nconst draftDate = computed(() => startOfDay(draftDateTime.value));\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, draftDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDateTime.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDateTime.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDateTime.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDateTime.value);\n});\n\nconst isTimeOptionEnabled = (hour: number, minute: number) => {\n  const candidate = setTimePart(draftDateTime.value, hour, minute);\n  return !isDateTimeDisabled(candidate);\n};\n\nconst hourOptions = computed<TimeOption[]>(() =>\n  Array.from({ length: 24 }, (_, hour) => ({\n    disabled: !minuteValues.value.some((minute) => isTimeOptionEnabled(hour, minute)),\n    label: formatPart(hour),\n    value: hour,\n  })),\n);\n\nconst minuteOptions = computed<TimeOption[]>(() =>\n  minuteValues.value.map((minute) => ({\n    disabled: !isTimeOptionEnabled(draftDateTime.value.getHours(), minute),\n    label: formatPart(minute),\n    value: minute,\n  })),\n);\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncDraftState(selectedDateTime.value ?? createDefaultDraftDateTime());\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const candidate = clampToRange(setDatePart(draftDateTime.value, date));\n  draftDateTime.value = candidate;\n  syncCalendarView(candidate);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst updateHour = (event: Event) => {\n  const nextHour = Number.parseInt((event.target as HTMLSelectElement).value, 10);\n  const currentMinute = draftDateTime.value.getMinutes();\n\n  if (Number.isNaN(nextHour)) {\n    return;\n  }\n\n  const availableMinutes = minuteValues.value.filter((minute) =>\n    isTimeOptionEnabled(nextHour, minute),\n  );\n\n  if (!availableMinutes.length) {\n    return;\n  }\n\n  const nextMinute = availableMinutes.includes(currentMinute)\n    ? currentMinute\n    : availableMinutes[0];\n\n  draftDateTime.value = setTimePart(draftDateTime.value, nextHour, nextMinute);\n};\n\nconst updateMinute = (event: Event) => {\n  const nextMinute = Number.parseInt((event.target as HTMLSelectElement).value, 10);\n  const nextHour = draftDateTime.value.getHours();\n\n  if (Number.isNaN(nextMinute) || !isTimeOptionEnabled(nextHour, nextMinute)) {\n    return;\n  }\n\n  draftDateTime.value = setTimePart(draftDateTime.value, nextHour, nextMinute);\n};\n\nconst commitDraft = () => {\n  const value = toDateTimeValue(draftDateTime.value);\n\n  emit('update:modelValue', value);\n  emit('change', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst clearSelection = () => {\n  emit('update:modelValue', '');\n  emit('change', '');\n  emit('select', '');\n  closeCalendar(true);\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger t-date-time-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? pickerId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDateTime ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <TSpinner\n            v-if=\"loading\"\n            size=\"sm\"\n            label=\"Loading\"\n          />\n          <CalendarIcon\n            v-else\n            v-bind=\"treeIconDefaults\"\n          />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"pickerId\"\n        class=\"t-date-picker__content t-date-time-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-time-picker__calendar\">\n          <div class=\"t-date-picker__header\">\n            <button\n              type=\"button\"\n              class=\"t-date-picker__nav\"\n              :disabled=\"!canMovePrev\"\n              aria-label=\"Previous month\"\n              @click=\"moveCalendar(-1)\"\n            >\n              <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n            </button>\n\n            <p\n              :id=\"captionId\"\n              class=\"t-date-picker__month\"\n            >\n              {{ monthLabel }}\n            </p>\n\n            <button\n              type=\"button\"\n              class=\"t-date-picker__nav\"\n              :disabled=\"!canMoveNext\"\n              aria-label=\"Next month\"\n              @click=\"moveCalendar(1)\"\n            >\n              <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n\n          <div\n            class=\"t-date-picker__weekdays\"\n            aria-hidden=\"true\"\n          >\n            <span\n              v-for=\"label in weekdayLabels\"\n              :key=\"label\"\n              class=\"t-date-picker__weekday\"\n            >\n              {{ label }}\n            </span>\n          </div>\n\n          <div\n            class=\"t-date-picker__grid\"\n            role=\"grid\"\n            :aria-labelledby=\"captionId\"\n          >\n            <div\n              v-for=\"(week, weekIndex) in cells\"\n              :key=\"weekIndex\"\n              class=\"t-date-picker__row\"\n              role=\"row\"\n            >\n              <div\n                v-for=\"cell in week\"\n                :key=\"cell.key\"\n                class=\"t-date-picker__cell\"\n                role=\"gridcell\"\n                :aria-selected=\"cell.isSelected\"\n              >\n                <button\n                  :ref=\"(element) => setDayRef(element, cell.key)\"\n                  type=\"button\"\n                  class=\"t-date-picker__day\"\n                  :class=\"{\n                    'is-muted': !cell.inMonth,\n                    'is-selected': cell.isSelected,\n                    'is-today': cell.isToday,\n                  }\"\n                  :data-date=\"cell.key\"\n                  :tabindex=\"cell.isFocused ? 0 : -1\"\n                  :disabled=\"cell.disabled\"\n                  :aria-pressed=\"cell.isSelected\"\n                  @click=\"selectDate(cell.date)\"\n                  @keydown=\"onDayKeydown($event, cell.date)\"\n                >\n                  {{ cell.dayLabel }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"t-date-time-picker__summary\">\n          <p class=\"t-date-time-picker__eyebrow\">\n            Selected slot\n          </p>\n          <p class=\"t-date-time-picker__summary-value\">\n            {{ draftPreview }}\n          </p>\n        </div>\n\n        <div class=\"t-date-time-picker__time\">\n          <label class=\"t-date-time-picker__time-field\">\n            <span class=\"t-date-time-picker__time-label\">Hour</span>\n            <select\n              class=\"t-date-time-picker__select\"\n              :value=\"draftDateTime.getHours()\"\n              aria-label=\"Select hour\"\n              @change=\"updateHour\"\n            >\n              <option\n                v-for=\"option in hourOptions\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n          </label>\n\n          <label class=\"t-date-time-picker__time-field\">\n            <span class=\"t-date-time-picker__time-label\">Minute</span>\n            <select\n              class=\"t-date-time-picker__select\"\n              :value=\"draftDateTime.getMinutes()\"\n              aria-label=\"Select minute\"\n              @change=\"updateMinute\"\n            >\n              <option\n                v-for=\"option in minuteOptions\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n          </label>\n        </div>\n\n        <div class=\"t-date-time-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"t-button t-button--ghost t-button--sm\"\n            @click=\"clearSelection\"\n          >\n            Clear\n          </button>\n          <button\n            type=\"button\"\n            class=\"t-button t-button--solid t-button--sm\"\n            @click=\"commitDraft\"\n          >\n            Apply\n          </button>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TDateTimePicker.cjs","names":[],"sources":["../../src/components/TDateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\ninterface TimeOption {\n  disabled: boolean;\n  label: string;\n  value: number;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst dateOnlyPattern = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\nconst dateTimePattern = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2})(?::(\\d{2}))?$/;\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n    step?: number;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: 'Select date and time',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n    step: 60,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  change: [value: string];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nconst cloneDate = (value: Date) => new Date(value.getTime());\n\nconst formatPart = (value: number) => `${value}`.padStart(2, '0');\n\nconst endOfDay = (date: Date) =>\n  new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);\n\nconst parseBoundaryValue = (\n  value: string | null | undefined,\n  boundary: 'exact' | 'start' | 'end' = 'exact',\n) => {\n  if (!value) {\n    return null;\n  }\n\n  const dateOnlyMatch = value.match(dateOnlyPattern);\n  if (dateOnlyMatch) {\n    const [, yearToken, monthToken, dayToken] = dateOnlyMatch;\n    const year = Number.parseInt(yearToken, 10);\n    const month = Number.parseInt(monthToken, 10);\n    const day = Number.parseInt(dayToken, 10);\n    const hour = boundary === 'end' ? 23 : 0;\n    const minute = boundary === 'end' ? 59 : 0;\n    const second = boundary === 'end' ? 59 : 0;\n    const millisecond = boundary === 'end' ? 999 : 0;\n    const date = new Date(year, month - 1, day, hour, minute, second, millisecond);\n\n    if (\n      Number.isNaN(date.getTime()) ||\n      date.getFullYear() !== year ||\n      date.getMonth() !== month - 1 ||\n      date.getDate() !== day\n    ) {\n      return null;\n    }\n\n    return date;\n  }\n\n  const dateTimeMatch = value.match(dateTimePattern);\n  if (!dateTimeMatch) {\n    return null;\n  }\n\n  const [, yearToken, monthToken, dayToken, hourToken, minuteToken, secondToken] =\n    dateTimeMatch;\n  const year = Number.parseInt(yearToken, 10);\n  const month = Number.parseInt(monthToken, 10);\n  const day = Number.parseInt(dayToken, 10);\n  const hour = Number.parseInt(hourToken, 10);\n  const minute = Number.parseInt(minuteToken, 10);\n  const second = secondToken ? Number.parseInt(secondToken, 10) : 0;\n  const date = new Date(year, month - 1, day, hour, minute, second, 0);\n\n  if (\n    Number.isNaN(date.getTime()) ||\n    date.getFullYear() !== year ||\n    date.getMonth() !== month - 1 ||\n    date.getDate() !== day ||\n    date.getHours() !== hour ||\n    date.getMinutes() !== minute ||\n    date.getSeconds() !== second\n  ) {\n    return null;\n  }\n\n  return date;\n};\n\nconst toDateTimeValue = (date: Date) =>\n  `${toDateValue(date)}T${formatPart(date.getHours())}:${formatPart(date.getMinutes())}`;\n\nconst setDatePart = (source: Date, targetDate: Date) =>\n  new Date(\n    targetDate.getFullYear(),\n    targetDate.getMonth(),\n    targetDate.getDate(),\n    source.getHours(),\n    source.getMinutes(),\n    0,\n    0,\n  );\n\nconst setTimePart = (source: Date, hour: number, minute: number) =>\n  new Date(\n    source.getFullYear(),\n    source.getMonth(),\n    source.getDate(),\n    hour,\n    minute,\n    0,\n    0,\n  );\n\nconst resolveMinuteStep = (step: number) => {\n  if (!Number.isFinite(step) || step <= 0 || step % 60 !== 0) {\n    return 1;\n  }\n\n  const minuteStep = step / 60;\n  return minuteStep >= 60 ? 1 : minuteStep;\n};\n\nconst today = startOfDay(new Date());\nconst selectedDateTime = computed(() => parseBoundaryValue(props.modelValue, 'exact'));\nconst minDateTime = computed(() => parseBoundaryValue(props.min, 'start'));\nconst maxDateTime = computed(() => parseBoundaryValue(props.max, 'end'));\nconst pickerId = props.id ?? createId('t-date-time-picker');\nconst captionId = `${pickerId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\n\nconst clampToRange = (value: Date) => {\n  let nextValue = cloneDate(value);\n\n  if (minDateTime.value && nextValue < minDateTime.value) {\n    nextValue = cloneDate(minDateTime.value);\n  }\n\n  if (maxDateTime.value && nextValue > maxDateTime.value) {\n    nextValue = cloneDate(maxDateTime.value);\n  }\n\n  return nextValue;\n};\n\nconst createDefaultDraftDateTime = () => {\n  const reference = new Date();\n  const stepMilliseconds = Math.max(props.step, 60) * 1000;\n  const rounded = new Date(Math.ceil(reference.getTime() / stepMilliseconds) * stepMilliseconds);\n\n  rounded.setSeconds(0, 0);\n  return clampToRange(rounded);\n};\n\nconst initialDateTime = selectedDateTime.value ?? createDefaultDraftDateTime();\nconst draftDateTime = ref(initialDateTime);\nconst focusedDate = ref(startOfDay(initialDateTime));\nconst viewMonth = ref(startOfMonth(initialDateTime));\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  't-date-time-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst triggerText = computed(() => {\n  if (!selectedDateTime.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDateTime.value);\n});\n\nconst draftPreview = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    month: 'long',\n    year: 'numeric',\n  }).format(draftDateTime.value),\n);\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst minuteStep = computed(() => resolveMinuteStep(props.step));\n\nconst minuteValues = computed(() => {\n  const values = new Set<number>();\n\n  for (let minute = 0; minute < 60; minute += minuteStep.value) {\n    values.add(minute);\n  }\n\n  values.add(draftDateTime.value.getMinutes());\n\n  return [...values].sort((left, right) => left - right);\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  const dayStart = startOfDay(date);\n  const dayEnd = endOfDay(date);\n\n  if (minDateTime.value && dayEnd < minDateTime.value) {\n    return true;\n  }\n\n  if (maxDateTime.value && dayStart > maxDateTime.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst isDateTimeDisabled = (value: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDateTime.value && value < minDateTime.value) {\n    return true;\n  }\n\n  if (maxDateTime.value && value > maxDateTime.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nconst syncDraftState = (dateTime: Date) => {\n  const nextValue = clampToRange(dateTime);\n  draftDateTime.value = nextValue;\n  syncCalendarView(nextValue);\n};\n\nwatch(\n  selectedDateTime,\n  (value) => {\n    if (isOpen.value) {\n      return;\n    }\n\n    syncDraftState(value ?? createDefaultDraftDateTime());\n  },\n  { immediate: true },\n);\n\nconst draftDate = computed(() => startOfDay(draftDateTime.value));\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, draftDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDateTime.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDateTime.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDateTime.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDateTime.value);\n});\n\nconst isTimeOptionEnabled = (hour: number, minute: number) => {\n  const candidate = setTimePart(draftDateTime.value, hour, minute);\n  return !isDateTimeDisabled(candidate);\n};\n\nconst hourOptions = computed<TimeOption[]>(() =>\n  Array.from({ length: 24 }, (_, hour) => ({\n    disabled: !minuteValues.value.some((minute) => isTimeOptionEnabled(hour, minute)),\n    label: formatPart(hour),\n    value: hour,\n  })),\n);\n\nconst minuteOptions = computed<TimeOption[]>(() =>\n  minuteValues.value.map((minute) => ({\n    disabled: !isTimeOptionEnabled(draftDateTime.value.getHours(), minute),\n    label: formatPart(minute),\n    value: minute,\n  })),\n);\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncDraftState(selectedDateTime.value ?? createDefaultDraftDateTime());\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const candidate = clampToRange(setDatePart(draftDateTime.value, date));\n  draftDateTime.value = candidate;\n  syncCalendarView(candidate);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst updateHour = (event: Event) => {\n  const nextHour = Number.parseInt((event.target as HTMLSelectElement).value, 10);\n  const currentMinute = draftDateTime.value.getMinutes();\n\n  if (Number.isNaN(nextHour)) {\n    return;\n  }\n\n  const availableMinutes = minuteValues.value.filter((minute) =>\n    isTimeOptionEnabled(nextHour, minute),\n  );\n\n  if (!availableMinutes.length) {\n    return;\n  }\n\n  const nextMinute = availableMinutes.includes(currentMinute)\n    ? currentMinute\n    : availableMinutes[0];\n\n  draftDateTime.value = setTimePart(draftDateTime.value, nextHour, nextMinute);\n};\n\nconst updateMinute = (event: Event) => {\n  const nextMinute = Number.parseInt((event.target as HTMLSelectElement).value, 10);\n  const nextHour = draftDateTime.value.getHours();\n\n  if (Number.isNaN(nextMinute) || !isTimeOptionEnabled(nextHour, nextMinute)) {\n    return;\n  }\n\n  draftDateTime.value = setTimePart(draftDateTime.value, nextHour, nextMinute);\n};\n\nconst commitDraft = () => {\n  const value = toDateTimeValue(draftDateTime.value);\n\n  emit('update:modelValue', value);\n  emit('change', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst clearSelection = () => {\n  emit('update:modelValue', '');\n  emit('change', '');\n  emit('select', '');\n  closeCalendar(true);\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger t-date-time-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? pickerId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDateTime ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <TSpinner\n            v-if=\"loading\"\n            size=\"sm\"\n            label=\"Loading\"\n          />\n          <CalendarIcon\n            v-else\n            v-bind=\"treeIconDefaults\"\n          />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"pickerId\"\n        class=\"t-date-picker__content t-date-time-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-time-picker__calendar\">\n          <div class=\"t-date-picker__header\">\n            <button\n              type=\"button\"\n              class=\"t-date-picker__nav\"\n              :disabled=\"!canMovePrev\"\n              aria-label=\"Previous month\"\n              @click=\"moveCalendar(-1)\"\n            >\n              <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n            </button>\n\n            <p\n              :id=\"captionId\"\n              class=\"t-date-picker__month\"\n            >\n              {{ monthLabel }}\n            </p>\n\n            <button\n              type=\"button\"\n              class=\"t-date-picker__nav\"\n              :disabled=\"!canMoveNext\"\n              aria-label=\"Next month\"\n              @click=\"moveCalendar(1)\"\n            >\n              <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n            </button>\n          </div>\n\n          <div\n            class=\"t-date-picker__weekdays\"\n            aria-hidden=\"true\"\n          >\n            <span\n              v-for=\"label in weekdayLabels\"\n              :key=\"label\"\n              class=\"t-date-picker__weekday\"\n            >\n              {{ label }}\n            </span>\n          </div>\n\n          <div\n            class=\"t-date-picker__grid\"\n            role=\"grid\"\n            :aria-labelledby=\"captionId\"\n          >\n            <div\n              v-for=\"(week, weekIndex) in cells\"\n              :key=\"weekIndex\"\n              class=\"t-date-picker__row\"\n              role=\"row\"\n            >\n              <div\n                v-for=\"cell in week\"\n                :key=\"cell.key\"\n                class=\"t-date-picker__cell\"\n                role=\"gridcell\"\n                :aria-selected=\"cell.isSelected\"\n              >\n                <button\n                  :ref=\"(element) => setDayRef(element, cell.key)\"\n                  type=\"button\"\n                  class=\"t-date-picker__day\"\n                  :class=\"{\n                    'is-muted': !cell.inMonth,\n                    'is-selected': cell.isSelected,\n                    'is-today': cell.isToday,\n                  }\"\n                  :data-date=\"cell.key\"\n                  :tabindex=\"cell.isFocused ? 0 : -1\"\n                  :disabled=\"cell.disabled\"\n                  :aria-pressed=\"cell.isSelected\"\n                  @click=\"selectDate(cell.date)\"\n                  @keydown=\"onDayKeydown($event, cell.date)\"\n                >\n                  {{ cell.dayLabel }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"t-date-time-picker__summary\">\n          <p class=\"t-date-time-picker__eyebrow\">\n            Selected slot\n          </p>\n          <p class=\"t-date-time-picker__summary-value\">\n            {{ draftPreview }}\n          </p>\n        </div>\n\n        <div class=\"t-date-time-picker__time\">\n          <label class=\"t-date-time-picker__time-field\">\n            <span class=\"t-date-time-picker__time-label\">Hour</span>\n            <select\n              class=\"t-date-time-picker__select\"\n              :value=\"draftDateTime.getHours()\"\n              aria-label=\"Select hour\"\n              @change=\"updateHour\"\n            >\n              <option\n                v-for=\"option in hourOptions\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n          </label>\n\n          <label class=\"t-date-time-picker__time-field\">\n            <span class=\"t-date-time-picker__time-label\">Minute</span>\n            <select\n              class=\"t-date-time-picker__select\"\n              :value=\"draftDateTime.getMinutes()\"\n              aria-label=\"Select minute\"\n              @change=\"updateMinute\"\n            >\n              <option\n                v-for=\"option in minuteOptions\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n                :disabled=\"option.disabled\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n          </label>\n        </div>\n\n        <div class=\"t-date-time-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"t-button t-button--ghost t-button--sm\"\n            @click=\"clearSelection\"\n          >\n            Clear\n          </button>\n          <button\n            type=\"button\"\n            class=\"t-button t-button--solid t-button--sm\"\n            @click=\"commitDraft\"\n          >\n            Apply\n          </button>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}