@hina-ui/vue 1.7.12 → 1.7.14

package/src/primitives/popover/PopoverContent.ts

@@ -0,0 +1,243 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  renderSlot,
+  withCtx,
+  withModifiers,
+  type Component,
+} from 'vue'
+import type { FocusOutsideEvent, PointerDownOutsideEvent } from '../dismissable-layer'
+import { PopperContent, popperContentProps, type PopperContentProps } from '../popper'
+import { Presence } from '../presence'
+import { DismissableLayer, FocusScope, useBodyScrollLock, useFocusGuards } from '../utils/layers'
+import { propsWithoutDefaults } from '../utils/propsWithoutDefaults'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardProps } from '../utils/useForwardProps'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+import { useHideOthers } from '../utils/useHideOthers'
+import { useId } from '../utils/useId'
+import { injectPopoverRootContext } from './context'
+
+type OutsideEvent = CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>
+
+const contentEmits = [
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus',
+]
+
+const contentProps = {
+  ...propsWithoutDefaults(popperContentProps),
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+} as const
+
+const PopoverContentImpl = defineComponent({
+  name: 'PopoverContentImpl',
+  props: { trapFocus: { type: Boolean, required: false }, ...contentProps },
+  emits: contentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardProps(
+      computed(() => {
+        const { trapFocus: _, disableOutsidePointerEvents: __, ...rest } = props
+        return rest
+      }),
+    )
+    const { forwardRef } = useForwardExpose()
+    const rootContext = injectPopoverRootContext()
+    useFocusGuards()
+
+    return () =>
+      h(
+        FocusScope as Component,
+        {
+          'as-child': '',
+          loop: '',
+          trapped: props.trapFocus,
+          onMountAutoFocus: (event: Event) => emit('openAutoFocus', event),
+          onUnmountAutoFocus: (event: Event) => emit('closeAutoFocus', event),
+        },
+        {
+          default: withCtx(() => [
+            h(
+              DismissableLayer as Component,
+              {
+                'as-child': '',
+                'disable-outside-pointer-events': props.disableOutsidePointerEvents,
+                onPointerDownOutside: (event: Event) => emit('pointerDownOutside', event),
+                onInteractOutside: (event: Event) => emit('interactOutside', event),
+                onEscapeKeyDown: (event: Event) => emit('escapeKeyDown', event),
+                onFocusOutside: (event: Event) => emit('focusOutside', event),
+                onDismiss: () => rootContext.onOpenChange(false),
+              },
+              {
+                default: withCtx(() => [
+                  h(
+                    PopperContent as Component,
+                    mergeProps(forwarded.value, {
+                      id: rootContext.contentId,
+                      ref: forwardRef,
+                      'data-state': rootContext.open.value ? 'open' : 'closed',
+                      'aria-labelledby': rootContext.triggerId,
+                      style: {
+                        '--reka-popover-content-transform-origin':
+                          'var(--reka-popper-transform-origin)',
+                        '--reka-popover-content-available-width':
+                          'var(--reka-popper-available-width)',
+                        '--reka-popover-content-available-height':
+                          'var(--reka-popper-available-height)',
+                        '--reka-popover-trigger-width': 'var(--reka-popper-anchor-width)',
+                        '--reka-popover-trigger-height': 'var(--reka-popper-anchor-height)',
+                      },
+                      role: 'dialog',
+                    }),
+                    { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                  ),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+const PopoverContentModal = defineComponent({
+  name: 'PopoverContentModal',
+  props: contentProps,
+  emits: contentEmits,
+  setup(props, { emit, slots }) {
+    const rootContext = injectPopoverRootContext()
+    const isRightClickOutside = ref(false)
+    useBodyScrollLock(true)
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const { forwardRef, currentElement } = useForwardExpose()
+    useHideOthers(currentElement)
+
+    const onCloseAutoFocus = withModifiers(
+      ((event: Event) => {
+        emit('closeAutoFocus', event)
+        if (!isRightClickOutside.value) rootContext.triggerElement.value?.focus()
+      }) as (event: Event) => void,
+      ['prevent'],
+    )
+    const onPointerDownOutside = (event: OutsideEvent) => {
+      emit('pointerDownOutside', event)
+      const originalEvent = event.detail.originalEvent as PointerEvent
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true
+      isRightClickOutside.value = originalEvent.button === 2 || ctrlLeftClick
+    }
+    const onFocusOutside = withModifiers(() => {}, ['prevent'])
+
+    return () =>
+      h(
+        PopoverContentImpl as Component,
+        mergeProps(forwarded.value, {
+          ref: forwardRef,
+          'trap-focus': rootContext.open.value,
+          'disable-outside-pointer-events': '',
+          onCloseAutoFocus,
+          onPointerDownOutside,
+          onFocusOutside,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+const PopoverContentNonModal = defineComponent({
+  name: 'PopoverContentNonModal',
+  props: contentProps,
+  emits: contentEmits,
+  setup(props, { emit, slots }) {
+    const rootContext = injectPopoverRootContext()
+    const hasInteractedOutside = ref(false)
+    const hasPointerDownOutside = ref(false)
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+
+    const onCloseAutoFocus = (event: Event) => {
+      emit('closeAutoFocus', event)
+      if (!event.defaultPrevented) {
+        if (!hasInteractedOutside.value) rootContext.triggerElement.value?.focus()
+        event.preventDefault()
+      }
+      hasInteractedOutside.value = false
+      hasPointerDownOutside.value = false
+    }
+    const onInteractOutside = async (event: OutsideEvent) => {
+      emit('interactOutside', event)
+      if (!event.defaultPrevented) {
+        hasInteractedOutside.value = true
+        if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutside.value = true
+      }
+      const target = event.target as HTMLElement
+      if (rootContext.triggerElement.value?.contains(target)) event.preventDefault()
+      if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutside.value)
+        event.preventDefault()
+    }
+
+    return () =>
+      h(
+        PopoverContentImpl as Component,
+        mergeProps(forwarded.value, {
+          'trap-focus': false,
+          'disable-outside-pointer-events': false,
+          onCloseAutoFocus,
+          onInteractOutside,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const PopoverContent = defineComponent({
+  name: 'PopoverContent',
+  props: { forceMount: { type: Boolean, required: false }, ...contentProps },
+  emits: contentEmits,
+  setup(props, { emit, slots }) {
+    const rootContext = injectPopoverRootContext()
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const { forwardRef } = useForwardExpose()
+    rootContext.contentId ||= useId(undefined, 'reka-popover-content')
+
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || rootContext.open.value },
+        {
+          default: withCtx(() => [
+            rootContext.modal.value
+              ? h(
+                  PopoverContentModal as Component,
+                  mergeProps({ key: 0 }, forwarded.value, { ref: forwardRef }),
+                  { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                )
+              : h(
+                  PopoverContentNonModal as Component,
+                  mergeProps({ key: 1 }, forwarded.value, { ref: forwardRef }),
+                  { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                ),
+          ]),
+        },
+      )
+  },
+})
+
+export interface PopoverContentProps extends PopperContentProps {
+  forceMount?: boolean
+  disableOutsidePointerEvents?: boolean
+}
+
+export type PopoverContentEmits = {
+  escapeKeyDown: [event: KeyboardEvent]
+  pointerDownOutside: [event: PointerDownOutsideEvent]
+  focusOutside: [event: FocusOutsideEvent]
+  interactOutside: [event: PointerDownOutsideEvent | FocusOutsideEvent]
+  openAutoFocus: [event: Event]
+  closeAutoFocus: [event: Event]
+}

package/src/primitives/popover/PopoverParts.ts

@@ -0,0 +1,143 @@
+import {
+  defineComponent,
+  guardReactiveProps,
+  h,
+  normalizeProps,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  resolveDynamicComponent,
+  withCtx,
+  type Component,
+  type PropType,
+} from 'vue'
+import { PopperAnchor, PopperArrow } from '../popper'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { Teleport } from '../teleport'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { injectPopoverRootContext } from './context'
+
+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
+
+export const PopoverTrigger = defineComponent({
+  name: 'PopoverTrigger',
+  props: primitive('button'),
+  setup(props, { slots }) {
+    const rootContext = injectPopoverRootContext()
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    rootContext.triggerId ||= useId(undefined, 'reka-popover-trigger')
+    rootContext.contentId ||= useId(undefined, 'reka-popover-content')
+    onMounted(() => {
+      rootContext.triggerElement.value = triggerElement.value
+    })
+    return () =>
+      h(
+        resolveDynamicComponent(
+          rootContext.hasCustomAnchor.value ? Primitive : PopperAnchor,
+        ) as Component,
+        { 'as-child': '' },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                id: rootContext.triggerId,
+                ref: forwardRef,
+                type: props.as === 'button' ? 'button' : undefined,
+                'aria-haspopup': 'dialog',
+                'aria-expanded': rootContext.open.value,
+                'aria-controls': rootContext.open.value ? rootContext.contentId : undefined,
+                'data-state': rootContext.open.value ? 'open' : 'closed',
+                as: props.as,
+                'as-child': props.asChild,
+                onClick: rootContext.onOpenToggle,
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const PopoverAnchor = defineComponent({
+  name: 'PopoverAnchor',
+  props: { reference: { type: null, required: false }, ...primitive() },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectPopoverRootContext()
+    onBeforeMount(() => {
+      rootContext.hasCustomAnchor.value = true
+    })
+    onUnmounted(() => {
+      rootContext.hasCustomAnchor.value = false
+    })
+    return () =>
+      h(PopperAnchor as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const PopoverClose = defineComponent({
+  name: 'PopoverClose',
+  props: primitive('button'),
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectPopoverRootContext()
+    return () =>
+      h(
+        Primitive,
+        {
+          type: props.as === 'button' ? 'button' : undefined,
+          as: props.as,
+          'as-child': props.asChild,
+          onClick: () => rootContext.onOpenChange(false),
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const PopoverArrow = defineComponent({
+  name: 'PopoverArrow',
+  props: {
+    width: { type: Number, required: false, default: 10 },
+    height: { type: Number, required: false, default: 5 },
+    rounded: { type: Boolean, required: false },
+    ...primitive('svg'),
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    return () =>
+      h(PopperArrow as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const PopoverPortal = defineComponent({
+  name: 'PopoverPortal',
+  props: {
+    to: { type: null, required: false },
+    disabled: { type: Boolean, required: false },
+    defer: { type: Boolean, required: false },
+    forceMount: { type: Boolean, required: false },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(Teleport as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})

package/src/primitives/popover/PopoverRoot.ts

@@ -0,0 +1,58 @@
+import { defineComponent, h, ref, renderSlot, toRefs, withCtx, type Ref } from 'vue'
+import { PopperRoot } from '../popper'
+import { useVModel } from '../utils/useVModel'
+import { providePopoverRootContext } from './context'
+
+export interface PopoverRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+  modal?: boolean
+}
+
+export type PopoverRootEmits = {
+  'update:open': [value: boolean]
+}
+
+export const PopoverRoot = defineComponent({
+  name: 'PopoverRoot',
+  props: {
+    defaultOpen: { type: Boolean, required: false, default: false },
+    open: { type: Boolean, required: false, default: undefined },
+    modal: { type: Boolean, required: false, default: false },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const { modal } = toRefs(props)
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+    const triggerElement = ref<HTMLElement>()
+    const hasCustomAnchor = ref(false)
+
+    providePopoverRootContext({
+      contentId: '',
+      triggerId: '',
+      modal,
+      open,
+      onOpenChange: value => {
+        open.value = value
+      },
+      onOpenToggle: () => {
+        open.value = !open.value
+      },
+      triggerElement,
+      hasCustomAnchor,
+    })
+
+    return () =>
+      h(PopperRoot, null, {
+        default: withCtx(() => [
+          renderSlot(slots, 'default', {
+            open: open.value,
+            close: () => (open.value = false),
+          }),
+        ]),
+      })
+  },
+})

package/src/primitives/popover/context.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export interface PopoverRootContext {
+  triggerElement: Ref<HTMLElement | undefined>
+  contentId: string
+  triggerId: string
+  open: Ref<boolean>
+  modal: Ref<boolean>
+  onOpenChange: (value: boolean) => void
+  onOpenToggle: () => void
+  hasCustomAnchor: Ref<boolean>
+}
+
+export const [injectPopoverRootContext, providePopoverRootContext] =
+  createContext<PopoverRootContext>('PopoverRoot')

package/src/primitives/popover/index.ts

@@ -0,0 +1,14 @@
+export { injectPopoverRootContext, type PopoverRootContext } from './context'
+export {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+} from './PopoverContent'
+export {
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverPortal,
+  PopoverTrigger,
+} from './PopoverParts'
+export { PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from './PopoverRoot'

package/src/primitives/popper/Arrow.ts

@@ -0,0 +1,49 @@
+import { defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import { ARROW_PATH, ROUNDED_ARROW_PATH } from '../../../../shared/src/primitives/popper'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+
+export interface ArrowProps {
+  width?: number
+  height?: number
+  rounded?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const Arrow = defineComponent({
+  name: 'Arrow',
+  props: {
+    width: { type: Number, required: false, default: 10 },
+    height: { type: Number, required: false, default: 5 },
+    rounded: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'svg',
+    },
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    return () =>
+      h(
+        Primitive,
+        mergeProps(props, {
+          width: props.width,
+          height: props.height,
+          viewBox: props.asChild ? undefined : '0 0 12 6',
+          preserveAspectRatio: props.asChild ? undefined : 'none',
+        }),
+        {
+          default: withCtx(() => [
+            renderSlot(slots, 'default', {}, () => [
+              !props.rounded
+                ? h('path', { key: 0, d: ARROW_PATH })
+                : h('path', { key: 1, d: ROUNDED_ARROW_PATH }),
+            ]),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/popper/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/popper/PopperAnchor.ts

@@ -0,0 +1,33 @@
+import { defineComponent, h, renderSlot, watchPostEffect, withCtx, type PropType } from 'vue'
+import type { ReferenceElement } from '@floating-ui/vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectPopperRootContext } from './context'
+
+export interface PopperAnchorProps {
+  reference?: ReferenceElement
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const PopperAnchor = defineComponent({
+  name: 'PopperAnchor',
+  props: {
+    reference: { type: null as unknown as PropType<ReferenceElement>, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const rootContext = injectPopperRootContext()
+    watchPostEffect(() => {
+      rootContext.onAnchorChange(props.reference ?? currentElement.value)
+    })
+    return () =>
+      h(
+        Primitive,
+        { ref: forwardRef, as: props.as, 'as-child': props.asChild },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/popper/PopperArrow.ts

@@ -0,0 +1,77 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  normalizeStyle,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { popperArrowStyle } from '../../../../shared/src/primitives/popper'
+import type { PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { Arrow } from './Arrow'
+import { injectPopperContentContext } from './context'
+
+export interface PopperArrowProps {
+  width?: number
+  height?: number
+  rounded?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const PopperArrow = defineComponent({
+  name: 'PopperArrow',
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, required: false },
+    height: { type: Number, required: false },
+    rounded: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'svg',
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const { forwardRef } = useForwardExpose()
+    const contentContext = injectPopperContentContext()
+    const onArrowRef = (element: unknown) => {
+      contentContext.onArrowChange((element as HTMLElement | null) ?? undefined)
+      return undefined
+    }
+
+    return () =>
+      h(
+        'span',
+        {
+          ref: onArrowRef,
+          style: normalizeStyle(
+            popperArrowStyle(
+              contentContext.placedSide.value,
+              contentContext.arrowX?.value,
+              contentContext.arrowY?.value,
+              contentContext.shouldHideArrow.value,
+            ),
+          ),
+        },
+        [
+          h(
+            Arrow,
+            mergeProps(attrs, {
+              ref: forwardRef,
+              style: { display: 'block' },
+              as: props.as,
+              'as-child': props.asChild,
+              rounded: props.rounded,
+              width: props.width,
+              height: props.height,
+            }),
+            { default: withCtx(() => [renderSlot(slots, 'default')]) },
+          ),
+        ],
+      )
+  },
+})