@hina-ui/vue 1.3.0 → 1.4.0

package/src/components/pagination/composables/usePaginationPageTooltip.ts

@@ -0,0 +1,23 @@
+import { computed, ref, type Ref } from 'vue'
+import { useEventListener, useMutationObserver, useResizeObserver } from '@vueuse/core'
+
+export function usePaginationPageTooltip(
+  label: Readonly<Ref<HTMLElement | null>>,
+  blocked: Readonly<Ref<boolean>>,
+) {
+  const content = ref('')
+
+  function measure() {
+    const element = label.value
+    content.value =
+      element && element.scrollWidth > element.clientWidth
+        ? (element.textContent?.trim() ?? '')
+        : ''
+  }
+
+  useResizeObserver(label, measure)
+  useMutationObserver(label, measure, { childList: true, characterData: true, subtree: true })
+  useEventListener(() => label.value?.ownerDocument.fonts, 'loadingdone', measure)
+
+  return computed(() => (blocked.value ? false : content.value))
+}

package/src/components/pagination/composables/usePaginationWindow.ts

@@ -0,0 +1,116 @@
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import type ScrollArea from '../../scroll-area/ScrollArea.vue'
+import type { PaginationEllipsisController } from './usePaginationEllipsis'
+
+export function usePaginationWindow(controller: PaginationEllipsisController) {
+  const scroll = shallowRef<InstanceType<typeof ScrollArea>>()
+  const rowsHost = shallowRef<HTMLElement>()
+  const viewport = computed(() => scroll.value?.viewport)
+  const top = ref(0)
+  const height = ref(224)
+  const rowHeight = ref(36)
+  const rowGap = ref(0)
+  const rowStep = computed(() => rowHeight.value + rowGap.value)
+  const activePage = ref(1)
+  const range = controller.displayRange
+  const count = computed(() => (range.value ? range.value.to - range.value.from + 1 : 0))
+  const extent = computed(() => Math.max(0, count.value * rowStep.value - rowGap.value))
+  const rows = computed(() => {
+    if (!range.value) return []
+    const start = Math.max(0, Math.floor(top.value / rowStep.value) - 3)
+    const end = Math.min(count.value, start + Math.ceil(height.value / rowStep.value) + 7)
+    const values = Array.from(
+      { length: Math.max(0, end - start) },
+      (_, i) => start + i + range.value!.from,
+    )
+    if (
+      activePage.value >= range.value.from &&
+      activePage.value <= range.value.to &&
+      !values.includes(activePage.value)
+    )
+      values.push(activePage.value)
+    return values.map(page => ({ page, top: (page - range.value!.from) * rowStep.value }))
+  })
+
+  function measure() {
+    if (viewport.value) height.value = viewport.value.clientHeight || 224
+    const button = rowsHost.value?.querySelector<HTMLElement>('[data-hn-pagination-choice]')
+    if (button) {
+      rowHeight.value = button.offsetHeight
+      rowGap.value = Number.parseFloat(getComputedStyle(rowsHost.value!).rowGap) || 0
+    }
+  }
+
+  async function focusPage(page: number) {
+    if (!range.value || !controller.open.value) return
+    activePage.value = Math.min(range.value.to, Math.max(range.value.from, page))
+    const element = viewport.value
+    if (element) {
+      const offset = (activePage.value - range.value.from) * rowStep.value
+      if (offset < element.scrollTop) element.scrollTop = offset
+      else if (offset + rowHeight.value > element.scrollTop + element.clientHeight)
+        element.scrollTop = offset + rowHeight.value - element.clientHeight
+      top.value = element.scrollTop
+    }
+    await nextTick()
+    rowsHost.value
+      ?.querySelector<HTMLElement>('[data-hn-pagination-choice="' + activePage.value + '"]')
+      ?.focus({ preventScroll: true })
+  }
+
+  function keydown(event: KeyboardEvent) {
+    if (!range.value) return
+    const step = Math.max(1, Math.floor(height.value / rowStep.value))
+    const targets: Record<string, number> = {
+      ArrowDown: activePage.value + 1,
+      ArrowUp: activePage.value - 1,
+      Home: range.value.from,
+      End: range.value.to,
+      PageDown: activePage.value + step,
+      PageUp: activePage.value - step,
+    }
+    const target = targets[event.key]
+    if (target === undefined) return
+    event.preventDefault()
+    event.stopPropagation()
+    void focusPage(target)
+  }
+
+  watch(
+    [range, controller.open],
+    () => {
+      if (!controller.open.value || !range.value) return
+      activePage.value = range.value.from
+      top.value = 0
+      if (viewport.value) viewport.value.scrollTop = 0
+    },
+    { immediate: true },
+  )
+  watch(
+    [controller.focusRequest, viewport],
+    async ([request, element]) => {
+      if (!request || !element || !range.value) return
+      await nextTick()
+      measure()
+      await focusPage(request.edge === 'first' ? range.value.from : range.value.to)
+      controller.focusRequest.value = undefined
+    },
+    { flush: 'post' },
+  )
+  useResizeObserver(
+    () => rowsHost.value?.querySelector<HTMLElement>('[data-hn-pagination-choice]'),
+    measure,
+  )
+  useResizeObserver(rowsHost, measure)
+  useResizeObserver(viewport, measure)
+  useEventListener(
+    viewport,
+    'scroll',
+    () => {
+      top.value = viewport.value?.scrollTop ?? 0
+    },
+    { passive: true },
+  )
+  return { scroll, rowsHost, activePage, extent, rows, keydown }
+}

package/src/components/pagination/context.ts

@@ -0,0 +1,23 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { PaginationState } from './types'
+
+export interface PaginationContext {
+  state: Readonly<Ref<PaginationState>>
+  blocked: Readonly<Ref<boolean>>
+  size: Readonly<Ref<'sm' | 'md' | 'lg'>>
+  direction: Readonly<Ref<'ltr' | 'rtl'>>
+  siblingCount: Readonly<Ref<number>>
+  showFirstLast: Readonly<Ref<boolean>>
+  options: Readonly<Ref<Array<{ value: number; label: string }>>>
+  update: (page: number) => void
+  resize: (pageSize: number) => void
+}
+
+const key: InjectionKey<PaginationContext> = Symbol('HnPagination')
+
+export const providePagination = (context: PaginationContext) => provide(key, context)
+export function usePaginationContext() {
+  const context = inject(key)
+  if (!context) throw new Error('Pagination parts require a Pagination parent')
+  return context
+}

package/src/components/pagination/pagination.variants.ts

@@ -0,0 +1,32 @@
+import { tv } from '../../lib/tv'
+
+export const pagination = tv({
+  base: 'flex w-full shrink-0 flex-wrap items-center gap-x-4 gap-y-3',
+  variants: {
+    align: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+    },
+  },
+})
+
+export const paginationList = tv({
+  base: 'relative isolate flex max-w-full flex-wrap items-center gap-1',
+})
+
+export const paginationItem = tv({
+  base: 'min-w-0 px-0 tabular-nums [&>span]:min-w-0',
+  variants: {
+    size: {
+      sm: 'size-[var(--hn-control-h-sm)]',
+      md: 'size-[var(--hn-control-h-md)]',
+      lg: 'size-[var(--hn-control-h-lg)]',
+    },
+    selected: { true: 'bg-accent text-accent-on' },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const paginationArrow = tv({ variants: { dir: { ltr: '', rtl: 'rotate-180' } } })

package/src/components/pagination/types.ts

@@ -0,0 +1,19 @@
+export interface PaginationChange {
+  page: number
+  pageSize: number
+}
+
+export interface PaginationState extends PaginationChange {
+  total: number
+  pageCount: number
+  from: number
+  to: number
+}
+
+export type PaginationEntry = { type: 'page'; value: number } | { type: 'ellipsis' }
+export type PaginationSide = 'prev' | 'next'
+export interface PaginationRange {
+  side: PaginationSide
+  from: number
+  to: number
+}

package/src/components/pagination/utils/ranges.ts

@@ -0,0 +1,12 @@
+import type { PaginationEntry, PaginationRange } from '../types'
+
+export function paginationRanges(items: PaginationEntry[]): PaginationRange[] {
+  return items.flatMap((item, index) => {
+    if (item.type !== 'ellipsis') return []
+    const previous = items[index - 1]
+    const next = items[index + 1]
+    if (previous?.type !== 'page' || next?.type !== 'page' || next.value <= previous.value + 1)
+      return []
+    return [{ side: index === 1 ? 'prev' : 'next', from: previous.value + 1, to: next.value - 1 }]
+  })
+}

package/src/components/popover/Popover.vue

@@ -4,6 +4,7 @@
   import PopoverContent from './PopoverContent.vue'
   import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnPopover', inheritAttrs: false })
@@ -28,6 +29,8 @@
     emit('openAutoFocus', event),
   )
 
+  const { content, present } = useOverlayPortal(visible)
+
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
     if (props.side === 'right') return 'left'
@@ -41,13 +44,13 @@
   <PopoverRoot v-model:open="visible" :modal="props.modal">
     <PopoverTrigger
       v-if="$slots.default"
-      ref="trigger"
+      :ref="trigger"
       as-child
       :style="{ transformOrigin: pressOrigin }"
     >
       <slot />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal v-if="present">
       <PopoverContent
         v-bind="{ ...$attrs, ...events }"
         :reference="reference"
@@ -57,6 +60,7 @@
         :side-offset="props.sideOffset"
       >
         <Card
+          ref="content"
           :padded="props.padded"
           :class="cn('hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none', props.class)"
         >

package/src/components/range-slider/RangeSlider.vue

@@ -5,6 +5,7 @@
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import { useSliderChrome } from '../slider/composables/useSliderChrome'
+  import { useDirection } from '../../lib/useDirection'
   import SliderHandle from '../slider/SliderHandle.vue'
   import SliderMarks from '../slider/SliderMarks.vue'
   import {
@@ -22,6 +23,7 @@
       min?: number
       max?: number
       step?: number
+      dir?: 'ltr' | 'rtl'
       minSteps?: number
       marks?: Array<{ value: number; label?: string }>
       label?: 'auto' | 'always' | 'none'
@@ -37,6 +39,7 @@
 
   const model = defineModel<[number, number]>()
 
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
   const t = useUiLocale()
   const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
     disabled: () => props.disabled,
@@ -66,6 +69,7 @@
 
 <template>
   <span
+    ref="root"
     data-hn-range-slider
     data-hn-state-group
     role="group"
@@ -73,6 +77,7 @@
     :aria-labelledby="labelledBy"
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
+    :dir="rootDirection"
     :data-disabled="disabled ? '' : undefined"
     :data-dragging="dragging ? '' : undefined"
     :style="position"
@@ -81,6 +86,7 @@
     v-on="listeners"
   >
     <SliderRoot
+      :dir="direction"
       :model-value="values"
       :min="props.min"
       :max="props.max"

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

@@ -13,10 +13,6 @@ const useBodyPointerLock = createSharedComposable(() => {
   return locked
 })
 
-function block(event: Event) {
-  event.preventDefault()
-}
-
 export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
   const locked = useBodyPointerLock()
   let release: (() => void) | undefined
@@ -25,12 +21,15 @@ export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
     release?.()
     release = undefined
     const el = viewport.value
-    if (!el || !locked.value || getComputedStyle(el).pointerEvents !== 'none') return
-    el.addEventListener('wheel', block, { passive: false })
-    el.addEventListener('touchmove', block, { passive: false })
+    if (!el || !locked.value) return
+    const block = (event: Event) => {
+      if (getComputedStyle(el).pointerEvents === 'none') event.preventDefault()
+    }
+    el.addEventListener('wheel', block, { passive: false, capture: true })
+    el.addEventListener('touchmove', block, { passive: false, capture: true })
     release = () => {
-      el.removeEventListener('wheel', block)
-      el.removeEventListener('touchmove', block)
+      el.removeEventListener('wheel', block, true)
+      el.removeEventListener('touchmove', block, true)
     }
   }
 

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

@@ -5,7 +5,7 @@ export function useWheelRedirect(
   enabled: () => boolean,
 ) {
   function onWheel(event: WheelEvent) {
-    if (!enabled()) return
+    if (event.defaultPrevented || !enabled()) return
     const el = viewport.value
     if (!el) return
     if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return

package/src/components/skeleton/LICENSE

@@ -0,0 +1,24 @@
+The skeleton shimmer styles and light/dark opacity values are adapted from PrimeVue / PrimeUIX
+(https://github.com/primefaces/primeuix), using Hina design tokens.
+
+MIT License
+
+Copyright (c) 2025 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/components/slider/Slider.vue

@@ -5,6 +5,7 @@
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import { useSliderChrome } from './composables/useSliderChrome'
+  import { useDirection } from '../../lib/useDirection'
   import SliderHandle from './SliderHandle.vue'
   import SliderMarks from './SliderMarks.vue'
   import {
@@ -22,6 +23,7 @@
       min?: number
       max?: number
       step?: number
+      dir?: 'ltr' | 'rtl'
       marks?: Array<{ value: number; label?: string }>
       label?: 'auto' | 'always' | 'none'
       format?: (value: number) => string
@@ -36,6 +38,7 @@
 
   const model = defineModel<number>()
 
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
   const t = useUiLocale()
   const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
     disabled: () => props.disabled,
@@ -60,8 +63,10 @@
 
 <template>
   <span
+    ref="root"
     data-hn-slider
     data-hn-state-group
+    :dir="rootDirection"
     :data-disabled="disabled ? '' : undefined"
     :data-dragging="dragging ? '' : undefined"
     :style="position"
@@ -70,6 +75,7 @@
     v-on="listeners"
   >
     <SliderRoot
+      :dir="direction"
       :model-value="values"
       :min="props.min"
       :max="props.max"

package/src/components/slider/slider.variants.ts

@@ -18,6 +18,7 @@ export const sliderRoot = tv({
   base: [
     'bg-line-strong relative flex h-[var(--hn-slider-h)] w-full cursor-pointer touch-none rounded-full select-none',
     'data-disabled:pointer-events-none',
+    '[&[dir=rtl]>[role=slider]]:[--reka-slider-thumb-transform:translateX(50%)]',
   ],
 })
 

package/src/components/tooltip/Tooltip.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-  import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
-  import { cn } from '../../lib/cn'
+  import { TooltipRoot, TooltipTrigger } from 'reka-ui'
+  import TooltipBubble from './TooltipBubble.vue'
+  import type { TooltipProps } from './types'
 
   defineOptions({ name: 'HnTooltip' })
 
-  const props = withDefaults(
-    defineProps<{
-      content?: string
-      side?: 'top' | 'right' | 'bottom' | 'left'
-      align?: 'start' | 'center' | 'end'
-      sideOffset?: number
-      open?: boolean
-      disabled?: boolean
-      class?: string
-    }>(),
-    { side: 'top', align: 'center', sideOffset: 8, open: undefined, disabled: false },
-  )
+  const props = withDefaults(defineProps<TooltipProps>(), {
+    open: undefined,
+    disabled: false,
+  })
 </script>
 
 <template>
@@ -23,24 +16,8 @@
     <TooltipTrigger as-child>
       <slot />
     </TooltipTrigger>
-    <TooltipPortal>
-      <TooltipContent
-        :side="props.side"
-        :align="props.align"
-        :side-offset="props.sideOffset"
-        :aria-label="props.content"
-        :update-position-strategy="props.open === undefined ? 'optimized' : 'always'"
-        :class="
-          cn(
-            'hn-anim-pop [--hn-pop-in:var(--hn-duration-fast)] bg-neutral-solid text-neutral-solid-on z-(--hn-z-overlay)',
-            'max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md',
-            props.class,
-          )
-        "
-      >
-        <slot name="content">{{ props.content }}</slot>
-        <TooltipArrow :width="10" :height="5" class="fill-neutral-solid" />
-      </TooltipContent>
-    </TooltipPortal>
+    <TooltipBubble v-bind="props">
+      <slot name="content">{{ props.content }}</slot>
+    </TooltipBubble>
   </TooltipRoot>
 </template>

package/src/components/tooltip/TooltipBubble.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import type { TooltipProps } from './types'
+
+  defineOptions({ name: 'HnTooltipBubble' })
+
+  const props = withDefaults(defineProps<TooltipProps>(), {
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    open: undefined,
+  })
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      :side="props.side"
+      :align="props.align"
+      :side-offset="props.sideOffset"
+      :aria-label="props.content"
+      :update-position-strategy="props.open === undefined ? 'optimized' : 'always'"
+      :class="
+        cn(
+          'hn-anim-pop [--hn-pop-in:var(--hn-duration-fast)] bg-neutral-solid text-neutral-solid-on z-(--hn-z-overlay)',
+          'max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot>{{ props.content }}</slot>
+      <TooltipArrow :width="10" :height="5" class="fill-neutral-solid" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/tooltip/TooltipDirectiveRoot.ts

@@ -0,0 +1,61 @@
+import { computed, defineComponent, h, type PropType } from 'vue'
+import {
+  TooltipTrigger,
+  TooltipRoot,
+  injectTooltipProviderContext,
+  injectTooltipRootContext,
+} from 'reka-ui'
+import TooltipBubble from './TooltipBubble.vue'
+import { useTooltipTarget } from './composables/useTooltipTarget'
+import type { TooltipDirectiveOptions } from './types'
+
+const TooltipTarget = defineComponent({
+  name: 'HnTooltipTarget',
+  props: {
+    target: { type: Object as PropType<HTMLElement>, required: true },
+    options: { type: Object as PropType<TooltipDirectiveOptions>, required: true },
+    revision: { type: Number, required: true },
+  },
+  setup(props) {
+    const root = injectTooltipRootContext()
+    const ExternalTarget = defineComponent({
+      name: 'HnTooltipElement',
+      inheritAttrs: false,
+      setup(_, { attrs }) {
+        useTooltipTarget(props.target, attrs, () => props.revision)
+        return () => null
+      },
+    })
+    return () => [
+      h(TooltipTrigger, {
+        key: root.disabled.value ? 'disabled' : 'enabled',
+        reference: props.target,
+        as: ExternalTarget,
+      }),
+      h(TooltipBubble, props.options),
+    ]
+  },
+})
+
+export default defineComponent({
+  name: 'HnTooltipDirectiveRoot',
+  props: {
+    target: { type: Object as PropType<HTMLElement>, required: true },
+    options: { type: Object as PropType<TooltipDirectiveOptions>, required: true },
+    revision: { type: Number, required: true },
+  },
+  setup(props) {
+    const provider = injectTooltipProviderContext(null)
+    const disabled = computed(() => !!props.options.disabled || !props.options.content.trim())
+    return () =>
+      provider
+        ? h(
+            TooltipRoot,
+            { disabled: disabled.value, ignoreNonKeyboardFocus: true },
+            {
+              default: () => h(TooltipTarget, props),
+            },
+          )
+        : null
+  },
+})

package/src/components/tooltip/composables/useTooltipTarget.ts

@@ -0,0 +1,56 @@
+import { onScopeDispose, watch, watchPostEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { injectTooltipProviderContext, injectTooltipRootContext } from 'reka-ui'
+
+type Handler = (event: Event) => void
+
+export function useTooltipTarget(
+  target: HTMLElement,
+  attrs: Record<string, unknown>,
+  revision: () => number,
+) {
+  const root = injectTooltipRootContext()
+  const provider = injectTooltipProviderContext()
+
+  watchPostEffect(() => {
+    if (root.trigger.value !== target) root.onTriggerChange(target)
+  })
+
+  const contentId = root.contentId
+  const graceAttribute = 'data-grace-area-trigger'
+  const previousGrace = target.getAttribute(graceAttribute)
+  target.setAttribute(graceAttribute, '')
+
+  function describe(open: boolean) {
+    const ids = new Set(
+      (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean),
+    )
+    ids.delete(contentId)
+    if (open) ids.add(contentId)
+    if (ids.size) target.setAttribute('aria-describedby', [...ids].join(' '))
+    else target.removeAttribute('aria-describedby')
+  }
+
+  for (const event of ['pointermove', 'pointerleave', 'pointerdown', 'focus', 'blur', 'click']) {
+    const prop = 'on' + event[0]!.toUpperCase() + event.slice(1)
+    useEventListener(target, event, (event: Event) => {
+      const handlers = attrs[prop] as Handler | Handler[] | undefined
+      for (const handler of Array.isArray(handlers) ? handlers : handlers ? [handlers] : []) {
+        handler(event)
+      }
+    })
+  }
+
+  watch([root.open, revision], ([open]) => describe(open), { immediate: true, flush: 'post' })
+  watch(root.disabled, disabled => {
+    if (disabled) root.onClose()
+  })
+
+  onScopeDispose(() => {
+    if (root.open.value) provider.onClose()
+    root.onClose()
+    describe(false)
+    if (previousGrace === null) target.removeAttribute(graceAttribute)
+    else target.setAttribute(graceAttribute, previousGrace)
+  })
+}