@hina-ui/vue 1.7.5 → 1.7.6

package/dist/shared/primitives/number-field/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/number-field/index.ts

@@ -0,0 +1,407 @@
+import { NumberFormatter, NumberParser } from '@internationalized/number'
+
+export type NumberFieldStep = 'increase' | 'decrease'
+export type NumberFieldBound = 'min' | 'max'
+export type NumberFieldInputMode = 'decimal' | 'numeric'
+
+export interface NumberFieldRange {
+  min?: number
+  max?: number
+  step: number
+  stepSnapping: boolean
+}
+
+export interface NumberFieldFormat {
+  formatter: NumberFormatter
+  parser: NumberParser
+}
+
+export const NUMBER_FIELD_DEFAULT_LOCALE = 'en'
+export const NUMBER_FIELD_PAGE_STEPS = 10
+export const NUMBER_FIELD_HOLD_DELAY = 400
+export const NUMBER_FIELD_HOLD_INTERVAL = 60
+
+export function clamp(
+  value: number,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function roundToStepPrecision(value: number, step: number) {
+  let rounded = value
+  const text = step.toString()
+  const point = text.indexOf('.')
+  const precision = point >= 0 ? text.length - point : 0
+  if (precision > 0) {
+    const pow = 10 ** precision
+    rounded = Math.round(rounded * pow) / pow
+  }
+  return rounded
+}
+
+export function snapValueToStep(
+  value: number,
+  minValue: number | undefined,
+  maxValue: number | undefined,
+  step: number,
+) {
+  const min = Number(minValue)
+  const max = Number(maxValue)
+  const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step
+  let snapped = roundToStepPrecision(
+    Math.abs(remainder) * 2 >= step
+      ? value + Math.sign(remainder) * (step - Math.abs(remainder))
+      : value - remainder,
+    step,
+  )
+  if (!Number.isNaN(min)) {
+    if (snapped < min) snapped = min
+    else if (!Number.isNaN(max) && snapped > max)
+      snapped = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step
+  } else if (!Number.isNaN(max) && snapped > max)
+    snapped = Math.floor(roundToStepPrecision(max / step, step)) * step
+  return roundToStepPrecision(snapped, step)
+}
+
+export function handleDecimalOperation(operator: '-' | '+', left: number, right: number) {
+  let result = operator === '+' ? left + right : left - right
+  if (left % 1 !== 0 || right % 1 !== 0) {
+    const leftDecimals = left.toString().split('.')[1]?.length ?? 0
+    const rightDecimals = right.toString().split('.')[1]?.length ?? 0
+    const multiplier = 10 ** Math.max(leftDecimals, rightDecimals)
+    const a = Math.round(left * multiplier)
+    const b = Math.round(right * multiplier)
+    result = (operator === '+' ? a + b : a - b) / multiplier
+  }
+  return result
+}
+
+export function isNullish(value: unknown): value is null | undefined {
+  return value === null || value === undefined
+}
+
+function isNumber(value: number | null | undefined): value is number {
+  return !isNullish(value) && !Number.isNaN(value)
+}
+
+export function resolveNumberFieldLocale(locale?: string, inherited?: string) {
+  return locale || inherited || NUMBER_FIELD_DEFAULT_LOCALE
+}
+
+export function createNumberFieldFormat(
+  locale: string,
+  options?: Intl.NumberFormatOptions,
+): NumberFieldFormat {
+  return {
+    formatter: new NumberFormatter(locale, options),
+    parser: new NumberParser(locale, options),
+  }
+}
+
+export function numberFieldInputMode(format: NumberFieldFormat): NumberFieldInputMode {
+  return format.formatter.resolvedOptions().maximumFractionDigits! > 0 ? 'decimal' : 'numeric'
+}
+
+export function formatNumberFieldValue(
+  value: number | null | undefined,
+  format: NumberFieldFormat,
+) {
+  return isNumber(value) ? format.formatter.format(value) : ''
+}
+
+export function clampNumberFieldValue(
+  value: number,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+) {
+  const { min, max, step, stepSnapping } = range
+  const clamped =
+    Number.isNaN(step) || !stepSnapping
+      ? clamp(value, min, max)
+      : snapValueToStep(value, min, max, step)
+  return format.parser.parse(format.formatter.format(clamped))
+}
+
+export function nextNumberFieldValue(
+  direction: NumberFieldStep,
+  from: number,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+  multiplier = 1,
+) {
+  const { step } = range
+  const operator = direction === 'increase' ? '+' : '-'
+  let next: number
+  if (range.stepSnapping && !Number.isNaN(step)) {
+    const snapped = snapValueToStep(from, range.min, range.max, step)
+    if (snapped === from) next = handleDecimalOperation(operator, from, step * multiplier)
+    else {
+      const aligned =
+        direction === 'increase'
+          ? snapped > from
+            ? snapped
+            : handleDecimalOperation('+', snapped, step)
+          : snapped < from
+            ? snapped
+            : handleDecimalOperation('-', snapped, step)
+      next =
+        multiplier > 1
+          ? handleDecimalOperation(operator, aligned, step * (multiplier - 1))
+          : aligned
+    }
+  } else next = handleDecimalOperation(operator, from, step * multiplier)
+  return clampNumberFieldValue(next, range, format)
+}
+
+export function isNumberFieldAtLimit(
+  direction: NumberFieldStep,
+  value: number | null | undefined,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+) {
+  if (!isNumber(value)) return false
+  const next = nextNumberFieldValue(direction, value, range, format)
+  return direction === 'increase' ? next <= value : next >= value
+}
+
+export function stepNumberFieldText(
+  direction: NumberFieldStep,
+  text: string,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+  multiplier = 1,
+) {
+  const current = format.parser.parse(text)
+  if (Number.isNaN(current)) return clampNumberFieldValue(range.min ?? 0, range, format)
+  return nextNumberFieldValue(direction, current, range, format, multiplier)
+}
+
+export function boundNumberFieldValue(
+  bound: NumberFieldBound,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+) {
+  const target = bound === 'min' ? range.min : range.max
+  return target === undefined ? undefined : clampNumberFieldValue(target, range, format)
+}
+
+export interface NumberFieldCommit {
+  value: number | undefined
+  reformat: boolean
+}
+
+export function commitNumberFieldText(
+  text: string,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+): NumberFieldCommit {
+  const parsed = format.parser.parse(text)
+  return {
+    value: Number.isNaN(parsed) ? undefined : clampNumberFieldValue(parsed, range, format),
+    reformat: text.length > 0,
+  }
+}
+
+export interface NumberFieldBeforeInput {
+  isComposing: boolean
+  inputType: string
+  data: string | null
+}
+
+export interface NumberFieldTextSelection {
+  value: string
+  selectionStart: number | null
+  selectionEnd: number | null
+}
+
+export function rejectsNumberFieldInput(
+  event: NumberFieldBeforeInput,
+  input: NumberFieldTextSelection,
+  range: NumberFieldRange,
+  format: NumberFieldFormat,
+) {
+  if (event.isComposing) return false
+  if (event.inputType.startsWith('delete') || event.inputType.startsWith('history')) return false
+  const next =
+    input.value.slice(0, input.selectionStart ?? undefined) +
+    (event.data ?? '') +
+    input.value.slice(input.selectionEnd ?? undefined)
+  return !format.parser.isValidPartialNumber(next, range.min, range.max)
+}
+
+export type NumberFieldKeyAction =
+  | { type: 'step'; direction: NumberFieldStep; multiplier: number; prevent: true }
+  | { type: 'bound'; bound: NumberFieldBound; prevent: true }
+  | { type: 'commit'; prevent: false }
+
+export function numberFieldKeyAction(
+  event: { key: string; isComposing: boolean },
+  composing: boolean,
+): NumberFieldKeyAction | undefined {
+  if (composing || event.isComposing) return undefined
+  switch (event.key) {
+    case 'ArrowUp':
+      return { type: 'step', direction: 'increase', multiplier: 1, prevent: true }
+    case 'ArrowDown':
+      return { type: 'step', direction: 'decrease', multiplier: 1, prevent: true }
+    case 'PageUp':
+      return {
+        type: 'step',
+        direction: 'increase',
+        multiplier: NUMBER_FIELD_PAGE_STEPS,
+        prevent: true,
+      }
+    case 'PageDown':
+      return {
+        type: 'step',
+        direction: 'decrease',
+        multiplier: NUMBER_FIELD_PAGE_STEPS,
+        prevent: true,
+      }
+    case 'Home':
+      return { type: 'bound', bound: 'min', prevent: true }
+    case 'End':
+      return { type: 'bound', bound: 'max', prevent: true }
+    case 'Enter':
+      return { type: 'commit', prevent: false }
+    default:
+      return undefined
+  }
+}
+
+export interface NumberFieldWheelState {
+  focused: boolean
+  disabled: boolean
+  inverted: boolean
+}
+
+export function numberFieldWheelStep(
+  event: { deltaX: number; deltaY: number },
+  state: NumberFieldWheelState,
+): NumberFieldStep | undefined {
+  if (state.disabled || !state.focused) return undefined
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return undefined
+  const down = event.deltaY > 0
+  return down !== state.inverted ? 'increase' : 'decrease'
+}
+
+export function deepActiveElement(root: Pick<DocumentOrShadowRoot, 'activeElement'>) {
+  let active = root.activeElement
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement
+  return active
+}
+
+export interface NumberFieldTimers {
+  setTimeout: (callback: () => void, delay: number) => unknown
+  clearTimeout: (handle: unknown) => void
+}
+
+export interface NumberFieldPressHoldOptions {
+  timers: NumberFieldTimers
+  disabled: () => boolean
+  trigger: () => void
+  pressed: (pressed: boolean) => void
+}
+
+export interface NumberFieldPress {
+  button: number
+  preventDefault: () => void
+}
+
+export function createNumberFieldPressHold(options: NumberFieldPressHoldOptions) {
+  let handle: unknown
+  let pressed = false
+  const reset = () => options.timers.clearTimeout(handle)
+  const repeat = (delay: number) => {
+    reset()
+    if (options.disabled()) return
+    options.trigger()
+    handle = options.timers.setTimeout(() => repeat(NUMBER_FIELD_HOLD_INTERVAL), delay)
+  }
+  return {
+    press(event: NumberFieldPress) {
+      if (event.button !== 0 || pressed) return
+      event.preventDefault()
+      pressed = true
+      options.pressed(true)
+      repeat(NUMBER_FIELD_HOLD_DELAY)
+    },
+    release() {
+      pressed = false
+      options.pressed(false)
+      reset()
+    },
+    dispose: reset,
+  }
+}
+
+export function numberFieldRootAttributes(state: { disabled: boolean; readonly: boolean }) {
+  return {
+    role: 'group',
+    'data-disabled': state.disabled ? '' : undefined,
+    'data-readonly': state.readonly ? '' : undefined,
+  } as const
+}
+
+export interface NumberFieldInputState {
+  id: string | undefined
+  value: string
+  inputMode: NumberFieldInputMode
+  disabled: boolean
+  readonly: boolean
+  modelValue: number | null | undefined
+  min: number | undefined
+  max: number | undefined
+}
+
+export function numberFieldInputAttributes(state: NumberFieldInputState) {
+  return {
+    id: state.id,
+    value: state.value,
+    role: 'spinbutton',
+    type: 'text',
+    tabindex: '0',
+    inputmode: state.inputMode,
+    disabled: state.disabled ? '' : undefined,
+    'data-disabled': state.disabled ? '' : undefined,
+    readonly: state.readonly ? '' : undefined,
+    'data-readonly': state.readonly ? '' : undefined,
+    autocomplete: 'off',
+    autocorrect: 'off',
+    spellcheck: 'false',
+    'aria-roledescription': 'Number field',
+    'aria-valuenow': state.modelValue,
+    'aria-valuemin': state.min,
+    'aria-valuemax': state.max,
+  } as const
+}
+
+export function isNumberFieldStepDisabled(state: {
+  disabled: boolean
+  readonly: boolean
+  own: boolean
+  atLimit: boolean
+}) {
+  return state.disabled || state.readonly || state.own || state.atLimit
+}
+
+export interface NumberFieldStepState {
+  direction: NumberFieldStep
+  button: boolean
+  disabled: boolean
+  pressed: boolean
+}
+
+export function numberFieldStepAttributes(state: NumberFieldStepState) {
+  return {
+    tabindex: '-1',
+    'aria-label': state.direction === 'increase' ? 'Increase' : 'Decrease',
+    type: state.button ? 'button' : undefined,
+    style: { userSelect: state.pressed ? 'none' : undefined },
+    disabled: state.disabled ? '' : undefined,
+    'data-disabled': state.disabled ? '' : undefined,
+    'data-pressed': state.pressed ? 'true' : undefined,
+  } as const
+}

package/dist/shared/styles/semantic.css

@@ -155,9 +155,17 @@
   --hn-skeleton-wave: rgb(255 255 255 / 0.04);
 }
 
+:where(:root) {
+  --hn-font-sans: var(--hn-font-latin), var(--hn-font-cjk), ui-sans-serif, system-ui, sans-serif;
+}
+
+:where(:root:lang(zh)) {
+  --hn-font-sans: var(--hn-font-cjk), var(--hn-font-latin), ui-sans-serif, system-ui, sans-serif;
+}
+
 :root {
-  --hn-font-sans:
-    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
+  --hn-font-latin: 'Noto Sans';
+  --hn-font-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei';
   --hn-font-mono:
     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans SC', 'PingFang SC',
     'Microsoft YaHei', monospace;

package/dist/shared/types/autocomplete.ts

@@ -0,0 +1,16 @@
+import type { CompletionContext, CompletionEdit } from '../lib/completion'
+
+export type { CompletionContext, CompletionEdit } from '../lib/completion'
+
+export interface AutocompleteOption {
+  value: string | number
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface AutocompleteSelection<T extends AutocompleteOption = AutocompleteOption> {
+  option: T
+  context: CompletionContext
+  edit: CompletionEdit
+}

package/dist/shared/types/data-table.ts

@@ -0,0 +1,170 @@
+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 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 DataTableCellStyle = {
+  position?: 'sticky'
+  insetInlineStart?: string
+  insetInlineEnd?: string
+  zIndex?: number
+  backgroundColor?: string
+  boxShadow?: string
+  width?: string
+  minWidth?: string
+  maxWidth?: string
+  paddingInline?: string
+  textAlign?: 'center'
+  top?: string | number
+}
+export interface DataTableHeaderCell<T, S = DataTableCellStyle> extends DataTableHeaderContext<T> {
+  id: string
+  colspan: number
+  rowspan: number
+  leaf: boolean
+  top: number
+  style: S
+  ariaSort?: 'ascending' | 'descending'
+  nextLabel: string
+}

package/dist/shared/types/pagination.ts

@@ -0,0 +1,19 @@
+export interface PaginationChange {
+  page: number
+  pageSize: number
+}
+
+export interface PaginationState extends PaginationChange {
+  total: number
+  pageCount: number
+  from: number
+  to: number
+}
+
+export type PaginationEntry = { type: 'page'; value: number } | { type: 'ellipsis' }
+export type PaginationSide = 'prev' | 'next'
+export interface PaginationRange {
+  side: PaginationSide
+  from: number
+  to: number
+}

package/dist/shared/types/select.ts

@@ -0,0 +1,23 @@
+export type SelectOption<T extends object = object> = {
+  value: string | number
+  label: string
+  description?: string
+  disabled?: boolean
+} & T
+
+export interface SelectOptionGroup<T extends SelectOption = SelectOption> {
+  label: string
+  options: T[]
+}
+
+export type SelectItems<T extends SelectOption = SelectOption> = Array<T | SelectOptionGroup<T>>
+
+export function isOptionGroup<T extends SelectOption>(
+  item: T | SelectOptionGroup<T>,
+): item is SelectOptionGroup<T> {
+  return !('value' in item) && 'options' in item
+}
+
+export function flattenOptions<T extends SelectOption>(items: SelectItems<T>): T[] {
+  return items.flatMap(item => (isOptionGroup(item) ? item.options : [item]))
+}