@hina-ui/vue 1.7.3 → 1.7.4

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

@@ -10,6 +10,7 @@
     TreeRoot,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import { rekaPopoverStyle } from '../../lib/reka/styles'
   import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
@@ -21,7 +22,8 @@
     inputHost,
     type InputVariants,
   } from '../input/input.variants'
-  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import TreeRows from '../tree/TreeRows.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { selectEmpty, selectTrigger } from '../select/select.variants'
   import {
     treeSelectContent,
@@ -46,6 +48,7 @@
       size?: InputVariants['size']
       disabled?: boolean
       invalid?: boolean
+      virtualize?: VirtualizeOptions
       class?: string
     }>(),
     { defaultExpanded: () => [] },
@@ -78,6 +81,7 @@
     expanded,
     input,
     tree,
+    rows,
     getChildren,
     key,
     choose,
@@ -138,6 +142,7 @@
             labelledBy ?? ($attrs['aria-label'] ? undefined : (fieldId ?? triggerId))
           "
           :class="treeSelectContent()"
+          :style="rekaPopoverStyle"
         >
           <TreeSelectSearch
             v-if="props.searchable"
@@ -148,59 +153,71 @@
             @clear="clearSearch"
             @keydown="onSearchKeydown"
           />
-          <ScrollArea :class="treeSelectList()">
-            <TreeRoot
-              :id="treeId"
-              ref="tree"
-              v-slot="{ flattenItems }"
-              v-model:expanded="expanded"
-              :items="items"
-              :get-key="key"
-              :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"
+          <TreeRoot
+            as="div"
+            :id="treeId"
+            ref="tree"
+            v-slot="{ flattenItems }"
+            v-model:expanded="expanded"
+            :items="items"
+            :get-key="key"
+            :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"
+          >
+            <TreeRows
+              ref="rows"
+              :items="flattenItems"
+              :virtualize="props.virtualize"
+              initial-scroll-to-selected
+              scrollable
+              :class="treeSelectList()"
             >
-              <TreeItem
-                v-for="item in flattenItems"
-                v-slot="{ isExpanded, isSelected, handleToggle }"
-                :key="item._id"
-                v-bind="item.bind"
-                :value="item.value"
-                :level="item.level"
-                :disabled="item.value.disabled"
-                :class="treeSelectRow()"
-                :style="{ paddingInlineStart: `calc(0.375rem + ${(item.level - 1) * 1.25}rem)` }"
-                @toggle="keepRowClick"
-              >
-                <span
-                  v-if="item.hasChildren"
-                  :class="treeSelectToggle()"
-                  @click.stop="handleToggle()"
+              <template #default="{ item }">
+                <TreeItem
+                  as="div"
+                  v-slot="{ isExpanded, isSelected, handleToggle }"
+                  :key="item._id"
+                  v-bind="item.bind"
+                  :value="item.value"
+                  :level="item.level"
+                  :disabled="item.value.disabled"
+                  :class="treeSelectRow()"
+                  :style="{ paddingInlineStart: `calc(0.375rem + ${(item.level - 1) * 1.25}rem)` }"
+                  @toggle="keepRowClick"
                 >
-                  <DisclosureIcon direction="end" :open="isExpanded" />
-                </span>
-                <span v-else class="size-5 shrink-0" />
-                <span class="min-w-0 flex-1">
-                  <slot name="node" :node="item.value">
-                    <span class="block truncate">{{ item.value.label }}</span>
-                    <span v-if="item.value.description" class="text-muted block truncate text-xs">
-                      {{ item.value.description }}
-                    </span>
-                  </slot>
-                </span>
-                <span class="flex size-4 shrink-0 items-center justify-center">
-                  <Check v-if="isSelected" />
-                </span>
-              </TreeItem>
-              <li v-if="items.length === 0" role="none" :class="selectEmpty()">
-                <span role="status">{{ t.select.empty }}</span>
-              </li>
-            </TreeRoot>
-          </ScrollArea>
+                  <span
+                    v-if="item.hasChildren"
+                    :class="treeSelectToggle()"
+                    @click.stop="handleToggle()"
+                  >
+                    <DisclosureIcon direction="end" :open="isExpanded" />
+                  </span>
+                  <span v-else class="size-5 shrink-0" />
+                  <span class="min-w-0 flex-1">
+                    <slot name="node" :node="item.value">
+                      <span class="block truncate">{{ item.value.label }}</span>
+                      <span v-if="item.value.description" class="text-muted block truncate text-xs">
+                        {{ item.value.description }}
+                      </span>
+                    </slot>
+                  </span>
+                  <span class="flex size-4 shrink-0 items-center justify-center">
+                    <Check v-if="isSelected" />
+                  </span>
+                </TreeItem>
+              </template>
+              <template #empty>
+                <div role="none" :class="selectEmpty()">
+                  <span role="status">{{ t.select.empty }}</span>
+                </div>
+              </template>
+            </TreeRows>
+          </TreeRoot>
         </Card>
       </PopoverContent>
     </PopoverPortal>

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

@@ -7,6 +7,7 @@ interface TreeSelectOptions {
   items: TreeSelectNode[]
   defaultExpanded: Array<string | number>
   searchable?: boolean
+  virtualize?: unknown
 }
 
 export function useTreeSelect(
@@ -20,6 +21,11 @@ export function useTreeSelect(
   const searchExpanded = ref<string[]>([])
   const input = shallowRef<{ focus: () => void } | null>(null)
   const tree = shallowRef<{ $el: HTMLElement } | null>(null)
+  const rows = shallowRef<{
+    focusFirst(): void
+    focusLast(): void
+    isFirst(element: EventTarget | null): boolean
+  }>()
   const { contains } = useFilter({ sensitivity: 'base' })
   const query = computed(() => (props.searchable ? search.value.trim() : ''))
   const filtered = computed(() =>
@@ -99,13 +105,23 @@ export function useTreeSelect(
   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)
+    if (props.virtualize) {
+      if (event.key === 'ArrowDown') rows.value?.focusFirst()
+      else rows.value?.focusLast()
+      return
+    }
+    const enabled = enabledRows()
+    const target = event.key === 'ArrowDown' ? enabled[0] : enabled.at(-1)
     target?.focus()
   }
 
   function onTreeKeydown(event: KeyboardEvent) {
-    if (!props.searchable || event.key !== 'ArrowUp' || event.target !== enabledRows()[0]) return
+    if (
+      !props.searchable ||
+      event.key !== 'ArrowUp' ||
+      !(props.virtualize ? rows.value?.isFirst(event.target) : event.target === enabledRows()[0])
+    )
+      return
     event.preventDefault()
     event.stopPropagation()
     input.value?.focus()
@@ -117,6 +133,7 @@ export function useTreeSelect(
     expanded,
     input,
     tree,
+    rows,
     getChildren,
     key,
     choose,

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

@@ -1,27 +1 @@
-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 max-h-[var(--reka-popover-content-available-height)] flex-col overflow-hidden shadow-md outline-none',
-  ],
-})
-
-export const treeSelectList = tv({
-  base: 'min-h-0 max-h-80',
-})
-
-export const treeSelectRow = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
-    'items-center gap-1 rounded-md py-2 pe-2.5 text-start text-sm select-none',
-    'text-fg [&_svg]:size-4 [&_svg]:shrink-0',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-})
-
-export const treeSelectToggle = tv({
-  base: [
-    'text-muted flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm',
-    '[&>span>svg]:size-3.5',
-  ],
-})
+export * from '../../../../shared/src/variants/tree-select'

package/src/components/virtual-list/VirtualChoices.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { useUiLocale } from '../../locale'
+  import { useVirtualChoices } from '../../lib/reka/useVirtualChoices'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { selectEmpty, selectLabel } from '../select/select.variants'
+  import type { SelectItems, SelectOption } from '../select/types'
+  import { virtualListContent, virtualListItem } from './virtual-list.variants'
+
+  defineOptions({ name: 'HnVirtualChoices', inheritAttrs: false })
+  const props = defineProps<{
+    options: SelectItems<T>
+    kind: 'select' | 'combobox' | 'listbox'
+    virtualize?: VirtualizeOptions
+    input?: HTMLElement
+    class?: string
+    padded?: boolean
+    maxHeight?: string | number
+  }>()
+  const t = useUiLocale()
+  const { area, body, rows, entries, bodyStyle, measure, itemAttrs, labelId } =
+    useVirtualChoices(props)
+  defineSlots<{
+    default(props: { option: T; attrs: ReturnType<typeof itemAttrs> }): unknown
+    empty?(): unknown
+  }>()
+</script>
+
+<template>
+  <ScrollArea
+    ref="area"
+    :class="props.class"
+    :style="{
+      maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight,
+    }"
+  >
+    <div :class="props.padded === false ? undefined : 'p-1'">
+      <div
+        ref="body"
+        v-bind="$attrs"
+        data-hn-virtual-choices
+        :class="virtualListContent({ orientation: 'vertical' })"
+        :style="bodyStyle"
+      >
+        <div
+          v-for="entry in entries"
+          :key="entry.key"
+          :ref="measure"
+          :data-index="entry.index"
+          role="presentation"
+          :class="virtualListItem({ orientation: 'vertical' })"
+          :style="{ marginBlockStart: `${entry.gapBefore}px` }"
+        >
+          <slot
+            v-if="rows[entry.index]!.option"
+            :option="rows[entry.index]!.option!"
+            :attrs="itemAttrs(entry.index)"
+          />
+          <div v-else :id="labelId(entry.index)" :class="selectLabel()">
+            {{ rows[entry.index]!.label }}
+          </div>
+        </div>
+      </div>
+      <div v-if="!rows.length" :class="selectEmpty()">
+        <slot name="empty">{{ t.select.empty }}</slot>
+      </div>
+    </div>
+  </ScrollArea>
+</template>

package/src/components/virtual-list/VirtualList.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts" generic="T">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import LoadingOverlay from '../loading-overlay/LoadingOverlay.vue'
+  import { useVirtualList } from './composables/useVirtualList'
+  import {
+    virtualList,
+    virtualListContent,
+    virtualListItem,
+    virtualListStatus,
+  } from './virtual-list.variants'
+  import type { VirtualListProps, VirtualListRange, VirtualListSlotProps } from './types'
+
+  defineOptions({ name: 'HnVirtualList' })
+
+  const props = withDefaults(defineProps<VirtualListProps<T>>(), {
+    estimateSize: 48,
+    dynamic: true,
+    height: 320,
+    orientation: 'vertical',
+    overscan: 5,
+    gap: 0,
+    paddingStart: 0,
+    paddingEnd: 0,
+    initialOffset: 0,
+    loading: false,
+    shadow: true,
+  })
+
+  const emit = defineEmits<{ rangeChange: [range: VirtualListRange] }>()
+  const slots = defineSlots<{
+    default?(props: VirtualListSlotProps<T>): unknown
+    empty?(): unknown
+    loading?(): unknown
+  }>()
+
+  const t = useUiLocale()
+  const {
+    root,
+    rootDirection,
+    area,
+    list,
+    viewport,
+    entries,
+    contentStyle,
+    rootStyle,
+    itemStyle,
+    measureElement,
+    measure,
+    updateFocus,
+    onFocusOut,
+    scrollToIndex,
+    scrollToOffset,
+  } = useVirtualList(props, range => emit('rangeChange', range))
+
+  defineExpose({ viewport, scrollToIndex, scrollToOffset, measure })
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-hn-virtual-list
+    :dir="rootDirection"
+    :class="cn(virtualList(), props.class)"
+    :style="rootStyle"
+  >
+    <ScrollArea
+      ref="area"
+      class="min-h-0 flex-1"
+      :direction="props.orientation"
+      :shadow="props.shadow"
+      :label="props.label"
+      focusable
+    >
+      <ul
+        ref="list"
+        role="list"
+        :aria-busy="props.loading"
+        :class="virtualListContent({ orientation: props.orientation })"
+        :style="contentStyle"
+        @focusin="updateFocus"
+        @focusout="onFocusOut"
+      >
+        <li
+          v-for="entry in entries"
+          :key="entry.key"
+          :ref="measureElement"
+          :data-index="entry.index"
+          :aria-posinset="entry.index + 1"
+          :aria-setsize="props.items.length"
+          :class="
+            cn(
+              virtualListItem({ orientation: props.orientation }),
+              typeof props.itemClass === 'function'
+                ? props.itemClass(props.items[entry.index]!, entry.index)
+                : props.itemClass,
+            )
+          "
+          :style="itemStyle(entry)"
+        >
+          <slot :item="props.items[entry.index]!" :index="entry.index" />
+        </li>
+      </ul>
+    </ScrollArea>
+    <div
+      v-if="!props.items.length && !props.loading"
+      :class="cn(virtualListStatus(), 'absolute inset-0')"
+    >
+      <slot name="empty">{{ props.emptyText ?? t.virtualList.empty }}</slot>
+    </div>
+    <LoadingOverlay :visible="props.loading" :text="t.common.loading" :delay="0" size="sm">
+      <template v-if="slots.loading" #default><slot name="loading" /></template>
+    </LoadingOverlay>
+  </div>
+</template>

package/src/components/virtual-list/composables/useVirtualList.ts

@@ -0,0 +1,231 @@
+import { computed, nextTick, onScopeDispose, shallowRef, watch, type CSSProperties } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { defaultRangeExtractor, type VirtualItem } from '@tanstack/vue-virtual'
+import { useDirection } from '../../../lib/useDirection'
+import { useVirtualWindow, virtualFlow } from '../../../lib/virtual/useVirtualWindow'
+import { prefersReducedMotion } from '../../../motion'
+import type ScrollArea from '../../scroll-area/ScrollArea.vue'
+import type {
+  VirtualListKey,
+  VirtualListProps,
+  VirtualListRange,
+  VirtualListScrollOptions,
+} from '../types'
+
+function nonnegative(value: number) {
+  return Number.isFinite(value) ? Math.max(0, value) : 0
+}
+
+export function useVirtualList<T>(
+  props: VirtualListProps<T>,
+  onRangeChange: (range: VirtualListRange) => void,
+) {
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  const list = shallowRef<HTMLElement>()
+  const viewport = computed(() => area.value?.viewport)
+  const focusedKey = shallowRef<VirtualListKey>()
+  const horizontal = computed(() => props.orientation === 'horizontal')
+  const keys = computed(() => props.items.map(props.getKey))
+  const focusedIndex = computed(() =>
+    focusedKey.value === undefined ? -1 : keys.value.indexOf(focusedKey.value),
+  )
+  watch(focusedIndex, index => {
+    if (index < 0) focusedKey.value = undefined
+  })
+  const virtualizer = useVirtualWindow(
+    computed(() => {
+      const items = props.items
+      const itemKeys = keys.value
+      const retained = focusedIndex.value
+      const estimate = props.estimateSize ?? 48
+      return {
+        count: items.length,
+        getScrollElement: () => viewport.value ?? null,
+        getItemKey: (index: number) => itemKeys[index]!,
+        estimateSize: (index: number) =>
+          Math.max(
+            1,
+            nonnegative(typeof estimate === 'function' ? estimate(items[index]!, index) : estimate),
+          ),
+        horizontal: horizontal.value,
+        isRtl: direction.value === 'rtl',
+        overscan: Math.floor(nonnegative(props.overscan ?? 5)),
+        gap: nonnegative(props.gap ?? 0),
+        paddingStart: nonnegative(props.paddingStart ?? 0),
+        paddingEnd: nonnegative(props.paddingEnd ?? 0),
+        initialOffset: nonnegative(props.initialOffset ?? 0),
+        initialRect: props.initialRect ?? {
+          width: 320,
+          height: typeof props.height === 'number' ? props.height : 320,
+        },
+        rangeExtractor: (range: Parameters<typeof defaultRangeExtractor>[0]) => {
+          const indexes = defaultRangeExtractor(range)
+          if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained)
+          return indexes.sort((a, b) => a - b)
+        },
+      }
+    }),
+  )
+  const flow = computed(() =>
+    virtualFlow(virtualizer.value.getVirtualItems(), virtualizer.value.getTotalSize()),
+  )
+  const entries = computed(() =>
+    flow.value.entries.map(entry => ({
+      ...entry,
+      key: keys.value[entry.index]!,
+    })),
+  )
+  const contentStyle = computed<CSSProperties>(() => {
+    const { before: start, after: end } = flow.value
+    return horizontal.value
+      ? {
+          width: 'max-content',
+          height: '100%',
+          paddingInlineStart: `${start}px`,
+          paddingInlineEnd: `${end}px`,
+        }
+      : { width: '100%', paddingBlockStart: `${start}px`, paddingBlockEnd: `${end}px` }
+  })
+  const rootStyle = computed<CSSProperties>(() => ({
+    height: typeof props.height === 'string' ? props.height : `${props.height ?? 320}px`,
+  }))
+
+  function itemStyle(entry: VirtualItem & { gapBefore: number }): CSSProperties {
+    return horizontal.value
+      ? {
+          marginInlineStart: `${entry.gapBefore}px`,
+          width: props.dynamic === false ? `${entry.size}px` : undefined,
+        }
+      : {
+          marginBlockStart: `${entry.gapBefore}px`,
+          height: props.dynamic === false ? `${entry.size}px` : undefined,
+        }
+  }
+
+  function measureElement(element: unknown) {
+    if (element === null) {
+      virtualizer.value.measureElement(null)
+      return
+    }
+    if (
+      props.dynamic !== false &&
+      viewport.value &&
+      element instanceof HTMLElement &&
+      element.isConnected
+    ) {
+      virtualizer.value.measureElement(element)
+    }
+  }
+
+  async function measure() {
+    virtualizer.value.measure()
+    await nextTick()
+    for (const child of list.value?.children ?? []) measureElement(child)
+  }
+
+  function updateFocus() {
+    const element = list.value
+    const active = element?.ownerDocument.activeElement
+    const row = active && [...(element?.children ?? [])].find(child => child.contains(active))
+    focusedKey.value = row ? keys.value[Number(row.getAttribute('data-index'))] : undefined
+  }
+
+  function onFocusOut() {
+    void nextTick(updateFocus)
+  }
+
+  let pendingScroll: (() => void) | undefined
+  function scroll(action: () => void) {
+    if (viewport.value && virtualizer.value.scrollElement === viewport.value) action()
+    else pendingScroll = action
+  }
+
+  function behavior(value: VirtualListScrollOptions['behavior']) {
+    return prefersReducedMotion() ? 'auto' : value
+  }
+
+  function scrollToIndex(index: number, options: VirtualListScrollOptions = {}) {
+    if (!Number.isFinite(index)) return
+    scroll(() => {
+      if (props.items.length)
+        virtualizer.value.scrollToIndex(Math.trunc(index), {
+          ...options,
+          behavior: behavior(options.behavior),
+        })
+    })
+  }
+
+  function scrollToOffset(
+    offset: number,
+    options: Pick<VirtualListScrollOptions, 'behavior'> = {},
+  ) {
+    if (!Number.isFinite(offset)) return
+    scroll(() =>
+      virtualizer.value.scrollToOffset(nonnegative(offset), {
+        behavior: behavior(options.behavior),
+      }),
+    )
+  }
+
+  watch(
+    viewport,
+    element => {
+      if (!element) return
+      void measure()
+      pendingScroll?.()
+      pendingScroll = undefined
+    },
+    { flush: 'post' },
+  )
+
+  watch(
+    () => {
+      const range = virtualizer.value.calculateRange()
+      return [range?.startIndex ?? -1, range?.endIndex ?? -1] as const
+    },
+    ([startIndex, endIndex], previous) => {
+      if (startIndex !== previous?.[0] || endIndex !== previous?.[1])
+        onRangeChange({ startIndex, endIndex })
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  watch(() => [props.dynamic, props.estimateSize, props.orientation], measure)
+  let crossSize: number | undefined
+  let frame: number | undefined
+  useResizeObserver(viewport, entries => {
+    const rect = entries[0]?.contentRect
+    if (!rect) return
+    const next = horizontal.value ? rect.height : rect.width
+    if (crossSize !== undefined && crossSize !== next && props.dynamic !== false) {
+      if (frame !== undefined) cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        frame = undefined
+        void measure()
+      })
+    }
+    crossSize = next
+  })
+  onScopeDispose(() => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+  })
+
+  return {
+    root,
+    rootDirection,
+    area,
+    list,
+    viewport,
+    entries,
+    contentStyle,
+    rootStyle,
+    itemStyle,
+    measureElement,
+    measure,
+    updateFocus,
+    onFocusOut,
+    scrollToIndex,
+    scrollToOffset,
+  }
+}