vee-validate 4.5.11 → 4.6.0

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.5.11
+  * vee-validate v4.6.0
   * (c) 2022 Abdelrahman Awad
   * @license MIT
   */
@@ -56,18 +56,6 @@
   function isLocator(value) {
       return isCallable(value) && !!value.__locatorRef;
   }
-  /**
-   * Checks if an tag name is a native HTML tag and not a Vue component
-   */
-  function isHTMLTag(tag) {
-      return ['input', 'textarea', 'select'].includes(tag);
-  }
-  /**
-   * Checks if an input is of type file
-   */
-  function isFileInputNode(tag, attrs) {
-      return isHTMLTag(tag) && attrs.type === 'file';
-  }
   function isYupValidator(value) {
       return !!value && isCallable(value.validate);
   }
@@ -120,7 +108,7 @@
    * For multi-selects because the value binding will reset the value
    */
   function shouldHaveValueBinding(tag, attrs) {
-      return isNativeMultiSelectNode(tag, attrs) || isFileInputNode(tag, attrs);
+      return !isNativeMultiSelectNode(tag, attrs) && attrs.type !== 'file' && !hasCheckedAttr(attrs.type);
   }
   function isFormSubmitEvent(evt) {
       return isEvent(evt) && evt.target && 'submit' in evt.target;
@@ -286,6 +274,15 @@
           }, ms);
           return new Promise(resolve => resolves.push(resolve));
       };
+  }
+  function applyModelModifiers(value, modifiers) {
+      if (!isObject(modifiers)) {
+          return;
+      }
+      if (modifiers.number) {
+          return toNumber(value);
+      }
+      return value;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -329,7 +326,8 @@
           return getBoundValue(input);
       }
       if (input.type === 'file' && input.files) {
-          return Array.from(input.files);
+          const files = Array.from(input.files);
+          return input.multiple ? files : files[0];
       }
       if (isNativeMultiSelect(input)) {
           return Array.from(input.options)
@@ -828,8 +826,8 @@
   /**
    * Creates the field value and resolves the initial value
    */
-  function _useFieldValue(path, modelValue, shouldInjectForm) {
-      const form = shouldInjectForm ? injectWithSelf(FormContextKey, undefined) : undefined;
+  function _useFieldValue(path, modelValue, shouldInjectForm = true) {
+      const form = shouldInjectForm === true ? injectWithSelf(FormContextKey, undefined) : undefined;
       const modelRef = vue.ref(vue.unref(modelValue));
       function resolveInitialValue() {
           if (!form) {
@@ -859,7 +857,7 @@
       // prioritize model value over form values
       // #3429
       const currentValue = modelValue ? vue.unref(modelValue) : getFromPath(form.values, vue.unref(path), vue.unref(initialValue));
-      form.stageInitialValue(vue.unref(path), currentValue);
+      form.stageInitialValue(vue.unref(path), currentValue, true);
       // otherwise use a computed setter that triggers the `setFieldValue`
       const value = vue.computed({
           get() {
@@ -938,7 +936,7 @@
       return _useField(name, rules, opts);
   }
   function _useField(name, rules, opts) {
-      const { initialValue: modelValue, validateOnMount, bails, type, checkedValue, label, validateOnValueUpdate, uncheckedValue, standalone, } = normalizeOptions(vue.unref(name), 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;
       // a flag indicating if the field is about to be removed/unmounted.
       let markedForRemoval = false;
@@ -946,6 +944,9 @@
           modelValue,
           standalone,
       });
+      if (syncVModel) {
+          useVModel({ value, prop: modelPropName, handleChange });
+      }
       /**
        * Handles common onBlur meta update
        */
@@ -1004,13 +1005,13 @@
           return validateValidStateOnly();
       }
       // Common input/change event handler
-      const handleChange = (e, shouldValidate = true) => {
+      function handleChange(e, shouldValidate = true) {
           const newValue = normalizeEventValue(e);
           value.value = newValue;
           if (!validateOnValueUpdate && shouldValidate) {
               validateWithStateMutation();
           }
-      };
+      }
       // Runs the initial validation
       vue.onMounted(() => {
           if (validateOnMount) {
@@ -1027,7 +1028,13 @@
       }
       let unwatchValue;
       function watchValue() {
-          unwatchValue = vue.watch(value, validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly, {
+          unwatchValue = vue.watch(value, (val, oldVal) => {
+              if (es6(val, oldVal)) {
+                  return;
+              }
+              const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+              validateFn();
+          }, {
               deep: true,
           });
       }
@@ -1068,6 +1075,7 @@
           checkedValue,
           uncheckedValue,
           bails,
+          keepValueOnUnmount,
           resetField,
           handleReset: () => resetField(),
           validate: validate$1,
@@ -1145,6 +1153,9 @@
           label: name,
           validateOnValueUpdate: true,
           standalone: false,
+          keepValueOnUnmount: undefined,
+          modelPropName: 'modelValue',
+          syncVModel: true,
       });
       if (!opts) {
           return defaults();
@@ -1176,8 +1187,8 @@
               return Array.isArray(currentValue) ? currentValue.includes(checkedVal) : checkedVal === currentValue;
           });
           function handleCheckboxChange(e, shouldValidate = true) {
-              var _a, _b;
-              if (checked.value === ((_b = (_a = e) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.checked)) {
+              var _a;
+              if (checked.value === ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.checked)) {
                   return;
               }
               let newValue = normalizeEventValue(e);
@@ -1188,8 +1199,10 @@
               handleChange(newValue, shouldValidate);
           }
           vue.onBeforeUnmount(() => {
-              // toggles the checkbox value if it was checked
-              if (checked.value) {
+              var _a, _b;
+              const shouldKeepValue = (_b = (_a = vue.unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : vue.unref(form === null || form === void 0 ? void 0 : form.keepValuesOnUnmount)) !== null && _b !== void 0 ? _b : false;
+              // toggles the checkbox value if it was checked and the unset behavior is set
+              if (checked.value && !shouldKeepValue) {
                   handleCheckboxChange(vue.unref(checkedValue), false);
               }
           });
@@ -1198,6 +1211,38 @@
               uncheckedValue, handleChange: handleCheckboxChange });
       }
       return patchCheckboxApi(_useField(name, rules, opts));
+  }
+  function useVModel({ prop, value, handleChange }) {
+      const vm = vue.getCurrentInstance();
+      /* istanbul ignore next */
+      if (!vm) {
+          return;
+      }
+      const propName = prop || 'modelValue';
+      const emitName = `update:${propName}`;
+      // Component doesn't have a model prop setup (must be defined on the props)
+      if (!(propName in vm.props)) {
+          return;
+      }
+      vue.watch(value, newValue => {
+          if (es6(newValue, getCurrentModelValue(vm, propName))) {
+              return;
+          }
+          vm.emit(emitName, newValue);
+      });
+      vue.watch(() => getCurrentModelValue(vm, propName), propValue => {
+          if (propValue === IS_ABSENT && value.value === undefined) {
+              return;
+          }
+          const newValue = propValue === IS_ABSENT ? undefined : propValue;
+          if (es6(newValue, applyModelModifiers(value.value, vm.props.modelModifiers))) {
+              return;
+          }
+          handleChange(newValue);
+      });
+  }
+  function getCurrentModelValue(vm, propName) {
+      return vm.props[propName];
   }
 
   const FieldImpl = vue.defineComponent({
@@ -1264,13 +1309,17 @@
               type: Boolean,
               default: false,
           },
+          keepValue: {
+              type: Boolean,
+              default: undefined,
+          },
       },
       setup(props, ctx) {
           const rules = vue.toRef(props, 'rules');
           const name = vue.toRef(props, 'name');
           const label = vue.toRef(props, 'label');
           const uncheckedValue = vue.toRef(props, 'uncheckedValue');
-          const hasModelEvents = isPropPresent(props, 'onUpdate:modelValue');
+          const keepValue = vue.toRef(props, 'keepValue');
           const { errors, value, errorMessage, validate: validateField, handleChange, handleBlur, setTouched, resetField, handleReset, meta, checked, setErrors, } = useField(name, rules, {
               validateOnMount: props.validateOnMount,
               bails: props.bails,
@@ -1282,25 +1331,22 @@
               uncheckedValue,
               label,
               validateOnValueUpdate: false,
+              keepValueOnUnmount: keepValue,
           });
           // If there is a v-model applied on the component we need to emit the `update:modelValue` whenever the value binding changes
-          const onChangeHandler = hasModelEvents
-              ? function handleChangeWithModel(e, shouldValidate = true) {
-                  handleChange(e, shouldValidate);
-                  ctx.emit('update:modelValue', value.value);
-              }
-              : handleChange;
+          const onChangeHandler = function handleChangeWithModel(e, shouldValidate = true) {
+              handleChange(e, shouldValidate);
+              ctx.emit('update:modelValue', value.value);
+          };
           const handleInput = (e) => {
               if (!hasCheckedAttr(ctx.attrs.type)) {
                   value.value = normalizeEventValue(e);
               }
           };
-          const onInputHandler = hasModelEvents
-              ? function handleInputWithModel(e) {
-                  handleInput(e);
-                  ctx.emit('update:modelValue', value.value);
-              }
-              : handleInput;
+          const onInputHandler = function handleInputWithModel(e) {
+              handleInput(e);
+              ctx.emit('update:modelValue', value.value);
+          };
           const fieldProps = vue.computed(() => {
               const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = resolveValidationTriggers(props);
               const baseOnBlur = [handleBlur, ctx.attrs.onBlur, validateOnBlur ? validateField : undefined].filter(Boolean);
@@ -1316,26 +1362,12 @@
               if (hasCheckedAttr(ctx.attrs.type) && checked) {
                   attrs.checked = checked.value;
               }
-              else {
-                  attrs.value = value.value;
-              }
               const tag = resolveTag(props, ctx);
               if (shouldHaveValueBinding(tag, ctx.attrs)) {
-                  delete attrs.value;
+                  attrs.value = value.value;
               }
               return attrs;
           });
-          const modelValue = vue.toRef(props, 'modelValue');
-          vue.watch(modelValue, newModelValue => {
-              // Don't attempt to sync absent values
-              if (newModelValue === IS_ABSENT && value.value === undefined) {
-                  return;
-              }
-              if (newModelValue !== applyModifiers(value.value, props.modelModifiers)) {
-                  value.value = newModelValue === IS_ABSENT ? undefined : newModelValue;
-                  validateField();
-              }
-          });
           function slotProps() {
               return {
                   field: fieldProps.value,
@@ -1387,12 +1419,6 @@
           validateOnModelUpdate: (_d = props.validateOnModelUpdate) !== null && _d !== void 0 ? _d : validateOnModelUpdate,
       };
   }
-  function applyModifiers(value, modifiers) {
-      if (modifiers.number) {
-          return toNumber(value);
-      }
-      return value;
-  }
   function resolveInitialValue(props, ctx) {
       // Gets the initial value either from `value` prop/attr or `v-model` binding (modelValue)
       // For checkboxes and radio buttons it will always be the model value not the `value` attribute
@@ -1405,6 +1431,7 @@
 
   let FORM_COUNTER = 0;
   function useForm(opts) {
+      var _a;
       const formId = FORM_COUNTER++;
       // 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
@@ -1415,8 +1442,8 @@
       const isSubmitting = vue.ref(false);
       // The number of times the user tried to submit the form
       const submitCount = vue.ref(0);
-      // dictionary for field arrays to receive various signals like reset
-      const fieldArraysLookup = {};
+      // field arrays managed by this form
+      const fieldArrays = [];
       // a private ref for all form values
       const formValues = vue.reactive(klona(vue.unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {}));
       // the source of errors for the form fields
@@ -1463,10 +1490,11 @@
       // mutable non-reactive reference to initial errors
       // we need this to process initial errors then unset them
       const initialErrors = Object.assign({}, ((opts === null || opts === void 0 ? void 0 : opts.initialErrors) || {}));
+      const keepValuesOnUnmount = (_a = opts === null || opts === void 0 ? void 0 : opts.keepValuesOnUnmount) !== null && _a !== void 0 ? _a : false;
       // initial form values
       const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(fieldsByPath, formValues, opts === null || opts === void 0 ? void 0 : opts.initialValues);
       // form meta aggregations
-      const meta = useFormMeta(fieldsByPath, formValues, initialValues, errors);
+      const meta = useFormMeta(fieldsByPath, formValues, originalInitialValues, errors);
       const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
       const formCtx = {
           formId,
@@ -1478,7 +1506,8 @@
           submitCount,
           meta,
           isSubmitting,
-          fieldArraysLookup,
+          fieldArrays,
+          keepValuesOnUnmount,
           validateSchema: vue.unref(schema) ? validateSchema : undefined,
           validate,
           register: registerField,
@@ -1496,6 +1525,7 @@
           stageInitialValue,
           unsetInitialValue,
           setFieldInitialValue,
+          useFieldModel,
       };
       function isFieldGroup(fieldOrGroup) {
           return Array.isArray(fieldOrGroup);
@@ -1565,7 +1595,22 @@
               setFieldValue(path, fields[path]);
           });
           // regenerate the arrays when the form values change
-          Object.values(fieldArraysLookup).forEach(f => f && f.reset());
+          fieldArrays.forEach(f => f && f.reset());
+      }
+      function createModel(path) {
+          const { value } = _useFieldValue(path);
+          vue.watch(value, () => {
+              if (!fieldExists(vue.unref(path))) {
+                  validate({ mode: 'validated-only' });
+              }
+          });
+          return value;
+      }
+      function useFieldModel(path) {
+          if (!Array.isArray(path)) {
+              return createModel(path);
+          }
+          return path.map(createModel);
       }
       /**
        * Sets the touched meta state on a field
@@ -1689,13 +1734,26 @@
       }
       function unregisterField(field) {
           const fieldName = vue.unref(field.name);
+          const fieldInstance = fieldsByPath.value[fieldName];
+          const isGroup = !!fieldInstance && isFieldGroup(fieldInstance);
           removeFieldFromPath(field, fieldName);
           vue.nextTick(() => {
+              var _a;
               // clears a field error on unmounted
               // we wait till next tick to make sure if the field is completely removed and doesn't have any siblings like checkboxes
               // #3384
               if (!fieldExists(fieldName)) {
                   setFieldError(fieldName, undefined);
+                  // Checks if the field was configured to be unset during unmount or not
+                  // Checks both the form-level config and field-level one
+                  // Field has the priority if it is set, otherwise it goes to the form settings
+                  const shouldKeepValue = (_a = vue.unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : vue.unref(keepValuesOnUnmount);
+                  if (shouldKeepValue) {
+                      return;
+                  }
+                  if (isGroup && !isEmptyContainer(getFromPath(formValues, fieldName))) {
+                      return;
+                  }
                   unsetPath(formValues, fieldName);
               }
           });
@@ -1802,9 +1860,12 @@
       /**
        * Sneaky function to set initial field values
        */
-      function stageInitialValue(path, value) {
+      function stageInitialValue(path, value, updateOriginal = false) {
           setInPath(formValues, path, value);
           setFieldInitialValue(path, value);
+          if (updateOriginal) {
+              setInPath(originalInitialValues.value, path, klona(value));
+          }
       }
       async function _validateSchema() {
           const schemaValue = vue.unref(schema);
@@ -1821,10 +1882,12 @@
       }
       /**
        * Batches validation runs in 5ms batches
+       * Must have two distinct batch queues to make sure they don't override each other settings #3783
        */
-      const debouncedSchemaValidation = debounceAsync(_validateSchema, 5);
+      const debouncedSilentValidation = debounceAsync(_validateSchema, 5);
+      const debouncedValidation = debounceAsync(_validateSchema, 5);
       async function validateSchema(mode) {
-          const formResult = await debouncedSchemaValidation();
+          const formResult = await (mode === 'silent' ? debouncedSilentValidation() : debouncedValidation());
           // fields by id lookup
           const fieldsById = formCtx.fieldsByPath.value || {};
           // errors fields names, we need it to also check if custom errors are updated
@@ -1914,6 +1977,7 @@
           setValues,
           setFieldTouched,
           setTouched,
+          useFieldModel,
       };
   }
   /**
@@ -2065,16 +2129,22 @@
               type: Function,
               default: undefined,
           },
+          keepValues: {
+              type: Boolean,
+              default: false,
+          },
       },
       setup(props, ctx) {
           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, submitForm, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, } = useForm({
               validationSchema: validationSchema.value ? validationSchema : undefined,
               initialValues,
               initialErrors: props.initialErrors,
               initialTouched: props.initialTouched,
               validateOnMount: props.validateOnMount,
+              keepValuesOnUnmount: keepValues,
           });
           const onSubmit = props.onSubmit ? handleSubmit(props.onSubmit, props.onInvalidSubmit) : submitForm;
           function handleFormReset(e) {
@@ -2144,15 +2214,13 @@
   });
   const Form = FormImpl;
 
-  let FIELD_ARRAY_COUNTER = 0;
   function useFieldArray(arrayPath) {
-      const id = FIELD_ARRAY_COUNTER++;
       const form = injectWithSelf(FormContextKey, undefined);
       const fields = vue.ref([]);
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       const noOp = () => { };
       const noOpApi = {
-          fields: vue.readonly(fields),
+          fields,
           remove: noOp,
           push: noOp,
           swap: noOp,
@@ -2160,6 +2228,7 @@
           update: noOp,
           replace: noOp,
           prepend: noOp,
+          move: noOp,
       };
       if (!form) {
           warn('FieldArray requires being a child of `<Form/>` or `useForm` being called before it. Array fields may not work correctly');
@@ -2169,9 +2238,13 @@
           warn('FieldArray requires a field path to be provided, did you forget to pass the `name` prop?');
           return noOpApi;
       }
+      const alreadyExists = form.fieldArrays.find(a => vue.unref(a.path) === vue.unref(arrayPath));
+      if (alreadyExists) {
+          return alreadyExists;
+      }
       let entryCounter = 0;
       function initFields() {
-          const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []);
+          const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []) || [];
           fields.value = currentValues.map(createEntry);
           updateEntryFlags();
       }
@@ -2188,10 +2261,20 @@
           const key = entryCounter++;
           const entry = {
               key,
-              value: vue.computed(() => {
-                  const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []);
-                  const idx = fields.value.findIndex(e => e.key === key);
-                  return idx === -1 ? value : currentValues[idx];
+              value: vue.computed({
+                  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);
+                      return idx === -1 ? value : currentValues[idx];
+                  },
+                  set(value) {
+                      const idx = fields.value.findIndex(e => e.key === key);
+                      if (idx === -1) {
+                          warn(`Attempting to update a non-existent array item`);
+                          return;
+                      }
+                      update(idx, value);
+                  },
               }),
               isFirst: false,
               isLast: false,
@@ -2284,14 +2367,26 @@
           fields.value.unshift(createEntry(value));
           updateEntryFlags();
       }
-      form.fieldArraysLookup[id] = {
-          reset: initFields,
-      };
-      vue.onBeforeUnmount(() => {
-          delete form.fieldArraysLookup[id];
-      });
-      return {
-          fields: vue.readonly(fields),
+      function move(oldIdx, newIdx) {
+          const pathName = vue.unref(arrayPath);
+          const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+          const newValue = isNullOrUndefined(pathValue) ? [] : [...pathValue];
+          if (!Array.isArray(pathValue) || !(oldIdx in pathValue) || !(newIdx in pathValue)) {
+              return;
+          }
+          const newFields = [...fields.value];
+          const movedItem = newFields[oldIdx];
+          newFields.splice(oldIdx, 1);
+          newFields.splice(newIdx, 0, movedItem);
+          const movedValue = newValue[oldIdx];
+          newValue.splice(oldIdx, 1);
+          newValue.splice(newIdx, 0, movedValue);
+          form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+          fields.value = newFields;
+          updateEntryFlags();
+      }
+      const fieldArrayCtx = {
+          fields,
           remove,
           push,
           swap,
@@ -2299,7 +2394,16 @@
           update,
           replace,
           prepend,
+          move,
       };
+      form.fieldArrays.push(Object.assign({ path: arrayPath, reset: initFields }, fieldArrayCtx));
+      vue.onBeforeUnmount(() => {
+          const idx = form.fieldArrays.findIndex(i => vue.unref(i.path) === vue.unref(arrayPath));
+          if (idx >= 0) {
+              form.fieldArrays.splice(idx, 1);
+          }
+      });
+      return fieldArrayCtx;
   }
 
   const FieldArrayImpl = vue.defineComponent({
@@ -2312,7 +2416,7 @@
           },
       },
       setup(props, ctx) {
-          const { push, remove, swap, insert, replace, update, prepend, fields } = useFieldArray(vue.toRef(props, 'name'));
+          const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(vue.toRef(props, 'name'));
           function slotProps() {
               return {
                   fields: fields.value,
@@ -2323,6 +2427,7 @@
                   update,
                   replace,
                   prepend,
+                  move,
               };
           }
           ctx.expose({
@@ -2333,6 +2438,7 @@
               update,
               replace,
               prepend,
+              move,
           });
           return () => {
               const children = normalizeChildren(undefined, ctx, slotProps);
@@ -2638,6 +2744,7 @@
   exports.FieldContextKey = FieldContextKey;
   exports.Form = Form;
   exports.FormContextKey = FormContextKey;
+  exports.IS_ABSENT = IS_ABSENT;
   exports.configure = configure;
   exports.defineRule = defineRule;
   exports.useField = useField;