vee-validate 4.5.4 → 4.6.0

package/dist/vee-validate.js

@@ -1,6 +1,6 @@
 /**
-  * vee-validate v4.5.4
-  * (c) 2021 Abdelrahman Awad
+  * vee-validate v4.6.0
+  * (c) 2022 Abdelrahman Awad
   * @license MIT
   */
 (function (global, factory) {
@@ -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)
@@ -488,18 +486,34 @@
       if (isYupValidator(field.rules)) {
           return validateFieldWithYup(value, field.rules, { bails: field.bails });
       }
-      // if a generic function, use it as the pipeline.
-      if (isCallable(field.rules)) {
+      // if a generic function or chain of generic functions
+      if (isCallable(field.rules) || Array.isArray(field.rules)) {
           const ctx = {
               field: field.name,
               form: field.formData,
               value: value,
           };
-          const result = await field.rules(value, ctx);
-          const isValid = typeof result !== 'string' && result;
-          const message = typeof result === 'string' ? result : _generateFieldError(ctx);
+          // Normalize the pipeline
+          const pipeline = Array.isArray(field.rules) ? field.rules : [field.rules];
+          const length = pipeline.length;
+          const errors = [];
+          for (let i = 0; i < length; i++) {
+              const rule = pipeline[i];
+              const result = await rule(value, ctx);
+              const isValid = typeof result !== 'string' && result;
+              if (isValid) {
+                  continue;
+              }
+              const message = typeof result === 'string' ? result : _generateFieldError(ctx);
+              errors.push(message);
+              if (field.bails) {
+                  return {
+                      errors,
+                  };
+              }
+          }
           return {
-              errors: !isValid ? [message] : [],
+              errors,
           };
       }
       const normalizedContext = Object.assign(Object.assign({}, field), { rules: normalizeRules(field.rules) });
@@ -812,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) {
@@ -843,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() {
@@ -922,12 +936,17 @@
       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;
       const { id, value, initialValue, meta, setState, errors, errorMessage } = useFieldState(name, {
           modelValue,
           standalone,
       });
+      if (syncVModel) {
+          useVModel({ value, prop: modelPropName, handleChange });
+      }
       /**
        * Handles common onBlur meta update
        */
@@ -940,7 +959,7 @@
           if (schema && !isYupValidator(schema)) {
               rulesValue = extractRuleFromSchema(schema, vue.unref(name)) || rulesValue;
           }
-          if (isYupValidator(rulesValue) || isCallable(rulesValue)) {
+          if (isYupValidator(rulesValue) || isCallable(rulesValue) || Array.isArray(rulesValue)) {
               return rulesValue;
           }
           return normalizeRules(rulesValue);
@@ -960,12 +979,19 @@
           meta.pending = true;
           meta.validated = true;
           const result = await validateCurrentValue('validated-only');
+          if (markedForRemoval) {
+              result.valid = true;
+              result.errors = [];
+          }
           setState({ errors: result.errors });
           meta.pending = false;
           return result;
       }
       async function validateValidStateOnly() {
           const result = await validateCurrentValue('silent');
+          if (markedForRemoval) {
+              result.valid = true;
+          }
           meta.valid = result.valid;
           return result;
       }
@@ -979,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) {
@@ -1002,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,
           });
       }
@@ -1043,6 +1075,7 @@
           checkedValue,
           uncheckedValue,
           bails,
+          keepValueOnUnmount,
           resetField,
           handleReset: () => resetField(),
           validate: validate$1,
@@ -1071,13 +1104,14 @@
       // associate the field with the given form
       form.register(field);
       vue.onBeforeUnmount(() => {
+          markedForRemoval = true;
           form.unregister(field);
       });
       // extract cross-field dependencies in a computed prop
       const dependencies = vue.computed(() => {
           const rulesVal = normalizedRules.value;
           // is falsy, a function schema or a yup schema
-          if (!rulesVal || isCallable(rulesVal) || isYupValidator(rulesVal)) {
+          if (!rulesVal || isCallable(rulesVal) || isYupValidator(rulesVal) || Array.isArray(rulesVal)) {
               return {};
           }
           return Object.keys(rulesVal).reduce((acc, rule) => {
@@ -1119,6 +1153,9 @@
           label: name,
           validateOnValueUpdate: true,
           standalone: false,
+          keepValueOnUnmount: undefined,
+          modelPropName: 'modelValue',
+          syncVModel: true,
       });
       if (!opts) {
           return defaults();
@@ -1150,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);
@@ -1162,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);
               }
           });
@@ -1172,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({
@@ -1238,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,
@@ -1256,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);
@@ -1286,32 +1358,16 @@
                   onInput: baseOnInput,
                   onChange: baseOnChange,
               };
-              if (validateOnModelUpdate) {
-                  attrs['onUpdate:modelValue'] = [onChangeHandler];
-              }
+              attrs['onUpdate:modelValue'] = e => onChangeHandler(e, validateOnModelUpdate);
               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,
@@ -1363,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
@@ -1381,15 +1431,19 @@
 
   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
+      let RESET_LOCK = false;
       // A lookup containing fields or field groups
       const fieldsByPath = vue.ref({});
       // If the form is currently submitting
       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
@@ -1436,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,
@@ -1451,7 +1506,8 @@
           submitCount,
           meta,
           isSubmitting,
-          fieldArraysLookup,
+          fieldArrays,
+          keepValuesOnUnmount,
           validateSchema: vue.unref(schema) ? validateSchema : undefined,
           validate,
           register: registerField,
@@ -1469,6 +1525,7 @@
           stageInitialValue,
           unsetInitialValue,
           setFieldInitialValue,
+          useFieldModel,
       };
       function isFieldGroup(fieldOrGroup) {
           return Array.isArray(fieldOrGroup);
@@ -1479,6 +1536,15 @@
           }
           return mutation(fieldOrGroup);
       }
+      function mutateAllFields(mutation) {
+          Object.values(fieldsByPath.value).forEach(field => {
+              if (!field) {
+                  return;
+              }
+              // avoid resetting the field values, because they should've been reset already.
+              applyFieldMutation(field, mutation);
+          });
+      }
       /**
        * Manually sets an error message on a specific field
        */
@@ -1503,15 +1569,15 @@
               setInPath(formValues, field, clonedValue);
               return;
           }
-          // Multiple checkboxes, and only one of them got updated
           if (isFieldGroup(fieldInstance) && ((_a = fieldInstance[0]) === null || _a === void 0 ? void 0 : _a.type) === 'checkbox' && !Array.isArray(value)) {
+              // Multiple checkboxes, and only one of them got updated
               const newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field) || [], value, undefined));
               setInPath(formValues, field, newValue);
               return;
           }
           let newValue = value;
           // Single Checkbox: toggles the field value unless the field is being reset then force it
-          if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force) {
+          if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force && !RESET_LOCK) {
               newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field), value, vue.unref(fieldInstance.uncheckedValue)));
           }
           setInPath(formValues, field, newValue);
@@ -1529,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
@@ -1552,6 +1633,7 @@
        * Resets all fields
        */
       function resetForm(state) {
+          RESET_LOCK = true;
           // set initial values if provided
           if (state === null || state === void 0 ? void 0 : state.values) {
               setInitialValues(state.values);
@@ -1563,17 +1645,16 @@
               // otherwise clean the current values
               setValues(originalInitialValues.value);
           }
-          Object.values(fieldsByPath.value).forEach(field => {
-              if (!field) {
-                  return;
-              }
-              applyFieldMutation(field, f => f.resetField());
-          });
+          // avoid resetting the field values, because they should've been reset already.
+          mutateAllFields(f => f.resetField());
           if (state === null || state === void 0 ? void 0 : state.touched) {
               setTouched(state.touched);
           }
           setErrors((state === null || state === void 0 ? void 0 : state.errors) || {});
           submitCount.value = (state === null || state === void 0 ? void 0 : state.submitCount) || 0;
+          vue.nextTick(() => {
+              RESET_LOCK = false;
+          });
       }
       function insertFieldAtPath(field, path) {
           const rawField = vue.markRaw(field);
@@ -1629,6 +1710,8 @@
                   insertFieldAtPath(field, newPath);
                   // re-validate if either path had errors before
                   if (errors.value[oldPath] || errors.value[newPath]) {
+                      // clear up both paths errors
+                      setFieldError(oldPath, undefined);
                       validateField(newPath);
                   }
                   // clean up the old path if no other field is sharing that name
@@ -1651,18 +1734,32 @@
       }
       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);
               }
           });
       }
       async function validate(opts) {
+          mutateAllFields(f => (f.meta.validated = true));
           if (formCtx.validateSchema) {
               return formCtx.validateSchema((opts === null || opts === void 0 ? void 0 : opts.mode) || 'force');
           }
@@ -1763,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);
@@ -1782,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
@@ -1875,6 +1977,7 @@
           setValues,
           setFieldTouched,
           setTouched,
+          useFieldModel,
       };
   }
   /**
@@ -1889,16 +1992,23 @@
       const isDirty = vue.computed(() => {
           return !es6(currentValues, vue.unref(initialValues));
       });
-      const flags = vue.computed(() => {
+      function calculateFlags() {
           const fields = Object.values(fieldsByPath.value).flat(1).filter(Boolean);
           return keysOf(MERGE_STRATEGIES).reduce((acc, flag) => {
               const mergeMethod = MERGE_STRATEGIES[flag];
               acc[flag] = fields[mergeMethod](field => field.meta[flag]);
               return acc;
           }, {});
+      }
+      const flags = vue.reactive(calculateFlags());
+      vue.watchEffect(() => {
+          const value = calculateFlags();
+          flags.touched = value.touched;
+          flags.valid = value.valid;
+          flags.pending = value.pending;
       });
       return vue.computed(() => {
-          return Object.assign(Object.assign({ initialValues: vue.unref(initialValues) }, flags.value), { valid: flags.value.valid && !keysOf(errors.value).length, dirty: isDirty.value });
+          return Object.assign(Object.assign({ initialValues: vue.unref(initialValues) }, flags), { valid: flags.valid && !keysOf(errors.value).length, dirty: isDirty.value });
       });
   }
   /**
@@ -2019,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) {
@@ -2098,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,
@@ -2114,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');
@@ -2123,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();
       }
@@ -2142,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,
@@ -2182,7 +2311,7 @@
       function swap(indexA, indexB) {
           const pathName = vue.unref(arrayPath);
           const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
-          if (!Array.isArray(pathValue) || !pathValue[indexA] || !pathValue[indexB]) {
+          if (!Array.isArray(pathValue) || !(indexA in pathValue) || !(indexB in pathValue)) {
               return;
           }
           const newValue = [...pathValue];
@@ -2238,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,
@@ -2253,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({
@@ -2266,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,
@@ -2277,6 +2427,7 @@
                   update,
                   replace,
                   prepend,
+                  move,
               };
           }
           ctx.expose({
@@ -2287,6 +2438,7 @@
               update,
               replace,
               prepend,
+              move,
           });
           return () => {
               const children = normalizeChildren(undefined, ctx, slotProps);
@@ -2592,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;