vee-validate 4.6.10 → 4.7.1

package/dist/vee-validate.esm.js

@@ -1,9 +1,9 @@
 /**
-  * vee-validate v4.6.10
+  * vee-validate v4.7.1
   * (c) 2022 Abdelrahman Awad
   * @license MIT
   */
-import { inject, getCurrentInstance, warn as warn$1, ref, unref, computed, reactive, watch, onUnmounted, nextTick, onMounted, provide, isRef, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, watchEffect, markRaw } from 'vue';
+import { getCurrentInstance, inject, warn as warn$1, ref, watch, unref, computed, reactive, onUnmounted, nextTick, onMounted, provide, isRef, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, watchEffect, markRaw } from 'vue';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 
 function isCallable(fn) {
@@ -225,50 +225,59 @@ function isFile(a) {
     return a instanceof File;
 }
 
-// do not edit .js files directly - edit src/index.jst
-
-
-
-var fastDeepEqual = function equal(a, b) {
-  if (a === b) return true;
-
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
-    if (a.constructor !== b.constructor) return false;
-
-    var length, i, keys;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
-    }
-
-
-
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+function set(obj, key, val) {
+	if (typeof val.value === 'object') val.value = klona(val.value);
+	if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
+		Object.defineProperty(obj, key, val);
+	} else obj[key] = val.value;
+}
 
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) return false;
+function klona(x) {
+	if (typeof x !== 'object') return x;
 
-    for (i = length; i-- !== 0;)
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+	var i=0, k, list, tmp, str=Object.prototype.toString.call(x);
 
-    for (i = length; i-- !== 0;) {
-      var key = keys[i];
+	if (str === '[object Object]') {
+		tmp = Object.create(x.__proto__ || null);
+	} else if (str === '[object Array]') {
+		tmp = Array(x.length);
+	} else if (str === '[object Set]') {
+		tmp = new Set;
+		x.forEach(function (val) {
+			tmp.add(klona(val));
+		});
+	} else if (str === '[object Map]') {
+		tmp = new Map;
+		x.forEach(function (val, key) {
+			tmp.set(klona(key), klona(val));
+		});
+	} else if (str === '[object Date]') {
+		tmp = new Date(+x);
+	} else if (str === '[object RegExp]') {
+		tmp = new RegExp(x.source, x.flags);
+	} else if (str === '[object DataView]') {
+		tmp = new x.constructor( klona(x.buffer) );
+	} else if (str === '[object ArrayBuffer]') {
+		tmp = x.slice(0);
+	} else if (str.slice(-6) === 'Array]') {
+		// ArrayBuffer.isView(x)
+		// ~> `new` bcuz `Buffer.slice` => ref
+		tmp = new x.constructor(x);
+	}
 
-      if (!equal(a[key], b[key])) return false;
-    }
+	if (tmp) {
+		for (list=Object.getOwnPropertySymbols(x); i < list.length; i++) {
+			set(tmp, list[i], Object.getOwnPropertyDescriptor(x, list[i]));
+		}
 
-    return true;
-  }
+		for (i=0, list=Object.getOwnPropertyNames(x); i < list.length; i++) {
+			if (Object.hasOwnProperty.call(tmp, k=list[i]) && tmp[k] === x[k]) continue;
+			set(tmp, k, Object.getOwnPropertyDescriptor(x, k));
+		}
+	}
 
-  // true if both NaN, false otherwise
-  return a!==a && b!==b;
-};
+	return tmp || x;
+}
 
 function cleanupNonNestedPath(path) {
     if (isNotNestedPath(path)) {
@@ -391,11 +400,11 @@ function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
     if (Array.isArray(currentValue)) {
         const newVal = [...currentValue];
         // Use isEqual since checked object values can possibly fail the equality check #3883
-        const idx = newVal.findIndex(v => fastDeepEqual(v, checkedValue));
+        const idx = newVal.findIndex(v => isEqual(v, checkedValue));
         idx >= 0 ? newVal.splice(idx, 1) : newVal.push(checkedValue);
         return newVal;
     }
-    return fastDeepEqual(currentValue, checkedValue) ? uncheckedValue : checkedValue;
+    return isEqual(currentValue, checkedValue) ? uncheckedValue : checkedValue;
 }
 /**
  * Creates a throttled function that only invokes the provided function (`func`) at most once per within a given number of milliseconds
@@ -455,6 +464,26 @@ function withLatest(fn, onDone) {
         onDone(result, args);
         return result;
     };
+}
+function computedDeep({ get, set }) {
+    const baseRef = ref(klona(get()));
+    watch(get, newValue => {
+        if (isEqual(newValue, baseRef.value)) {
+            return;
+        }
+        baseRef.value = klona(newValue);
+    }, {
+        deep: true,
+    });
+    watch(baseRef, newValue => {
+        if (isEqual(newValue, get())) {
+            return;
+        }
+        set(klona(newValue));
+    }, {
+        deep: true,
+    });
+    return baseRef;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -844,64 +873,10 @@ async function validateObjectSchema(schema, values, opts) {
     };
 }
 
-function set(obj, key, val) {
-	if (typeof val.value === 'object') val.value = klona(val.value);
-	if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
-		Object.defineProperty(obj, key, val);
-	} else obj[key] = val.value;
-}
-
-function klona(x) {
-	if (typeof x !== 'object') return x;
-
-	var i=0, k, list, tmp, str=Object.prototype.toString.call(x);
-
-	if (str === '[object Object]') {
-		tmp = Object.create(x.__proto__ || null);
-	} else if (str === '[object Array]') {
-		tmp = Array(x.length);
-	} else if (str === '[object Set]') {
-		tmp = new Set;
-		x.forEach(function (val) {
-			tmp.add(klona(val));
-		});
-	} else if (str === '[object Map]') {
-		tmp = new Map;
-		x.forEach(function (val, key) {
-			tmp.set(klona(key), klona(val));
-		});
-	} else if (str === '[object Date]') {
-		tmp = new Date(+x);
-	} else if (str === '[object RegExp]') {
-		tmp = new RegExp(x.source, x.flags);
-	} else if (str === '[object DataView]') {
-		tmp = new x.constructor( klona(x.buffer) );
-	} else if (str === '[object ArrayBuffer]') {
-		tmp = x.slice(0);
-	} else if (str.slice(-6) === 'Array]') {
-		// ArrayBuffer.isView(x)
-		// ~> `new` bcuz `Buffer.slice` => ref
-		tmp = new x.constructor(x);
-	}
-
-	if (tmp) {
-		for (list=Object.getOwnPropertySymbols(x); i < list.length; i++) {
-			set(tmp, list[i], Object.getOwnPropertyDescriptor(x, list[i]));
-		}
-
-		for (i=0, list=Object.getOwnPropertyNames(x); i < list.length; i++) {
-			if (Object.hasOwnProperty.call(tmp, k=list[i]) && tmp[k] === x[k]) continue;
-			set(tmp, k, Object.getOwnPropertyDescriptor(x, k));
-		}
-	}
-
-	return tmp || x;
-}
-
 let ID_COUNTER = 0;
 function useFieldState(path, init) {
-    const { value, initialValue, setInitialValue } = _useFieldValue(path, init.modelValue, !init.standalone);
-    const { errorMessage, errors, setErrors } = _useFieldErrors(path, !init.standalone);
+    const { value, initialValue, setInitialValue } = _useFieldValue(path, init.modelValue, init.form);
+    const { errorMessage, errors, setErrors } = _useFieldErrors(path, init.form);
     const meta = _useFieldMeta(value, initialValue, errors);
     const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
     function setState(state) {
@@ -933,8 +908,7 @@ function useFieldState(path, init) {
 /**
  * Creates the field value and resolves the initial value
  */
-function _useFieldValue(path, modelValue, shouldInjectForm = true) {
-    const form = shouldInjectForm === true ? injectWithSelf(FormContextKey, undefined) : undefined;
+function _useFieldValue(path, modelValue, form) {
     const modelRef = ref(unref(modelValue));
     function resolveInitialValue() {
         if (!form) {
@@ -1005,8 +979,7 @@ function _useFieldMeta(currentValue, initialValue, errors) {
 /**
  * Creates the error message state for the field state
  */
-function _useFieldErrors(path, shouldInjectForm) {
-    const form = shouldInjectForm ? injectWithSelf(FormContextKey, undefined) : undefined;
+function _useFieldErrors(path, form) {
     function normalizeErrors(messages) {
         if (!messages) {
             return [];
@@ -1403,13 +1376,14 @@ function useField(name, rules, opts) {
     return _useField(name, rules, opts);
 }
 function _useField(name, rules, opts) {
-    const { initialValue: modelValue, validateOnMount, bails, type, checkedValue, label, validateOnValueUpdate, uncheckedValue, standalone, keepValueOnUnmount, modelPropName, syncVModel, } = normalizeOptions(unref(name), opts);
-    const form = !standalone ? injectWithSelf(FormContextKey) : undefined;
+    const { initialValue: modelValue, validateOnMount, bails, type, checkedValue, label, validateOnValueUpdate, uncheckedValue, controlled, keepValueOnUnmount, modelPropName, syncVModel, form: controlForm, } = normalizeOptions(unref(name), opts);
+    const injectedForm = controlled ? injectWithSelf(FormContextKey) : undefined;
+    const form = controlForm || injectedForm;
     // a flag indicating if the field is about to be removed/unmounted.
     let markedForRemoval = false;
     const { id, value, initialValue, meta, setState, errors, errorMessage } = useFieldState(name, {
         modelValue,
-        standalone,
+        form,
     });
     if (syncVModel) {
         useVModel({ value, prop: modelPropName, handleChange });
@@ -1626,20 +1600,20 @@ function normalizeOptions(name, opts) {
         initialValue: undefined,
         validateOnMount: false,
         bails: true,
-        rules: '',
         label: name,
         validateOnValueUpdate: true,
-        standalone: false,
         keepValueOnUnmount: undefined,
         modelPropName: 'modelValue',
         syncVModel: true,
+        controlled: true,
     });
     if (!opts) {
         return defaults();
     }
     // TODO: Deprecate this in next major release
     const checkedValue = 'valueProp' in opts ? opts.valueProp : opts.checkedValue;
-    return Object.assign(Object.assign(Object.assign({}, defaults()), (opts || {})), { checkedValue });
+    const controlled = 'standalone' in opts ? !opts.standalone : opts.controlled;
+    return Object.assign(Object.assign(Object.assign({}, defaults()), (opts || {})), { controlled: controlled !== null && controlled !== void 0 ? controlled : true, checkedValue });
 }
 /**
  * Extracts the validation rules from a schema
@@ -1910,6 +1884,7 @@ let FORM_COUNTER = 0;
 function useForm(opts) {
     var _a;
     const formId = FORM_COUNTER++;
+    const controlledModelPaths = new Set();
     // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
     // TODO: This won't be needed if we centralize all the state inside the `form` for form inputs
     let RESET_LOCK = false;
@@ -1972,6 +1947,13 @@ function useForm(opts) {
     const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(fieldsByPath, formValues, opts === null || opts === void 0 ? void 0 : opts.initialValues);
     // form meta aggregations
     const meta = useFormMeta(fieldsByPath, formValues, originalInitialValues, errors);
+    const controlledValues = computed(() => {
+        return [...controlledModelPaths, ...keysOf(fieldsByPath.value)].reduce((acc, path) => {
+            const value = getFromPath(formValues, path);
+            setInPath(acc, path, value);
+            return acc;
+        }, {});
+    });
     const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
     /**
      * Batches validation runs in 5ms batches
@@ -2021,10 +2003,65 @@ function useForm(opts) {
             return validation;
         }, { valid: formResult.valid, results: {}, errors: {} });
     });
+    function makeSubmissionFactory(onlyControlled) {
+        return function submitHandlerFactory(fn, onValidationError) {
+            return function submissionHandler(e) {
+                if (e instanceof Event) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                // Touch all fields
+                setTouched(keysOf(fieldsByPath.value).reduce((acc, field) => {
+                    acc[field] = true;
+                    return acc;
+                }, {}));
+                isSubmitting.value = true;
+                submitCount.value++;
+                return validate()
+                    .then(result => {
+                    const values = klona(formValues);
+                    if (result.valid && typeof fn === 'function') {
+                        const controlled = klona(controlledValues.value);
+                        return fn(onlyControlled ? controlled : values, {
+                            evt: e,
+                            controlledValues: controlled,
+                            setErrors,
+                            setFieldError,
+                            setTouched,
+                            setFieldTouched,
+                            setValues,
+                            setFieldValue,
+                            resetForm,
+                        });
+                    }
+                    if (!result.valid && typeof onValidationError === 'function') {
+                        onValidationError({
+                            values,
+                            evt: e,
+                            errors: result.errors,
+                            results: result.results,
+                        });
+                    }
+                })
+                    .then(returnVal => {
+                    isSubmitting.value = false;
+                    return returnVal;
+                }, err => {
+                    isSubmitting.value = false;
+                    // re-throw the err so it doesn't go silent
+                    throw err;
+                });
+            };
+        };
+    }
+    const handleSubmitImpl = makeSubmissionFactory(false);
+    const handleSubmit = handleSubmitImpl;
+    handleSubmit.withControlled = makeSubmissionFactory(true);
     const formCtx = {
         formId,
         fieldsByPath,
         values: formValues,
+        controlledValues,
         errorBag,
         errors,
         schema,
@@ -2123,7 +2160,7 @@ function useForm(opts) {
         fieldArrays.forEach(f => f && f.reset());
     }
     function createModel(path) {
-        const { value } = _useFieldValue(path);
+        const { value } = _useFieldValue(path, undefined, formCtx);
         watch(value, () => {
             if (!fieldExists(unref(path))) {
                 validate({ mode: 'validated-only' });
@@ -2131,6 +2168,7 @@ function useForm(opts) {
         }, {
             deep: true,
         });
+        controlledModelPaths.add(unref(path));
         return value;
     }
     function useFieldModel(path) {
@@ -2275,12 +2313,18 @@ function useForm(opts) {
             // This used to be handled in the useField composable but the form has better context on when it should/not happen.
             // if it does belong to it that means the group still exists
             // #3844
-            if (isSameGroup && Array.isArray(currentGroupValue) && !shouldKeepValue) {
-                const valueIdx = currentGroupValue.findIndex(i => isEqual(i, unref(field.checkedValue)));
-                if (valueIdx > -1) {
-                    const newVal = [...currentGroupValue];
-                    newVal.splice(valueIdx, 1);
-                    setFieldValue(fieldName, newVal, { force: true });
+            if (isSameGroup && !shouldKeepValue) {
+                if (Array.isArray(currentGroupValue)) {
+                    const valueIdx = currentGroupValue.findIndex(i => isEqual(i, unref(field.checkedValue)));
+                    if (valueIdx > -1) {
+                        const newVal = [...currentGroupValue];
+                        newVal.splice(valueIdx, 1);
+                        setFieldValue(fieldName, newVal, { force: true });
+                    }
+                }
+                else if (currentGroupValue === unref(field.checkedValue)) {
+                    // Remove field if it is a group but does not have an array value, like for radio inputs #3963
+                    unsetPath(formValues, fieldName);
                 }
             }
             // Field was removed entirely, we should unset its path
@@ -2293,7 +2337,8 @@ function useForm(opts) {
                 if (shouldKeepValue) {
                     return;
                 }
-                if (isGroup && !isEmptyContainer(getFromPath(formValues, fieldName))) {
+                // Don't apply emptyContainer check unless the current group value is an array
+                if (isGroup && Array.isArray(currentGroupValue) && !isEmptyContainer(currentGroupValue)) {
                     return;
                 }
                 unsetPath(formValues, fieldName);
@@ -2347,55 +2392,6 @@ function useForm(opts) {
         }
         return fieldInstance.validate();
     }
-    function handleSubmit(fn, onValidationError) {
-        return function submissionHandler(e) {
-            if (e instanceof Event) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            // Touch all fields
-            setTouched(keysOf(fieldsByPath.value).reduce((acc, field) => {
-                acc[field] = true;
-                return acc;
-            }, {}));
-            isSubmitting.value = true;
-            submitCount.value++;
-            return validate()
-                .then(result => {
-                if (result.valid && typeof fn === 'function') {
-                    return fn(klona(formValues), {
-                        evt: e,
-                        setErrors,
-                        setFieldError,
-                        setTouched,
-                        setFieldTouched,
-                        setValues,
-                        setFieldValue,
-                        resetForm,
-                    });
-                }
-                if (!result.valid && typeof onValidationError === 'function') {
-                    onValidationError({
-                        values: klona(formValues),
-                        evt: e,
-                        errors: result.errors,
-                        results: result.results,
-                    });
-                }
-            })
-                .then(returnVal => {
-                isSubmitting.value = false;
-                return returnVal;
-            }, err => {
-                isSubmitting.value = false;
-                // re-throw the err so it doesn't go silent
-                throw err;
-            });
-        };
-    }
-    function setFieldInitialValue(path, value) {
-        setInPath(initialValues.value, path, klona(value));
-    }
     function unsetInitialValue(path) {
         unsetPath(initialValues.value, path);
     }
@@ -2409,6 +2405,9 @@ function useForm(opts) {
             setInPath(originalInitialValues.value, path, klona(value));
         }
     }
+    function setFieldInitialValue(path, value) {
+        setInPath(initialValues.value, path, klona(value));
+    }
     async function _validateSchema() {
         const schemaValue = unref(schema);
         if (!schemaValue) {
@@ -2460,26 +2459,7 @@ function useForm(opts) {
             deep: true,
         });
     }
-    return {
-        errors,
-        meta,
-        values: formValues,
-        isSubmitting,
-        submitCount,
-        validate,
-        validateField,
-        handleReset: () => resetForm(),
-        resetForm,
-        handleSubmit,
-        submitForm,
-        setFieldError,
-        setErrors,
-        setFieldValue,
-        setValues,
-        setFieldTouched,
-        setTouched,
-        useFieldModel,
-    };
+    return Object.assign(Object.assign({}, formCtx), { handleReset: () => resetForm(), submitForm });
 }
 /**
  * Manages form meta aggregation
@@ -2639,7 +2619,7 @@ const FormImpl = defineComponent({
         const initialValues = toRef(props, 'initialValues');
         const validationSchema = toRef(props, 'validationSchema');
         const keepValues = toRef(props, 'keepValues');
-        const { errors, values, meta, isSubmitting, submitCount, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, } = useForm({
+        const { errors, values, meta, isSubmitting, submitCount, controlledValues, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, } = useForm({
             validationSchema: validationSchema.value ? validationSchema : undefined,
             initialValues,
             initialErrors: props.initialErrors,
@@ -2674,6 +2654,7 @@ const FormImpl = defineComponent({
                 values: values,
                 isSubmitting: isSubmitting.value,
                 submitCount: submitCount.value,
+                controlledValues: controlledValues.value,
                 validate,
                 validateField,
                 handleSubmit: handleScopedSlotSubmit,
@@ -2767,7 +2748,7 @@ function useFieldArray(arrayPath) {
         const key = entryCounter++;
         const entry = {
             key,
-            value: computed({
+            value: computedDeep({
                 get() {
                     const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []) || [];
                     const idx = fields.value.findIndex(e => e.key === key);
@@ -2859,6 +2840,7 @@ function useFieldArray(arrayPath) {
             return;
         }
         form === null || form === void 0 ? void 0 : form.setFieldValue(`${pathName}[${idx}]`, value);
+        form === null || form === void 0 ? void 0 : form.validate({ mode: 'validated-only' });
     }
     function prepend(value) {
         const pathName = unref(arrayPath);