@hina-ui/vue 1.3.1 → 1.5.0

package/src/components/tooltip/TooltipDirectiveRoot.ts

@@ -0,0 +1,61 @@
+import { computed, defineComponent, h, type PropType } from 'vue'
+import {
+  TooltipTrigger,
+  TooltipRoot,
+  injectTooltipProviderContext,
+  injectTooltipRootContext,
+} from 'reka-ui'
+import TooltipBubble from './TooltipBubble.vue'
+import { useTooltipTarget } from './composables/useTooltipTarget'
+import type { TooltipDirectiveOptions } from './types'
+
+const TooltipTarget = defineComponent({
+  name: 'HnTooltipTarget',
+  props: {
+    target: { type: Object as PropType<HTMLElement>, required: true },
+    options: { type: Object as PropType<TooltipDirectiveOptions>, required: true },
+    revision: { type: Number, required: true },
+  },
+  setup(props) {
+    const root = injectTooltipRootContext()
+    const ExternalTarget = defineComponent({
+      name: 'HnTooltipElement',
+      inheritAttrs: false,
+      setup(_, { attrs }) {
+        useTooltipTarget(props.target, attrs, () => props.revision)
+        return () => null
+      },
+    })
+    return () => [
+      h(TooltipTrigger, {
+        key: root.disabled.value ? 'disabled' : 'enabled',
+        reference: props.target,
+        as: ExternalTarget,
+      }),
+      h(TooltipBubble, props.options),
+    ]
+  },
+})
+
+export default defineComponent({
+  name: 'HnTooltipDirectiveRoot',
+  props: {
+    target: { type: Object as PropType<HTMLElement>, required: true },
+    options: { type: Object as PropType<TooltipDirectiveOptions>, required: true },
+    revision: { type: Number, required: true },
+  },
+  setup(props) {
+    const provider = injectTooltipProviderContext(null)
+    const disabled = computed(() => !!props.options.disabled || !props.options.content.trim())
+    return () =>
+      provider
+        ? h(
+            TooltipRoot,
+            { disabled: disabled.value, ignoreNonKeyboardFocus: true },
+            {
+              default: () => h(TooltipTarget, props),
+            },
+          )
+        : null
+  },
+})

package/src/components/tooltip/composables/useTooltipTarget.ts

@@ -0,0 +1,56 @@
+import { onScopeDispose, watch, watchPostEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { injectTooltipProviderContext, injectTooltipRootContext } from 'reka-ui'
+
+type Handler = (event: Event) => void
+
+export function useTooltipTarget(
+  target: HTMLElement,
+  attrs: Record<string, unknown>,
+  revision: () => number,
+) {
+  const root = injectTooltipRootContext()
+  const provider = injectTooltipProviderContext()
+
+  watchPostEffect(() => {
+    if (root.trigger.value !== target) root.onTriggerChange(target)
+  })
+
+  const contentId = root.contentId
+  const graceAttribute = 'data-grace-area-trigger'
+  const previousGrace = target.getAttribute(graceAttribute)
+  target.setAttribute(graceAttribute, '')
+
+  function describe(open: boolean) {
+    const ids = new Set(
+      (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean),
+    )
+    ids.delete(contentId)
+    if (open) ids.add(contentId)
+    if (ids.size) target.setAttribute('aria-describedby', [...ids].join(' '))
+    else target.removeAttribute('aria-describedby')
+  }
+
+  for (const event of ['pointermove', 'pointerleave', 'pointerdown', 'focus', 'blur', 'click']) {
+    const prop = 'on' + event[0]!.toUpperCase() + event.slice(1)
+    useEventListener(target, event, (event: Event) => {
+      const handlers = attrs[prop] as Handler | Handler[] | undefined
+      for (const handler of Array.isArray(handlers) ? handlers : handlers ? [handlers] : []) {
+        handler(event)
+      }
+    })
+  }
+
+  watch([root.open, revision], ([open]) => describe(open), { immediate: true, flush: 'post' })
+  watch(root.disabled, disabled => {
+    if (disabled) root.onClose()
+  })
+
+  onScopeDispose(() => {
+    if (root.open.value) provider.onClose()
+    root.onClose()
+    describe(false)
+    if (previousGrace === null) target.removeAttribute(graceAttribute)
+    else target.setAttribute(graceAttribute, previousGrace)
+  })
+}

package/src/components/tooltip/directive.ts

@@ -0,0 +1,54 @@
+import { h, render, type AppContext, type DirectiveBinding, type ObjectDirective } from 'vue'
+import TooltipDirectiveRoot from './TooltipDirectiveRoot'
+import { directiveContext } from './utils/directiveContext'
+import type { TooltipDirectiveOptions, TooltipDirectiveValue } from './types'
+
+interface TooltipMount {
+  container: HTMLElement
+  context: AppContext
+  revision: number
+}
+
+const mounts = new WeakMap<HTMLElement, TooltipMount>()
+let nextId = 0
+
+function options(value: TooltipDirectiveValue): TooltipDirectiveOptions {
+  return typeof value === 'string' ? { content: value } : value ? { ...value } : { content: '' }
+}
+
+function update(target: HTMLElement, binding: DirectiveBinding<TooltipDirectiveValue>) {
+  const mount = mounts.get(target)
+  if (!mount) return
+  const vnode = h(TooltipDirectiveRoot, {
+    target,
+    options: options(binding.value),
+    revision: ++mount.revision,
+  })
+  vnode.appContext = mount.context
+  render(vnode, mount.container)
+}
+
+export const vTooltip: ObjectDirective<HTMLElement, TooltipDirectiveValue> = {
+  deep: true,
+  mounted(target, binding) {
+    const owner = binding.instance?.$
+    if (!owner) return
+    const context = directiveContext(owner, target)
+    context.config = Object.create(context.config) as AppContext['config']
+    context.config.idPrefix = 'hn-tooltip-' + ++nextId
+    mounts.set(target, {
+      container: target.ownerDocument.createElement('div'),
+      context,
+      revision: 0,
+    })
+    update(target, binding)
+  },
+  updated: update,
+  beforeUnmount(target) {
+    const mount = mounts.get(target)
+    if (!mount) return
+    render(null, mount.container)
+    mounts.delete(target)
+  },
+  getSSRProps: () => ({}),
+}

package/src/components/tooltip/types.ts

@@ -0,0 +1,15 @@
+export interface TooltipProps {
+  content?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  open?: boolean
+  disabled?: boolean
+  class?: string
+}
+
+export type TooltipDirectiveOptions = Omit<TooltipProps, 'open' | 'content'> & {
+  content: string
+}
+
+export type TooltipDirectiveValue = string | TooltipDirectiveOptions | null | undefined | false

package/src/components/tooltip/utils/directiveContext.ts

@@ -0,0 +1,32 @@
+import { isVNode, type AppContext, type ComponentInternalInstance, type VNode } from 'vue'
+
+type ContextOwner = ComponentInternalInstance & { provides: AppContext['provides'] }
+
+function findOwner(
+  node: VNode,
+  target: HTMLElement,
+  owner: ComponentInternalInstance,
+): ComponentInternalInstance | undefined {
+  if (node.component) {
+    return findOwner(node.component.subTree, target, node.component)
+  }
+  if (node.suspense) {
+    for (const branch of [node.suspense.activeBranch, node.suspense.pendingBranch]) {
+      const match = branch && findOwner(branch, target, owner)
+      if (match) return match
+    }
+  }
+  if (node.el === target) return owner
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      if (!isVNode(child)) continue
+      const match = findOwner(child, target, owner)
+      if (match) return match
+    }
+  }
+}
+
+export function directiveContext(owner: ComponentInternalInstance, target: HTMLElement) {
+  const parent = (findOwner(owner.subTree, target, owner) ?? owner) as ContextOwner
+  return { ...parent.appContext, provides: parent.provides }
+}

package/src/components/tree-select/TreeSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue'
+  import { useId } from 'vue'
   import { Check } from '@lucide/vue'
   import {
     PopoverContent,
@@ -29,7 +29,9 @@
     treeSelectRow,
     treeSelectToggle,
   } from './tree-select.variants'
-  import { findNode, pathTo, type TreeSelectNode } from './types'
+  import type { TreeSelectNode } from './types'
+  import TreeSelectSearch from './TreeSelectSearch.vue'
+  import { useTreeSelect } from './composables/useTreeSelect'
 
   defineOptions({ name: 'HnTreeSelect', inheritAttrs: false })
 
@@ -37,6 +39,8 @@
     defineProps<{
       items: TreeSelectNode[]
       placeholder?: string
+      searchable?: boolean
+      searchPlaceholder?: string
       defaultExpanded?: Array<string | number>
       variant?: InputVariants['variant']
       size?: InputVariants['size']
@@ -49,6 +53,9 @@
 
   const model = defineModel<string | number | null>()
   const open = defineModel<boolean>('open', { default: false })
+  const search = defineModel<string>('search', { default: '' })
+  const treeId = useId()
+  const triggerId = useId()
 
   defineSlots<{ node(props: { node: TreeSelectNode }): unknown }>()
 
@@ -60,82 +67,102 @@
     invalid,
     disabled,
     describedBy,
+    labelledBy,
   } = useFieldControl({
     invalid: () => props.invalid || !!group?.invalid.value,
     disabled: () => props.disabled || !!group?.disabled.value,
   })
-  const selected = computed(() => findNode(props.items, model.value))
-  const expanded = ref<string[]>([])
-
-  watch(
-    open,
-    isOpen => {
-      if (!isOpen) return
-      const path = pathTo(props.items, model.value) ?? []
-      expanded.value = Array.from(
-        new Set([...props.defaultExpanded, ...path].map(value => String(value))),
-      )
-    },
-    { immediate: true },
-  )
-
-  function key(node: TreeSelectNode) {
-    return String(node.value)
-  }
-
-  function choose(node: TreeSelectNode | undefined) {
-    if (!node || node.disabled) return
-    model.value = node.value
-    open.value = false
-  }
-
-  function keepRowClick(event: CustomEvent<{ originalEvent: Event }>) {
-    if (event.detail.originalEvent.type === 'click') event.preventDefault()
-  }
+  const {
+    selected,
+    items,
+    expanded,
+    input,
+    tree,
+    getChildren,
+    key,
+    choose,
+    keepRowClick,
+    focusSearch,
+    clearSearch,
+    onEscape,
+    onSearchKeydown,
+    onTreeKeydown,
+  } = useTreeSelect(props, model, open, search)
 </script>
 
 <template>
   <PopoverRoot v-model:open="open" modal>
-    <PopoverTrigger
-      v-bind="$attrs"
-      :id="fieldId"
-      :aria-describedby="describedBy"
-      data-hn-tree-select
-      role="combobox"
-      :aria-expanded="open"
-      :disabled="disabled"
-      :data-placeholder="selected ? undefined : ''"
-      :data-invalid="invalid ? '' : undefined"
-      :data-disabled="disabled ? '' : undefined"
-      :aria-invalid="invalid || undefined"
-      :class="
-        cn(
-          group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
-          selectTrigger(),
-          props.class,
-        )
-      "
-    >
-      <span class="min-w-0 flex-1 truncate">
-        {{ selected ? selected.label : (props.placeholder ?? t.select.placeholder) }}
-      </span>
-      <span :class="inputAdornment()">
-        <DisclosureIcon />
-      </span>
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        v-bind="$attrs"
+        :id="fieldId ?? triggerId"
+        :aria-describedby="describedBy"
+        data-hn-tree-select
+        role="combobox"
+        :aria-expanded="open"
+        :disabled="disabled"
+        :data-placeholder="selected ? undefined : ''"
+        :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
+        :aria-invalid="invalid || undefined"
+        :class="
+          cn(
+            group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+            selectTrigger(),
+            props.class,
+          )
+        "
+      >
+        <span class="min-w-0 flex-1 truncate">
+          {{ selected ? selected.label : (props.placeholder ?? t.select.placeholder) }}
+        </span>
+        <span :class="inputAdornment()">
+          <DisclosureIcon />
+        </span>
+      </button>
     </PopoverTrigger>
     <PopoverPortal>
-      <PopoverContent as-child align="start" :side-offset="8">
-        <Card :padded="false" data-hn-tree-select-content :class="treeSelectContent()">
+      <PopoverContent
+        as-child
+        align="start"
+        :side-offset="8"
+        @open-auto-focus="focusSearch"
+        @escape-key-down="onEscape"
+      >
+        <Card
+          :padded="false"
+          data-hn-tree-select-content
+          :aria-label="$attrs['aria-label'] as string | undefined"
+          :aria-labelledby="
+            labelledBy ?? ($attrs['aria-label'] ? undefined : (fieldId ?? triggerId))
+          "
+          :class="treeSelectContent()"
+        >
+          <TreeSelectSearch
+            v-if="props.searchable"
+            ref="input"
+            v-model="search"
+            :placeholder="props.searchPlaceholder ?? t.treeSelect.search"
+            :controls="treeId"
+            @clear="clearSearch"
+            @keydown="onSearchKeydown"
+          />
           <ScrollArea :class="treeSelectList()">
             <TreeRoot
+              :id="treeId"
+              ref="tree"
               v-slot="{ flattenItems }"
               v-model:expanded="expanded"
-              :items="props.items"
+              :items="items"
               :get-key="key"
-              :get-children="node => node.children"
+              :get-children="getChildren"
               :model-value="selected"
+              :aria-label="$attrs['aria-label'] as string | undefined"
+              :aria-labelledby="labelledBy"
               class="flex flex-col p-1 outline-none"
               @update:model-value="choose"
+              @keydown.capture="onTreeKeydown"
             >
               <TreeItem
                 v-for="item in flattenItems"
@@ -169,7 +196,9 @@
                   <Check v-if="isSelected" />
                 </span>
               </TreeItem>
-              <div v-if="props.items.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>
+              <li v-if="items.length === 0" role="none" :class="selectEmpty()">
+                <span role="status">{{ t.select.empty }}</span>
+              </li>
             </TreeRoot>
           </ScrollArea>
         </Card>

package/src/components/tree-select/TreeSelectSearch.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { Search, X } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import InputAction from '../input/InputAction.vue'
+  import { inputAdornment, inputControl, textInputHost } from '../input/input.variants'
+
+  defineOptions({ name: 'HnTreeSelectSearch', inheritAttrs: false })
+
+  const props = defineProps<{ placeholder: string; controls: string }>()
+  const emit = defineEmits<{ clear: []; keydown: [event: KeyboardEvent] }>()
+  const model = defineModel<string>({ required: true })
+  const t = useUiLocale()
+  const input = shallowRef<HTMLInputElement | null>(null)
+
+  defineExpose({ focus: () => input.value?.focus() })
+</script>
+
+<template>
+  <div class="border-line shrink-0 border-b px-1">
+    <div :class="textInputHost({ variant: 'bare', size: 'sm' })">
+      <span :class="inputAdornment()"><Search /></span>
+      <input
+        ref="input"
+        v-model="model"
+        data-hn-tree-select-search
+        type="text"
+        role="searchbox"
+        autocomplete="off"
+        :aria-label="props.placeholder"
+        :aria-controls="props.controls"
+        :placeholder="props.placeholder"
+        :class="inputControl({ leading: true, trailing: !!model })"
+        @keydown="emit('keydown', $event)"
+      />
+      <Transition
+        enter-active-class="hn-transition-base"
+        enter-from-class="scale-90 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-90 opacity-0"
+      >
+        <InputAction v-if="model" :label="t.common.clear" @click="emit('clear')">
+          <X />
+        </InputAction>
+      </Transition>
+    </div>
+  </div>
+</template>

package/src/components/tree-select/composables/useTreeSelect.ts

@@ -0,0 +1,130 @@
+import { computed, ref, shallowRef, watch, type Ref } from 'vue'
+import { useFilter } from 'reka-ui'
+import { findNode, pathTo, type TreeSelectNode } from '../types'
+import { filterTree } from '../utils/filterTree'
+
+interface TreeSelectOptions {
+  items: TreeSelectNode[]
+  defaultExpanded: Array<string | number>
+  searchable?: boolean
+}
+
+export function useTreeSelect(
+  props: TreeSelectOptions,
+  model: Ref<string | number | null | undefined>,
+  open: Ref<boolean>,
+  search: Ref<string>,
+) {
+  const selected = computed(() => findNode(props.items, model.value))
+  const normalExpanded = ref<string[]>([])
+  const searchExpanded = ref<string[]>([])
+  const input = shallowRef<{ focus: () => void } | null>(null)
+  const tree = shallowRef<{ $el: HTMLElement } | null>(null)
+  const { contains } = useFilter({ sensitivity: 'base' })
+  const query = computed(() => (props.searchable ? search.value.trim() : ''))
+  const filtered = computed(() =>
+    query.value ? filterTree(props.items, node => contains(node.label, query.value)) : null,
+  )
+  const items = computed(() => filtered.value?.items ?? props.items)
+  const expanded = computed({
+    get: () => (filtered.value ? searchExpanded.value : normalExpanded.value),
+    set: value => {
+      if (filtered.value) searchExpanded.value = value
+      else normalExpanded.value = value
+    },
+  })
+
+  watch(
+    filtered,
+    value => {
+      searchExpanded.value = value?.expanded ?? []
+    },
+    { immediate: true },
+  )
+
+  watch(
+    open,
+    (isOpen, wasOpen) => {
+      if (!isOpen) {
+        if (wasOpen) search.value = ''
+        return
+      }
+      const path = pathTo(props.items, model.value) ?? []
+      normalExpanded.value = Array.from(new Set([...props.defaultExpanded, ...path].map(String)))
+    },
+    { immediate: true },
+  )
+
+  function getChildren(node: TreeSelectNode) {
+    return filtered.value ? filtered.value.children.get(node) : node.children
+  }
+
+  function key(node: TreeSelectNode) {
+    return String(node.value)
+  }
+
+  function choose(node: TreeSelectNode | undefined) {
+    if (!node || node.disabled) return
+    model.value = node.value
+    open.value = false
+  }
+
+  function keepRowClick(event: CustomEvent<{ originalEvent: Event }>) {
+    if (event.detail.originalEvent.type === 'click') event.preventDefault()
+  }
+
+  function focusSearch(event: Event) {
+    if (!props.searchable) return
+    event.preventDefault()
+    input.value?.focus()
+  }
+
+  function clearSearch() {
+    search.value = ''
+    input.value?.focus()
+  }
+
+  function onEscape(event: KeyboardEvent) {
+    if (!props.searchable || !search.value) return
+    event.preventDefault()
+    clearSearch()
+  }
+
+  function enabledRows() {
+    return Array.from(
+      tree.value?.$el.querySelectorAll<HTMLElement>('[role="treeitem"]:not([data-disabled])') ?? [],
+    )
+  }
+
+  function onSearchKeydown(event: KeyboardEvent) {
+    if (event.isComposing || !['ArrowDown', 'ArrowUp'].includes(event.key)) return
+    event.preventDefault()
+    const rows = enabledRows()
+    const target = event.key === 'ArrowDown' ? rows[0] : rows.at(-1)
+    target?.focus()
+  }
+
+  function onTreeKeydown(event: KeyboardEvent) {
+    if (!props.searchable || event.key !== 'ArrowUp' || event.target !== enabledRows()[0]) return
+    event.preventDefault()
+    event.stopPropagation()
+    input.value?.focus()
+  }
+
+  return {
+    selected,
+    items,
+    expanded,
+    input,
+    tree,
+    getChildren,
+    key,
+    choose,
+    keepRowClick,
+    focusSearch,
+    clearSearch,
+    onEscape,
+    onSearchKeydown,
+    onTreeKeydown,
+  }
+}

package/src/components/tree-select/tree-select.variants.ts

@@ -2,12 +2,12 @@ import { tv } from '../../lib/tv'
 
 export const treeSelectContent = tv({
   base: [
-    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-popover-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
+    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-popover-trigger-width)] min-w-40 max-h-[var(--reka-popover-content-available-height)] flex-col overflow-hidden shadow-md outline-none',
   ],
 })
 
 export const treeSelectList = tv({
-  base: 'max-h-[min(20rem,var(--reka-popover-content-available-height))]',
+  base: 'min-h-0 max-h-80',
 })
 
 export const treeSelectRow = tv({

package/src/components/tree-select/utils/filterTree.ts

@@ -0,0 +1,19 @@
+import type { TreeSelectNode } from '../types'
+
+export function filterTree(nodes: TreeSelectNode[], matches: (node: TreeSelectNode) => boolean) {
+  const children = new Map<TreeSelectNode, TreeSelectNode[]>()
+  const expanded: string[] = []
+
+  function visit(items: TreeSelectNode[]): TreeSelectNode[] {
+    return items.filter(node => {
+      const descendants = visit(node.children ?? [])
+      if (descendants.length) {
+        children.set(node, descendants)
+        expanded.push(String(node.value))
+      }
+      return descendants.length > 0 || matches(node)
+    })
+  }
+
+  return { items: visit(nodes), children, expanded }
+}

package/src/index.ts

@@ -25,6 +25,12 @@ export { default as Badge } from './components/badge/Badge.vue'
 export { default as Indicator } from './components/indicator/Indicator.vue'
 export { default as Callout } from './components/callout/Callout.vue'
 export { default as Alert } from './components/alert/Alert.vue'
+export { default as Pagination } from './components/pagination/Pagination.vue'
+export { default as PaginationContent } from './components/pagination/PaginationContent.vue'
+export { default as PaginationInfo } from './components/pagination/PaginationInfo.vue'
+export { default as PaginationSize } from './components/pagination/PaginationSize.vue'
+export { default as PaginationJump } from './components/pagination/PaginationJump.vue'
+export type { PaginationChange, PaginationState } from './components/pagination/types'
 export { default as PrevNext } from './components/prev-next/PrevNext.vue'
 export { default as PrevNextLink } from './components/prev-next/PrevNextLink.vue'
 export { default as Table } from './components/table/Table.vue'
@@ -206,6 +212,9 @@ export { default as BreadcrumbItem } from './components/breadcrumb/BreadcrumbIte
 export { default as BreadcrumbSeparator } from './components/breadcrumb/BreadcrumbSeparator.vue'
 export { default as TooltipProvider } from './components/tooltip/TooltipProvider.vue'
 export { default as Tooltip } from './components/tooltip/Tooltip.vue'
+export { vTooltip } from './components/tooltip/directive'
+export type { TooltipDirectiveOptions, TooltipDirectiveValue } from './components/tooltip/types'
+export type { OverlayAnchor, OverlayPositionStrategy } from './lib/overlay-anchor'
 export { default as Popover } from './components/popover/Popover.vue'
 export { default as DropdownMenu } from './components/dropdown-menu/DropdownMenu.vue'
 export { default as DropdownMenuItem } from './components/dropdown-menu/DropdownMenuItem.vue'
@@ -228,7 +237,7 @@ export { default as Skeleton } from './components/skeleton/Skeleton.vue'
 export { default as Image } from './components/image/Image.vue'
 export { default as ImageGroup } from './components/image/ImageGroup.vue'
 export { default as Lightbox } from './components/lightbox/Lightbox.vue'
-export type { LightboxItem } from './components/lightbox/types'
+export type { LightboxItem, LightboxSource } from './components/lightbox/types'
 export { provideImageResolver, useImageResolver } from './components/image/resolver'
 export type { ImageResolver } from './components/image/resolver'
 export type { ImageVariants } from './components/image/image.variants'