vue3-form-validation
Advanced tools
vue3-form-validation - npm Package Compare versions
Comparing version 4.0.4 to 4.1.0
@@ -11,8 +11,3 @@ import { deepIterator } from '../deep-iterator/deepIterator'; | ||
| if (isLeaf) { | ||
| if (value instanceof File) { | ||
| set(copy, path, new File([value], value.name, { type: value.type })); | ||
| } | ||
| else { | ||
| set(copy, path, value); | ||
| } | ||
| set(copy, path, value); | ||
| } | ||
@@ -19,0 +14,0 @@ } |
| import { Ref, ComputedRef, UnwrapRef } from 'vue'; | ||
| import { FormField } from '../form/FormField'; | ||
| import { RefUnref } from '../types'; | ||
@@ -37,2 +38,3 @@ export declare type SimpleRule<T = any> = (value: T) => any; | ||
| form: TransformedFormData<T>; | ||
| formFields: Ref<Set<FormField>>; | ||
| submitting: Ref<boolean>; | ||
@@ -39,0 +41,0 @@ errors: ComputedRef<string[]>; |
@@ -32,2 +32,3 @@ import { reactive } from 'vue'; | ||
| form: transformedFormData, | ||
| formFields: form.formFields, | ||
| submitting: form.submitting, | ||
@@ -34,0 +35,0 @@ errors: form.errors, |
@@ -11,2 +11,3 @@ import { Rule } from '../composition/useValidation'; | ||
| private tryGetSimple; | ||
| formFields: import("vue").Ref<Set<FormField>>; | ||
| submitting: import("vue").Ref<boolean>; | ||
@@ -13,0 +14,0 @@ errors: import("vue").ComputedRef<string[]>; |
@@ -14,2 +14,3 @@ import { computed, ref, shallowReactive, unref } from 'vue'; | ||
| this.tryGetSimple = tryGet(this.simpleMap); | ||
| this.formFields = ref(new Set()); | ||
| this.submitting = ref(false); | ||
@@ -64,2 +65,3 @@ this.errors = computed(() => { | ||
| this.reactiveFormFieldMap.set(uid, formField); | ||
| this.formFields.value.add(formField); | ||
| return formField; | ||
@@ -86,3 +88,4 @@ } | ||
| this.tryGetSimple({ | ||
| success({ rollbacks }) { | ||
| success: ({ rollbacks, formField }) => { | ||
| this.formFields.value.delete(formField); | ||
| rollbacks.forEach(r => r()); | ||
@@ -89,0 +92,0 @@ } |
| { | ||
| "name": "vue3-form-validation", | ||
| "version": "4.0.4", | ||
| "version": "4.1.0", | ||
| "description": "Vue composition function for Form Validation", | ||
@@ -11,3 +11,2 @@ "author": { | ||
| "exports": "./dist/index.js", | ||
| "main": "./dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
@@ -14,0 +13,0 @@ "files": [ |
@@ -179,3 +179,3 @@ # Form Validation for Vue 3 | ||
| Keyed rules that share the same `key` will be executed together. This can be useful in a situation where rules are dependent on another, such as the `Password` and `Confirm Password` fields in a [Signup Form](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue). | ||
| Keyed rules that share the same `key` will be executed together. This can be useful in a situation where rules are dependent on another, such as the `Password` and `Confirm Password` fields in a [Register Form](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue). | ||
| Rules will always be called with the latest `modelValue`. | ||
@@ -187,12 +187,32 @@ Simple rules will only receive their own argument, whereas keyed rules will also receive every other `modelValue` with a matching key. | ||
| To determine if a call should result in an error, it will check if the rule's return value is of type `string`. This way, many basic rules can be written in one line: | ||
| To determine if a call should result in an error, it will check if the rule's return value is of type `string`. There are no build-in rules included in this package, as implementation details may differ across applications. However, here is an example of how some generic rules might look like: | ||
| `rules.js` | ||
| ```ts | ||
| const required = value => !value && 'This field is required'; | ||
| const min = value => | ||
| value.length > 3 || 'This field has to be longer than 3 characters'; | ||
| const max = value => | ||
| value.length < 7 || 'This field is too long (maximum is 6 characters)'; | ||
| export const required = msg => x => !x && msg; | ||
| export const min = min => msg => x => x.length >= min || msg; | ||
| export const max = max => msg => x => x.length <= max || msg; | ||
| export const minMax = (min, max) => msg => x => | ||
| (min <= x.length && x.length <= max) || msg; | ||
| export const email = msg => x => /\S+@\S+\.\S+/.test(x) || msg; | ||
| export const equal = msg => (...xs) => xs.every(x => x === xs[0]) || msg; | ||
| ``` | ||
| You can put these in a separate file and use them wherever you need. Placing the `modelValue` (here `x`) as the last argument of the function chain gives you a concise syntax when using them together with `useValidation`: | ||
| ```ts | ||
| useValidation({ | ||
| someField: { | ||
| $value: '', | ||
| rules: [ | ||
| required('Your message'), | ||
| min(3)('Your message'), | ||
| max(8)('Your message'), | ||
| minMax(5, 20)('Your message'), | ||
| email('Your message'), | ||
| equal('Your message') | ||
| ] | ||
| } | ||
| }) | ||
| ``` | ||
| Async rules allow you to perform network requests, for example checking if a username exists in the database. The same principle applies as for synchronous rules, `resolve` or `reject` with a string if the validation fails: | ||
@@ -199,0 +219,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.17%
44083
- Lines of code
- increased by0.22%
897
- Number of lines in readme file
- increased by8.93%
244
Worsened metrics
- Number of downloads
- decreased by-1.6%
184