refactor(Form): rename validation functions and vars for clarity (#3029)

Co-authored-by: Benjamin Canac <[email protected]>

src/runtime/components/Form.vue

@@ -38,7 +38,7 @@ extendDevtoolsMeta({ example: 'FormExample' })
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
-import { parseSchema } from '../utils/form'
+import { validateSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
@@ -104,16 +104,17 @@ function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   }))
 }
 
-const parsedValue = ref<T | null>(null)
+const transformedState = ref<T | null>(null)
+
 async function getErrors(): Promise<FormErrorWithId[]> {
   let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
 
   if (props.schema) {
-    const { errors, result } = await parseSchema(props.state, props.schema as FormSchema<typeof props.state>)
+    const { errors, result } = await validateSchema(props.state, props.schema as FormSchema<typeof props.state>)
     if (errors) {
       errs = errs.concat(errors)
     } else {
-      parsedValue.value = result
+      transformedState.value = result
     }
   }
 
@@ -170,7 +171,7 @@ async function onSubmitWrapper(payload: Event) {
 
   try {
     await _validate({ nested: true })
-    event.data = props.schema ? parsedValue.value : props.state
+    event.data = props.schema ? transformedState.value : props.state
     await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
@@ -180,7 +181,7 @@ async function onSubmitWrapper(payload: Event) {
     const errorEvent: FormErrorEvent = {
       ...event,
       errors: error.errors,
-      childrens: error.childrens
+      children: error.children
     }
     emits('error', errorEvent)
   }

src/runtime/types/form.ts

@@ -43,7 +43,7 @@ export type FormSubmitEvent<T> = SubmitEvent & { data: T }
 
 export type FormValidationError = {
   errors: FormErrorWithId[]
-  childrens: FormValidationError[]
+  children?: FormValidationError[]
 }
 
 export type FormErrorEvent = SubmitEvent & FormValidationError
@@ -93,13 +93,13 @@ export interface ValidateReturnSchema<T> {
 export class FormValidationException extends Error {
   formId: string | number
   errors: FormErrorWithId[]
-  childrens: FormValidationException[]
+  children?: FormValidationException[]
 
   constructor(formId: string | number, errors: FormErrorWithId[], childErrors: FormValidationException[]) {
     super('Form validation exception')
     this.formId = formId
     this.errors = errors
-    this.childrens = childErrors
+    this.children = childErrors
     Object.setPrototypeOf(this, FormValidationException.prototype)
   }
 }

src/runtime/utils/form.ts

@@ -43,7 +43,7 @@ export function isStandardSchema(schema: any): schema is StandardSchemaV1 {
   return '~standard' in schema
 }
 
-export async function validateStandarSchema(
+export async function validateStandardSchema(
   state: any,
   schema: StandardSchemaV1
 ): Promise<ValidateReturnSchema<typeof state>> {
@@ -192,7 +192,7 @@ async function validateValibotSchema(
   }
 }
 
-export function parseSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>> {
+export function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>> {
   if (isZodSchema(schema)) {
     return validateZodSchema(state, schema)
   } else if (isJoiSchema(schema)) {
@@ -204,7 +204,7 @@ export function parseSchema<T extends object>(state: T, schema: FormSchema<T>):
   } else if (isSuperStructSchema(schema)) {
     return validateSuperstructSchema(state, schema)
   } else if (isStandardSchema(schema)) {
-    return validateStandarSchema(state, schema)
+    return validateStandardSchema(state, schema)
   } else {
     throw new Error('Form validation failed: Unsupported form schema')
   }

test/components/Form.spec.ts

@@ -337,7 +337,7 @@ describe('Form', () => {
       expect(wrapper.setupState.onSubmit).not.toHaveBeenCalled()
       expect(wrapper.setupState.onError).toHaveBeenCalledTimes(1)
       const onErrorCallArgs = wrapper.setupState.onError.mock.lastCall[0]
-      expect(onErrorCallArgs.childrens[0].errors).toMatchObject([{ id: 'nestedInput', name: 'field', message: 'Required' }])
+      expect(onErrorCallArgs.children[0].errors).toMatchObject([{ id: 'nestedInput', name: 'field', message: 'Required' }])
       expect(onErrorCallArgs.errors).toMatchObject([
         { id: 'emailInput', name: 'email', message: 'Required' },
         { id: 'passwordInput', name: 'password', message: 'Required' }