@hina-ui/vue 1.1.0 → 1.3.0

package/src/lib/anchored-overlay.ts

@@ -0,0 +1,110 @@
+import { computed, nextTick, shallowRef, watch, type Ref } from 'vue'
+import type { DropdownMenuContentEmits } from 'reka-ui'
+
+export function useAnchoredOverlay(
+  props: { anchor?: HTMLElement | null; modal: boolean },
+  open: Ref<boolean | undefined>,
+  emit: <K extends keyof DropdownMenuContentEmits>(
+    event: K,
+    ...args: DropdownMenuContentEmits[K]
+  ) => void,
+  openAutoFocus?: (event: Event) => void,
+) {
+  const trigger = shallowRef<{ $el: HTMLElement } | null>(null)
+  const triggerElement = computed(() =>
+    trigger.value?.$el?.nodeType === 1 ? trigger.value.$el : undefined,
+  )
+  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 => {
+      open.value = value
+    },
+  })
+
+  watch(
+    () => props.anchor,
+    anchor => {
+      if (anchor) retainedAnchor.value = anchor
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  let previousFocus: HTMLElement | null = null
+  let interactedOutside = false
+
+  function once<E extends Event>(handler: (event: E) => void) {
+    const handled = new WeakSet<E>()
+    return (event: E) => {
+      if (handled.has(event)) return
+      handled.add(event)
+      handler(event)
+    }
+  }
+
+  watch(
+    visible,
+    active => {
+      if (!active) return
+      const document = props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument
+      previousFocus = document?.activeElement as HTMLElement | null
+      interactedOutside = false
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  const onCloseAutoFocus = once((event: Event) => {
+    emit('closeAutoFocus', event)
+    const cancelled = event.defaultPrevented
+    event.preventDefault()
+    const panel = event.target as HTMLElement
+    const target = triggerElement.value ?? previousFocus
+    const restore = !cancelled && !interactedOutside
+    nextTick(() => {
+      const active = panel.ownerDocument.activeElement
+      if (
+        restore &&
+        !visible.value &&
+        target?.isConnected &&
+        (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))
+      event.preventDefault()
+    emit('interactOutside', event)
+    const original = event.detail.originalEvent
+    const rightClick =
+      'button' in original && (original.button === 2 || (original.button === 0 && original.ctrlKey))
+    if (!event.defaultPrevented && (!props.modal || rightClick)) interactedOutside = true
+  })
+
+  return {
+    trigger,
+    reference,
+    visible,
+    events: {
+      ...(openAutoFocus ? { onOpenAutoFocus: once(openAutoFocus) } : {}),
+      onCloseAutoFocus,
+      onInteractOutside,
+      onPointerDownOutside: once((event: DropdownMenuContentEmits['pointerDownOutside'][0]) =>
+        emit('pointerDownOutside', event),
+      ),
+      onFocusOutside: once((event: DropdownMenuContentEmits['focusOutside'][0]) =>
+        emit('focusOutside', event),
+      ),
+      onEscapeKeyDown: once((event: KeyboardEvent) => emit('escapeKeyDown', event)),
+    },
+  }
+}

package/src/lib/caret.ts

@@ -22,10 +22,6 @@ const MIRRORED = [
   'border-left-width',
 ]
 
-/**
- * 量出 textarea 光标所在行的顶边（相对 textarea 自身的边框盒）。
- * 原生没有光标几何 API，只能用同排版的镜像块把光标前的文字排一遍。
- */
 export function caretTop(node: HTMLTextAreaElement, at = node.selectionEnd): number {
   const style = getComputedStyle(node)
   const mirror = node.ownerDocument.createElement('div')

package/src/lib/collapse.ts

@@ -1,4 +1,10 @@
-import { getCurrentInstance, onBeforeUpdate, onMounted } from 'vue'
+import {
+  getCurrentInstance,
+  onBeforeUpdate,
+  onMounted,
+  shallowRef,
+  type ComponentPublicInstance,
+} from 'vue'
 
 export type CollapseAxis = 'y' | 'x'
 
@@ -43,3 +49,17 @@ export function useCollapseHooks(axis: CollapseAxis = 'y') {
 
   return collapseHooks(axis, () => parent)
 }
+
+export function useCollapseGap() {
+  const content = shallowRef<ComponentPublicInstance | null>(null)
+
+  function measure() {
+    const el = content.value?.$el as Element | undefined
+    if (el instanceof Element) writeCollapseGap(el, el.parentElement)
+  }
+
+  onMounted(measure)
+  onBeforeUpdate(measure)
+
+  return content
+}

package/src/lib/field-focus.ts

@@ -8,10 +8,6 @@ function controlOf(node: Element) {
     : null
 }
 
-/**
- * 点击输入面里非交互的部分（附属格、前后缀、空白）时把焦点交给最近的输入区，返回被聚焦的输入区；点击落在交互元素上或者没有可聚焦的输入区时返回 null。
- * 点击所在的段自己含输入区时只认它、不动光标（段内的处理器已经定过位）；否则先向后找，再向前找；落在点击位置之后的输入区把光标放到开头，之前的放到末尾。
- */
 export function focusFieldFrom(root: HTMLElement, target: HTMLElement) {
   if (target.closest(INTERACTIVE)) return null
   const segments = Array.from(root.children)

package/src/styles/interaction.css

@@ -155,7 +155,7 @@
   }
 
   &:focus-visible,
-  &:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+  &:has(:is(input, textarea, [data-hn-segment], [data-hn-select-trigger]):focus-visible) {
     --hn-field-ring-w: 2px;
   }
 
@@ -170,7 +170,9 @@
   }
 
   &[data-invalid]:focus-visible,
-  &[data-invalid]:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+  &[data-invalid]:has(
+      :is(input, textarea, [data-hn-segment], [data-hn-select-trigger]):focus-visible
+    ) {
     --hn-field-ring-w: 1px;
   }
 }

package/src/styles/typography.css

@@ -74,14 +74,19 @@
   }
 }
 
+@utility hn-pre-content {
+  padding: 1em 1.25em;
+}
+
 @utility hn-pre {
+  @apply hn-pre-content;
   font-family: var(--hn-font-mono);
   background-color: var(--hn-bg-inset);
   border-radius: var(--hn-radius-lg);
-  padding: 1em 1.25em;
 
   &:focus-visible,
-  &:has(> [data-overlayscrollbars-initialize]:focus-visible) {
+  &:has(> [data-overlayscrollbars-initialize]:focus-visible),
+  &:has(> [data-overlayscrollbars-initialize] > [data-overlayscrollbars-contents]:focus-visible) {
     outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
     outline-offset: var(--hn-focus-ring-offset);
   }
@@ -144,7 +149,7 @@
   & ol,
   & dl,
   & blockquote,
-  & pre,
+  & pre:not(:where(.hn-pre-content)),
   & table,
   & figure {
     margin-block: 0.75em 0;
@@ -228,7 +233,7 @@
     @apply hn-code;
   }
 
-  & pre {
+  & pre:not(:where(.hn-pre-content)) {
     @apply hn-pre;
     overflow-x: auto;
   }