@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/virtual-list/types.ts

@@ -0,0 +1,45 @@
+export type VirtualListKey = string | number
+
+export interface VirtualListSlotProps<T> {
+  item: T
+  index: number
+}
+
+export interface VirtualListRange {
+  startIndex: number
+  endIndex: number
+}
+
+export interface VirtualListScrollOptions {
+  align?: 'start' | 'center' | 'end' | 'auto'
+  behavior?: 'auto' | 'smooth'
+}
+
+export interface VirtualListProps<T> {
+  items: readonly T[]
+  getKey: (item: T, index: number) => VirtualListKey
+  estimateSize?: number | ((item: T, index: number) => number)
+  dynamic?: boolean
+  height?: number | string
+  orientation?: 'vertical' | 'horizontal'
+  dir?: 'ltr' | 'rtl'
+  overscan?: number
+  gap?: number
+  paddingStart?: number
+  paddingEnd?: number
+  initialRect?: { width: number; height: number }
+  initialOffset?: number
+  loading?: boolean
+  emptyText?: string
+  label?: string
+  shadow?: boolean
+  class?: string
+  itemClass?: string | ((item: T, index: number) => string | undefined)
+}
+
+export interface VirtualListExpose {
+  viewport: HTMLElement | undefined
+  scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void
+  scrollToOffset: (offset: number, options?: Pick<VirtualListScrollOptions, 'behavior'>) => void
+  measure: () => void
+}

package/src/components/virtual-list/virtual-list.variants.ts

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

package/src/index.ts

@@ -16,10 +16,18 @@ export { default as IconButton } from './components/icon-button/IconButton.vue'
 export { default as CloseButton } from './components/close-button/CloseButton.vue'
 export { default as CopyButton } from './components/copy-button/CopyButton.vue'
 export { default as ButtonGroup } from './components/button-group/ButtonGroup.vue'
+export { default as FloatButton } from './components/float-button/FloatButton.vue'
+export type { FloatButtonProps } from './components/float-button/types'
+export { default as ScrollTop } from './components/scroll-top/ScrollTop.vue'
+export type { ScrollTopProps, ScrollTopTarget } from './components/scroll-top/types'
+export { default as SplitButton } from './components/split-button/SplitButton.vue'
+export type { SplitButtonProps } from './components/split-button/types'
 export { default as Tag } from './components/tag/Tag.vue'
 export { default as Chip } from './components/chip/Chip.vue'
 export { default as Avatar } from './components/avatar/Avatar.vue'
 export { default as AvatarGroup } from './components/avatar/AvatarGroup.vue'
+export { useAvatarGroup } from './components/avatar/context'
+export type { AvatarGroupContext } from './components/avatar/context'
 export type { AvatarVariants } from './components/avatar/avatar.variants'
 export { default as Badge } from './components/badge/Badge.vue'
 export { default as Indicator } from './components/indicator/Indicator.vue'
@@ -58,6 +66,13 @@ export { default as Select } from './components/select/Select.vue'
 export type { SelectOption, SelectOptionGroup, SelectItems } from './components/select/types'
 export { default as MultiSelect } from './components/multi-select/MultiSelect.vue'
 export { default as Combobox } from './components/combobox/Combobox.vue'
+export { default as Autocomplete } from './components/autocomplete/Autocomplete.vue'
+export type {
+  AutocompleteOption,
+  AutocompleteSelection,
+  CompletionContext,
+  CompletionEdit,
+} from './components/autocomplete/types'
 export { default as CommandPalette } from './components/command-palette/CommandPalette.vue'
 export type { CommandItem, CommandGroup, CommandItems } from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
@@ -290,6 +305,21 @@ export type {
 } from './components/scroll-area/scroll-restore'
 
 export { default as DataTable } from './components/data-table/DataTable.vue'
+export { default as DataList } from './components/data-list/DataList.vue'
+export type {
+  DataListKey,
+  DataListKeyField,
+  DataListLayout,
+  DataListPageChange,
+  DataListItemSlot,
+  DataListState,
+  DataListProps,
+  DataListTextField,
+  DataListPlaceholderSlot,
+  DataListVirtualOptions,
+  DataListExpose,
+  DataListRange,
+} from './components/data-list/types'
 export type {
   DataTableColumn,
   DataTableKey,
@@ -315,6 +345,16 @@ export type {
 } from './components/data-table/types'
 
 export { default as Timeline } from './components/timeline/Timeline.vue'
+export { default as VirtualList } from './components/virtual-list/VirtualList.vue'
+export type { VirtualizeOptions } from './lib/virtual/types'
+export type {
+  VirtualListProps,
+  VirtualListSlotProps,
+  VirtualListRange,
+  VirtualListKey,
+  VirtualListScrollOptions,
+  VirtualListExpose,
+} from './components/virtual-list/types'
 export type {
   TimelineItem,
   TimelineSlotProps,
@@ -335,3 +375,55 @@ export type {
   StepperNavigation,
   StepperBeforeChange,
 } from './components/stepper/types'
+
+export { default as Editable } from './components/editable/Editable.vue'
+export type {
+  EditableProps,
+  EditableControls,
+  EditableActivationMode,
+  EditableSubmitMode,
+  EditableSave,
+} from './components/editable/types'
+
+export { default as Affix } from './components/affix/Affix.vue'
+export type { AffixProps, AffixSlotProps, AffixExpose } from './components/affix/types'
+
+export { default as QRCode } from './components/qr-code/QRCode.vue'
+export type {
+  QRCodeProps,
+  QRCodeLevel,
+  QRCodeStatus,
+  QRCodeState,
+  QRCodeStatusSlot,
+  QRCodeExportOptions,
+  QRCodeExpose,
+} from './components/qr-code/types'
+export { default as Carousel } from './components/carousel/Carousel.vue'
+export type {
+  CarouselProps,
+  CarouselItemSlot,
+  CarouselState,
+  CarouselControls,
+  CarouselIndicatorsSlot,
+  CarouselIndicatorSlot,
+  CarouselExpose,
+} from './components/carousel/types'
+
+export { default as MonthGrid } from './components/month-grid/MonthGrid.vue'
+export type {
+  MonthGridProps,
+  MonthGridDay,
+  MonthGridRange,
+  MonthGridHeader,
+  MonthGridWeekday,
+  MonthGridExpose,
+} from './components/month-grid/types'
+
+export { default as Masonry } from './components/masonry/Masonry.vue'
+export type {
+  MasonryProps,
+  MasonryKey,
+  MasonryLayout,
+  MasonrySlotProps,
+  MasonryExpose,
+} from './components/masonry/types'

package/src/lib/anchored-overlay.ts

@@ -15,6 +15,7 @@ export function useAnchoredOverlay(
     anchor?: OverlayAnchor | null
     modal: boolean
     updatePositionStrategy: OverlayPositionStrategy
+    dir?: 'ltr' | 'rtl'
   },
   open: Ref<boolean | undefined>,
   emit: <K extends keyof DropdownMenuContentEmits>(
@@ -37,6 +38,7 @@ export function useAnchoredOverlay(
     visible,
     present,
     () => props.updatePositionStrategy,
+    () => props.dir,
   )
 
   let previousFocus: HTMLElement | null = null

package/src/lib/cn.ts

@@ -1,9 +1 @@
-import { clsx, type ClassValue } from 'clsx'
-import { extendTailwindMerge } from 'tailwind-merge'
-import { TW_MERGE_CONFIG, type HnClassGroupIds } from './tw-merge'
-
-const twMerge = extendTailwindMerge<HnClassGroupIds>(TW_MERGE_CONFIG)
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+export * from '../../../shared/src/lib/cn'

package/src/lib/layout-stability.ts

@@ -0,0 +1,12 @@
+import { computed, inject, provide, type InjectionKey, type Ref } from 'vue'
+
+const key: InjectionKey<Readonly<Ref<boolean>>> = Symbol('hn-layout-transition')
+
+export function provideLayoutTransition(transitioning: Readonly<Ref<boolean>>) {
+  const parent = useLayoutTransition()
+  provide(key, parent ? computed(() => parent.value || transitioning.value) : transitioning)
+}
+
+export function useLayoutTransition() {
+  return inject(key, undefined)
+}

package/src/lib/overlay-anchor.ts

@@ -27,13 +27,14 @@ export function useOverlayAnchor(
   open: Ref<boolean | undefined>,
   present: Ref<boolean>,
   strategy: () => OverlayPositionStrategy,
+  direction: () => 'ltr' | 'rtl' | undefined = () => undefined,
 ) {
   const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
 
   let current: OverlayAnchor | undefined
 
   watch(
-    [source, open, present, strategy],
+    [source, open, present, strategy, direction],
     ([anchor, active, mounted]) => {
       if (!mounted) {
         current = undefined

package/src/lib/reka/README.md

@@ -0,0 +1,13 @@
+# Primitive style adapter
+
+Shared variants and motion consume Hina runtime CSS properties. Only this directory may reference `--reka-*`; `test/constraints.test.ts` enforces the boundary. These properties carry live measurements or interaction state, not theme tokens.
+
+`styles.ts` maps primitive properties on the element where the primitive writes them. Do not hoist aliases to a provider or document root: CSS resolves variable references on the element defining the alias, before inheritance. Attach aliases to each overlay separately so nested overlays keep their own dimensions.
+
+The [shared runtime property contract](../../../../shared/runtime.md) owns the variable names, meanings and binding elements. This directory owns only their Reka mapping and Vue lifecycle integration.
+
+The slider mapping runs in the opposite direction: Hina owns the thumb geometry and supplies its transform to the primitive.
+
+`useRekaNavigationViewport` exposes `data-hn-ready` only after all four navigation measurements exist. It observes the viewport's inline style and resets readiness when the primitive clears its measurements or the element unmounts. Keep the measured state throughout the exit animation; setting readiness from the open model would hide the exit. Shared motion uses only `data-hn-ready`.
+
+A different framework adapter can supply the same Hina properties and readiness attribute directly. It must still implement the component interaction, accessibility and lifecycle contracts; this boundary isolates CSS integration, not the entire primitive API.

package/src/lib/reka/navigation-viewport.ts

@@ -0,0 +1,23 @@
+import { ref, shallowRef, watch } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+
+export function useRekaNavigationViewport() {
+  const viewport = shallowRef<HTMLElement>()
+  const ready = ref(false)
+
+  function update() {
+    const style = viewport.value?.style
+    ready.value = ['width', 'height', 'left', 'top'].every(dimension =>
+      Number.isFinite(
+        Number.parseFloat(
+          style?.getPropertyValue(`--reka-navigation-menu-viewport-${dimension}`) ?? '',
+        ),
+      ),
+    )
+  }
+
+  watch(viewport, update, { flush: 'post' })
+  useMutationObserver(viewport, update, { attributes: true, attributeFilter: ['style'] })
+
+  return { viewport, ready }
+}

package/src/lib/reka/styles.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'vue'
+
+export const rekaSelectStyle = {
+  '--hn-overlay-anchor-width': 'var(--reka-select-trigger-width)',
+  '--hn-overlay-available-height': 'var(--reka-select-content-available-height)',
+} satisfies CSSProperties
+
+export const rekaComboboxStyle = {
+  '--hn-overlay-anchor-width': 'var(--reka-combobox-trigger-width)',
+  '--hn-overlay-available-height': 'var(--reka-combobox-content-available-height)',
+} satisfies CSSProperties
+
+export const rekaPopoverStyle = {
+  '--hn-overlay-anchor-width': 'var(--reka-popover-trigger-width)',
+  '--hn-overlay-available-height': 'var(--reka-popover-content-available-height)',
+} satisfies CSSProperties
+
+export const rekaAccordionStyle = {
+  '--hn-collapse-h': 'var(--reka-accordion-content-height)',
+} satisfies CSSProperties
+
+export const rekaCollapsibleStyle = {
+  '--hn-collapse-h': 'var(--reka-collapsible-content-height)',
+} satisfies CSSProperties
+
+export const rekaRatingStepStyle = {
+  '--hn-rating-step-width': 'var(--reka-rating-item-step-width)',
+  '--hn-rating-step-opacity': 'var(--reka-rating-item-step-opacity)',
+  '--hn-rating-step-z-index': 'var(--reka-rating-item-step-z-index)',
+} satisfies CSSProperties
+
+export const rekaSliderThumbStyle = {
+  '--reka-slider-thumb-transform': 'var(--hn-slider-thumb-transform)',
+} satisfies CSSProperties
+
+export const rekaToastStyle = {
+  '--hn-toast-swipe-end-x': 'var(--reka-toast-swipe-end-x)',
+  '--hn-toast-swipe-move-x': 'var(--reka-toast-swipe-move-x)',
+} satisfies CSSProperties
+
+export const rekaNavigationViewportStyle = {
+  '--hn-navigation-width': 'var(--reka-navigation-menu-viewport-width)',
+  '--hn-navigation-height': 'var(--reka-navigation-menu-viewport-height)',
+  '--hn-navigation-left': 'var(--reka-navigation-menu-viewport-left)',
+  '--hn-navigation-top': 'var(--reka-navigation-menu-viewport-top)',
+} satisfies CSSProperties

package/src/lib/reka/useVirtualChoices.ts

@@ -0,0 +1,303 @@
+import { computed, nextTick, onScopeDispose, shallowRef, useId, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import {
+  injectComboboxRootContext,
+  injectListboxRootContext,
+  injectSelectRootContext,
+  useFilter,
+} from 'reka-ui'
+import type ScrollArea from '../../components/scroll-area/ScrollArea.vue'
+import { isOptionGroup, type SelectItems, type SelectOption } from '../../components/select/types'
+import { useVirtualCollection } from '../virtual/useVirtualCollection'
+import { nextEnabled, typeaheadMatch } from '../virtual/navigation'
+import type { VirtualizeOptions } from '../virtual/types'
+
+interface ChoiceRow<T> {
+  key: string
+  label: string
+  option?: T
+  group?: number
+  position: number
+}
+
+export function useVirtualChoices<T extends SelectOption>(props: {
+  options: SelectItems<T>
+  kind: 'select' | 'combobox' | 'listbox'
+  virtualize?: VirtualizeOptions
+  input?: HTMLElement
+}) {
+  const select = props.kind === 'select' ? injectSelectRootContext() : undefined
+  const listbox = props.kind !== 'select' ? injectListboxRootContext() : undefined
+  const combobox = props.kind === 'combobox' ? injectComboboxRootContext() : undefined
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  const body = shallowRef<HTMLElement>()
+  const viewport = computed(() => area.value?.viewport)
+  const activeKey = shallowRef<string>()
+  const id = useId()
+  const { contains } = useFilter({ sensitivity: 'base' })
+  const rows = computed(() => {
+    const result: ChoiceRow<T>[] = []
+    const query = combobox && !combobox.ignoreFilter.value ? combobox.filterSearch.value : ''
+    let position = 0
+    props.options.forEach((item, groupIndex) => {
+      if (isOptionGroup(item)) {
+        const options = item.options.filter(option => !query || contains(option.label, query))
+        if (!options.length) return
+        const group = result.length
+        result.push({ key: `group:${groupIndex}`, label: item.label, position: 0 })
+        for (const option of options)
+          result.push({
+            key: `option:${typeof option.value}:${option.value}`,
+            label: option.label,
+            option,
+            group,
+            position: ++position,
+          })
+      } else if (!query || contains(item.label, query))
+        result.push({
+          key: `option:${typeof item.value}:${item.value}`,
+          label: item.label,
+          option: item,
+          position: ++position,
+        })
+    })
+    return result
+  })
+  const size = computed(() => rows.value.filter(row => row.option).length)
+  const disabled = (index: number) =>
+    !rows.value[index]?.option || !!rows.value[index]?.option?.disabled
+  const first = () => nextEnabled(rows.value.length, 0, 1, disabled)
+  const selectedIndex = computed(() => {
+    const model = select?.modelValue.value ?? listbox?.modelValue.value
+    const value = Array.isArray(model) ? model[0] : model
+    return rows.value.findIndex(row => row.option?.value === value && !!row.option)
+  })
+  const activeIndex = computed(() => rows.value.findIndex(row => row.key === activeKey.value))
+  const collection = useVirtualCollection({
+    items: () => rows.value,
+    key: row => row.key,
+    viewport,
+    body,
+    config: () => props.virtualize,
+    initialIndex: props.kind === 'listbox' ? undefined : () => selectedIndex.value,
+    retain: () => [activeIndex.value, selectedIndex.value],
+    include: indexes =>
+      indexes.flatMap(index =>
+        rows.value[index]?.group === undefined ? [] : [rows.value[index]!.group!],
+      ),
+    estimate: row => (row.option ? (row.option.description ? 54 : 36) : 30),
+  })
+  let generation = 0
+  let disposed = false
+  async function highlight(
+    index: number,
+    scroll = true,
+    focus = listbox?.focusable.value ?? true,
+    align: 'auto' | 'center' = 'auto',
+  ) {
+    if (index < 0 || disabled(index)) return
+    const version = ++generation
+    const key = rows.value[index]!.key
+    activeKey.value = key
+    await nextTick()
+    if (disposed || version !== generation || rows.value[index]?.key !== key) return
+    if (scroll) collection.virtualizer.value.scrollToIndex(index, { align })
+    const element = body.value?.querySelector<HTMLElement>(
+      `[data-index="${index}"] [role="option"]`,
+    )
+    if (!element) return
+    if (listbox) listbox.changeHighlight(element, false, false)
+    if (focus) element.focus({ preventScroll: true })
+    return element
+  }
+  function remember(event: Event) {
+    const wrapper = (event.target as Element).closest<HTMLElement>('[data-index]')
+    if (wrapper && body.value?.contains(wrapper))
+      activeKey.value = rows.value[Number(wrapper.dataset.index)]?.key
+  }
+  let search = ''
+  let searchedAt = 0
+  function keydown(event: KeyboardEvent) {
+    if (
+      event.isComposing ||
+      event.defaultPrevented ||
+      select?.disabled?.value ||
+      listbox?.disabled.value
+    )
+      return
+    const input =
+      event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
+    const meta = event.ctrlKey || event.metaKey || event.altKey
+    const current = activeIndex.value
+    if (Date.now() - searchedAt > 1000) search = ''
+    let target = -1
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      !event.altKey &&
+      event.key.toLowerCase() === 'a' &&
+      !input &&
+      listbox?.multiple.value
+    ) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      listbox.modelValue.value = rows.value.flatMap(row =>
+        row.option && !row.option.disabled ? [row.option.value] : [],
+      )
+      return
+    }
+    if (meta) return
+    if (event.key === 'ArrowDown') target = nextEnabled(rows.value.length, current + 1, 1, disabled)
+    else if (event.key === 'ArrowUp')
+      target = nextEnabled(
+        rows.value.length,
+        current < 0 ? rows.value.length - 1 : current - 1,
+        -1,
+        disabled,
+      )
+    else if (event.key === 'Home') target = first()
+    else if (event.key === 'End')
+      target = nextEnabled(rows.value.length, rows.value.length - 1, -1, disabled)
+    else if (event.key === 'PageDown' || event.key === 'PageUp') {
+      const step = event.key === 'PageDown' ? 1 : -1
+      target = nextEnabled(
+        rows.value.length,
+        Math.max(
+          0,
+          Math.min(
+            rows.value.length - 1,
+            Math.max(0, current) +
+              step * Math.max(1, Math.floor((viewport.value?.clientHeight ?? 320) / 36)),
+          ),
+        ),
+        step,
+        disabled,
+      )
+    } else if (event.key === 'Enter' || (event.key === ' ' && !input && !search)) {
+      if (current < 0 || disabled(current)) return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      if (select) {
+        select.onValueChange(rows.value[current]!.option!.value)
+        if (!select.multiple.value) select.onOpenChange(false)
+      } else {
+        void highlight(current, false, false).then(element => element?.click())
+      }
+      return
+    } else if (!input && event.key.length === 1) {
+      const now = Date.now()
+      search = (now - searchedAt > 1000 ? '' : search) + event.key
+      searchedAt = now
+      target = typeaheadMatch(
+        rows.value.map(row => row.label),
+        search,
+        current,
+        disabled,
+      )
+    } else return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    if (target < 0) return
+    if (
+      event.shiftKey &&
+      listbox?.multiple.value &&
+      listbox.selectionBehavior?.value === 'replace'
+    ) {
+      const start = rows.value.findIndex(row => row.option?.value === listbox.firstValue?.value)
+      if (start >= 0)
+        listbox.modelValue.value = rows.value
+          .slice(Math.min(start, target), Math.max(start, target) + 1)
+          .flatMap(row => (row.option && !row.option.disabled ? [row.option.value] : []))
+    }
+    void highlight(target)
+  }
+  useEventListener(body, 'keydown', keydown, { capture: true })
+  useEventListener(() => combobox?.inputElement.value ?? props.input, 'keydown', keydown, {
+    capture: true,
+  })
+  useEventListener(body, 'focusin', remember)
+  const stops: Array<() => void> = []
+  if (listbox) {
+    const previous = listbox.isVirtual.value
+    listbox.isVirtual.value = true
+    stops.push(() => {
+      listbox.isVirtual.value = previous
+    })
+    stops.push(
+      listbox.virtualFocusHook.on(({ event, scroll }) => {
+        event?.preventDefault()
+        void highlight(
+          selectedIndex.value >= 0 ? selectedIndex.value : first(),
+          scroll,
+          event ? true : scroll && listbox.focusable.value,
+          'center',
+        )
+      }).off,
+    )
+    stops.push(
+      listbox.virtualHighlightHook.on(value => {
+        void highlight(rows.value.findIndex(row => row.option?.value === value))
+      }).off,
+    )
+    stops.push(
+      listbox.virtualKeydownHook.on(event => {
+        if (event.key === 'PageUp' && !event.target) void highlight(first(), true, false)
+      }).off,
+    )
+    watch(listbox.highlightedElement, element => {
+      const index = Number(element?.closest<HTMLElement>('[data-index]')?.dataset.index)
+      if (Number.isFinite(index) && rows.value[index]) activeKey.value = rows.value[index]!.key
+    })
+  }
+  if (combobox) {
+    const previous = combobox.isVirtual.value
+    combobox.isVirtual.value = true
+    stops.push(() => {
+      combobox.isVirtual.value = previous
+    })
+  }
+  watch(
+    rows,
+    () => {
+      if (activeIndex.value < 0)
+        void highlight(selectedIndex.value >= 0 ? selectedIndex.value : first(), false, false)
+      if (!rows.value.length && listbox) listbox.highlightedElement.value = null
+    },
+    { immediate: true, flush: 'post' },
+  )
+  watch(
+    viewport,
+    element => {
+      if (element && props.kind !== 'listbox') element.setAttribute('role', 'group')
+      if (element)
+        void highlight(
+          selectedIndex.value >= 0 ? selectedIndex.value : first(),
+          selectedIndex.value >= 0,
+          !!select?.open.value,
+          'center',
+        )
+    },
+    { flush: 'post' },
+  )
+  onScopeDispose(() => {
+    disposed = true
+    generation++
+    stops.forEach(stop => stop())
+  })
+  function itemAttrs(index: number) {
+    const row = rows.value[index]!
+    return {
+      'aria-posinset': row.position,
+      'aria-setsize': size.value,
+      'aria-describedby': row.group === undefined ? undefined : `${id}-${row.group}`,
+    }
+  }
+  return {
+    area,
+    body,
+    viewport,
+    rows,
+    ...collection,
+    itemAttrs,
+    labelId: (index: number) => `${id}-${index}`,
+  }
+}