@hina-ui/vue 1.3.1 → 1.4.0

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,8 @@ 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 { 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 +236,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'

package/src/lib/overlay-positioner.ts

@@ -0,0 +1,25 @@
+import {
+  toValue,
+  watchEffect,
+  type ComponentPublicInstance,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+
+export function useOverlayPositionerClass(
+  content: Ref<ComponentPublicInstance | null>,
+  className: MaybeRefOrGetter<string | undefined>,
+) {
+  watchEffect(
+    onCleanup => {
+      const element = content.value?.$el as HTMLElement | undefined
+      const positioner = element?.parentElement
+      const classes = toValue(className)?.split(/\s+/).filter(Boolean) ?? []
+      if (!positioner?.hasAttribute('data-reka-popper-content-wrapper') || !classes.length) return
+      const added = classes.filter(name => !positioner.classList.contains(name))
+      positioner.classList.add(...added)
+      onCleanup(() => positioner.classList.remove(...added))
+    },
+    { flush: 'post' },
+  )
+}

package/src/lib/pointer-corridor.ts

@@ -0,0 +1,26 @@
+type Point = { x: number; y: number }
+const cross = (a: Point, b: Point, c: Point) =>
+  (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)
+
+export function inPointerCorridor(point: Point, first: DOMRect, second: DOMRect) {
+  const points = [first, second]
+    .flatMap(rect => [
+      { x: rect.left - 6, y: rect.top - 6 },
+      { x: rect.right + 6, y: rect.top - 6 },
+      { x: rect.left - 6, y: rect.bottom + 6 },
+      { x: rect.right + 6, y: rect.bottom + 6 },
+    ])
+    .sort((a, b) => a.x - b.x || a.y - b.y)
+  const half = (values: Point[]) => {
+    const hull: Point[] = []
+    for (const value of values) {
+      while (hull.length > 1 && cross(hull[hull.length - 2]!, hull[hull.length - 1]!, value) <= 0)
+        hull.pop()
+      hull.push(value)
+    }
+    hull.pop()
+    return hull
+  }
+  const hull = [...half(points), ...half([...points].reverse())]
+  return hull.every((a, i) => cross(a, hull[(i + 1) % hull.length]!, point) >= 0)
+}

package/src/lib/useDirection.ts

@@ -0,0 +1,31 @@
+import { computed, shallowRef, watchEffect } from 'vue'
+import { injectConfigProviderContext, type Direction } from 'reka-ui'
+
+export function useDirection(dir: () => Direction | undefined) {
+  const root = shallowRef<HTMLElement>()
+  const context = injectConfigProviderContext(null)
+  const inherited = shallowRef<Direction>('ltr')
+  const rootDirection = computed(() => dir() ?? context?.dir?.value)
+  const direction = computed(() => rootDirection.value ?? inherited.value)
+
+  watchEffect(
+    onCleanup => {
+      const element = root.value
+      const view = element?.ownerDocument.defaultView
+      if (!element || !view || rootDirection.value) return
+
+      const update = () => {
+        inherited.value = view.getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
+      }
+
+      update()
+      const observer = new view.MutationObserver(update)
+      for (let ancestor: HTMLElement | null = element; ancestor; ancestor = ancestor.parentElement)
+        observer.observe(ancestor, { attributes: true, attributeFilter: ['dir'] })
+      onCleanup(() => observer.disconnect())
+    },
+    { flush: 'post' },
+  )
+
+  return { root, direction, rootDirection }
+}

package/src/locale/en-US.ts

@@ -16,6 +16,16 @@ export const enUS: UiMessages = {
     next: 'Next notice',
   },
   pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' of ' + total + ' items' : '0 items',
+    pageCountLabel: (page, count) => 'Page ' + page + ' of ' + count,
+    pageSizeLabel: 'Items per page',
+    pageSizeOption: n => String(n) + ' / page',
+    jumpLabel: 'Go to page',
+    previousPagesLabel: n => 'Go back ' + n + ' pages',
+    nextPagesLabel: n => 'Go forward ' + n + ' pages',
+    choosePage: 'Choose a page',
+    choosePageHint: 'Press ArrowDown or ArrowUp to choose a page',
     navLabel: 'Pagination',
     prev: 'Previous page',
     next: 'Next page',
@@ -78,7 +88,8 @@ export const enUS: UiMessages = {
   lightbox: {
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',
-    resetZoom: 'Reset zoom',
+    resetZoom: 'Fit to window',
+    actualSize: 'Actual size',
     rotate: 'Rotate',
     download: 'Download',
     loadingLarge: 'Loading HD',
@@ -94,6 +105,9 @@ export const enUS: UiMessages = {
     show: 'Show password',
     hide: 'Hide password',
   },
+  treeSelect: {
+    search: 'Search nodes',
+  },
   combobox: {
     placeholder: 'Type or choose',
     toggle: 'Show options',

package/src/locale/index.ts

@@ -36,6 +36,7 @@ function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
     chip: { ...base.chip, ...patch.chip },
     numberInput: { ...base.numberInput, ...patch.numberInput },
     passwordInput: { ...base.passwordInput, ...patch.passwordInput },
+    treeSelect: { ...base.treeSelect, ...patch.treeSelect },
     combobox: { ...base.combobox, ...patch.combobox },
     slider: { ...base.slider, ...patch.slider },
     pinInput: { ...base.pinInput, ...patch.pinInput },

package/src/locale/types.ts

@@ -14,6 +14,15 @@ export interface UiMessages {
     next: string
   }
   pagination: {
+    rangeLabel: (from: number, to: number, total: number) => string
+    pageCountLabel: (page: number, count: number) => string
+    pageSizeLabel: string
+    pageSizeOption: (n: number) => string
+    jumpLabel: string
+    previousPagesLabel: (n: number) => string
+    nextPagesLabel: (n: number) => string
+    choosePage: string
+    choosePageHint: string
     navLabel: string
     prev: string
     next: string
@@ -77,6 +86,7 @@ export interface UiMessages {
     zoomIn: string
     zoomOut: string
     resetZoom: string
+    actualSize: string
     rotate: string
     download: string
     loadingLarge: string
@@ -92,6 +102,9 @@ export interface UiMessages {
     show: string
     hide: string
   }
+  treeSelect: {
+    search: string
+  }
   combobox: {
     placeholder: string
     toggle: string

package/src/locale/zh-CN.ts

@@ -16,6 +16,16 @@ export const zhCN: UiMessages = {
     next: '下一条',
   },
   pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' / 共 ' + total + ' 条' : '共 0 条',
+    pageCountLabel: (page, count) => '第 ' + page + ' / ' + count + ' 页',
+    pageSizeLabel: '每页条数',
+    pageSizeOption: n => String(n) + ' / 页',
+    jumpLabel: '跳至页码',
+    previousPagesLabel: n => '向前跳 ' + n + ' 页',
+    nextPagesLabel: n => '向后跳 ' + n + ' 页',
+    choosePage: '选择页码',
+    choosePageHint: '按向下或向上箭头选择页码',
     navLabel: '翻页',
     prev: '上一页',
     next: '下一页',
@@ -78,7 +88,8 @@ export const zhCN: UiMessages = {
   lightbox: {
     zoomIn: '放大',
     zoomOut: '缩小',
-    resetZoom: '恢复原始大小',
+    resetZoom: '适应窗口',
+    actualSize: '原始尺寸',
     rotate: '旋转',
     download: '下载',
     loadingLarge: '正在加载原图',
@@ -94,6 +105,9 @@ export const zhCN: UiMessages = {
     show: '显示密码',
     hide: '隐藏密码',
   },
+  treeSelect: {
+    search: '搜索节点',
+  },
   combobox: {
     placeholder: '输入或选择',
     toggle: '展开选项',