@hina-ui/vue 1.7.5 → 1.7.6

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/float-button.variants.ts

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

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,
   }
 }

package/src/components/form/standard-schema.ts

@@ -1,26 +1 @@
-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
-}
+export * from '../../../../shared/src/lib/form/standard-schema'

package/src/components/form/utils/errors.ts

@@ -1,48 +1 @@
-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)
-}
+export * from '../../../../../shared/src/lib/form/errors'

package/src/components/form/utils/focus.ts

@@ -1,10 +1 @@
-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()
-}
+export * from '../../../../../shared/src/lib/form/focus'

package/src/components/form/utils/values.ts

@@ -1,23 +1 @@
-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
-}
+export * from '../../../../../shared/src/lib/form/values'

package/src/components/form-field/FormField.vue

@@ -39,7 +39,8 @@
   const form = injectForm()
 
   const root = shallowRef<HTMLElement | null>(null)
-  const hooks = collapseHooks('y', () => root.value)
+  const body = shallowRef<HTMLElement | null>(null)
+  const hooks = collapseHooks('y', () => body.value)
 
   const id = useId()
   const labelId = useId()
@@ -111,7 +112,7 @@
           <slot name="description">{{ props.description }}</slot>
         </p>
       </div>
-      <div data-hn-form-field-body :class="formFieldContent()">
+      <div ref="body" data-hn-form-field-body :class="formFieldContent()">
         <div
           data-hn-form-field-control
           :class="formFieldControl({ orientation: contentOrientation })"

package/src/components/lightbox/types.ts

@@ -1,14 +1 @@
-import type { ImageVariants } from '../image/image.variants'
-import type { Rect } from './utils/pose'
-
-export type LightboxSource = HTMLImageElement | Rect
-
-export interface LightboxItem {
-  id: string
-  src: string
-  preview?: string
-  previewSize?: { width: number; height: number }
-  alt: string
-  fit?: ImageVariants['fit']
-  source?: () => LightboxSource | null | undefined
-}
+export * from '../../../../shared/src/lib/lightbox/types'

package/src/components/lightbox/utils/clip.ts

@@ -1,117 +1 @@
-import type { Rect } from './pose'
-
-export interface Corner {
-  x: number
-  y: number
-}
-
-export type Corners = [Corner, Corner, Corner, Corner]
-
-function emptyCorners(): Corners {
-  return [
-    { x: 0, y: 0 },
-    { x: 0, y: 0 },
-    { x: 0, y: 0 },
-    { x: 0, y: 0 },
-  ]
-}
-
-function length(value: string, size: number): number {
-  const number = Number.parseFloat(value) || 0
-  return value.endsWith('%') ? (number * size) / 100 : number
-}
-
-function cornersOf(style: CSSStyleDeclaration, width: number, height: number): Corners {
-  const corners = [
-    style.borderTopLeftRadius,
-    style.borderTopRightRadius,
-    style.borderBottomRightRadius,
-    style.borderBottomLeftRadius,
-  ].map(value => {
-    const [x = '0', y = x] = value.split(/\s+/)
-    return { x: length(x, width), y: length(y, height) }
-  }) as Corners
-  const [tl, tr, br, bl] = corners
-  const factor = Math.min(
-    1,
-    width / (tl.x + tr.x || 1),
-    width / (bl.x + br.x || 1),
-    height / (tl.y + bl.y || 1),
-    height / (tr.y + br.y || 1),
-  )
-  return corners.map(corner => ({ x: corner.x * factor, y: corner.y * factor })) as Corners
-}
-
-function paddingBox(node: Element, style: CSSStyleDeclaration) {
-  const box = node.getBoundingClientRect()
-  const width = node instanceof HTMLElement ? node.offsetWidth : box.width
-  const height = node instanceof HTMLElement ? node.offsetHeight : box.height
-  const sx = width ? box.width / width : 1
-  const sy = height ? box.height / height : 1
-  const left = Number.parseFloat(style.borderLeftWidth) || 0
-  const right = Number.parseFloat(style.borderRightWidth) || 0
-  const top = Number.parseFloat(style.borderTopWidth) || 0
-  const bottom = Number.parseFloat(style.borderBottomWidth) || 0
-  const corners = cornersOf(style, width, height)
-  const borders = [
-    [left, top],
-    [right, top],
-    [right, bottom],
-    [left, bottom],
-  ]
-  return {
-    rect: {
-      x: box.x + left * sx,
-      y: box.y + top * sy,
-      width: Math.max(0, box.width - (left + right) * sx),
-      height: Math.max(0, box.height - (top + bottom) * sy),
-    },
-    corners: corners.map((corner, index) => ({
-      x: Math.max(0, corner.x - borders[index]![0]!) * sx,
-      y: Math.max(0, corner.y - borders[index]![1]!) * sy,
-    })) as Corners,
-  }
-}
-
-function points(rect: Rect) {
-  return [
-    [rect.x, rect.y],
-    [rect.x + rect.width, rect.y],
-    [rect.x + rect.width, rect.y + rect.height],
-    [rect.x, rect.y + rect.height],
-  ]
-}
-
-export function clipOf(el: Element | null | undefined, box: Rect) {
-  let rect = { x: box.x, y: box.y, width: box.width, height: box.height }
-  const clips: ReturnType<typeof paddingBox>[] = []
-  for (let node = el; node; node = node.parentElement) {
-    const style = getComputedStyle(node)
-    const clipX = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowX)
-    const clipY = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowY)
-    if (!clipX && !clipY) continue
-    const clip = paddingBox(node, style)
-    const x = clipX ? Math.max(rect.x, clip.rect.x) : rect.x
-    const y = clipY ? Math.max(rect.y, clip.rect.y) : rect.y
-    const right = clipX
-      ? Math.min(rect.x + rect.width, clip.rect.x + clip.rect.width)
-      : rect.x + rect.width
-    const bottom = clipY
-      ? Math.min(rect.y + rect.height, clip.rect.y + clip.rect.height)
-      : rect.y + rect.height
-    rect = { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
-    if (clipX && clipY) clips.push(clip)
-  }
-  const corners = emptyCorners()
-  const visible = points(rect)
-  for (const clip of clips) {
-    const edges = points(clip.rect)
-    for (let index = 0; index < 4; index += 1) {
-      if (visible[index]!.some((value, axis) => Math.abs(value - edges[index]![axis]!) > 0.5))
-        continue
-      corners[index]!.x = Math.max(corners[index]!.x, clip.corners[index]!.x)
-      corners[index]!.y = Math.max(corners[index]!.y, clip.corners[index]!.y)
-    }
-  }
-  return { rect, corners }
-}
+export * from '../../../../../shared/src/lib/lightbox/clip'

package/src/components/lightbox/utils/download.ts

@@ -1,29 +1 @@
-export function fileNameOf(url: string, fallback = 'image'): string {
-  try {
-    const parsed = new URL(url, 'http://localhost')
-    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return fallback
-    const name = decodeURIComponent(parsed.pathname.split('/').filter(Boolean).pop() ?? '')
-    return name || fallback
-  } catch {
-    return fallback
-  }
-}
-
-export async function saveImage(url: string): Promise<'saved' | 'opened'> {
-  try {
-    const response = await fetch(url, { mode: 'cors' })
-    if (!response.ok) throw new Error(String(response.status))
-    const blob = await response.blob()
-    const href = URL.createObjectURL(blob)
-    const anchor = Object.assign(document.createElement('a'), {
-      href,
-      download: fileNameOf(url),
-    })
-    anchor.click()
-    setTimeout(() => URL.revokeObjectURL(href), 0)
-    return 'saved'
-  } catch {
-    window.open(url, '_blank', 'noopener')
-    return 'opened'
-  }
-}
+export * from '../../../../../shared/src/lib/lightbox/download'

package/src/components/lightbox/utils/gesture.ts

@@ -1,54 +1 @@
-import type { Point } from './zoom'
-
-export interface Touch extends Point {
-  time: number
-}
-
-export const DRAG_THRESHOLD = 4
-export const TAP_MAX_DISTANCE = 10
-export const TAP_MAX_MS = 300
-export const DOUBLE_TAP_MS = 300
-export const DOUBLE_TAP_DISTANCE = 25
-export const WHEEL_LINE = 16
-export const TRACKPAD_INTENSITY = 0.01
-
-export const FLING = {
-  power: 0.8,
-  timeConstant: 750,
-  bounceStiffness: 200,
-  bounceDamping: 40,
-  restDelta: 1,
-  restSpeed: 10,
-} as const
-
-export function midpoint(a: Point, b: Point): Point {
-  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
-}
-
-export function distance(a: Point, b: Point): number {
-  return Math.hypot(b.x - a.x, b.y - a.y)
-}
-
-export function dragAxis(start: Point, current: Point): 'x' | 'y' | null {
-  const dx = Math.abs(current.x - start.x)
-  const dy = Math.abs(current.y - start.y)
-  if (Math.max(dx, dy) < DRAG_THRESHOLD) return null
-  return dx > dy ? 'x' : 'y'
-}
-
-export function isTap(start: Touch, end: Touch): boolean {
-  return distance(start, end) <= TAP_MAX_DISTANCE && end.time - start.time <= TAP_MAX_MS
-}
-
-export function isDoubleTap(previous: Touch | null, next: Touch): boolean {
-  if (!previous) return false
-  return (
-    next.time - previous.time <= DOUBLE_TAP_MS && distance(previous, next) <= DOUBLE_TAP_DISTANCE
-  )
-}
-
-export function wheelDelta(deltaY: number, deltaMode: number, stageHeight: number): number {
-  if (deltaMode === 1) return deltaY * WHEEL_LINE
-  if (deltaMode === 2) return deltaY * stageHeight
-  return deltaY
-}
+export * from '../../../../../shared/src/lib/lightbox/gesture'

package/src/components/lightbox/utils/paging.ts

@@ -1,33 +1 @@
-import { rubberBand } from './zoom'
-
-export const PAGE_COMMIT = 0.2
-export const PAGE_VELOCITY = 400
-export const PAGE_PROJECTION = 0.25
-
-export function pageSteps(offset: number, velocity: number, width: number): number {
-  if (width <= 0) return 0
-  if (Math.abs(offset) < width * PAGE_COMMIT && Math.abs(velocity) < PAGE_VELOCITY) return 0
-  const projected = offset + velocity * PAGE_PROJECTION
-  if (projected === 0) return 0
-  return projected < 0 ? 1 : -1
-}
-
-export function clampIndex(index: number, count: number): number {
-  if (count <= 0) return 0
-  return Math.min(Math.max(index, 0), count - 1)
-}
-
-export function wrapIndex(index: number, count: number): number {
-  if (count <= 0) return 0
-  return ((index % count) + count) % count
-}
-
-export function shortestDelta(delta: number, count: number): number {
-  if (count <= 0) return 0
-  const forward = wrapIndex(delta, count)
-  return forward > count / 2 ? forward - count : forward
-}
-
-export function edgePosition(raw: number, count: number, width: number): number {
-  return rubberBand(raw, -Math.max(0, count - 1) * width, 0, width)
-}
+export * from '../../../../../shared/src/lib/lightbox/paging'