@hina-ui/vue 1.3.1 → 1.5.0

package/src/lib/anchored-overlay.ts

@@ -1,8 +1,21 @@
-import { computed, nextTick, shallowRef, watch, type Ref } from 'vue'
+import { computed, nextTick, watch, type Ref } from 'vue'
+import { defaultDocument } from '@vueuse/core'
+import { useOverlayPortal } from './overlay-portal'
+import {
+  overlayAnchorContext,
+  overlayAnchorElement,
+  useOverlayAnchor,
+  type OverlayAnchor,
+  type OverlayPositionStrategy,
+} from './overlay-anchor'
 import { useForwardExpose, type DropdownMenuContentEmits } from 'reka-ui'
 
 export function useAnchoredOverlay(
-  props: { anchor?: HTMLElement | null; modal: boolean },
+  props: {
+    anchor?: OverlayAnchor | null
+    modal: boolean
+    updatePositionStrategy: OverlayPositionStrategy
+  },
   open: Ref<boolean | undefined>,
   emit: <K extends keyof DropdownMenuContentEmits>(
     event: K,
@@ -11,14 +24,6 @@ export function useAnchoredOverlay(
   openAutoFocus?: (event: Event) => void,
 ) {
   const { forwardRef: trigger, currentElement: triggerElement } = useForwardExpose()
-  const retainedAnchor = shallowRef<HTMLElement>()
-  const reference = computed(
-    () =>
-      props.anchor ??
-      (open.value
-        ? (triggerElement.value ?? retainedAnchor.value)
-        : (retainedAnchor.value ?? triggerElement.value)),
-  )
   const visible = computed({
     get: () => !!open.value && !!(props.anchor || triggerElement.value),
     set: value => {
@@ -26,12 +31,12 @@ export function useAnchoredOverlay(
     },
   })
 
-  watch(
-    () => props.anchor,
-    anchor => {
-      if (anchor) retainedAnchor.value = anchor
-    },
-    { immediate: true, flush: 'sync' },
+  const { content, present } = useOverlayPortal(visible)
+  const reference = useOverlayAnchor(
+    () => props.anchor ?? triggerElement.value,
+    visible,
+    present,
+    () => props.updatePositionStrategy,
   )
 
   let previousFocus: HTMLElement | null = null
@@ -50,7 +55,10 @@ export function useAnchoredOverlay(
     visible,
     active => {
       if (!active) return
-      const document = props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument
+      const document =
+        overlayAnchorContext(props.anchor)?.ownerDocument ??
+        triggerElement.value?.ownerDocument ??
+        defaultDocument
       previousFocus = document?.activeElement as HTMLElement | null
       interactedOutside = false
     },
@@ -73,12 +81,11 @@ export function useAnchoredOverlay(
         (active === panel.ownerDocument.body || panel.contains(active))
       )
         target.focus({ preventScroll: true })
-      if (!visible.value) retainedAnchor.value = undefined
     })
   })
 
   const onInteractOutside = once((event: DropdownMenuContentEmits['interactOutside'][0]) => {
-    if (!triggerElement.value && props.anchor?.contains(event.target as Node))
+    if (!triggerElement.value && overlayAnchorElement(props.anchor)?.contains(event.target as Node))
       event.preventDefault()
     emit('interactOutside', event)
     const original = event.detail.originalEvent
@@ -89,6 +96,8 @@ export function useAnchoredOverlay(
 
   return {
     trigger,
+    content,
+    present,
     reference,
     visible,
     events: {

package/src/lib/overlay-anchor.ts

@@ -0,0 +1,65 @@
+import { shallowRef, watch, type Ref } from 'vue'
+
+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 function useOverlayAnchor(
+  source: () => OverlayAnchor | null | undefined,
+  open: Ref<boolean | undefined>,
+  present: Ref<boolean>,
+  strategy: () => OverlayPositionStrategy,
+) {
+  const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
+
+  let current: OverlayAnchor | undefined
+
+  watch(
+    [source, open, present, strategy],
+    ([anchor, active, mounted]) => {
+      if (!mounted) {
+        current = undefined
+        reference.value = undefined
+        return
+      }
+      if (!anchor || (!active && reference.value && anchor !== current)) return
+      const contextElement = overlayAnchorContext(anchor)
+      if (contextElement && !contextElement.isConnected) 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
+        },
+      }
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  return reference
+}

package/src/lib/overlay-positioner.ts

@@ -0,0 +1,25 @@
+import {
+  toValue,
+  watchEffect,
+  type ComponentPublicInstance,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+
+export function useOverlayPositionerClass(
+  content: Ref<ComponentPublicInstance | null>,
+  className: MaybeRefOrGetter<string | undefined>,
+) {
+  watchEffect(
+    onCleanup => {
+      const element = content.value?.$el as HTMLElement | undefined
+      const positioner = element?.parentElement
+      const classes = toValue(className)?.split(/\s+/).filter(Boolean) ?? []
+      if (!positioner?.hasAttribute('data-reka-popper-content-wrapper') || !classes.length) return
+      const added = classes.filter(name => !positioner.classList.contains(name))
+      positioner.classList.add(...added)
+      onCleanup(() => positioner.classList.remove(...added))
+    },
+    { flush: 'post' },
+  )
+}

package/src/lib/pointer-corridor.ts

@@ -0,0 +1,26 @@
+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)
+}

package/src/lib/scroll-viewport.ts

@@ -0,0 +1,8 @@
+import { computed, shallowRef } from 'vue'
+
+export function useScrollViewport() {
+  const scrollArea = shallowRef<{ viewport?: HTMLElement } | null>(null)
+  const viewport = computed(() => scrollArea.value?.viewport)
+
+  return { scrollArea, viewport }
+}

package/src/lib/useDirection.ts

@@ -0,0 +1,31 @@
+import { computed, shallowRef, watchEffect } from 'vue'
+import { injectConfigProviderContext, type Direction } from 'reka-ui'
+
+export function useDirection(dir: () => Direction | undefined) {
+  const root = shallowRef<HTMLElement>()
+  const context = injectConfigProviderContext(null)
+  const inherited = shallowRef<Direction>('ltr')
+  const rootDirection = computed(() => dir() ?? context?.dir?.value)
+  const direction = computed(() => rootDirection.value ?? inherited.value)
+
+  watchEffect(
+    onCleanup => {
+      const element = root.value
+      const view = element?.ownerDocument.defaultView
+      if (!element || !view || rootDirection.value) return
+
+      const update = () => {
+        inherited.value = view.getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
+      }
+
+      update()
+      const observer = new view.MutationObserver(update)
+      for (let ancestor: HTMLElement | null = element; ancestor; ancestor = ancestor.parentElement)
+        observer.observe(ancestor, { attributes: true, attributeFilter: ['dir'] })
+      onCleanup(() => observer.disconnect())
+    },
+    { flush: 'post' },
+  )
+
+  return { root, direction, rootDirection }
+}

package/src/locale/en-US.ts

@@ -16,6 +16,16 @@ export const enUS: UiMessages = {
     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',
@@ -78,7 +88,8 @@ export const enUS: UiMessages = {
   lightbox: {
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',
-    resetZoom: 'Reset zoom',
+    resetZoom: 'Fit to window',
+    actualSize: 'Actual size',
     rotate: 'Rotate',
     download: 'Download',
     loadingLarge: 'Loading HD',
@@ -94,6 +105,9 @@ export const enUS: UiMessages = {
     show: 'Show password',
     hide: 'Hide password',
   },
+  treeSelect: {
+    search: 'Search nodes',
+  },
   combobox: {
     placeholder: 'Type or choose',
     toggle: 'Show options',

package/src/locale/index.ts

@@ -36,6 +36,7 @@ function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
     chip: { ...base.chip, ...patch.chip },
     numberInput: { ...base.numberInput, ...patch.numberInput },
     passwordInput: { ...base.passwordInput, ...patch.passwordInput },
+    treeSelect: { ...base.treeSelect, ...patch.treeSelect },
     combobox: { ...base.combobox, ...patch.combobox },
     slider: { ...base.slider, ...patch.slider },
     pinInput: { ...base.pinInput, ...patch.pinInput },

package/src/locale/types.ts

@@ -14,6 +14,15 @@ export interface UiMessages {
     next: string
   }
   pagination: {
+    rangeLabel: (from: number, to: number, total: number) => string
+    pageCountLabel: (page: number, count: number) => string
+    pageSizeLabel: string
+    pageSizeOption: (n: number) => string
+    jumpLabel: string
+    previousPagesLabel: (n: number) => string
+    nextPagesLabel: (n: number) => string
+    choosePage: string
+    choosePageHint: string
     navLabel: string
     prev: string
     next: string
@@ -77,6 +86,7 @@ export interface UiMessages {
     zoomIn: string
     zoomOut: string
     resetZoom: string
+    actualSize: string
     rotate: string
     download: string
     loadingLarge: string
@@ -92,6 +102,9 @@ export interface UiMessages {
     show: string
     hide: string
   }
+  treeSelect: {
+    search: string
+  }
   combobox: {
     placeholder: string
     toggle: string

package/src/locale/zh-CN.ts

@@ -16,6 +16,16 @@ export const zhCN: UiMessages = {
     next: '下一条',
   },
   pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' / 共 ' + total + ' 条' : '共 0 条',
+    pageCountLabel: (page, count) => '第 ' + page + ' / ' + count + ' 页',
+    pageSizeLabel: '每页条数',
+    pageSizeOption: n => String(n) + ' / 页',
+    jumpLabel: '跳至页码',
+    previousPagesLabel: n => '向前跳 ' + n + ' 页',
+    nextPagesLabel: n => '向后跳 ' + n + ' 页',
+    choosePage: '选择页码',
+    choosePageHint: '按向下或向上箭头选择页码',
     navLabel: '翻页',
     prev: '上一页',
     next: '下一页',
@@ -78,7 +88,8 @@ export const zhCN: UiMessages = {
   lightbox: {
     zoomIn: '放大',
     zoomOut: '缩小',
-    resetZoom: '恢复原始大小',
+    resetZoom: '适应窗口',
+    actualSize: '原始尺寸',
     rotate: '旋转',
     download: '下载',
     loadingLarge: '正在加载原图',
@@ -94,6 +105,9 @@ export const zhCN: UiMessages = {
     show: '显示密码',
     hide: '隐藏密码',
   },
+  treeSelect: {
+    search: '搜索节点',
+  },
   combobox: {
     placeholder: '输入或选择',
     toggle: '展开选项',