@hina-ui/vue 1.6.0 → 1.7.1

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

@@ -0,0 +1,218 @@
+import type { CSSProperties } from 'vue'
+import type { TableVariants } from '../table/table.variants'
+
+export type DataTableKey = string | number
+export type DataTableKeyField<T> = {
+  [K in keyof T]-?: T[K] extends DataTableKey ? K : never
+}[keyof T] &
+  string
+export type DataTableAggregate = 'sum' | 'min' | 'max' | 'mean' | 'count' | 'uniqueCount'
+export type DataTableScope = 'page' | 'filtered' | 'selected' | 'all'
+export type DataTableFilterMode = 'contains' | 'equals' | 'in' | 'range'
+
+export interface DataTableColumn<T> {
+  key: string
+  label: string
+  children?: DataTableColumn<T>[]
+  field?: keyof T
+  accessor?: (row: T) => unknown
+  sortable?: boolean
+  sort?: (a: T, b: T) => number
+  filterable?: boolean
+  filter?: (row: T, query: string) => boolean
+  filterValue?: (row: T, value: unknown) => boolean
+  filterMode?: DataTableFilterMode
+  format?: (value: unknown, row: T) => string | number
+  align?: 'start' | 'center' | 'end'
+  width?: number | string
+  minWidth?: number | string
+  maxWidth?: number | string
+  pin?: 'start' | 'end'
+  truncate?: boolean
+  resizable?: boolean
+  reorderable?: boolean
+  aggregate?: DataTableAggregate | ((rows: T[]) => unknown)
+  footer?: boolean | string | ((rows: T[]) => string | number)
+  editable?: boolean | ((row: T) => boolean)
+  parse?: (value: unknown, row: T) => unknown
+  validate?: (value: unknown, row: T) => string | undefined | Promise<string | undefined>
+  exportable?: boolean
+  exportValue?: (row: T) => unknown
+  headerClass?: string
+  cellClass?: string | ((row: T) => string | undefined)
+}
+export interface DataTableSort {
+  key: string
+  desc: boolean
+}
+export interface DataTableFilter {
+  key: string
+  value: unknown
+}
+export interface DataTableQuery {
+  page: number
+  pageSize: number
+  sorting: DataTableSort[]
+  filter: string
+  columnFilters: DataTableFilter[]
+  grouping: string[]
+}
+export interface DataTableEdit<T> {
+  key: DataTableKey
+  row: T
+  values: Record<string, unknown>
+  column?: string
+}
+export interface DataTableReorder<T> {
+  row: T
+  target: T
+  parent?: T
+  from: number
+  to: number
+  rows: T[]
+}
+export interface DataTableExportOptions {
+  scope?: DataTableScope
+  columns?: string[]
+  formatted?: boolean
+  delimiter?: ',' | ';' | '\t'
+  bom?: boolean
+  filename?: string
+}
+export interface DataTableProps<T> {
+  rows: T[]
+  columns: DataTableColumn<T>[]
+  rowKey: DataTableKeyField<T> | ((row: T) => DataTableKey)
+  rowLabel?: keyof T | ((row: T) => string)
+  selectable?: boolean | ((row: T) => boolean)
+  selectionMode?: 'single' | 'multiple'
+  selectAll?: 'page' | 'filtered'
+  selectChildren?: boolean
+  expandable?: boolean | ((row: T) => boolean)
+  getChildren?: (row: T) => T[] | undefined
+  pagination?: boolean
+  manual?: boolean
+  total?: number
+  hasNextPage?: boolean
+  autoResetPage?: boolean
+  multiSort?: boolean
+  resizable?: boolean
+  resizeMode?: 'fit' | 'expand'
+  reorderColumns?: boolean
+  reorderable?: boolean | ((row: T) => boolean)
+  virtualize?: boolean | { estimateSize?: number; overscan?: number }
+  editMode?: 'cell' | 'row'
+  onSave?: (edit: DataTableEdit<T>) => void | Promise<void>
+  loading?: boolean
+  disabled?: boolean
+  rowClickable?: boolean
+  rowClass?: (row: T) => string | undefined
+  variant?: TableVariants['variant']
+  hover?: boolean
+  stickyHeader?: boolean
+  stickyFooter?: boolean
+  height?: number | string
+  maxHeight?: number | string
+  fill?: boolean
+  layout?: 'auto' | 'fixed'
+  caption?: string
+  label?: string
+  emptyText?: string
+  class?: string
+  tableClass?: string
+}
+export interface DataTableRowContext<T> {
+  row: T
+  key: DataTableKey
+  index: number
+  depth: number
+  selected: boolean
+  indeterminate: boolean
+  selectable: boolean
+  expanded: boolean
+  expandable: boolean
+  toggleSelected: (selected?: boolean) => void
+  toggleExpanded: (expanded?: boolean) => void
+  startEdit: (column?: string) => void
+}
+export interface DataTableCellContext<T> extends DataTableRowContext<T> {
+  column: DataTableColumn<T>
+  value: unknown
+}
+export interface DataTableHeaderContext<T> {
+  column: DataTableColumn<T>
+  sorting: 'asc' | 'desc' | false
+  sortIndex: number
+  filterValue: unknown
+  toggleSort: (multi?: boolean) => void
+  setFilter: (value: unknown) => void
+}
+export interface DataTableGroupContext<T> {
+  key: string
+  column: DataTableColumn<T>
+  value: unknown
+  rows: T[]
+  depth: number
+  expanded: boolean
+  toggleExpanded: (expanded?: boolean) => void
+  aggregate: (column: string) => unknown
+}
+export interface DataTableEditorContext<T> extends DataTableCellContext<T> {
+  value: unknown
+  pending: boolean
+  error?: string
+  updateValue: (value: unknown) => void
+  commit: () => Promise<void>
+  cancel: () => void
+}
+export interface DataTableApi<T> {
+  getRows: (scope?: DataTableScope) => T[]
+  toggleSelected: (key: DataTableKey, selected?: boolean) => void
+  toggleExpanded: (key: DataTableKey, expanded?: boolean) => void
+  setFilter: (column: string, value: unknown) => void
+  setColumnHidden: (column: string, hidden: boolean) => void
+  setColumnWidth: (column: string, width: number) => void
+  moveColumn: (column: string, target: string) => void
+  moveRow: (key: DataTableKey, target: DataTableKey) => void
+  startEdit: (key: DataTableKey, column?: string) => void
+  cancelEdit: () => void
+  commitEdit: () => Promise<void>
+  scrollToRow: (key: DataTableKey) => void
+  toCsv: (options?: DataTableExportOptions) => string
+  exportCsv: (options?: DataTableExportOptions) => void
+}
+export interface DataTableState<T> extends DataTableQuery {
+  total: number
+  rows: T[]
+  selected: DataTableKey[]
+  expanded: DataTableKey[]
+  visibleColumns: DataTableColumn<T>[]
+  api: DataTableApi<T>
+}
+export type DataTableSlots<T> = {
+  toolbar?(state: DataTableState<T>): unknown
+  footer?(state: DataTableState<T>): unknown
+  empty?(): unknown
+  loading?(): unknown
+  header?(context: DataTableHeaderContext<T>): unknown
+  cell?(context: DataTableCellContext<T>): unknown
+  editor?(context: DataTableEditorContext<T>): unknown
+  expansion?(context: DataTableRowContext<T>): unknown
+  group?(context: DataTableGroupContext<T>): unknown
+  summary?(context: DataTableState<T>): unknown
+} & { [K in `cell-${string}`]?: (context: DataTableCellContext<T>) => unknown } & {
+  [K in `header-${string}`]?: (context: DataTableHeaderContext<T>) => unknown
+} & { [K in `editor-${string}`]?: (context: DataTableEditorContext<T>) => unknown } & {
+  [K in `footer-${string}`]?: (context: { column: DataTableColumn<T>; rows: T[] }) => unknown
+}
+
+export interface DataTableHeader<T> extends DataTableHeaderContext<T> {
+  id: string
+  colspan: number
+  rowspan: number
+  leaf: boolean
+  top: number
+  style: CSSProperties
+  ariaSort?: 'ascending' | 'descending'
+  nextLabel: string
+}

package/src/components/data-table/utils.ts

@@ -0,0 +1,75 @@
+import type { DataTableColumn, DataTableFilterMode, DataTableKey } from './types'
+
+export function rowId(key: DataTableKey) {
+  return `${typeof key}:${key}`
+}
+
+export function rowKey(id: string): DataTableKey {
+  return id.startsWith('number:') ? Number(id.slice(7)) : id.slice(7)
+}
+
+export function positiveInteger(value: number, fallback: number) {
+  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback
+}
+
+export function cssSize(value: number | string | undefined) {
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+export function isRowAction(event: MouseEvent | KeyboardEvent) {
+  const target = event.target as HTMLElement | null
+  if (!target || event.defaultPrevented) return false
+  if (event.type === 'keydown') return target === event.currentTarget
+  const control = target.closest(
+    'a, button, input, select, textarea, label, [role="button"], [role="checkbox"], [role="switch"], [contenteditable]:not([contenteditable="false"]), [tabindex]',
+  )
+  return !control || control === event.currentTarget
+}
+
+export function flattenColumns<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {
+  return columns.flatMap(column =>
+    column.children?.length ? flattenColumns(column.children) : [column],
+  )
+}
+export function filterValue(
+  value: unknown,
+  filter: unknown,
+  mode: DataTableFilterMode = 'contains',
+  locale = 'en',
+) {
+  if (mode === 'equals') return Object.is(value, filter)
+  if (mode === 'in') return Array.isArray(filter) && filter.some(item => Object.is(item, value))
+  if (mode === 'range') {
+    if (!Array.isArray(filter)) return true
+    const numeric = value instanceof Date ? value.getTime() : Number(value)
+    const bound = (value: unknown) => (value instanceof Date ? value.getTime() : Number(value))
+    return (
+      value != null &&
+      Number.isFinite(numeric) &&
+      (filter[0] == null || numeric >= bound(filter[0])) &&
+      (filter[1] == null || numeric <= bound(filter[1]))
+    )
+  }
+  return String(value ?? '')
+    .toLocaleLowerCase(locale)
+    .includes(String(filter ?? '').toLocaleLowerCase(locale))
+}
+export function aggregate<T>(
+  rows: T[],
+  column: DataTableColumn<T>,
+  valueOf: (row: T, column: DataTableColumn<T>) => unknown,
+) {
+  if (typeof column.aggregate === 'function') return column.aggregate(rows)
+  if (!column.aggregate) return undefined
+  if (column.aggregate === 'count') return rows.length
+  const values = rows.map(row => valueOf(row, column))
+  if (column.aggregate === 'uniqueCount') return new Set(values).size
+  const numbers = values.filter(
+    (value): value is number => typeof value === 'number' && Number.isFinite(value),
+  )
+  if (!numbers.length) return column.aggregate === 'sum' ? 0 : undefined
+  if (column.aggregate === 'min') return numbers.reduce((a, b) => Math.min(a, b))
+  if (column.aggregate === 'max') return numbers.reduce((a, b) => Math.max(a, b))
+  const sum = numbers.reduce((a, b) => a + b, 0)
+  return column.aggregate === 'mean' ? sum / numbers.length : sum
+}

package/src/components/form/composables/useForm.ts

@@ -22,6 +22,9 @@ export function useForm(options: Options) {
   const submitted = ref(false)
   const submitting = ref(false)
   const server = shallowRef(new Map<string, ServerError>())
+  let pending: { values: FormValues; rules: FormRules | undefined } | undefined
+  let validation = 0
+  let submission = 0
   let initial = snapshot(options.values()) as FormValues
 
   function shown(key: string) {
@@ -42,14 +45,33 @@ export function useForm(options: Options) {
   const invalid = computed(() => Object.keys(errors.value).length > 0 || !!formError.value)
 
   async function validate() {
-    found.value = await runRules(options.rules(), options.values())
-    return Object.keys(found.value).length === 0
+    const version = ++validation
+    const values = snapshot(options.values()) as FormValues
+    const rules = options.rules()
+    const request = { values, rules }
+    pending = request
+    try {
+      const result = await runRules(rules, values)
+      if (version !== validation || rules !== options.rules() || !same(values, options.values())) {
+        return false
+      }
+      found.value = result
+      return Object.keys(result).length === 0
+    } finally {
+      if (pending === request) pending = undefined
+    }
+  }
+
+  function revalidate() {
+    if (pending && pending.rules === options.rules() && same(pending.values, options.values()))
+      return
+    void validate()
   }
 
   function touch(name: string) {
     if (touched.value.has(name)) return
     touched.value = new Set(touched.value).add(name)
-    if (options.validateOn() !== 'submit') void validate()
+    if (options.validateOn() !== 'submit') revalidate()
   }
 
   function onChange() {
@@ -59,20 +81,30 @@ export function useForm(options: Options) {
       for (const [key, entry] of next) if (readPath(values, key) !== entry.value) next.delete(key)
       if (next.size !== server.value.size) server.value = next
     }
-    if (submitted.value || options.validateOn() !== 'submit') void validate()
+    if (submitted.value || options.validateOn() !== 'submit') revalidate()
   }
 
   async function submit(handler?: (values: FormValues) => unknown) {
+    if (submitting.value) return false
+    const version = ++submission
+    const values = snapshot(options.values()) as FormValues
     submitted.value = true
-    const valid = await validate()
-    if (!valid || server.value.size) return false
     submitting.value = true
     try {
+      const valid = await validate()
+      if (
+        !valid ||
+        version !== submission ||
+        server.value.size ||
+        !same(values, options.values())
+      ) {
+        return false
+      }
       await handler?.(options.values())
+      return true
     } finally {
-      submitting.value = false
+      if (version === submission) submitting.value = false
     }
-    return true
   }
 
   function setErrors(next: FormErrors) {
@@ -85,6 +117,10 @@ export function useForm(options: Options) {
   }
 
   function reset() {
+    validation++
+    submission++
+    pending = undefined
+    submitting.value = false
     found.value = {}
     touched.value = new Set()
     submitted.value = false

package/src/components/sidebar/DrawerScope.ts

@@ -1,15 +1,23 @@
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, ref, type PropType } from 'vue'
 import { provideSidebar, type SidebarState } from './context'
 
 export default defineComponent({
   name: 'HnSidebarDrawerScope',
-  setup(_, { slots }) {
+  props: {
+    close: { type: Function as PropType<() => void>, required: true },
+  },
+  setup(props, { slots }) {
     provideSidebar({
       state: ref<SidebarState>('expanded'),
-      toggle: () => {},
+      toggle: () => props.close(),
       openMobile: () => {},
       inDrawer: true,
     })
-    return () => h('div', { class: 'contents' }, slots.default?.())
+    return () =>
+      h(
+        'div',
+        { class: 'flex min-h-0 flex-1 flex-col overflow-hidden px-(--hn-panel-p)' },
+        slots.default?.(),
+      )
   },
 })

package/src/components/sidebar/Sidebar.vue

@@ -2,6 +2,7 @@
   import { computed } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
+  import CloseButton from '../close-button/CloseButton.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { useSidebar, type SidebarState } from './context'
   import SidebarLabel from './SidebarLabel.vue'
@@ -15,10 +16,14 @@
 
   defineOptions({ name: 'HnSidebar' })
 
-  const props = defineProps<{
-    label?: string
-    class?: string
-  }>()
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      closable?: boolean
+      class?: string
+    }>(),
+    { closable: true },
+  )
 
   defineSlots<{
     default?(): unknown
@@ -39,9 +44,13 @@
     :data-state="state"
     :inert="state === 'hidden'"
     :class="cn(sidebarRoot({ inDrawer }), props.class)"
+    @transitionrun="sidebar?.onTransitionRun"
   >
-    <div v-if="$slots.header" :class="sidebarRegion({ inDrawer })">
-      <slot name="header" :state="state" />
+    <div v-if="$slots.header" :class="cn(sidebarRegion({ inDrawer }), 'flex items-center gap-2')">
+      <div class="min-w-0 flex-1">
+        <slot name="header" :state="state" />
+      </div>
+      <CloseButton v-if="inDrawer && props.closable" class="shrink-0" @click="sidebar?.toggle()" />
     </div>
     <div
       v-else-if="$slots.icon || $slots.wordmark"
@@ -58,11 +67,22 @@
             <SidebarLabel v-if="$slots.wordmark" as="div" :class="sidebarWordmark()">
               <slot name="wordmark" :state="state" />
             </SidebarLabel>
+            <CloseButton
+              v-if="inDrawer && props.closable"
+              class="ms-auto shrink-0"
+              @click="sidebar?.toggle()"
+            />
           </div>
         </div>
       </div>
     </div>
-    <ScrollArea class="min-h-0 flex-1">
+    <div
+      v-else-if="inDrawer && props.closable"
+      :class="cn(sidebarRegion({ inDrawer }), 'flex justify-end')"
+    >
+      <CloseButton @click="sidebar?.toggle()" />
+    </div>
+    <ScrollArea :shadow="false" class="min-h-0 flex-1">
       <nav
         :aria-label="props.label ?? t.sidebar.navLabel"
         :class="cn('flex flex-col gap-1 py-2', !inDrawer && 'px-2.5')"

package/src/components/sidebar/context.ts

@@ -7,6 +7,7 @@ export interface SidebarContext {
   toggle: () => void
   openMobile: () => void
   inDrawer?: boolean
+  onTransitionRun?: (event: TransitionEvent) => void
 }
 
 const SIDEBAR_KEY = Symbol('hn-sidebar') as InjectionKey<SidebarContext>

package/src/components/sidebar/sidebar.variants.ts

@@ -15,7 +15,7 @@ export const sidebarRegion = tv({
   base: 'shrink-0 py-3',
   variants: {
     inDrawer: { true: 'w-full', false: 'w-[calc(16rem-1px)] px-3' },
-    footer: { true: 'border-line border-t' },
+    footer: { true: 'border-line w-full border-t' },
   },
 })
 

package/src/components/table/TableHead.vue

@@ -6,7 +6,7 @@
 
   const props = withDefaults(
     defineProps<{
-      scope?: 'col' | 'row'
+      scope?: 'col' | 'row' | 'colgroup' | 'rowgroup'
       align?: TableCellVariants['align']
       sticky?: boolean
       class?: string

package/src/index.ts

@@ -209,7 +209,7 @@ export { default as PageAside } from './components/page/PageAside.vue'
 export { default as Section } from './components/section/Section.vue'
 export { default as Highlight } from './components/highlight/Highlight.vue'
 export { default as Anchor } from './components/anchor/Anchor.vue'
-export type { AnchorItem } from './components/anchor/Anchor.vue'
+export type { AnchorItem } from './components/anchor/types'
 export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb.vue'
 export { default as BreadcrumbItem } from './components/breadcrumb/BreadcrumbItem.vue'
 export { default as BreadcrumbSeparator } from './components/breadcrumb/BreadcrumbSeparator.vue'
@@ -265,3 +265,28 @@ export type {
   ScrollRestorer,
   ScrollRestorerPorts,
 } from './components/scroll-area/scroll-restore'
+
+export { default as DataTable } from './components/data-table/DataTable.vue'
+export type {
+  DataTableColumn,
+  DataTableKey,
+  DataTableAggregate,
+  DataTableApi,
+  DataTableEdit,
+  DataTableEditorContext,
+  DataTableExportOptions,
+  DataTableFilter,
+  DataTableFilterMode,
+  DataTableGroupContext,
+  DataTableReorder,
+  DataTableScope,
+  DataTableKeyField,
+  DataTableSort,
+  DataTableQuery,
+  DataTableState,
+  DataTableRowContext,
+  DataTableCellContext,
+  DataTableHeaderContext,
+  DataTableProps,
+  DataTableSlots,
+} from './components/data-table/types'

package/src/locale/en-US.ts

@@ -35,6 +35,19 @@ export const enUS: UiMessages = {
     totalLabel: n => `${n} items`,
   },
   table: {
+    edit: 'Edit',
+    save: 'Save',
+    cancel: 'Cancel',
+    editFailed: 'Could not save. Try again.',
+    selectPage: 'Select current page',
+    selectFiltered: 'Select filtered rows',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    moveRow: 'Move row',
+    moveColumn: 'Move column',
+    resizeColumn: 'Resize column',
+
+    noColumns: 'No visible columns',
     empty: 'No data',
     loading: 'Loading',
     sortAsc: 'Sort ascending',

package/src/locale/types.ts

@@ -32,6 +32,19 @@ export interface UiMessages {
     totalLabel: (n: number) => string
   }
   table: {
+    edit: string
+    save: string
+    cancel: string
+    editFailed: string
+    selectPage: string
+    selectFiltered: string
+    expand: string
+    collapse: string
+    moveRow: string
+    moveColumn: string
+    resizeColumn: string
+
+    noColumns: string
     empty: string
     loading: string
     sortAsc: string

package/src/locale/zh-CN.ts

@@ -35,6 +35,19 @@ export const zhCN: UiMessages = {
     totalLabel: n => `共 ${n} 条`,
   },
   table: {
+    edit: '编辑',
+    save: '保存',
+    cancel: '取消',
+    editFailed: '保存失败，请重试',
+    selectPage: '选择当前页',
+    selectFiltered: '选择筛选结果',
+    expand: '展开',
+    collapse: '收起',
+    moveRow: '移动行',
+    moveColumn: '移动列',
+    resizeColumn: '调整列宽',
+
+    noColumns: '没有可见列',
     empty: '暂无数据',
     loading: '加载中',
     sortAsc: '升序排列',