vee-validate 4.6.10 → 4.7.1

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.6.10
+  * vee-validate v4.7.1
   * (c) 2022 Abdelrahman Awad
   * @license MIT
   */
@@ -228,50 +228,59 @@
       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)) {
@@ -394,11 +403,11 @@
       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;
   }
   function debounceAsync(inner, ms = 0) {
       let timer = null;
@@ -440,6 +449,26 @@
           onDone(result, args);
           return result;
       };
+  }
+  function computedDeep({ get, set }) {
+      const baseRef = vue.ref(klona(get()));
+      vue.watch(get, newValue => {
+          if (isEqual(newValue, baseRef.value)) {
+              return;
+          }
+          baseRef.value = klona(newValue);
+      }, {
+          deep: true,
+      });
+      vue.watch(baseRef, newValue => {
+          if (isEqual(newValue, get())) {
+              return;
+          }
+          set(klona(newValue));
+      }, {
+          deep: true,
+      });
+      return baseRef;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -829,64 +858,10 @@
       };
   }
 
-  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) {
@@ -918,8 +893,7 @@
   /**
    * 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 = vue.ref(vue.unref(modelValue));
       function resolveInitialValue() {
           if (!form) {
@@ -990,8 +964,7 @@
   /**
    * 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 [];
@@ -1028,13 +1001,14 @@
       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(vue.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(vue.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 });
@@ -1242,20 +1216,20 @@
           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
@@ -1523,6 +1497,7 @@
   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;
@@ -1585,6 +1560,13 @@
       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 = vue.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
@@ -1634,10 +1616,65 @@
               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,
@@ -1736,7 +1773,7 @@
           fieldArrays.forEach(f => f && f.reset());
       }
       function createModel(path) {
-          const { value } = _useFieldValue(path);
+          const { value } = _useFieldValue(path, undefined, formCtx);
           vue.watch(value, () => {
               if (!fieldExists(vue.unref(path))) {
                   validate({ mode: 'validated-only' });
@@ -1744,6 +1781,7 @@
           }, {
               deep: true,
           });
+          controlledModelPaths.add(vue.unref(path));
           return value;
       }
       function useFieldModel(path) {
@@ -1888,12 +1926,18 @@
               // 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, vue.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, vue.unref(field.checkedValue)));
+                      if (valueIdx > -1) {
+                          const newVal = [...currentGroupValue];
+                          newVal.splice(valueIdx, 1);
+                          setFieldValue(fieldName, newVal, { force: true });
+                      }
+                  }
+                  else if (currentGroupValue === vue.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
@@ -1906,7 +1950,8 @@
                   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);
@@ -1960,55 +2005,6 @@
           }
           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);
       }
@@ -2022,6 +2018,9 @@
               setInPath(originalInitialValues.value, path, klona(value));
           }
       }
+      function setFieldInitialValue(path, value) {
+          setInPath(initialValues.value, path, klona(value));
+      }
       async function _validateSchema() {
           const schemaValue = vue.unref(schema);
           if (!schemaValue) {
@@ -2067,26 +2066,7 @@
       }
       // Provide injections
       vue.provide(FormContextKey, formCtx);
-      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
@@ -2246,7 +2226,7 @@
           const initialValues = vue.toRef(props, 'initialValues');
           const validationSchema = vue.toRef(props, 'validationSchema');
           const keepValues = vue.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,
@@ -2281,6 +2261,7 @@
                   values: values,
                   isSubmitting: isSubmitting.value,
                   submitCount: submitCount.value,
+                  controlledValues: controlledValues.value,
                   validate,
                   validateField,
                   handleSubmit: handleScopedSlotSubmit,
@@ -2374,7 +2355,7 @@
           const key = entryCounter++;
           const entry = {
               key,
-              value: vue.computed({
+              value: computedDeep({
                   get() {
                       const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []) || [];
                       const idx = fields.value.findIndex(e => e.key === key);
@@ -2466,6 +2447,7 @@
               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 = vue.unref(arrayPath);