feat(cdk:forms): add utils (#141)

re #115

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

@@ -0,0 +1,55 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { ComponentOptions } from 'vue'
+import { AbstractControl } from '../src/controls/abstractControl'
+import { useFormControl, useFormGroup } from '../src/useForms'
+import { injectControl, provideControl } from '../src/utils'
+
+const notFindText = 'not find control'
+
+const getComp = () => {
+  return {
+    template: `<div>{{ modelRef }}</div>`,
+    setup() {
+      const { modelRef } = injectControl('control') || { modelRef: notFindText }
+      return { modelRef }
+    },
+  }
+}
+
+const getApp = (Comp: ComponentOptions, control: AbstractControl) => {
+  return mount({
+    components: { Comp },
+    template: `<Comp />`,
+    setup() {
+      provideControl(control)
+    },
+  })
+}
+
+describe('utils.ts', () => {
+  test('basic work', async () => {
+    const control = useFormControl('text')
+    const group = useFormGroup({ control })
+    const app = getApp(getComp(), group)
+
+    expect(app.text()).toEqual('text')
+
+    control.setValue('text1')
+    await flushPromises()
+
+    expect(app.text()).toEqual('text1')
+  })
+
+  test('not find control work', async () => {
+    const group = useFormGroup({})
+    const app = getApp(getComp(), group)
+
+    expect(app.text()).toEqual(notFindText)
+  })
+
+  test('not provide work', async () => {
+    const app = mount(getComp())
+
+    expect(app.text()).toEqual(notFindText)
+  })
+})

packages/cdk/forms/docs/index.zh.md

@@ -8,9 +8,9 @@ cover:
 
 参考自 [@angular/forms](https://angular.cn/guide/forms-overview)
 
-- 显式创建表单模型
-- 函数式的表单验证：内置常用的，提供扩展接口
-- 表单状态管理：valid，invalid, validing，untouched，touched
+- 显示创建表单模型: `FormGroup`, `FormArray`, `FormControl`
+- 易扩展的表单验证: `Validators`, `ValidatorFn`, `ValidatorFn`
+- 响应式的表单状态: `valid`, `invalid`, `validating`, `blurred`, `unblurred`
 
 ## 何时使用
 
@@ -35,9 +35,9 @@ cover:
 | `required` | 验证表单控件具有非空值 | - | - | 验证失败返回 `{ required: { message: '' } }`|
 | `requiredTrue` | 验证表单控件的值为 `true` | - | - | 验证失败返回 `{ requiredTrue: { message: '', actual: value } }`|
 | `email` | 验证表单控件的值是否为 `email` | - | - | 验证失败返回 `{ email: { message: '', actual: value } }`|
-| `min()` | 验证表单控件的值大于或等于指定的数字 | number | - | 验证失败返回 `{ min: { message: '', min, actual: value } }`|
-| `max()` | 验证表单控件的值小于或等于指定的数字 | number | - | 验证失败返回 `{ max: { message: '', min, actual: value } }`|
-| `minLength()` | 验证表单控件的值的长度大于或等于指定的数字 | number | - | 验证失败返回 `{ minLength: { message: '', minLength, actual: value.length } }`|
-| `maxLength()` | 验证表单控件的值的长度小于或等于指定的数字 | number | - | 验证失败返回 `{ maxLength: { message: '', maxLength, actual: value.length } }`|
+| `min()` | 验证表单控件的值大于或等于指定的数字 | `number` | - | 验证失败返回 `{ min: { message: '', min, actual: value } }`|
+| `max()` | 验证表单控件的值小于或等于指定的数字 | `number` | - | 验证失败返回 `{ max: { message: '', min, actual: value } }`|
+| `minLength()` | 验证表单控件的值的长度大于或等于指定的数字 | `number` | - | 验证失败返回 `{ minLength: { message: '', minLength, actual: value.length } }`|
+| `maxLength()` | 验证表单控件的值的长度小于或等于指定的数字 | `number` | - | 验证失败返回 `{ maxLength: { message: '', maxLength, actual: value.length } }`|
 | `pattern()` | 验证表单控件的值匹配一个正则表达式 | `string \| RegExp` | - | 验证失败返回 `{ pattern: { message: '', pattern, actual: value } }`|
-| `setMessages()` | 设置验证失败的提示信息 | ErrorMessages | - | 每次设置的 `messages` 会跟之前的进行合并 |
+| `setMessages()` | 设置验证失败的提示信息 | `ErrorMessages` | - | 每次设置的 `messages` 会跟之前的进行合并 |

packages/cdk/forms/index.ts

@@ -4,4 +4,5 @@ export * from './src/controls/formControl'
 export * from './src/controls/formGroup'
 export * from './src/types'
 export * from './src/useForms'
+export * from './src/utils'
 export * from './src/validators'

packages/cdk/forms/src/utils.ts

@@ -0,0 +1,15 @@
+import type { InjectionKey } from 'vue'
+import type { AbstractControl } from './controls/abstractControl'
+
+import { inject, provide } from 'vue'
+
+const token: InjectionKey<AbstractControl> = Symbol()
+
+export function provideControl(control: AbstractControl): void {
+  provide(token, control)
+}
+
+export function injectControl(path: Array<string | number> | string): AbstractControl | null {
+  const controlParent = inject(token)
+  return controlParent ? controlParent.get(path) : null
+}