chore: up

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -34,9 +34,10 @@ const schema = z.object({
   pin: z.string().regex(/^\d$/).array().length(5)
 })
 
-type Schema = z.input<typeof schema>
+type Input = z.input<typeof schema>
+type Output = z.output<typeof schema>
 
-const state = reactive<Partial<Schema>>({})
+const state = reactive<Partial<Input>>({})
 
 const form = useTemplateRef('form')
 
@@ -47,7 +48,7 @@ const items = [
 ]
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Output>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

src/runtime/components/Form.vue

@@ -11,8 +11,9 @@ export interface FormProps<I extends object, O extends object = I> {
   id?: string | number
   /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
   schema?: FormSchema<I, O>
+
   /** An object representing the current state of the form. */
-  state: Partial<I> | O
+  state: Partial<I>
   /**
    * Custom validation function to validate the form state.
    * @param state - The current state of the form.
@@ -172,7 +173,7 @@ async function getErrors(): Promise<FormErrorWithId[]> {
   return resolveErrorIds(errs)
 }
 
-async function _validate(opts: { name?: keyof I | (keyof I)[], silent?: boolean, nested?: boolean, transform?: boolean } = { silent: false, nested: true, transform: false }): Promise<I | false> {
+async function _validate(opts: { name?: keyof I | (keyof I)[], silent?: boolean, nested?: boolean, transform?: boolean } = { silent: false, nested: true, transform: false }): Promise<O | false> {
   const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name as (keyof I)[]
 
   const nestedValidatePromises = !names && opts.nested
@@ -213,7 +214,7 @@ async function _validate(opts: { name?: keyof I | (keyof I)[], silent?: boolean,
     Object.assign(props.state, transformedState.value)
   }
 
-  return props.state as I
+  return props.state as O
 }
 
 const loading = ref(false)
@@ -251,7 +252,7 @@ provide(formOptionsInjectionKey, computed(() => ({
   validateOnInputDelay: props.validateOnInputDelay
 })))
 
-defineExpose<Form<I>>({
+defineExpose<Form<I, O>>({
   validate: _validate,
   errors,
 

src/runtime/types/form.ts

@@ -5,26 +5,26 @@ import type { ObjectSchema as YupObjectSchema } from 'yup'
 import type { GetObjectField } from './utils'
 import type { Struct as SuperstructSchema } from 'superstruct'
 
-export interface Form<T extends object> {
-  validate (opts?: { name?: keyof T | (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean }): Promise<T | false>
+export interface Form<I extends object, O extends object = I> {
+  validate (opts?: { name?: keyof I | (keyof I)[], silent?: boolean, nested?: boolean, transform?: boolean }): Promise<O | false>
   clear (path?: string): void
   errors: Ref<FormError[]>
-  setErrors (errs: FormError[], name?: keyof T): void
-  getErrors (name?: keyof T): FormError[]
+  setErrors (errs: FormError[], name?: keyof I): void
+  getErrors (name?: keyof I): FormError[]
   submit (): Promise<void>
   disabled: ComputedRef<boolean>
   dirty: ComputedRef<boolean>
   loading: Ref<boolean>
 
-  dirtyFields: DeepReadonly<Set<keyof T>>
-  touchedFields: DeepReadonly<Set<keyof T>>
-  blurredFields: DeepReadonly<Set<keyof T>>
+  dirtyFields: DeepReadonly<Set<keyof I>>
+  touchedFields: DeepReadonly<Set<keyof I>>
+  blurredFields: DeepReadonly<Set<keyof I>>
 }
 
 export type FormSchema<I extends object, O extends object = I> =
   | YupObjectSchema<I>
   | JoiSchema<I>
-  | SuperstructSchema<I, O>
+  | SuperstructSchema<I>
   | StandardSchemaV1<I, O>
 
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus'