@hina-ui/vue 1.7.12 → 1.7.14

package/dist/shared/primitives/date/calendar-view.ts

@@ -0,0 +1,264 @@
+import { isEqualMonth, isSameDay, isSameMonth, type DateValue } from '@internationalized/date'
+import { createMonths, type Month } from './calendar'
+import { getDaysInMonth, isAfter, isBefore, toDate } from './comparators'
+import type { Formatter } from './formatter'
+
+export type Matcher = (date: DateValue) => boolean
+export type PageFunction = (date: DateValue) => DateValue
+export type WeekDayFormat = 'narrow' | 'short' | 'long'
+
+export interface CalendarGridOptions {
+  weekStartsOn: number
+  locale: string
+  fixedWeeks: boolean
+  numberOfMonths: number
+}
+
+export interface CalendarBounds {
+  minValue?: DateValue
+  maxValue?: DateValue
+  disabled: boolean
+}
+
+export function buildCalendarGrid(dateObj: DateValue, options: CalendarGridOptions) {
+  return createMonths({ dateObj, ...options }) as Month<DateValue>[]
+}
+
+export function isCalendarDateSelected(
+  date: DateValue | DateValue[] | undefined,
+  dateObj: DateValue,
+) {
+  if (Array.isArray(date)) return date.some(item => isSameDay(item, dateObj))
+  if (!date) return false
+  return isSameDay(date, dateObj)
+}
+
+export function isCalendarSelectionInvalid(
+  date: DateValue | DateValue[] | undefined,
+  isDateDisabled: Matcher | undefined,
+  isDateUnavailable: Matcher | undefined,
+) {
+  if (Array.isArray(date)) {
+    for (const dateObj of date) {
+      if (isDateDisabled?.(dateObj)) return true
+      if (isDateUnavailable?.(dateObj)) return true
+    }
+    return false
+  }
+  if (!date) return false
+  return !!(isDateDisabled?.(date) || isDateUnavailable?.(date))
+}
+
+export function hasCalendarSelection(date: DateValue | DateValue[] | undefined) {
+  return Array.isArray(date) ? date.length > 0 : !!date
+}
+
+export function isCalendarSelectionDisabled(
+  date: DateValue | DateValue[] | undefined,
+  isDateDisabled: Matcher | undefined,
+) {
+  if (Array.isArray(date)) return date.some(dateObj => isDateDisabled?.(dateObj))
+  if (!date) return false
+  return !!isDateDisabled?.(date)
+}
+
+function nextDisabledProbe(lastPeriodInView: DateValue, nextPageFunc: PageFunction) {
+  const firstPeriodOfNextPage = nextPageFunc(lastPeriodInView)
+  const diff = firstPeriodOfNextPage.compare(lastPeriodInView)
+  const duration: { day?: number; month?: number } = {}
+  if (diff >= 7) duration.day = 1
+  if (diff >= getDaysInMonth(lastPeriodInView)) duration.month = 1
+  return firstPeriodOfNextPage.set({ ...duration })
+}
+
+function prevDisabledProbe(firstPeriodInView: DateValue, prevPageFunc: PageFunction) {
+  const lastPeriodOfPrevPage = prevPageFunc(firstPeriodInView)
+  const diff = firstPeriodInView.compare(lastPeriodOfPrevPage)
+  const duration: { day?: number; month?: number } = {}
+  if (diff >= 7) duration.day = 35
+  if (diff >= getDaysInMonth(firstPeriodInView)) duration.month = 13
+  return lastPeriodOfPrevPage.set({ ...duration })
+}
+
+export function isCalendarNextDisabled(
+  grid: Month<DateValue>[],
+  bounds: CalendarBounds,
+  nextPage: PageFunction | undefined,
+  nextPageFunc?: PageFunction,
+) {
+  if (!bounds.maxValue || !grid.length) return false
+  if (bounds.disabled) return true
+  const lastPeriodInView = grid.at(-1)!.value
+  if (!nextPageFunc && !nextPage)
+    return isAfter(lastPeriodInView.add({ months: 1 }).set({ day: 1 }), bounds.maxValue)
+  return isAfter(nextDisabledProbe(lastPeriodInView, (nextPageFunc || nextPage)!), bounds.maxValue)
+}
+
+export function isCalendarPrevDisabled(
+  grid: Month<DateValue>[],
+  bounds: CalendarBounds,
+  prevPage: PageFunction | undefined,
+  prevPageFunc?: PageFunction,
+) {
+  if (!bounds.minValue || !grid.length) return false
+  if (bounds.disabled) return true
+  const firstPeriodInView = grid[0]!.value
+  if (!prevPageFunc && !prevPage)
+    return isBefore(firstPeriodInView.subtract({ months: 1 }).set({ day: 35 }), bounds.minValue)
+  return isBefore(
+    prevDisabledProbe(firstPeriodInView, (prevPageFunc || prevPage)!),
+    bounds.minValue,
+  )
+}
+
+export function isCalendarDateDisabled(
+  dateObj: DateValue,
+  bounds: CalendarBounds,
+  isDateDisabled: Matcher | undefined,
+) {
+  if (isDateDisabled?.(dateObj) || bounds.disabled) return true
+  if (bounds.maxValue && isAfter(dateObj, bounds.maxValue)) return true
+  if (bounds.minValue && isBefore(dateObj, bounds.minValue)) return true
+  return false
+}
+
+export function isOutsideCalendarView(grid: Month<DateValue>[], date: DateValue) {
+  return !grid.some(month => isEqualMonth(date, month.value))
+}
+
+export function turnCalendarPage(
+  direction: 1 | -1,
+  grid: Month<DateValue>[],
+  options: CalendarGridOptions & {
+    pagedNavigation: boolean
+    page: PageFunction | undefined
+  },
+  pageFunc?: PageFunction,
+): { grid: Month<DateValue>[]; placeholder: DateValue } {
+  const firstDate = grid[0]!.value
+  if (!pageFunc && !options.page) {
+    const months = options.pagedNavigation ? options.numberOfMonths : 1
+    const newDate = direction > 0 ? firstDate.add({ months }) : firstDate.subtract({ months })
+    const newGrid = buildCalendarGrid(newDate, options)
+    return { grid: newGrid, placeholder: newGrid[0]!.value.set({ day: 1 }) }
+  }
+  const newDate = (pageFunc || options.page)!(firstDate)
+  const newGrid = buildCalendarGrid(newDate, options)
+  const duration: { day?: number; month?: number } = {}
+  if (!pageFunc) {
+    const diff =
+      direction > 0 ? newGrid[0]!.value.compare(firstDate) : firstDate.compare(newGrid[0]!.value)
+    if (diff >= getDaysInMonth(firstDate)) duration.day = 1
+    if (diff >= 365) duration.month = 1
+  }
+  return { grid: newGrid, placeholder: newGrid[0]!.value.set({ ...duration }) }
+}
+
+export function calendarWeekdays(
+  grid: Month<DateValue>[],
+  formatter: Formatter,
+  weekdayFormat: WeekDayFormat,
+) {
+  if (!grid.length) return []
+  return grid[0]!.rows[0]!.map(date => formatter.dayOfWeek(toDate(date), weekdayFormat))
+}
+
+export function calendarHeadingOptions(placeholder: DateValue) {
+  const options: Intl.DateTimeFormatOptions = { calendar: placeholder.calendar.identifier }
+  if (placeholder.calendar.identifier === 'gregory' && placeholder.era === 'BC')
+    options.era = 'short'
+  return options
+}
+
+export function calendarHeading(
+  grid: Month<DateValue>[],
+  formatter: Formatter,
+  locale: string,
+  options: Intl.DateTimeFormatOptions,
+) {
+  if (!grid.length) return ''
+  if (locale !== formatter.getLocale()) formatter.setLocale(locale)
+  if (grid.length === 1) return `${formatter.fullMonthAndYear(toDate(grid[0]!.value), options)}`
+  const startMonth = toDate(grid[0]!.value)
+  const endMonth = toDate(grid.at(-1)!.value)
+  const startMonthName = formatter.fullMonth(startMonth, options)
+  const endMonthName = formatter.fullMonth(endMonth, options)
+  const startMonthYear = formatter.fullYear(startMonth, options)
+  const endMonthYear = formatter.fullYear(endMonth, options)
+  return startMonthYear === endMonthYear
+    ? `${startMonthName} - ${endMonthName} ${endMonthYear}`
+    : `${startMonthName} ${startMonthYear} - ${endMonthName} ${endMonthYear}`
+}
+
+export function calendarLabel(label: string | undefined, heading: string) {
+  return `${label ?? 'Event Date'}, ${heading}`
+}
+
+export function firstFocusableCalendarDate(
+  grid: Month<DateValue>[],
+  minValue: DateValue | undefined,
+  isUnfocusable: Matcher,
+) {
+  for (const month of grid) {
+    if (minValue && isBefore(month.value, minValue)) continue
+    const daysInMonth = getDaysInMonth(month.value)
+    const startDay = minValue && isSameMonth(minValue, month.value) ? minValue.day : 1
+    for (let day = startDay; day <= daysInMonth; day++) {
+      const date = month.value.set({ day })
+      if (isUnfocusable(date)) continue
+      return date
+    }
+  }
+}
+
+export function isCalendarFocusedDate(input: {
+  day: DateValue
+  outsideView: boolean
+  disabled: boolean
+  rootDisabled: boolean
+  placeholderFocusable: boolean
+  placeholder: DateValue
+  hasSelectedDate: boolean
+  selectedDateDisabled: boolean
+  firstFocusableDate: DateValue | undefined
+}) {
+  if (input.outsideView || input.disabled) return false
+  if (!input.rootDisabled && input.placeholderFocusable && isSameDay(input.day, input.placeholder))
+    return true
+  if ((!input.hasSelectedDate || input.selectedDateDisabled) && !input.placeholderFocusable)
+    return !!input.firstFocusableDate && isSameDay(input.day, input.firstFocusableDate)
+  return false
+}
+
+export function calendarCellTabIndex(focused: boolean, outsideView: boolean, disabled: boolean) {
+  return focused ? 0 : outsideView || disabled ? undefined : -1
+}
+
+export function calendarShiftCandidate(
+  day: DateValue,
+  add: number,
+  minValue: DateValue | undefined,
+  maxValue: DateValue | undefined,
+) {
+  const candidate = day.add({ days: add })
+  if (
+    (minValue && candidate.compare(minValue) < 0) ||
+    (maxValue && candidate.compare(maxValue) > 0)
+  )
+    return undefined
+  return candidate
+}
+
+export function calendarArrowShift(code: string, dir: 'ltr' | 'rtl', rowLength = 7) {
+  const sign = dir === 'rtl' ? -1 : 1
+  switch (code) {
+    case 'ArrowRight':
+      return sign
+    case 'ArrowLeft':
+      return -sign
+    case 'ArrowUp':
+      return -rowLength
+    case 'ArrowDown':
+      return rowLength
+  }
+}

package/dist/shared/primitives/date/calendar.ts

@@ -0,0 +1,126 @@
+import {
+  CalendarDate,
+  endOfMonth,
+  getDayOfWeek,
+  startOfMonth,
+  startOfYear,
+  type DateValue,
+} from '@internationalized/date'
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek } from './comparators'
+import { chunk } from './utils'
+
+export interface Month<T> {
+  value: DateValue
+  cells: T[]
+  rows: T[][]
+}
+
+export interface Grid<T> {
+  value: DateValue
+  cells: T[]
+  rows: T[][]
+}
+
+export function getDaysBetween(start: DateValue, end: DateValue) {
+  const days: DateValue[] = []
+  let dCurrent = start.add({ days: 1 })
+  const dEnd = end
+  while (dCurrent.compare(dEnd) < 0) {
+    days.push(dCurrent)
+    dCurrent = dCurrent.add({ days: 1 })
+  }
+  return days
+}
+
+interface CreateMonthProps {
+  dateObj: DateValue
+  weekStartsOn: number
+  fixedWeeks: boolean
+  locale: string
+}
+
+export function createMonth(props: CreateMonthProps): Month<DateValue> {
+  const { dateObj, weekStartsOn, fixedWeeks, locale } = props
+  const daysInMonth = getDaysInMonth(dateObj)
+  const datesArray = Array.from({ length: daysInMonth }, (_, i) => dateObj.set({ day: i + 1 }))
+  const firstDayOfMonth = startOfMonth(dateObj)
+  const lastDayOfMonth = endOfMonth(dateObj)
+  const lastSunday = getLastFirstDayOfWeek(firstDayOfMonth, weekStartsOn, locale)
+  const nextSaturday = getNextLastDayOfWeek(lastDayOfMonth, weekStartsOn, locale)
+  const lastMonthDays = getDaysBetween(lastSunday.subtract({ days: 1 }), firstDayOfMonth)
+  const nextMonthDays = getDaysBetween(lastDayOfMonth, nextSaturday.add({ days: 1 }))
+  const totalDays = lastMonthDays.length + datesArray.length + nextMonthDays.length
+  if (fixedWeeks && totalDays < 42) {
+    const extraDays = 42 - totalDays
+    let startFrom = nextMonthDays.at(-1)
+    if (!startFrom) startFrom = endOfMonth(dateObj)
+    const from = startFrom
+    const extraDaysArray = Array.from({ length: extraDays }, (_, i) => from.add({ days: i + 1 }))
+    nextMonthDays.push(...extraDaysArray)
+  }
+  const allDays = lastMonthDays.concat(datesArray, nextMonthDays)
+  return { value: dateObj, cells: allDays, rows: chunk(allDays, 7) }
+}
+
+export function startOfDecade(dateObj: DateValue) {
+  return startOfYear(
+    dateObj
+      .subtract({ years: dateObj.year - Math.floor(dateObj.year / 10) * 10 })
+      .set({ day: 1, month: 1 }),
+  )
+}
+
+export function createYear(props: {
+  dateObj: DateValue
+  numberOfMonths?: number
+  pagedNavigation?: boolean
+}) {
+  const { dateObj, numberOfMonths = 1, pagedNavigation = false } = props
+  if (numberOfMonths && pagedNavigation)
+    return Array.from({ length: Math.floor(12 / numberOfMonths) }, (_, i) =>
+      startOfMonth(dateObj.set({ month: i * numberOfMonths + 1 })),
+    )
+  return Array.from({ length: 12 }, (_, i) => startOfMonth(dateObj.set({ month: i + 1 })))
+}
+
+export function createMonths(
+  props: CreateMonthProps & { numberOfMonths: number },
+): Month<DateValue>[] {
+  const { numberOfMonths, dateObj, ...monthProps } = props
+  const months: Month<DateValue>[] = []
+  if (!numberOfMonths || numberOfMonths === 1) {
+    months.push(createMonth({ ...monthProps, dateObj }))
+    return months
+  }
+  months.push(createMonth({ ...monthProps, dateObj }))
+  for (let i = 1; i < numberOfMonths; i++) {
+    const nextMonth = dateObj.add({ months: i })
+    months.push(createMonth({ ...monthProps, dateObj: nextMonth }))
+  }
+  return months
+}
+
+export function createMonthGrid(props: { dateObj: DateValue }): Grid<DateValue> {
+  const { dateObj } = props
+  const months = createYear({ dateObj })
+  return { value: dateObj, cells: months, rows: chunk(months, 4) }
+}
+
+export function createYearGrid(props: {
+  dateObj: DateValue
+  yearsPerPage?: number
+  decadeAligned?: boolean
+}): Grid<DateValue> {
+  const { dateObj, yearsPerPage = 12, decadeAligned = true } = props
+  const startYear = decadeAligned ? startOfDecade(dateObj).year : dateObj.year
+  const years = Array.from({ length: yearsPerPage }, (_, i) =>
+    startOfYear(dateObj.set({ year: startYear + i })),
+  )
+  return { value: years[0]!, cells: years, rows: chunk(years, 4) }
+}
+
+export function getWeekStartsOn(locale: string) {
+  const monday = new CalendarDate(2025, 1, 6)
+  const dayOfWeek = getDayOfWeek(monday, locale)
+  return (1 - dayOfWeek + 7) % 7
+}

package/dist/shared/primitives/date/comparators.ts

@@ -0,0 +1,144 @@
+import {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  Time,
+  ZonedDateTime,
+  createCalendar,
+  getDayOfWeek,
+  getLocalTimeZone,
+  toCalendar,
+  type DateValue,
+} from '@internationalized/date'
+
+export type Granularity = 'day' | 'hour' | 'minute' | 'second'
+export type HourCycle = 12 | 24 | undefined
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime
+
+export function toDate(dateValue: DateValue, tz = getLocalTimeZone()) {
+  if (isZonedDateTime(dateValue)) return dateValue.toDate()
+  return dateValue.toDate(tz)
+}
+
+export function isCalendarDateTime(dateValue: unknown): dateValue is CalendarDateTime {
+  return dateValue instanceof CalendarDateTime
+}
+
+export function isZonedDateTime(dateValue: unknown): dateValue is ZonedDateTime {
+  return dateValue instanceof ZonedDateTime
+}
+
+export function hasTime(dateValue: DateValue) {
+  return isCalendarDateTime(dateValue) || isZonedDateTime(dateValue)
+}
+
+export function getDaysInMonth(date: DateValue) {
+  return date.set({ day: 100 }).day
+}
+
+export function isBefore(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) < 0
+}
+
+export function isAfter(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) > 0
+}
+
+export function isBeforeOrSame(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) <= 0
+}
+
+export function isAfterOrSame(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) >= 0
+}
+
+export function isBetweenInclusive(date: DateValue, start: DateValue, end: DateValue) {
+  return isAfterOrSame(date, start) && isBeforeOrSame(date, end)
+}
+
+export function isBetween(date: DateValue, start: DateValue, end: DateValue) {
+  return isAfter(date, start) && isBefore(date, end)
+}
+
+export function getLastFirstDayOfWeek<T extends DateValue>(
+  date: T,
+  firstDayOfWeek: number,
+  locale: string,
+): T {
+  const day = getDayOfWeek(date, locale, 'sun')
+  if (firstDayOfWeek > day) return date.subtract({ days: day + 7 - firstDayOfWeek }) as T
+  if (firstDayOfWeek === day) return date
+  return date.subtract({ days: day - firstDayOfWeek }) as T
+}
+
+export function getNextLastDayOfWeek<T extends DateValue>(
+  date: T,
+  firstDayOfWeek: number,
+  locale: string,
+): T {
+  const day = getDayOfWeek(date, locale, 'sun')
+  const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1
+  if (day === lastDayOfWeek) return date
+  if (day > lastDayOfWeek) return date.add({ days: 7 - day + lastDayOfWeek }) as T
+  return date.add({ days: lastDayOfWeek - day }) as T
+}
+
+export function isSameYearMonth(a: DateValue, b: DateValue) {
+  return a.year === b.year && a.month === b.month
+}
+
+export function isSameYear(a: DateValue, b: DateValue) {
+  return a.year === b.year
+}
+
+export function areAllDaysBetweenValid(
+  start: DateValue,
+  end: DateValue,
+  isUnavailable: ((date: DateValue) => boolean) | undefined,
+  isDisabled: ((date: DateValue) => boolean) | undefined,
+  isHighlightable?: (date: DateValue) => boolean,
+) {
+  if (isUnavailable === undefined && isDisabled === undefined && isHighlightable === undefined)
+    return true
+  let dCurrent = start.add({ days: 1 })
+  if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent)) && !isHighlightable?.(dCurrent))
+    return false
+  const dEnd = end
+  while (dCurrent.compare(dEnd) < 0) {
+    dCurrent = dCurrent.add({ days: 1 })
+    if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent)) && !isHighlightable?.(dCurrent))
+      return false
+  }
+  return true
+}
+
+export function getDefaultDate(props: {
+  defaultValue?: DateValue | DateValue[]
+  defaultPlaceholder?: DateValue
+  granularity?: Granularity
+  locale?: string
+}): DateValue {
+  const { defaultValue, defaultPlaceholder, granularity = 'day', locale = 'en' } = props
+  if (Array.isArray(defaultValue) && defaultValue.length) return defaultValue.at(-1)!.copy()
+  if (defaultValue && !Array.isArray(defaultValue)) return defaultValue.copy()
+  if (defaultPlaceholder) return defaultPlaceholder.copy()
+  const date = new Date()
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const defaultFormatter = new DateFormatter(locale)
+  const calendar = createCalendar(defaultFormatter.resolvedOptions().calendar as never)
+  if (['hour', 'minute', 'second'].includes(granularity ?? 'day'))
+    return toCalendar(new CalendarDateTime(year, month, day, 0, 0, 0), calendar)
+  return toCalendar(new CalendarDate(year, month, day), calendar)
+}
+
+export function getDefaultTime(props: {
+  defaultValue?: TimeValue
+  defaultPlaceholder?: TimeValue
+}): TimeValue {
+  const { defaultValue, defaultPlaceholder } = props
+  if (defaultValue) return defaultValue.copy()
+  if (defaultPlaceholder) return defaultPlaceholder.copy()
+  return new Time(0, 0, 0)
+}