@hina-ui/vue 1.7.12 → 1.7.14

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

@@ -0,0 +1,485 @@
+const supportedLocales: string[] = [
+  'ach',
+  'af',
+  'am',
+  'an',
+  'ar',
+  'ast',
+  'az',
+  'be',
+  'bg',
+  'bn',
+  'br',
+  'bs',
+  'ca',
+  'cak',
+  'ckb',
+  'cs',
+  'cy',
+  'da',
+  'de',
+  'dsb',
+  'el',
+  'en',
+  'eo',
+  'es',
+  'et',
+  'eu',
+  'fa',
+  'ff',
+  'fi',
+  'fr',
+  'fy',
+  'ga',
+  'gd',
+  'gl',
+  'he',
+  'hr',
+  'hsb',
+  'hu',
+  'ia',
+  'id',
+  'it',
+  'ja',
+  'ka',
+  'kk',
+  'kn',
+  'ko',
+  'lb',
+  'lo',
+  'lt',
+  'lv',
+  'meh',
+  'ml',
+  'ms',
+  'nl',
+  'nn',
+  'no',
+  'oc',
+  'pl',
+  'pt',
+  'rm',
+  'ro',
+  'ru',
+  'sc',
+  'scn',
+  'sk',
+  'sl',
+  'sr',
+  'sv',
+  'szl',
+  'tg',
+  'th',
+  'tr',
+  'uk',
+  'zh-CN',
+  'zh-TW',
+]
+const placeholderFields: string[] = ['year', 'month', 'day']
+const placeholders: Record<string, { year: string; month: string; day: string }> = {
+  ach: {
+    year: 'mwaka',
+    month: 'dwe',
+    day: 'nino',
+  },
+  af: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'dd',
+  },
+  am: {
+    year: 'ዓዓዓዓ',
+    month: 'ሚሜ',
+    day: 'ቀቀ',
+  },
+  an: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  ar: {
+    year: 'سنة',
+    month: 'شهر',
+    day: 'يوم',
+  },
+  ast: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  az: {
+    year: 'iiii',
+    month: 'aa',
+    day: 'gg',
+  },
+  be: {
+    year: 'гггг',
+    month: 'мм',
+    day: 'дд',
+  },
+  bg: {
+    year: 'гггг',
+    month: 'мм',
+    day: 'дд',
+  },
+  bn: {
+    year: 'yyyy',
+    month: 'মিমি',
+    day: 'dd',
+  },
+  br: {
+    year: 'bbbb',
+    month: 'mm',
+    day: 'dd',
+  },
+  bs: {
+    year: 'gggg',
+    month: 'mm',
+    day: 'dd',
+  },
+  ca: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  cak: {
+    year: 'jjjj',
+    month: 'ii',
+    day: "q'q'",
+  },
+  ckb: {
+    year: 'ساڵ',
+    month: 'مانگ',
+    day: 'ڕۆژ',
+  },
+  cs: {
+    year: 'rrrr',
+    month: 'mm',
+    day: 'dd',
+  },
+  cy: {
+    year: 'bbbb',
+    month: 'mm',
+    day: 'dd',
+  },
+  da: {
+    year: 'åååå',
+    month: 'mm',
+    day: 'dd',
+  },
+  de: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'tt',
+  },
+  dsb: {
+    year: 'llll',
+    month: 'mm',
+    day: 'źź',
+  },
+  el: {
+    year: 'εεεε',
+    month: 'μμ',
+    day: 'ηη',
+  },
+  en: {
+    year: 'yyyy',
+    month: 'mm',
+    day: 'dd',
+  },
+  eo: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'tt',
+  },
+  es: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  et: {
+    year: 'aaaa',
+    month: 'kk',
+    day: 'pp',
+  },
+  eu: {
+    year: 'uuuu',
+    month: 'hh',
+    day: 'ee',
+  },
+  fa: {
+    year: 'سال',
+    month: 'ماه',
+    day: 'روز',
+  },
+  ff: {
+    year: 'hhhh',
+    month: 'll',
+    day: 'ññ',
+  },
+  fi: {
+    year: 'vvvv',
+    month: 'kk',
+    day: 'pp',
+  },
+  fr: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'jj',
+  },
+  fy: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'dd',
+  },
+  ga: {
+    year: 'bbbb',
+    month: 'mm',
+    day: 'll',
+  },
+  gd: {
+    year: 'bbbb',
+    month: 'mm',
+    day: 'll',
+  },
+  gl: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  he: {
+    year: 'שנה',
+    month: 'חודש',
+    day: 'יום',
+  },
+  hr: {
+    year: 'gggg',
+    month: 'mm',
+    day: 'dd',
+  },
+  hsb: {
+    year: 'llll',
+    month: 'mm',
+    day: 'dd',
+  },
+  hu: {
+    year: 'éééé',
+    month: 'hh',
+    day: 'nn',
+  },
+  ia: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  id: {
+    year: 'tttt',
+    month: 'bb',
+    day: 'hh',
+  },
+  it: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'gg',
+  },
+  ja: {
+    year: ' 年 ',
+    month: '月',
+    day: '日',
+  },
+  ka: {
+    year: 'წწწწ',
+    month: 'თთ',
+    day: 'რრ',
+  },
+  kk: {
+    year: 'жжжж',
+    month: 'аа',
+    day: 'кк',
+  },
+  kn: {
+    year: 'ವವವವ',
+    month: 'ಮಿಮೀ',
+    day: 'ದಿದಿ',
+  },
+  ko: {
+    year: '연도',
+    month: '월',
+    day: '일',
+  },
+  lb: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'dd',
+  },
+  lo: {
+    year: 'ປປປປ',
+    month: 'ດດ',
+    day: 'ວວ',
+  },
+  lt: {
+    year: 'mmmm',
+    month: 'mm',
+    day: 'dd',
+  },
+  lv: {
+    year: 'gggg',
+    month: 'mm',
+    day: 'dd',
+  },
+  meh: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  ml: {
+    year: 'വർഷം',
+    month: 'മാസം',
+    day: 'തീയതി',
+  },
+  ms: {
+    year: 'tttt',
+    month: 'mm',
+    day: 'hh',
+  },
+  nl: {
+    year: 'jjjj',
+    month: 'mm',
+    day: 'dd',
+  },
+  nn: {
+    year: 'åååå',
+    month: 'mm',
+    day: 'dd',
+  },
+  no: {
+    year: 'åååå',
+    month: 'mm',
+    day: 'dd',
+  },
+  oc: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'jj',
+  },
+  pl: {
+    year: 'rrrr',
+    month: 'mm',
+    day: 'dd',
+  },
+  pt: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  rm: {
+    year: 'oooo',
+    month: 'mm',
+    day: 'dd',
+  },
+  ro: {
+    year: 'aaaa',
+    month: 'll',
+    day: 'zz',
+  },
+  ru: {
+    year: 'гггг',
+    month: 'мм',
+    day: 'дд',
+  },
+  sc: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'dd',
+  },
+  scn: {
+    year: 'aaaa',
+    month: 'mm',
+    day: 'jj',
+  },
+  sk: {
+    year: 'rrrr',
+    month: 'mm',
+    day: 'dd',
+  },
+  sl: {
+    year: 'llll',
+    month: 'mm',
+    day: 'dd',
+  },
+  sr: {
+    year: 'гггг',
+    month: 'мм',
+    day: 'дд',
+  },
+  sv: {
+    year: 'åååå',
+    month: 'mm',
+    day: 'dd',
+  },
+  szl: {
+    year: 'rrrr',
+    month: 'mm',
+    day: 'dd',
+  },
+  tg: {
+    year: 'сссс',
+    month: 'мм',
+    day: 'рр',
+  },
+  th: {
+    year: 'ปปปป',
+    month: 'ดด',
+    day: 'วว',
+  },
+  tr: {
+    year: 'yyyy',
+    month: 'aa',
+    day: 'gg',
+  },
+  uk: {
+    year: 'рррр',
+    month: 'мм',
+    day: 'дд',
+  },
+  'zh-CN': {
+    year: '年',
+    month: '月',
+    day: '日',
+  },
+  'zh-TW': {
+    year: '年',
+    month: '月',
+    day: '日',
+  },
+}
+function getPlaceholderObj(locale: string) {
+  if (!isSupportedLocale(locale)) {
+    const localeLanguage = getLocaleLanguage(locale)
+    if (!isSupportedLocale(localeLanguage)) return placeholders.en
+    else return placeholders[localeLanguage]
+  } else return placeholders[locale]
+}
+export function getPlaceholder(field: string, value: string, locale: string) {
+  if (isPlaceholderField(field))
+    return getPlaceholderObj(locale)![field as 'year' | 'month' | 'day']
+  if (isDefaultField(field)) return value
+  if (isTimeField(field)) return '––'
+  return ''
+}
+function isSupportedLocale(locale: string) {
+  return supportedLocales.includes(locale)
+}
+function isPlaceholderField(field: string) {
+  return placeholderFields.includes(field)
+}
+function isTimeField(field: string) {
+  return field === 'hour' || field === 'minute' || field === 'second'
+}
+function isDefaultField(field: string) {
+  return field === 'era' || field === 'dayPeriod'
+}
+function getLocaleLanguage(locale: string) {
+  if (Intl.Locale) return new Intl.Locale(locale).language
+  return locale.split('-')[0]!
+}

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

@@ -0,0 +1,181 @@
+import { isSameDay, type DateValue } from '@internationalized/date'
+import { getDaysBetween } from './calendar'
+import type { Matcher } from './calendar-view'
+import { areAllDaysBetweenValid, isBefore, isBetween } from './comparators'
+
+export type FixedDate = 'start' | 'end' | undefined
+
+export interface CalendarRange {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}
+
+export interface RangeLimits {
+  start: DateValue | undefined
+  end: DateValue | undefined
+  fixedDate: FixedDate
+  maximumDays: number | undefined
+}
+
+export function isRangeInvalid(range: CalendarRange, isDateDisabled: Matcher) {
+  if (range.start && isDateDisabled(range.start)) return true
+  if (range.end && isDateDisabled(range.end)) return true
+  return !!(range.start && range.end && isBefore(range.end, range.start))
+}
+
+export function isRangeDateSelected(range: CalendarRange, date: DateValue) {
+  if (range.start && isSameDay(range.start, date)) return true
+  if (range.end && isSameDay(range.end, date)) return true
+  if (range.end && range.start) return isBetween(date, range.start, range.end)
+  return false
+}
+
+export function isRangeDateDisabled(date: DateValue, limits: RangeLimits, isDateDisabled: Matcher) {
+  if (isDateDisabled(date)) return true
+  if (!limits.maximumDays) return false
+  if (limits.start && limits.end) {
+    if (limits.fixedDate) {
+      const diff = getDaysBetween(limits.start, limits.end).length
+      if (diff <= limits.maximumDays) {
+        const daysLeft = limits.maximumDays - diff - 1
+        const startLimit = limits.start.subtract({ days: daysLeft })
+        const endLimit = limits.end.add({ days: daysLeft })
+        return !isBetween(date, startLimit, endLimit)
+      }
+    }
+    return false
+  }
+  if (limits.start) {
+    const maxDate = limits.start.add({ days: limits.maximumDays })
+    const minDate = limits.start.subtract({ days: limits.maximumDays })
+    return !isBetween(date, minDate, maxDate)
+  }
+  return false
+}
+
+export function highlightedCalendarRange(input: {
+  start: DateValue | undefined
+  end: DateValue | undefined
+  focused: DateValue | undefined
+  fixedDate: FixedDate
+  maximumDays: number | undefined
+  allowNonContiguousRanges: boolean
+  isDateUnavailable: Matcher
+  isDateDisabled: Matcher
+  isDateHighlightable?: Matcher
+}): { start: DateValue; end: DateValue } | null {
+  if (input.start && input.end && !input.fixedDate) return null
+  if (!input.start || !input.focused) return null
+  const isStartBeforeFocused = isBefore(input.start, input.focused)
+  const start = isStartBeforeFocused ? input.start : input.focused
+  const end = isStartBeforeFocused ? input.focused : input.start
+  if (isSameDay(start, end)) return { start, end }
+  if (input.maximumDays && !input.end) {
+    const anchor = input.start
+    if (!isBefore(input.focused, anchor))
+      return { start: anchor, end: anchor.add({ days: input.maximumDays - 1 }) }
+    return { start: anchor.subtract({ days: input.maximumDays - 1 }), end: anchor }
+  }
+  const isValid = areAllDaysBetweenValid(
+    start,
+    end,
+    input.allowNonContiguousRanges ? () => false : input.isDateUnavailable,
+    input.isDateDisabled,
+    input.isDateHighlightable,
+  )
+  return isValid ? { start, end } : null
+}
+
+export function rangeSelectionFocus(range: CalendarRange, isDateDisabled: Matcher) {
+  const isStartDisabled = !!(range.start && isDateDisabled(range.start))
+  const isEndDisabled = !!(range.end && isDateDisabled(range.end))
+  const hasStart = !!range.start
+  const hasEnd = !!range.end
+  let isSelectedDisabled = false
+  if (hasStart && hasEnd) isSelectedDisabled = isStartDisabled && isEndDisabled
+  else if (hasStart || hasEnd)
+    isSelectedDisabled = (hasStart && isStartDisabled) || (hasEnd && isEndDisabled)
+  const selectedFocusableDate =
+    range.start && !isStartDisabled
+      ? range.start
+      : range.end && !isEndDisabled
+        ? range.end
+        : undefined
+  return { hasSelectedDate: hasStart || hasEnd, isSelectedDisabled, selectedFocusableDate }
+}
+
+export function isRangeFocusedDate(input: {
+  day: DateValue
+  outsideView: boolean
+  disabled: boolean
+  rootDisabled: boolean
+  placeholderFocusable: boolean
+  placeholder: DateValue
+  selectedFocusableDate: DateValue | undefined
+  hasSelectedDate: boolean
+  selectedDisabled: boolean
+  firstFocusableDate: DateValue | undefined
+}) {
+  if (input.outsideView || input.disabled) return false
+  if (input.rootDisabled) return false
+  if (input.placeholderFocusable && isSameDay(input.day, input.placeholder)) return true
+  if (input.selectedFocusableDate && !input.placeholderFocusable)
+    return isSameDay(input.day, input.selectedFocusableDate)
+  if ((!input.hasSelectedDate || input.selectedDisabled) && !input.placeholderFocusable)
+    return !!input.firstFocusableDate && isSameDay(input.day, input.firstFocusableDate)
+  return false
+}
+
+export interface RangeChange {
+  start?: { value: DateValue | undefined }
+  end?: { value: DateValue | undefined }
+  placeholder?: DateValue
+  lastPressed?: DateValue
+  preventDefault?: boolean
+}
+
+export function nextRangeSelection(
+  date: DateValue,
+  state: {
+    start: DateValue | undefined
+    end: DateValue | undefined
+    highlighted: boolean
+    lastPressed: DateValue | undefined
+    preventDeselect: boolean
+    fixedDate: FixedDate
+  },
+): RangeChange {
+  const { start, end } = state
+  if (start && !state.highlighted) {
+    if (isSameDay(date, start) && !state.preventDeselect && !end)
+      return { start: { value: undefined }, placeholder: date, lastPressed: date.copy() }
+    if (!end)
+      return {
+        start:
+          state.lastPressed && isSameDay(state.lastPressed, date)
+            ? { value: date.copy() }
+            : undefined,
+        lastPressed: date.copy(),
+        preventDefault: true,
+      }
+  }
+  const lastPressed = date.copy()
+  if (start && end && isSameDay(start, end) && isSameDay(start, date) && !state.preventDeselect)
+    return {
+      lastPressed,
+      start: { value: undefined },
+      end: { value: undefined },
+      placeholder: date,
+    }
+  if (!start) return { lastPressed, start: { value: date.copy() } }
+  if (!end) return { lastPressed, end: { value: date.copy() } }
+  if (!state.fixedDate)
+    return { lastPressed, end: { value: undefined }, start: { value: date.copy() } }
+  if (state.fixedDate === 'start')
+    return date.compare(start) < 0
+      ? { lastPressed, start: { value: date.copy() } }
+      : { lastPressed, end: { value: date.copy() } }
+  return date.compare(end) > 0
+    ? { lastPressed, end: { value: date.copy() } }
+    : { lastPressed, start: { value: date.copy() } }
+}

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

@@ -0,0 +1,44 @@
+import { kbd } from './utils'
+
+export function isSegmentNavigationKey(key: string) {
+  return key === kbd.ARROW_RIGHT || key === kbd.ARROW_LEFT
+}
+
+export function isNumberString(value: string) {
+  return !Number.isNaN(Number.parseInt(value))
+}
+
+export function isAcceptableSegmentKey(key: string) {
+  const acceptableSegmentKeys: string[] = [
+    kbd.ENTER,
+    kbd.ARROW_UP,
+    kbd.ARROW_DOWN,
+    kbd.ARROW_LEFT,
+    kbd.ARROW_RIGHT,
+    kbd.BACKSPACE,
+    kbd.SPACE,
+    'a',
+    'A',
+    'p',
+    'P',
+  ]
+  if (acceptableSegmentKeys.includes(key)) return true
+  return isNumberString(key)
+}
+
+export function getSegmentElements(
+  parentElement: HTMLElement | null | undefined,
+  attribute = 'data-radix-date-field-segment',
+) {
+  if (!parentElement) return []
+  return Array.from(parentElement.querySelectorAll<HTMLElement>(`[${attribute}]`)).filter(
+    item => item.getAttribute(attribute) !== 'literal',
+  )
+}
+
+export function getTimeFieldSegmentElements(
+  parentElement: HTMLElement | null | undefined,
+  attribute = 'data-radix-time-field-segment',
+) {
+  return getSegmentElements(parentElement, attribute)
+}