@hina-ui/vue 1.7.12 → 1.7.14

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

@@ -0,0 +1,182 @@
+import type { DateValue } from '@internationalized/date'
+import { isZonedDateTime, toDate, type Granularity, type HourCycle } from './comparators'
+import type { Formatter } from './formatter'
+import {
+  DATE_SEGMENT_PARTS,
+  EDITABLE_SEGMENT_PARTS,
+  TIME_SEGMENT_PARTS,
+  isDateSegmentPart,
+  isSegmentPart,
+  type EditableSegmentPart,
+} from './parts'
+import { getPlaceholder } from './placeholders'
+import { getOptsByGranularity, normalizeHourCycle } from './utils'
+
+export interface SegmentValueObj {
+  day?: number | null
+  month?: number | null
+  year?: number | null
+  hour?: number | null
+  minute?: number | null
+  second?: number | null
+  dayPeriod?: 'AM' | 'PM' | null
+}
+
+export type SegmentContentObj = Partial<Record<EditableSegmentPart, string>>
+
+export interface SegmentContent {
+  part: string
+  value: string
+}
+
+type DateLike = DateValue & {
+  hour?: number
+  minute?: number
+  second?: number
+}
+
+const calendarDateTimeGranularities = ['hour', 'minute', 'second']
+
+export function syncTimeSegmentValues(props: {
+  value: DateLike
+  formatter: Formatter
+}): SegmentValueObj {
+  return Object.fromEntries(
+    TIME_SEGMENT_PARTS.map(part => {
+      if (part === 'dayPeriod') return [part, props.formatter.dayPeriod(toDate(props.value))]
+      return [part, props.value[part]]
+    }),
+  )
+}
+
+export function syncSegmentValues(props: { value: DateLike; formatter: Formatter }) {
+  const { formatter } = props
+  const dateValues = DATE_SEGMENT_PARTS.map(part => [part, props.value[part]])
+  if ('hour' in props.value) {
+    const timeValues = syncTimeSegmentValues({ value: props.value, formatter })
+    return { ...Object.fromEntries(dateValues), ...timeValues } as SegmentValueObj
+  }
+  return Object.fromEntries(dateValues) as SegmentValueObj
+}
+
+export function initializeTimeSegmentValues(granularity: Granularity): SegmentValueObj {
+  return Object.fromEntries(
+    TIME_SEGMENT_PARTS.map(part => {
+      if (part === 'dayPeriod') return [part, 'AM']
+      return [part, null]
+    }).filter(([key]) => {
+      if (key === 'literal' || key === null) return false
+      if (granularity === 'minute' && key === 'second') return false
+      if (granularity === 'hour' && (key === 'second' || key === 'minute')) return false
+      return true
+    }),
+  )
+}
+
+export function initializeSegmentValues(granularity: Granularity): SegmentValueObj {
+  const initialParts = EDITABLE_SEGMENT_PARTS.map(part => {
+    if (part === 'dayPeriod') return [part, 'AM']
+    return [part, null]
+  }).filter(([key]) => {
+    if (key === 'literal' || key === null) return false
+    if (granularity === 'minute' && key === 'second') return false
+    if (granularity === 'hour' && (key === 'second' || key === 'minute')) return false
+    if (granularity === 'day')
+      return !calendarDateTimeGranularities.includes(key as string) && key !== 'dayPeriod'
+    return true
+  })
+  return Object.fromEntries(initialParts)
+}
+
+interface ContentProps {
+  granularity: Granularity
+  dateRef: DateValue
+  formatter: Formatter
+  hideTimeZone?: boolean
+  hourCycle: HourCycle
+  segmentValues: SegmentValueObj
+  locale: string
+  isTimeValue?: boolean
+}
+
+function createContentObj(props: ContentProps) {
+  const { segmentValues, formatter, locale } = props
+  const values = segmentValues as Record<string, number | string | null>
+  const dateRef = props.dateRef as DateValue & {
+    set: (fields: Record<string, unknown>) => DateValue
+  }
+
+  function getPartContent(part: EditableSegmentPart) {
+    if ('hour' in segmentValues) {
+      const value = values[part]
+      if (value !== null) {
+        if (part === 'day')
+          return formatter.part(
+            dateRef.set({ [part]: value, month: segmentValues.month ?? 1 }),
+            part,
+            { hourCycle: normalizeHourCycle(props.hourCycle) },
+          )
+        return formatter.part(dateRef.set({ [part]: value }), part, {
+          hourCycle: normalizeHourCycle(props.hourCycle),
+        })
+      }
+      return getPlaceholder(part, '', locale)
+    }
+    if (isDateSegmentPart(part)) {
+      const value = values[part]
+      if (value !== null) {
+        if (part === 'day')
+          return formatter.part(
+            props.dateRef.set({ [part]: value as number, month: segmentValues.month ?? 1 }),
+            part,
+          )
+        return formatter.part(props.dateRef.set({ [part]: value as number }), part)
+      }
+      return getPlaceholder(part, '', locale)
+    }
+    return ''
+  }
+
+  return Object.keys(segmentValues).reduce<SegmentContentObj>((obj, part) => {
+    if (!isSegmentPart(part)) return obj
+    if ('hour' in segmentValues && part === 'dayPeriod') {
+      const value = values[part]
+      if (value !== null) obj[part] = value as string
+      else obj[part] = getPlaceholder(part, 'AM', locale)
+    } else obj[part] = getPartContent(part)
+    return obj
+  }, {})
+}
+
+function createContentArr(props: ContentProps & { contentObj: SegmentContentObj }) {
+  const { granularity, formatter, contentObj, hideTimeZone, hourCycle, isTimeValue } = props
+  const parts = formatter.toParts(
+    props.dateRef,
+    getOptsByGranularity(granularity, hourCycle, isTimeValue),
+  )
+  return parts
+    .map(part => {
+      const defaultParts: (string | null)[] = ['literal', 'timeZoneName', null]
+      if (defaultParts.includes(part.type) || !isSegmentPart(part.type))
+        return { part: part.type as string, value: part.value as string | undefined }
+      return { part: part.type as string, value: contentObj[part.type] }
+    })
+    .filter((segment): segment is SegmentContent => {
+      if (segment.part === null || segment.value === null) return false
+      if (segment.part === 'timeZoneName' && (!isZonedDateTime(props.dateRef) || hideTimeZone))
+        return false
+      if (
+        (!isZonedDateTime(props.dateRef) || hideTimeZone) &&
+        segment.part === 'literal' &&
+        ['[', ']'].includes(segment.value!.trim())
+      )
+        return false
+      return true
+    })
+}
+
+export function createContent(props: ContentProps) {
+  const contentObj = createContentObj(props)
+  const contentArr = createContentArr({ contentObj, ...props })
+  return { obj: contentObj, arr: contentArr }
+}

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

@@ -0,0 +1,16 @@
+export const DATE_SEGMENT_PARTS = ['day', 'month', 'year'] as const
+export const TIME_SEGMENT_PARTS = ['hour', 'minute', 'second', 'dayPeriod'] as const
+export const EDITABLE_SEGMENT_PARTS = [...DATE_SEGMENT_PARTS, ...TIME_SEGMENT_PARTS] as const
+
+export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number]
+export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number]
+export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number]
+export type SegmentPart = EditableSegmentPart | 'literal' | 'timeZoneName' | 'era'
+
+export function isDateSegmentPart(part: string): part is DateSegmentPart {
+  return (DATE_SEGMENT_PARTS as readonly string[]).includes(part)
+}
+
+export function isSegmentPart(part: string): part is EditableSegmentPart {
+  return (EDITABLE_SEGMENT_PARTS as readonly string[]).includes(part)
+}

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

@@ -0,0 +1,186 @@
+import { endOfMonth, endOfYear, startOfYear, type DateValue } from '@internationalized/date'
+import { createMonthGrid, createYearGrid, type Grid } from './calendar'
+import type { CalendarBounds, Matcher, PageFunction } from './calendar-view'
+import { isAfter, isBefore, isSameYear, isSameYearMonth, toDate } from './comparators'
+import type { Formatter } from './formatter'
+
+export type PickerKind = 'month' | 'year'
+
+export function isPickerDateSelected(
+  kind: PickerKind,
+  date: DateValue | DateValue[] | undefined,
+  dateObj: DateValue,
+) {
+  const same = kind === 'month' ? isSameYearMonth : isSameYear
+  if (Array.isArray(date)) return date.some(item => same(item, dateObj))
+  if (!date) return false
+  return same(date, dateObj)
+}
+
+export function isPickerDateDisabled(
+  kind: PickerKind,
+  dateObj: DateValue,
+  bounds: CalendarBounds,
+  matcher: Matcher | undefined,
+) {
+  if (matcher?.(dateObj) || bounds.disabled) return true
+  const start = kind === 'month' ? dateObj.set({ day: 1 }) : startOfYear(dateObj)
+  const end = kind === 'month' ? endOfMonth(dateObj) : endOfYear(dateObj)
+  if (bounds.maxValue && isAfter(start, bounds.maxValue)) return true
+  if (bounds.minValue && isBefore(end, bounds.minValue)) return true
+  return false
+}
+
+export function isPickerNextDisabled(
+  kind: PickerKind,
+  grid: Grid<DateValue>,
+  bounds: CalendarBounds,
+  page: PageFunction | undefined,
+  pageFunc?: PageFunction,
+) {
+  if (!bounds.maxValue) return false
+  if (bounds.disabled) return true
+  const turn = pageFunc || page
+  if (kind === 'month') {
+    const currentDate = grid.value
+    if (turn) return isAfter(turn(currentDate).set({ month: 1, day: 1 }), bounds.maxValue)
+    return isAfter(currentDate.add({ years: 1 }).set({ month: 1, day: 1 }), bounds.maxValue)
+  }
+  const lastYearInView = grid.cells.at(-1)!
+  if (turn) return isAfter(startOfYear(turn(lastYearInView)), bounds.maxValue)
+  return isAfter(startOfYear(lastYearInView.add({ years: 1 })), bounds.maxValue)
+}
+
+export function isPickerPrevDisabled(
+  kind: PickerKind,
+  grid: Grid<DateValue>,
+  bounds: CalendarBounds,
+  page: PageFunction | undefined,
+  pageFunc?: PageFunction,
+) {
+  if (!bounds.minValue) return false
+  if (bounds.disabled) return true
+  const turn = pageFunc || page
+  const firstInView = grid.value
+  if (kind === 'month') {
+    if (turn) return isBefore(endOfMonth(turn(firstInView).set({ month: 12 })), bounds.minValue)
+    return isBefore(firstInView.subtract({ years: 1 }).set({ month: 12, day: 31 }), bounds.minValue)
+  }
+  if (turn) return isBefore(endOfYear(turn(firstInView)), bounds.minValue)
+  return isBefore(endOfYear(firstInView.subtract({ years: 1 })), bounds.minValue)
+}
+
+export function buildPickerGrid(
+  kind: PickerKind,
+  dateObj: DateValue,
+  yearsPerPage?: number,
+  decadeAligned?: boolean,
+) {
+  if (kind === 'month') return createMonthGrid({ dateObj })
+  return createYearGrid({ dateObj, yearsPerPage, decadeAligned })
+}
+
+export function turnPickerPage(
+  kind: PickerKind,
+  direction: 1 | -1,
+  grid: Grid<DateValue>,
+  placeholder: DateValue,
+  options: { page: PageFunction | undefined; yearsPerPage?: number },
+  pageFunc?: PageFunction,
+) {
+  const firstInGrid = grid.value
+  const turn = pageFunc || options.page
+  const years = kind === 'month' ? 1 : options.yearsPerPage!
+  const newDate = turn
+    ? turn(firstInGrid)
+    : direction > 0
+      ? firstInGrid.add({ years })
+      : firstInGrid.subtract({ years })
+  return {
+    grid: buildPickerGrid(kind, newDate, options.yearsPerPage, false),
+    placeholder: newDate.set({ month: placeholder.month, day: placeholder.day }),
+  }
+}
+
+export function pickerGridContains(kind: PickerKind, grid: Grid<DateValue>, value: DateValue) {
+  if (kind === 'month') return value.year === grid.value.year
+  return value.year >= grid.value.year && value.year <= grid.cells.at(-1)!.year
+}
+
+export function pickerHeading(
+  kind: PickerKind,
+  grid: Grid<DateValue>,
+  formatter: Formatter,
+  locale: string,
+  options: Intl.DateTimeFormatOptions,
+) {
+  if (locale !== formatter.getLocale()) formatter.setLocale(locale)
+  if (kind === 'month') return formatter.fullYear(toDate(grid.value), options)
+  const firstYear = grid.cells[0]!
+  const lastYear = grid.cells.at(-1)!
+  return `${formatter.fullYear(toDate(firstYear), options)} - ${formatter.fullYear(toDate(lastYear), options)}`
+}
+
+export function pickerLabel(kind: PickerKind, label: string | undefined, heading: string) {
+  return `${label ?? (kind === 'month' ? 'Month Picker' : 'Year Picker')}, ${heading}`
+}
+
+export function isSamePickerPeriod(kind: PickerKind, a: DateValue, b: DateValue) {
+  return kind === 'month' ? isSameYearMonth(a, b) : isSameYear(a, b)
+}
+
+function resolvePickerValue(kind: PickerKind, value: DateValue, reference?: DateValue) {
+  if (!reference) return value.copy()
+  return kind === 'month'
+    ? value.copy().set({ day: reference.day })
+    : value.copy().set({ month: reference.month, day: reference.day })
+}
+
+export function nextPickerSelection(
+  kind: PickerKind,
+  model: DateValue | DateValue[] | undefined,
+  value: DateValue,
+  placeholder: DateValue,
+  options: { multiple: boolean; preventDeselect: boolean },
+): { value: DateValue | DateValue[] | undefined; placeholder?: DateValue } | undefined {
+  const same = (a: DateValue, b: DateValue) => isSamePickerPeriod(kind, a, b)
+  if (!options.multiple) {
+    if (!model) return { value: resolvePickerValue(kind, value, placeholder) }
+    if (!options.preventDeselect && same(model as DateValue, value))
+      return { placeholder: resolvePickerValue(kind, value, model as DateValue), value: undefined }
+    return { value: resolvePickerValue(kind, value, model as DateValue) }
+  }
+  if (!model) return { value: [resolvePickerValue(kind, value, placeholder)] }
+  const values = Array.isArray(model) ? model : kind === 'month' ? [model] : undefined
+  if (!values) return
+  const index = values.findIndex(date => same(date, value))
+  if (index === -1) return { value: [...values, resolvePickerValue(kind, value, placeholder)] }
+  if (options.preventDeselect) return
+  const next = values.filter(date => !same(date, value))
+  if (!next.length)
+    return { placeholder: resolvePickerValue(kind, value, values[index]), value: undefined }
+  return { value: next.map(date => date.copy()) }
+}
+
+export function pickerShiftCandidate(
+  kind: PickerKind,
+  current: DateValue,
+  add: number,
+  unit: 'cell' | 'page',
+  bounds: { minValue?: DateValue; maxValue?: DateValue; yearsPerPage?: number },
+) {
+  const candidate =
+    kind === 'month'
+      ? unit === 'cell'
+        ? current.add({ months: add })
+        : current.add({ years: add })
+      : current.add({ years: unit === 'cell' ? add : add * bounds.yearsPerPage! })
+  const end = kind === 'month' ? endOfMonth(candidate) : endOfYear(candidate)
+  const start = kind === 'month' ? candidate.set({ day: 1 }) : startOfYear(candidate)
+  if (
+    (bounds.minValue && end.compare(bounds.minValue) < 0) ||
+    (bounds.maxValue && start.compare(bounds.maxValue) > 0)
+  )
+    return undefined
+  return candidate
+}