@hina-ui/vue 1.3.1 → 1.4.0

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/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/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)
+  })
+}

package/src/components/tooltip/directive.ts

@@ -0,0 +1,54 @@
+import { h, render, type AppContext, type DirectiveBinding, type ObjectDirective } from 'vue'
+import TooltipDirectiveRoot from './TooltipDirectiveRoot'
+import { directiveContext } from './utils/directiveContext'
+import type { TooltipDirectiveOptions, TooltipDirectiveValue } from './types'
+
+interface TooltipMount {
+  container: HTMLElement
+  context: AppContext
+  revision: number
+}
+
+const mounts = new WeakMap<HTMLElement, TooltipMount>()
+let nextId = 0
+
+function options(value: TooltipDirectiveValue): TooltipDirectiveOptions {
+  return typeof value === 'string' ? { content: value } : value ? { ...value } : { content: '' }
+}
+
+function update(target: HTMLElement, binding: DirectiveBinding<TooltipDirectiveValue>) {
+  const mount = mounts.get(target)
+  if (!mount) return
+  const vnode = h(TooltipDirectiveRoot, {
+    target,
+    options: options(binding.value),
+    revision: ++mount.revision,
+  })
+  vnode.appContext = mount.context
+  render(vnode, mount.container)
+}
+
+export const vTooltip: ObjectDirective<HTMLElement, TooltipDirectiveValue> = {
+  deep: true,
+  mounted(target, binding) {
+    const owner = binding.instance?.$
+    if (!owner) return
+    const context = directiveContext(owner, target)
+    context.config = Object.create(context.config) as AppContext['config']
+    context.config.idPrefix = 'hn-tooltip-' + ++nextId
+    mounts.set(target, {
+      container: target.ownerDocument.createElement('div'),
+      context,
+      revision: 0,
+    })
+    update(target, binding)
+  },
+  updated: update,
+  beforeUnmount(target) {
+    const mount = mounts.get(target)
+    if (!mount) return
+    render(null, mount.container)
+    mounts.delete(target)
+  },
+  getSSRProps: () => ({}),
+}

package/src/components/tooltip/types.ts

@@ -0,0 +1,15 @@
+export interface TooltipProps {
+  content?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  open?: boolean
+  disabled?: boolean
+  class?: string
+}
+
+export type TooltipDirectiveOptions = Omit<TooltipProps, 'open' | 'content'> & {
+  content: string
+}
+
+export type TooltipDirectiveValue = string | TooltipDirectiveOptions | null | undefined | false

package/src/components/tooltip/utils/directiveContext.ts

@@ -0,0 +1,32 @@
+import { isVNode, type AppContext, type ComponentInternalInstance, type VNode } from 'vue'
+
+type ContextOwner = ComponentInternalInstance & { provides: AppContext['provides'] }
+
+function findOwner(
+  node: VNode,
+  target: HTMLElement,
+  owner: ComponentInternalInstance,
+): ComponentInternalInstance | undefined {
+  if (node.component) {
+    return findOwner(node.component.subTree, target, node.component)
+  }
+  if (node.suspense) {
+    for (const branch of [node.suspense.activeBranch, node.suspense.pendingBranch]) {
+      const match = branch && findOwner(branch, target, owner)
+      if (match) return match
+    }
+  }
+  if (node.el === target) return owner
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      if (!isVNode(child)) continue
+      const match = findOwner(child, target, owner)
+      if (match) return match
+    }
+  }
+}
+
+export function directiveContext(owner: ComponentInternalInstance, target: HTMLElement) {
+  const parent = (findOwner(owner.subTree, target, owner) ?? owner) as ContextOwner
+  return { ...parent.appContext, provides: parent.provides }
+}