@hina-ui/vue 1.7.4 → 1.7.6

package/dist/shared/lib/virtual/choices.ts

@@ -0,0 +1,193 @@
+import { isOptionGroup, type SelectItems, type SelectOption } from '../../types/select'
+import { nextEnabled, typeaheadMatch } from './navigation'
+
+export interface ChoiceRow<T> {
+  key: string
+  label: string
+  option?: T
+  group?: number
+  position: number
+}
+
+export const CHOICE_TYPEAHEAD_TIMEOUT = 1000
+export const CHOICE_PAGE_ROW = 36
+
+export function choiceKey(value: string | number) {
+  return `option:${typeof value}:${value}`
+}
+
+export function choiceRows<T extends SelectOption>(
+  items: SelectItems<T>,
+  query: string,
+  contains: (text: string, query: string) => boolean,
+) {
+  const result: ChoiceRow<T>[] = []
+  let position = 0
+  items.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: choiceKey(option.value),
+          label: option.label,
+          option,
+          group,
+          position: ++position,
+        })
+    } else if (!query || contains(item.label, query))
+      result.push({
+        key: choiceKey(item.value),
+        label: item.label,
+        option: item,
+        position: ++position,
+      })
+  })
+  return result
+}
+
+export function choiceSize<T>(rows: readonly ChoiceRow<T>[]) {
+  return rows.filter(row => row.option).length
+}
+
+export function choiceDisabled<T extends SelectOption>(
+  rows: readonly ChoiceRow<T>[],
+  index: number,
+) {
+  return !rows[index]?.option || !!rows[index]?.option?.disabled
+}
+
+export function choiceEstimate<T extends SelectOption>(row: ChoiceRow<T>) {
+  return row.option ? (row.option.description ? 54 : 36) : 30
+}
+
+export function choiceGroups<T>(rows: readonly ChoiceRow<T>[], indexes: readonly number[]) {
+  return indexes.flatMap(index => (rows[index]?.group === undefined ? [] : [rows[index]!.group!]))
+}
+
+export function selectedChoice<T extends SelectOption>(
+  rows: readonly ChoiceRow<T>[],
+  model: unknown,
+) {
+  const value = Array.isArray(model) ? model[0] : model
+  return rows.findIndex(row => row.option?.value === value && !!row.option)
+}
+
+export function choiceAttrs<T>(
+  rows: readonly ChoiceRow<T>[],
+  index: number,
+  size: number,
+  id: string,
+) {
+  const row = rows[index]!
+  return {
+    'aria-posinset': row.position,
+    'aria-setsize': size,
+    'aria-describedby': row.group === undefined ? undefined : `${id}-${row.group}`,
+  }
+}
+
+export function enabledChoiceValues<T extends SelectOption>(rows: readonly ChoiceRow<T>[]) {
+  return rows.flatMap(row => (row.option && !row.option.disabled ? [row.option.value] : []))
+}
+
+export function choiceRangeValues<T extends SelectOption>(
+  rows: readonly ChoiceRow<T>[],
+  anchor: unknown,
+  target: number,
+) {
+  const start = rows.findIndex(row => row.option?.value === anchor)
+  if (start < 0) return undefined
+  return enabledChoiceValues(rows.slice(Math.min(start, target), Math.max(start, target) + 1))
+}
+
+export function createChoiceTypeahead(now: () => number = () => Date.now()) {
+  let search = ''
+  let searchedAt = 0
+  return {
+    get search() {
+      return search
+    },
+    expire() {
+      if (now() - searchedAt > CHOICE_TYPEAHEAD_TIMEOUT) search = ''
+    },
+    extend(key: string) {
+      const time = now()
+      search = (time - searchedAt > CHOICE_TYPEAHEAD_TIMEOUT ? '' : search) + key
+      searchedAt = time
+      return search
+    },
+  }
+}
+
+export type ChoiceTypeahead = ReturnType<typeof createChoiceTypeahead>
+
+export interface ChoiceKeyEvent {
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  altKey: boolean
+  shiftKey: boolean
+}
+
+export type ChoiceKeyAction =
+  | { type: 'none' }
+  | { type: 'select-all' }
+  | { type: 'commit'; index: number }
+  | { type: 'move'; target: number }
+
+export function choiceKeyAction(
+  event: ChoiceKeyEvent,
+  state: {
+    labels: () => readonly string[]
+    count: number
+    current: number
+    input: boolean
+    multiple: boolean
+    page: number
+    disabled: (index: number) => boolean
+    typeahead: ChoiceTypeahead
+  },
+): ChoiceKeyAction {
+  const { count, current, input, disabled, typeahead } = state
+  const meta = event.ctrlKey || event.metaKey || event.altKey
+  typeahead.expire()
+  if (
+    (event.ctrlKey || event.metaKey) &&
+    !event.altKey &&
+    event.key.toLowerCase() === 'a' &&
+    !input &&
+    state.multiple
+  )
+    return { type: 'select-all' }
+  if (meta) return { type: 'none' }
+  let target = -1
+  if (event.key === 'ArrowDown') target = nextEnabled(count, current + 1, 1, disabled)
+  else if (event.key === 'ArrowUp')
+    target = nextEnabled(count, current < 0 ? count - 1 : current - 1, -1, disabled)
+  else if (event.key === 'Home') target = nextEnabled(count, 0, 1, disabled)
+  else if (event.key === 'End') target = nextEnabled(count, count - 1, -1, disabled)
+  else if (event.key === 'PageDown' || event.key === 'PageUp') {
+    const step = event.key === 'PageDown' ? 1 : -1
+    target = nextEnabled(
+      count,
+      Math.max(
+        0,
+        Math.min(
+          count - 1,
+          Math.max(0, current) + step * Math.max(1, Math.floor(state.page / CHOICE_PAGE_ROW)),
+        ),
+      ),
+      step,
+      disabled,
+    )
+  } else if (event.key === 'Enter' || (event.key === ' ' && !input && !typeahead.search)) {
+    if (current < 0 || disabled(current)) return { type: 'none' }
+    return { type: 'commit', index: current }
+  } else if (!input && event.key.length === 1)
+    target = typeaheadMatch(state.labels(), typeahead.extend(event.key), current, disabled)
+  else return { type: 'none' }
+  return { type: 'move', target }
+}

package/dist/shared/lib/virtual/collection.ts

@@ -0,0 +1,71 @@
+import type { VirtualizeOptions } from '../../types/virtual'
+
+export const VIRTUAL_RECT = { width: 320, height: 320 }
+
+export function finite(value: number | undefined, fallback: number) {
+  return value !== undefined && Number.isFinite(value) ? value : fallback
+}
+
+export function virtualConfig(config: VirtualizeOptions | undefined) {
+  return typeof config === 'object' ? config : {}
+}
+
+export function collectionEstimator<T>(
+  items: readonly T[],
+  config: Exclude<VirtualizeOptions, boolean>,
+  estimate?: (item: T) => number,
+) {
+  return (index: number) =>
+    Math.max(1, finite(config.estimateSize, estimate?.(items[index]!) ?? 36))
+}
+
+export function collectionOverscan(config: Exclude<VirtualizeOptions, boolean>) {
+  return Math.max(0, Math.floor(finite(config.overscan, 6)))
+}
+
+export function centeredOffset(
+  index: number,
+  count: number,
+  estimateSize: (index: number) => number,
+  viewport = VIRTUAL_RECT.height,
+) {
+  if (index < 0 || index >= count) return 0
+  let offset = (estimateSize(index) - viewport) / 2
+  for (let current = 0; current < index; current++) offset += estimateSize(current)
+  return Math.max(0, offset)
+}
+
+export function mergeRange(
+  indexes: readonly number[],
+  retained: readonly number[],
+  count: number,
+  include?: (indexes: number[]) => number[],
+) {
+  const merged = [...indexes, ...retained]
+  return [...new Set([...merged, ...(include?.(merged) ?? [])])]
+    .filter(index => index >= 0 && index < count)
+    .sort((a, b) => a - b)
+}
+
+export function fallbackRect(rect: { width: number; height: number }) {
+  return {
+    width: rect.width || VIRTUAL_RECT.width,
+    height: rect.height || VIRTUAL_RECT.height,
+  }
+}
+
+export function layoutTop(element: HTMLElement) {
+  let top = 0
+  for (let node: HTMLElement | null = element; node; node = node.offsetParent as HTMLElement | null)
+    top += node.offsetTop
+  return top
+}
+
+export function scrollMargin(body: HTMLElement, viewport: HTMLElement) {
+  return Math.max(0, layoutTop(body) - layoutTop(viewport))
+}
+
+export function overscrolledOffset(scrollTop: number, total: number, clientHeight: number) {
+  const max = Math.max(0, total - clientHeight)
+  return scrollTop > max ? max : undefined
+}

package/dist/shared/lib/virtual/filter.ts

@@ -0,0 +1,26 @@
+export function createCollatorFilter(options?: Intl.CollatorOptions) {
+  const collator = new Intl.Collator('en', { usage: 'search', ...options })
+  return {
+    startsWith(string: string, substring: string) {
+      if (substring.length === 0) return true
+      string = string.normalize('NFC')
+      substring = substring.normalize('NFC')
+      return collator.compare(string.slice(0, substring.length), substring) === 0
+    },
+    endsWith(string: string, substring: string) {
+      if (substring.length === 0) return true
+      string = string.normalize('NFC')
+      substring = substring.normalize('NFC')
+      return collator.compare(string.slice(-substring.length), substring) === 0
+    },
+    contains(string: string, substring: string) {
+      if (substring.length === 0) return true
+      string = string.normalize('NFC')
+      substring = substring.normalize('NFC')
+      for (let scan = 0; scan + substring.length <= string.length; scan++)
+        if (collator.compare(substring, string.slice(scan, scan + substring.length)) === 0)
+          return true
+      return false
+    },
+  }
+}

package/dist/shared/lib/virtual/flow.ts

@@ -0,0 +1,32 @@
+export interface VirtualSpan {
+  start: number
+  end: number
+}
+
+export type VirtualFlowEntry<T extends VirtualSpan> = T & { gapBefore: number }
+
+export function virtualFlow<T extends VirtualSpan>(items: readonly T[], total: number, margin = 0) {
+  return {
+    entries: items.map((item, index): VirtualFlowEntry<T> => ({
+      ...item,
+      gapBefore: index ? Math.max(0, item.start - items[index - 1]!.end) : 0,
+    })),
+    before: Math.max(0, (items[0]?.start ?? margin) - margin),
+    after: Math.max(0, total - ((items.at(-1)?.end ?? margin) - margin)),
+  }
+}
+
+export function measuredSize(size: number, cached: number | undefined, estimate: () => number) {
+  return size > 0 ? size : (cached ?? estimate())
+}
+
+export function scrollPosition(
+  offset: number,
+  adjustments: number,
+  horizontal: boolean | undefined,
+  rtl: boolean | undefined,
+) {
+  return {
+    [horizontal ? 'left' : 'top']: (offset + adjustments) * (horizontal && rtl ? -1 : 1),
+  } as { left?: number; top?: number }
+}

package/dist/shared/lib/virtual/list.ts

@@ -0,0 +1,63 @@
+import { VIRTUAL_RECT } from './collection'
+
+export function nonnegative(value: number) {
+  return Number.isFinite(value) ? Math.max(0, value) : 0
+}
+
+export function listEstimator<T>(
+  items: readonly T[],
+  estimate: number | ((item: T, index: number) => number) | undefined,
+) {
+  const value = estimate ?? 48
+  return (index: number) =>
+    Math.max(1, nonnegative(typeof value === 'function' ? value(items[index]!, index) : value))
+}
+
+export function listInitialRect(
+  initialRect: { width: number; height: number } | undefined,
+  height: number | string | undefined,
+) {
+  return (
+    initialRect ?? {
+      width: VIRTUAL_RECT.width,
+      height: typeof height === 'number' ? height : VIRTUAL_RECT.height,
+    }
+  )
+}
+
+export function retainIndex(indexes: number[], retained: number) {
+  if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained)
+  return indexes.sort((a, b) => a - b)
+}
+
+export function listContentStyle(flow: { before: number; after: number }, horizontal: boolean) {
+  const { before: start, after: end } = flow
+  return horizontal
+    ? {
+        width: 'max-content',
+        height: '100%',
+        paddingInlineStart: `${start}px`,
+        paddingInlineEnd: `${end}px`,
+      }
+    : { width: '100%', paddingBlockStart: `${start}px`, paddingBlockEnd: `${end}px` }
+}
+
+export function listRootStyle(height: number | string | undefined) {
+  return { height: typeof height === 'string' ? height : `${height ?? VIRTUAL_RECT.height}px` }
+}
+
+export function listItemStyle(
+  entry: { gapBefore: number; size: number },
+  horizontal: boolean,
+  dynamic: boolean | undefined,
+) {
+  return horizontal
+    ? {
+        marginInlineStart: `${entry.gapBefore}px`,
+        width: dynamic === false ? `${entry.size}px` : undefined,
+      }
+    : {
+        marginBlockStart: `${entry.gapBefore}px`,
+        height: dynamic === false ? `${entry.size}px` : undefined,
+      }
+}

package/dist/shared/lib/virtual/navigation.ts

@@ -0,0 +1,26 @@
+export function nextEnabled(
+  length: number,
+  from: number,
+  step: number,
+  disabled: (index: number) => boolean,
+) {
+  for (let index = from; index >= 0 && index < length; index += step)
+    if (!disabled(index)) return index
+  return -1
+}
+
+export function typeaheadMatch(
+  labels: readonly string[],
+  query: string,
+  current: number,
+  disabled: (index: number) => boolean,
+) {
+  const normalized = query.toLocaleLowerCase()
+  const repeated = [...normalized].every(char => char === normalized[0])
+  const search = repeated ? normalized[0]! : normalized
+  for (let offset = repeated ? 1 : 0; offset <= labels.length; offset++) {
+    const index = (Math.max(0, current) + offset) % labels.length
+    if (!disabled(index) && labels[index]?.toLocaleLowerCase().startsWith(search)) return index
+  }
+  return -1
+}

package/dist/shared/lib/virtual/tree.ts

@@ -0,0 +1,98 @@
+import { CHOICE_PAGE_ROW, type ChoiceTypeahead } from './choices'
+import { nextEnabled, typeaheadMatch } from './navigation'
+
+export interface VirtualTreeRow<T> {
+  _id: string
+  level: number
+  hasChildren: boolean
+  parentItem?: T
+  value: T
+}
+
+export interface VirtualTreeKeyEvent {
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  altKey: boolean
+}
+
+export function virtualTreeDisabled<T extends { disabled?: boolean }>(
+  rows: readonly VirtualTreeRow<T>[],
+  index: number,
+  rootDisabled: boolean,
+  disabled?: (node: T) => boolean,
+) {
+  const row = rows[index]
+  return !row || rootDisabled || (disabled?.(row.value) ?? !!row.value.disabled)
+}
+
+export function virtualTreeKeyTarget<T extends { label: string }>(
+  event: VirtualTreeKeyEvent,
+  state: {
+    rows: readonly VirtualTreeRow<T>[]
+    current: number
+    expanded: readonly string[]
+    dir: 'ltr' | 'rtl'
+    page: number
+    getKey: (value: T) => string
+    disabled: (index: number) => boolean
+    typeahead: ChoiceTypeahead
+  },
+): number | undefined {
+  const { rows, current, expanded, disabled } = state
+  if (event.ctrlKey || event.metaKey || event.altKey) return undefined
+  const count = rows.length
+  const item = rows[current]
+  if (event.key === 'ArrowDown') return nextEnabled(count, current + 1, 1, disabled)
+  if (event.key === 'ArrowUp') return nextEnabled(count, current - 1, -1, disabled)
+  if (event.key === 'Home') return nextEnabled(count, 0, 1, disabled)
+  if (event.key === 'End') return nextEnabled(count, count - 1, -1, disabled)
+  if (event.key === 'PageDown' || event.key === 'PageUp') {
+    const step = event.key === 'PageDown' ? 1 : -1
+    return nextEnabled(
+      count,
+      Math.max(
+        0,
+        Math.min(count - 1, current + step * Math.max(1, Math.floor(state.page / CHOICE_PAGE_ROW))),
+      ),
+      step,
+      disabled,
+    )
+  }
+  if (event.key === (state.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight')) {
+    if (!item?.hasChildren) return undefined
+    if (!expanded.includes(item._id)) return undefined
+    const child = nextEnabled(count, current + 1, 1, disabled)
+    return rows[child]?.level === item.level + 1 ? child : -1
+  }
+  if (event.key === (state.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft')) {
+    if (!item || expanded.includes(item._id)) return undefined
+    if (!item.parentItem) return -1
+    const parent = state.getKey(item.parentItem)
+    return rows.findIndex(row => row._id === parent)
+  }
+  if (event.key.length === 1 && event.key !== ' ')
+    return typeaheadMatch(
+      rows.map(row => row.value.label),
+      state.typeahead.extend(event.key),
+      current,
+      disabled,
+    )
+  return undefined
+}
+
+export function survivingTreeAncestor<T>(
+  rows: readonly VirtualTreeRow<T>[],
+  previous: readonly VirtualTreeRow<T>[] | undefined,
+  active: string,
+  getKey: (value: T) => string,
+) {
+  let removed = previous?.find(row => row._id === active)
+  let target = -1
+  while (removed?.parentItem && target < 0) {
+    const parent = getKey(removed.parentItem)
+    target = rows.findIndex(row => row._id === parent)
+    removed = previous?.find(row => row._id === parent)
+  }
+  return target
+}