@hina-ui/vue 1.3.1 → 1.4.0

package/src/components/pagination/PaginationJump.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Input from '../input/Input.vue'
+  import { usePaginationJump } from './composables/usePaginationJump'
+  defineOptions({ name: 'HnPaginationJump' })
+  const props = defineProps<{ class?: string }>()
+  const t = useUiLocale()
+  const { draft, commit, reset, size, blocked } = usePaginationJump()
+</script>
+
+<template>
+  <label
+    data-hn-pagination-jump
+    :class="
+      cn('text-muted flex shrink-0 items-center gap-2 text-sm whitespace-nowrap', props.class)
+    "
+  >
+    {{ t.pagination.jumpLabel }}
+    <Input
+      v-model="draft"
+      :size="size"
+      :disabled="blocked"
+      inputmode="numeric"
+      :aria-label="t.pagination.jumpLabel"
+      class="w-16"
+      @blur="commit"
+      @keydown.enter.prevent.stop="commit"
+      @keydown.esc.prevent.stop="reset"
+    />
+  </label>
+</template>

package/src/components/pagination/PaginationPage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { useTemplateRef } from 'vue'
+  import { PaginationListItem } from 'reka-ui'
+  import Button from '../button/Button.vue'
+  import { vTooltip } from '../tooltip/directive'
+  import { useUiLocale } from '../../locale'
+  import { usePaginationContext } from './context'
+  import { paginationItem } from './pagination.variants'
+  import { usePaginationPageTooltip } from './composables/usePaginationPageTooltip'
+
+  defineOptions({ name: 'HnPaginationPage' })
+  const props = defineProps<{ page: number }>()
+  const { state, size, blocked } = usePaginationContext()
+  const t = useUiLocale()
+  const label = useTemplateRef<HTMLElement>('label')
+  const tooltip = usePaginationPageTooltip(label, blocked)
+</script>
+
+<template>
+  <PaginationListItem :value="props.page" as-child>
+    <Button
+      v-tooltip="tooltip"
+      variant="ghost"
+      tone="neutral"
+      :size="size"
+      :aria-label="t.pagination.pageLabel(props.page)"
+      :class="paginationItem({ size, selected: props.page === state.page })"
+    >
+      <span ref="label" class="min-w-0 truncate">
+        <slot :page="props.page" :selected="props.page === state.page">{{ props.page }}</slot>
+      </span>
+    </Button>
+  </PaginationListItem>
+</template>

package/src/components/pagination/PaginationPages.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { toRef } from 'vue'
+  import { usePaginationContext } from './context'
+  import PaginationControl from './PaginationControl.vue'
+  import PaginationPage from './PaginationPage.vue'
+  import PaginationEllipsis from './PaginationEllipsis.vue'
+  import PaginationPopup from './PaginationPopup.vue'
+  import { usePaginationEllipsis } from './composables/usePaginationEllipsis'
+  import type { PaginationEntry } from './types'
+  defineOptions({ name: 'HnPaginationPages' })
+  const props = defineProps<{ items: PaginationEntry[]; host?: HTMLElement }>()
+  const { size, direction, showFirstLast } = usePaginationContext()
+  const ellipsis = usePaginationEllipsis(toRef(props, 'host'), () => props.items)
+</script>
+
+<template>
+  <li v-if="showFirstLast"><PaginationControl action="first" :size="size" :dir="direction" /></li>
+  <li><PaginationControl action="prev" :size="size" :dir="direction" /></li>
+  <li
+    v-for="(item, index) in props.items"
+    :key="item.type === 'page' ? item.value : 'ellipsis-' + (index === 1 ? 'prev' : 'next')"
+  >
+    <PaginationPage v-if="item.type === 'page'" :page="item.value">
+      <template v-if="$slots.page" #default="slotProps">
+        <slot name="page" v-bind="slotProps" />
+      </template>
+    </PaginationPage>
+    <PaginationEllipsis
+      v-else-if="
+        ellipsis.ranges.value.find(range => range.side === (index === 1 ? 'prev' : 'next'))
+      "
+      :range="ellipsis.ranges.value.find(range => range.side === (index === 1 ? 'prev' : 'next'))!"
+      :controller="ellipsis"
+    >
+      <template v-if="$slots.ellipsis" #default="slotProps">
+        <slot name="ellipsis" v-bind="slotProps" />
+      </template>
+    </PaginationEllipsis>
+  </li>
+  <li><PaginationControl action="next" :size="size" :dir="direction" /></li>
+  <li v-if="showFirstLast"><PaginationControl action="last" :size="size" :dir="direction" /></li>
+  <PaginationPopup :controller="ellipsis" />
+</template>

package/src/components/pagination/PaginationPopup.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+  import { type ComponentPublicInstance } from 'vue'
+  import { PopoverRoot, PopoverPortal } from 'reka-ui'
+  import PopoverContent from '../popover/PopoverContent.vue'
+  import Card from '../card/Card.vue'
+  import Button from '../button/Button.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
+  import { useUiLocale } from '../../locale'
+  import { usePaginationContext } from './context'
+  import { usePaginationWindow } from './composables/usePaginationWindow'
+  import type { PaginationEllipsisController } from './composables/usePaginationEllipsis'
+  defineOptions({ name: 'HnPaginationPopup' })
+  const props = defineProps<{ controller: PaginationEllipsisController }>()
+  const { open, reference, id } = props.controller
+  const { size, blocked, direction } = usePaginationContext()
+  const { content, present } = useOverlayPortal(open)
+  const { scroll, rowsHost, activePage, extent, rows, keydown } = usePaginationWindow(
+    props.controller,
+  )
+  const t = useUiLocale()
+  function panel(value: Element | ComponentPublicInstance | null) {
+    content.value = value as ComponentPublicInstance | null
+    props.controller.panel.value = value && '$el' in value ? value.$el : undefined
+  }
+</script>
+
+<template>
+  <PopoverRoot
+    :open="open"
+    :modal="false"
+    @update:open="
+      value => {
+        if (!value) props.controller.close()
+      }
+    "
+  >
+    <PopoverPortal v-if="present">
+      <PopoverContent
+        :id="id"
+        :reference="reference"
+        :side-offset="8"
+        align="center"
+        :aria-label="t.pagination.choosePage"
+        as-child
+        @open-auto-focus.prevent
+        @close-auto-focus="props.controller.closeAutoFocus"
+        @interact-outside="props.controller.outside"
+        @escape-key-down.prevent="props.controller.close(true)"
+      >
+        <Card
+          :ref="panel"
+          :padded="false"
+          :dir="direction"
+          :inert="!open || blocked || undefined"
+          data-hn-pagination-popup
+          class="hn-anim-pop z-(--hn-z-overlay) w-24 p-1 shadow-md outline-none"
+          @pointerenter="props.controller.keep"
+          @pointerleave="props.controller.leave"
+          @keydown="keydown"
+          @keydown.tab.capture="props.controller.tab"
+        >
+          <ScrollArea ref="scroll" class="max-h-56">
+            <div ref="rowsHost" class="relative gap-1" :style="{ height: extent + 'px' }">
+              <div
+                v-for="row in rows"
+                :key="row.page"
+                class="absolute inset-x-0"
+                :style="{ top: row.top + 'px' }"
+              >
+                <Button
+                  :data-hn-pagination-choice="row.page"
+                  variant="ghost"
+                  tone="neutral"
+                  :size="size"
+                  :disabled="blocked"
+                  :tabindex="activePage === row.page ? 0 : -1"
+                  :aria-label="t.pagination.pageLabel(row.page)"
+                  class="w-full tabular-nums"
+                  @focus="activePage = row.page"
+                  @click="props.controller.pick(row.page)"
+                >
+                  {{ row.page }}
+                </Button>
+              </div>
+            </div>
+          </ScrollArea>
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/pagination/PaginationSize.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Select from '../select/Select.vue'
+  import { usePaginationContext } from './context'
+  defineOptions({ name: 'HnPaginationSize' })
+  const props = defineProps<{ class?: string }>()
+  const { state, options, size, blocked, resize, direction } = usePaginationContext()
+  const t = useUiLocale()
+  const model = computed({
+    get: () => state.value.pageSize,
+    set: (value: string | number | null | undefined) => {
+      if (value != null) resize(Number(value))
+    },
+  })
+</script>
+
+<template>
+  <Select
+    v-model="model"
+    :options="options"
+    :size="size"
+    :disabled="blocked"
+    :aria-label="t.pagination.pageSizeLabel"
+    :dir="direction"
+    data-hn-pagination-size
+    :class="cn('w-auto shrink-0 whitespace-nowrap', props.class)"
+  />
+</template>

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

@@ -0,0 +1,76 @@
+import { computed, watch, type Ref } from 'vue'
+import type { PaginationChange, PaginationState } from '../types'
+
+interface PaginationOptions {
+  total: number
+  itemCount?: number
+  siblingCount: number
+  pageSizeOptions?: number[]
+  disabled?: boolean
+  pending?: boolean
+}
+
+export function paginationInteger(value: number, fallback: number, minimum: number) {
+  return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback
+}
+
+export function usePagination(
+  props: PaginationOptions,
+  model: Ref<number>,
+  sizeModel: Ref<number>,
+  change: (value: PaginationChange) => void,
+) {
+  const total = computed(() => paginationInteger(props.total, 0, 0))
+  const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1))
+  const siblingCount = computed(() => paginationInteger(props.siblingCount, 1, 0))
+  const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+  const clamp = (value: number) => Math.min(pageCount.value, paginationInteger(value, 1, 1))
+  const page = computed(() => clamp(model.value))
+  const blocked = computed(() => !!(props.disabled || props.pending))
+  const state = computed<PaginationState>(() => {
+    const count =
+      props.itemCount === undefined ? pageSize.value : paginationInteger(props.itemCount, 0, 0)
+    const from = total.value && count ? (page.value - 1) * pageSize.value + 1 : 0
+    return {
+      page: page.value,
+      pageSize: pageSize.value,
+      pageCount: pageCount.value,
+      total: total.value,
+      from,
+      to: from ? Math.min(total.value, from + count - 1) : 0,
+    }
+  })
+  const sizes = computed(() =>
+    [...new Set([...(props.pageSizeOptions ?? []), pageSize.value])]
+      .filter(value => Number.isInteger(value) && value > 0)
+      .sort((a, b) => a - b),
+  )
+
+  watch(
+    [model, pageCount, () => props.pending],
+    () => {
+      if (props.pending || model.value === page.value) return
+      const next = page.value
+      model.value = next
+      change({ page: next, pageSize: pageSize.value })
+    },
+    { immediate: true },
+  )
+
+  function update(value: number) {
+    const next = clamp(value)
+    if (blocked.value || page.value === next) return
+    model.value = next
+    change({ page: next, pageSize: pageSize.value })
+  }
+
+  function resize(value: number) {
+    const next = paginationInteger(value, pageSize.value, 1)
+    if (blocked.value || pageSize.value === next) return
+    sizeModel.value = next
+    if (model.value !== 1) model.value = 1
+    change({ page: 1, pageSize: next })
+  }
+
+  return { total, pageSize, siblingCount, pageCount, page, state, blocked, sizes, update, resize }
+}

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

@@ -0,0 +1,269 @@
+import {
+  computed,
+  nextTick,
+  onScopeDispose,
+  ref,
+  shallowRef,
+  useId,
+  watch,
+  type ComponentPublicInstance,
+  type Ref,
+} from 'vue'
+import { useEventListener, useRafFn } from '@vueuse/core'
+import { usePaginationContext } from '../context'
+import { paginationRanges } from '../utils/ranges'
+import { inPointerCorridor } from '../../../lib/pointer-corridor'
+import type { PaginationEntry, PaginationRange, PaginationSide } from '../types'
+
+export function usePaginationEllipsis(
+  host: Ref<HTMLElement | undefined>,
+  items: () => PaginationEntry[],
+) {
+  const context = usePaginationContext()
+  const id = useId()
+  const ranges = computed(() => paginationRanges(items()))
+  const open = ref(false)
+  const active = ref<PaginationSide>()
+  const displayRange = shallowRef<PaginationRange>()
+  const panel = shallowRef<HTMLElement>()
+  const source = shallowRef<HTMLElement>()
+  const rect = shallowRef<DOMRect>()
+  const focusRequest = shallowRef<{ edge: 'first' | 'last' }>()
+  const reference = computed(() =>
+    rect.value
+      ? { getBoundingClientRect: () => rect.value!, contextElement: host.value }
+      : undefined,
+  )
+  const triggers = new Map<PaginationSide, HTMLElement>()
+  let opening: ReturnType<typeof setTimeout> | undefined
+  let closing: ReturnType<typeof setTimeout> | undefined
+  let mode: 'mouse' | 'keyboard' | 'touch' = 'keyboard'
+  let lastInput = 'keyboard'
+  let restore = false
+  let restoring = false
+  let suppressed = false
+
+  function cancel() {
+    clearTimeout(opening)
+    clearTimeout(closing)
+    opening = closing = undefined
+  }
+
+  function measure() {
+    const element = source.value
+    if (!element?.isConnected) return
+    const next = element.getBoundingClientRect()
+    const old = rect.value
+    if (
+      !old ||
+      next.x !== old.x ||
+      next.y !== old.y ||
+      next.width !== old.width ||
+      next.height !== old.height
+    )
+      rect.value = next
+  }
+
+  const { pause, resume } = useRafFn(measure, { immediate: false })
+  watch(
+    () => open.value || !!panel.value,
+    present => (present ? resume() : pause()),
+    { flush: 'post' },
+  )
+
+  function close(returnFocus = false) {
+    cancel()
+    restore = returnFocus
+    open.value = false
+    focusRequest.value = undefined
+    suppressed = true
+  }
+
+  function show(side: PaginationSide, edge?: 'first' | 'last') {
+    cancel()
+    const range = ranges.value.find(range => range.side === side)
+    const trigger = triggers.get(side)
+    if (context.blocked.value || !range || !trigger?.isConnected) return
+    source.value = trigger
+    active.value = side
+    displayRange.value = { ...range }
+    rect.value = trigger.getBoundingClientRect()
+    restore = false
+    open.value = true
+    suppressed = false
+    if (edge) focusRequest.value = { edge }
+  }
+
+  function enter(side: PaginationSide, event: PointerEvent) {
+    if (event.pointerType !== 'mouse' || context.blocked.value) return
+    mode = 'mouse'
+    suppressed = false
+    cancel()
+    if (open.value) show(side)
+    else opening = setTimeout(() => show(side), 150)
+  }
+
+  function focus(side: PaginationSide) {
+    if (restoring || suppressed || lastInput !== 'keyboard' || context.blocked.value) return
+    mode = 'keyboard'
+    show(side)
+  }
+
+  function leave(event: PointerEvent) {
+    if (event.pointerType !== 'mouse' || mode !== 'mouse') return
+    clearTimeout(opening)
+    opening = undefined
+    if (!open.value) return
+    const a = source.value?.getBoundingClientRect()
+    const b = panel.value?.getBoundingClientRect()
+    if (a && b && inPointerCorridor({ x: event.clientX, y: event.clientY }, a, b)) return
+    clearTimeout(closing)
+    closing = setTimeout(() => close(), 100)
+  }
+
+  function keep() {
+    clearTimeout(closing)
+  }
+
+  function pointerdown(event: PointerEvent) {
+    lastInput = event.pointerType === 'touch' ? 'touch' : 'mouse'
+  }
+
+  function click(side: PaginationSide) {
+    if (context.blocked.value) return
+    if (lastInput === 'touch') {
+      mode = 'touch'
+      show(side)
+      return
+    }
+    const step = context.siblingCount.value * 2 + 1
+    context.update(context.state.value.page + (side === 'prev' ? -step : step))
+  }
+
+  function keydown(side: PaginationSide, event: KeyboardEvent) {
+    lastInput = 'keyboard'
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+    event.preventDefault()
+    mode = 'keyboard'
+    show(side, event.key === 'ArrowDown' ? 'first' : 'last')
+  }
+
+  function register(side: PaginationSide, value: Element | ComponentPublicInstance | null) {
+    const element = value && ('$el' in value ? value.$el : value)
+    if (element instanceof HTMLElement) triggers.set(side, element)
+    else {
+      triggers.delete(side)
+      if (active.value === side && open.value) close(mode === 'keyboard')
+    }
+  }
+
+  function pick(page: number) {
+    if (context.blocked.value) return
+    close(true)
+    context.update(page)
+  }
+
+  function closeAutoFocus(event: Event) {
+    event.preventDefault()
+    const previousPanel = event.target as HTMLElement
+    nextTick(() => {
+      if (open.value || !restore) return
+      const document = previousPanel.ownerDocument
+      if (
+        document.activeElement !== document.body &&
+        !previousPanel.contains(document.activeElement)
+      )
+        return
+      const target = source.value?.isConnected
+        ? source.value
+        : host.value?.querySelector<HTMLElement>('[aria-current="page"]')
+      restoring = true
+      target?.focus({ preventScroll: true })
+      nextTick(() => {
+        restoring = false
+      })
+    })
+  }
+
+  function tab(event: KeyboardEvent) {
+    event.stopPropagation()
+    close()
+    const target = source.value?.isConnected
+      ? source.value
+      : host.value?.querySelector<HTMLElement>('[aria-current="page"]')
+    target?.focus({ preventScroll: true })
+  }
+
+  function outside(event: Event) {
+    const target = event.target as Node | null
+    if ([...triggers.values()].some(trigger => target && trigger.contains(target)))
+      event.preventDefault()
+  }
+
+  watch(ranges, next => {
+    if (!open.value) return
+    const range = next.find(range => range.side === active.value)
+    if (!range) close(mode === 'keyboard')
+    else displayRange.value = { ...range }
+  })
+  watch(context.blocked, blocked => {
+    if (blocked) close()
+  })
+  useEventListener(
+    () => host.value?.ownerDocument,
+    'pointerdown',
+    event => {
+      pointerdown(event as PointerEvent)
+    },
+    { capture: true },
+  )
+  useEventListener(
+    () => host.value?.ownerDocument,
+    'keydown',
+    () => {
+      lastInput = 'keyboard'
+    },
+    { capture: true },
+  )
+  useEventListener(
+    () => host.value?.ownerDocument,
+    'pointermove',
+    event => {
+      const pointer = event as PointerEvent
+      if (!open.value || mode !== 'mouse' || pointer.pointerType !== 'mouse') return
+      const target = event.target as Node
+      if (source.value?.contains(target) || panel.value?.contains(target)) return keep()
+      const a = source.value?.getBoundingClientRect()
+      const b = panel.value?.getBoundingClientRect()
+      if (a && b && inPointerCorridor({ x: pointer.clientX, y: pointer.clientY }, a, b))
+        return keep()
+      leave(pointer)
+    },
+  )
+  onScopeDispose(cancel)
+  return {
+    id,
+    open,
+    active,
+    displayRange,
+    panel,
+    reference,
+    focusRequest,
+    ranges,
+    enter,
+    focus,
+    leave,
+    keep,
+    click,
+    pointerdown,
+    keydown,
+    register,
+    pick,
+    close,
+    closeAutoFocus,
+    outside,
+    tab,
+  }
+}
+
+export type PaginationEllipsisController = ReturnType<typeof usePaginationEllipsis>

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

@@ -0,0 +1,23 @@
+import { ref, watch } from 'vue'
+import { usePaginationContext } from '../context'
+
+export function usePaginationJump() {
+  const context = usePaginationContext()
+  const draft = ref(String(context.state.value.page))
+  const reset = () => {
+    draft.value = String(context.state.value.page)
+  }
+  watch(() => context.state.value.page, reset)
+  watch(context.blocked, blocked => {
+    if (blocked) reset()
+  })
+  function commit() {
+    if (context.blocked.value) return reset()
+    const value = Number(draft.value.trim())
+    if (!draft.value.trim() || !Number.isFinite(value)) return reset()
+    const next = Math.min(context.state.value.pageCount, Math.max(1, Math.trunc(value)))
+    draft.value = String(next)
+    context.update(next)
+  }
+  return { draft, commit, reset, size: context.size, blocked: context.blocked }
+}

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