Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useAsyncValidator): new function (#1497)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
- Loading branch information
1 parent
5a1b932
commit f422638
Showing
10 changed files
with
352 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import type { PropType } from 'vue-demi' | ||
| import { defineComponent, reactive } from 'vue-demi' | ||
| import { useAsyncValidator } from '@vueuse/integrations' | ||
| import type { Rules } from 'async-validator' | ||
|
|
||
| export const UseAsyncValidator = defineComponent({ | ||
| name: 'UseAsyncValidator', | ||
| props: { | ||
| form: { | ||
| type: Object as PropType<Record<string, any>>, | ||
| required: true, | ||
| }, | ||
| rules: { | ||
| type: Object as PropType<Rules>, | ||
| required: true, | ||
| }, | ||
| }, | ||
| setup(props, { slots }) { | ||
| const data = reactive(useAsyncValidator(props.form, props.rules)) | ||
|
|
||
| return () => { | ||
| if (slots.default) | ||
| return slots.default(data) | ||
| } | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <script setup lang="ts"> | ||
| import { reactive } from 'vue' | ||
| import type { Rules } from 'async-validator' | ||
| import { UseAsyncValidator } from './component' | ||
| import { useAsyncValidator } from '.' | ||
| const form = reactive({ email: '', name: '', age: '' }) | ||
| const rules: Rules = { | ||
| name: { | ||
| type: 'string', | ||
| min: 5, | ||
| max: 20, | ||
| required: true, | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| required: true, | ||
| }, | ||
| email: [ | ||
| { | ||
| type: 'email', | ||
| required: true, | ||
| }, | ||
| ], | ||
| } | ||
| const { pass, isFinished, errorFields } = useAsyncValidator(form, rules) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| pass: | ||
| <BooleanDisplay :value="pass" /> | ||
| </div> | ||
| <div> | ||
| isFinished: | ||
| <BooleanDisplay :value="isFinished" /> | ||
| </div> | ||
|
|
||
| <div class="bg-base border-main rounded shadow max-w-96 p-8"> | ||
| <div> | ||
| email: | ||
| <input | ||
| v-model="form.email" :class="{ '!border-red': errorFields.email?.length > 0 }" type="text" | ||
| placeholder="email" | ||
| > | ||
| <div v-if="errorFields.email?.length > 0" text-red> | ||
| {{ errorFields.email[0].message }} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| name: | ||
| <input | ||
| v-model="form.name" :class="{ '!border-red': errorFields.name?.length > 0 }" type="text" | ||
| placeholder="name" | ||
| > | ||
| <div v-if="errorFields.name?.length > 0" text-red> | ||
| {{ errorFields.name[0].message }} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| age: | ||
| <input | ||
| v-model="form.age" :class="{ '!border-red': errorFields.age?.length > 0 }" type="number" | ||
| placeholder="age" | ||
| > | ||
| <div v-if="errorFields.age?.length > 0" text-red> | ||
| {{ errorFields.age[0].message }} | ||
| </div> | ||
| </div> | ||
| <button :disabled="!pass"> | ||
| submit | ||
| </button> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| --- | ||
| category: '@Integrations' | ||
| --- | ||
|
|
||
| # useAsyncValidator | ||
|
|
||
| wrapper for [`async-validator`](https://github.com/yiminghe/async-validator) | ||
|
|
||
| ## Install | ||
|
|
||
| ```bash | ||
| npm i async-validator | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
| import { useAsyncValidator } from '@vueuse/integrations/useAsyncValidator' | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import type { Rules } from 'async-validator' | ||
| import type { Ref } from 'vue-demi' | ||
| import { ref } from 'vue-demi' | ||
| import { useAsyncValidator } from '.' | ||
|
|
||
| describe('useAsyncValidator', () => { | ||
| let form: { | ||
| name: string | ||
| age: number | ||
| } | ||
|
|
||
| beforeEach(() => { | ||
| form = { | ||
| name: 'jelf', | ||
| age: 24, | ||
| } | ||
| }) | ||
|
|
||
| it('should be defined', () => { | ||
| expect(useAsyncValidator).toBeDefined() | ||
| }) | ||
|
|
||
| it('should pass', () => { | ||
| const rules: Rules = { | ||
| name: { | ||
| type: 'string', | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| }, | ||
| } | ||
| const { pass, errors, isFinished, then } = useAsyncValidator(form, rules) | ||
| then(() => { | ||
| expect(isFinished.value).toBe(true) | ||
| expect(pass.value).toBe(true) | ||
| expect(errors.value).toMatchObject([]) | ||
| }) | ||
| }) | ||
|
|
||
| it('should async', async () => { | ||
| const rules: Rules = { | ||
| name: { | ||
| type: 'string', | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| }, | ||
| } | ||
| const { pass, errors, isFinished, then } = useAsyncValidator(form, rules) | ||
| expect(isFinished.value).toBe(false) | ||
| expect(pass.value).toBe(false) | ||
| expect(errors.value).toMatchObject([]) | ||
|
|
||
| then(() => { | ||
| expect(isFinished.value).toBe(true) | ||
| expect(pass.value).toBe(true) | ||
| expect(errors.value).toMatchObject([]) | ||
| }) | ||
| }) | ||
|
|
||
| it('should can be await', async () => { | ||
| const rules: Rules = { | ||
| name: { | ||
| type: 'string', | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| }, | ||
| } | ||
| const { pass, errors, isFinished } = await useAsyncValidator(form, rules) | ||
| expect(isFinished.value).toBe(true) | ||
| expect(pass.value).toBe(true) | ||
| expect(errors.value).toMatchObject([]) | ||
| }) | ||
|
|
||
| it('should fail to validate', async () => { | ||
| const rules: Rules = { | ||
| name: { | ||
| type: 'string', | ||
| min: 5, | ||
| max: 20, | ||
| message: 'name length must be 5-20', | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| }, | ||
| } | ||
| const { pass, errors, isFinished } = await useAsyncValidator(form, rules) | ||
| expect(isFinished.value).toBe(true) | ||
| expect(pass.value).toBe(false) | ||
| expect(errors.value).toMatchInlineSnapshot(` | ||
| [ | ||
| { | ||
| "field": "name", | ||
| "fieldValue": "jelf", | ||
| "message": "name length must be 5-20", | ||
| }, | ||
| ] | ||
| `) | ||
| }) | ||
|
|
||
| it('should reactive', async () => { | ||
| const form = ref({ | ||
| name: 'jelf', | ||
| age: 24, | ||
| }) | ||
|
|
||
| const rules = ref({ | ||
| name: { | ||
| type: 'string', | ||
| min: 5, | ||
| max: 20, | ||
| message: 'name length must be 5-20', | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| }, | ||
| }) as Ref<Rules> | ||
|
|
||
| const { pass, errors, isFinished } = await useAsyncValidator(form, rules) | ||
| expect(isFinished.value).toBe(true) | ||
| expect(pass.value).toBe(false) | ||
| expect(errors.value).toMatchInlineSnapshot(` | ||
| [ | ||
| { | ||
| "field": "name", | ||
| "fieldValue": "jelf", | ||
| "message": "name length must be 5-20", | ||
| }, | ||
| ] | ||
| `) | ||
|
|
||
| form.value.name = 'okxiaoliang4' | ||
| }) | ||
| }) |
Oops, something went wrong.