vue3-form-validation - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

package.json

 {
   "name": "vue3-form-validation",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Vue composition function for Form Validation",
@@ -41,24 +41,24 @@ "author": {
     "@types/jest": "^26.0.23",
-    "@types/node": "^15.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.24.0",
+    "@types/node": "^15.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vue/compiler-sfc": "^3.0.11",
-    "autoprefixer": "^10.2.5",
-    "eslint": "^7.26.0",
+    "autoprefixer": "^10.2.6",
+    "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^7.9.0",
     "husky": "^6.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "lint-staged": "^11.0.0",
     "pinst": "^2.1.6",
-    "postcss": "^8.2.15",
+    "postcss": "^8.3.0",
     "postcss-nesting": "^8.0.1",
     "prettier": "^2.3.0",
     "tailwindcss": "^2.1.2",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
+    "ts-jest": "^27.0.1",
+    "ts-node": "^10.0.0",
     "tsd": "^0.15.1",
-    "typescript": "^4.2.4",
-    "vite": "^2.3.3",
+    "typescript": "^4.3.2",
+    "vite": "^2.3.4",
     "vue": "^3.0.7",
@@ -65,0 +65,0 @@ "vue-router": "^4.0.4"

README.md

@@ -5,3 +5,3 @@ # Form Validation for Vue 3
 
-Vue composition function for Form Validation.
+Vue composition function for Form Validation with async rules.
 
@@ -16,4 +16,2 @@ - :milky_way: **Written in TypeScript**
 
-Validation is async and is utilising `Promise.allSettled`.
-
 ### :point_right: [Check out the example usage on Code Sandbox](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue)
@@ -26,11 +24,4 @@
 ```ts
-const {
-  form,
-  errors,
-  submitting,
-  validateFields,
-  resetFields,
-  add,
-  remove
-} = useValidation<T>(formData);
+const { form, errors, submitting, validateFields, resetFields, add, remove } =
+  useValidation<T>(formData);
 ```
@@ -79,3 +70,3 @@
   $value: Ref<T> | T;
-  $rules?: Rule<T>[];
+  $rules?: Rule[];
 };
@@ -123,3 +114,3 @@ ```
 
-Given the structure of the previous example, this will result in the following object:
+Given the structure of the previous example, this will result in the following:
 
@@ -134,4 +125,3 @@ ```ts
 
-As you may have noticed, all of the properties are prefixed with the `$` symbol, which is to distinguish them from other properties but also to avoid naming conflicts. Below is a
-description of all the properties and their use case:
+As you may have noticed, all of the properties are prefixed with the `$` symbol, which is to distinguish them from other properties but also to avoid naming conflicts. Below is a description of all the properties and their use case:
 
@@ -146,3 +136,3 @@ - `$uid`
   - **Type** - `string[]`
-  - **Description** - Array of validation error messages.
+  - **Description** - Array of validation error messages local to this field.
 - `$hasError`
@@ -166,13 +156,12 @@ - **Type** - `boolean`
   - **Parameters**
-    - `formData?` - Values to use when resetting ([Sandbox](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue)).
-- `add(pathToArray: (string | number)[], value: any) -> void`
-  - **Description** - Utility function for writing dynamic forms.
+    - `formData?` - Values to use when resetting (see [Sandbox](https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue)).
+- `add(path: (string | number)[], value: any) -> void`
+  - **Description** - Function for writing dynamic forms (similar to [Lodash's set function](https://lodash.com/docs/4.17.15#set)).
   - **Parameters**
-    - `pathToArray` - Tuple representing the path to an array in the form data.
-    - `value` - The value that will be pushed to the array at the given path.
-- `remove(pathToArray: (string | number)[], index: number) -> void`
-  - **Description** - Utility function for writing dynamic forms.
+    - `path` - The path of the property to add.
+    - `value` - The value to add (usually an object or array).
+- `remove(path: (string | number)[]) -> void`
+  - **Description** - Function for writing dynamic forms.
   - **Parameters**
-    - `pathToArray` - Tuple representing the path to an array in the form data.
-    - `index` - Array index which will be remove.
+    - `path` - The path of the property to remove. For example `remove(['as', 0])` will remove the first element in an array called `as` at the root level.
 
@@ -188,13 +177,17 @@ ## Writing Rules
 type SimpleRule<T = any> = (value: T) => any;
-type KeyedRule<T = any> = { key: string; rule: SimpleRule<T> };
-type Rule<T = any> = SimpleRule<T> | KeyedRule<T>;
+type KeyedRule = {
+  key: string;
+  rule?: (...values: any[]) => any;
+};
+type Rule<T = any> = SimpleRule<T> | KeyedRule;
 ```
 
-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 `Repeat Password` fields in a [Signup 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`, to determine if a call should result in an error, it will check if the rule's return value is of type `string`.
+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).
+Rules will always be called with the latest `modelValue`.
+Simple rules will only receive their own argument, whereas keyed rules will also receive every other `modelValue` with a matching key.
 
 > To prevent overly aggressive error messages, keyed rules will only be called
-> after all Fields with connected rules have been touched.
+> after all fields with connected rules have been touched.
 
-Because of the way the [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators) work in JavaScript, 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`. This way, many basic rules can be written in one line:
 
@@ -209,3 +202,3 @@ ```ts
 
-Async rules allow you to perform network requests, for instance checking if a username exists in the database. Same criteria apply as for simple rules, `resolve` or `reject` with a string if the validation fails:
+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:
 
@@ -216,3 +209,3 @@ ```ts
     setTimeout(() => {
-      if (['foo', 'bar'].includes(name)) {
+      if (['Alice', 'Bob'].includes(name)) {
         resolve();
@@ -219,0 +212,0 @@ } else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

11491

decreased by-72.86%

Number of package files

3

decreased by-93.62%

Lines of code

0

decreased by-100%

Number of lines in readme file

221

decreased by-3.07%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes