@hina-ui/vue 1.7.1 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/anchor/composables/useScrollSpy.ts

@@ -11,7 +11,7 @@ export interface SpyEntry {
 export function useScrollSpy(entries: () => SpyEntry[]) {
   const visible = shallowRef<ReadonlySet<string>>(new Set())
   const targets = shallowRef<Array<HTMLElement | null>>([])
-  const seen = new Set<string>()
+  const intersecting = new Set<string>()
 
   const covered = computed(() => entries().filter(entry => visible.value.has(entry.id)))
   const current = computed(() => covered.value[0]?.id)
@@ -23,18 +23,15 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   useIntersectionObserver(
     targets,
     observed => {
-      const next = new Set(visible.value)
       for (const entry of observed) {
-        if (entry.isIntersecting) {
-          seen.add(entry.target.id)
-          next.add(entry.target.id)
-        } else if (seen.has(entry.target.id)) {
-          next.delete(entry.target.id)
-        }
+        if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id)
+        else intersecting.delete(entry.target.id)
       }
-      if (next.size) visible.value = next
+      visible.value = intersecting.size
+        ? new Set(intersecting)
+        : new Set(current.value ? [current.value] : [])
     },
-    { rootMargin: '0px 0px -15% 0px' },
+    { rootMargin: '0px 0px -15% 0px', threshold: [0, Number.EPSILON] },
   )
 
   function targetOf(id: string) {
@@ -42,7 +39,7 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   }
 
   function locate() {
-    seen.clear()
+    intersecting.clear()
     targets.value = entries().map(({ id }) => targetOf(id))
   }
 

package/src/components/data-table/DataTable.vue

@@ -168,6 +168,7 @@
         :class="
           cn(
             tableWrapper({ variant: props.variant, hover: false }),
+            layout.constrained.value && '@container',
             (props.fill || props.height) && 'h-full',
             props.stickyHeader && '[&_thead_th]:sticky [&_thead_th]:z-[3]',
             props.stickyFooter &&

package/src/components/data-table/DataTableHead.vue

@@ -65,7 +65,7 @@
         :style="header.style"
         :class="
           cn(
-            'hn-table-header relative',
+            'hn-table-header relative p-0',
             header.column.headerClass,
             drag.kind.value === 'column' && drag.key.value === header.column.key && 'opacity-40',
           )

package/src/components/data-table/column-sizing-styles.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'vue'
+import { allocateWidths, columnBounds } from './column-sizing'
+import type { DataTableColumn } from './types'
+
+export function columnSizingStyles<T extends object>(
+  columns: DataTableColumn<T>[],
+  overrides: Record<string, number>,
+  controls: number,
+): CSSProperties {
+  const initial = allocateWidths(columns, overrides, 0)
+  const total = Object.values(initial).reduce((sum, width) => sum + width, controls)
+  const flexible = columns.filter(
+    column =>
+      !column.pin &&
+      overrides[column.key] === undefined &&
+      initial[column.key]! < columnBounds(column).max,
+  )
+  const capacities = flexible
+    .map(column => columnBounds(column).max - initial[column.key]!)
+    .sort((a, b) => a - b)
+  let consumed = 0
+  const shares = capacities.map((capacity, index) => {
+    const share = `calc((100cqi - ${total + consumed}px) / ${capacities.length - index})`
+    consumed += capacity
+    return share
+  })
+  const keys = new Set(flexible.map(column => column.key))
+  return {
+    width: shares.length ? `clamp(${total}px, 100%, ${total + consumed}px)` : `${total}px`,
+    '--hn-table-column-grow': shares.length ? `max(0px, ${shares.join(', ')})` : '0px',
+    ...Object.fromEntries(
+      columns.map((column, index) => [
+        `--hn-table-column-${index}`,
+        keys.has(column.key)
+          ? `min(${columnBounds(column).max}px, calc(${initial[column.key]}px + var(--hn-table-column-grow)))`
+          : `${initial[column.key]}px`,
+      ]),
+    ),
+  }
+}

package/src/components/data-table/composables/useTableColumns.ts

@@ -9,6 +9,7 @@ import {
 } from 'vue'
 import { cssSize } from '../utils'
 import { allocateWidths, pixelWidth } from '../column-sizing'
+import { columnSizingStyles } from '../column-sizing-styles'
 import { useTableResize } from './useTableResize'
 import { useTableResizeHandles } from './useTableResizeHandles'
 import type { DataTableColumn, DataTableHeader, DataTableProps } from '../types'
@@ -200,15 +201,11 @@ export function useTableColumns<T extends object>(
     '--hn-table-viewport-width': available.value ? `${available.value}px` : undefined,
     tableLayout: constrained.value ? 'fixed' : 'auto',
     ...(constrained.value
-      ? {
-          ...Object.fromEntries(
-            ctl.visibleColumns.value.map((column, index) => [
-              `--hn-table-column-${index}`,
-              `${widths.value[column.key]}px`,
-            ]),
-          ),
-          width: `${ctl.visibleColumns.value.reduce((sum, column) => sum + width(column), leading.value * 48 + trailing.value * 72)}px`,
-        }
+      ? columnSizingStyles(
+          ctl.visibleColumns.value,
+          active.value ?? models.columnWidths.value,
+          leading.value * 48 + trailing.value * 72,
+        )
       : {}),
   }))
   function moveColumn(key: string, target: string) {
@@ -240,6 +237,7 @@ export function useTableColumns<T extends object>(
     observer?.disconnect()
   })
   return {
+    constrained,
     headerRows,
     tableStyle,
     cellStyle,

package/src/components/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+  import { computed, toRef } from 'vue'
+  import { NavigationMenuRoot, NavigationMenuList, NavigationMenuViewport } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useAccessibleName } from '../../lib/a11y'
+  import { useDirection } from '../../lib/useDirection'
+  import { provideNavigationMenu } from './context'
+  import { useNavigationMenuKeyboard } from './composables/useNavigationMenuKeyboard'
+  import { useNavigationMenuLayout } from './composables/useNavigationMenuLayout'
+  import {
+    navigationMenu,
+    navigationMenuList,
+    navigationMenuViewport,
+  } from './navigation-menu.variants'
+  import type { NavigationMenuProps } from './types'
+
+  defineOptions({ name: 'HnNavigationMenu' })
+  const props = withDefaults(defineProps<NavigationMenuProps>(), {
+    orientation: 'horizontal',
+    size: 'md',
+    trigger: 'hover',
+    delayDuration: 200,
+    skipDelayDuration: 300,
+    align: 'center',
+    unmountOnHide: true,
+  })
+  const model = defineModel<string>({ default: '' })
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const onKeydown = useNavigationMenuKeyboard(
+    root,
+    () => props.orientation,
+    () => direction.value,
+  )
+  const { side, placement, style } = useNavigationMenuLayout(
+    root,
+    () => props.orientation,
+    () => direction.value,
+  )
+  const align = computed(() =>
+    props.orientation === 'horizontal' && direction.value === 'rtl' && props.align !== 'center'
+      ? props.align === 'start'
+        ? 'end'
+        : 'start'
+      : props.align,
+  )
+  provideNavigationMenu({ size: toRef(props, 'size'), orientation: toRef(props, 'orientation') })
+  useAccessibleName('NavigationMenu', () => !props.label)
+  defineSlots<{ default(props: { value: string }): unknown }>()
+</script>
+
+<template>
+  <NavigationMenuRoot
+    :key="props.orientation"
+    v-model="model"
+    as-child
+    :orientation="props.orientation"
+    :dir="direction"
+    :delay-duration="props.delayDuration"
+    :skip-delay-duration="props.skipDelayDuration"
+    :disable-hover-trigger="props.trigger === 'click'"
+    :disable-pointer-leave-close="props.trigger === 'click'"
+    :unmount-on-hide="props.unmountOnHide"
+    :aria-label="props.label"
+    :class="cn(navigationMenu(), props.class)"
+    @keydown.capture="onKeydown"
+  >
+    <nav ref="root" :dir="rootDirection" :style="style" data-hn-navigation-menu>
+      <NavigationMenuList
+        data-hn-navigation-list
+        :class="cn(navigationMenuList({ orientation: props.orientation }), props.listClass)"
+      >
+        <slot :value="model" />
+      </NavigationMenuList>
+      <NavigationMenuViewport
+        data-hn-navigation-viewport
+        :align="align"
+        :data-side="placement"
+        :class="
+          cn(navigationMenuViewport({ orientation: props.orientation, side }), props.viewportClass)
+        "
+      />
+    </nav>
+  </NavigationMenuRoot>
+</template>

package/src/components/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import {
+    NavigationMenuContent as RekaNavigationMenuContent,
+    useForwardPropsEmits,
+    type NavigationMenuContentEmits,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { navigationMenuContent } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuContent', inheritAttrs: false })
+  const props = withDefaults(defineProps<{ padded?: boolean; class?: string }>(), { padded: true })
+  const emit = defineEmits<NavigationMenuContentEmits>()
+  const events = useForwardPropsEmits({}, emit)
+  defineSlots<{ default(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuContent
+    v-bind="{ ...$attrs, ...events }"
+    data-hn-navigation-content
+    :class="cn(navigationMenuContent({ padded: props.padded }), props.class)"
+  >
+    <slot />
+  </RekaNavigationMenuContent>
+</template>

package/src/components/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { NavigationMenuItem as RekaNavigationMenuItem } from 'reka-ui'
+
+  defineOptions({ name: 'HnNavigationMenuItem' })
+  const props = defineProps<{ value?: string }>()
+  defineSlots<{ default(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuItem :value="props.value">
+    <slot />
+  </RekaNavigationMenuItem>
+</template>

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+  import {
+    NavigationMenuLink as RekaNavigationMenuLink,
+    type NavigationMenuLinkEmits,
+    type PrimitiveProps,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useNavigationMenu } from './context'
+  import {
+    navigationMenuControl,
+    navigationMenuLink,
+    navigationMenuIcon,
+  } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuLink', inheritAttrs: false })
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        active?: boolean
+        disabled?: boolean
+        description?: string
+        class?: string
+      }
+    >(),
+    { as: 'a' },
+  )
+  const emit = defineEmits<NavigationMenuLinkEmits>()
+  const menu = useNavigationMenu()
+  defineSlots<{
+    default(): unknown
+    icon?(): unknown
+    trailing?(): unknown
+    description?(): unknown
+  }>()
+
+  function guard(event: MouseEvent) {
+    if (!props.disabled) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+</script>
+
+<template>
+  <RekaNavigationMenuLink
+    v-bind="$attrs"
+    :as="props.as"
+    :as-child="props.asChild"
+    :active="props.active"
+    :aria-disabled="props.disabled || undefined"
+    :data-disabled="props.disabled ? '' : undefined"
+    :tabindex="props.disabled ? -1 : undefined"
+    data-hn-navigation-control
+    :class="
+      cn(
+        navigationMenuControl({ size: menu.size.value, orientation: menu.orientation.value }),
+        navigationMenuLink(),
+        props.class,
+      )
+    "
+    @click.capture="guard"
+    @select="emit('select', $event)"
+  >
+    <slot v-if="props.asChild" />
+    <template v-else>
+      <span v-if="$slots.icon" :class="navigationMenuIcon()" aria-hidden="true">
+        <slot name="icon" />
+      </span>
+      <span class="flex min-w-0 flex-1 flex-col gap-1">
+        <span><slot /></span>
+        <span
+          v-if="props.description || $slots.description"
+          class="text-muted text-xs leading-relaxed font-normal"
+        >
+          <slot name="description">{{ props.description }}</slot>
+        </span>
+      </span>
+      <span v-if="$slots.trailing" :class="navigationMenuIcon()">
+        <slot name="trailing" />
+      </span>
+    </template>
+  </RekaNavigationMenuLink>
+</template>

package/src/components/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useNavigationMenu } from './context'
+  import {
+    navigationMenuControl,
+    navigationMenuTrigger,
+    navigationMenuIcon,
+    navigationMenuDisclosure,
+  } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuTrigger' })
+  const props = defineProps<{ disabled?: boolean; class?: string }>()
+  const menu = useNavigationMenu()
+  defineSlots<{ default(): unknown; icon?(): unknown; trailing?(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuTrigger
+    type="button"
+    data-hn-navigation-control
+    :disabled="props.disabled"
+    :class="
+      cn(
+        navigationMenuControl({ size: menu.size.value, orientation: menu.orientation.value }),
+        navigationMenuTrigger(),
+        props.class,
+      )
+    "
+  >
+    <span v-if="$slots.icon" :class="navigationMenuIcon()" aria-hidden="true">
+      <slot name="icon" />
+    </span>
+    <span class="min-w-0 flex-1"><slot /></span>
+    <span :class="navigationMenuIcon()">
+      <slot name="trailing">
+        <span :class="navigationMenuDisclosure({ orientation: menu.orientation.value })">
+          <DisclosureIcon :direction="menu.orientation.value === 'vertical' ? 'end' : 'down'" />
+        </span>
+      </slot>
+    </span>
+  </RekaNavigationMenuTrigger>
+</template>

package/src/components/navigation-menu/composables/useNavigationMenuKeyboard.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue'
+import type { NavigationMenuOrientation } from '../types'
+
+export function useNavigationMenuKeyboard(
+  root: Ref<HTMLElement | undefined>,
+  orientation: () => NavigationMenuOrientation,
+  direction: () => 'ltr' | 'rtl',
+) {
+  return (event: KeyboardEvent) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return
+    const items = Array.from(
+      root.value?.querySelectorAll<HTMLElement>(
+        '[data-hn-navigation-list] > [data-menu-item] > [data-hn-navigation-control]',
+      ) ?? [],
+    ).filter(item => !item.hasAttribute('data-disabled'))
+    const index = items.indexOf(event.target as HTMLElement)
+    if (index < 0) return
+
+    const horizontal = orientation() === 'horizontal'
+    const next = horizontal ? (direction() === 'rtl' ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'
+    const previous = horizontal ? (direction() === 'rtl' ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'
+    let target: number
+    if (event.key === next) target = Math.min(index + 1, items.length - 1)
+    else if (event.key === previous) target = Math.max(index - 1, 0)
+    else if (event.key === 'Home') target = 0
+    else if (event.key === 'End') target = items.length - 1
+    else return
+
+    event.preventDefault()
+    event.stopPropagation()
+    items[target]?.focus()
+  }
+}

package/src/components/navigation-menu/composables/useNavigationMenuLayout.ts

@@ -0,0 +1,72 @@
+import { computed, shallowRef, watch, type Ref } from 'vue'
+import { useElementBounding, useResizeObserver, useWindowSize } from '@vueuse/core'
+import type { NavigationMenuOrientation } from '../types'
+
+export function useNavigationMenuLayout(
+  root: Ref<HTMLElement | undefined>,
+  orientation: () => NavigationMenuOrientation,
+  direction: () => 'ltr' | 'rtl',
+) {
+  const { left, right, update } = useElementBounding(root)
+  const { width } = useWindowSize()
+  const ancestors = shallowRef<HTMLElement[]>([])
+  const bounds = shallowRef({ start: 16, end: width.value - 16 })
+
+  function measure() {
+    let start = 16
+    let end = width.value - 16
+    for (const element of ancestors.value) {
+      const overflow = element.ownerDocument.defaultView?.getComputedStyle(element).overflowX
+      if (overflow === 'visible') continue
+      const rect = element.getBoundingClientRect()
+      start = Math.max(start, rect.left + element.clientLeft + 8)
+      end = Math.min(end, rect.left + element.clientLeft + element.clientWidth - 8)
+    }
+    bounds.value = { start, end }
+  }
+
+  watch(
+    root,
+    element => {
+      const parents: HTMLElement[] = []
+      for (let parent = element?.parentElement; parent; parent = parent.parentElement)
+        parents.push(parent)
+      ancestors.value = parents
+      measure()
+    },
+    { flush: 'post' },
+  )
+  watch([left, right, width], measure, { flush: 'post' })
+  useResizeObserver(ancestors, () => {
+    update()
+    measure()
+  })
+
+  const available = computed(() => {
+    const before = Math.max(0, left.value - bounds.value.start - 10)
+    const after = Math.max(0, bounds.value.end - right.value - 10)
+    return direction() === 'rtl' ? { start: after, end: before } : { start: before, end: after }
+  })
+  const side = computed(() =>
+    orientation() === 'vertical' &&
+    available.value.end < 320 &&
+    available.value.start > available.value.end
+      ? 'start'
+      : 'end',
+  )
+  const placement = computed(() => {
+    if (orientation() === 'horizontal') return 'bottom'
+    if (side.value === 'end') return direction() === 'rtl' ? 'left' : 'right'
+    return direction() === 'rtl' ? 'right' : 'left'
+  })
+  const style = computed(() =>
+    root.value
+      ? {
+          '--hn-navigation-max-width': `${orientation() === 'vertical' ? available.value[side.value] : Math.max(0, bounds.value.end - bounds.value.start - 2)}px`,
+          '--hn-navigation-min-x': `${bounds.value.start - left.value}px`,
+          '--hn-navigation-bound-end': `${bounds.value.end - left.value}px`,
+        }
+      : undefined,
+  )
+  return { side, placement, style }
+}

package/src/components/navigation-menu/context.ts

@@ -0,0 +1,19 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { NavigationMenuOrientation, NavigationMenuSize } from './types'
+
+interface NavigationMenuContext {
+  size: Readonly<Ref<NavigationMenuSize>>
+  orientation: Readonly<Ref<NavigationMenuOrientation>>
+}
+
+const key: InjectionKey<NavigationMenuContext> = Symbol('hn-navigation-menu')
+
+export function provideNavigationMenu(context: NavigationMenuContext) {
+  provide(key, context)
+}
+
+export function useNavigationMenu() {
+  const context = inject(key)
+  if (!context) throw new Error('NavigationMenu controls must be inside NavigationMenu.')
+  return context
+}

package/src/components/navigation-menu/navigation-menu.variants.ts

@@ -0,0 +1,82 @@
+import { tv } from '../../lib/tv'
+
+export const navigationMenu = tv({
+  base: 'relative w-fit max-w-full',
+})
+
+export const navigationMenuList = tv({
+  base: 'm-0 flex list-none gap-1 p-0',
+  variants: {
+    orientation: {
+      horizontal: 'flex-wrap items-center',
+      vertical: 'flex-col items-stretch',
+    },
+  },
+})
+
+export const navigationMenuControl = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'text-fg gap-(--hn-control-gap) rounded-md text-start font-medium no-underline outline-none select-none [&_svg]:shrink-0',
+    'data-[state=open]:bg-inset data-active:text-accent-text data-active:bg-accent-soft',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'min-h-(--hn-control-h-sm) px-(--hn-control-px-sm) text-xs [&_svg]:size-3.5',
+      md: 'min-h-(--hn-control-h-md) px-(--hn-control-px-md) text-sm [&_svg]:size-4',
+      lg: 'min-h-(--hn-control-h-lg) px-(--hn-control-px-lg) text-base [&_svg]:size-[1.125rem]',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'w-full',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const navigationMenuTrigger = tv({
+  base: 'group/hn-disclosure',
+})
+
+export const navigationMenuIcon = tv({
+  base: 'inline-flex shrink-0 items-center justify-center gap-1',
+})
+
+export const navigationMenuDisclosure = tv({
+  base: 'inline-flex shrink-0 text-muted',
+  variants: {
+    orientation: { horizontal: '', vertical: 'rtl:-scale-x-100' },
+  },
+})
+
+export const navigationMenuLink = tv({
+  base: 'py-2',
+})
+
+export const navigationMenuContent = tv({
+  base: 'hn-anim-navigation-content absolute start-0 top-0 w-80 max-w-[min(calc(100vw-2rem),var(--hn-navigation-max-width,100vw))] outline-none rtl:start-auto rtl:end-0',
+  variants: {
+    padded: { true: 'p-2', false: '' },
+  },
+  defaultVariants: { padded: true },
+})
+
+export const navigationMenuViewport = tv({
+  base: [
+    'hn-navigation-viewport bg-surface border-line absolute z-(--hn-z-overlay) overflow-hidden rounded-lg border shadow-md',
+    'h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width)',
+  ],
+  variants: {
+    orientation: {
+      horizontal:
+        'top-full mt-2 [left:clamp(var(--hn-navigation-min-x,0px),var(--reka-navigation-menu-viewport-left),calc(var(--hn-navigation-bound-end,100vw)-var(--reka-navigation-menu-viewport-width)-2px))]',
+      vertical: '[top:var(--reka-navigation-menu-viewport-top)]',
+    },
+    side: { start: '', end: '' },
+  },
+  compoundVariants: [
+    { orientation: 'vertical', side: 'end', class: 'start-full ms-2' },
+    { orientation: 'vertical', side: 'start', class: 'end-full me-2' },
+  ],
+})

package/src/components/navigation-menu/types.ts

@@ -0,0 +1,17 @@
+export type NavigationMenuSize = 'sm' | 'md' | 'lg'
+export type NavigationMenuOrientation = 'horizontal' | 'vertical'
+
+export interface NavigationMenuProps {
+  label?: string
+  orientation?: NavigationMenuOrientation
+  dir?: 'ltr' | 'rtl'
+  size?: NavigationMenuSize
+  trigger?: 'hover' | 'click'
+  delayDuration?: number
+  skipDelayDuration?: number
+  align?: 'start' | 'center' | 'end'
+  unmountOnHide?: boolean
+  class?: string
+  listClass?: string
+  viewportClass?: string
+}