vue3-form-validation - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/composable/useValidation.js

		@@ -6,11 +6,15 @@ import { reactive, watch } from 'vue';
		export const isSimpleRule = (rule) => typeof rule === 'function';
		export const isKeyedRule = (rule) => 'key' in rule &&
		'rule' in rule &&
		typeof rule.key === 'string' &&
		isSimpleRule(rule.rule);
		export const isField = (field) => 'value' in field;
		export const isTransformedField = (field) => 'uid' in field &&
		'value' in field &&
		'errors' in field &&
		'validating' in field;
		export const isKeyedRule = (rule) => typeof rule === 'object'
		? 'key' in rule &&
		'rule' in rule &&
		typeof rule.key === 'string' &&
		isSimpleRule(rule.rule)
		: false;
		export const isField = (field) => typeof field === 'object' ? 'value' in field : false;
		export const isTransformedField = (field) => typeof field === 'object'
		? 'uid' in field &&
		'value' in field &&
		'errors' in field &&
		'validating' in field
		: false;
		/**
		@@ -63,6 +67,6 @@ *
		export function getResultFormData(formData, resultFormData) {
		for (const [key, value] of Object.entries(formData)) {
		Object.entries(formData).forEach(([key, value]) => {
		if (isTransformedField(value)) {
		resultFormData[key] = value.value;
		continue;
		return;
		}
		@@ -76,3 +80,3 @@ if (Array.isArray(value) && value.length) {
		getResultFormData(value, resultFormData[key]);
		}
		});
		}
		@@ -79,0 +83,0 @@ export function useValidation(formData) {

dist/Form.js

		@@ -81,4 +81,2 @@ import { isSimpleRule } from './composable/useValidation';
		this.simpleValidators.delete(uid);
		console.log(this.simpleValidators);
		console.log(this.keyedValidators);
		}
		@@ -85,0 +83,0 @@ getValidatorsFor(keys) {

dist/index.d.ts

		@@ -1,1 +0,1 @@
		export { Field, SimpleRule, KeyedRule, Rule, isSimpleRule, isKeyedRule, useValidation } from './composable/useValidation';
		export { Field, SimpleRule, KeyedRule, Rule, useValidation } from './composable/useValidation';

dist/index.js

		@@ -1,1 +0,1 @@
		export { isSimpleRule, isKeyedRule, useValidation } from './composable/useValidation';
		export { useValidation } from './composable/useValidation';

package.json

		{
		"name": "vue3-form-validation",
		"version": "2.0.2",
		"version": "2.0.3",
		"description": "Form validation for Vue 3",
		@@ -5,0 +5,0 @@ "author": {

README.md

		@@ -12,3 +12,3 @@ # Form validation for Vue 3

		Validation is async and is utilising `Promise.allSettled`, [which](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) has not yet reached cross-browser stability.
		Validation is async and is utilising `Promise.allSettled`, [which](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) has not yet reached cross-browser stability. Example usage can be found in this [Code Sandbox](https://codesandbox.io/s/vue-3-form-validation-demo-busd9?file=/src/LoginForm.vue).

		@@ -56,3 +56,3 @@ ## API

		The `formData` object can either be flat or nested by using arrays. The type definition for some Form field looks like the following:
		The `formData` object can either be flat or nested by using arrays. The type definition for some Form Field looks like the following:

		@@ -66,3 +66,4 @@ ```ts

		To get the best IntelliSense while writing the `useValidation` function, it's recommended to define the structure of your `formData` upfront and pass it as the generic paramter. If at some point the provided type does not fit the required structure, it will let you know by converting the problematic part to be of type `never`. The type for the example above is pretty straightforward:
		To get the best IntelliSense while writing the `useValidation` function, it's recommended to define the structure of your `formData` upfront and pass it as the generic paramter `T`. If at some point the provided type does not fit the required structure, it will let you know by converting the problematic part to be of type `never`. Please note that when writing in a normal `.js` file, the type will always be `never` even though the structure of the input might be correct. This is definitely not ideal and can probably be changed, but nice type inference can be a bit tricky sometimes.
		The type for the example above is pretty straightforward:

		@@ -81,5 +82,5 @@ ```ts
		---\|:-:\|---
		form \| `object` \| Transformed `formData` object, with added metadata for every Form field.
		form \| `object` \| Transformed `formData` object with added metadata for every Form Field.

		`Form` is a reactive object with identical structure as the `formData` input, but with added metadata to every Form field.
		`Form` is a reactive object with identical structure as the `formData` input, but with added metadata to every Form Field.

		@@ -106,7 +107,7 @@ Typing:
		---\|:-:\|---
		uid \| `number` \| Unique identifier of the Form field. For dynamic Forms this can be used as the `key` attribute in `v-for`.
		value \| `T` \| The value of the Form field which is meant to be used together with `v-model`.
		uid \| `number` \| Unique identifier of the Form Field. For dynamic Forms this can be used as the `key` attribute in `v-for`.
		value \| `T` \| The `modelValue` of the Form Field which is meant to be used together with `v-model`.
		errors \| `string[]` \| Array of validation error messages.
		validating \| `boolean` \| `True` while atleast one rule is validating.
		onBlur \| `function` \| Function that will mark this Form field as touched. After a Form field has been touched it will validate all rules after every input. Before it will not do any validation.
		onBlur \| `function` \| Function that will mark this Form Field as touched. After a Form Field has been touched it will validate all rules after every input. Before it will not do any validation.

		@@ -117,5 +118,5 @@ * `useValidation` exposes the following methods:
		--- \| :-: \| ---
		`onSubmit(success, failure?)` \| \| When this function is called it will validate all registered fields. It takes two parameters, a `success` and an optional `failure` callback.
		`onSubmit(success, error?)` \| \| When this function is called it will validate all registered fields. It takes two parameters, a `success` and an optional `error` callback.
		\|\| `success` \| Success callback which will be executed if there are no validation errors. Receives the `formData` as it's first argument.
		\|\| `failure?` \| Failure callback which will be executed if there are validation errors. Receives no arguments.
		\|\| `error?` \| Error callback which will be executed if there are validation errors. Receives no arguments.
		`add(pathToArray, value)` \|\| Utility function for writing dynamic Forms. It takes two parameters, a `pathToArray` of type `(string \\| number)[]` and a `value`.
		@@ -129,3 +130,3 @@ \|\| `pathToArray` \| An array of `string` and `numbers` representing the path to an array in the `formData`.
		Rules are functions that should return a `string` when the validation fails. They can be written purely as a function or together with a `key` property in an object.
		They can also alternatively return a promise when you have a rule that requires asynchronous code.
		They can also alternatively return a `Promise` when you have a rule that requires asynchronous code.

		@@ -139,3 +140,3 @@ Typing:

		Keyed rules that share the same key will be executed together, this can be useful in a situation where rules are dependent on another. For example the `Password` and `Repeat password` fields in a Login Form.
		Keyed rules that share the same `key` will be executed together, this can be useful in a situation where rules are dependent on another. For example the `Password` and `Repeat password` fields in a Login Form.
		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`.
		@@ -145,2 +146,4 @@
		```ts
		// Somewhere at the bottom of the file

		let error: unknown;
		@@ -147,0 +150,0 @@ // ...

vue3-form-validation - npm Package Compare versions

Improved metrics