@hina-ui/vue 1.7.5 → 1.7.7

package/src/components/data-table/composables/useTableResizeHandles.ts

@@ -9,6 +9,10 @@ import {
 } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import type { DataTableColumn } from '../types'
+import {
+  resizeHandlePositions,
+  type DataTableHandlePosition,
+} from '../../../../../shared/src/lib/data-table/resize'
 
 export function useTableResizeHandles<T extends object>(
   element: Ref<HTMLTableElement | undefined>,
@@ -16,7 +20,7 @@ export function useTableResizeHandles<T extends object>(
   columns: Ref<DataTableColumn<T>[]>,
   enabled: () => boolean,
 ) {
-  const positions = shallowRef<Record<string, { inset: number; visible: boolean }>>({})
+  const positions = shallowRef<Record<string, DataTableHandlePosition>>({})
   let frame = 0
   let observer: ResizeObserver | undefined
   function update() {
@@ -35,26 +39,7 @@ export function useTableResizeHandles<T extends object>(
         cell.getBoundingClientRect(),
       ]),
     )
-    let left = box.left
-    let right = box.right
-    for (const column of columns.value) {
-      const rect = cells.get(column.key)
-      if (!rect || !column.pin) continue
-      if ((column.pin === 'start') !== rtl) left = Math.max(left, rect.right)
-      else right = Math.min(right, rect.left)
-    }
-    const next: typeof positions.value = {}
-    for (const column of columns.value) {
-      const rect = cells.get(column.key)
-      if (!rect) continue
-      const start = Math.max(rect.left, column.pin ? box.left : left)
-      const end = Math.min(rect.right, column.pin ? box.right : right)
-      const fromLeft = (column.pin === 'end') !== rtl
-      next[column.key] = {
-        inset: Math.max(0, (fromLeft ? start - rect.left : rect.right - end) / scale),
-        visible: end - start >= 9 * scale - 0.01,
-      }
-    }
+    const next = resizeHandlePositions(columns.value, cells, box, scale, rtl)
     if (JSON.stringify(next) !== JSON.stringify(positions.value)) positions.value = next
   }
   function schedule() {

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

@@ -1,85 +1,22 @@
 import type { VirtualizeOptions } from '../../lib/virtual/types'
 import type { CSSProperties } from 'vue'
 import type { TableVariants } from '../table/table.variants'
+import type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableEdit,
+  DataTableEditorContext,
+  DataTableGroupContext,
+  DataTableHeaderCell,
+  DataTableHeaderContext,
+  DataTableKey,
+  DataTableKeyField,
+  DataTableRowContext,
+  DataTableState,
+} from '../../../../shared/src/types/data-table'
 
-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 * from '../../../../shared/src/types/data-table'
 
-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>[]
@@ -122,74 +59,6 @@ export interface DataTableProps<T> {
   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
@@ -207,13 +76,4 @@ export type DataTableSlots<T> = {
   [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
-}
+export interface DataTableHeader<T> extends DataTableHeaderCell<T, CSSProperties> {}

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

@@ -1,75 +1 @@
-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
-}
+export * from '../../../../shared/src/lib/data-table/utils'

package/src/components/date-range-field/utils/validity.ts

@@ -1,21 +1 @@
-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
-}
+export * from '../../../../../shared/src/lib/date-range-field/validity'

package/src/components/divider/Divider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useSlots } from 'vue'
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnDivider' })

package/src/components/editable/editable.variants.ts

@@ -1 +1 @@
-export * from '@hina-ui/shared/variants/editable'
+export * from '../../../../shared/src/variants/editable'

package/src/components/file-upload/utils/select.ts

@@ -1,58 +1 @@
-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 }
-}
+export * from '../../../../../shared/src/lib/file-upload/select'

package/src/components/file-upload/utils/size.ts

@@ -1,16 +1 @@
-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)
-}
+export * from '../../../../../shared/src/lib/file-upload/size'

package/src/components/float-button/FloatButton.vue

@@ -4,6 +4,7 @@
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { floatButton } from './float-button.variants'
+  import { floatButtonOffset } from '../../../../shared/src/lib/float-button'
   import type { FloatButtonProps } from './types'
 
   defineOptions({ name: 'HnFloatButton', inheritAttrs: false })
@@ -26,15 +27,7 @@
   const tooltip = computed(() =>
     props.tooltip && !props.extended ? { content: props.label, side: props.tooltipSide } : false,
   )
-  const offset = computed(() =>
-    props.offset === undefined
-      ? undefined
-      : typeof props.offset === 'number'
-        ? Number.isFinite(props.offset)
-          ? `${Math.max(0, props.offset)}px`
-          : undefined
-        : props.offset,
-  )
+  const offset = computed(() => floatButtonOffset(props.offset))
   const element = computed(() => button.value?.$el as HTMLElement | undefined)
   function focus() {
     if (!props.disabled && !props.loading) element.value?.focus({ preventScroll: true })
@@ -52,7 +45,7 @@
   <Transition
     enter-active-class="hn-transition-base"
     enter-from-class="scale-90 opacity-0"
-    leave-active-class="hn-transition pointer-events-none"
+    leave-active-class="hn-float-button-leave"
     leave-to-class="scale-90 opacity-0"
     @before-enter="enter"
     @before-leave="leave"
@@ -87,7 +80,7 @@
           props.class,
         )
       "
-      :style="[{ '--hn-float-offset': offset }, props.style]"
+      :style="[offset, props.style]"
     >
       <template v-if="props.extended" #icon><slot /></template>
       <span v-if="props.extended" class="min-w-0 truncate">{{ props.label }}</span>

package/src/components/float-button/float-button.variants.ts

@@ -1 +1 @@
-export * from '@hina-ui/shared/variants/float-button'
+export * from '../../../../shared/src/variants/float-button'

package/src/components/float-button/types.ts

@@ -1,6 +1,7 @@
 import type { StyleValue } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
+import type { FloatButtonOffset } from '../../../../shared/src/lib/float-button'
 
 export interface FloatButtonProps {
   label: string
@@ -9,7 +10,7 @@ export interface FloatButtonProps {
   type?: 'button' | 'submit' | 'reset'
   position?: 'fixed' | 'absolute' | 'static'
   placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
-  offset?: number | string
+  offset?: FloatButtonOffset
   size?: 'sm' | 'md' | 'lg'
   shape?: 'circle' | 'square'
   extended?: boolean

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

@@ -1,144 +1,33 @@
-import { computed, ref, shallowRef } from 'vue'
-import type { FormErrors, FormRules, FormValues } from '../standard-schema'
-import { ROOT, readPath, runRules } from '../utils/errors'
-import { same, snapshot } from '../utils/values'
+import { computed, shallowRef } from 'vue'
+import { createForm, type FormOptions } from '../../../../../shared/src/behavior/form'
 
-export type FormValidateOn = 'submit' | 'blur' | 'change'
+export type { FormValidateOn } from '../../../../../shared/src/behavior/form'
 
-interface Options {
-  values: () => FormValues
-  rules: () => FormRules | undefined
-  validateOn: () => FormValidateOn
-}
-
-interface ServerError {
-  message: string
-  value: unknown
-}
-
-export function useForm(options: Options) {
-  const found = shallowRef<FormErrors>({})
-  const touched = ref(new Set<string>())
-  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) {
-    if (submitted.value || touched.value.has(key)) return true
-    const mode = options.validateOn()
-    return mode === 'change' && !same(readPath(options.values(), key), readPath(initial, key))
-  }
-
-  const errors = computed<FormErrors>(() => {
-    const result: FormErrors = {}
-    for (const [key, message] of Object.entries(found.value)) {
-      if (key !== ROOT && shown(key)) result[key] = message
-    }
-    for (const [key, entry] of server.value) result[key] = entry.message
-    return result
+export function useForm(options: FormOptions) {
+  const form = createForm(options)
+  const version = shallowRef(form.version())
+  form.subscribe(() => {
+    version.value = form.version()
   })
-  const formError = computed(() => found.value[ROOT])
-  const invalid = computed(() => Object.keys(errors.value).length > 0 || !!formError.value)
-
-  async function validate() {
-    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') revalidate()
-  }
-
-  function onChange() {
-    const values = options.values()
-    if (server.value.size) {
-      const next = new Map(server.value)
-      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') 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
-    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 {
-      if (version === submission) submitting.value = false
-    }
-  }
-
-  function setErrors(next: FormErrors) {
-    const values = options.values()
-    const map = new Map<string, ServerError>()
-    for (const [key, message] of Object.entries(next)) {
-      map.set(key, { message, value: readPath(values, key) })
-    }
-    server.value = map
-  }
 
-  function reset() {
-    validation++
-    submission++
-    pending = undefined
-    submitting.value = false
-    found.value = {}
-    touched.value = new Set()
-    submitted.value = false
-    server.value = new Map()
-    initial = snapshot(options.values()) as FormValues
+  function track<T>(read: () => T) {
+    return computed(() => {
+      void version.value
+      return read()
+    })
   }
 
   return {
-    errors,
-    formError,
-    invalid,
-    submitted,
-    submitting,
-    validate,
-    touch,
-    onChange,
-    submit,
-    setErrors,
-    reset,
+    errors: track(form.errors),
+    formError: track(form.formError),
+    invalid: track(form.invalid),
+    submitted: track(form.submitted),
+    submitting: track(form.submitting),
+    validate: form.validate,
+    touch: form.touch,
+    onChange: form.onChange,
+    submit: form.submit,
+    setErrors: form.setErrors,
+    reset: form.reset,
   }
 }