@hina-ui/vue 1.7.11 → 1.7.13

package/src/primitives/calendar/CalendarRoot.ts

@@ -0,0 +1,324 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  onMounted,
+  renderSlot,
+  toDisplayString,
+  toRefs,
+  watch,
+  withCtx,
+  type PropType,
+  type Ref,
+} from 'vue'
+import { isEqualDay, isSameDay, type DateValue } from '@internationalized/date'
+import { getWeekStartsOn } from '../../../../shared/src/primitives/date/calendar'
+import type {
+  Matcher,
+  PageFunction,
+  WeekDayFormat,
+} from '../../../../shared/src/primitives/date/calendar-view'
+import { getDefaultDate } from '../../../../shared/src/primitives/date/comparators'
+import { handleCalendarInitialFocus } from '../../../../shared/src/primitives/date/utils'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useLocale } from '../utils/useLocale'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { useVModel } from '../utils/useVModel'
+import { provideCalendarRootContext } from './context'
+import { useCalendar, useCalendarState } from './useCalendar'
+
+export const VISUALLY_HIDDEN_HEADING_STYLE = {
+  border: '0px',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  'clip-path': 'inset(50%)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: '0px',
+  position: 'absolute',
+  'white-space': 'nowrap',
+  width: '1px',
+}
+
+export interface CalendarRootProps {
+  defaultValue?: DateValue
+  defaultPlaceholder?: DateValue
+  placeholder?: DateValue
+  pagedNavigation?: boolean
+  preventDeselect?: boolean
+  weekStartsOn?: number
+  weekdayFormat?: WeekDayFormat
+  calendarLabel?: string
+  fixedWeeks?: boolean
+  maxValue?: DateValue
+  minValue?: DateValue
+  locale?: string
+  numberOfMonths?: number
+  disabled?: boolean
+  readonly?: boolean
+  initialFocus?: boolean
+  isDateDisabled?: Matcher
+  isDateUnavailable?: Matcher
+  dir?: Direction
+  nextPage?: PageFunction
+  prevPage?: PageFunction
+  modelValue?: DateValue | DateValue[] | undefined
+  multiple?: boolean
+  disableDaysOutsideCurrentView?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type CalendarRootEmits = {
+  'update:modelValue': [date: DateValue | undefined]
+  'update:placeholder': [date: DateValue]
+}
+
+export const CalendarRoot = defineComponent({
+  name: 'CalendarRoot',
+  props: {
+    defaultValue: {
+      type: null as unknown as PropType<DateValue>,
+      required: false,
+      default: undefined,
+    },
+    defaultPlaceholder: { type: null as unknown as PropType<DateValue>, required: false },
+    placeholder: {
+      type: null as unknown as PropType<DateValue>,
+      required: false,
+      default: undefined,
+    },
+    pagedNavigation: { type: Boolean, required: false, default: false },
+    preventDeselect: { type: Boolean, required: false, default: false },
+    weekStartsOn: { type: Number, required: false },
+    weekdayFormat: { type: String as PropType<WeekDayFormat>, required: false, default: 'narrow' },
+    calendarLabel: { type: String, required: false },
+    fixedWeeks: { type: Boolean, required: false, default: false },
+    maxValue: { type: null as unknown as PropType<DateValue>, required: false },
+    minValue: { type: null as unknown as PropType<DateValue>, required: false },
+    locale: { type: String, required: false },
+    numberOfMonths: { type: Number, required: false, default: 1 },
+    disabled: { type: Boolean, required: false, default: false },
+    readonly: { type: Boolean, required: false, default: false },
+    initialFocus: { type: Boolean, required: false, default: false },
+    isDateDisabled: { type: Function as PropType<Matcher>, required: false, default: undefined },
+    isDateUnavailable: { type: Function as PropType<Matcher>, required: false, default: undefined },
+    dir: { type: String as PropType<Direction>, required: false },
+    nextPage: { type: Function as PropType<PageFunction>, required: false },
+    prevPage: { type: Function as PropType<PageFunction>, required: false },
+    modelValue: {
+      type: null as unknown as PropType<DateValue | DateValue[] | undefined>,
+      required: false,
+    },
+    multiple: { type: Boolean, required: false, default: false },
+    disableDaysOutsideCurrentView: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'div',
+    },
+  },
+  emits: ['update:modelValue', 'update:placeholder'],
+  setup(props, { emit, slots }) {
+    const {
+      disabled,
+      readonly,
+      initialFocus,
+      pagedNavigation,
+      weekdayFormat,
+      fixedWeeks,
+      multiple,
+      minValue,
+      maxValue,
+      numberOfMonths,
+      preventDeselect,
+      isDateDisabled: propsIsDateDisabled,
+      isDateUnavailable: propsIsDateUnavailable,
+      calendarLabel,
+      defaultValue,
+      nextPage: propsNextPage,
+      prevPage: propsPrevPage,
+      dir: propDir,
+      locale: propLocale,
+      disableDaysOutsideCurrentView,
+    } = toRefs(props)
+
+    const { primitiveElement, currentElement: parentElement } = usePrimitiveElement()
+    const locale = useLocale(propLocale)
+    const dir = useDirection(propDir)
+    const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
+
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: defaultValue.value,
+      passive: props.modelValue === undefined,
+    }) as Ref<DateValue | DateValue[] | undefined>
+
+    const defaultDate = getDefaultDate({
+      defaultPlaceholder: props.placeholder,
+      defaultValue: modelValue.value,
+      locale: props.locale,
+    })
+
+    const placeholder = useVModel(props, 'placeholder', emit, {
+      defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),
+      passive: props.placeholder === undefined,
+    }) as Ref<DateValue>
+
+    function onPlaceholderChange(value: DateValue) {
+      placeholder.value = value.copy()
+    }
+
+    const {
+      fullCalendarLabel,
+      headingValue,
+      isDateDisabled,
+      isDateUnavailable,
+      isNextButtonDisabled,
+      isPrevButtonDisabled,
+      weekdays,
+      isOutsideVisibleView,
+      nextPage,
+      prevPage,
+      formatter,
+      grid,
+      isPlaceholderFocusable,
+      firstFocusableDate,
+    } = useCalendar({
+      locale,
+      placeholder,
+      weekStartsOn,
+      fixedWeeks,
+      numberOfMonths,
+      minValue,
+      maxValue,
+      disabled,
+      weekdayFormat,
+      pagedNavigation,
+      isDateDisabled: propsIsDateDisabled.value,
+      isDateUnavailable: propsIsDateUnavailable.value,
+      calendarLabel,
+      nextPage: propsNextPage,
+      prevPage: propsPrevPage,
+    })
+
+    const { isInvalid, isDateSelected, hasSelectedDate, isSelectedDateDisabled } = useCalendarState(
+      { date: modelValue, isDateDisabled, isDateUnavailable },
+    )
+
+    watch(modelValue, value => {
+      if (Array.isArray(value) && value.length) {
+        const lastValue = value.at(-1)
+        if (lastValue && !isEqualDay(placeholder.value, lastValue)) onPlaceholderChange(lastValue)
+      } else if (!Array.isArray(value) && value && !isEqualDay(placeholder.value, value))
+        onPlaceholderChange(value)
+    })
+
+    function onDateChange(value: DateValue) {
+      if (!multiple.value) {
+        if (!modelValue.value) {
+          modelValue.value = value.copy()
+          return
+        }
+        if (!preventDeselect.value && isEqualDay(modelValue.value as DateValue, value)) {
+          placeholder.value = value.copy()
+          modelValue.value = undefined
+        } else modelValue.value = value.copy()
+      } else if (!modelValue.value) modelValue.value = [value.copy()]
+      else if (Array.isArray(modelValue.value)) {
+        const index = modelValue.value.findIndex(date => isSameDay(date, value))
+        if (index === -1) modelValue.value = [...modelValue.value, value]
+        else if (!preventDeselect.value) {
+          const next = modelValue.value.filter(date => !isSameDay(date, value))
+          if (!next.length) {
+            placeholder.value = value.copy()
+            modelValue.value = undefined
+            return
+          }
+          modelValue.value = next.map(date => date.copy())
+        }
+      }
+    }
+
+    onMounted(() => {
+      if (initialFocus.value) handleCalendarInitialFocus(parentElement.value ?? null)
+    })
+
+    provideCalendarRootContext({
+      isDateUnavailable,
+      dir,
+      isDateDisabled,
+      locale,
+      formatter,
+      modelValue,
+      placeholder,
+      disabled,
+      initialFocus,
+      pagedNavigation,
+      grid,
+      weekDays: weekdays,
+      weekStartsOn,
+      weekdayFormat,
+      fixedWeeks,
+      multiple,
+      numberOfMonths,
+      readonly,
+      preventDeselect,
+      fullCalendarLabel,
+      headingValue,
+      isInvalid,
+      isDateSelected,
+      isNextButtonDisabled,
+      isPrevButtonDisabled,
+      isOutsideVisibleView,
+      nextPage,
+      prevPage,
+      parentElement,
+      onPlaceholderChange,
+      onDateChange,
+      disableDaysOutsideCurrentView,
+      minValue,
+      maxValue,
+      isPlaceholderFocusable,
+      firstFocusableDate,
+      hasSelectedDate,
+      isSelectedDateDisabled,
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: primitiveElement,
+          as: props.as,
+          'as-child': props.asChild,
+          'aria-label': fullCalendarLabel.value,
+          'data-readonly': readonly.value ? '' : undefined,
+          'data-disabled': disabled.value ? '' : undefined,
+          'data-invalid': isInvalid.value ? '' : undefined,
+          dir: dir.value,
+        },
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', {
+              date: placeholder.value,
+              grid: grid.value,
+              weekDays: weekdays.value,
+              weekStartsOn: weekStartsOn.value,
+              locale: locale.value,
+              fixedWeeks: fixedWeeks.value,
+              modelValue: modelValue.value,
+            }),
+            h('div', { style: VISUALLY_HIDDEN_HEADING_STYLE }, [
+              h(
+                'div',
+                { role: 'heading', 'aria-level': '2' },
+                toDisplayString(fullCalendarLabel.value),
+              ),
+            ]),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/calendar/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/calendar/context.ts

@@ -0,0 +1,55 @@
+import type { Ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import type { Month } from '../../../../shared/src/primitives/date/calendar'
+import type {
+  Matcher,
+  PageFunction,
+  WeekDayFormat,
+} from '../../../../shared/src/primitives/date/calendar-view'
+import type { Formatter } from '../../../../shared/src/primitives/date/formatter'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface CalendarRootContext {
+  locale: Ref<string>
+  modelValue: Ref<DateValue | DateValue[] | undefined>
+  placeholder: Ref<DateValue>
+  pagedNavigation: Ref<boolean>
+  preventDeselect: Ref<boolean>
+  grid: Ref<Month<DateValue>[]>
+  weekDays: Ref<string[]>
+  weekStartsOn: Ref<number>
+  weekdayFormat: Ref<WeekDayFormat>
+  fixedWeeks: Ref<boolean>
+  multiple: Ref<boolean>
+  numberOfMonths: Ref<number>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  initialFocus: Ref<boolean>
+  onDateChange: (date: DateValue) => void
+  onPlaceholderChange: (date: DateValue) => void
+  fullCalendarLabel: Ref<string>
+  parentElement: Ref<HTMLElement | undefined>
+  headingValue: Ref<string>
+  isInvalid: Ref<boolean>
+  isDateDisabled: Matcher
+  isDateSelected: Matcher
+  isDateUnavailable?: Matcher
+  isOutsideVisibleView: (date: DateValue) => boolean
+  prevPage: (prevPageFunc?: PageFunction) => void
+  nextPage: (nextPageFunc?: PageFunction) => void
+  isNextButtonDisabled: (nextPageFunc?: PageFunction) => boolean
+  isPrevButtonDisabled: (prevPageFunc?: PageFunction) => boolean
+  formatter: Formatter
+  dir: Ref<Direction>
+  disableDaysOutsideCurrentView: Ref<boolean>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  isPlaceholderFocusable: Ref<boolean>
+  firstFocusableDate: Ref<DateValue | undefined>
+  hasSelectedDate: Ref<boolean>
+  isSelectedDateDisabled: Ref<boolean>
+}
+
+export const [injectCalendarRootContext, provideCalendarRootContext] =
+  createContext<CalendarRootContext>('CalendarRoot')

package/src/primitives/calendar/index.ts

@@ -0,0 +1,12 @@
+export { injectCalendarRootContext, type CalendarRootContext } from './context'
+export { CalendarCellTrigger, type CalendarCellTriggerProps } from './CalendarCellTrigger'
+export {
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+} from './CalendarGrid'
+export { CalendarNext, CalendarPrev } from './CalendarNav'
+export { CalendarRoot, type CalendarRootEmits, type CalendarRootProps } from './CalendarRoot'

package/src/primitives/calendar/useCalendar.ts

@@ -0,0 +1,164 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import type { Month } from '../../../../shared/src/primitives/date/calendar'
+import {
+  buildCalendarGrid,
+  calendarHeading,
+  calendarHeadingOptions,
+  calendarLabel,
+  calendarWeekdays,
+  firstFocusableCalendarDate,
+  hasCalendarSelection,
+  isCalendarDateDisabled,
+  isCalendarDateSelected,
+  isCalendarNextDisabled,
+  isCalendarPrevDisabled,
+  isCalendarSelectionDisabled,
+  isCalendarSelectionInvalid,
+  isOutsideCalendarView,
+  turnCalendarPage,
+  type Matcher,
+  type PageFunction,
+  type WeekDayFormat,
+} from '../../../../shared/src/primitives/date/calendar-view'
+import { createDateFormatter } from '../../../../shared/src/primitives/date/formatter'
+
+export interface UseCalendarProps {
+  locale: Ref<string>
+  placeholder: Ref<DateValue>
+  weekStartsOn: Ref<number>
+  fixedWeeks: Ref<boolean>
+  numberOfMonths: Ref<number>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  disabled: Ref<boolean>
+  weekdayFormat: Ref<WeekDayFormat>
+  pagedNavigation: Ref<boolean>
+  isDateDisabled?: Matcher
+  isDateUnavailable?: Matcher
+  calendarLabel: Ref<string | undefined>
+  nextPage: Ref<PageFunction | undefined>
+  prevPage: Ref<PageFunction | undefined>
+}
+
+export function useCalendarState(props: {
+  isDateDisabled: Matcher
+  isDateUnavailable: Matcher
+  date: Ref<DateValue | DateValue[] | undefined>
+}) {
+  return {
+    isDateSelected: (dateObj: DateValue) => isCalendarDateSelected(props.date.value, dateObj),
+    isInvalid: computed(() =>
+      isCalendarSelectionInvalid(props.date.value, props.isDateDisabled, props.isDateUnavailable),
+    ),
+    hasSelectedDate: computed(() => hasCalendarSelection(props.date.value)),
+    isSelectedDateDisabled: computed(() =>
+      isCalendarSelectionDisabled(props.date.value, props.isDateDisabled),
+    ),
+  }
+}
+
+export function useCalendar(props: UseCalendarProps) {
+  const formatter = createDateFormatter(props.locale.value)
+  const headingFormatOptions = computed(() => calendarHeadingOptions(props.placeholder.value))
+
+  const gridOptions = () => ({
+    weekStartsOn: props.weekStartsOn.value,
+    locale: props.locale.value,
+    fixedWeeks: props.fixedWeeks.value,
+    numberOfMonths: props.numberOfMonths.value,
+  })
+  const bounds = () => ({
+    minValue: props.minValue.value,
+    maxValue: props.maxValue.value,
+    disabled: props.disabled.value,
+  })
+
+  const grid = ref(buildCalendarGrid(props.placeholder.value, gridOptions())) as Ref<
+    Month<DateValue>[]
+  >
+  const visibleView = computed(() => grid.value.map(month => month.value))
+
+  const isOutsideVisibleView = (date: DateValue) => isOutsideCalendarView(grid.value, date)
+  const isNextButtonDisabled = (nextPageFunc?: PageFunction) =>
+    isCalendarNextDisabled(grid.value, bounds(), props.nextPage.value, nextPageFunc)
+  const isPrevButtonDisabled = (prevPageFunc?: PageFunction) =>
+    isCalendarPrevDisabled(grid.value, bounds(), props.prevPage.value, prevPageFunc)
+  const isDateDisabled = (dateObj: DateValue) =>
+    isCalendarDateDisabled(dateObj, bounds(), props.isDateDisabled)
+  const isDateUnavailable = (date: DateValue) => !!props.isDateUnavailable?.(date)
+
+  const weekdays = computed(() =>
+    calendarWeekdays(grid.value, formatter, props.weekdayFormat.value),
+  )
+
+  function turn(direction: 1 | -1, pageFunc?: PageFunction) {
+    const next = turnCalendarPage(
+      direction,
+      grid.value,
+      {
+        ...gridOptions(),
+        pagedNavigation: props.pagedNavigation.value,
+        page: direction > 0 ? props.nextPage.value : props.prevPage.value,
+      },
+      pageFunc,
+    )
+    grid.value = next.grid
+    props.placeholder.value = next.placeholder
+  }
+
+  const nextPage = (nextPageFunc?: PageFunction) => turn(1, nextPageFunc)
+  const prevPage = (prevPageFunc?: PageFunction) => turn(-1, prevPageFunc)
+
+  watch(props.placeholder, value => {
+    if (!isOutsideCalendarView(grid.value, value)) return
+    grid.value = buildCalendarGrid(value, gridOptions())
+  })
+
+  watch([props.locale, props.weekStartsOn, props.fixedWeeks, props.numberOfMonths], () => {
+    grid.value = buildCalendarGrid(props.placeholder.value, gridOptions())
+  })
+
+  const headingValue = computed(() =>
+    calendarHeading(grid.value, formatter, props.locale.value, headingFormatOptions.value),
+  )
+
+  const fullCalendarLabel = computed(() =>
+    calendarLabel(props.calendarLabel.value, headingValue.value),
+  )
+
+  const isPlaceholderFocusable = computed(
+    () =>
+      !(
+        isDateDisabled(props.placeholder.value) ||
+        isDateUnavailable(props.placeholder.value) ||
+        isOutsideVisibleView(props.placeholder.value)
+      ),
+  )
+
+  const firstFocusableDate = computed(() =>
+    firstFocusableCalendarDate(
+      grid.value,
+      props.minValue.value,
+      date => isDateDisabled(date) || isDateUnavailable(date),
+    ),
+  )
+
+  return {
+    isDateDisabled,
+    isDateUnavailable,
+    isNextButtonDisabled,
+    isPrevButtonDisabled,
+    grid,
+    weekdays,
+    visibleView,
+    isOutsideVisibleView,
+    formatter,
+    nextPage,
+    prevPage,
+    headingValue,
+    fullCalendarLabel,
+    isPlaceholderFocusable,
+    firstFocusableDate,
+  }
+}