vee-validate 4.5.4 → 4.6.0

package/dist/vee-validate.esm.js

@@ -1,9 +1,9 @@
 /**
-  * vee-validate v4.5.4
-  * (c) 2021 Abdelrahman Awad
+  * vee-validate v4.6.0
+  * (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, markRaw, readonly } from 'vue';
+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 { setupDevtoolsPlugin } from '@vue/devtools-api';
 
 function isCallable(fn) {
@@ -53,18 +53,6 @@ const IS_ABSENT = Symbol('Default empty value');
 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);
 }
@@ -117,7 +105,7 @@ function isNativeMultiSelectNode(tag, attrs) {
  * 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;
@@ -301,6 +289,15 @@ function debounceAsync(inner, ms = 0) {
         }, 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
@@ -344,7 +341,8 @@ function normalizeEventValue(value) {
         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)
@@ -503,18 +501,34 @@ async function _validate(field, value) {
     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) });
@@ -827,8 +841,8 @@ function useFieldState(path, init) {
 /**
  * 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 = ref(unref(modelValue));
     function resolveInitialValue() {
         if (!form) {
@@ -858,7 +872,7 @@ function _useFieldValue(path, modelValue, shouldInjectForm) {
     // prioritize model value over form values
     // #3429
     const currentValue = modelValue ? unref(modelValue) : getFromPath(form.values, unref(path), unref(initialValue));
-    form.stageInitialValue(unref(path), currentValue);
+    form.stageInitialValue(unref(path), currentValue, true);
     // otherwise use a computed setter that triggers the `setFieldValue`
     const value = computed({
         get() {
@@ -1297,12 +1311,17 @@ 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, } = normalizeOptions(unref(name), 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;
+    // 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
      */
@@ -1315,7 +1334,7 @@ function _useField(name, rules, opts) {
         if (schema && !isYupValidator(schema)) {
             rulesValue = extractRuleFromSchema(schema, unref(name)) || rulesValue;
         }
-        if (isYupValidator(rulesValue) || isCallable(rulesValue)) {
+        if (isYupValidator(rulesValue) || isCallable(rulesValue) || Array.isArray(rulesValue)) {
             return rulesValue;
         }
         return normalizeRules(rulesValue);
@@ -1335,12 +1354,19 @@ function _useField(name, rules, opts) {
         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;
     }
@@ -1354,13 +1380,13 @@ function _useField(name, rules, opts) {
         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
     onMounted(() => {
         if (validateOnMount) {
@@ -1377,7 +1403,13 @@ function _useField(name, rules, opts) {
     }
     let unwatchValue;
     function watchValue() {
-        unwatchValue = watch(value, validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly, {
+        unwatchValue = watch(value, (val, oldVal) => {
+            if (es6(val, oldVal)) {
+                return;
+            }
+            const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+            validateFn();
+        }, {
             deep: true,
         });
     }
@@ -1418,6 +1450,7 @@ function _useField(name, rules, opts) {
         checkedValue,
         uncheckedValue,
         bails,
+        keepValueOnUnmount,
         resetField,
         handleReset: () => resetField(),
         validate: validate$1,
@@ -1455,13 +1488,14 @@ function _useField(name, rules, opts) {
     // associate the field with the given form
     form.register(field);
     onBeforeUnmount(() => {
+        markedForRemoval = true;
         form.unregister(field);
     });
     // extract cross-field dependencies in a computed prop
     const dependencies = 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) => {
@@ -1503,6 +1537,9 @@ function normalizeOptions(name, opts) {
         label: name,
         validateOnValueUpdate: true,
         standalone: false,
+        keepValueOnUnmount: undefined,
+        modelPropName: 'modelValue',
+        syncVModel: true,
     });
     if (!opts) {
         return defaults();
@@ -1534,8 +1571,8 @@ function useCheckboxField(name, rules, opts) {
             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);
@@ -1546,8 +1583,10 @@ function useCheckboxField(name, rules, opts) {
             handleChange(newValue, shouldValidate);
         }
         onBeforeUnmount(() => {
-            // toggles the checkbox value if it was checked
-            if (checked.value) {
+            var _a, _b;
+            const shouldKeepValue = (_b = (_a = unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : 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(unref(checkedValue), false);
             }
         });
@@ -1556,6 +1595,41 @@ function useCheckboxField(name, rules, opts) {
             uncheckedValue, handleChange: handleCheckboxChange });
     }
     return patchCheckboxApi(_useField(name, rules, opts));
+}
+function useVModel({ prop, value, handleChange }) {
+    const vm = getCurrentInstance();
+    /* istanbul ignore next */
+    if (!vm) {
+        if ((process.env.NODE_ENV !== 'production')) {
+            console.warn('Failed to setup model events because `useField` was not called in setup.');
+        }
+        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;
+    }
+    watch(value, newValue => {
+        if (es6(newValue, getCurrentModelValue(vm, propName))) {
+            return;
+        }
+        vm.emit(emitName, newValue);
+    });
+    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 = defineComponent({
@@ -1622,13 +1696,17 @@ const FieldImpl = defineComponent({
             type: Boolean,
             default: false,
         },
+        keepValue: {
+            type: Boolean,
+            default: undefined,
+        },
     },
     setup(props, ctx) {
         const rules = toRef(props, 'rules');
         const name = toRef(props, 'name');
         const label = toRef(props, 'label');
         const uncheckedValue = toRef(props, 'uncheckedValue');
-        const hasModelEvents = isPropPresent(props, 'onUpdate:modelValue');
+        const keepValue = 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,
@@ -1640,25 +1718,22 @@ const FieldImpl = defineComponent({
             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 = computed(() => {
             const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = resolveValidationTriggers(props);
             const baseOnBlur = [handleBlur, ctx.attrs.onBlur, validateOnBlur ? validateField : undefined].filter(Boolean);
@@ -1670,32 +1745,16 @@ const FieldImpl = defineComponent({
                 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 = toRef(props, 'modelValue');
-        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,
@@ -1747,12 +1806,6 @@ function resolveValidationTriggers(props) {
         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
@@ -1765,15 +1818,19 @@ const Field = FieldImpl;
 
 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 = ref({});
     // If the form is currently submitting
     const isSubmitting = ref(false);
     // The number of times the user tried to submit the form
     const submitCount = 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 = reactive(klona(unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {}));
     // the source of errors for the form fields
@@ -1820,10 +1877,11 @@ function useForm(opts) {
     // 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,
@@ -1835,7 +1893,8 @@ function useForm(opts) {
         submitCount,
         meta,
         isSubmitting,
-        fieldArraysLookup,
+        fieldArrays,
+        keepValuesOnUnmount,
         validateSchema: unref(schema) ? validateSchema : undefined,
         validate,
         register: registerField,
@@ -1853,6 +1912,7 @@ function useForm(opts) {
         stageInitialValue,
         unsetInitialValue,
         setFieldInitialValue,
+        useFieldModel,
     };
     function isFieldGroup(fieldOrGroup) {
         return Array.isArray(fieldOrGroup);
@@ -1863,6 +1923,15 @@ function useForm(opts) {
         }
         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
      */
@@ -1887,15 +1956,15 @@ function useForm(opts) {
             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, unref(fieldInstance.uncheckedValue)));
         }
         setInPath(formValues, field, newValue);
@@ -1913,7 +1982,22 @@ function useForm(opts) {
             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);
+        watch(value, () => {
+            if (!fieldExists(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
@@ -1936,6 +2020,7 @@ function useForm(opts) {
      * 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);
@@ -1947,17 +2032,16 @@ function useForm(opts) {
             // 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;
+        nextTick(() => {
+            RESET_LOCK = false;
+        });
     }
     function insertFieldAtPath(field, path) {
         const rawField = markRaw(field);
@@ -2013,6 +2097,8 @@ function useForm(opts) {
                 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
@@ -2035,18 +2121,32 @@ function useForm(opts) {
     }
     function unregisterField(field) {
         const fieldName = unref(field.name);
+        const fieldInstance = fieldsByPath.value[fieldName];
+        const isGroup = !!fieldInstance && isFieldGroup(fieldInstance);
         removeFieldFromPath(field, fieldName);
         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 = unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : 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');
         }
@@ -2147,9 +2247,12 @@ function useForm(opts) {
     /**
      * 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 = unref(schema);
@@ -2166,10 +2269,12 @@ function useForm(opts) {
     }
     /**
      * 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
@@ -2265,6 +2370,7 @@ function useForm(opts) {
         setValues,
         setFieldTouched,
         setTouched,
+        useFieldModel,
     };
 }
 /**
@@ -2279,16 +2385,23 @@ function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
     const isDirty = computed(() => {
         return !es6(currentValues, unref(initialValues));
     });
-    const flags = 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 = reactive(calculateFlags());
+    watchEffect(() => {
+        const value = calculateFlags();
+        flags.touched = value.touched;
+        flags.valid = value.valid;
+        flags.pending = value.pending;
     });
     return computed(() => {
-        return Object.assign(Object.assign({ initialValues: unref(initialValues) }, flags.value), { valid: flags.value.valid && !keysOf(errors.value).length, dirty: isDirty.value });
+        return Object.assign(Object.assign({ initialValues: unref(initialValues) }, flags), { valid: flags.valid && !keysOf(errors.value).length, dirty: isDirty.value });
     });
 }
 /**
@@ -2409,16 +2522,22 @@ const FormImpl = defineComponent({
             type: Function,
             default: undefined,
         },
+        keepValues: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props, ctx) {
         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, 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) {
@@ -2488,15 +2607,13 @@ const FormImpl = defineComponent({
 });
 const Form = FormImpl;
 
-let FIELD_ARRAY_COUNTER = 0;
 function useFieldArray(arrayPath) {
-    const id = FIELD_ARRAY_COUNTER++;
     const form = injectWithSelf(FormContextKey, undefined);
     const fields = ref([]);
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const noOp = () => { };
     const noOpApi = {
-        fields: readonly(fields),
+        fields,
         remove: noOp,
         push: noOp,
         swap: noOp,
@@ -2504,6 +2621,7 @@ function useFieldArray(arrayPath) {
         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');
@@ -2513,9 +2631,13 @@ function useFieldArray(arrayPath) {
         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 => unref(a.path) === unref(arrayPath));
+    if (alreadyExists) {
+        return alreadyExists;
+    }
     let entryCounter = 0;
     function initFields() {
-        const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []);
+        const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []) || [];
         fields.value = currentValues.map(createEntry);
         updateEntryFlags();
     }
@@ -2532,10 +2654,20 @@ function useFieldArray(arrayPath) {
         const key = entryCounter++;
         const entry = {
             key,
-            value: computed(() => {
-                const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []);
-                const idx = fields.value.findIndex(e => e.key === key);
-                return idx === -1 ? value : currentValues[idx];
+            value: computed({
+                get() {
+                    const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, 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,
@@ -2572,7 +2704,7 @@ function useFieldArray(arrayPath) {
     function swap(indexA, indexB) {
         const pathName = 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];
@@ -2628,14 +2760,26 @@ function useFieldArray(arrayPath) {
         fields.value.unshift(createEntry(value));
         updateEntryFlags();
     }
-    form.fieldArraysLookup[id] = {
-        reset: initFields,
-    };
-    onBeforeUnmount(() => {
-        delete form.fieldArraysLookup[id];
-    });
-    return {
-        fields: readonly(fields),
+    function move(oldIdx, newIdx) {
+        const pathName = 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,
@@ -2643,7 +2787,16 @@ function useFieldArray(arrayPath) {
         update,
         replace,
         prepend,
+        move,
     };
+    form.fieldArrays.push(Object.assign({ path: arrayPath, reset: initFields }, fieldArrayCtx));
+    onBeforeUnmount(() => {
+        const idx = form.fieldArrays.findIndex(i => unref(i.path) === unref(arrayPath));
+        if (idx >= 0) {
+            form.fieldArrays.splice(idx, 1);
+        }
+    });
+    return fieldArrayCtx;
 }
 
 const FieldArrayImpl = defineComponent({
@@ -2656,7 +2809,7 @@ const FieldArrayImpl = defineComponent({
         },
     },
     setup(props, ctx) {
-        const { push, remove, swap, insert, replace, update, prepend, fields } = useFieldArray(toRef(props, 'name'));
+        const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(toRef(props, 'name'));
         function slotProps() {
             return {
                 fields: fields.value,
@@ -2667,6 +2820,7 @@ const FieldArrayImpl = defineComponent({
                 update,
                 replace,
                 prepend,
+                move,
             };
         }
         ctx.expose({
@@ -2677,6 +2831,7 @@ const FieldArrayImpl = defineComponent({
             update,
             replace,
             prepend,
+            move,
         });
         return () => {
             const children = normalizeChildren(undefined, ctx, slotProps);
@@ -2976,4 +3131,4 @@ function useSubmitForm(cb) {
     };
 }
 
-export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate };
+export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate };