@hina-ui/vue 1.7.12 → 1.7.14

package/src/primitives/dialog/DialogContentImpl.ts

@@ -0,0 +1,114 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onMounted,
+  renderSlot,
+  withCtx,
+  type Component,
+  type PropType,
+} from 'vue'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { dialogWarnings, warnDialogAccessibility } from '../../../../shared/src/primitives/dialog'
+import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
+import type { PrimitiveProps } from '../primitive'
+import { isDevelopment } from '../utils/env'
+import { DismissableLayer, FocusScope } from '../utils/layers'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { injectDialogRootContext } from './context'
+
+export const dialogContentEmits = [
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus',
+]
+
+export const DialogContentImpl = defineComponent({
+  name: 'DialogContentImpl',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    trapFocus: { type: Boolean, required: false },
+    disableOutsidePointerEvents: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    present: { type: Boolean, required: false },
+  },
+  emits: dialogContentEmits,
+  setup(props, { emit, attrs, slots }) {
+    const rootContext = injectDialogRootContext()
+    const { forwardRef, currentElement: contentElement } = useForwardExpose()
+    rootContext.titleId ||= useId(undefined, 'reka-dialog-title')
+    rootContext.descriptionId ||= useId(undefined, 'reka-dialog-description')
+
+    onMounted(() => {
+      rootContext.contentElement = contentElement
+      if (getActiveElement() !== document.body)
+        rootContext.triggerElement.value = getActiveElement() as HTMLElement
+    })
+
+    if (isDevelopment())
+      onMounted(() =>
+        warnDialogAccessibility(
+          dialogWarnings(),
+          rootContext.titleId,
+          rootContext.descriptionId,
+          contentElement.value,
+        ),
+      )
+
+    const onDismiss = () => rootContext.onOpenChange(false)
+    const onEscapeKeyDown = (event: Event) => emit('escapeKeyDown', event)
+    const onFocusOutside = (event: Event) => emit('focusOutside', event)
+    const onInteractOutside = (event: Event) => emit('interactOutside', event)
+    const onPointerDownOutside = (event: Event) => emit('pointerDownOutside', event)
+    const onMountAutoFocus = (event: Event) => emit('openAutoFocus', event)
+    const onUnmountAutoFocus = (event: Event) => emit('closeAutoFocus', event)
+
+    return () =>
+      h(
+        FocusScope as Component,
+        {
+          'as-child': '',
+          loop: '',
+          trapped: props.trapFocus,
+          present: props.present,
+          onMountAutoFocus,
+          onUnmountAutoFocus,
+        },
+        {
+          default: withCtx(() => [
+            h(
+              DismissableLayer as Component,
+              mergeProps(
+                {
+                  id: rootContext.contentId,
+                  ref: forwardRef,
+                  as: props.as,
+                  'as-child': props.asChild,
+                  present: props.present,
+                  'disable-outside-pointer-events': props.disableOutsidePointerEvents,
+                  role: 'dialog',
+                  'aria-describedby': rootContext.descriptionId,
+                  'aria-labelledby': rootContext.titleId,
+                  'data-state': openState(rootContext.open.value),
+                },
+                attrs,
+                {
+                  onDismiss,
+                  onEscapeKeyDown,
+                  onFocusOutside,
+                  onInteractOutside,
+                  onPointerDownOutside,
+                },
+              ),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/dialog/DialogOverlay.ts

@@ -0,0 +1,99 @@
+import {
+  createCommentVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  vShow,
+  watch,
+  withCtx,
+  withDirectives,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useBodyScrollLock } from '../utils/layers'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectDialogRootContext } from './context'
+
+export interface DialogOverlayProps {
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+const DialogOverlayImpl = defineComponent({
+  name: 'DialogOverlayImpl',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    present: { type: Boolean, required: false, default: true },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectDialogRootContext()
+    const scrollLocked = useBodyScrollLock(props.present)
+    watch(
+      () => props.present,
+      value => (scrollLocked.value = value),
+    )
+    useForwardExpose()
+    const onPointerdown = withModifiers(() => {}, ['left', 'self', 'prevent'])
+
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          'data-state': openState(rootContext.open.value),
+          style: { 'pointer-events': 'auto' },
+          onPointerdown,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const DialogOverlay = defineComponent({
+  name: 'DialogOverlay',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { attrs, slots }) {
+    const rootContext = injectDialogRootContext()
+    const { forwardRef } = useForwardExpose()
+
+    return () =>
+      rootContext?.modal.value
+        ? h(
+            Presence,
+            {
+              key: 0,
+              present: props.forceMount || rootContext.open.value,
+              forceMount: props.forceMount || !rootContext.unmountOnHide.value,
+            },
+            {
+              default: withCtx(({ present }: { present: boolean }) => [
+                withDirectives(
+                  h(
+                    DialogOverlayImpl,
+                    mergeProps(attrs, {
+                      ref: forwardRef,
+                      as: props.as,
+                      'as-child': props.asChild,
+                      present: rootContext.unmountOnHide.value || present,
+                    }),
+                    { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                  ),
+                  [[vShow, rootContext.unmountOnHide.value || present]],
+                ),
+              ]),
+            },
+          )
+        : createCommentVNode('v-if', true)
+  },
+})

package/src/primitives/dialog/DialogPortal.ts

@@ -0,0 +1,33 @@
+import {
+  defineComponent,
+  guardReactiveProps,
+  h,
+  normalizeProps,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { Teleport } from '../teleport'
+
+export interface DialogPortalProps {
+  to?: string | HTMLElement
+  disabled?: boolean
+  defer?: boolean
+  forceMount?: boolean
+}
+
+export const DialogPortal = defineComponent({
+  name: 'DialogPortal',
+  props: {
+    to: { type: null as unknown as PropType<string | HTMLElement>, required: false },
+    disabled: { type: Boolean, required: false },
+    defer: { type: Boolean, required: false },
+    forceMount: { type: Boolean, required: false },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(Teleport, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})

package/src/primitives/dialog/DialogRoot.ts

@@ -0,0 +1,61 @@
+import { defineComponent, ref, renderSlot, toRefs, type Ref } from 'vue'
+import { useVModel } from '../utils/useVModel'
+import { provideDialogRootContext } from './context'
+
+export interface DialogRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  modal?: boolean
+  unmountOnHide?: boolean
+}
+
+export type DialogRootEmits = {
+  'update:open': [value: boolean]
+}
+
+export const DialogRoot = defineComponent({
+  name: 'DialogRoot',
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, required: false, default: undefined },
+    defaultOpen: { type: Boolean, required: false, default: false },
+    modal: { type: Boolean, required: false, default: true },
+    unmountOnHide: { type: Boolean, required: false, default: true },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+    const triggerElement = ref<HTMLElement>()
+    const contentElement = ref<HTMLElement>()
+    const { modal, unmountOnHide } = toRefs(props)
+
+    provideDialogRootContext({
+      open,
+      modal,
+      unmountOnHide,
+      openModal: () => {
+        open.value = true
+      },
+      onOpenChange: value => {
+        open.value = value
+      },
+      onOpenToggle: () => {
+        open.value = !open.value
+      },
+      contentId: '',
+      titleId: '',
+      descriptionId: '',
+      triggerElement,
+      contentElement,
+    })
+
+    return () =>
+      renderSlot(slots, 'default', {
+        open: open.value,
+        close: () => (open.value = false),
+      })
+  },
+})

package/src/primitives/dialog/DialogText.ts

@@ -0,0 +1,59 @@
+import { defineComponent, h, mergeProps, renderSlot, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectDialogRootContext } from './context'
+
+export interface DialogTextProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+function asProp(fallback: string) {
+  return {
+    type: null as unknown as PropType<PrimitiveProps['as']>,
+    required: false,
+    default: fallback,
+  } as const
+}
+
+export const DialogTitle = defineComponent({
+  name: 'DialogTitle',
+  props: { asChild: { type: Boolean, required: false }, as: asProp('h2') },
+  setup(props, { slots }) {
+    const rootContext = injectDialogRootContext()
+    useForwardExpose()
+    return () =>
+      h(Primitive, mergeProps(props, { id: rootContext.titleId }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const DialogDescription = defineComponent({
+  name: 'DialogDescription',
+  props: { asChild: { type: Boolean, required: false }, as: asProp('p') },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectDialogRootContext()
+    return () =>
+      h(Primitive, mergeProps(props, { id: rootContext.descriptionId }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const DialogClose = defineComponent({
+  name: 'DialogClose',
+  props: { asChild: { type: Boolean, required: false }, as: asProp('button') },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectDialogRootContext()
+    const onClick = () => rootContext.onOpenChange(false)
+    return () =>
+      h(
+        Primitive,
+        mergeProps(props, { type: props.as === 'button' ? 'button' : undefined, onClick }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/dialog/DialogTrigger.ts

@@ -0,0 +1,46 @@
+import { defineComponent, h, mergeProps, onMounted, renderSlot, withCtx, type PropType } from 'vue'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { injectDialogRootContext } from './context'
+
+export interface DialogTriggerProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const DialogTrigger = defineComponent({
+  name: 'DialogTrigger',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectDialogRootContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+    rootContext.contentId ||= useId(undefined, 'reka-dialog-content')
+    onMounted(() => {
+      rootContext.triggerElement.value = currentElement.value
+    })
+
+    return () =>
+      h(
+        Primitive,
+        mergeProps(props, {
+          ref: forwardRef,
+          type: props.as === 'button' ? 'button' : undefined,
+          'aria-haspopup': 'dialog',
+          'aria-expanded': rootContext.open.value || false,
+          'aria-controls': rootContext.open.value ? rootContext.contentId : undefined,
+          'data-state': openState(rootContext.open.value),
+          onClick: rootContext.onOpenToggle,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

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

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export interface DialogRootContext {
+  open: Readonly<Ref<boolean>>
+  modal: Ref<boolean>
+  unmountOnHide: Ref<boolean>
+  openModal: () => void
+  onOpenChange: (value: boolean) => void
+  onOpenToggle: () => void
+  triggerElement: Ref<HTMLElement | undefined>
+  contentElement: Ref<HTMLElement | undefined>
+  contentId: string
+  titleId: string
+  descriptionId: string
+}
+
+export const [injectDialogRootContext, provideDialogRootContext] =
+  createContext<DialogRootContext>('DialogRoot')

package/src/primitives/dialog/index.ts

@@ -0,0 +1,7 @@
+export { injectDialogRootContext, type DialogRootContext } from './context'
+export { DialogContent, type DialogContentProps } from './DialogContent'
+export { DialogOverlay, type DialogOverlayProps } from './DialogOverlay'
+export { DialogPortal, type DialogPortalProps } from './DialogPortal'
+export { DialogRoot, type DialogRootEmits, type DialogRootProps } from './DialogRoot'
+export { DialogClose, DialogDescription, DialogTitle, type DialogTextProps } from './DialogText'
+export { DialogTrigger, type DialogTriggerProps } from './DialogTrigger'