@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Form.vue

@@ -0,0 +1,227 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
+
+const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
+
+const form = tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) })
+
+export interface FormProps<T extends object> {
+  id?: string | number
+  schema?: FormSchema<T>
+  state: Partial<T>
+  validate?: (state: Partial<T>) => Promise<FormError[]>
+  validateOn?: FormInputEvents[]
+  disabled?: boolean
+  validateOnInputDelay?: number
+  class?: any
+}
+
+export interface FormEmits<T extends object> {
+  (e: 'submit', payload: FormSubmitEvent<T>): void
+  (e: 'error', payload: FormErrorEvent): void
+}
+
+export interface FormSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script lang="ts" setup generic="T extends object">
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
+import { useEventBus } from '@vueuse/core'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
+import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
+import { FormValidationException } from '../types/form'
+
+const props = withDefaults(defineProps<FormProps<T>>(), {
+  validateOn() {
+    return ['input', 'blur', 'change'] as FormInputEvents[]
+  },
+  validateOnInputDelay: 300
+})
+const emits = defineEmits<FormEmits<T>>()
+defineSlots<FormSlots>()
+
+const formId = props.id ?? useId() as string
+
+const bus = useEventBus<FormEvent>(`form-${formId}`)
+const parentBus = inject(
+  formBusInjectionKey,
+  undefined
+)
+provide(formBusInjectionKey, bus)
+
+const nestedForms = ref<Map<string | number, { validate: () => any }>>(new Map())
+
+onMounted(async () => {
+  bus.on(async (event) => {
+    if (event.type === 'attach') {
+      nestedForms.value.set(event.formId, { validate: event.validate })
+    } else if (event.type === 'detach') {
+      nestedForms.value.delete(event.formId)
+    } else if (props.validateOn?.includes(event.type as FormInputEvents)) {
+      await _validate({ name: event.name, silent: true, nested: false })
+    }
+  })
+})
+
+onUnmounted(() => {
+  bus.reset()
+})
+
+onMounted(async () => {
+  if (parentBus) {
+    await nextTick()
+    parentBus.emit({ type: 'attach', validate: _validate, formId })
+  }
+})
+
+onUnmounted(() => {
+  if (parentBus) {
+    parentBus.emit({ type: 'detach', formId })
+  }
+})
+
+provide(formOptionsInjectionKey, computed(() => ({
+  disabled: props.disabled,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
+
+const errors = ref<FormErrorWithId[]>([])
+provide('form-errors', errors)
+
+const inputs = ref<Record<string, string>>({})
+provide(formInputsInjectionKey, inputs)
+
+function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
+  return errs.map(err => ({
+    ...err,
+    id: inputs.value[err.name]
+  }))
+}
+
+async function getErrors(): Promise<FormErrorWithId[]> {
+  let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
+
+  if (props.schema) {
+    if (isZodSchema(props.schema)) {
+      errs = errs.concat(await getZodErrors(props.state, props.schema))
+    } else if (isYupSchema(props.schema)) {
+      errs = errs.concat(await getYupErrors(props.state, props.schema))
+    } else if (isJoiSchema(props.schema)) {
+      errs = errs.concat(await getJoiErrors(props.state, props.schema))
+    } else if (isValibotSchema(props.schema)) {
+      errs = errs.concat(await getValibotError(props.state, props.schema))
+    } else {
+      throw new Error('Form validation failed: Unsupported form schema')
+    }
+  }
+
+  return resolveErrorIds(errs)
+}
+
+async function _validate(opts: { name?: string | string[], silent?: boolean, nested?: boolean } = { silent: false, nested: true }): Promise<T | false> {
+  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name
+
+  const nestedValidatePromises = !names && opts.nested
+    ? Array.from(nestedForms.value.values()).map(
+      ({ validate }) => validate().then(() => undefined).catch((error: Error) => {
+        if (!(error instanceof FormValidationException)) {
+          throw error
+        }
+        return error
+      })
+    )
+    : []
+
+  if (names) {
+    const otherErrors = errors.value.filter(error => !names!.includes(error.name))
+    const pathErrors = (await getErrors()).filter(error => names!.includes(error.name)
+    )
+    errors.value = otherErrors.concat(pathErrors)
+  } else {
+    errors.value = await getErrors()
+  }
+
+  const childErrors = nestedValidatePromises ? await Promise.all(nestedValidatePromises) : []
+  if (errors.value.length + childErrors.length > 0) {
+    if (opts.silent) return false
+    throw new FormValidationException(formId, errors.value, childErrors)
+  }
+
+  return props.state as T
+}
+
+async function onSubmit(payload: Event) {
+  const event = payload as FormSubmitEvent<any>
+
+  try {
+    await _validate({ nested: true })
+    event.data = props.state
+    emits('submit', event)
+  } catch (error) {
+    if (!(error instanceof FormValidationException)) {
+      throw error
+    }
+
+    const errorEvent: FormErrorEvent = {
+      ...event,
+      errors: error.errors,
+      childrens: error.childrens
+    }
+
+    emits('error', errorEvent)
+  }
+}
+
+defineExpose<Form<T>>({
+  validate: _validate,
+  errors,
+
+  setErrors(errs: FormError[], name?: string) {
+    if (name) {
+      errors.value = errors.value
+        .filter(error => error.name !== name)
+        .concat(resolveErrorIds(errs))
+    } else {
+      errors.value = resolveErrorIds(errs)
+    }
+  },
+
+  async submit() {
+    await onSubmit(new Event('submit'))
+  },
+
+  getErrors(name?: string) {
+    if (name) {
+      return errors.value.filter(err => err.name === name)
+    }
+    return errors.value
+  },
+
+  clear(name?: string) {
+    if (name) {
+      errors.value = errors.value.filter(err => err.name !== name)
+    } else {
+      errors.value = []
+    }
+  },
+
+  disabled: computed(() => props.disabled)
+})
+</script>
+
+<template>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="form({ class: props.class })"
+    @submit.prevent="onSubmit"
+  >
+    <slot />
+  </component>
+</template>

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/form-field'
+
+const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
+
+const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })
+
+type FormFieldVariants = VariantProps<typeof formField>
+
+export interface FormFieldProps {
+  name?: string
+  label?: string
+  description?: string
+  help?: string
+  error?: string | boolean
+  hint?: string
+  size?: FormFieldVariants['size']
+  required?: boolean
+  eagerValidation?: boolean
+  validateOnInputDelay?: number
+  class?: any
+  ui?: Partial<typeof formField.slots>
+}
+
+export interface FormFieldSlots {
+  label(props: { label?: string }): any
+  hint(props: { hint?: string }): any
+  description(props: { description?: string }): any
+  help(props: { help?: string }): any
+  error(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, inject, provide, type Ref, useId } from 'vue'
+import { Label } from 'radix-vue'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
+
+const props = defineProps<FormFieldProps>()
+const slots = defineSlots<FormFieldSlots>()
+
+const ui = computed(() => formField({
+  size: props.size,
+  required: props.required
+}))
+
+const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
+
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name)?.message)
+
+const id = ref(useId())
+
+provide(inputIdInjectionKey, id)
+
+provide(formFieldInjectionKey, computed(() => ({
+  error: error.value,
+  name: props.name,
+  size: props.size,
+  eagerValidation: props.eagerValidation,
+  validateOnInputDelay: props.validateOnInputDelay
+}) as FormFieldInjectedOptions<FormFieldProps>))
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </Label>
+        <span v-if="hint || !!slots.hint" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="[label && ui.container({ class: props.ui?.container })]">
+      <slot :error="error" />
+
+      <p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </p>
+      <p v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export interface IconProps {
+  name: string
+  mode?: 'svg' | 'css'
+  size?: string | number
+  customize?: (
+    content: string,
+    name?: string,
+    prefix?: string,
+    provider?: string
+  ) => string
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<IconProps>()
+
+const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'customize'))
+</script>
+
+<template>
+  <Icon v-bind="iconProps" />
+</template>

package/dist/runtime/components/Input.vue

@@ -0,0 +1,180 @@
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
+
+const input = tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })
+
+type InputVariants = VariantProps<typeof input>
+
+export interface InputProps extends UseComponentIconsProps {
+  id?: string
+  name?: string
+  type?: InputHTMLAttributes['type']
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputVariants['color']
+  variant?: InputVariants['variant']
+  size?: InputVariants['size']
+  required?: boolean
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof input.slots>
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import { looseToNumber } from '../utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  autocomplete: 'off',
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputEmits>()
+const slots = defineSlots<InputSlots>()
+
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => input({
+  type: props.type as InputVariants['type'],
+  color: color.value,
+  variant: props.variant,
+  size: inputSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
+}))
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.focus()
+  }
+}
+
+// Custom function to handle the v-model properties
+function updateInput(value: string) {
+  if (modelModifiers.trim) {
+    value = value.trim()
+  }
+
+  if (modelModifiers.number || props.type === 'number') {
+    value = looseToNumber(value)
+  }
+
+  modelValue.value = value
+  emitFormInput()
+}
+
+function onInput(event: Event) {
+  if (!modelModifiers.lazy) {
+    updateInput((event.target as HTMLInputElement).value)
+  }
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy) {
+    updateInput(value)
+  }
+
+  // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
+  if (modelModifiers.trim) {
+    (event.target as HTMLInputElement).value = value.trim()
+  }
+
+  emitFormChange()
+  emits('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  inputRef
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+    >
+
+    <slot />
+
+    <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </div>
+</template>