@hina-ui/vue 1.7.2 → 1.7.4

package/src/components/toolbar/context.ts

@@ -0,0 +1,29 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { ToolbarOrientation, ToolbarSize } from './types'
+
+interface ToolbarContext {
+  orientation: Readonly<Ref<ToolbarOrientation>>
+  size: Readonly<Ref<ToolbarSize>>
+  disabled: Readonly<Ref<boolean>>
+}
+
+const toolbarKey: InjectionKey<ToolbarContext> = Symbol('hn-toolbar')
+const groupKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('hn-toolbar-group')
+
+export function provideToolbar(context: ToolbarContext) {
+  provide(toolbarKey, context)
+}
+
+export function useToolbar() {
+  const context = inject(toolbarKey)
+  if (!context) throw new Error('[Hina UI] Toolbar controls must be inside Toolbar.')
+  return context
+}
+
+export function provideToolbarGroup(disabled: Readonly<Ref<boolean>>) {
+  provide(groupKey, disabled)
+}
+
+export function useToolbarGroup() {
+  return inject(groupKey, null)
+}

package/src/components/toolbar/toolbar.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/toolbar'

package/src/components/toolbar/types.ts

@@ -0,0 +1,30 @@
+import type { PrimitiveProps } from 'reka-ui'
+import type { ButtonVariants } from '../button/button.variants'
+
+export type ToolbarOrientation = 'horizontal' | 'vertical'
+export type ToolbarSize = 'sm' | 'md' | 'lg'
+export type ToolbarVariant = 'primary' | 'secondary' | 'bare'
+
+export interface ToolbarProps {
+  label?: string
+  orientation?: ToolbarOrientation
+  dir?: 'ltr' | 'rtl'
+  loop?: boolean
+  disabled?: boolean
+  size?: ToolbarSize
+  variant?: ToolbarVariant
+  class?: string
+}
+
+export interface ToolbarControlProps extends PrimitiveProps {
+  label?: string
+  tooltip?: boolean
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  variant?: ButtonVariants['variant']
+  tone?: ButtonVariants['tone']
+  size?: ToolbarSize
+  disabled?: boolean
+  loading?: boolean
+  ripple?: boolean
+  class?: string
+}

package/src/components/tree/Tree.vue

@@ -5,6 +5,8 @@
   import { useFieldControl } from '../form-field/context'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import TreeCheck from './TreeCheck.vue'
+  import TreeRows from './TreeRows.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useTree } from './composables/useTree'
   import { tree, treeEmpty, treeRow, treeToggle } from './tree.variants'
   import type { TreeNode, TreeNodeSlot, TreeValue } from './types'
@@ -17,9 +19,11 @@
       defaultExpanded?: TreeValue[]
       disabled?: boolean
       invalid?: boolean
+      virtualize?: VirtualizeOptions
+      maxHeight?: string | number
       class?: string
     }>(),
-    { defaultExpanded: () => [] },
+    { defaultExpanded: () => [], maxHeight: 320 },
   )
   const model = defineModel<TreeValue | TreeValue[] | null>()
   const expandedModel = defineModel<TreeValue[]>('expanded')
@@ -61,6 +65,7 @@
     v-slot="{ flattenItems }"
     v-model:expanded="expanded"
     :items="props.items"
+    :as="props.virtualize ? 'div' : 'ul'"
     :get-key="key"
     :get-children="getChildren"
     :model-value="props.multiple ? selected : selected[0]"
@@ -75,58 +80,66 @@
     :data-invalid="invalid ? '' : undefined"
     :class="cn(tree(), props.class)"
   >
-    <TreeItem
-      v-for="item in flattenItems"
-      :key="item._id"
-      v-slot="{ isExpanded }"
-      v-bind="item.bind"
-      :disabled="state(item.value).disabled"
-      as-child
-      @select="select"
-      @toggle="keepRowClick"
+    <TreeRows
+      :items="flattenItems"
+      :virtualize="props.virtualize"
+      :max-height="props.virtualize ? props.maxHeight : undefined"
+      :disabled="node => state(node).disabled"
+      v-slot="{ item }"
     >
-      <li
-        :aria-selected="props.multiple ? undefined : state(item.value).selected"
-        :aria-checked="
-          props.multiple
-            ? state(item.value).indeterminate
-              ? 'mixed'
-              : state(item.value).selected
-            : undefined
-        "
-        :style="{ '--hn-tree-level': item.level - 1 }"
-        :class="treeRow()"
+      <TreeItem
+        :key="item._id"
+        v-slot="{ isExpanded }"
+        v-bind="item.bind"
+        :disabled="state(item.value).disabled"
+        as-child
+        @select="select"
+        @toggle="keepRowClick"
       >
-        <span
-          v-if="item.hasChildren"
-          :class="treeToggle()"
-          aria-hidden="true"
-          data-hn-tree-toggle
-          @click.stop="toggle(item.value)"
+        <component
+          :is="props.virtualize ? 'div' : 'li'"
+          :aria-selected="props.multiple ? undefined : state(item.value).selected"
+          :aria-checked="
+            props.multiple
+              ? state(item.value).indeterminate
+                ? 'mixed'
+                : state(item.value).selected
+              : undefined
+          "
+          :style="{ '--hn-tree-level': item.level - 1 }"
+          :class="treeRow()"
         >
-          <DisclosureIcon direction="end" :open="isExpanded" />
-        </span>
-        <span v-else class="size-5 shrink-0" aria-hidden="true" />
-        <TreeCheck
-          v-if="props.multiple"
-          :selected="state(item.value).selected"
-          :indeterminate="state(item.value).indeterminate"
-        />
-        <span class="min-w-0 flex-1">
-          <slot name="node" :node="item.value" :expanded="isExpanded" v-bind="state(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>
-        <slot
-          name="trailing"
-          :node="item.value"
-          :expanded="isExpanded"
-          v-bind="state(item.value)"
-        />
-      </li>
-    </TreeItem>
+          <span
+            v-if="item.hasChildren"
+            :class="treeToggle()"
+            aria-hidden="true"
+            data-hn-tree-toggle
+            @click.stop="toggle(item.value)"
+          >
+            <DisclosureIcon direction="end" :open="isExpanded" />
+          </span>
+          <span v-else class="size-5 shrink-0" aria-hidden="true" />
+          <TreeCheck
+            v-if="props.multiple"
+            :selected="state(item.value).selected"
+            :indeterminate="state(item.value).indeterminate"
+          />
+          <span class="min-w-0 flex-1">
+            <slot name="node" :node="item.value" :expanded="isExpanded" v-bind="state(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>
+          <slot
+            name="trailing"
+            :node="item.value"
+            :expanded="isExpanded"
+            v-bind="state(item.value)"
+          />
+        </component>
+      </TreeItem>
+    </TreeRows>
   </TreeRoot>
 </template>

package/src/components/tree/TreeRows.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
+  import { shallowRef, watch } from 'vue'
+  import type { FlattenedItem } from 'reka-ui'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import VirtualTreeWindow from './VirtualTreeWindow.vue'
+
+  const props = defineProps<{
+    items: FlattenedItem<T>[]
+    virtualize?: VirtualizeOptions
+    initialScrollToSelected?: boolean
+    maxHeight?: string | number
+    scrollable?: boolean
+    class?: string
+    disabled?: (node: T) => boolean
+  }>()
+  defineSlots<{ default(props: { item: FlattenedItem<T> }): unknown; empty?(): unknown }>()
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  watch(
+    () => area.value?.viewport,
+    viewport => viewport?.setAttribute('role', 'group'),
+    { flush: 'post' },
+  )
+  const window = shallowRef<{
+    focusFirst(): void
+    focusLast(): void
+    isFirst(element: EventTarget | null): boolean
+  }>()
+  defineExpose({
+    focusFirst: () => window.value?.focusFirst(),
+    focusLast: () => window.value?.focusLast(),
+    isFirst: (element: EventTarget | null) => window.value?.isFirst(element) ?? false,
+  })
+</script>
+
+<template>
+  <ScrollArea
+    v-if="props.virtualize || props.scrollable"
+    ref="area"
+    :class="props.class"
+    :style="{
+      maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight,
+    }"
+  >
+    <VirtualTreeWindow
+      v-if="props.virtualize"
+      ref="window"
+      :items="props.items"
+      :virtualize="props.virtualize"
+      :initial-scroll-to-selected="props.initialScrollToSelected"
+      :viewport="area?.viewport"
+      :disabled="props.disabled"
+      v-slot="{ item }"
+    >
+      <slot :item="item" />
+    </VirtualTreeWindow>
+    <template v-else v-for="item in props.items" :key="item._id"><slot :item="item" /></template>
+    <slot v-if="!props.items.length" name="empty" />
+  </ScrollArea>
+  <template v-else v-for="item in props.items" :key="item._id"><slot :item="item" /></template>
+</template>

package/src/components/tree/VirtualTreeWindow.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
+  import { toRef } from 'vue'
+  import type { FlattenedItem } from 'reka-ui'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import { useVirtualTree } from '../../lib/reka/useVirtualTree'
+  import { virtualListContent, virtualListItem } from '../virtual-list/virtual-list.variants'
+
+  const props = defineProps<{
+    items: FlattenedItem<T>[]
+    virtualize?: VirtualizeOptions
+    initialScrollToSelected?: boolean
+    viewport?: HTMLElement
+    disabled?: (node: T) => boolean
+  }>()
+  defineSlots<{ default(props: { item: FlattenedItem<T> }): unknown }>()
+  const { body, entries, bodyStyle, measure, focusFirst, focusLast, isFirst } = useVirtualTree(
+    props,
+    toRef(props, 'viewport'),
+  )
+  defineExpose({ focusFirst, focusLast, isFirst })
+</script>
+
+<template>
+  <div
+    ref="body"
+    data-hn-virtual-tree
+    role="presentation"
+    :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 :item="props.items[entry.index]!" />
+    </div>
+  </div>
+</template>

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

@@ -1,22 +1 @@
-import { tv } from '../../lib/tv'
-
-export const tree = tv({
-  base: 'flex w-full min-w-0 flex-col outline-none',
-})
-
-export const treeRow = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
-    'items-center gap-(--hn-control-gap) rounded-md py-2 pe-2.5 text-start text-sm select-none',
-    'ps-[calc(0.375rem+var(--hn-tree-level)*1.25rem)] text-fg outline-none',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-})
-
-export const treeToggle = tv({
-  base: 'text-muted flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm rtl:-scale-x-100 [&>span>svg]:size-3.5',
-})
-
-export const treeEmpty = tv({
-  base: 'text-muted px-2.5 py-2 text-sm',
-})
+export * from '../../../../shared/src/variants/tree'

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>