@hina-ui/vue 1.7.12 → 1.7.13

package/src/primitives/alert-dialog/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/alert-dialog/index.ts

@@ -0,0 +1,166 @@
+import {
+  defineComponent,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  nextTick,
+  normalizeProps,
+  onMounted,
+  ref,
+  renderSlot,
+  withCtx,
+  withModifiers,
+  type Component,
+  type PropType,
+} from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '../dialog'
+import type { PrimitiveProps } from '../primitive'
+import { Teleport } from '../teleport'
+import { createContext } from '../utils/createContext'
+import { useEmitAsProps } from '../utils/useEmitAsProps'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+
+const primitive = (as?: string) =>
+  ({
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      ...(as ? { default: as } : {}),
+    },
+  }) as const
+
+const [injectAlertDialogContentContext, provideAlertDialogContentContext] = createContext<{
+  onCancelElementChange: (element: HTMLElement | undefined) => void
+}>('AlertDialogContent')
+
+function passThrough(name: string, target: Component, props: Record<string, object>) {
+  return defineComponent({
+    name,
+    props,
+    setup(rawProps, { slots }) {
+      return () =>
+        h(target, normalizeProps(guardReactiveProps(rawProps)), {
+          default: withCtx(() => [renderSlot(slots, 'default')]),
+        })
+    },
+  })
+}
+
+export const AlertDialogRoot = defineComponent({
+  name: 'AlertDialogRoot',
+  props: {
+    open: { type: Boolean, required: false },
+    defaultOpen: { type: Boolean, required: false },
+    unmountOnHide: { type: Boolean, required: false },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit)
+    useForwardExpose()
+    return () =>
+      h(DialogRoot as Component, mergeProps(forwarded.value, { modal: true }), {
+        default: withCtx((slotProps: Record<string, unknown>) => [
+          renderSlot(slots, 'default', normalizeProps(guardReactiveProps(slotProps))),
+        ]),
+      })
+  },
+})
+
+export const AlertDialogContent = defineComponent({
+  name: 'AlertDialogContent',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    disableOutsidePointerEvents: { type: Boolean, required: false, default: undefined },
+    ...primitive(),
+  },
+  emits: [
+    'escapeKeyDown',
+    'pointerDownOutside',
+    'focusOutside',
+    'interactOutside',
+    'openAutoFocus',
+    'closeAutoFocus',
+  ],
+  setup(props, { emit, slots }) {
+    const emitsAsProps = useEmitAsProps(emit)
+    useForwardExpose()
+    const cancelElement = ref<HTMLElement>()
+    provideAlertDialogContentContext({
+      onCancelElementChange: element => {
+        cancelElement.value = element
+      },
+    })
+    const prevent = withModifiers(() => {}, ['prevent'])
+    return () =>
+      h(
+        DialogContent as Component,
+        mergeProps(
+          { ...props, ...emitsAsProps },
+          {
+            role: 'alertdialog',
+            onPointerDownOutside: prevent,
+            onInteractOutside: prevent,
+            onOpenAutoFocus: () => {
+              void nextTick(() => cancelElement.value?.focus({ preventScroll: true }))
+            },
+          },
+        ),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const AlertDialogCancel = defineComponent({
+  name: 'AlertDialogCancel',
+  props: primitive('button'),
+  setup(props, { slots }) {
+    const contentContext = injectAlertDialogContentContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+    onMounted(() => contentContext.onCancelElementChange(currentElement.value))
+    return () =>
+      h(DialogClose as Component, mergeProps(props, { ref: forwardRef }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const AlertDialogAction = passThrough(
+  'AlertDialogAction',
+  DialogClose as Component,
+  primitive('button'),
+)
+export const AlertDialogTitle = passThrough(
+  'AlertDialogTitle',
+  DialogTitle as Component,
+  primitive('h2'),
+)
+export const AlertDialogDescription = passThrough(
+  'AlertDialogDescription',
+  DialogDescription as Component,
+  primitive('p'),
+)
+export const AlertDialogOverlay = passThrough('AlertDialogOverlay', DialogOverlay as Component, {
+  forceMount: { type: Boolean, required: false },
+  ...primitive(),
+})
+export const AlertDialogTrigger = passThrough(
+  'AlertDialogTrigger',
+  DialogTrigger as Component,
+  primitive('button'),
+)
+export const AlertDialogPortal = passThrough('AlertDialogPortal', Teleport as Component, {
+  to: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  defer: { type: Boolean, required: false },
+  forceMount: { type: Boolean, required: false },
+})

package/src/primitives/calendar/CalendarCellTrigger.ts

@@ -0,0 +1,190 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  nextTick,
+  renderSlot,
+  toDisplayString,
+  withCtx,
+  withKeys,
+  type PropType,
+} from 'vue'
+import { getLocalTimeZone, isSameMonth, isToday, type DateValue } from '@internationalized/date'
+import {
+  calendarArrowShift,
+  calendarCellTabIndex,
+  calendarShiftCandidate,
+  isCalendarFocusedDate,
+} from '../../../../shared/src/primitives/date/calendar-view'
+import { toDate } from '../../../../shared/src/primitives/date/comparators'
+import { kbd } from '../../../../shared/src/primitives/date/utils'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { injectCalendarRootContext } from './context'
+
+export interface CalendarCellTriggerProps {
+  day: DateValue
+  month: DateValue
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const CalendarCellTrigger = defineComponent({
+  name: 'CalendarCellTrigger',
+  props: {
+    day: { type: null as unknown as PropType<DateValue>, required: true },
+    month: { type: null as unknown as PropType<DateValue>, required: true },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'div',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectCalendarRootContext()
+    const { primitiveElement } = usePrimitiveElement()
+
+    const dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))
+    const labelText = computed(() =>
+      rootContext.formatter.custom(toDate(props.day), {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    )
+    const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day) ?? false)
+    const isDateToday = computed(() => isToday(props.day, getLocalTimeZone()))
+    const isOutsideView = computed(() => !isSameMonth(props.day, props.month))
+    const isOutsideVisibleView = computed(() => rootContext.isOutsideVisibleView(props.day))
+    const isDisabled = computed(
+      () =>
+        rootContext.isDateDisabled(props.day) ||
+        (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value),
+    )
+    const isFocusedDate = computed(() =>
+      isCalendarFocusedDate({
+        day: props.day,
+        outsideView: isOutsideView.value,
+        disabled: isDisabled.value,
+        rootDisabled: rootContext.disabled.value,
+        placeholderFocusable: rootContext.isPlaceholderFocusable.value,
+        placeholder: rootContext.placeholder.value,
+        hasSelectedDate: rootContext.hasSelectedDate.value,
+        selectedDateDisabled: rootContext.isSelectedDateDisabled.value,
+        firstFocusableDate: rootContext.firstFocusableDate.value,
+      }),
+    )
+    const isSelectedDate = computed(() => rootContext.isDateSelected(props.day))
+
+    function changeDate(date: DateValue) {
+      if (rootContext.readonly.value) return
+      if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date)) return
+      rootContext.onDateChange(date)
+    }
+
+    function handleClick() {
+      if (isDisabled.value) return
+      changeDate(props.day)
+    }
+
+    function shiftFocus(day: DateValue, add: number) {
+      const candidateDayValue = calendarShiftCandidate(
+        day,
+        add,
+        rootContext.minValue.value,
+        rootContext.maxValue.value,
+      )
+      if (!candidateDayValue) return
+      const candidateDay = rootContext.parentElement.value!.querySelector<HTMLElement>(
+        `[data-value='${candidateDayValue.toString()}']:not([data-outside-view])`,
+      )
+      if (!candidateDay) {
+        if (add > 0) {
+          if (rootContext.isNextButtonDisabled()) return
+          rootContext.nextPage()
+        } else {
+          if (rootContext.isPrevButtonDisabled()) return
+          rootContext.prevPage()
+        }
+        void nextTick(() => shiftFocus(day, add))
+        return
+      }
+      if (candidateDay.hasAttribute('data-disabled')) return shiftFocus(candidateDayValue, add)
+      rootContext.onPlaceholderChange(candidateDayValue)
+      candidateDay.focus()
+    }
+
+    function handleArrowKey(event: KeyboardEvent) {
+      if (isDisabled.value) return
+      if (
+        (event.code === kbd.ENTER || event.code === kbd.SPACE_CODE) &&
+        (event.ctrlKey || event.metaKey || event.altKey)
+      )
+        return
+      event.preventDefault()
+      event.stopPropagation()
+      const shift = calendarArrowShift(event.code, rootContext.dir.value)
+      if (shift !== undefined) shiftFocus(props.day, shift)
+      else if (event.code === kbd.ENTER || event.code === kbd.SPACE_CODE) changeDate(props.day)
+    }
+
+    const onKeydown = withKeys(handleArrowKey as (event: Event) => void, [
+      'up',
+      'down',
+      'left',
+      'right',
+      'space',
+      'enter',
+    ])
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: primitiveElement,
+          as: props.as,
+          'as-child': props.asChild,
+          role: 'button',
+          'aria-label': labelText.value,
+          'data-reka-calendar-cell-trigger': '',
+          'aria-disabled': isDisabled.value || isUnavailable.value ? true : undefined,
+          'data-selected': isSelectedDate.value ? true : undefined,
+          'data-value': props.day.toString(),
+          'data-disabled': isDisabled.value ? '' : undefined,
+          'data-unavailable': isUnavailable.value ? '' : undefined,
+          'data-today': isDateToday.value ? '' : undefined,
+          'data-outside-view': isOutsideView.value ? '' : undefined,
+          'data-outside-visible-view': isOutsideVisibleView.value ? '' : undefined,
+          'data-focused': isFocusedDate.value ? '' : undefined,
+          tabindex: calendarCellTabIndex(
+            isFocusedDate.value,
+            isOutsideView.value,
+            isDisabled.value,
+          ),
+          onClick: handleClick,
+          onKeydown,
+        },
+        {
+          default: withCtx(() => [
+            renderSlot(
+              slots,
+              'default',
+              {
+                dayValue: dayValue.value,
+                disabled: isDisabled.value,
+                today: isDateToday.value,
+                selected: isSelectedDate.value,
+                outsideView: isOutsideView.value,
+                outsideVisibleView: isOutsideVisibleView.value,
+                unavailable: isUnavailable.value,
+              },
+              () => [createTextVNode(toDisplayString(dayValue.value), 1)],
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/calendar/CalendarGrid.ts

@@ -0,0 +1,101 @@
+import {
+  computed,
+  defineComponent,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  normalizeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import type { DateValue } from '@internationalized/date'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectCalendarRootContext } from './context'
+
+function primitiveProps(as: string) {
+  return {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false, default: as },
+  } as const
+}
+
+export function createGridGroup(name: string, as: string, extra?: Record<string, string>) {
+  return defineComponent({
+    name,
+    props: primitiveProps(as),
+    setup(props, { slots }) {
+      return () =>
+        h(Primitive, extra ? mergeProps(props, extra) : normalizeProps(guardReactiveProps(props)), {
+          default: withCtx(() => [renderSlot(slots, 'default')]),
+        })
+    },
+  })
+}
+
+export function createGrid(
+  name: string,
+  inject: () => { disabled: { value: boolean }; readonly: { value: boolean } },
+) {
+  return defineComponent({
+    name,
+    props: primitiveProps('table'),
+    setup(props, { slots }) {
+      const rootContext = inject()
+      const disabled = computed(() => (rootContext.disabled.value ? true : undefined))
+      const readonly = computed(() => (rootContext.readonly.value ? true : undefined))
+      return () =>
+        h(
+          Primitive,
+          mergeProps(props, {
+            tabindex: '-1',
+            role: 'application',
+            'aria-readonly': readonly.value,
+            'aria-disabled': disabled.value,
+            'data-readonly': readonly.value && '',
+            'data-disabled': disabled.value && '',
+          }),
+          { default: withCtx(() => [renderSlot(slots, 'default')]) },
+        )
+    },
+  })
+}
+
+export const CalendarGrid = createGrid('CalendarGrid', injectCalendarRootContext)
+export const CalendarGridHead = createGridGroup('CalendarGridHead', 'thead', {
+  'aria-hidden': 'true',
+})
+export const CalendarGridBody = createGridGroup('CalendarGridBody', 'tbody')
+export const CalendarGridRow = createGridGroup('CalendarGridRow', 'tr')
+export const CalendarHeadCell = createGridGroup('CalendarHeadCell', 'th')
+
+export const CalendarCell = defineComponent({
+  name: 'CalendarCell',
+  props: {
+    date: { type: null as unknown as PropType<DateValue>, required: true },
+    ...primitiveProps('td'),
+  },
+  setup(props, { slots }) {
+    const rootContext = injectCalendarRootContext()
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          role: 'gridcell',
+          'aria-selected': rootContext.isDateSelected(props.date) ? true : undefined,
+          'aria-disabled':
+            rootContext.isDateDisabled(props.date) ||
+            rootContext.isDateUnavailable?.(props.date) ||
+            rootContext.disableDaysOutsideCurrentView.value,
+          'data-disabled':
+            rootContext.isDateDisabled(props.date) ||
+            rootContext.disableDaysOutsideCurrentView.value
+              ? ''
+              : undefined,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/calendar/CalendarNav.ts

@@ -0,0 +1,88 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import type { PageFunction } from '../../../../shared/src/primitives/date/calendar-view'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { injectCalendarRootContext } from './context'
+
+interface PagingContext {
+  disabled: { value: boolean }
+  nextPage: (page?: PageFunction) => void
+  prevPage: (page?: PageFunction) => void
+  isNextButtonDisabled: (page?: PageFunction) => boolean
+  isPrevButtonDisabled: (page?: PageFunction) => boolean
+}
+
+export function createPagingButton(
+  name: string,
+  direction: 'next' | 'prev',
+  inject: () => PagingContext,
+  unit: 'page' | 'year' = 'page',
+) {
+  const label = direction === 'next' ? `Next ${unit}` : `Previous ${unit}`
+  const text = direction === 'next' ? ` Next ${unit} ` : ` Prev ${unit} `
+  const propName = direction === 'next' ? 'nextPage' : 'prevPage'
+  return defineComponent({
+    name,
+    props: {
+      [propName]: { type: Function as PropType<PageFunction>, required: false },
+      asChild: { type: Boolean, required: false },
+      as: {
+        type: null as unknown as PropType<PrimitiveProps['as']>,
+        required: false,
+        default: 'button',
+      },
+    } as {
+      nextPage: { type: PropType<PageFunction>; required: false }
+      prevPage: { type: PropType<PageFunction>; required: false }
+      asChild: { type: BooleanConstructor; required: false }
+      as: { type: PropType<PrimitiveProps['as']>; required: false; default: string }
+    },
+    setup(props, { slots }) {
+      const rootContext = inject()
+      const page = () => (props as unknown as Record<string, PageFunction | undefined>)[propName]
+      const disabled = computed(
+        () =>
+          rootContext.disabled.value ||
+          (direction === 'next'
+            ? rootContext.isNextButtonDisabled(page())
+            : rootContext.isPrevButtonDisabled(page())),
+      )
+      function handleClick() {
+        if (disabled.value) return
+        if (direction === 'next') rootContext.nextPage(page())
+        else rootContext.prevPage(page())
+      }
+      return () =>
+        h(
+          Primitive,
+          {
+            as: props.as,
+            'as-child': props.asChild,
+            'aria-label': label,
+            type: props.as === 'button' ? 'button' : undefined,
+            'aria-disabled': disabled.value || undefined,
+            'data-disabled': disabled.value || undefined,
+            disabled: disabled.value,
+            onClick: handleClick,
+          },
+          {
+            default: withCtx(() => [
+              renderSlot(slots, 'default', { disabled: disabled.value }, () => [
+                createTextVNode(text),
+              ]),
+            ]),
+          },
+        )
+    },
+  })
+}
+
+export const CalendarNext = createPagingButton('CalendarNext', 'next', injectCalendarRootContext)
+export const CalendarPrev = createPagingButton('CalendarPrev', 'prev', injectCalendarRootContext)