@hina-ui/vue 1.0.0

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

@@ -0,0 +1,108 @@
+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'
+
+export type FormValidateOn = 'submit' | 'blur' | 'change'
+
+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 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
+  })
+  const formError = computed(() => found.value[ROOT])
+  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
+  }
+
+  function touch(name: string) {
+    if (touched.value.has(name)) return
+    touched.value = new Set(touched.value).add(name)
+    if (options.validateOn() !== 'submit') void validate()
+  }
+
+  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') void validate()
+  }
+
+  async function submit(handler?: (values: FormValues) => unknown) {
+    submitted.value = true
+    const valid = await validate()
+    if (!valid || server.value.size) return false
+    submitting.value = true
+    try {
+      await handler?.(options.values())
+    } finally {
+      submitting.value = false
+    }
+    return true
+  }
+
+  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() {
+    found.value = {}
+    touched.value = new Set()
+    submitted.value = false
+    server.value = new Map()
+    initial = snapshot(options.values()) as FormValues
+  }
+
+  return {
+    errors,
+    formError,
+    invalid,
+    submitted,
+    submitting,
+    validate,
+    touch,
+    onChange,
+    submit,
+    setErrors,
+    reset,
+  }
+}

package/src/components/form/context.ts

@@ -0,0 +1,18 @@
+import { inject, provide, type ComputedRef, type InjectionKey, type Ref } from 'vue'
+import type { FormErrors } from './standard-schema'
+
+export interface FormContext {
+  errors: Ref<FormErrors>
+  disabled: ComputedRef<boolean>
+  touch: (name: string) => void
+}
+
+const FORM_KEY = Symbol('hn-form') as InjectionKey<FormContext>
+
+export function provideForm(context: FormContext) {
+  provide(FORM_KEY, context)
+}
+
+export function injectForm() {
+  return inject(FORM_KEY, null)
+}

package/src/components/form/form.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const formRoot = tv({
+  base: 'flex flex-col gap-4',
+})

package/src/components/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/src/components/form/utils/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/src/components/form/utils/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/src/components/form/utils/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
+}

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+  import { computed, ref, shallowRef, useId, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { collapseHooks } from '../../lib/collapse'
+  import { useUiLocale } from '../../locale'
+  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
+  import { injectForm } from '../form/context'
+  import { provideFormField } from './context'
+  import {
+    formFieldDescription,
+    formFieldLabel,
+    formFieldMark,
+    formFieldMessage,
+    formFieldRoot,
+  } from './form-field.variants'
+
+  defineOptions({ name: 'HnFormField' })
+
+  const props = defineProps<{
+    name?: string
+    label?: string
+    description?: string
+    error?: string
+    required?: boolean
+    disabled?: boolean
+    class?: string
+  }>()
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const form = injectForm()
+
+  const root = shallowRef<HTMLElement | null>(null)
+  const hooks = collapseHooks('y', () => root.value)
+
+  const id = useId()
+  const labelId = useId()
+  const descriptionId = useId()
+  const messageId = useId()
+  const controlId = ref(id)
+
+  const message = computed(
+    () => props.error || (props.name ? form?.errors.value[props.name] : undefined),
+  )
+  const invalid = computed(() => !!message.value)
+  const disabled = computed(() => !!props.disabled || !!form?.disabled.value)
+  const described = computed(() => !!props.description || !!slots.description)
+  const describedBy = computed(() => {
+    const ids = []
+    if (described.value) ids.push(descriptionId)
+    if (invalid.value) ids.push(messageId)
+    return ids.length ? ids.join(' ') : undefined
+  })
+
+  provideFormField({ id, labelId, controlId, name: props.name, invalid, disabled, describedBy })
+
+  function onFocusOut() {
+    if (props.name) form?.touch(props.name)
+  }
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-hn-form-field
+    :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :class="cn(formFieldRoot(), props.class)"
+    @focusout="onFocusOut"
+  >
+    <label
+      v-if="props.label || slots.label"
+      :id="labelId"
+      :for="controlId"
+      :class="formFieldLabel({ disabled })"
+    >
+      <slot name="label">{{ props.label }}</slot>
+      <span v-if="props.required" :class="formFieldMark()" aria-hidden="true">*</span>
+      <VisuallyHidden v-if="props.required">{{ t.form.required }}</VisuallyHidden>
+    </label>
+    <slot />
+    <p v-if="described" :id="descriptionId" :class="formFieldDescription()">
+      <slot name="description">{{ props.description }}</slot>
+    </p>
+    <Transition
+      enter-from-class="hn-collapse-closed"
+      enter-to-class="hn-collapse-open"
+      leave-from-class="hn-collapse-open"
+      leave-to-class="hn-collapse-closed"
+      v-on="hooks"
+    >
+      <div
+        v-if="message"
+        data-hn-form-field-message
+        class="hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
+      >
+        <div class="hn-collapse-body">
+          <p :id="messageId" :class="formFieldMessage()" aria-live="polite">{{ message }}</p>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/form-field/context.ts

@@ -0,0 +1,62 @@
+import {
+  computed,
+  inject,
+  provide,
+  useAttrs,
+  watchEffect,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+export interface FormFieldContext {
+  id: string
+  labelId: string
+  controlId: Ref<string>
+  name: string | undefined
+  invalid: ComputedRef<boolean>
+  disabled: ComputedRef<boolean>
+  describedBy: ComputedRef<string | undefined>
+}
+
+const FORM_FIELD_KEY = Symbol('hn-form-field') as InjectionKey<FormFieldContext | null>
+
+export function provideFormField(context: FormFieldContext) {
+  provide(FORM_FIELD_KEY, context)
+}
+
+export function shieldFormField() {
+  provide(FORM_FIELD_KEY, null)
+}
+
+export function injectFormField() {
+  return inject(FORM_FIELD_KEY, null)
+}
+
+interface Own {
+  invalid?: () => boolean | undefined
+  disabled?: () => boolean | undefined
+}
+
+export function useFieldControl(own: Own = {}) {
+  const attrs = useAttrs()
+  const field = injectFormField()
+  const id = computed(() => (attrs.id as string | undefined) ?? field?.id)
+  const labelledBy = computed(
+    () =>
+      (attrs['aria-labelledby'] as string | undefined) ??
+      (attrs['aria-label'] ? undefined : field?.labelId),
+  )
+  const invalid = computed(() => !!own.invalid?.() || !!field?.invalid.value)
+  const disabled = computed(() => !!own.disabled?.() || !!field?.disabled.value)
+  const describedBy = computed(() => {
+    const parts = [attrs['aria-describedby'], field?.describedBy.value].filter(Boolean)
+    return parts.length ? parts.join(' ') : undefined
+  })
+  if (field) {
+    watchEffect(() => {
+      field.controlId.value = id.value ?? field.id
+    })
+  }
+  return { field, id, labelledBy, invalid, disabled, describedBy }
+}

package/src/components/form-field/form-field.variants.ts

@@ -0,0 +1,26 @@
+import { tv } from '../../lib/tv'
+
+export const formFieldRoot = tv({
+  base: 'flex min-w-0 flex-col gap-1.5',
+})
+
+export const formFieldLabel = tv({
+  base: 'text-fg inline-flex items-center gap-1 text-sm font-medium',
+  variants: {
+    disabled: {
+      true: 'text-disabled',
+    },
+  },
+})
+
+export const formFieldMark = tv({
+  base: 'text-danger-text',
+})
+
+export const formFieldDescription = tv({
+  base: 'text-muted text-sm',
+})
+
+export const formFieldMessage = tv({
+  base: 'text-danger-text text-sm',
+})

package/src/components/form-layout/FormLayout.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useId, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { injectForm, provideForm } from '../form/context'
+  import type { FormErrors } from '../form/standard-schema'
+  import {
+    formLayoutDescription,
+    formLayoutGrid,
+    formLayoutLegend,
+    formLayoutRoot,
+    type FormLayoutVariants,
+  } from './form-layout.variants'
+
+  defineOptions({ name: 'HnFormLayout' })
+
+  const props = withDefaults(
+    defineProps<{
+      legend?: string
+      description?: string
+      columns?: FormLayoutVariants['columns']
+      disabled?: boolean
+      class?: string
+    }>(),
+    { columns: 1 },
+  )
+
+  const slots = useSlots()
+  const form = injectForm()
+  const descriptionId = useId()
+
+  const headed = computed(() => !!props.legend || !!slots.legend)
+  const described = computed(() => !!props.description || !!slots.description)
+  const disabled = computed(() => !!props.disabled || !!form?.disabled.value)
+
+  provideForm({
+    errors: form?.errors ?? shallowRef<FormErrors>({}),
+    disabled,
+    touch: form?.touch ?? (() => {}),
+  })
+</script>
+
+<template>
+  <fieldset
+    data-hn-form-layout
+    :disabled="disabled || undefined"
+    :aria-describedby="described ? descriptionId : undefined"
+    :class="cn(formLayoutRoot(), props.class)"
+  >
+    <legend v-if="headed" :class="formLayoutLegend()">
+      <slot name="legend">{{ props.legend }}</slot>
+    </legend>
+    <p v-if="described" :id="descriptionId" :class="formLayoutDescription()">
+      <slot name="description">{{ props.description }}</slot>
+    </p>
+    <div :class="formLayoutGrid({ columns: props.columns, headed: headed || described })">
+      <slot />
+    </div>
+  </fieldset>
+</template>

package/src/components/form-layout/form-layout.variants.ts

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const formLayoutRoot = tv({
+  base: 'm-0 min-w-0 border-0 p-0',
+})
+
+export const formLayoutLegend = tv({
+  base: 'text-fg p-0 text-base font-medium',
+})
+
+export const formLayoutDescription = tv({
+  base: 'text-muted mt-1 text-sm',
+})
+
+export const formLayoutGrid = tv({
+  base: 'grid gap-4',
+  variants: {
+    columns: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    },
+    headed: {
+      true: 'mt-4',
+    },
+  },
+  defaultVariants: {
+    columns: 1,
+  },
+})
+
+export type FormLayoutVariants = VariantProps<typeof formLayoutGrid>

package/src/components/grid/Grid.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { grid, type GridVariants } from './grid.variants'
+
+  defineOptions({ name: 'HnGrid' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      cols?: GridVariants['cols']
+      gap?: GridVariants['gap']
+      class?: string
+    }>(),
+    { as: 'div' },
+  )
+</script>
+
+<template>
+  <component :is="props.as" :class="cn(grid({ cols, gap }), props.class)">
+    <slot />
+  </component>
+</template>

package/src/components/grid/grid.variants.ts

@@ -0,0 +1,35 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const grid = tv({
+  base: 'grid',
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-2',
+      3: 'grid-cols-3',
+      4: 'grid-cols-4',
+      5: 'grid-cols-5',
+      6: 'grid-cols-6',
+      7: 'grid-cols-7',
+      8: 'grid-cols-8',
+      9: 'grid-cols-9',
+      10: 'grid-cols-10',
+      11: 'grid-cols-11',
+      12: 'grid-cols-12',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-x-[var(--hn-inline-gap)] gap-y-[var(--hn-stack-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+  },
+  defaultVariants: {
+    cols: 1,
+    gap: 'md',
+  },
+})
+
+export type GridVariants = VariantProps<typeof grid>

package/src/components/heading/Heading.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { heading, type HeadingVariants } from './heading.variants'
+
+  defineOptions({ name: 'HnHeading' })
+
+  const props = withDefaults(
+    defineProps<{
+      level?: 1 | 2 | 3 | 4 | 5 | 6
+      size?: HeadingVariants['size']
+      weight?: HeadingVariants['weight']
+      truncate?: boolean
+      class?: string
+    }>(),
+    { level: 2 },
+  )
+
+  const sizeByLevel = {
+    1: '2xl',
+    2: 'xl',
+    3: 'lg',
+    4: 'md',
+    5: 'base',
+    6: 'sm',
+  } as const
+
+  const tag = computed(() => `h${props.level}`)
+  const size = computed(() => props.size ?? sizeByLevel[props.level])
+</script>
+
+<template>
+  <Primitive
+    :as="tag"
+    :class="
+      cn(
+        heading({
+          size: size,
+          weight: props.weight,
+          truncate: props.truncate,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/heading/heading.variants.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const heading = tv({
+  base: 'text-fg',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+    },
+    truncate: {
+      true: 'truncate',
+    },
+  },
+  compoundVariants: [{ size: ['xl', '2xl'], class: 'tracking-tight' }],
+  defaultVariants: {
+    weight: 'semibold',
+  },
+})
+
+export type HeadingVariants = VariantProps<typeof heading>