@hina-ui/vue 1.7.12 → 1.7.14

package/src/primitives/tree/TreeItem.ts

@@ -0,0 +1,256 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  withCtx,
+  withKeys,
+  withModifiers,
+  type AllowedComponentProps,
+  type ComponentCustomProps,
+  type PropType,
+  type VNode,
+  type VNodeProps,
+} from 'vue'
+import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
+import {
+  dispatchTreeItemEvent,
+  treeChildTarget,
+  treeIndeterminate,
+  treeParentTarget,
+  TREE_SELECT,
+  TREE_TOGGLE,
+  type TreeItemSelectEvent,
+  type TreeItemToggleEvent,
+  type TreeValue,
+} from '../../../../shared/src/primitives/tree'
+import { useCollection } from '../collection'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusItem } from '../roving-focus'
+import { injectTreeRootContext } from './context'
+
+export interface TreeItemProps<T = TreeValue> {
+  value: T
+  level: number
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type TreeItemEmits<T = TreeValue> = {
+  select: [event: TreeItemSelectEvent<T>]
+  toggle: [event: TreeItemToggleEvent<T>]
+}
+
+export interface TreeItemSlots {
+  default?: (props: {
+    isExpanded: boolean
+    isSelected: boolean
+    isIndeterminate: boolean | undefined
+    isDisabled: boolean
+    handleSelect: () => void
+    handleToggle: () => void
+  }) => unknown
+}
+
+type TreeItemPublicProps<T> = TreeItemProps<T> & {
+  onSelect?: (event: TreeItemSelectEvent<T>) => void
+  onToggle?: (event: TreeItemToggleEvent<T>) => void
+}
+
+interface TreeItemSetup<T> {
+  props: TreeItemPublicProps<T>
+  slots: TreeItemSlots
+  attrs: Record<string, unknown>
+  emit: unknown
+  expose: (exposed: Record<string, never>) => void
+}
+
+const TreeItemImpl = defineComponent({
+  name: 'TreeItem',
+  inheritAttrs: false,
+  props: {
+    value: { type: null as unknown as PropType<TreeValue>, required: true },
+    level: { type: Number, required: true },
+    disabled: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'li',
+    },
+  },
+  emits: ['select', 'toggle'],
+  setup(props, { emit, expose, slots, attrs }) {
+    const rootContext = injectTreeRootContext()
+    const { getItems } = useCollection()
+
+    const hasChildren = computed(() => !!rootContext.getChildren(props.value))
+    const isExpanded = computed(() =>
+      rootContext.expanded.value.includes(rootContext.getKey(props.value)),
+    )
+    const isSelected = computed(() =>
+      rootContext.selectedKeys.value.includes(rootContext.getKey(props.value)),
+    )
+    const isIndeterminate = computed(() =>
+      treeIndeterminate({
+        value: props.value,
+        model: rootContext.modelValue.value,
+        isSelected: isSelected.value,
+        hasChildren: hasChildren.value,
+        bubbleSelect: rootContext.bubbleSelect.value,
+        propagateSelect: rootContext.propagateSelect.value,
+        getKey: rootContext.getKey,
+        getChildren: rootContext.getChildren,
+      }),
+    )
+    const isDisabled = computed(() => rootContext.disabled.value || props.disabled)
+
+    function collection() {
+      return getItems().map(item => item.ref)
+    }
+
+    function handleKeydownRight(event: KeyboardEvent) {
+      if (isDisabled.value) return
+      if (!hasChildren.value) return
+      if (isExpanded.value) treeChildTarget(collection(), getActiveElement(), props.level)?.focus()
+      else handleToggleCustomEvent(event)
+    }
+
+    function handleKeydownLeft(event: KeyboardEvent) {
+      if (isDisabled.value) return
+      if (isExpanded.value) handleToggleCustomEvent(event)
+      else treeParentTarget(collection(), getActiveElement(), props.level)?.focus()
+    }
+
+    function handleSelect(event: TreeItemSelectEvent<TreeValue>) {
+      if (isDisabled.value) return
+      emit('select', event)
+      if (event?.defaultPrevented) return
+      rootContext.onSelect(props.value)
+    }
+
+    function handleToggle(event: TreeItemToggleEvent<TreeValue>) {
+      if (isDisabled.value) return
+      emit('toggle', event)
+      if (event?.defaultPrevented) return
+      rootContext.onToggle(props.value)
+    }
+
+    function detail(event: Event) {
+      return {
+        originalEvent: event,
+        value: props.value,
+        isExpanded: isExpanded.value,
+        isSelected: isSelected.value,
+      }
+    }
+
+    function handleSelectCustomEvent(event?: Event) {
+      if (!event) return
+      dispatchTreeItemEvent(TREE_SELECT, handleSelect, detail(event))
+    }
+
+    function handleToggleCustomEvent(event?: Event) {
+      if (!event) return
+      dispatchTreeItemEvent(TREE_TOGGLE, handleToggle, detail(event))
+    }
+
+    expose({
+      isExpanded,
+      isSelected,
+      isIndeterminate,
+      isDisabled,
+      handleToggle: () => rootContext.onToggle(props.value),
+      handleSelect: () => rootContext.onSelect(props.value),
+    })
+
+    const onKeydownRight = withKeys(
+      withModifiers(
+        ((event: KeyboardEvent) =>
+          rootContext.dir.value === 'ltr'
+            ? handleKeydownRight(event)
+            : handleKeydownLeft(event)) as (event: Event) => void,
+        ['prevent'],
+      ),
+      ['right'],
+    )
+    const onKeydownLeft = withKeys(
+      withModifiers(
+        ((event: KeyboardEvent) =>
+          rootContext.dir.value === 'ltr'
+            ? handleKeydownLeft(event)
+            : handleKeydownRight(event)) as (event: Event) => void,
+        ['prevent'],
+      ),
+      ['left'],
+    )
+    const onClick = withModifiers(
+      (event: Event) => {
+        handleSelectCustomEvent(event)
+        handleToggleCustomEvent(event)
+      },
+      ['stop'],
+    )
+
+    return () =>
+      h(
+        RovingFocusItem,
+        {
+          'as-child': '',
+          value: props.value,
+          'allow-shift-key': '',
+          focusable: !isDisabled.value,
+        },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              mergeProps(attrs, {
+                role: 'treeitem',
+                as: props.as,
+                'as-child': props.asChild,
+                'aria-selected': isSelected.value,
+                'aria-expanded': hasChildren.value ? isExpanded.value : undefined,
+                'aria-level': props.level,
+                'aria-disabled': isDisabled.value ? true : undefined,
+                'data-indent': props.level,
+                'data-selected': isSelected.value ? '' : undefined,
+                'data-expanded': isExpanded.value ? '' : undefined,
+                'data-disabled': isDisabled.value ? '' : undefined,
+                onKeydown: [
+                  withKeys(withModifiers(handleSelectCustomEvent, ['self', 'prevent']), [
+                    'enter',
+                    'space',
+                  ]),
+                  onKeydownRight,
+                  onKeydownLeft,
+                ],
+                onClick,
+              }),
+              {
+                default: withCtx(() => [
+                  renderSlot(slots, 'default', {
+                    isExpanded: isExpanded.value,
+                    isSelected: isSelected.value,
+                    isIndeterminate: isIndeterminate.value,
+                    isDisabled: isDisabled.value,
+                    handleSelect: () => rootContext.onSelect(props.value),
+                    handleToggle: () => rootContext.onToggle(props.value),
+                  }),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const TreeItem = TreeItemImpl as unknown as <T extends TreeValue = TreeValue>(
+  props: TreeItemPublicProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  ctx?: Pick<TreeItemSetup<T>, 'attrs' | 'slots' | 'emit'>,
+  expose?: TreeItemSetup<T>['expose'],
+  setup?: Promise<TreeItemSetup<T>>,
+) => VNode & { __ctx?: TreeItemSetup<T> }

package/src/primitives/tree/TreeRoot.ts

@@ -0,0 +1,273 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onScopeDispose,
+  ref,
+  renderSlot,
+  toRefs,
+  withCtx,
+  withKeys,
+  withModifiers,
+  type AllowedComponentProps,
+  type ComponentCustomProps,
+  type PropType,
+  type Ref,
+  type VNode,
+  type VNodeProps,
+} from 'vue'
+import {
+  createEventHook,
+  createTypeahead,
+  type ListboxSelectionBehavior,
+} from '../../../../shared/src/primitives/listbox'
+import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
+import {
+  defaultTreeChildren,
+  flattenTree,
+  nextTreeSelection,
+  toggleTreeExpanded,
+  treeRangeValues,
+  treeSelectedKeys,
+  TREE_KEY_TO_INTENT,
+  type FlattenedItem,
+  type TreeValue,
+} from '../../../../shared/src/primitives/tree'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusGroup } from '../roving-focus'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useVModel } from '../utils/useVModel'
+import { provideTreeRootContext, type TreeRootContext } from './context'
+
+type TreeModel<U, M extends boolean> = M extends true ? U[] : U
+
+export interface TreeRootProps<T = TreeValue, U = TreeValue, M extends boolean = false> {
+  modelValue?: TreeModel<U, M>
+  defaultValue?: TreeModel<U, M>
+  items?: T[]
+  expanded?: string[]
+  defaultExpanded?: string[]
+  getKey: (value: T) => string
+  getChildren?: (value: T) => T[] | undefined
+  selectionBehavior?: ListboxSelectionBehavior
+  multiple?: M | boolean
+  dir?: Direction
+  disabled?: boolean
+  propagateSelect?: boolean
+  bubbleSelect?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type TreeRootEmits<T = TreeValue, M extends boolean = false> = {
+  'update:modelValue': [value: TreeModel<T, M>]
+  'update:expanded': [value: string[]]
+}
+
+export interface TreeRootSlots<T, U, M extends boolean> {
+  default?: (props: {
+    flattenItems: FlattenedItem<T>[]
+    modelValue: TreeModel<U, M>
+    expanded: string[]
+  }) => unknown
+}
+
+type TreeRootPublicProps<T, U, M extends boolean> = TreeRootProps<T, U, M> & {
+  'onUpdate:modelValue'?: (value: TreeModel<U, M>) => void
+  'onUpdate:expanded'?: (value: string[]) => void
+}
+
+interface TreeRootSetup<T, U, M extends boolean> {
+  props: TreeRootPublicProps<T, U, M>
+  slots: TreeRootSlots<T, U, M>
+  attrs: Record<string, unknown>
+  emit: unknown
+  expose: (exposed: Record<string, never>) => void
+}
+
+const TreeRootImpl = defineComponent({
+  name: 'TreeRoot',
+  props: {
+    modelValue: { type: null, required: false },
+    defaultValue: { type: null, required: false },
+    items: { type: Array as PropType<TreeValue[]>, required: false },
+    expanded: { type: Array as PropType<string[]>, required: false },
+    defaultExpanded: { type: Array as PropType<string[]>, required: false },
+    getKey: { type: Function as PropType<(value: TreeValue) => string>, required: true },
+    getChildren: {
+      type: Function as PropType<(value: TreeValue) => TreeValue[] | undefined>,
+      required: false,
+      default: defaultTreeChildren,
+    },
+    selectionBehavior: {
+      type: String as PropType<ListboxSelectionBehavior>,
+      required: false,
+      default: 'toggle',
+    },
+    multiple: { type: Boolean, required: false },
+    dir: { type: String as PropType<Direction>, required: false },
+    disabled: { type: Boolean, required: false },
+    propagateSelect: { type: Boolean, required: false },
+    bubbleSelect: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'ul',
+    },
+  },
+  emits: ['update:modelValue', 'update:expanded'],
+  setup(props, { emit, slots }) {
+    const { items, multiple, disabled, propagateSelect, dir: propDir, bubbleSelect } = toRefs(props)
+    const typeahead = createTypeahead()
+    onScopeDispose(() => typeahead.dispose())
+    const dir = useDirection(propDir)
+    const rovingFocusGroupRef = ref<{
+      getItems: () => { ref: HTMLElement; value?: unknown }[]
+    }>()
+
+    const isVirtual = ref(false)
+    const virtualKeydownHook = createEventHook<KeyboardEvent>()
+
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
+      passive: true,
+    }) as Ref<unknown>
+
+    const expanded = useVModel(props, 'expanded', emit, {
+      defaultValue: props.defaultExpanded ?? [],
+      passive: props.expanded === undefined,
+    }) as Ref<string[]>
+
+    const firstValue = ref<unknown>()
+
+    const selectedKeys = computed(() =>
+      treeSelectedKeys(modelValue.value, multiple.value, props.getKey),
+    )
+
+    const expandedItems = computed(() =>
+      flattenTree(
+        props.items ?? [],
+        { getKey: props.getKey, getChildren: props.getChildren },
+        expanded.value,
+      ),
+    )
+
+    function handleMultipleReplace(
+      intent: Parameters<TreeRootContext['handleMultipleReplace']>[0],
+      currentElement: Element | null,
+      getItems: () => { ref: HTMLElement; value?: unknown }[],
+      options: unknown[],
+    ) {
+      const value = treeRangeValues(intent, currentElement, getItems(), options, {
+        firstValue: firstValue.value,
+        multiple: props.multiple,
+        model: modelValue.value,
+      })
+      if (value !== undefined) modelValue.value = value
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+      if (isVirtual.value) virtualKeydownHook.trigger(event)
+      else typeahead.handle(event.key, rovingFocusGroupRef.value?.getItems() ?? [])
+    }
+
+    function handleKeydownNavigation(event: KeyboardEvent) {
+      if (isVirtual.value) return
+      const intent = TREE_KEY_TO_INTENT[event.key]
+      void nextTick(() => {
+        handleMultipleReplace(
+          intent,
+          getActiveElement(),
+          rovingFocusGroupRef.value!.getItems,
+          expandedItems.value.map(item => item.value),
+        )
+      })
+    }
+
+    provideTreeRootContext({
+      modelValue: modelValue as Ref<TreeValue | TreeValue[]>,
+      selectedKeys,
+      onSelect: value => {
+        const next = nextTreeSelection(modelValue.value, value, {
+          getKey: props.getKey,
+          getChildren: props.getChildren,
+          multiple: props.multiple,
+          selectionBehavior: props.selectionBehavior,
+          propagateSelect: props.propagateSelect,
+          bubbleSelect: props.bubbleSelect,
+          flattened: expandedItems.value,
+        })
+        if (next.anchor) firstValue.value = value
+        modelValue.value = next.value
+      },
+      expanded,
+      onToggle(value) {
+        const children = value ? props.getChildren(value) : undefined
+        if (!children) return
+        expanded.value = toggleTreeExpanded(expanded.value, props.getKey(value) ?? value)
+      },
+      getKey: props.getKey,
+      getChildren: props.getChildren,
+      items,
+      expandedItems,
+      disabled,
+      multiple,
+      dir,
+      propagateSelect,
+      bubbleSelect,
+      isVirtual,
+      virtualKeydownHook,
+      handleMultipleReplace,
+    })
+
+    const onKeydown = [
+      handleKeydown,
+      withKeys(withModifiers(handleKeydownNavigation as (event: Event) => void, ['shift']), [
+        'up',
+        'down',
+      ]),
+    ]
+
+    return () =>
+      h(
+        RovingFocusGroup,
+        { ref: rovingFocusGroupRef, 'as-child': '', orientation: 'vertical', dir: dir.value },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                role: 'tree',
+                as: props.as,
+                'as-child': props.asChild,
+                'aria-multiselectable': multiple.value ? true : undefined,
+                onKeydown,
+              },
+              {
+                default: withCtx(() => [
+                  renderSlot(slots, 'default', {
+                    flattenItems: expandedItems.value,
+                    modelValue: modelValue.value,
+                    expanded: expanded.value,
+                  }),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const TreeRoot = TreeRootImpl as unknown as <
+  T extends TreeValue = TreeValue,
+  U extends TreeValue = TreeValue,
+  M extends boolean = false,
+>(
+  props: TreeRootPublicProps<T, U, M> & VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  ctx?: Pick<TreeRootSetup<T, U, M>, 'attrs' | 'slots' | 'emit'>,
+  expose?: TreeRootSetup<T, U, M>['expose'],
+  setup?: Promise<TreeRootSetup<T, U, M>>,
+) => VNode & { __ctx?: TreeRootSetup<T, U, M> }

package/src/primitives/tree/context.ts

@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import type { EventHook } from '../../../../shared/src/primitives/listbox'
+import type { FocusIntent } from '../../../../shared/src/primitives/roving-focus'
+import type { FlattenedItem } from '../../../../shared/src/primitives/tree'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface TreeRootContext<T = Record<string, any>> {
+  modelValue: Ref<T | T[]>
+  selectedKeys: Ref<string[]>
+  onSelect: (value: T) => void
+  expanded: Ref<string[]>
+  onToggle: (value: T) => void
+  items: Ref<T[] | undefined>
+  expandedItems: Ref<FlattenedItem<T>[]>
+  getKey: (value: T) => string
+  getChildren: (value: T) => T[] | undefined
+  multiple: Ref<boolean>
+  disabled: Ref<boolean>
+  dir: Ref<Direction>
+  propagateSelect: Ref<boolean>
+  bubbleSelect: Ref<boolean>
+  isVirtual: Ref<boolean>
+  virtualKeydownHook: EventHook<KeyboardEvent>
+  handleMultipleReplace: (
+    intent: FocusIntent | undefined,
+    currentElement: Element | null,
+    getItems: () => { ref: HTMLElement; value?: unknown }[],
+    options: unknown[],
+  ) => void
+}
+
+export const [injectTreeRootContext, provideTreeRootContext] =
+  createContext<TreeRootContext<any>>('TreeRoot')

package/src/primitives/tree/index.ts

@@ -0,0 +1,4 @@
+export { flatten, type FlattenedItem } from '../../../../shared/src/primitives/tree'
+export { injectTreeRootContext, type TreeRootContext } from './context'
+export { TreeItem, type TreeItemEmits, type TreeItemProps } from './TreeItem'
+export { TreeRoot, type TreeRootEmits, type TreeRootProps } from './TreeRoot'

package/src/primitives/utils/config.ts

@@ -1 +1,19 @@
-export { injectConfigProviderContext } from 'reka-ui'
+import type { Ref } from 'vue'
+import { createContext } from './createContext'
+
+export interface ScrollBodyOption {
+  padding?: boolean | number | string
+  margin?: boolean | number | string
+}
+
+export interface ConfigProviderContextValue {
+  dir?: Ref<'ltr' | 'rtl'>
+  locale?: Ref<string>
+  scrollBody?: Ref<boolean | ScrollBodyOption>
+  nonce?: Ref<string | undefined>
+  teleportTo?: Ref<string | HTMLElement | undefined>
+  useId?: () => string
+}
+
+export const [injectConfigProviderContext, provideConfigProviderContext] =
+  createContext<ConfigProviderContextValue>('ConfigProvider')

package/src/primitives/utils/defu.ts

@@ -0,0 +1,26 @@
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return (
+    value !== null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype
+  )
+}
+
+function merge(base: Record<string, unknown>, defaults: Record<string, unknown>) {
+  const result: Record<string, unknown> = { ...defaults }
+  for (const [key, value] of Object.entries(base)) {
+    if (value === null || value === undefined) continue
+    const fallback = result[key]
+    if (Array.isArray(value) && Array.isArray(fallback)) result[key] = [...value, ...fallback]
+    else if (isPlainObject(value) && isPlainObject(fallback)) result[key] = merge(value, fallback)
+    else result[key] = value
+  }
+  return result
+}
+
+export function defu<T extends Record<string, unknown>>(
+  ...sources: Array<Record<string, unknown>>
+) {
+  return sources.reduceRight<Record<string, unknown>>(
+    (defaults, source) => merge(source ?? {}, defaults),
+    {},
+  ) as T
+}

package/src/primitives/utils/env.ts

@@ -0,0 +1,5 @@
+declare const process: { env: { NODE_ENV?: string } }
+
+export function isDevelopment() {
+  return process.env.NODE_ENV !== 'production'
+}

package/src/primitives/utils/layers.ts

@@ -0,0 +1,4 @@
+export { DismissableLayer } from '../dismissable-layer/DismissableLayer'
+export { FocusScope } from '../focus-scope/FocusScope'
+export { useBodyScrollLock } from './useBodyScrollLock'
+export { useFocusGuards } from './useFocusGuards'

package/src/primitives/utils/propsWithoutDefaults.ts

@@ -0,0 +1,8 @@
+export function propsWithoutDefaults<T extends Record<string, object>>(props: T) {
+  return Object.fromEntries(
+    Object.entries(props).map(([key, option]) => {
+      const { default: _, ...rest } = option as { default?: unknown }
+      return [key, rest]
+    }),
+  ) as { [K in keyof T]: Omit<T[K], 'default'> }
+}

package/src/primitives/utils/useBodyScrollLock.ts

@@ -0,0 +1,29 @@
+import { computed, nextTick, ref } from 'vue'
+import { tryOnBeforeUnmount } from '@vueuse/core'
+import {
+  createScrollLock,
+  type ScrollBody,
+} from '../../../../shared/src/primitives/body-scroll-lock'
+import { injectConfigProviderContext } from './config'
+
+export function useBodyScrollLock(initialState?: boolean) {
+  const config = injectConfigProviderContext({ scrollBody: ref(true) }) as {
+    scrollBody?: { value: ScrollBody | undefined }
+  }
+  const lock = createScrollLock(
+    () => config.scrollBody?.value ?? true,
+    callback => void nextTick(callback),
+  )
+  const state = ref(initialState ?? false)
+  lock.set(state.value)
+
+  tryOnBeforeUnmount(() => lock.release())
+
+  return computed({
+    get: () => state.value,
+    set: value => {
+      state.value = value
+      lock.set(value)
+    },
+  })
+}

package/src/primitives/utils/useFocusGuards.ts

@@ -0,0 +1,10 @@
+import { watchEffect } from 'vue'
+import { isClient } from '@vueuse/core'
+import { installFocusGuards } from '../../../../shared/src/primitives/focus-guards'
+
+export function useFocusGuards() {
+  watchEffect(onCleanup => {
+    if (!isClient) return
+    onCleanup(installFocusGuards())
+  })
+}