vue3-form-validation - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/composable/useValidation.d.ts

@@ -1,2 +0,2 @@
-import { Ref } from 'vue';
+import { Ref, UnwrapRef } from 'vue';
 import Form from '../Form';
@@ -20,19 +20,20 @@ export declare type SimpleRule<T = any> = (value: T) => Promise<unknown> | unknown;
 };
-declare type ValidateFormData<T> = T extends unknown ? {
-    [K in keyof T]: T[K] extends Field<infer TValue> ? Field<TValue> : T[K] extends Array<infer TArray> ? ValidateFormData<TArray>[] : T[K] extends Record<string, unknown> ? ValidateFormData<T[K]> : never;
+declare type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>;
+declare type ValidateFormData<T> = {
+    [K in keyof T]: T[K] extends {
+        $value: infer TValue;
+    } ? TValue extends Ref<infer TRef> ? Field<TRef> : Field<TValue> : T[K] extends Array<infer TArray> ? ValidateFormData<TArray>[] : T[K] extends Record<string, unknown> ? ValidateFormData<T[K]> : unknown;
+};
+declare type TransformedFormData<T> = T extends any ? {
+    [K in keyof T]: T[K] extends Field<infer TValue> ? TransformedField<TValue> : T[K] extends Array<infer TArray> ? TransformedFormData<TArray>[] : T[K] extends Record<string, unknown> ? TransformedFormData<T[K]> : T[K];
 } : never;
-declare type TransformedFormData<T> = T extends unknown ? {
-    [K in keyof T]: T[K] extends Field<infer TValue> ? TransformedField<TValue> : T[K] extends Array<infer TArray> ? TransformedFormData<TArray>[] : T[K] extends Record<string, unknown> ? TransformedFormData<T[K]> : never;
+declare type FormData<T> = T extends any ? {
+    [K in keyof T as T[K] extends any[] ? K : T[K] extends Record<string, unknown> ? K : never]: T[K] extends Field<infer TValue> ? UnwrapNestedRefs<TValue> : T[K] extends Array<infer TArray> ? FormData<TArray>[] : T[K] extends Record<string, unknown> ? FormData<T[K]> : never;
 } : never;
-declare type FormData<T> = T extends unknown ? {
-    [K in keyof T]: T[K] extends Field<infer TValue> ? TValue : T[K] extends Array<infer TArray> ? FormData<TArray>[] : T[K] extends Record<string, unknown> ? FormData<T[K]> : never;
-} : never;
-export declare const isSimpleRule: (rule: Rule) => rule is SimpleRule<any>;
-export declare const isKeyedRule: (rule: Rule) => rule is KeyedRule<any>;
-export declare const isField: <T>(field: any) => field is Field<T>;
-export declare const isTransformedField: <T>(field: any) => field is TransformedField<T>;
+declare type Keys = readonly (string | number)[];
+declare type DeepIndex<T, Ks extends Keys> = Ks extends [infer First, ...infer Rest] ? First extends keyof T ? Rest extends Keys ? DeepIndex<T[First], Rest> : undefined : undefined : T;
 /**
  *
- * @param form Form object with methods like `registerField` and `validate`.
- * @param formData The form data to transform.
+ * @param form - Form object with methods like `registerField` and `validate`.
+ * @param formData - The form data to transform.
  * @description In place transformation of a given form data object.
@@ -44,8 +45,15 @@ * Recursively add's some metadata to every form field.
 export declare function getResultFormData(formData: any, resultFormData: any): void;
+/**
+ *
+ * @param formData - The structure of your Form Data
+ * @hint
+ * To get the best IntelliSense when using TypeScript, consider defining the structure
+ * of your `formData` upfront and pass it as the generic parameter `T`.
+ */
 export declare function useValidation<T>(formData: T & ValidateFormData<T>): {
     form: TransformedFormData<T>;
-    onSubmit: (success: (formData: FormData<T>) => void, errror?: (() => void) | undefined) => void;
-    add(pathToArray: (string | number)[], value: Record<string, unknown>): void;
-    remove(pathToArray: (string | number)[], index: number): void;
+    onSubmit(success: (formData: FormData<T>) => void, error?: (() => void) | undefined): void;
+    add<Ks extends Keys>(pathToArray: readonly [...Ks], value: DeepIndex<ValidateFormData<T>, Ks> extends (infer TArray)[] ? TArray : never): void;
+    remove<Ks_1 extends Keys>(pathToArray: readonly [...Ks_1], index: DeepIndex<ValidateFormData<T>, Ks_1> extends any[] ? number : never): void;
 };
 export {};

dist/composable/useValidation.js

@@ -5,11 +5,4 @@ import { isReactive, reactive, watch } from 'vue';
 import { path } from '../utils';
-export const isSimpleRule = (rule) => typeof rule === 'function';
-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'
+const isField = (field) => typeof field === 'object' ? '$value' in field : false;
+const isTransformedField = (field) => typeof field === 'object'
     ? '$uid' in field &&
@@ -22,4 +15,4 @@ '$value' in field &&
  *
- * @param form Form object with methods like `registerField` and `validate`.
- * @param formData The form data to transform.
+ * @param form - Form object with methods like `registerField` and `validate`.
+ * @param formData - The form data to transform.
  * @description In place transformation of a given form data object.
@@ -90,4 +83,14 @@ * Recursively add's some metadata to every form field.
         }
+        else {
+            delete resultFormData[key];
+        }
     });
 }
+/**
+ *
+ * @param formData - The structure of your Form Data
+ * @hint
+ * To get the best IntelliSense when using TypeScript, consider defining the structure
+ * of your `formData` upfront and pass it as the generic parameter `T`.
+ */
 export function useValidation(formData) {
@@ -99,6 +102,6 @@ const form = new Form();
         form: reactiveFormData,
-        onSubmit: (success, errror) => {
+        onSubmit(success, error) {
             form.validateAll().then(hasError => {
                 if (hasError) {
-                    errror === null || errror === void 0 ? void 0 : errror();
+                    error === null || error === void 0 ? void 0 : error();
                 }
@@ -105,0 +108,0 @@ else {

dist/Form.js

@@ -1,4 +0,4 @@
-import { isSimpleRule } from './composable/useValidation';
 import FormField from './FormField';
 import { tryGet, trySet } from './utils';
+const isSimpleRule = (rule) => typeof rule === 'function';
 export default class Form {
@@ -46,2 +46,5 @@ constructor() {
     async validateAll() {
+        for (const { formField } of this.simpleValidators.values()) {
+            formField.touched = false;
+        }
         const promises = [...this.simpleValidators.entries()].map(([uid, { formField }]) => {
@@ -48,0 +51,0 @@ formField.touched = true;

dist/index.d.ts

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

dist/utils/path/path.d.ts

@@ -1,1 +0,1 @@
-export declare function path(path: (string | number)[], o: Record<string | number, unknown>): any;
+export declare function path(path: readonly any[], o: Record<string | number, unknown>): any;

package.json

 {
   "name": "vue3-form-validation",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Form validation for Vue 3",
@@ -34,17 +34,19 @@ "author": {
     "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.7",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "@vue/compiler-sfc": "^3.0.2",
-    "eslint": "^7.13.0",
+    "@types/node": "^14.14.10",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/parser": "^4.8.2",
+    "@vue/compiler-sfc": "^3.0.3",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-vue": "^7.1.0",
     "husky": "^4.3.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.1",
-    "prettier": "^2.1.2",
-    "tailwindcss": "^1.9.6",
+    "lint-staged": "^10.5.2",
+    "prettier": "^2.2.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.0.5",
-    "vite": "^1.0.0-rc.9",
-    "vue": "^3.0.2",
-    "vue-router": "^4.0.0-rc.2"
+    "typescript": "^4.1.2",
+    "vite": "^1.0.0-rc.13",
+    "vue": "^3.0.3",
+    "vue-router": "^4.0.0-rc.5"
   },
@@ -58,7 +60,6 @@ "prettier": {
   "husky": {
-    "hooks": {}
-  },
-  "lint-staged": {
-    "*.ts": "eslint --fix"
+    "hooks": {
+      "pre-commit": "npx eslint --rule=\"no-console:error\" --fix-dry-run main"
+    }
   }
 }

README.md

@@ -64,4 +64,3 @@ # Form validation for Vue 3
 
-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 parameter `T`. If at some point the provided type does not fit the required structure, it will let you know by converting that section to be of type `never`. Please note that when writing in a normal `.js` file, the type will often result in `never` even though the structure of the input might be correct. This is definitely not ideal and can probably be changed, but type inference can be a bit tricky sometimes.
-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 parameter `T`. The type for the example above is pretty straightforward:
 
@@ -124,3 +123,2 @@ ```ts
 
-At the moment, there is no good IntelliSense support for the `add` and `remove` methods. When TypeScript 4.1 will be released and Vue supports it, this can be changed however. Also if you want to take a look at some more examples, you can clone this repository to your local machine and run `npm run dev`, which will start a development server with an example site.
 ## Writing Rules
@@ -173,1 +171,7 @@ 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.
 ```
+
+## Contributing
+[Contributing](https://github.com/JensD98/vue3-form-validation/blob/master/.github/contributing.md)
+
+## License
+[MIT](https://github.com/JensD98/vue3-form-validation/blob/master/LICENSE)

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

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

Improved metrics

Total package byte prevSize

25747

increased by1.15%

Lines of code

436

increased by3.56%

Number of lines in readme file

175

increased by2.34%

Worsened metrics

Dev dependency count

18

increased by12.5%

No dependency changes