feat(comp:form): add form component (#333)

* refactor(cdk:forms): controls to reactive

fix #328

packages/cdk/forms/__tests__/abstractControl.spec.ts

@@ -1,7 +1,7 @@
 import { flushPromises } from '@vue/test-utils'
 import { Ref, ref, watch } from 'vue'
 import { AbstractControl } from '../src/controls/abstractControl'
-import { AsyncValidatorFn, ValidationErrors, ValidatorFn, ValidatorOptions } from '../src/types'
+import { AsyncValidatorFn, ValidateErrors, ValidatorFn, ValidatorOptions } from '../src/types'
 import { Validators } from '../src/validators'
 
 class Control<T = unknown> extends AbstractControl<T> {
@@ -27,7 +27,7 @@ class Control<T = unknown> extends AbstractControl<T> {
   markAsUnblurred(): void {}
   markAsDirty(): void {}
   markAsPristine(): void {}
-  async validate(): Promise<ValidationErrors | null> {
+  async validate(): Promise<ValidateErrors | null> {
     return this._validate()
   }
   private _watchEffect() {
@@ -71,21 +71,21 @@ describe('abstractControl.ts', () => {
       const { required, minLength, email } = Validators
       control.setValidator(required)
 
-      expect(await control.validate()).toEqual({ required: { message: '' } })
+      expect(await control.validate()).toEqual({ required: { message: null } })
 
       control.setValidator([email, minLength(5)])
       control.setValue('test')
 
       expect(await control.validate()).toEqual({
-        email: { message: '', actual: 'test' },
-        minLength: { message: '', minLength: 5, actual: 4 },
+        email: { message: null, actual: 'test' },
+        minLength: { message: null, minLength: 5, actual: 4 },
       })
     })
 
     test('setAsyncValidator work', async () => {
       const _asyncValidator = (key: string, error: unknown): AsyncValidatorFn => {
         return (_: unknown) => {
-          return Promise.resolve({ [key]: error } as ValidationErrors)
+          return Promise.resolve({ [key]: error } as ValidateErrors)
         }
       }
       const message1 = { message: 1 }
@@ -105,7 +105,7 @@ describe('abstractControl.ts', () => {
       expect(control.getError('required')).toBeNull()
       expect(control.hasError('required')).toEqual(false)
 
-      const errors = { required: { message: '' } }
+      const errors = { required: { message: null } }
       control.setErrors(errors)
 
       expect(control.errors.value).toEqual(errors)
@@ -200,7 +200,7 @@ describe('abstractControl.ts', () => {
     test('options work', async () => {
       control = new Control({ validators: Validators.required })
 
-      expect(await control.validate()).toEqual({ required: { message: '' } })
+      expect(await control.validate()).toEqual({ required: { message: null } })
 
       expect(control.trigger).toEqual('change')
 
@@ -210,10 +210,10 @@ describe('abstractControl.ts', () => {
     })
 
     test('validators work', async () => {
-      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidationErrors)
+      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidateErrors)
 
       control = new Control(Validators.required, _asyncValidator)
-      expect(await control.validate()).toEqual({ required: { message: '' } })
+      expect(await control.validate()).toEqual({ required: { message: null } })
 
       control.setValue('test')
       control.validate()

packages/cdk/forms/__tests__/formArray.spec.ts

@@ -2,7 +2,7 @@ import { flushPromises } from '@vue/test-utils'
 import { FormArray } from '../src/controls/formArray'
 import { FormControl } from '../src/controls/formControl'
 import { FormGroup } from '../src/controls/formGroup'
-import { ValidationErrors } from '../src/types'
+import { ValidateErrors } from '../src/types'
 import { Validators } from '../src/validators'
 
 interface BasicGroup {
@@ -35,12 +35,12 @@ describe('formArray.ts', () => {
     test('push work', async () => {
       const group = newFormGroup()
 
-      expect(array.length).toEqual(1)
+      expect(array.length.value).toEqual(1)
       expect(array.getValue()).toEqual([basicValue])
 
       array.push(group)
 
-      expect(array.length).toEqual(2)
+      expect(array.length.value).toEqual(2)
       expect(array.at(0)).not.toEqual(group)
       expect(array.at(1)).toEqual(group)
       expect(array.getValue()).toEqual([basicValue, basicValue])
@@ -55,18 +55,18 @@ describe('formArray.ts', () => {
       const group1 = newFormGroup()
       const group2 = newFormGroup()
 
-      expect(array.length).toEqual(1)
+      expect(array.length.value).toEqual(1)
       expect(array.getValue()).toEqual([basicValue])
 
       array.insert(0, group1)
 
-      expect(array.length).toEqual(2)
+      expect(array.length.value).toEqual(2)
       expect(array.at(0)).toEqual(group1)
       expect(array.getValue()).toEqual([basicValue, basicValue])
 
       array.insert(0, group2)
 
-      expect(array.length).toEqual(3)
+      expect(array.length.value).toEqual(3)
       expect(array.at(0)).toEqual(group2)
       expect(array.getValue()).toEqual([basicValue, basicValue, basicValue])
 
@@ -76,17 +76,17 @@ describe('formArray.ts', () => {
     })
 
     test('removeAt work', async () => {
-      expect(array.length).toEqual(1)
+      expect(array.length.value).toEqual(1)
       expect(array.getValue()).toEqual([basicValue])
 
       array.removeAt(1)
 
-      expect(array.length).toEqual(1)
+      expect(array.length.value).toEqual(1)
       expect(array.getValue()).toEqual([basicValue])
 
       const group = array.at(0)
       array.removeAt(0)
-      expect(array.length).toEqual(0)
+      expect(array.length.value).toEqual(0)
       expect(array.getValue()).toEqual([])
 
       group.markAsBlurred()
@@ -168,15 +168,15 @@ describe('formArray.ts', () => {
     test('validate work', async () => {
       expect(await array.validate()).toBeNull()
 
-      const _validator = (_: unknown) => ({ test: { message: '' } } as ValidationErrors)
+      const _validator = (_: unknown) => ({ test: { message: null } } as ValidateErrors)
 
       array.setValidator(_validator)
 
-      expect(await array.validate()).toEqual({ test: { message: '' } })
+      expect(await array.validate()).toEqual({ test: { message: null } })
     })
 
     test('get work', async () => {
-      const [group] = array.controls
+      const [group] = array.controls.value
 
       expect(array.get('0')).toEqual(group)
       expect(array.get([0])).toEqual(group)
@@ -191,7 +191,7 @@ describe('formArray.ts', () => {
     let array: FormArray<BasicGroup[]>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _validator = (value: any) => {
-      return value[0].control === 'test' ? null : ({ test: { message: '' } } as ValidationErrors)
+      return value[0].control === 'test' ? null : ({ test: { message: null } } as ValidateErrors)
     }
 
     test('default change work', async () => {
@@ -239,7 +239,7 @@ describe('formArray.ts', () => {
     })
 
     test('submit trigger validate work', async () => {
-      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidationErrors)
+      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidateErrors)
       array = new FormArray(
         [
           new FormGroup<BasicGroup>({

packages/cdk/forms/__tests__/formControl.spec.ts

@@ -1,6 +1,6 @@
 import { flushPromises } from '@vue/test-utils'
 import { FormControl } from '../src/controls/formControl'
-import { ValidationErrors } from '../src/types'
+import { ValidateErrors } from '../src/types'
 import { Validators } from '../src/validators'
 
 describe('formControl.ts', () => {
@@ -66,7 +66,7 @@ describe('formControl.ts', () => {
 
       control.setValidator(Validators.required)
 
-      expect(await control.validate()).toEqual({ required: { message: '' } })
+      expect(await control.validate()).toEqual({ required: { message: null } })
     })
   })
 
@@ -75,7 +75,7 @@ describe('formControl.ts', () => {
 
     test('default change work', async () => {
       const _asyncValidator = (value: unknown) =>
-        Promise.resolve(value === 'test' ? null : ({ async: { message: 'async' } } as ValidationErrors))
+        Promise.resolve(value === 'test' ? null : ({ async: { message: 'async' } } as ValidateErrors))
 
       control = new FormControl('test', { validators: Validators.required, asyncValidators: _asyncValidator })
 

packages/cdk/forms/__tests__/formGroup.spec.ts

@@ -2,7 +2,7 @@ import { flushPromises } from '@vue/test-utils'
 import { FormArray } from '../src/controls/formArray'
 import { FormControl } from '../src/controls/formControl'
 import { FormGroup } from '../src/controls/formGroup'
-import { ValidationErrors } from '../src/types'
+import { ValidateErrors } from '../src/types'
 import { Validators } from '../src/validators'
 
 interface BasicGroup {
@@ -128,20 +128,21 @@ describe('formGroup.ts', () => {
     test('validate work', async () => {
       expect(await group.validate()).toBeNull()
 
-      const _validator = (_: unknown) => ({ test: { message: '' } } as ValidationErrors)
+      const _validator = (_: unknown) => ({ test: { message: null } } as ValidateErrors)
 
       group.setValidator(_validator)
 
-      expect(await group.validate()).toEqual({ test: { message: '' } })
+      expect(await group.validate()).toEqual({ test: { message: null } })
     })
 
     test('get work', async () => {
-      const { control, array, group: groupChild } = group.controls
+      const { control, array, group: groupChild } = group.controls.value
       expect(group.get('control')).toEqual(control)
       expect(group.get('array')).toEqual(array)
       expect(group.get('group')).toEqual(groupChild)
-      expect(group.get('group.control')).toEqual((groupChild as FormGroup<{ control: string }>).controls.control)
-      expect(group.get(['array', 0])).toEqual((array as FormArray<string[]>).controls[0])
+      expect(group.get('group.control')).toEqual((groupChild as FormGroup<{ control: string }>).controls.value.control)
+      expect(group.get(['array', 0])).toEqual((array as FormArray<string[]>).controls.value[0])
+      expect(group.get('array')!.get(0)).toEqual((array as FormArray<string[]>).controls.value[0])
 
       expect(group.get(undefined as never)).toBeNull()
       expect(group.get('')).toBeNull()
@@ -156,7 +157,7 @@ describe('formGroup.ts', () => {
     let group: FormGroup<BasicGroup>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _validator = (value: any) => {
-      return value.control === 'test' ? null : ({ test: { message: '' } } as ValidationErrors)
+      return value.control === 'test' ? null : ({ test: { message: null } } as ValidateErrors)
     }
 
     test('default change work', async () => {
@@ -238,7 +239,7 @@ describe('formGroup.ts', () => {
     })
 
     test('submit trigger validate work', async () => {
-      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidationErrors)
+      const _asyncValidator = (_: unknown) => Promise.resolve({ async: { message: 'async' } } as ValidateErrors)
 
       group = new FormGroup<BasicGroup>(
         {

packages/cdk/forms/__tests__/useForms.spec.ts

@@ -18,7 +18,7 @@ describe('useForms.ts', () => {
     const group = useFormGroup<BasicGroup>({
       control1: ['', Validators.required],
       control2: [undefined, { trigger: 'blur', validators: Validators.required }],
-      array: useFormArray<(string | number)[]>(['', 1]),
+      array: useFormArray(['', 1]),
       group: useFormGroup({ control: '' }),
     })
 

packages/cdk/forms/__tests__/useValueAccessor.spec.ts

@@ -33,7 +33,7 @@ const getApp = (
   options: {
     group: AbstractControl
     valueRef?: Ref<string>
-    control?: string | AbstractControl
+    control?: string | number | AbstractControl
   },
 ) => {
   return mount({
@@ -131,13 +131,13 @@ describe('useValueAccessor.ts', () => {
 
     const input = wrapper.find('input')
 
-    expect(input.element.value).toEqual('')
+    expect(input.element.value).toEqual('valueRef')
 
     await input.setValue('input change')
     await input.trigger('blur')
 
     expect(group.getValue()).toEqual({ control: 'control' })
     expect(group.blurred.value).toEqual(false)
-    expect(valueRef.value).toEqual('valueRef')
+    expect(valueRef.value).toEqual('input change')
   })
 })