@hina-ui/vue 1.2.0 → 1.3.0

package/src/components/code-block/CodeBlock.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-  import { computed, onMounted, shallowRef, watch } from 'vue'
-  import type { ThemedToken } from 'shiki/core'
+  import { computed } from 'vue'
   import { cn } from '../../lib/cn'
-  import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
   import CopyButton from '../copy-button/CopyButton.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
-  import { tokenize } from './highlighter'
+  import { useCodeHighlight } from './composables/useCodeHighlight'
+  import {
+    codeBlock,
+    codeBlockArea,
+    codeBlockContent,
+    codeBlockActions,
+    codeBlockLabel,
+  } from './code-block.variants'
 
   defineOptions({ name: 'HnCodeBlock' })
 
@@ -25,38 +30,18 @@
   const t = useUiLocale()
   const tag = computed(() => props.label ?? props.lang)
 
-  const tokens = shallowRef<ThemedToken[][] | null>(null)
-
-  onMounted(() => {
-    watch(
-      () => [props.code, props.lang, props.html] as const,
-      async ([code, lang, html]) => {
-        if (html || !lang) {
-          tokens.value = null
-          return
-        }
-        try {
-          const result = await tokenize(code, lang)
-          if (code === props.code && lang === props.lang) tokens.value = result
-        } catch (error) {
-          tokens.value = null
-          devWarn('CodeBlock', `着色管线失败,已退回素文本(lang="${lang}"):${String(error)}`, lang)
-        }
-      },
-      { immediate: true },
-    )
-  })
+  const tokens = useCodeHighlight(props)
 </script>
 
 <template>
-  <div :data-lang="props.lang" :class="cn('relative', props.class)">
-    <ScrollArea direction="horizontal" focusable :label="tag" class="hn-pre">
+  <div :data-lang="props.lang" :class="cn(codeBlock(), props.class)">
+    <ScrollArea direction="both" focusable :label="tag" :class="codeBlockArea()">
       <pre
-        class="m-0"
+        :class="codeBlockContent()"
       ><code v-if="props.html" v-html="props.html"></code><code v-else-if="tokens"><template v-for="(line, i) of tokens" :key="i">{{ i ? '\n' : '' }}<span v-for="(tk, j) of line" :key="j" :style="tk.htmlStyle">{{ tk.content }}</span></template></code><code v-else>{{ code }}</code></pre>
     </ScrollArea>
-    <div class="absolute top-2 end-2 flex items-center gap-2">
-      <span v-if="tag" class="text-faint font-mono text-xs select-none">{{ tag }}</span>
+    <div :class="codeBlockActions()">
+      <span v-if="tag" :class="codeBlockLabel()">{{ tag }}</span>
       <CopyButton v-if="copyable" :text="props.code" :label="t.codeblock.copy" />
     </div>
   </div>

package/src/components/code-block/code-block.variants.ts

@@ -0,0 +1,21 @@
+import { tv } from '../../lib/tv'
+
+export const codeBlock = tv({
+  base: 'relative flex min-h-0 min-w-0 flex-col',
+})
+
+export const codeBlockArea = tv({
+  base: 'hn-pre min-h-0 grow p-0',
+})
+
+export const codeBlockContent = tv({
+  base: 'hn-pre-content m-0 w-max min-w-full',
+})
+
+export const codeBlockActions = tv({
+  base: 'absolute top-2 end-2 flex items-center gap-2',
+})
+
+export const codeBlockLabel = tv({
+  base: 'text-faint font-mono text-xs select-none',
+})

package/src/components/code-block/composables/useCodeHighlight.ts

@@ -0,0 +1,30 @@
+import { onMounted, shallowRef, watch } from 'vue'
+import type { ThemedToken } from 'shiki/core'
+import { devWarn } from '../../../lib/dev'
+import { tokenize } from '../highlighter'
+
+export function useCodeHighlight(props: { code: string; lang?: string; html?: string }) {
+  const tokens = shallowRef<ThemedToken[][] | null>(null)
+
+  onMounted(() => {
+    watch(
+      () => [props.code, props.lang, props.html] as const,
+      async ([code, lang, html]) => {
+        if (html || !lang) {
+          tokens.value = null
+          return
+        }
+        try {
+          const result = await tokenize(code, lang)
+          if (code === props.code && lang === props.lang) tokens.value = result
+        } catch (error) {
+          tokens.value = null
+          devWarn('CodeBlock', `着色管线失败,已退回素文本(lang="${lang}"):${String(error)}`, lang)
+        }
+      },
+      { immediate: true },
+    )
+  })
+
+  return tokens
+}

package/src/components/dropdown-menu/DropdownMenu.vue

@@ -5,24 +5,32 @@
     DropdownMenuTrigger,
     DropdownMenuPortal,
     DropdownMenuContent,
+    type DropdownMenuContentEmits,
   } from 'reka-ui'
+  import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
 
-  defineOptions({ name: 'HnDropdownMenu' })
+  defineOptions({ name: 'HnDropdownMenu', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       label?: string
+      anchor?: HTMLElement | null
+      modal?: boolean
+      dir?: 'ltr' | 'rtl'
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8 },
+    { side: 'bottom', align: 'center', sideOffset: 8, modal: true },
   )
 
   const open = defineModel<boolean>('open')
+  const emit = defineEmits<DropdownMenuContentEmits>()
+  defineSlots<{ default?(): unknown; content?(): unknown }>()
+  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit)
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -34,8 +42,10 @@
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="open" modal>
+  <DropdownMenuRoot v-model:open="visible" :modal="props.modal" :dir="props.dir">
     <DropdownMenuTrigger
+      v-if="$slots.default"
+      ref="trigger"
       as-child
       class="group/hn-disclosure"
       :style="{ transformOrigin: pressOrigin }"
@@ -44,8 +54,10 @@
     </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
+        v-if="reference"
+        v-bind="{ 'aria-label': props.label, ...$attrs, ...events }"
+        :reference="reference"
         as-child
-        :aria-label="props.label"
         :side="props.side"
         :align="props.align"
         :side-offset="props.sideOffset"

package/src/components/highlight/Highlight.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-  import { computed } from 'vue'
   import { Motion } from 'motion-v'
   import { cn } from '../../lib/cn'
-  import { TRANSITION, prefersReducedMotion } from '../../motion'
+  import { useHighlightMotion } from './composables/useHighlightMotion'
 
   defineOptions({ name: 'HnHighlight' })
 
   const props = withDefaults(
     defineProps<{
       id?: string
+      axis?: 'x' | 'y' | 'both'
       as?: 'div' | 'li'
       class?: string
     }>(),
-    { id: undefined, as: 'div' },
+    { id: undefined, axis: 'both', as: 'div' },
   )
 
-  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+  const { transition, transformTemplate } = useHighlightMotion(() => props.axis)
 </script>
 
 <template>
@@ -26,6 +26,7 @@
     aria-hidden="true"
     data-hn-highlight
     :transition="transition"
+    :transform-template="transformTemplate"
     :class="cn('pointer-events-none', props.class)"
   />
 </template>

package/src/components/highlight/composables/useHighlightMotion.ts

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import type { MotionProps } from 'motion-v'
+import { TRANSITION, prefersReducedMotion } from '../../../motion'
+
+export function useHighlightMotion(axis: () => 'x' | 'y' | 'both') {
+  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+  const transformTemplate = computed<MotionProps['transformTemplate']>(() => {
+    const direction = axis()
+    if (direction === 'both') return undefined
+
+    return (_, generated) => {
+      if (!generated || generated === 'none' || typeof DOMMatrix === 'undefined') return generated
+
+      const matrix = new DOMMatrix(generated)
+      if (direction === 'x') matrix.m42 = 0
+      else matrix.m41 = 0
+      return matrix.toString()
+    }
+  })
+
+  return { transition, transformTemplate }
+}

package/src/components/lightbox/LightboxThumbs.vue

@@ -65,6 +65,7 @@
         <Highlight
           v-if="at === props.index"
           :id="highlightId"
+          axis="x"
           class="ring-accent absolute inset-0 rounded-md ring-2 ring-inset"
         />
       </button>

package/src/components/popover/Popover.vue

@@ -1,23 +1,32 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+  import { PopoverRoot, PopoverTrigger, PopoverPortal, type PopoverContentEmits } from 'reka-ui'
+  import PopoverContent from './PopoverContent.vue'
+  import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
 
-  defineOptions({ name: 'HnPopover' })
+  defineOptions({ name: 'HnPopover', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
+      anchor?: HTMLElement | null
+      modal?: boolean
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
       padded?: boolean
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8, padded: true },
+    { side: 'bottom', align: 'center', sideOffset: 8, padded: true, modal: true },
   )
 
   const open = defineModel<boolean>('open')
+  const emit = defineEmits<PopoverContentEmits>()
+  defineSlots<{ default?(): unknown; content?(): unknown }>()
+  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit, event =>
+    emit('openAutoFocus', event),
+  )
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -29,12 +38,19 @@
 </script>
 
 <template>
-  <PopoverRoot v-model:open="open" modal>
-    <PopoverTrigger as-child :style="{ transformOrigin: pressOrigin }">
+  <PopoverRoot v-model:open="visible" :modal="props.modal">
+    <PopoverTrigger
+      v-if="$slots.default"
+      ref="trigger"
+      as-child
+      :style="{ transformOrigin: pressOrigin }"
+    >
       <slot />
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        v-bind="{ ...$attrs, ...events }"
+        :reference="reference"
         as-child
         :side="props.side"
         :align="props.align"

package/src/components/popover/PopoverContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import {
+    PopoverContent,
+    useForwardPropsEmits,
+    type PopoverContentProps,
+    type PopoverContentEmits,
+  } from 'reka-ui'
+  import { usePopoverCloseFocus } from './composables/usePopoverCloseFocus'
+
+  defineOptions({ name: 'HnPopoverContent' })
+
+  const props = defineProps<PopoverContentProps>()
+  const emit = defineEmits<PopoverContentEmits>()
+  const forwarded = useForwardPropsEmits(props, emit)
+  const closeAutoFocus = usePopoverCloseFocus(emit)
+</script>
+
+<template>
+  <PopoverContent
+    v-bind="{ ...forwarded, onCloseAutoFocus: closeAutoFocus }"
+    :reference="props.reference"
+  >
+    <slot />
+  </PopoverContent>
+</template>

package/src/components/popover/composables/usePopoverCloseFocus.ts

@@ -0,0 +1,17 @@
+import { nextTick } from 'vue'
+import { injectPopoverRootContext } from 'reka-ui'
+
+export function usePopoverCloseFocus(emit: (event: 'closeAutoFocus', value: Event) => void) {
+  const root = injectPopoverRootContext()
+
+  return (event: Event) => {
+    emit('closeAutoFocus', event)
+    if (!event.defaultPrevented || !root.triggerElement.value) return
+
+    const trigger = root.triggerElement.value
+    root.triggerElement.value = undefined
+    nextTick(() => {
+      root.triggerElement.value ??= trigger
+    })
+  }
+}

package/src/components/scroll-area/ScrollArea.vue

@@ -6,6 +6,7 @@
   import { useEdgeShadow } from './composables/useEdgeShadow'
   import { useWheelRedirect } from './composables/useWheelRedirect'
   import { useLayerLock } from './composables/useLayerLock'
+  import { useScrollFocus } from './composables/useScrollFocus'
 
   defineOptions({ name: 'HnScrollArea', inheritAttrs: false })
 
@@ -59,6 +60,10 @@
   }
 
   const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options)
+  const { hostFocus, viewportFocus } = useScrollFocus(host, viewport, () => ({
+    focusable: props.focusable,
+    label: props.label ?? t.value.scroll.regionLabel,
+  }))
   const { showXStart, showXEnd, showYStart, showYEnd, updateEdges } = useEdgeShadow(
     viewport,
     () => ({ direction: props.direction, shadow: props.shadow }),
@@ -83,14 +88,11 @@
   <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
     <div
       ref="host"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...hostFocus }"
       data-overlayscrollbars-initialize
-      :tabindex="props.focusable ? 0 : undefined"
-      :role="props.focusable ? 'region' : undefined"
-      :aria-label="props.focusable ? (props.label ?? t.scroll.regionLabel) : undefined"
       class="w-full min-h-0 grow"
     >
-      <div ref="content" data-overlayscrollbars-contents>
+      <div ref="content" v-bind="viewportFocus" data-overlayscrollbars-contents>
         <slot />
       </div>
     </div>

package/src/components/scroll-area/composables/useScrollFocus.ts

@@ -0,0 +1,39 @@
+import { computed, nextTick, watch, type ShallowRef } from 'vue'
+
+export function useScrollFocus(
+  host: ShallowRef<HTMLElement | undefined>,
+  viewport: ShallowRef<HTMLElement | undefined>,
+  options: () => { focusable: boolean; label: string },
+) {
+  function attributes(enabled: boolean) {
+    const { focusable, label } = options()
+    return {
+      tabindex: enabled && focusable ? 0 : undefined,
+      role: enabled && focusable ? 'region' : undefined,
+      'aria-label': enabled && focusable ? label : undefined,
+    }
+  }
+
+  const hostFocus = computed(() => attributes(!viewport.value))
+  const viewportFocus = computed(() => attributes(!!viewport.value))
+
+  watch(
+    viewport,
+    async element => {
+      const target = host.value
+      if (!element || !target || !options().focusable) return
+      if (target.ownerDocument.activeElement !== target) return
+      await nextTick()
+      const active = target.ownerDocument.activeElement
+      if (
+        options().focusable &&
+        element.isConnected &&
+        (active === target || active === target.ownerDocument.body)
+      )
+        element.focus({ preventScroll: true })
+    },
+    { flush: 'sync' },
+  )
+
+  return { hostFocus, viewportFocus }
+}

package/src/components/segmented-control/SegmentedControl.vue

@@ -71,7 +71,12 @@
       :aria-label="slots.option ? option.label : undefined"
       :class="segmentedItem({ size: props.size, block: props.block })"
     >
-      <Highlight v-if="option.value === current" :id="highlightId" :class="segmentedThumb()" />
+      <Highlight
+        v-if="option.value === current"
+        :id="highlightId"
+        :axis="props.orientation === 'vertical' ? 'y' : 'x'"
+        :class="segmentedThumb()"
+      />
       <Ripple />
       <slot name="option" :option="option">{{ option.label }}</slot>
     </ToggleGroupItem>

package/src/components/tabs/TabsTrigger.vue

@@ -26,7 +26,12 @@
     :disabled="props.disabled"
     :class="cn(tabsTrigger({ variant, size, orientation }), props.class)"
   >
-    <Highlight v-if="active" :id="highlightId" :class="tabsHighlight({ variant, orientation })" />
+    <Highlight
+      v-if="active"
+      :id="highlightId"
+      :axis="orientation === 'vertical' ? 'y' : 'x'"
+      :class="tabsHighlight({ variant, orientation })"
+    />
     <Ripple />
     <slot />
   </TabsTrigger>

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/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;
   }