vue3-form-validation - npm Package Compare versions

Comparing version 3.1.3 to 3.2.0

dist/common/deep-iterator/deepIterator.js

 import { isRef } from 'vue';
-import { LinkedList } from '..';
+import { LinkedList } from '../linked-list/LinkedList';
 export function* deepIterator(obj, predicate = () => false) {
@@ -4,0 +4,0 @@ const stack = new LinkedList();

dist/common/form-helper/cleanup-form/cleanupForm.d.ts

 import { Form } from '../../../form/Form';
-export declare function cleanupForm(form: Form, deletedFields: any): void;
+export declare function cleanupForm(form: Form, deletedData: any): void;

dist/common/form-helper/cleanup-form/cleanupForm.js

 import { deepIterator } from '../../deep-iterator/deepIterator';
 import { isTransformedField } from '../../type-guards/typeGuards';
-export function cleanupForm(form, deletedFields) {
-    for (const [, value] of deepIterator(deletedFields, isTransformedField)) {
+export function cleanupForm(form, deletedData) {
+    if (isTransformedField(deletedData)) {
+        form.onDelete(deletedData.$uid);
+        return;
+    }
+    for (const [, value] of deepIterator(deletedData, isTransformedField)) {
         if (isTransformedField(value)) {
@@ -6,0 +10,0 @@ form.onDelete(value.$uid);

dist/common/form-helper/get-result-form-data/getResultFormData.js

@@ -1,3 +0,4 @@
-import { isReactive } from '@vue/reactivity';
+import { isReactive } from 'vue';
 import { deepIterator } from '../../deep-iterator/deepIterator';
+import { jsonCopy } from '../../json-copy/jsonCopy';
 import { set } from '../../set/set';
@@ -10,3 +11,3 @@ import { isTransformedField } from '../../type-guards/typeGuards';
             if (isReactive(value.$value)) {
-                set(result, path, JSON.parse(JSON.stringify(value.$value)));
+                set(result, path, jsonCopy(value.$value));
             }
@@ -13,0 +14,0 @@ else {

dist/common/form-helper/reset-fields/resetFields.js

@@ -0,1 +1,2 @@
+import { jsonCopy } from '../../json-copy/jsonCopy';
 import { isArray, isObject, isTransformedField } from '../../type-guards/typeGuards';
@@ -7,6 +8,7 @@ export function resetFields(formData, transformedFormData) {
             if (isArray(transformedValue.$value)) {
-                transformedValue.$value = JSON.parse(JSON.stringify(value));
+                transformedValue.$value = jsonCopy(value);
             }
             else if (isObject(transformedValue.$value)) {
-                Object.assign(transformedValue.$value, JSON.parse(JSON.stringify(value)));
+                const copy = jsonCopy(value);
+                Object.assign(transformedValue.$value, copy);
             }
@@ -13,0 +15,0 @@ else {

dist/common/form-helper/transform-form-data/transformFormData.d.ts

 import { Form } from '../../../form/Form';
-export declare function transformFormData(form: Form, formData: any): void;
+export declare function transformFormData(form: Form, data: object): void;

dist/common/form-helper/transform-form-data/transformFormData.js

@@ -5,28 +5,32 @@ import { watch } from 'vue';
 import { isField } from '../../type-guards/typeGuards';
-export function transformFormData(form, formData) {
+function registerField(form, field) {
     var _a;
-    for (const [key, value, parent] of deepIterator(formData)) {
+    const uid = useUid();
+    const formField = form.registerField(uid, (_a = field.$rules) !== null && _a !== void 0 ? _a : [], field.$value);
+    watch(formField.modelValue, () => {
+        if (formField.touched) {
+            form.validate(uid);
+        }
+    });
+    return {
+        $uid: uid,
+        $value: formField.modelValue,
+        $errors: formField.getErrors(),
+        $hasError: formField.hasError(),
+        $validating: formField.validating,
+        async $onBlur() {
+            if (!formField.touched) {
+                formField.touched = true;
+                await form.validate(uid);
+            }
+        }
+    };
+}
+export function transformFormData(form, data) {
+    for (const [key, value, parent] of deepIterator(data)) {
         if (isField(value)) {
-            const uid = useUid();
-            const formField = form.registerField(uid, (_a = value.$rules) !== null && _a !== void 0 ? _a : [], value.$value);
-            watch(formField.modelValue, () => {
-                if (formField.touched) {
-                    form.validate(uid);
-                }
-            });
-            parent[key] = {
-                $uid: uid,
-                $value: formField.modelValue,
-                $errors: formField.getErrors(),
-                $hasError: formField.hasError(),
-                $validating: formField.validating,
-                async $onBlur() {
-                    if (!formField.touched) {
-                        formField.touched = true;
-                        await form.validate(uid);
-                    }
-                }
-            };
+            const transformedField = registerField(form, value);
+            parent[key] = transformedField;
         }
     }
 }

dist/common/linked-list/LinkedList.js

@@ -1,2 +0,1 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 export class LinkedListNode {
@@ -3,0 +2,0 @@ constructor(value) {

dist/common/set/set.d.ts

@@ -1,1 +0,1 @@
-export declare function set(obj: any, keys: (string | number)[], value: any): void;
+export declare function set(obj: any, keys: readonly (string | number)[], value: any): void;

dist/composition/useValidation.d.ts

@@ -22,16 +22,12 @@ import { Ref, ComputedRef, UnwrapRef } from 'vue';
 export declare type TransformedFormData<T extends object> = T extends any ? {
-    [K in keyof T]: T[K] extends {
-        $value: infer TValue;
-    } ? TransformedField<UnwrapRef<TValue>> : T[K] extends Record<string, unknown> | any[] ? TransformedFormData<T[K]> : T[K];
+    [K in keyof T]: T[K] extends Field<infer TValue> | undefined ? T[K] & Field<any> extends Field<any> ? TransformedField<UnwrapRef<TValue>> : TransformedField<UnwrapRef<TValue>> : T[K] extends Record<string, unknown> | any[] ? TransformedFormData<T[K]> : T[K];
 } : never;
 export declare type FormData<T extends object> = T extends any ? {
-    [K in keyof T]: T[K] extends {
-        $value: infer TValue;
-    } ? UnwrapRef<TValue> : T[K] extends Record<string, unknown> | any[] ? FormData<T[K]> : T[K];
+    [K in keyof T]: T[K] extends Field<infer TValue> | undefined ? T[K] & Field<any> extends Field<any> ? UnwrapRef<TValue> : UnwrapRef<TValue> : T[K] extends Record<string, unknown> | any[] ? FormData<T[K]> : T[K];
 } : never;
 export declare type Keys = readonly (string | number)[];
-export declare type DeepIndex<T, Ks extends Keys> = Ks extends [
+export declare type DeepIndex<T, Ks extends Keys, R = unknown> = Ks extends [
     infer First,
     ...infer Rest
-] ? First extends keyof T ? Rest extends Keys ? DeepIndex<T[First], Rest> : undefined : undefined : T;
+] ? First extends keyof T ? Rest extends Keys ? DeepIndex<T[First], Rest> : R : R : T;
 declare type UseValidation<T extends object> = {
@@ -43,4 +39,4 @@ form: TransformedFormData<T>;
     resetFields(formData?: Partial<FormData<T>>): void;
-    add<Ks extends Keys>(pathToArray: readonly [...Ks], value: DeepIndex<T, Ks> extends Array<infer TArray> ? TArray : never): void;
-    remove<Ks extends Keys>(pathToArray: readonly [...Ks], index: DeepIndex<T, Ks> extends any[] ? number : never): void;
+    add<Ks extends Keys>(path: readonly [...Ks], value: DeepIndex<T, Ks> extends Array<infer TArray> ? TArray : DeepIndex<T, Ks>): void;
+    remove(path: (string | number)[]): void;
 };
@@ -47,0 +43,0 @@ /**

dist/composition/useValidation.js

 import { reactive } from 'vue';
-import { cleanupForm, getResultFormData, path, PromiseCancel, resetFields, transformFormData } from '../common';
+import { cleanupForm, getResultFormData, path as _path, PromiseCancel, resetFields, set, transformFormData } from '../common';
 import { Form } from '../form/Form';
@@ -56,17 +56,32 @@ import { ValidationError } from '../form/ValidationError';
         },
-        add(pathToArray, value) {
-            const xs = path(pathToArray, transformedFormData);
-            if (Array.isArray(xs)) {
-                transformFormData(form, value);
-                xs.push(value);
+        add(path, value) {
+            const box = { value };
+            transformFormData(form, box);
+            const x = _path(path, transformedFormData);
+            if (Array.isArray(x)) {
+                x.push(box.value);
             }
+            else {
+                set(transformedFormData, path, box.value);
+            }
         },
-        remove(pathToArray, index) {
-            const xs = path(pathToArray, transformedFormData);
-            if (Array.isArray(xs)) {
-                const deleted = xs.splice(index, 1);
-                deleted.forEach(deleted => cleanupForm(form, deleted));
+        remove(path) {
+            const lastKey = path.pop();
+            if (typeof lastKey !== 'undefined' && path.length === 0) {
+                cleanupForm(form, transformedFormData[lastKey]);
+                delete transformedFormData[lastKey];
             }
+            else if (typeof lastKey !== 'undefined') {
+                const value = _path(path, transformedFormData);
+                if (Array.isArray(value)) {
+                    const deleted = value.splice(+lastKey, 1);
+                    cleanupForm(form, deleted);
+                }
+                else {
+                    cleanupForm(form, value[lastKey]);
+                    delete value[lastKey];
+                }
+            }
         }
     };
 }

dist/form/FormField.js

 import { computed, isReactive, isRef, reactive, ref, unref } from 'vue';
 import { isArray, isObject, isNotNull } from '../common';
+import { jsonCopy } from '../common/json-copy/jsonCopy';
 export class FormField {
@@ -8,12 +9,9 @@ constructor(rules, modelValue) {
         this.errors = reactive(rules.map(() => null));
-        this.initialModelValue = JSON.parse(JSON.stringify(unref(modelValue)));
-        if (isRef(modelValue)) {
+        this.initialModelValue = jsonCopy(unref(modelValue));
+        if (isRef(modelValue) || isReactive(modelValue)) {
             this.modelValue = modelValue;
         }
-        else if (isReactive(modelValue)) {
-            this.modelValue = modelValue;
-        }
         else if (isObject(modelValue)) {
             this.modelValue = reactive(modelValue);
-            this.initialModelValue = JSON.parse(JSON.stringify(unref(this.modelValue)));
+            this.initialModelValue = jsonCopy(this.modelValue);
         }
@@ -38,3 +36,3 @@ else {
                 if (isArray(this.modelValue.value)) {
-                    this.modelValue.value = JSON.parse(JSON.stringify(this.initialModelValue));
+                    this.modelValue.value = jsonCopy(this.initialModelValue);
                 }
@@ -46,3 +44,3 @@ else {
             else {
-                const copy = JSON.parse(JSON.stringify(this.initialModelValue));
+                const copy = jsonCopy(this.initialModelValue);
                 Object.assign(this.modelValue, copy);
@@ -49,0 +47,0 @@ }

package.json

 {
   "name": "vue3-form-validation",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "Vue composition function for Form Validation",
@@ -5,0 +5,0 @@ "author": {

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

42339

increased by2.07%

Number of package files

47

increased by4.44%

Lines of code

858

increased by3.13%

No dependency changes