@hina-ui/vue 1.7.2 → 1.7.4

package/src/components/data-list/DataListPagination.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import { ChevronLeft, ChevronRight } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Pagination from '../pagination/Pagination.vue'
+  import Text from '../text/Text.vue'
+  import { dataListPagination } from './data-list.variants'
+  import type { DataListState } from './types'
+
+  defineProps<{ state: DataListState<unknown> }>()
+  const t = useUiLocale()
+</script>
+
+<template>
+  <Pagination
+    v-if="state.total !== undefined"
+    :model-value="state.page"
+    :page-size="state.pageSize"
+    :total="state.total"
+    :pending="state.loading"
+    align="end"
+    @update:model-value="state.setPage"
+  />
+  <nav v-else :aria-label="t.pagination.navLabel" :class="dataListPagination()">
+    <Button
+      icon-only
+      size="md"
+      variant="ghost"
+      tone="neutral"
+      :disabled="state.loading || !state.hasPreviousPage"
+      :aria-label="t.pagination.prev"
+      @click="state.setPage(state.page - 1)"
+    >
+      <ChevronLeft class="rtl:rotate-180" />
+    </Button>
+    <Text size="sm" aria-current="page" :aria-label="t.pagination.pageLabel(state.page)">
+      {{ state.page }}
+    </Text>
+    <Button
+      icon-only
+      size="md"
+      variant="ghost"
+      tone="neutral"
+      :disabled="state.loading || !state.hasNextPage"
+      :aria-label="t.pagination.next"
+      @click="state.setPage(state.page + 1)"
+    >
+      <ChevronRight class="rtl:rotate-180" />
+    </Button>
+  </nav>
+</template>

package/src/components/data-list/composables/useDataList.ts

@@ -0,0 +1,126 @@
+import { computed, watch, type Ref } from 'vue'
+import { paginationInteger } from '../../pagination/composables/usePagination'
+import { cn } from '../../../lib/cn'
+import { dataListItem } from '../data-list.variants'
+import type {
+  DataListKey,
+  DataListItemSlot,
+  DataListLayout,
+  DataListPageChange,
+  DataListProps,
+  DataListState,
+  DataListTextField,
+} from '../types'
+
+export function useDataList<T>(
+  props: DataListProps<T>,
+  pageModel: Ref<number>,
+  sizeModel: Ref<number>,
+  change: (value: DataListPageChange) => void,
+  layoutModel?: Ref<DataListLayout>,
+) {
+  const layout = computed(() => layoutModel?.value ?? props.layout ?? 'list')
+  function text(item: T, index: number, field: DataListTextField<T> | undefined) {
+    const value = typeof field === 'function' ? field(item, index) : field ? item[field] : undefined
+    return value !== '' && (typeof value === 'string' || typeof value === 'number')
+      ? value
+      : undefined
+  }
+  const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1))
+  const total = computed(() =>
+    props.manual
+      ? props.total === undefined
+        ? undefined
+        : paginationInteger(props.total, 0, 0)
+      : props.items.length,
+  )
+  const pageCount = computed(() =>
+    total.value === undefined ? undefined : Math.max(1, Math.ceil(total.value / pageSize.value)),
+  )
+  const clamp = (value: number) =>
+    Math.min(pageCount.value ?? Infinity, paginationInteger(value, 1, 1))
+  const page = computed(() => (props.pagination ? clamp(pageModel.value) : 1))
+  const offset = computed(() => (props.pagination ? (page.value - 1) * pageSize.value : 0))
+  const visible = computed(() =>
+    props.pagination && !props.manual
+      ? props.items.slice(offset.value, offset.value + pageSize.value)
+      : props.items,
+  )
+  const entries = computed(() =>
+    visible.value.map((item, index) => ({
+      item,
+      index: offset.value + index,
+      key:
+        typeof props.itemKey === 'function'
+          ? props.itemKey(item, offset.value + index)
+          : (item[props.itemKey] as DataListKey),
+      layout: layout.value,
+    })),
+  )
+  const formatItem = (entry: DataListItemSlot<T>) => ({
+    title: text(entry.item, entry.index, props.itemTitle),
+    description: text(entry.item, entry.index, props.itemDescription),
+  })
+  function setPage(value: number) {
+    const next = clamp(value)
+    if (props.loading || next === page.value) return
+    if (pageCount.value === undefined && next > page.value && !props.hasNextPage) return
+    pageModel.value = next
+    change({ page: next, pageSize: pageSize.value })
+  }
+  function setPageSize(value: number) {
+    const next = paginationInteger(value, pageSize.value, 1)
+    if (props.loading || next === pageSize.value) return
+    sizeModel.value = next
+    pageModel.value = 1
+    change({ page: 1, pageSize: next })
+  }
+  watch(
+    [page, pageModel, () => props.loading],
+    () => {
+      if (!props.pagination || props.loading || pageModel.value === page.value) return
+      pageModel.value = page.value
+      change({ page: page.value, pageSize: pageSize.value })
+    },
+    { immediate: true },
+  )
+  const state = computed<DataListState<T>>(() => ({
+    items: visible.value,
+    total: total.value,
+    page: page.value,
+    pageSize: pageSize.value,
+    pageCount: pageCount.value,
+    layout: layout.value,
+    loading: !!props.loading,
+    refreshing: !!props.loading && visible.value.length > 0,
+    hasPreviousPage: page.value > 1,
+    hasNextPage: pageCount.value === undefined ? !!props.hasNextPage : page.value < pageCount.value,
+    setPage,
+    setPageSize,
+    setLayout: value => {
+      if (layoutModel) layoutModel.value = value
+    },
+  }))
+  const itemClass = (entry: { item: T; index: number }, structured = true) =>
+    cn(
+      dataListItem({ layout: layout.value, divided: props.divided, size: props.size, structured }),
+      typeof props.itemClass === 'function'
+        ? props.itemClass(entry.item, entry.index)
+        : props.itemClass,
+    )
+  const placeholderCount = computed(() =>
+    paginationInteger(
+      props.placeholderCount ?? NaN,
+      props.pagination && !props.virtualize ? pageSize.value : 3,
+      1,
+    ),
+  )
+  const showPagination = computed(
+    () =>
+      props.pagination &&
+      (total.value === undefined
+        ? state.value.hasPreviousPage || state.value.hasNextPage || state.value.loading
+        : total.value > pageSize.value),
+  )
+  return { entries, state, itemClass, placeholderCount, showPagination, formatItem }
+}

package/src/components/data-list/composables/useDataListBody.ts

@@ -0,0 +1,23 @@
+import { computed, shallowRef, type CSSProperties } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import type { DataListProps } from '../types'
+
+export function useDataListBody<T>(props: DataListProps<T>) {
+  const body = shallowRef<HTMLElement>()
+  const lastHeight = shallowRef(0)
+  const length = (value: string | number) => (typeof value === 'number' ? `${value}px` : value)
+  const style = computed<CSSProperties>(() => {
+    if (props.height !== undefined || props.virtualize)
+      return { height: length(props.height ?? 320) }
+    const minimum = length(props.minHeight ?? 160)
+    return {
+      minHeight:
+        props.loading && lastHeight.value ? `max(${minimum}, ${lastHeight.value}px)` : minimum,
+    }
+  })
+  useResizeObserver(body, ([entry]) => {
+    if (entry && !props.loading && props.items.length)
+      lastHeight.value = entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height
+  })
+  return { body, style }
+}

package/src/components/data-list/composables/useDataListWindow.ts

@@ -0,0 +1,270 @@
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onScopeDispose,
+  shallowRef,
+  watch,
+  type CSSProperties,
+  type Ref,
+} from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { defaultRangeExtractor } from '@tanstack/vue-virtual'
+import { useVirtualWindow, virtualFlow } from '../../../lib/virtual/useVirtualWindow'
+import { prefersReducedMotion } from '../../../motion'
+import { paginationInteger } from '../../pagination/composables/usePagination'
+import { scrollDataListItem } from '../utils/scroll'
+import type {
+  DataListItemSlot,
+  DataListKey,
+  DataListLayout,
+  DataListProps,
+  DataListRange,
+} from '../types'
+import type { VirtualListScrollOptions } from '../../virtual-list/types'
+
+export function useDataListWindow<T>(
+  props: {
+    options: DataListProps<T>
+    entries: readonly DataListItemSlot<T>[]
+    layout: DataListLayout
+  },
+  content: Ref<HTMLElement | undefined>,
+  viewport: Ref<HTMLElement | undefined>,
+  onRange: (range: DataListRange) => void,
+) {
+  const settings = computed(() =>
+    typeof props.options.virtualize === 'object' ? props.options.virtualize : {},
+  )
+  const columns = shallowRef(
+    props.layout === 'grid' ? paginationInteger(settings.value.initialColumns ?? NaN, 1, 1) : 1,
+  )
+  const gap = shallowRef(0)
+  const margin = shallowRef(0)
+  const focused = shallowRef<DataListKey>()
+  const focusedIndex = computed(() =>
+    focused.value === undefined
+      ? -1
+      : props.entries.findIndex(entry => entry.key === focused.value),
+  )
+  const rangeExtractor = computed(() => {
+    const retained = Math.floor(focusedIndex.value / columns.value)
+    return (range: Parameters<typeof defaultRangeExtractor>[0]) => {
+      const indexes = defaultRangeExtractor(range)
+      if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained)
+      return indexes.sort((a, b) => a - b)
+    }
+  })
+  const enabled = computed(() => !!props.options.virtualize && props.entries.length > 0)
+  const virtualizer = useVirtualWindow(
+    computed(() => ({
+      enabled: enabled.value,
+      count: Math.ceil(props.entries.length / columns.value),
+      getScrollElement: () => viewport.value ?? null,
+      getItemKey: (row: number) => props.entries[row * columns.value]!.key,
+      estimateSize: () =>
+        paginationInteger(
+          settings.value.estimateSize ?? NaN,
+          props.layout === 'grid' ? 280 : 112,
+          1,
+        ),
+      overscan: paginationInteger(settings.value.overscan ?? NaN, 3, 0),
+      gap: gap.value,
+      scrollMargin: margin.value,
+      initialRect: {
+        width: 320,
+        height: typeof props.options.height === 'number' ? props.options.height : 320,
+      },
+      rangeExtractor: rangeExtractor.value,
+    })),
+  )
+  const flow = computed(() =>
+    virtualFlow(
+      virtualizer.value.getVirtualItems(),
+      virtualizer.value.getTotalSize(),
+      margin.value,
+    ),
+  )
+  const before = computed(() => (enabled.value ? Math.max(0, flow.value.before - gap.value) : 0))
+  const after = computed(() => (enabled.value ? Math.max(0, flow.value.after - gap.value) : 0))
+  const rendered = computed(() =>
+    enabled.value
+      ? flow.value.entries.flatMap(row =>
+          props.entries
+            .slice(row.index * columns.value, (row.index + 1) * columns.value)
+            .map(entry => ({
+              ...entry,
+              row: row.index,
+              gapBefore: Math.max(0, row.gapBefore - gap.value),
+            })),
+        )
+      : props.entries.map(entry => ({ ...entry, row: 0, gapBefore: 0 })),
+  )
+  const style = computed<CSSProperties>(() => ({
+    '--hn-data-list-min': props.options.gridMin ?? '14rem',
+    ...(enabled.value
+      ? {
+          overflowAnchor: 'none',
+        }
+      : {}),
+  }))
+  let observer: ResizeObserver | undefined
+  let elements = new Set<HTMLElement>()
+  let pending: (() => void) | undefined
+  let geometryVersion = 0
+  function measureRows() {
+    if (!enabled.value) return
+    const sizes = new Map<number, number>()
+    for (const element of elements) {
+      const row = Number(element.dataset.virtualRow)
+      sizes.set(row, Math.max(sizes.get(row) ?? 0, element.getBoundingClientRect().height))
+    }
+    for (const [row, size] of sizes) {
+      const key = props.entries[row * columns.value]?.key
+      if (size > 0 && key !== undefined && virtualizer.value.itemSizeCache.get(key) !== size)
+        virtualizer.value.resizeItem(row, size)
+    }
+  }
+  function observeItems() {
+    const next = new Set(
+      enabled.value ? content.value?.querySelectorAll<HTMLElement>('[data-hn-data-list-item]') : [],
+    )
+    for (const element of elements) if (!next.has(element)) observer?.unobserve(element)
+    for (const element of next) {
+      if (!elements.has(element)) observer?.observe(element)
+    }
+    elements = next
+    measureRows()
+  }
+  async function geometry() {
+    const element = content.value
+    if (!enabled.value || !element) return
+    const computedStyle = element.ownerDocument.defaultView!.getComputedStyle(element)
+    const nextColumns =
+      props.layout === 'grid'
+        ? Math.max(1, computedStyle.gridTemplateColumns.split(' ').filter(Boolean).length)
+        : 1
+    const nextGap = parseFloat(computedStyle.rowGap) || 0
+    const nextMargin = parseFloat(computedStyle.paddingBlockStart) || 0
+    if (nextColumns !== columns.value || nextGap !== gap.value || nextMargin !== margin.value) {
+      const version = ++geometryVersion
+      const index = (virtualizer.value.range?.startIndex ?? 0) * columns.value
+      const atStart = !viewport.value?.scrollTop
+      columns.value = nextColumns
+      gap.value = nextGap
+      margin.value = nextMargin
+      virtualizer.value.measure()
+      await nextTick()
+      if (version !== geometryVersion) return
+      observeItems()
+      if (!atStart) scrollToIndex(props.entries[index]?.index ?? 0, { align: 'start' })
+    }
+  }
+  function scrollToIndex(index: number, options: VirtualListScrollOptions = {}) {
+    if (!Number.isFinite(index) || !props.entries.length) return
+    const position = Math.max(
+      0,
+      Math.min(props.entries.length - 1, Math.trunc(index) - props.entries[0]!.index),
+    )
+    const action = () => {
+      if (enabled.value)
+        virtualizer.value.scrollToIndex(Math.floor(position / columns.value), {
+          ...options,
+          behavior: prefersReducedMotion() ? 'auto' : options.behavior,
+        })
+      else {
+        const element = content.value?.querySelectorAll<HTMLElement>('[data-hn-data-list-item]')[
+          position
+        ]
+        if (element)
+          scrollDataListItem(element, viewport.value, {
+            ...options,
+            behavior: prefersReducedMotion() ? 'auto' : options.behavior,
+          })
+      }
+    }
+    if (
+      ((props.options.virtualize || props.options.height !== undefined) && !viewport.value) ||
+      (enabled.value && virtualizer.value.scrollElement !== viewport.value)
+    )
+      pending = action
+    else action()
+  }
+  function updateFocus() {
+    const active = content.value?.ownerDocument.activeElement
+    const row =
+      active instanceof Element ? active.closest<HTMLElement>('[data-hn-data-list-item]') : null
+    focused.value =
+      row && content.value?.contains(row)
+        ? props.entries.find(entry => entry.index === Number(row.dataset.index))?.key
+        : undefined
+  }
+  function focusOut() {
+    void nextTick(updateFocus)
+  }
+  onMounted(() => {
+    observer = new ResizeObserver(measureRows)
+    observeItems()
+    void geometry()
+  })
+  onScopeDispose(() => {
+    observer?.disconnect()
+    geometryVersion++
+    pending = undefined
+  })
+  useResizeObserver(content, () => {
+    void geometry()
+  })
+  watch(
+    [rendered, viewport],
+    () => {
+      observeItems()
+      if (
+        viewport.value &&
+        (!enabled.value || virtualizer.value.scrollElement === viewport.value)
+      ) {
+        pending?.()
+        pending = undefined
+      }
+    },
+    { flush: 'post' },
+  )
+  watch(
+    () => [props.layout, props.options.gridMin, props.options.gridGap, props.options.virtualize],
+    () => {
+      void geometry()
+    },
+    { flush: 'post' },
+  )
+  watch(
+    () => [props.entries[0]?.index, props.options.pagination],
+    ([index], previous) => {
+      if (
+        props.options.pagination &&
+        index !== undefined &&
+        previous?.[0] !== undefined &&
+        index !== previous[0]
+      )
+        viewport.value?.scrollTo({ top: 0, behavior: 'instant' })
+    },
+    { flush: 'post' },
+  )
+  watch(
+    () => {
+      if (!enabled.value) return [-1, -1]
+      const range = virtualizer.value.calculateRange()
+      return [
+        props.entries[(range?.startIndex ?? 0) * columns.value]?.index ?? -1,
+        props.entries[
+          Math.min(props.entries.length - 1, ((range?.endIndex ?? 0) + 1) * columns.value - 1)
+        ]?.index ?? -1,
+      ]
+    },
+    ([startIndex, endIndex], previous) => {
+      if (startIndex !== previous?.[0] || endIndex !== previous?.[1])
+        onRange({ startIndex: startIndex!, endIndex: endIndex! })
+    },
+    { immediate: true, flush: 'post' },
+  )
+  return { rendered, style, before, after, scrollToIndex, updateFocus, focusOut }
+}

package/src/components/data-list/data-list.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/data-list'

package/src/components/data-list/types.ts

@@ -0,0 +1,80 @@
+import type { VirtualListRange, VirtualListScrollOptions } from '../virtual-list/types'
+import type { DataListContentVariants, DataListItemVariants } from './data-list.variants'
+
+export type DataListKey = string | number
+export type DataListLayout = 'list' | 'grid'
+export type DataListKeyField<T> = {
+  [K in keyof T]-?: T[K] extends DataListKey ? K : never
+}[keyof T] &
+  string
+export type DataListTextField<T> =
+  | ({
+      [K in keyof T]-?: T[K] extends string | number | null | undefined ? K : never
+    }[keyof T] &
+      string)
+  | ((item: T, index: number) => string | number | null | undefined)
+export interface DataListPageChange {
+  page: number
+  pageSize: number
+}
+export interface DataListItemSlot<T> {
+  item: T
+  index: number
+  key: DataListKey
+  layout: DataListLayout
+}
+export interface DataListPlaceholderSlot {
+  index: number
+  layout: DataListLayout
+}
+export interface DataListState<T> extends DataListPageChange {
+  items: readonly T[]
+  total: number | undefined
+  pageCount: number | undefined
+  layout: DataListLayout
+  loading: boolean
+  refreshing: boolean
+  hasPreviousPage: boolean
+  hasNextPage: boolean
+  setPage: (page: number) => void
+  setPageSize: (pageSize: number) => void
+  setLayout: (layout: DataListLayout) => void
+}
+export interface DataListVirtualOptions {
+  estimateSize?: number
+  overscan?: number
+  initialColumns?: number
+}
+export interface DataListProps<T> {
+  items: readonly T[]
+  itemKey: DataListKeyField<T> | ((item: T, index: number) => DataListKey)
+  itemTitle?: DataListTextField<T>
+  itemDescription?: DataListTextField<T>
+  mediaRatio?: number
+  layout?: DataListLayout
+  layoutToggle?: boolean
+  gridMin?: string
+  gridGap?: DataListContentVariants['gap']
+  size?: DataListItemVariants['size']
+  divided?: boolean
+  pagination?: boolean
+  manual?: boolean
+  total?: number
+  hasNextPage?: boolean
+  loading?: boolean
+  placeholderCount?: number
+  emptyText?: string
+  label?: string
+  virtualize?: boolean | DataListVirtualOptions
+  height?: string | number
+  minHeight?: string | number
+  class?: string
+  bodyClass?: string
+  contentClass?: string
+  itemClass?: string | ((item: T, index: number) => string | undefined)
+}
+export interface DataListExpose {
+  viewport: HTMLElement | undefined
+  scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void
+}
+export type DataListRange = VirtualListRange

package/src/components/data-list/utils/scroll.ts

@@ -0,0 +1,26 @@
+import type { VirtualListScrollOptions } from '../../virtual-list/types'
+
+export function scrollDataListItem(
+  element: HTMLElement,
+  viewport: HTMLElement | undefined,
+  { align = 'auto', behavior }: VirtualListScrollOptions,
+) {
+  if (!viewport) {
+    element.scrollIntoView({ block: align === 'auto' ? 'nearest' : align, behavior })
+    return
+  }
+  const rect = element.getBoundingClientRect()
+  const start =
+    rect.top - viewport.getBoundingClientRect().top - viewport.clientTop + viewport.scrollTop
+  const end = start + rect.height - viewport.clientHeight
+  const nearest = Math.min(Math.max(viewport.scrollTop, Math.min(start, end)), Math.max(start, end))
+  const offset =
+    align === 'start'
+      ? start
+      : align === 'end'
+        ? end
+        : align === 'center'
+          ? (start + end) / 2
+          : nearest
+  viewport.scrollTo({ top: offset, behavior })
+}

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

@@ -192,12 +192,12 @@
           <caption v-if="props.caption">
             <span>{{ props.caption }}</span>
           </caption>
-          <colgroup>
+          <colgroup :style="layout.columnStyles.value">
             <col v-for="control in controls" :key="control" style="width: 48px" />
             <col
               v-for="column in ctl.visibleColumns.value"
               :key="column.key"
-              :style="{ width: layout.cellStyle(column).width }"
+              :style="layout.columnStyle(column)"
             />
             <col v-if="trailing" style="width: 72px" />
           </colgroup>

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

@@ -68,7 +68,13 @@
       v-if="item.detail"
       :colspan="colspan"
     >
-      <p v-if="item.error" :id="editing.errorId" role="alert" class="hn-table-edit-message">
+      <p
+        v-if="item.error"
+        :id="editing.errorId"
+        :style="layout.errorStyle.value"
+        role="alert"
+        class="hn-table-edit-message"
+      >
         <CircleAlert aria-hidden="true" />
         {{ item.error }}
       </p>