@hina-ui/vue 1.7.5 → 1.7.7

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

@@ -3,6 +3,15 @@ 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 {
+  listContentStyle,
+  listEstimator,
+  listInitialRect,
+  listItemStyle,
+  listRootStyle,
+  nonnegative,
+  retainIndex,
+} from '../../../../../shared/src/lib/virtual/list'
 import { prefersReducedMotion } from '../../../motion'
 import type ScrollArea from '../../scroll-area/ScrollArea.vue'
 import type {
@@ -12,10 +21,6 @@ import type {
   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,
@@ -38,16 +43,11 @@ export function useVirtualList<T>(
       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),
-          ),
+        estimateSize: listEstimator(items, props.estimateSize),
         horizontal: horizontal.value,
         isRtl: direction.value === 'rtl',
         overscan: Math.floor(nonnegative(props.overscan ?? 5)),
@@ -55,15 +55,9 @@ export function useVirtualList<T>(
         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)
-        },
+        initialRect: listInitialRect(props.initialRect, props.height),
+        rangeExtractor: (range: Parameters<typeof defaultRangeExtractor>[0]) =>
+          retainIndex(defaultRangeExtractor(range), retained),
       }
     }),
   )
@@ -76,31 +70,11 @@ export function useVirtualList<T>(
       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`,
-  }))
+  const contentStyle = computed<CSSProperties>(() => listContentStyle(flow.value, horizontal.value))
+  const rootStyle = computed<CSSProperties>(() => listRootStyle(props.height))
 
   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,
-        }
+    return listItemStyle(entry, horizontal.value, props.dynamic)
   }
 
   function measureElement(element: unknown) {

package/src/components/visually-hidden/VisuallyHidden.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-  import { VisuallyHidden as RekaVisuallyHidden } from 'reka-ui'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import { VISUALLY_HIDDEN_STYLE } from '../../../../shared/src/primitives/visually-hidden'
 
   defineOptions({ name: 'HnVisuallyHidden' })
+
+  const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'span' })
 </script>
 
 <template>
-  <RekaVisuallyHidden>
+  <Primitive :as="props.as" :as-child="props.asChild" :style="VISUALLY_HIDDEN_STYLE">
     <slot />
-  </RekaVisuallyHidden>
+  </Primitive>
 </template>

package/src/lib/caret.ts

@@ -1,48 +1 @@
-const MIRRORED = [
-  'font-family',
-  'font-size',
-  'font-weight',
-  'font-style',
-  'font-variant',
-  'font-feature-settings',
-  'line-height',
-  'letter-spacing',
-  'word-spacing',
-  'text-indent',
-  'text-transform',
-  'tab-size',
-  'direction',
-  'padding-top',
-  'padding-right',
-  'padding-bottom',
-  'padding-left',
-  'border-top-width',
-  'border-right-width',
-  'border-bottom-width',
-  'border-left-width',
-]
-
-export function caretTop(node: HTMLTextAreaElement, at = node.selectionEnd): number {
-  const style = getComputedStyle(node)
-  const mirror = node.ownerDocument.createElement('div')
-  for (const prop of MIRRORED) mirror.style.setProperty(prop, style.getPropertyValue(prop))
-  Object.assign(mirror.style, {
-    position: 'absolute',
-    top: '0',
-    insetInlineStart: '-9999px',
-    visibility: 'hidden',
-    pointerEvents: 'none',
-    boxSizing: 'border-box',
-    width: `${node.offsetWidth}px`,
-    whiteSpace: 'pre-wrap',
-    overflowWrap: 'break-word',
-  })
-  mirror.textContent = node.value.slice(0, at)
-  const marker = node.ownerDocument.createElement('span')
-  marker.textContent = node.value.slice(at) || '​'
-  mirror.append(marker)
-  node.ownerDocument.body.append(mirror)
-  const top = marker.offsetTop
-  mirror.remove()
-  return top
-}
+export * from '../../../shared/src/lib/caret'

package/src/lib/collapse.ts

@@ -5,36 +5,13 @@ import {
   shallowRef,
   type ComponentPublicInstance,
 } from 'vue'
+import {
+  collapseHooks,
+  writeCollapseGap,
+  type CollapseAxis,
+} from '../../../shared/src/lib/collapse'
 
-export type CollapseAxis = 'y' | 'x'
-
-export function collapseGapOf(parent: Element | null, axis: CollapseAxis = 'y') {
-  if (!parent) return '0px'
-  const style = getComputedStyle(parent)
-  const stacked = style.display.includes('flex') || style.display.includes('grid')
-  const gap = axis === 'y' ? style.rowGap : style.columnGap
-  return stacked && gap !== 'normal' ? gap : '0px'
-}
-
-export function writeCollapseGap(el: Element, parent: Element | null, axis: CollapseAxis = 'y') {
-  ;(el as HTMLElement).style.setProperty('--hn-collapse-gap', collapseGapOf(parent, axis))
-}
-
-export function collapseHooks(axis: CollapseAxis = 'y', parentOf?: () => Element | null) {
-  function beforeEnter(el: Element) {
-    writeCollapseGap(el, el.parentElement ?? parentOf?.() ?? null, axis)
-  }
-
-  function beforeLeave(el: Element) {
-    writeCollapseGap(el, el.parentElement, axis)
-  }
-
-  function afterEnter(el: Element) {
-    ;(el as HTMLElement).style.removeProperty('--hn-collapse-gap')
-  }
-
-  return { beforeEnter, afterEnter, beforeLeave }
-}
+export * from '../../../shared/src/lib/collapse'
 
 export function useCollapseHooks(axis: CollapseAxis = 'y') {
   const instance = getCurrentInstance()

package/src/lib/date.ts

@@ -1,111 +1 @@
-import {
-  CalendarDate,
-  CalendarDateTime,
-  Time,
-  parseDate,
-  parseDateTime,
-  parseTime,
-  type DateValue,
-} from '@internationalized/date'
-
-export type DateGranularity = 'day' | 'hour' | 'minute' | 'second'
-export type TimeGranularity = 'hour' | 'minute' | 'second'
-
-const TIME_LENGTH: Record<TimeGranularity, number> = {
-  hour: 'HH:mm'.length,
-  minute: 'HH:mm'.length,
-  second: 'HH:mm:ss'.length,
-}
-
-export function parseTimeValue(value: string | null | undefined): Time | undefined {
-  if (!value) return undefined
-  try {
-    return parseTime(value)
-  } catch {
-    return undefined
-  }
-}
-
-export function formatTimeValue(
-  value: { hour: number; minute: number; second: number },
-  granularity: TimeGranularity = 'minute',
-): string {
-  return new Time(value.hour, value.minute, value.second)
-    .toString()
-    .slice(0, TIME_LENGTH[granularity])
-}
-
-export function splitDateTime(value: string | null | undefined) {
-  if (!value) return { date: null, time: null }
-  const [date, time] = value.split('T')
-  return { date: date || null, time: time || null }
-}
-
-export function joinDateTime(date: string | null, time: string | null) {
-  return date && time ? `${date}T${time}` : null
-}
-
-export interface DateRangeValue {
-  start: string | null
-  end: string | null
-}
-
-interface DateRangeParts {
-  start: DateValue | undefined
-  end: DateValue | undefined
-}
-
-const LENGTH: Record<DateGranularity, number> = {
-  day: 'YYYY-MM-DD'.length,
-  hour: 'YYYY-MM-DDTHH:mm'.length,
-  minute: 'YYYY-MM-DDTHH:mm'.length,
-  second: 'YYYY-MM-DDTHH:mm:ss'.length,
-}
-
-export function parseDateValue(
-  value: string | null | undefined,
-  granularity: DateGranularity = 'day',
-): DateValue | undefined {
-  if (!value) return undefined
-  try {
-    if (granularity === 'day') return parseDate(value.slice(0, LENGTH.day))
-    return value.includes('T')
-      ? parseDateTime(value)
-      : parseDate(value).toDate('UTC')
-        ? toDateTime(parseDate(value))
-        : undefined
-  } catch {
-    return undefined
-  }
-}
-
-export function formatDateValue(value: DateValue, granularity: DateGranularity = 'day'): string {
-  if (granularity === 'day') return new CalendarDate(value.year, value.month, value.day).toString()
-  const time = value instanceof CalendarDateTime ? value : toDateTime(value)
-  return time.toString().slice(0, LENGTH[granularity])
-}
-
-export function parseDateRange(
-  value: DateRangeValue | null | undefined,
-  granularity: DateGranularity = 'day',
-): DateRangeParts {
-  return {
-    start: parseDateValue(value?.start, granularity),
-    end: parseDateValue(value?.end, granularity),
-  }
-}
-
-export function formatDateRange(
-  value: DateRangeParts,
-  granularity: DateGranularity = 'day',
-): DateRangeValue | null {
-  if (!value.start && !value.end) return null
-  return {
-    start: value.start ? formatDateValue(value.start, granularity) : null,
-    end: value.end ? formatDateValue(value.end, granularity) : null,
-  }
-}
-
-function toDateTime(value: DateValue) {
-  return new CalendarDateTime(value.year, value.month, value.day)
-}
+export * from '../../../shared/src/lib/date'

package/src/lib/field-focus.ts

@@ -1,36 +1 @@
-const INTERACTIVE = 'button, a, input, textarea, select, [contenteditable], [role="button"]'
-const CONTROL = 'input:not([type="hidden"]), textarea'
-
-function controlOf(node: Element) {
-  const control = node.matches(CONTROL) ? node : node.querySelector(CONTROL)
-  return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement
-    ? control
-    : null
-}
-
-export function focusFieldFrom(root: HTMLElement, target: HTMLElement) {
-  if (target.closest(INTERACTIVE)) return null
-  const segments = Array.from(root.children)
-  const from = segments.findIndex(segment => segment.contains(target))
-  const own = from >= 0 ? controlOf(segments[from]!) : null
-  if (own && !own.disabled) {
-    own.focus()
-    return own
-  }
-  const after = segments.slice(from + 1)
-  const before = segments.slice(0, Math.max(from, 0)).reverse()
-  for (const [list, caret] of [
-    [after, 'start'],
-    [before, 'end'],
-  ] as const) {
-    for (const segment of list) {
-      const control = controlOf(segment)
-      if (!control || control.disabled) continue
-      control.focus()
-      const at = caret === 'start' ? 0 : control.value.length
-      control.setSelectionRange(at, at)
-      return control
-    }
-  }
-  return null
-}
+export * from '../../../shared/src/lib/field-focus'

package/src/lib/overlay-anchor.ts

@@ -1,26 +1,12 @@
 import { shallowRef, watch, type Ref } from 'vue'
+import {
+  createOverlayReference,
+  type OverlayAnchor,
+  type OverlayPositionStrategy,
+  type OverlayReference,
+} from '../../../shared/src/lib/overlay-anchor'
 
-export type OverlayAnchor =
-  | HTMLElement
-  | {
-      getBoundingClientRect: () => Pick<
-        DOMRect,
-        'x' | 'y' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left'
-      >
-      contextElement?: Element
-    }
-export type OverlayPositionStrategy = 'optimized' | 'always'
-
-export function overlayAnchorElement(anchor?: OverlayAnchor | null): HTMLElement | undefined {
-  return anchor && 'nodeType' in anchor ? anchor : undefined
-}
-
-export function overlayAnchorContext(anchor?: OverlayAnchor | null): Element | undefined {
-  return (
-    overlayAnchorElement(anchor) ??
-    (anchor && 'contextElement' in anchor ? anchor.contextElement : undefined)
-  )
-}
+export * from '../../../shared/src/lib/overlay-anchor'
 
 export function useOverlayAnchor(
   source: () => OverlayAnchor | null | undefined,
@@ -29,7 +15,7 @@ export function useOverlayAnchor(
   strategy: () => OverlayPositionStrategy,
   direction: () => 'ltr' | 'rtl' | undefined = () => undefined,
 ) {
-  const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
+  const reference = shallowRef<OverlayReference>()
 
   let current: OverlayAnchor | undefined
 
@@ -42,22 +28,10 @@ export function useOverlayAnchor(
         return
       }
       if (!anchor || (!active && reference.value && anchor !== current)) return
-      const contextElement = overlayAnchorContext(anchor)
-      if (contextElement && !contextElement.isConnected) return
+      const next = createOverlayReference(anchor, () => source() === anchor)
+      if (!next) return
       current = anchor
-      const measure = () => {
-        const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect()
-        return { x, y, width, height, top, right, bottom, left }
-      }
-      let rect = measure()
-      reference.value = {
-        contextElement,
-        getBoundingClientRect: () => {
-          if (source() === anchor && (!contextElement || contextElement.isConnected))
-            rect = measure()
-          return rect
-        },
-      }
+      reference.value = next
     },
     { immediate: true, flush: 'post' },
   )

package/src/lib/pointer-corridor.ts

@@ -1,26 +1 @@
-type Point = { x: number; y: number }
-const cross = (a: Point, b: Point, c: Point) =>
-  (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)
-
-export function inPointerCorridor(point: Point, first: DOMRect, second: DOMRect) {
-  const points = [first, second]
-    .flatMap(rect => [
-      { x: rect.left - 6, y: rect.top - 6 },
-      { x: rect.right + 6, y: rect.top - 6 },
-      { x: rect.left - 6, y: rect.bottom + 6 },
-      { x: rect.right + 6, y: rect.bottom + 6 },
-    ])
-    .sort((a, b) => a.x - b.x || a.y - b.y)
-  const half = (values: Point[]) => {
-    const hull: Point[] = []
-    for (const value of values) {
-      while (hull.length > 1 && cross(hull[hull.length - 2]!, hull[hull.length - 1]!, value) <= 0)
-        hull.pop()
-      hull.push(value)
-    }
-    hull.pop()
-    return hull
-  }
-  const hull = [...half(points), ...half([...points].reverse())]
-  return hull.every((a, i) => cross(a, hull[(i + 1) % hull.length]!, point) >= 0)
-}
+export * from '../../../shared/src/lib/pointer-corridor'