@hina-ui/vue 1.7.5 → 1.7.6

package/src/lib/virtual/navigation.ts

@@ -1,26 +1 @@
-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
-}
+export * from '../../../../shared/src/lib/virtual/navigation'

package/src/lib/virtual/useVirtualCollection.ts

@@ -2,6 +2,17 @@ import { computed, nextTick, onScopeDispose, shallowRef, watch, type Ref } from
 import { useResizeObserver } from '@vueuse/core'
 import { defaultRangeExtractor, observeElementRect } from '@tanstack/vue-virtual'
 import { useVirtualWindow, virtualFlow } from './useVirtualWindow'
+import {
+  VIRTUAL_RECT,
+  centeredOffset,
+  collectionEstimator,
+  collectionOverscan,
+  fallbackRect,
+  mergeRange,
+  overscrolledOffset,
+  scrollMargin,
+  virtualConfig,
+} from '../../../../shared/src/lib/virtual/collection'
 import type { VirtualizeOptions } from './types'
 
 export function useVirtualCollection<T>(options: {
@@ -16,44 +27,26 @@ export function useVirtualCollection<T>(options: {
   estimate?: (item: T) => number
 }) {
   const margin = shallowRef(0)
-  const finite = (value: number | undefined, fallback: number) =>
-    value !== undefined && Number.isFinite(value) ? value : fallback
-  const config = computed(() =>
-    typeof options.config() === 'object'
-      ? (options.config() as Exclude<VirtualizeOptions, boolean>)
-      : {},
-  )
+  const config = computed(() => virtualConfig(options.config()))
   const virtualizer = useVirtualWindow(
     computed(() => {
       const items = options.items()
       const retained = options.retain?.() ?? []
       const initialIndex = options.initialIndex?.() ?? -1
-      const estimateSize = (index: number) =>
-        Math.max(1, finite(config.value.estimateSize, options.estimate?.(items[index]!) ?? 36))
+      const estimateSize = collectionEstimator(items, config.value, options.estimate)
       return {
         count: items.length,
         getScrollElement: () => options.viewport.value ?? null,
-        getItemKey: index => options.key(items[index]!),
+        getItemKey: (index: number) => options.key(items[index]!),
         estimateSize,
-        overscan: Math.max(0, Math.floor(finite(config.value.overscan, 6))),
-        initialRect: { width: 320, height: 320 },
-        initialOffset: () => {
-          if (initialIndex < 0 || initialIndex >= items.length) return 0
-          let offset = (estimateSize(initialIndex) - 320) / 2
-          for (let index = 0; index < initialIndex; index++) offset += estimateSize(index)
-          return Math.max(0, offset)
-        },
+        overscan: collectionOverscan(config.value),
+        initialRect: VIRTUAL_RECT,
+        initialOffset: () => centeredOffset(initialIndex, items.length, estimateSize),
         scrollMargin: margin.value,
         observeElementRect: (instance, callback) =>
-          observeElementRect(instance, rect =>
-            callback({ width: rect.width || 320, height: rect.height || 320 }),
-          ),
-        rangeExtractor: range => {
-          const indexes = [...defaultRangeExtractor(range), ...retained]
-          return [...new Set([...indexes, ...(options.include?.(indexes) ?? [])])]
-            .filter(index => index >= 0 && index < items.length)
-            .sort((a, b) => a - b)
-        },
+          observeElementRect(instance, rect => callback(fallbackRect(rect))),
+        rangeExtractor: range =>
+          mergeRange(defaultRangeExtractor(range), retained, items.length, options.include),
       }
     }),
   )
@@ -73,21 +66,10 @@ export function useVirtualCollection<T>(options: {
     else if (options.viewport.value && element instanceof HTMLElement && element.isConnected)
       virtualizer.value.measureElement(element)
   }
-  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
-  }
   async function refresh() {
     const viewport = options.viewport.value
     const body = options.body.value
-    if (viewport && body?.isConnected)
-      margin.value = Math.max(0, layoutTop(body) - layoutTop(viewport))
+    if (viewport && body?.isConnected) margin.value = scrollMargin(body, viewport)
     virtualizer.value.measure()
     await nextTick()
     for (const child of options.body.value?.children ?? []) measure(child)
@@ -112,14 +94,13 @@ export function useVirtualCollection<T>(options: {
     async () => {
       await nextTick()
       const viewport = options.viewport.value
-      if (
-        viewport &&
-        viewport.scrollTop > Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight)
-      ) {
-        virtualizer.value.scrollToOffset(
-          Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight),
-        )
-      }
+      if (!viewport) return
+      const offset = overscrolledOffset(
+        viewport.scrollTop,
+        virtualizer.value.getTotalSize(),
+        viewport.clientHeight,
+      )
+      if (offset !== undefined) virtualizer.value.scrollToOffset(offset)
     },
   )
   onScopeDispose(() => {

package/src/lib/virtual/useVirtualWindow.ts

@@ -1,10 +1,8 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
-import {
-  measureElement,
-  useVirtualizer,
-  type VirtualizerOptions,
-  type VirtualItem,
-} from '@tanstack/vue-virtual'
+import { measureElement, useVirtualizer, type VirtualizerOptions } from '@tanstack/vue-virtual'
+import { measuredSize, scrollPosition } from '../../../../shared/src/lib/virtual/flow'
+
+export { virtualFlow } from '../../../../shared/src/lib/virtual/flow'
 
 type Options = Omit<
   VirtualizerOptions<HTMLElement, HTMLElement>,
@@ -22,18 +20,21 @@ export function useVirtualWindow(options: MaybeRefOrGetter<Options>) {
     computed(() => ({
       useAnimationFrameWithResizeObserver: true,
       measureElement: (element, entry, instance) => {
-        const size = measureElement(element, entry, instance)
         const index = instance.indexFromElement(element)
-        return size > 0
-          ? size
-          : (instance.itemSizeCache.get(instance.options.getItemKey(index)) ??
-              instance.options.estimateSize(index))
+        return measuredSize(
+          measureElement(element, entry, instance),
+          instance.itemSizeCache.get(instance.options.getItemKey(index)),
+          () => instance.options.estimateSize(index),
+        )
       },
       scrollToFn: (offset, { adjustments = 0, behavior }, instance) => {
         instance.scrollElement?.scrollTo({
-          [instance.options.horizontal ? 'left' : 'top']:
-            (offset + adjustments) *
-            (instance.options.horizontal && instance.options.isRtl ? -1 : 1),
+          ...scrollPosition(
+            offset,
+            adjustments,
+            instance.options.horizontal,
+            instance.options.isRtl,
+          ),
           behavior,
         })
       },
@@ -41,14 +42,3 @@ export function useVirtualWindow(options: MaybeRefOrGetter<Options>) {
     })),
   )
 }
-
-export function virtualFlow(items: VirtualItem[], total: number, margin = 0) {
-  return {
-    entries: items.map((item, index) => ({
-      ...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)),
-  }
-}

package/src/locale/en-US.ts

@@ -1,220 +1 @@
-import type { UiMessages } from './types'
-
-export const enUS: UiMessages = {
-  qrCode: {
-    label: 'QR code',
-    empty: 'No content',
-    expired: 'QR code expired',
-    scanned: 'Scanned',
-    error: 'Unable to generate QR code',
-    refresh: 'Refresh code',
-  },
-  carousel: {
-    label: 'Featured content',
-    role: 'carousel',
-    slide: 'slide',
-    prev: 'Previous group',
-    next: 'Next group',
-    choose: 'Choose a position',
-    play: 'Start rotation',
-    pause: 'Stop rotation',
-    empty: 'No content',
-    position: (index, total) => `${index} of ${total}`,
-    goTo: index => `Go to group ${index}`,
-  },
-  monthGrid: { today: 'Go to current month' },
-  masonry: { empty: 'No items' },
-  splitButton: { more: 'More actions' },
-  editable: {
-    edit: 'Edit',
-    save: 'Save',
-    placeholder: 'Click to edit',
-    failed: 'Could not save. Try again.',
-  },
-  tag: 'en-US',
-  stepper: {
-    label: 'Steps',
-    progress: (step, total) => `Step ${step} of ${total}`,
-    completed: 'Completed',
-    error: 'This step has an error',
-  },
-  common: {
-    close: 'Close',
-    copy: 'Copy',
-    copied: 'Copied',
-    clear: 'Clear',
-    loading: 'Loading',
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-  },
-  banner: {
-    prev: 'Previous notice',
-    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',
-    first: 'First page',
-    last: 'Last page',
-    pageLabel: n => `Page ${n}`,
-    totalLabel: n => `${n} items`,
-  },
-  table: {
-    edit: 'Edit',
-    save: 'Save',
-    cancel: 'Cancel',
-    editFailed: 'Could not save. Try again.',
-    selectPage: 'Select current page',
-    selectFiltered: 'Select filtered rows',
-    expand: 'Expand',
-    collapse: 'Collapse',
-    moveRow: 'Move row',
-    moveColumn: 'Move column',
-    resizeColumn: 'Resize column',
-
-    noColumns: 'No visible columns',
-    empty: 'No data',
-    loading: 'Loading',
-    sortAsc: 'Sort ascending',
-    sortDesc: 'Sort descending',
-    sortNone: 'Clear sorting',
-    selectRow: 'Select row',
-    selectAll: 'Select all',
-  },
-  select: {
-    placeholder: 'Select',
-    empty: 'No matches',
-    optionCountLabel: n => `${n} options available`,
-  },
-  upload: {
-    choose: 'Choose file',
-    dropHint: 'Drop files here, or click to browse',
-    tooLargeLabel: readableSize => `File exceeds the ${readableSize} limit`,
-    remove: 'Remove',
-    removeFile: name => `Remove ${name}`,
-  },
-  time: {
-    justNow: 'Just now',
-    unknown: 'Unknown time',
-  },
-  virtualList: { empty: 'No data' },
-  dataList: { empty: 'No data', list: 'List view', grid: 'Grid view', layout: 'Display layout' },
-  scroll: {
-    regionLabel: 'Scrollable region',
-    backToTop: 'Back to top',
-  },
-  toast: {
-    regionLabel: 'Notifications',
-  },
-  spoiler: {
-    revealLabel: 'Spoiler, click to reveal',
-    hideLabel: 'Hide spoiler',
-  },
-  codeblock: {
-    copy: 'Copy code',
-  },
-  splitter: {
-    handleLabel: 'Resize panel',
-  },
-  sidebar: {
-    navLabel: 'Sidebar navigation',
-    toggleLabel: 'Toggle sidebar',
-  },
-  anchor: {
-    navLabel: 'On this page',
-  },
-  breadcrumb: {
-    navLabel: 'Breadcrumb',
-  },
-  lightbox: {
-    zoomIn: 'Zoom in',
-    zoomOut: 'Zoom out',
-    resetZoom: 'Fit to window',
-    actualSize: 'Actual size',
-    rotate: 'Rotate',
-    download: 'Download',
-    loadingLarge: 'Loading HD',
-  },
-  chip: {
-    remove: 'Remove',
-  },
-  numberInput: {
-    increase: 'Increase',
-    decrease: 'Decrease',
-  },
-  passwordInput: {
-    show: 'Show password',
-    hide: 'Hide password',
-  },
-  tree: { empty: 'No nodes' },
-  treeSelect: {
-    search: 'Search nodes',
-  },
-  combobox: {
-    placeholder: 'Type or choose',
-    toggle: 'Show options',
-  },
-  slider: {
-    minimum: 'Minimum',
-    maximum: 'Maximum',
-  },
-  pinInput: {
-    cellLabel: (index, total) => `Digit ${index} of ${total}`,
-  },
-  dateField: {
-    year: 'Year',
-    month: 'Month',
-    day: 'Day',
-    hour: 'Hour',
-    minute: 'Minute',
-    second: 'Second',
-    dayPeriod: 'AM or PM',
-  },
-  dateRangeField: {
-    start: 'start date',
-    end: 'end date',
-    separator: '–',
-  },
-  datePicker: {
-    open: 'Open calendar',
-  },
-  dateTimePicker: {
-    time: 'Time',
-  },
-  rating: {
-    star: value => `${value} ${value === 1 ? 'star' : 'stars'}`,
-    label: (value, max) => `${value} out of ${max} stars`,
-    score: (value, max) => `${value} out of ${max} points`,
-  },
-  form: {
-    required: 'Required',
-  },
-  command: {
-    label: 'Command palette',
-    placeholder: 'Search',
-    empty: 'No matches',
-  },
-  calendar: {
-    label: 'Calendar',
-    prev: 'Previous month',
-    next: 'Next month',
-    prevYear: 'Previous year',
-    nextYear: 'Next year',
-    prevYears: 'Previous twelve years',
-    nextYears: 'Next twelve years',
-    pickMonth: 'Choose a month',
-    pickYear: 'Choose a year',
-    weekStartsOn: 0,
-  },
-}
+export { enUS } from '../../../shared/src/locale/en-US'

package/src/locale/index.ts

@@ -7,64 +7,21 @@ import {
   type InjectionKey,
   type MaybeRefOrGetter,
 } from 'vue'
-import type { PartialUiMessages, UiMessages } from './types'
-import { zhCN } from './zh-CN'
+import {
+  mergeUiMessages,
+  zhCN,
+  type PartialUiMessages,
+  type UiMessages,
+} from '../../../shared/src/locale'
 
 const UI_LOCALE_KEY = Symbol('hn-ui-locale') as InjectionKey<ComputedRef<UiMessages>>
 
 const fallbackLocale = computed(() => zhCN)
 
-function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
-  return {
-    qrCode: { ...base.qrCode, ...patch.qrCode },
-    carousel: { ...base.carousel, ...patch.carousel },
-    monthGrid: { ...base.monthGrid, ...patch.monthGrid },
-    masonry: { ...base.masonry, ...patch.masonry },
-    splitButton: { ...base.splitButton, ...patch.splitButton },
-    editable: { ...base.editable, ...patch.editable },
-    tag: patch.tag ?? base.tag,
-    common: { ...base.common, ...patch.common },
-    stepper: { ...base.stepper, ...patch.stepper },
-    banner: { ...base.banner, ...patch.banner },
-    pagination: { ...base.pagination, ...patch.pagination },
-    table: { ...base.table, ...patch.table },
-    select: { ...base.select, ...patch.select },
-    upload: { ...base.upload, ...patch.upload },
-    time: { ...base.time, ...patch.time },
-    scroll: { ...base.scroll, ...patch.scroll },
-    virtualList: { ...base.virtualList, ...patch.virtualList },
-    dataList: { ...base.dataList, ...patch.dataList },
-    toast: { ...base.toast, ...patch.toast },
-    spoiler: { ...base.spoiler, ...patch.spoiler },
-    codeblock: { ...base.codeblock, ...patch.codeblock },
-    splitter: { ...base.splitter, ...patch.splitter },
-    sidebar: { ...base.sidebar, ...patch.sidebar },
-    anchor: { ...base.anchor, ...patch.anchor },
-    breadcrumb: { ...base.breadcrumb, ...patch.breadcrumb },
-    lightbox: { ...base.lightbox, ...patch.lightbox },
-    chip: { ...base.chip, ...patch.chip },
-    numberInput: { ...base.numberInput, ...patch.numberInput },
-    passwordInput: { ...base.passwordInput, ...patch.passwordInput },
-    tree: { ...base.tree, ...patch.tree },
-    treeSelect: { ...base.treeSelect, ...patch.treeSelect },
-    combobox: { ...base.combobox, ...patch.combobox },
-    slider: { ...base.slider, ...patch.slider },
-    pinInput: { ...base.pinInput, ...patch.pinInput },
-    dateField: { ...base.dateField, ...patch.dateField },
-    dateRangeField: { ...base.dateRangeField, ...patch.dateRangeField },
-    calendar: { ...base.calendar, ...patch.calendar },
-    datePicker: { ...base.datePicker, ...patch.datePicker },
-    dateTimePicker: { ...base.dateTimePicker, ...patch.dateTimePicker },
-    rating: { ...base.rating, ...patch.rating },
-    form: { ...base.form, ...patch.form },
-    command: { ...base.command, ...patch.command },
-  }
-}
-
 export function provideUiLocale(
   messages: MaybeRefOrGetter<PartialUiMessages>,
 ): ComputedRef<UiMessages> {
-  const resolved = computed(() => merge(zhCN, toValue(messages)))
+  const resolved = computed(() => mergeUiMessages(zhCN, toValue(messages)))
   provide(UI_LOCALE_KEY, resolved)
   return resolved
 }
@@ -73,6 +30,5 @@ export function useUiLocale(): ComputedRef<UiMessages> {
   return inject(UI_LOCALE_KEY, fallbackLocale)
 }
 
-export { zhCN } from './zh-CN'
-export { enUS } from './en-US'
-export type { UiMessages, PartialUiMessages } from './types'
+export { zhCN, enUS } from '../../../shared/src/locale'
+export type { UiMessages, PartialUiMessages } from '../../../shared/src/locale'