@hina-ui/vue 1.7.4 → 1.7.6

package/dist/shared/lib/data-table/state.ts

@@ -0,0 +1,226 @@
+import type { UiMessages } from '../../locale/types'
+import type {
+  DataTableColumn,
+  DataTableFilter,
+  DataTableKey,
+  DataTableSort,
+} from '../../types/data-table'
+import { rowId, rowKey } from './utils'
+
+export interface DataTableEngineModels {
+  sorting: DataTableSort[]
+  filter: string
+  columnFilters: DataTableFilter[]
+  grouping: string[]
+  selected: DataTableKey[]
+  expanded: DataTableKey[]
+  expandedGroups: string[]
+  hiddenColumns: string[]
+}
+
+export interface DataTableSelectionRow<T> {
+  id: string
+  original: T
+  getCanSelect: () => boolean
+  getIsSelected: () => boolean
+  getIsSomeSelected: () => boolean
+  getLeafRows: () => DataTableSelectionRow<T>[]
+}
+
+export function keyOf<T>(row: T, field: keyof T | ((row: T) => DataTableKey)): DataTableKey {
+  return typeof field === 'function' ? field(row) : (row[field] as DataTableKey)
+}
+
+export function labelOf<T>(
+  row: T,
+  label: keyof T | ((row: T) => string) | undefined,
+  key: (row: T) => DataTableKey,
+) {
+  return String(
+    typeof label === 'function' ? label(row) : label === undefined ? key(row) : row[label],
+  )
+}
+
+export function valueOf<T>(row: T, column: DataTableColumn<T>) {
+  return column.accessor ? column.accessor(row) : row[column.field ?? (column.key as keyof T)]
+}
+
+export function displayValue<T>(row: T, column: DataTableColumn<T>) {
+  const value = valueOf(row, column)
+  return column.format ? column.format(value, row) : value == null ? '—' : String(value)
+}
+
+export function compareValues(left: unknown, right: unknown, collator: Intl.Collator) {
+  if (typeof left === 'number' && typeof right === 'number') return left - right
+  if (left instanceof Date && right instanceof Date) return left.getTime() - right.getTime()
+  return collator.compare(String(left), String(right))
+}
+
+export function engineSorting(sorting: DataTableSort[]) {
+  return sorting.map(sort => ({ id: sort.key, desc: sort.desc }))
+}
+
+export function modelSorting(sorting: { id: string; desc: boolean }[]): DataTableSort[] {
+  return sorting.map(sort => ({ key: sort.id, desc: sort.desc }))
+}
+
+export function engineSelection(selected: DataTableKey[]) {
+  return Object.fromEntries(selected.map(key => [rowId(key), true as const]))
+}
+
+export function modelSelection(selection: Record<string, boolean>) {
+  return Object.keys(selection)
+    .filter(key => selection[key])
+    .map(rowKey)
+}
+
+export function engineColumnFilters<T>(leaves: DataTableColumn<T>[], filters: DataTableFilter[]) {
+  return filters
+    .filter(filter => leaves.some(column => column.key === filter.key))
+    .map(filter => ({ id: filter.key, value: filter.value }))
+}
+
+export function engineGrouping<T>(leaves: DataTableColumn<T>[], grouping: string[]) {
+  return grouping.filter(key => leaves.some(column => column.key === key))
+}
+
+export function engineExpanded(expanded: DataTableKey[], groups: string[]) {
+  return Object.fromEntries([...expanded.map(rowId), ...groups].map(key => [key, true]))
+}
+
+export function engineVisibility(hidden: string[]) {
+  return Object.fromEntries(hidden.map(key => [key, false]))
+}
+
+export function engineState<T>(
+  leaves: DataTableColumn<T>[],
+  models: DataTableEngineModels,
+  page: number,
+  pageSize: number,
+) {
+  return {
+    sorting: engineSorting(models.sorting),
+    globalFilter: models.filter.trim(),
+    columnFilters: engineColumnFilters(leaves, models.columnFilters),
+    grouping: engineGrouping(leaves, models.grouping),
+    expanded: engineExpanded(models.expanded, models.expandedGroups),
+    pagination: { pageIndex: page - 1, pageSize },
+    rowSelection: engineSelection(models.selected),
+    columnVisibility: engineVisibility(models.hiddenColumns),
+  }
+}
+
+export function orderColumns<T>(leaves: DataTableColumn<T>[], hidden: string[], order: string[]) {
+  const visible = leaves.filter(column => !hidden.includes(column.key))
+  const ranking = [...new Set([...order, ...visible.map(column => column.key)])]
+  return visible.sort((a, b) => {
+    const rank = (column: DataTableColumn<T>) =>
+      column.pin === 'start' ? 0 : column.pin === 'end' ? 2 : 1
+    return rank(a) - rank(b) || ranking.indexOf(a.key) - ranking.indexOf(b.key)
+  })
+}
+
+export function toggleKey<K>(list: K[], key: K, next: boolean) {
+  return next ? [...new Set([...list, key])] : list.filter(item => item !== key)
+}
+
+export function nextColumnFilters(filters: DataTableFilter[], column: string, value: unknown) {
+  const next = filters.filter(filter => filter.key !== column)
+  if (value != null && value !== '' && !(Array.isArray(value) && !value.length))
+    next.push({ key: column, value })
+  return next
+}
+
+export function totalRows(
+  manual: boolean | undefined,
+  total: number | undefined,
+  supplied: number,
+  processed: () => number,
+) {
+  return manual ? Math.max(0, Math.floor(Number.isFinite(total) ? total! : supplied)) : processed()
+}
+
+export function pageCount(total: number, pageSize: number) {
+  return Math.max(1, Math.ceil(total / pageSize))
+}
+
+export function canGoNext(
+  knownTotal: boolean,
+  page: number,
+  count: number,
+  hasNextPage: boolean | undefined,
+  rows: number,
+  pageSize: number,
+) {
+  return knownTotal ? page < count : (hasNextPage ?? rows >= pageSize)
+}
+
+export function clampedPage(
+  pagination: boolean | undefined,
+  loading: boolean | undefined,
+  knownTotal: boolean,
+  page: number,
+  count: number,
+) {
+  return pagination && !loading && knownTotal && page > count ? count : undefined
+}
+
+export function uniqueSelectable<R extends { id: string; getCanSelect: () => boolean }>(rows: R[]) {
+  return [...new Map(rows.filter(row => row.getCanSelect()).map(row => [row.id, row])).values()]
+}
+
+export function selectionState<R extends DataTableSelectionRow<unknown>>(eligible: R[]) {
+  if (!eligible.length) return false
+  const count = eligible.filter(row => row.getIsSelected()).length
+  return count === eligible.length
+    ? true
+    : count || eligible.some(row => row.getIsSomeSelected())
+      ? ('indeterminate' as const)
+      : false
+}
+
+export function toggleSelection<T>(
+  selected: DataTableKey[],
+  rows: DataTableSelectionRow<T>[],
+  value: boolean | 'indeterminate',
+  cascade: boolean,
+  key: (row: T) => DataTableKey,
+) {
+  const keys = new Set(selected)
+  for (const row of rows) {
+    const descendants = cascade ? [row, ...row.getLeafRows()] : [row]
+    for (const item of descendants)
+      if (item.getCanSelect()) {
+        if (value === true) keys.add(key(item.original))
+        else keys.delete(key(item.original))
+      }
+  }
+  return [...keys]
+}
+
+export function sortLabel(next: string | false | undefined, messages: UiMessages['table']) {
+  return next === 'asc' ? messages.sortAsc : next === 'desc' ? messages.sortDesc : messages.sortNone
+}
+
+export function ariaSort(sorting: 'asc' | 'desc' | false) {
+  return sorting
+    ? sorting === 'asc'
+      ? ('ascending' as const)
+      : ('descending' as const)
+    : undefined
+}
+
+export function tableQuery(
+  page: number,
+  pageSize: number,
+  models: Pick<DataTableEngineModels, 'sorting' | 'filter' | 'columnFilters' | 'grouping'>,
+) {
+  return {
+    page,
+    pageSize,
+    sorting: models.sorting.map(sort => ({ ...sort })),
+    filter: models.filter,
+    columnFilters: models.columnFilters.map(filter => ({ ...filter })),
+    grouping: [...models.grouping],
+  }
+}

package/dist/shared/lib/data-table/utils.ts

@@ -0,0 +1,80 @@
+import type { DataTableColumn, DataTableFilterMode, DataTableKey } from '../../types/data-table'
+
+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 type DataTableActionEvent = Pick<
+  Event,
+  'target' | 'currentTarget' | 'defaultPrevented' | 'type'
+>
+
+export function isRowAction(event: DataTableActionEvent) {
+  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/dist/shared/lib/date-range-field/validity.ts

@@ -0,0 +1,21 @@
+import type { DateValue } from '@internationalized/date'
+
+interface Bounds {
+  min?: DateValue
+  max?: DateValue
+}
+
+interface Parts {
+  start?: DateValue
+  end?: DateValue
+}
+
+function outside(value: DateValue | undefined, { min, max }: Bounds) {
+  if (!value) return false
+  return (!!min && value.compare(min) < 0) || (!!max && value.compare(max) > 0)
+}
+
+export function isRangeInvalid({ start, end }: Parts, bounds: Bounds) {
+  if (outside(start, bounds) || outside(end, bounds)) return true
+  return !!start && !!end && start.compare(end) > 0
+}

package/dist/shared/lib/date.ts

@@ -0,0 +1,111 @@
+import {
+  CalendarDate,
+  CalendarDateTime,
+  Time,
+  parseDate,
+  parseDateTime,
+  parseTime,
+  type DateValue,
+} from '@internationalized/date'
+
+export type DateGranularity = 'day' | 'hour' | 'minute' | 'second'
+export type TimeGranularity = 'hour' | 'minute' | 'second'
+
+const TIME_LENGTH: Record<TimeGranularity, number> = {
+  hour: 'HH:mm'.length,
+  minute: 'HH:mm'.length,
+  second: 'HH:mm:ss'.length,
+}
+
+export function parseTimeValue(value: string | null | undefined): Time | undefined {
+  if (!value) return undefined
+  try {
+    return parseTime(value)
+  } catch {
+    return undefined
+  }
+}
+
+export function formatTimeValue(
+  value: { hour: number; minute: number; second: number },
+  granularity: TimeGranularity = 'minute',
+): string {
+  return new Time(value.hour, value.minute, value.second)
+    .toString()
+    .slice(0, TIME_LENGTH[granularity])
+}
+
+export function splitDateTime(value: string | null | undefined) {
+  if (!value) return { date: null, time: null }
+  const [date, time] = value.split('T')
+  return { date: date || null, time: time || null }
+}
+
+export function joinDateTime(date: string | null, time: string | null) {
+  return date && time ? `${date}T${time}` : null
+}
+
+export interface DateRangeValue {
+  start: string | null
+  end: string | null
+}
+
+interface DateRangeParts {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}
+
+const LENGTH: Record<DateGranularity, number> = {
+  day: 'YYYY-MM-DD'.length,
+  hour: 'YYYY-MM-DDTHH:mm'.length,
+  minute: 'YYYY-MM-DDTHH:mm'.length,
+  second: 'YYYY-MM-DDTHH:mm:ss'.length,
+}
+
+export function parseDateValue(
+  value: string | null | undefined,
+  granularity: DateGranularity = 'day',
+): DateValue | undefined {
+  if (!value) return undefined
+  try {
+    if (granularity === 'day') return parseDate(value.slice(0, LENGTH.day))
+    return value.includes('T')
+      ? parseDateTime(value)
+      : parseDate(value).toDate('UTC')
+        ? toDateTime(parseDate(value))
+        : undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function formatDateValue(value: DateValue, granularity: DateGranularity = 'day'): string {
+  if (granularity === 'day') return new CalendarDate(value.year, value.month, value.day).toString()
+  const time = value instanceof CalendarDateTime ? value : toDateTime(value)
+  return time.toString().slice(0, LENGTH[granularity])
+}
+
+export function parseDateRange(
+  value: DateRangeValue | null | undefined,
+  granularity: DateGranularity = 'day',
+): DateRangeParts {
+  return {
+    start: parseDateValue(value?.start, granularity),
+    end: parseDateValue(value?.end, granularity),
+  }
+}
+
+export function formatDateRange(
+  value: DateRangeParts,
+  granularity: DateGranularity = 'day',
+): DateRangeValue | null {
+  if (!value.start && !value.end) return null
+  return {
+    start: value.start ? formatDateValue(value.start, granularity) : null,
+    end: value.end ? formatDateValue(value.end, granularity) : null,
+  }
+}
+
+function toDateTime(value: DateValue) {
+  return new CalendarDateTime(value.year, value.month, value.day)
+}

package/dist/shared/lib/field-focus.ts

@@ -0,0 +1,36 @@
+const INTERACTIVE = 'button, a, input, textarea, select, [contenteditable], [role="button"]'
+const CONTROL = 'input:not([type="hidden"]), textarea'
+
+function controlOf(node: Element) {
+  const control = node.matches(CONTROL) ? node : node.querySelector(CONTROL)
+  return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement
+    ? control
+    : null
+}
+
+export function focusFieldFrom(root: HTMLElement, target: HTMLElement) {
+  if (target.closest(INTERACTIVE)) return null
+  const segments = Array.from(root.children)
+  const from = segments.findIndex(segment => segment.contains(target))
+  const own = from >= 0 ? controlOf(segments[from]!) : null
+  if (own && !own.disabled) {
+    own.focus()
+    return own
+  }
+  const after = segments.slice(from + 1)
+  const before = segments.slice(0, Math.max(from, 0)).reverse()
+  for (const [list, caret] of [
+    [after, 'start'],
+    [before, 'end'],
+  ] as const) {
+    for (const segment of list) {
+      const control = controlOf(segment)
+      if (!control || control.disabled) continue
+      control.focus()
+      const at = caret === 'start' ? 0 : control.value.length
+      control.setSelectionRange(at, at)
+      return control
+    }
+  }
+  return null
+}

package/dist/shared/lib/file-upload/select.ts

@@ -0,0 +1,58 @@
+export type FileUploadReason = 'type' | 'size' | 'count'
+
+export interface FileUploadRejection {
+  file: File
+  reason: FileUploadReason
+}
+
+interface Rules {
+  accept?: string
+  maxSize?: number
+  maxFiles?: number
+  multiple?: boolean
+}
+
+function matchesAccept(file: File, accept: string | undefined) {
+  if (!accept) return true
+  const name = file.name.toLowerCase()
+  const type = file.type.toLowerCase()
+  return accept
+    .split(',')
+    .map(rule => rule.trim().toLowerCase())
+    .filter(Boolean)
+    .some(rule => {
+      if (rule.startsWith('.')) return name.endsWith(rule)
+      if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1))
+      return type === rule
+    })
+}
+
+function sameFile(a: File, b: File) {
+  return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified
+}
+
+export function selectFiles(current: File[], incoming: File[], rules: Rules) {
+  const rejected: FileUploadRejection[] = []
+  const next = rules.multiple ? [...current] : current.slice(0, 1)
+  for (const file of incoming) {
+    if (!matchesAccept(file, rules.accept)) {
+      rejected.push({ file, reason: 'type' })
+      continue
+    }
+    if (rules.maxSize !== undefined && file.size > rules.maxSize) {
+      rejected.push({ file, reason: 'size' })
+      continue
+    }
+    if (next.some(existing => sameFile(existing, file))) continue
+    if (!rules.multiple) {
+      next.splice(0, next.length, file)
+      continue
+    }
+    if (rules.maxFiles !== undefined && next.length >= rules.maxFiles) {
+      rejected.push({ file, reason: 'count' })
+      continue
+    }
+    next.push(file)
+  }
+  return { next, rejected }
+}

package/dist/shared/lib/file-upload/size.ts

@@ -0,0 +1,16 @@
+const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte'] as const
+
+export function formatSize(tag: string, bytes: number) {
+  let value = bytes
+  let index = 0
+  while (value >= 1024 && index < UNITS.length - 1) {
+    value /= 1024
+    index += 1
+  }
+  return new Intl.NumberFormat(tag, {
+    style: 'unit',
+    unit: UNITS[index],
+    unitDisplay: 'narrow',
+    maximumFractionDigits: index === 0 ? 0 : 1,
+  }).format(value)
+}

package/dist/shared/lib/form/errors.ts

@@ -0,0 +1,48 @@
+import {
+  isStandardSchema,
+  type FormErrors,
+  type FormRules,
+  type FormValues,
+  type StandardSchemaIssue,
+} from './standard-schema'
+
+export const ROOT = ''
+
+export function issueKey(issue: StandardSchemaIssue) {
+  return (issue.path ?? [])
+    .map(part => String(typeof part === 'object' && part !== null ? part.key : part))
+    .join('.')
+}
+
+export function issuesToErrors(issues: ReadonlyArray<StandardSchemaIssue>): FormErrors {
+  const errors: FormErrors = {}
+  for (const issue of issues) {
+    const key = issueKey(issue)
+    if (!(key in errors)) errors[key] = issue.message
+  }
+  return errors
+}
+
+export function readPath(values: FormValues, key: string): unknown {
+  return key
+    .split('.')
+    .reduce<unknown>(
+      (current, part) =>
+        current && typeof current === 'object'
+          ? (current as Record<string, unknown>)[part]
+          : undefined,
+      values,
+    )
+}
+
+export async function runRules(
+  rules: FormRules | undefined,
+  values: FormValues,
+): Promise<FormErrors> {
+  if (!rules) return {}
+  if (isStandardSchema(rules)) {
+    const result = await rules['~standard'].validate(values)
+    return result.issues ? issuesToErrors(result.issues) : {}
+  }
+  return await rules(values)
+}

package/dist/shared/lib/form/focus.ts

@@ -0,0 +1,10 @@
+const FOCUSABLE = 'input,select,textarea,button,[tabindex],[contenteditable="true"]'
+
+export function focusFirstInvalid(root: HTMLElement) {
+  const invalid = root.querySelector<HTMLElement>('[aria-invalid="true"]')
+  if (!invalid) return
+  const target = invalid.matches(FOCUSABLE)
+    ? invalid
+    : invalid.querySelector<HTMLElement>(FOCUSABLE)
+  target?.focus()
+}

package/dist/shared/lib/form/standard-schema.ts

@@ -0,0 +1,26 @@
+export interface StandardSchemaIssue {
+  message: string
+  path?: ReadonlyArray<PropertyKey | { key: PropertyKey }>
+}
+
+export interface StandardSchemaResult {
+  value?: unknown
+  issues?: ReadonlyArray<StandardSchemaIssue>
+}
+
+export interface StandardSchema {
+  '~standard': {
+    version: 1
+    vendor: string
+    validate: (value: unknown) => StandardSchemaResult | Promise<StandardSchemaResult>
+  }
+}
+
+export type FormValues = Record<string, unknown>
+export type FormErrors = Record<string, string>
+export type FormValidator = (values: FormValues) => FormErrors | Promise<FormErrors>
+export type FormRules = StandardSchema | FormValidator
+
+export function isStandardSchema(rules: FormRules): rules is StandardSchema {
+  return typeof rules === 'object' && rules !== null && '~standard' in rules
+}

package/dist/shared/lib/form/values.ts

@@ -0,0 +1,23 @@
+function isPlain(value: unknown): value is Record<string, unknown> {
+  return Object.prototype.toString.call(value) === '[object Object]'
+}
+
+export function snapshot(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(snapshot)
+  if (isPlain(value)) {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshot(item)]))
+  }
+  return value
+}
+
+export function same(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((item, index) => same(item, b[index]))
+  }
+  if (isPlain(a) && isPlain(b)) {
+    const keys = Object.keys(a)
+    return keys.length === Object.keys(b).length && keys.every(key => same(a[key], b[key]))
+  }
+  return false
+}