vee-validate 4.4.10 → 4.5.0

package/dist/vee-validate.esm.js

@@ -1,9 +1,10 @@
 /**
-  * vee-validate v4.4.10
+  * vee-validate v4.5.0
   * (c) 2021 Abdelrahman Awad
   * @license MIT
   */
-import { inject, getCurrentInstance, warn as warn$1, unref, computed, onMounted, provide, isRef, watch, onBeforeUnmount, ref, reactive, nextTick, defineComponent, toRef, resolveDynamicComponent, h } from 'vue';
+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 { setupDevtoolsPlugin } from '@vue/devtools-api';
 
 function isCallable(fn) {
     return typeof fn === 'function';
@@ -46,8 +47,6 @@ function guardExtend(id, validator) {
 }
 
 const FormContextKey = Symbol('vee-validate-form');
-const FormErrorsKey = Symbol('vee-validate-form-errors');
-const FormInitialValuesKey = Symbol('vee-validate-form-initial-values');
 const FieldContextKey = Symbol('vee-validate-field-instance');
 const IS_ABSENT = Symbol('Default empty value');
 
@@ -147,17 +146,14 @@ function cleanupNonNestedPath(path) {
     }
     return path;
 }
-/**
- * Gets a nested property value from an object
- */
-function getFromPath(object, path, fallback = undefined) {
+function getFromPath(object, path, fallback) {
     if (!object) {
         return fallback;
     }
     if (isNotNestedPath(path)) {
         return object[cleanupNonNestedPath(path)];
     }
-    const resolvedValue = path
+    const resolvedValue = (path || '')
         .split(/\.|\[(\d+)\]/)
         .filter(Boolean)
         .reduce((acc, propKey) => {
@@ -261,20 +257,6 @@ function normalizeField(field) {
     }
     return field;
 }
-/**
- * Applies a mutation function on a field or field group
- */
-function applyFieldMutation(field, mutation, onlyFirst = false) {
-    if (!Array.isArray(field)) {
-        mutation(field);
-        return;
-    }
-    if (onlyFirst) {
-        mutation(field[0]);
-        return;
-    }
-    field.forEach(mutation);
-}
 function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
     if (Array.isArray(currentValue)) {
         const newVal = [...currentValue];
@@ -283,6 +265,42 @@ function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
         return newVal;
     }
     return currentValue === checkedValue ? uncheckedValue : checkedValue;
+}
+/**
+ * Creates a throttled function that only invokes the provided function (`func`) at most once per within a given number of milliseconds
+ * (`limit`)
+ */
+function throttle(func, limit) {
+    let inThrottle;
+    let lastResult;
+    return function (...args) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const context = this;
+        if (!inThrottle) {
+            inThrottle = true;
+            setTimeout(() => (inThrottle = false), limit);
+            lastResult = func.apply(context, args);
+        }
+        return lastResult;
+    };
+}
+function debounceAsync(inner, ms = 0) {
+    let timer = null;
+    let resolves = [];
+    return function (...args) {
+        // Run the function after a certain amount of time
+        if (timer) {
+            window.clearTimeout(timer);
+        }
+        timer = window.setTimeout(() => {
+            // Get the result of the inner function, then apply it to the resolve function of
+            // each promise that has been created since the last time the inner function was run
+            const result = inner(...args);
+            resolves.forEach(r => r(result));
+            resolves = [];
+        }, ms);
+        return new Promise(resolve => resolves.push(resolve));
+    };
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -773,21 +791,522 @@ var es6 = function equal(a, b) {
 };
 
 let ID_COUNTER = 0;
+function useFieldState(path, init) {
+    const { value, initialValue, setInitialValue } = _useFieldValue(path, init.modelValue, !init.standalone);
+    const { errorMessage, errors, setErrors } = _useFieldErrors(path, !init.standalone);
+    const meta = _useFieldMeta(value, initialValue, errors);
+    const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
+    function setState(state) {
+        var _a;
+        if ('value' in state) {
+            value.value = state.value;
+        }
+        if ('errors' in state) {
+            setErrors(state.errors);
+        }
+        if ('touched' in state) {
+            meta.touched = (_a = state.touched) !== null && _a !== void 0 ? _a : meta.touched;
+        }
+        if ('initialValue' in state) {
+            setInitialValue(state.initialValue);
+        }
+    }
+    return {
+        id,
+        path,
+        value,
+        initialValue,
+        meta,
+        errors,
+        errorMessage,
+        setState,
+    };
+}
+/**
+ * Creates the field value and resolves the initial value
+ */
+function _useFieldValue(path, modelValue, shouldInjectForm) {
+    const form = shouldInjectForm ? injectWithSelf(FormContextKey, undefined) : undefined;
+    const modelRef = ref(unref(modelValue));
+    function resolveInitialValue() {
+        if (!form) {
+            return unref(modelRef);
+        }
+        return getFromPath(form.meta.value.initialValues, unref(path), unref(modelRef));
+    }
+    function setInitialValue(value) {
+        if (!form) {
+            modelRef.value = value;
+            return;
+        }
+        form.setFieldInitialValue(unref(path), value);
+    }
+    const initialValue = computed(resolveInitialValue);
+    // if no form is associated, use a regular ref.
+    if (!form) {
+        const value = ref(resolveInitialValue());
+        return {
+            value,
+            initialValue,
+            setInitialValue,
+        };
+    }
+    // to set the initial value, first check if there is a current value, if there is then use it.
+    // otherwise use the configured initial value if it exists.
+    // prioritize model value over form values
+    // #3429
+    const currentValue = modelValue ? unref(modelValue) : getFromPath(form.values, unref(path), unref(initialValue));
+    form.stageInitialValue(unref(path), currentValue);
+    // otherwise use a computed setter that triggers the `setFieldValue`
+    const value = computed({
+        get() {
+            return getFromPath(form.values, unref(path));
+        },
+        set(newVal) {
+            form.setFieldValue(unref(path), newVal);
+        },
+    });
+    return {
+        value,
+        initialValue,
+        setInitialValue,
+    };
+}
+/**
+ * Creates meta flags state and some associated effects with them
+ */
+function _useFieldMeta(currentValue, initialValue, errors) {
+    const meta = reactive({
+        touched: false,
+        pending: false,
+        valid: true,
+        validated: !!unref(errors).length,
+        initialValue: computed(() => unref(initialValue)),
+        dirty: computed(() => {
+            return !es6(unref(currentValue), unref(initialValue));
+        }),
+    });
+    watch(errors, value => {
+        meta.valid = !value.length;
+    }, {
+        immediate: true,
+        flush: 'sync',
+    });
+    return meta;
+}
+/**
+ * Creates the error message state for the field state
+ */
+function _useFieldErrors(path, shouldInjectForm) {
+    const form = shouldInjectForm ? injectWithSelf(FormContextKey, undefined) : undefined;
+    function normalizeErrors(messages) {
+        if (!messages) {
+            return [];
+        }
+        return Array.isArray(messages) ? messages : [messages];
+    }
+    if (!form) {
+        const errors = ref([]);
+        return {
+            errors,
+            errorMessage: computed(() => errors.value[0]),
+            setErrors: (messages) => {
+                errors.value = normalizeErrors(messages);
+            },
+        };
+    }
+    const errors = computed(() => form.errorBag.value[unref(path)] || []);
+    return {
+        errors,
+        errorMessage: computed(() => errors.value[0]),
+        setErrors: (messages) => {
+            form.setFieldErrorBag(unref(path), normalizeErrors(messages));
+        },
+    };
+}
+
+function installDevtoolsPlugin(app) {
+    if ((process.env.NODE_ENV !== 'production')) {
+        setupDevtoolsPlugin({
+            id: 'vee-validate-devtools-plugin',
+            label: 'VeeValidate Plugin',
+            packageName: 'vee-validate',
+            homepage: 'https://vee-validate.logaretm.com/v4',
+            app,
+            logo: 'https://vee-validate.logaretm.com/v4/logo.png',
+        }, setupApiHooks);
+    }
+}
+const DEVTOOLS_FORMS = {};
+const DEVTOOLS_FIELDS = {};
+let API;
+const refreshInspector = throttle(() => {
+    setTimeout(async () => {
+        await nextTick();
+        API === null || API === void 0 ? void 0 : API.sendInspectorState(INSPECTOR_ID);
+        API === null || API === void 0 ? void 0 : API.sendInspectorTree(INSPECTOR_ID);
+    }, 100);
+}, 100);
+function registerFormWithDevTools(form) {
+    const vm = getCurrentInstance();
+    if (!API) {
+        const app = vm === null || vm === void 0 ? void 0 : vm.appContext.app;
+        if (!app) {
+            return;
+        }
+        installDevtoolsPlugin(app);
+    }
+    DEVTOOLS_FORMS[form.formId] = Object.assign({}, form);
+    DEVTOOLS_FORMS[form.formId]._vm = vm;
+    onUnmounted(() => {
+        delete DEVTOOLS_FORMS[form.formId];
+        refreshInspector();
+    });
+    refreshInspector();
+}
+function registerSingleFieldWithDevtools(field) {
+    const vm = getCurrentInstance();
+    if (!API) {
+        const app = vm === null || vm === void 0 ? void 0 : vm.appContext.app;
+        if (!app) {
+            return;
+        }
+        installDevtoolsPlugin(app);
+    }
+    DEVTOOLS_FIELDS[field.id] = Object.assign({}, field);
+    DEVTOOLS_FIELDS[field.id]._vm = vm;
+    onUnmounted(() => {
+        delete DEVTOOLS_FIELDS[field.id];
+        refreshInspector();
+    });
+    refreshInspector();
+}
+const INSPECTOR_ID = 'vee-validate-inspector';
+const COLORS = {
+    error: 0xbd4b4b,
+    success: 0x06d77b,
+    unknown: 0x54436b,
+    white: 0xffffff,
+    black: 0x000000,
+    blue: 0x035397,
+    purple: 0xb980f0,
+    orange: 0xf5a962,
+    gray: 0xbbbfca,
+};
+let SELECTED_NODE = null;
+function setupApiHooks(api) {
+    API = api;
+    api.addInspector({
+        id: INSPECTOR_ID,
+        icon: 'rule',
+        label: 'vee-validate',
+        noSelectionText: 'Select a vee-validate node to inspect',
+        actions: [
+            {
+                icon: 'done_outline',
+                tooltip: 'Validate selected item',
+                action: async () => {
+                    if (!SELECTED_NODE) {
+                        console.error('There is not a valid selected vee-validate node or component');
+                        return;
+                    }
+                    const result = await SELECTED_NODE.validate();
+                    console.log(result);
+                },
+            },
+            {
+                icon: 'delete_sweep',
+                tooltip: 'Clear validation state of the selected item',
+                action: () => {
+                    if (!SELECTED_NODE) {
+                        console.error('There is not a valid selected vee-validate node or component');
+                        return;
+                    }
+                    if ('id' in SELECTED_NODE) {
+                        SELECTED_NODE.resetField();
+                        return;
+                    }
+                    SELECTED_NODE.resetForm();
+                },
+            },
+        ],
+    });
+    api.on.getInspectorTree(payload => {
+        if (payload.inspectorId !== INSPECTOR_ID) {
+            return;
+        }
+        const forms = Object.values(DEVTOOLS_FORMS);
+        const fields = Object.values(DEVTOOLS_FIELDS);
+        payload.rootNodes = [
+            ...forms.map(mapFormForDevtoolsInspector),
+            ...fields.map(field => mapFieldForDevtoolsInspector(field)),
+        ];
+    });
+    api.on.getInspectorState((payload, ctx) => {
+        if (payload.inspectorId !== INSPECTOR_ID || ctx.currentTab !== `custom-inspector:${INSPECTOR_ID}`) {
+            return;
+        }
+        const { form, field, type } = decodeNodeId(payload.nodeId);
+        if (form && type === 'form') {
+            payload.state = buildFormState(form);
+            SELECTED_NODE = form;
+            return;
+        }
+        if (field && type === 'field') {
+            payload.state = buildFieldState(field);
+            SELECTED_NODE = field;
+            return;
+        }
+        SELECTED_NODE = null;
+    });
+}
+function mapFormForDevtoolsInspector(form) {
+    const { textColor, bgColor } = getTagTheme(form);
+    const formTreeNodes = {};
+    Object.values(form.fieldsByPath.value).forEach(field => {
+        const fieldInstance = Array.isArray(field) ? field[0] : field;
+        if (!fieldInstance) {
+            return;
+        }
+        setInPath(formTreeNodes, unref(fieldInstance.name), mapFieldForDevtoolsInspector(fieldInstance, form));
+    });
+    function buildFormTree(tree, path = []) {
+        const key = [...path].pop();
+        if ('id' in tree) {
+            return Object.assign(Object.assign({}, tree), { label: key || tree.label });
+        }
+        if (isObject(tree)) {
+            return {
+                id: `${path.join('.')}`,
+                label: key || '',
+                children: Object.keys(tree).map(key => buildFormTree(tree[key], [...path, key])),
+            };
+        }
+        if (Array.isArray(tree)) {
+            return {
+                id: `${path.join('.')}`,
+                label: `${key}[]`,
+                children: tree.map((c, idx) => buildFormTree(c, [...path, String(idx)])),
+            };
+        }
+        return { id: '', label: '', children: [] };
+    }
+    const { children } = buildFormTree(formTreeNodes);
+    return {
+        id: encodeNodeId(form),
+        label: 'Form',
+        children,
+        tags: [
+            {
+                label: 'Form',
+                textColor,
+                backgroundColor: bgColor,
+            },
+            {
+                label: `${Object.keys(form.fieldsByPath.value).length} fields`,
+                textColor: COLORS.white,
+                backgroundColor: COLORS.unknown,
+            },
+        ],
+    };
+}
+function mapFieldForDevtoolsInspector(field, form) {
+    const fieldInstance = normalizeField(field);
+    const { textColor, bgColor } = getTagTheme(fieldInstance);
+    const isGroup = Array.isArray(field) && field.length > 1;
+    return {
+        id: encodeNodeId(form, fieldInstance, !isGroup),
+        label: unref(fieldInstance.name),
+        children: Array.isArray(field) ? field.map(fieldItem => mapFieldForDevtoolsInspector(fieldItem, form)) : undefined,
+        tags: [
+            isGroup
+                ? undefined
+                : {
+                    label: 'Field',
+                    textColor,
+                    backgroundColor: bgColor,
+                },
+            !form
+                ? {
+                    label: 'Standalone',
+                    textColor: COLORS.black,
+                    backgroundColor: COLORS.gray,
+                }
+                : undefined,
+            !isGroup && fieldInstance.type === 'checkbox'
+                ? {
+                    label: 'Checkbox',
+                    textColor: COLORS.white,
+                    backgroundColor: COLORS.blue,
+                }
+                : undefined,
+            !isGroup && fieldInstance.type === 'radio'
+                ? {
+                    label: 'Radio',
+                    textColor: COLORS.white,
+                    backgroundColor: COLORS.purple,
+                }
+                : undefined,
+            isGroup
+                ? {
+                    label: 'Group',
+                    textColor: COLORS.black,
+                    backgroundColor: COLORS.orange,
+                }
+                : undefined,
+        ].filter(Boolean),
+    };
+}
+function encodeNodeId(form, field, encodeIndex = true) {
+    const fieldPath = form ? unref(field === null || field === void 0 ? void 0 : field.name) : field === null || field === void 0 ? void 0 : field.id;
+    const fieldGroup = fieldPath ? form === null || form === void 0 ? void 0 : form.fieldsByPath.value[fieldPath] : undefined;
+    let idx;
+    if (encodeIndex && field && Array.isArray(fieldGroup)) {
+        idx = fieldGroup.indexOf(field);
+    }
+    const idObject = { f: form === null || form === void 0 ? void 0 : form.formId, ff: fieldPath, idx, type: field ? 'field' : 'form' };
+    return btoa(JSON.stringify(idObject));
+}
+function decodeNodeId(nodeId) {
+    try {
+        const idObject = JSON.parse(atob(nodeId));
+        const form = DEVTOOLS_FORMS[idObject.f];
+        if (!form && idObject.ff) {
+            const field = DEVTOOLS_FIELDS[idObject.ff];
+            if (!field) {
+                return {};
+            }
+            return {
+                type: idObject.type,
+                field,
+            };
+        }
+        if (!form) {
+            return {};
+        }
+        const fieldGroup = form.fieldsByPath.value[idObject.ff];
+        return {
+            type: idObject.type,
+            form,
+            field: Array.isArray(fieldGroup) ? fieldGroup[idObject.idx || 0] : fieldGroup,
+        };
+    }
+    catch (err) {
+        // console.error(`Devtools: [vee-validate] Failed to parse node id ${nodeId}`);
+    }
+    return {};
+}
+function buildFieldState(field) {
+    const { errors, meta, value } = field;
+    return {
+        'Field state': [
+            { key: 'errors', value: errors.value },
+            {
+                key: 'initialValue',
+                value: meta.initialValue,
+            },
+            {
+                key: 'currentValue',
+                value: value.value,
+            },
+            {
+                key: 'touched',
+                value: meta.touched,
+            },
+            {
+                key: 'dirty',
+                value: meta.dirty,
+            },
+            {
+                key: 'valid',
+                value: meta.valid,
+            },
+        ],
+    };
+}
+function buildFormState(form) {
+    const { errorBag, meta, values, isSubmitting, submitCount } = form;
+    return {
+        'Form state': [
+            {
+                key: 'submitCount',
+                value: submitCount.value,
+            },
+            {
+                key: 'isSubmitting',
+                value: isSubmitting.value,
+            },
+            {
+                key: 'touched',
+                value: meta.value.touched,
+            },
+            {
+                key: 'dirty',
+                value: meta.value.dirty,
+            },
+            {
+                key: 'valid',
+                value: meta.value.valid,
+            },
+            {
+                key: 'initialValues',
+                value: meta.value.initialValues,
+            },
+            {
+                key: 'currentValues',
+                value: values,
+            },
+            {
+                key: 'errors',
+                value: keysOf(errorBag.value).reduce((acc, key) => {
+                    var _a;
+                    const message = (_a = errorBag.value[key]) === null || _a === void 0 ? void 0 : _a[0];
+                    if (message) {
+                        acc[key] = message;
+                    }
+                    return acc;
+                }, {}),
+            },
+        ],
+    };
+}
+/**
+ * Resolves the tag color based on the form state
+ */
+function getTagTheme(fieldOrForm) {
+    // const fallbackColors = {
+    //   bgColor: COLORS.unknown,
+    //   textColor: COLORS.white,
+    // };
+    const isValid = 'id' in fieldOrForm ? fieldOrForm.meta.valid : fieldOrForm.meta.value.valid;
+    return {
+        bgColor: isValid ? COLORS.success : COLORS.error,
+        textColor: isValid ? COLORS.black : COLORS.white,
+    };
+}
+
 /**
  * Creates a field composite.
  */
 function useField(name, rules, opts) {
-    const fid = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
-    const { initialValue, validateOnMount, bails, type, checkedValue, label, validateOnValueUpdate, uncheckedValue, standalone, } = normalizeOptions(unref(name), opts);
+    if (hasCheckedAttr(opts === null || opts === void 0 ? void 0 : opts.type)) {
+        return useCheckboxField(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 form = !standalone ? injectWithSelf(FormContextKey) : undefined;
-    const { meta, errors, errorMessage, handleBlur, handleInput, resetValidationState, setValidationState, setErrors, value, checked, } = useValidationState({
-        name,
-        initValue: initialValue,
-        form,
-        type,
-        checkedValue,
+    const { id, value, initialValue, meta, setState, errors, errorMessage } = useFieldState(name, {
+        modelValue,
         standalone,
     });
+    /**
+     * Handles common onBlur meta update
+     */
+    const handleBlur = () => {
+        meta.touched = true;
+    };
     const normalizedRules = computed(() => {
         let rulesValue = unref(rules);
         const schema = unref(form === null || form === void 0 ? void 0 : form.schema);
@@ -814,27 +1333,30 @@ function useField(name, rules, opts) {
         meta.pending = true;
         meta.validated = true;
         const result = await validateCurrentValue('validated-only');
+        setState({ errors: result.errors });
         meta.pending = false;
-        return setValidationState(result);
+        return result;
     }
     async function validateValidStateOnly() {
         const result = await validateCurrentValue('silent');
         meta.valid = result.valid;
+        return result;
     }
-    // Common input/change event handler
-    const handleChange = (e, shouldValidate = true) => {
-        var _a, _b;
-        if (checked && checked.value === ((_b = (_a = e) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.checked)) {
-            return;
+    function validate$1(opts) {
+        if (!(opts === null || opts === void 0 ? void 0 : opts.mode) || (opts === null || opts === void 0 ? void 0 : opts.mode) === 'force') {
+            return validateWithStateMutation();
         }
-        let newValue = normalizeEventValue(e);
-        // Single checkbox field without a form to toggle it's value
-        if (checked && type === 'checkbox' && !form) {
-            newValue = resolveNextCheckboxValue(value.value, unref(checkedValue), unref(uncheckedValue));
+        if ((opts === null || opts === void 0 ? void 0 : opts.mode) === 'validated-only') {
+            return validateWithStateMutation();
         }
+        return validateValidStateOnly();
+    }
+    // Common input/change event handler
+    const handleChange = (e, shouldValidate = true) => {
+        const newValue = normalizeEventValue(e);
         value.value = newValue;
         if (!validateOnValueUpdate && shouldValidate) {
-            return validateWithStateMutation();
+            validateWithStateMutation();
         }
     };
     // Runs the initial validation
@@ -859,17 +1381,31 @@ function useField(name, rules, opts) {
     }
     watchValue();
     function resetField(state) {
+        var _a;
         unwatchValue === null || unwatchValue === void 0 ? void 0 : unwatchValue();
-        resetValidationState(state);
+        const newValue = state && 'value' in state ? state.value : initialValue.value;
+        setState({
+            value: klona(newValue),
+            initialValue: klona(newValue),
+            touched: (_a = state === null || state === void 0 ? void 0 : state.touched) !== null && _a !== void 0 ? _a : false,
+            errors: (state === null || state === void 0 ? void 0 : state.errors) || [],
+        });
+        meta.pending = false;
+        meta.validated = false;
         validateValidStateOnly();
         // need to watch at next tick to avoid triggering the value watcher
         nextTick(() => {
             watchValue();
         });
     }
+    function setValue(newValue) {
+        value.value = newValue;
+    }
+    function setErrors(errors) {
+        setState({ errors: Array.isArray(errors) ? errors : [errors] });
+    }
     const field = {
-        idx: -1,
-        fid,
+        id,
         name,
         label,
         value,
@@ -879,17 +1415,16 @@ function useField(name, rules, opts) {
         type,
         checkedValue,
         uncheckedValue,
-        checked,
         bails,
         resetField,
         handleReset: () => resetField(),
-        validate: validateWithStateMutation,
+        validate: validate$1,
         handleChange,
         handleBlur,
-        handleInput,
-        setValidationState,
+        setState,
         setTouched,
         setErrors,
+        setValue,
     };
     provide(FieldContextKey, field);
     if (isRef(rules) && typeof unref(rules) !== 'function') {
@@ -897,11 +1432,20 @@ function useField(name, rules, opts) {
             if (es6(value, oldValue)) {
                 return;
             }
-            return validateWithStateMutation();
+            meta.validated ? validateWithStateMutation() : validateValidStateOnly();
         }, {
             deep: true,
         });
     }
+    if ((process.env.NODE_ENV !== 'production')) {
+        field._vm = getCurrentInstance();
+        watch(() => (Object.assign(Object.assign({ errors: errors.value }, meta), { value: value.value })), refreshInspector, {
+            deep: true,
+        });
+        if (!form) {
+            registerSingleFieldWithDevtools(field);
+        }
+    }
     // if no associated form return the field API immediately
     if (!form) {
         return field;
@@ -940,7 +1484,7 @@ function useField(name, rules, opts) {
         }
         const shouldValidate = !es6(deps, oldDeps);
         if (shouldValidate) {
-            meta.dirty ? validateWithStateMutation() : validateValidStateOnly();
+            meta.validated ? validateWithStateMutation() : validateValidStateOnly();
         }
     });
     return field;
@@ -965,104 +1509,6 @@ function normalizeOptions(name, opts) {
     const checkedValue = 'valueProp' in opts ? opts.valueProp : opts.checkedValue;
     return Object.assign(Object.assign(Object.assign({}, defaults()), (opts || {})), { checkedValue });
 }
-/**
- * Manages the validation state of a field.
- */
-function useValidationState({ name, initValue, form, type, checkedValue, standalone, }) {
-    const { errors, errorMessage, setErrors } = useFieldErrors(name, form);
-    const formInitialValues = standalone ? undefined : injectWithSelf(FormInitialValuesKey, undefined);
-    // clones the ref value to a mutable version
-    const initialValueRef = ref(unref(initValue));
-    const initialValue = computed(() => {
-        return getFromPath(unref(formInitialValues), unref(name), unref(initialValueRef));
-    });
-    const value = useFieldValue$1(initialValue, name, form);
-    const meta = useFieldMeta(initialValue, value, errors);
-    const checked = hasCheckedAttr(type)
-        ? computed(() => {
-            if (Array.isArray(value.value)) {
-                return value.value.includes(unref(checkedValue));
-            }
-            return unref(checkedValue) === value.value;
-        })
-        : undefined;
-    /**
-     * Handles common onBlur meta update
-     */
-    const handleBlur = () => {
-        meta.touched = true;
-    };
-    /**
-     * Handles common on blur events
-     * @deprecated You should use `handleChange` instead
-     */
-    const handleInput = (e) => {
-        // Checkboxes/Radio will emit a `change` event anyway, custom components will use `update:modelValue`
-        // so this is redundant
-        if (!hasCheckedAttr(type)) {
-            value.value = normalizeEventValue(e);
-        }
-    };
-    // Updates the validation state with the validation result
-    function setValidationState(result) {
-        setErrors(result.errors);
-        return result;
-    }
-    // Resets the validation state
-    function resetValidationState(state) {
-        var _a;
-        const fieldPath = unref(name);
-        const newValue = state && 'value' in state
-            ? state.value
-            : getFromPath(unref(formInitialValues), fieldPath, unref(initValue));
-        if (form) {
-            form.setFieldValue(fieldPath, newValue, { force: true });
-            form.setFieldInitialValue(fieldPath, newValue);
-        }
-        else {
-            value.value = klona(newValue);
-            initialValueRef.value = klona(newValue);
-        }
-        setErrors((state === null || state === void 0 ? void 0 : state.errors) || []);
-        meta.touched = (_a = state === null || state === void 0 ? void 0 : state.touched) !== null && _a !== void 0 ? _a : false;
-        meta.pending = false;
-        meta.validated = false;
-    }
-    return {
-        meta,
-        errors,
-        errorMessage,
-        setErrors,
-        setValidationState,
-        resetValidationState,
-        handleBlur,
-        handleInput,
-        value,
-        checked,
-    };
-}
-/**
- * Exposes meta flags state and some associated actions with them.
- */
-function useFieldMeta(initialValue, currentValue, errors) {
-    const meta = reactive({
-        touched: false,
-        pending: false,
-        valid: true,
-        validated: !!unref(errors).length,
-        initialValue: computed(() => unref(initialValue)),
-        dirty: computed(() => {
-            return !es6(unref(currentValue), unref(initialValue));
-        }),
-    });
-    watch(errors, value => {
-        meta.valid = !value.length;
-    }, {
-        immediate: true,
-        flush: 'sync',
-    });
-    return meta;
-}
 /**
  * Extracts the validation rules from a schema
  */
@@ -1074,49 +1520,40 @@ function extractRuleFromSchema(schema, fieldName) {
     // there is a key on the schema object for this field
     return schema[fieldName];
 }
-/**
- * Manages the field value
- */
-function useFieldValue$1(initialValue, path, form) {
-    // if no form is associated, use a regular ref.
-    if (!form) {
-        return ref(unref(initialValue));
-    }
-    // to set the initial value, first check if there is a current value, if there is then use it.
-    // otherwise use the configured initial value if it exists.
-    // #3429
-    const currentValue = getFromPath(form.values, unref(path), unref(initialValue));
-    form.stageInitialValue(unref(path), currentValue === undefined ? unref(initialValue) : currentValue);
-    // otherwise use a computed setter that triggers the `setFieldValue`
-    const value = computed({
-        get() {
-            return getFromPath(form.values, unref(path));
-        },
-        set(newVal) {
-            form.setFieldValue(unref(path), newVal);
-        },
-    });
-    return value;
-}
-function useFieldErrors(path, form) {
-    if (!form) {
-        const errors = ref([]);
-        return {
-            errors: computed(() => errors.value),
-            errorMessage: computed(() => errors.value[0]),
-            setErrors: (messages) => {
-                errors.value = Array.isArray(messages) ? messages : [messages];
-            },
-        };
+function useCheckboxField(name, rules, opts) {
+    const form = !(opts === null || opts === void 0 ? void 0 : opts.standalone) ? injectWithSelf(FormContextKey) : undefined;
+    const checkedValue = opts === null || opts === void 0 ? void 0 : opts.checkedValue;
+    const uncheckedValue = opts === null || opts === void 0 ? void 0 : opts.uncheckedValue;
+    function patchCheckboxApi(field) {
+        const handleChange = field.handleChange;
+        const checked = computed(() => {
+            const currentValue = unref(field.value);
+            const checkedVal = unref(checkedValue);
+            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)) {
+                return;
+            }
+            let newValue = normalizeEventValue(e);
+            // Single checkbox field without a form to toggle it's value
+            if (!form) {
+                newValue = resolveNextCheckboxValue(unref(field.value), unref(checkedValue), unref(uncheckedValue));
+            }
+            handleChange(newValue, shouldValidate);
+        }
+        onBeforeUnmount(() => {
+            // toggles the checkbox value if it was checked
+            if (checked.value) {
+                handleCheckboxChange(unref(checkedValue), false);
+            }
+        });
+        return Object.assign(Object.assign({}, field), { checked,
+            checkedValue,
+            uncheckedValue, handleChange: handleCheckboxChange });
     }
-    const errors = computed(() => form.errorBag.value[unref(path)] || []);
-    return {
-        errors,
-        errorMessage: computed(() => errors.value[0]),
-        setErrors: (messages) => {
-            form.setFieldErrorBag(unref(path), messages);
-        },
-    };
+    return patchCheckboxApi(_useField(name, rules, opts));
 }
 
 const Field = defineComponent({
@@ -1190,7 +1627,7 @@ const Field = defineComponent({
         const label = toRef(props, 'label');
         const uncheckedValue = toRef(props, 'uncheckedValue');
         const hasModelEvents = isPropPresent(props, 'onUpdate:modelValue');
-        const { errors, value, errorMessage, validate: validateField, handleChange, handleBlur, handleInput, setTouched, resetField, handleReset, meta, checked, setErrors, } = useField(name, rules, {
+        const { errors, value, errorMessage, validate: validateField, handleChange, handleBlur, setTouched, resetField, handleReset, meta, checked, setErrors, } = useField(name, rules, {
             validateOnMount: props.validateOnMount,
             bails: props.bails,
             standalone: props.standalone,
@@ -1209,8 +1646,13 @@ const Field = defineComponent({
                 ctx.emit('update:modelValue', value.value);
             }
             : handleChange;
+        const handleInput = (e) => {
+            if (!hasCheckedAttr(ctx.attrs.type)) {
+                value.value = normalizeEventValue(e);
+            }
+        };
         const onInputHandler = hasModelEvents
-            ? function handleChangeWithModel(e) {
+            ? function handleInputWithModel(e) {
                 handleInput(e);
                 ctx.emit('update:modelValue', value.value);
             }
@@ -1269,6 +1711,13 @@ const Field = defineComponent({
                 setErrors,
             };
         }
+        ctx.expose({
+            setErrors,
+            setTouched,
+            reset: resetField,
+            validate: validateField,
+            handleChange,
+        });
         return () => {
             const tag = resolveDynamicComponent(resolveTag(props, ctx));
             const children = normalizeChildren(tag, ctx, slotProps);
@@ -1311,40 +1760,19 @@ function resolveInitialValue(props, ctx) {
     return isPropPresent(props, 'modelValue') ? props.modelValue : undefined;
 }
 
+let FORM_COUNTER = 0;
 function useForm(opts) {
-    // A flat array containing field references
-    const fields = ref([]);
+    const formId = FORM_COUNTER++;
+    // A lookup containing fields or field groups
+    const fieldsByPath = ref({});
     // If the form is currently submitting
     const isSubmitting = ref(false);
-    // a field map object useful for faster access of fields
-    const fieldsById = computed(() => {
-        return fields.value.reduce((acc, field) => {
-            const fieldPath = unref(field.name);
-            // if the field was not added before
-            if (!acc[fieldPath]) {
-                acc[fieldPath] = field;
-                field.idx = -1;
-                return acc;
-            }
-            // if the same name is detected
-            const existingField = acc[fieldPath];
-            if (!Array.isArray(existingField)) {
-                existingField.idx = 0;
-                acc[fieldPath] = [existingField];
-            }
-            const fieldGroup = acc[fieldPath];
-            field.idx = fieldGroup.length;
-            fieldGroup.push(field);
-            return acc;
-        }, {});
-    });
     // 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 = {};
     // a private ref for all form values
     const formValues = reactive(klona(unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {}));
-    // a lookup to keep track of values by their field ids
-    // this is important because later we need it if fields swap names
-    const valuesByFid = {};
     // the source of errors for the form fields
     const { errorBag, setErrorBag, setFieldErrorBag } = useErrorBag(opts === null || opts === void 0 ? void 0 : opts.initialErrors);
     // Gets the first error of each field
@@ -1357,12 +1785,19 @@ function useForm(opts) {
             return acc;
         }, {});
     });
+    function getFirstFieldAtPath(path) {
+        const fieldOrGroup = fieldsByPath.value[path];
+        return Array.isArray(fieldOrGroup) ? fieldOrGroup[0] : fieldOrGroup;
+    }
+    function fieldExists(path) {
+        return !!fieldsByPath.value[path];
+    }
     /**
      * Holds a computed reference to all fields names and labels
      */
     const fieldNames = computed(() => {
-        return keysOf(fieldsById.value).reduce((names, path) => {
-            const field = normalizeField(fieldsById.value[path]);
+        return keysOf(fieldsByPath.value).reduce((names, path) => {
+            const field = getFirstFieldAtPath(path);
             if (field) {
                 names[path] = unref(field.label || field.name) || '';
             }
@@ -1370,9 +1805,9 @@ function useForm(opts) {
         }, {});
     });
     const fieldBailsMap = computed(() => {
-        return keysOf(fieldsById.value).reduce((map, path) => {
+        return keysOf(fieldsByPath.value).reduce((map, path) => {
             var _a;
-            const field = normalizeField(fieldsById.value[path]);
+            const field = getFirstFieldAtPath(path);
             if (field) {
                 map[path] = (_a = field.bails) !== null && _a !== void 0 ? _a : true;
             }
@@ -1383,18 +1818,21 @@ function useForm(opts) {
     // we need this to process initial errors then unset them
     const initialErrors = Object.assign({}, ((opts === null || opts === void 0 ? void 0 : opts.initialErrors) || {}));
     // initial form values
-    const { readonlyInitialValues, initialValues, setInitialValues } = useFormInitialValues(fieldsById, formValues, opts === null || opts === void 0 ? void 0 : opts.initialValues);
+    const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(fieldsByPath, formValues, opts === null || opts === void 0 ? void 0 : opts.initialValues);
     // form meta aggregations
-    const meta = useFormMeta(fields, formValues, readonlyInitialValues, errors);
+    const meta = useFormMeta(fieldsByPath, formValues, initialValues, errors);
     const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
     const formCtx = {
-        fieldsById,
+        formId,
+        fieldsByPath,
         values: formValues,
         errorBag,
+        errors,
         schema,
         submitCount,
         meta,
         isSubmitting,
+        fieldArraysLookup,
         validateSchema: unref(schema) ? validateSchema : undefined,
         validate,
         register: registerField,
@@ -1410,8 +1848,18 @@ function useForm(opts) {
         resetForm,
         handleSubmit,
         stageInitialValue,
+        unsetInitialValue,
         setFieldInitialValue,
     };
+    function isFieldGroup(fieldOrGroup) {
+        return Array.isArray(fieldOrGroup);
+    }
+    function applyFieldMutation(fieldOrGroup, mutation) {
+        if (Array.isArray(fieldOrGroup)) {
+            return fieldOrGroup.forEach(mutation);
+        }
+        return mutation(fieldOrGroup);
+    }
     /**
      * Manually sets an error message on a specific field
      */
@@ -1429,7 +1877,7 @@ function useForm(opts) {
      */
     function setFieldValue(field, value, { force } = { force: false }) {
         var _a;
-        const fieldInstance = fieldsById.value[field];
+        const fieldInstance = fieldsByPath.value[field];
         const clonedValue = klona(value);
         // field wasn't found, create a virtual field as a placeholder
         if (!fieldInstance) {
@@ -1437,28 +1885,17 @@ function useForm(opts) {
             return;
         }
         // Multiple checkboxes, and only one of them got updated
-        if (Array.isArray(fieldInstance) && ((_a = fieldInstance[0]) === null || _a === void 0 ? void 0 : _a.type) === 'checkbox' && !Array.isArray(value)) {
-            const newVal = klona(resolveNextCheckboxValue(getFromPath(formValues, field) || [], value, undefined));
-            setInPath(formValues, field, newVal);
-            fieldInstance.forEach(fieldItem => {
-                valuesByFid[fieldItem.fid] = newVal;
-            });
+        if (isFieldGroup(fieldInstance) && ((_a = fieldInstance[0]) === null || _a === void 0 ? void 0 : _a.type) === 'checkbox' && !Array.isArray(value)) {
+            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 (!Array.isArray(fieldInstance) && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.type) === 'checkbox' && !force) {
+        if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force) {
             newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field), value, unref(fieldInstance.uncheckedValue)));
         }
         setInPath(formValues, field, newValue);
-        // multiple radio fields
-        if (fieldInstance && Array.isArray(fieldInstance)) {
-            fieldInstance.forEach(fieldItem => {
-                valuesByFid[fieldItem.fid] = newValue;
-            });
-            return;
-        }
-        valuesByFid[fieldInstance.fid] = newValue;
     }
     /**
      * Sets multiple fields values
@@ -1472,16 +1909,17 @@ function useForm(opts) {
         keysOf(fields).forEach(path => {
             setFieldValue(path, fields[path]);
         });
+        // regenerate the arrays when the form values change
+        Object.values(fieldArraysLookup).forEach(f => f && f.reset());
     }
     /**
      * Sets the touched meta state on a field
      */
     function setFieldTouched(field, isTouched) {
-        const fieldInstance = fieldsById.value[field];
-        if (!fieldInstance) {
-            return;
+        const fieldInstance = fieldsByPath.value[field];
+        if (fieldInstance) {
+            applyFieldMutation(fieldInstance, f => f.setTouched(isTouched));
         }
-        applyFieldMutation(fieldInstance, f => f.setTouched(isTouched));
     }
     /**
      * Sets the touched meta state on multiple fields
@@ -1501,108 +1939,123 @@ function useForm(opts) {
             setValues(state === null || state === void 0 ? void 0 : state.values);
         }
         else {
+            // clean up the initial values back to the original
+            setInitialValues(originalInitialValues.value);
             // otherwise clean the current values
-            setValues(initialValues.value);
+            setValues(originalInitialValues.value);
         }
-        // Reset all fields state
-        fields.value.forEach(f => f.resetField());
+        Object.values(fieldsByPath.value).forEach(field => {
+            if (!field) {
+                return;
+            }
+            applyFieldMutation(field, 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;
     }
+    function insertFieldAtPath(field, path) {
+        const rawField = markRaw(field);
+        const fieldPath = path;
+        // first field at that path
+        if (!fieldsByPath.value[fieldPath]) {
+            fieldsByPath.value[fieldPath] = rawField;
+            return;
+        }
+        const fieldAtPath = fieldsByPath.value[fieldPath];
+        if (fieldAtPath && !Array.isArray(fieldAtPath)) {
+            fieldsByPath.value[fieldPath] = [fieldAtPath];
+        }
+        // add the new array to that path
+        fieldsByPath.value[fieldPath] = [...fieldsByPath.value[fieldPath], rawField];
+    }
+    function removeFieldFromPath(field, path) {
+        const fieldPath = path;
+        const fieldAtPath = fieldsByPath.value[fieldPath];
+        if (!fieldAtPath) {
+            return;
+        }
+        // same field at path
+        if (!isFieldGroup(fieldAtPath) && field.id === fieldAtPath.id) {
+            delete fieldsByPath.value[fieldPath];
+            return;
+        }
+        if (isFieldGroup(fieldAtPath)) {
+            const idx = fieldAtPath.findIndex(f => f.id === field.id);
+            if (idx === -1) {
+                return;
+            }
+            fieldAtPath.splice(idx, 1);
+            if (fieldAtPath.length === 1) {
+                fieldsByPath.value[fieldPath] = fieldAtPath[0];
+                return;
+            }
+            if (!fieldAtPath.length) {
+                delete fieldsByPath.value[fieldPath];
+            }
+        }
+    }
     function registerField(field) {
-        fields.value.push(field);
-        // TODO: Do this automatically on registration
-        // eslint-disable-next-line no-unused-expressions
-        fieldsById.value; // force computation of the fields ids to properly set their idx
+        const fieldPath = unref(field.name);
+        insertFieldAtPath(field, fieldPath);
         if (isRef(field.name)) {
-            valuesByFid[field.fid] = field.value.value;
             // ensures when a field's name was already taken that it preserves its same value
             // necessary for fields generated by loops
-            watch(field.name, (newPath, oldPath) => {
-                setFieldValue(newPath, valuesByFid[field.fid]);
-                const isSharingName = fields.value.find(f => unref(f.name) === oldPath);
+            watch(field.name, async (newPath, oldPath) => {
+                // cache the value
+                await nextTick();
+                removeFieldFromPath(field, oldPath);
+                insertFieldAtPath(field, newPath);
+                // re-validate if either path had errors before
+                if (errors.value[oldPath] || errors.value[newPath]) {
+                    validateField(newPath);
+                }
                 // clean up the old path if no other field is sharing that name
                 // #3325
-                if (!isSharingName) {
+                await nextTick();
+                if (!fieldExists(oldPath)) {
                     unsetPath(formValues, oldPath);
-                    unsetPath(initialValues.value, oldPath);
                 }
-            }, {
-                flush: 'post',
             });
         }
         // if field already had errors (initial errors) that's not user-set, validate it again to ensure state is correct
         // the difference being that `initialErrors` will contain the error message while other errors (pre-validated schema) won't have them as initial errors
         // #3342
-        const path = unref(field.name);
         const initialErrorMessage = unref(field.errorMessage);
-        if (initialErrorMessage && (initialErrors === null || initialErrors === void 0 ? void 0 : initialErrors[path]) !== initialErrorMessage) {
-            validateField(path);
+        if (initialErrorMessage && (initialErrors === null || initialErrors === void 0 ? void 0 : initialErrors[fieldPath]) !== initialErrorMessage) {
+            validateField(fieldPath);
         }
         // marks the initial error as "consumed" so it won't be matched later with same non-initial error
-        delete initialErrors[path];
+        delete initialErrors[fieldPath];
     }
     function unregisterField(field) {
-        var _a, _b;
-        const idx = fields.value.indexOf(field);
-        if (idx === -1) {
-            return;
-        }
-        fields.value.splice(idx, 1);
-        const fid = field.fid;
-        // cleans up the field value from fid lookup
+        const fieldName = unref(field.name);
+        removeFieldFromPath(field, fieldName);
         nextTick(() => {
-            delete valuesByFid[fid];
             // 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 (!fieldsById.value[fieldName]) {
+            if (!fieldExists(fieldName)) {
                 setFieldError(fieldName, undefined);
+                unsetPath(formValues, fieldName);
             }
         });
-        const fieldName = unref(field.name);
-        // in this case, this is a single field not a group (checkbox or radio)
-        // so remove the field value key immediately
-        if (field.idx === -1) {
-            // avoid un-setting the value if the field was switched with another that shares the same name
-            // they will be unset once the new field takes over the new name, look at `#registerField()`
-            // #3166
-            const isSharingName = fields.value.find(f => unref(f.name) === fieldName);
-            if (isSharingName) {
-                return;
-            }
-            unsetPath(formValues, fieldName);
-            unsetPath(initialValues.value, fieldName);
-            return;
-        }
-        // otherwise find the actual value in the current array of values and remove it
-        const valueIdx = (_b = (_a = getFromPath(formValues, fieldName)) === null || _a === void 0 ? void 0 : _a.indexOf) === null || _b === void 0 ? void 0 : _b.call(_a, unref(field.checkedValue));
-        if (valueIdx === undefined) {
-            unsetPath(formValues, fieldName);
-            return;
-        }
-        if (valueIdx === -1) {
-            return;
-        }
-        if (Array.isArray(formValues[fieldName])) {
-            unsetPath(formValues, `${fieldName}.${valueIdx}`);
-            return;
-        }
-        unsetPath(formValues, fieldName);
-        unsetPath(initialValues.value, fieldName);
     }
-    async function validate() {
+    async function validate(opts) {
         if (formCtx.validateSchema) {
-            return formCtx.validateSchema('force');
+            return formCtx.validateSchema((opts === null || opts === void 0 ? void 0 : opts.mode) || 'force');
         }
         // No schema, each field is responsible to validate itself
-        const validations = await Promise.all(fields.value.map(f => {
-            return f.validate().then((result) => {
+        const validations = await Promise.all(Object.values(fieldsByPath.value).map(field => {
+            const fieldInstance = Array.isArray(field) ? field[0] : field;
+            if (!fieldInstance) {
+                return Promise.resolve({ key: '', valid: true, errors: [] });
+            }
+            return fieldInstance.validate(opts).then((result) => {
                 return {
-                    key: unref(f.name),
+                    key: unref(fieldInstance.name),
                     valid: result.valid,
                     errors: result.errors,
                 };
@@ -1625,8 +2078,8 @@ function useForm(opts) {
             errors,
         };
     }
-    function validateField(field) {
-        const fieldInstance = fieldsById.value[field];
+    async function validateField(field) {
+        const fieldInstance = fieldsByPath.value[field];
         if (!fieldInstance) {
             warn$1(`field with name ${field} was not found`);
             return Promise.resolve({ errors: [], valid: true });
@@ -1636,14 +2089,14 @@ function useForm(opts) {
         }
         return fieldInstance.validate();
     }
-    function handleSubmit(fn) {
+    function handleSubmit(fn, onValidationError) {
         return function submissionHandler(e) {
             if (e instanceof Event) {
                 e.preventDefault();
                 e.stopPropagation();
             }
             // Touch all fields
-            setTouched(keysOf(fieldsById.value).reduce((acc, field) => {
+            setTouched(keysOf(fieldsByPath.value).reduce((acc, field) => {
                 acc[field] = true;
                 return acc;
             }, {}));
@@ -1663,9 +2116,18 @@ function useForm(opts) {
                         resetForm,
                     });
                 }
+                if (!result.valid && typeof onValidationError === 'function') {
+                    onValidationError({
+                        values: klona(formValues),
+                        evt: e,
+                        errors: result.errors,
+                        results: result.results,
+                    });
+                }
             })
-                .then(() => {
+                .then(returnVal => {
                 isSubmitting.value = false;
+                return returnVal;
             }, err => {
                 isSubmitting.value = false;
                 // re-throw the err so it doesn't go silent
@@ -1676,6 +2138,9 @@ function useForm(opts) {
     function setFieldInitialValue(path, value) {
         setInPath(initialValues.value, path, klona(value));
     }
+    function unsetInitialValue(path) {
+        unsetPath(initialValues.value, path);
+    }
     /**
      * Sneaky function to set initial field values
      */
@@ -1683,7 +2148,7 @@ function useForm(opts) {
         setInPath(formValues, path, value);
         setFieldInitialValue(path, value);
     }
-    async function validateSchema(mode) {
+    async function _validateSchema() {
         const schemaValue = unref(schema);
         if (!schemaValue) {
             return { valid: true, results: {}, errors: {} };
@@ -1694,8 +2159,16 @@ function useForm(opts) {
                 names: fieldNames.value,
                 bailsMap: fieldBailsMap.value,
             });
+        return formResult;
+    }
+    /**
+     * Batches validation runs in 5ms batches
+     */
+    const debouncedSchemaValidation = debounceAsync(_validateSchema, 5);
+    async function validateSchema(mode) {
+        const formResult = await debouncedSchemaValidation();
         // fields by id lookup
-        const fieldsById = formCtx.fieldsById.value || {};
+        const fieldsById = formCtx.fieldsByPath.value || {};
         // errors fields names, we need it to also check if custom errors are updated
         const currentErrorsPaths = keysOf(formCtx.errorBag.value);
         // collect all the keys from the schema and all fields
@@ -1729,7 +2202,7 @@ function useForm(opts) {
             if (mode === 'validated-only' && !wasValidated) {
                 return validation;
             }
-            applyFieldMutation(field, f => f.setValidationState(fieldResult), true);
+            applyFieldMutation(field, f => f.setState({ errors: fieldResult.errors }));
             return validation;
         }, { valid: formResult.valid, results: {}, errors: {} });
     }
@@ -1765,7 +2238,12 @@ function useForm(opts) {
     }
     // Provide injections
     provide(FormContextKey, formCtx);
-    provide(FormErrorsKey, errors);
+    if ((process.env.NODE_ENV !== 'production')) {
+        registerFormWithDevTools(formCtx);
+        watch(() => (Object.assign(Object.assign({ errors: errorBag.value }, meta.value), { values: formValues, isSubmitting: isSubmitting.value, submitCount: submitCount.value })), refreshInspector, {
+            deep: true,
+        });
+    }
     return {
         errors,
         meta,
@@ -1789,7 +2267,7 @@ function useForm(opts) {
 /**
  * Manages form meta aggregation
  */
-function useFormMeta(fields, currentValues, initialValues, errors) {
+function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
     const MERGE_STRATEGIES = {
         touched: 'some',
         pending: 'some',
@@ -1799,9 +2277,10 @@ function useFormMeta(fields, currentValues, initialValues, errors) {
         return !es6(currentValues, unref(initialValues));
     });
     const flags = computed(() => {
+        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.value[mergeMethod](field => field.meta[flag]);
+            acc[flag] = fields[mergeMethod](field => field.meta[flag]);
             return acc;
         }, {});
     });
@@ -1813,13 +2292,17 @@ function useFormMeta(fields, currentValues, initialValues, errors) {
  * Manages the initial values prop
  */
 function useFormInitialValues(fields, formValues, providedValues) {
-    const initialValues = ref(unref(providedValues) || {});
-    // acts as a read only proxy of the initial values object
-    const computedInitials = computed(() => {
-        return initialValues.value;
-    });
+    // these are the mutable initial values as the fields are mounted/unmounted
+    const initialValues = ref(klona(unref(providedValues)) || {});
+    // these are the original initial value as provided by the user initially, they don't keep track of conditional fields
+    // this is important because some conditional fields will overwrite the initial values for other fields who had the same name
+    // like array fields, any push/insert operation will overwrite the initial values because they "create new fields"
+    // so these are the values that the reset function should use
+    // these only change when the user explicitly chanegs the initial values or when the user resets them with new values.
+    const originalInitialValues = ref(klona(unref(providedValues)) || {});
     function setInitialValues(values, updateFields = false) {
         initialValues.value = klona(values);
+        originalInitialValues.value = klona(values);
         if (!updateFields) {
             return;
         }
@@ -1827,15 +2310,14 @@ function useFormInitialValues(fields, formValues, providedValues) {
         // those are excluded because it's unlikely you want to change the form values using initial values
         // we mostly watch them for API population or newly inserted fields
         // if the user API is taking too much time before user interaction they should consider disabling or hiding their inputs until the values are ready
-        const hadInteraction = (f) => f.meta.touched;
         keysOf(fields.value).forEach(fieldPath => {
             const field = fields.value[fieldPath];
-            const touchedByUser = Array.isArray(field) ? field.some(hadInteraction) : hadInteraction(field);
-            if (touchedByUser) {
+            const wasTouched = Array.isArray(field) ? field.some(f => f.meta.touched) : field === null || field === void 0 ? void 0 : field.meta.touched;
+            if (!field || wasTouched) {
                 return;
             }
             const newValue = getFromPath(initialValues.value, fieldPath);
-            setInPath(formValues, fieldPath, newValue);
+            setInPath(formValues, fieldPath, klona(newValue));
         });
     }
     if (isRef(providedValues)) {
@@ -1845,10 +2327,9 @@ function useFormInitialValues(fields, formValues, providedValues) {
             deep: true,
         });
     }
-    provide(FormInitialValuesKey, computedInitials);
     return {
-        readonlyInitialValues: computedInitials,
         initialValues,
+        originalInitialValues,
         setInitialValues,
     };
 }
@@ -1921,6 +2402,10 @@ const Form = defineComponent({
             type: Function,
             default: undefined,
         },
+        onInvalidSubmit: {
+            type: Function,
+            default: undefined,
+        },
     },
     setup(props, ctx) {
         const initialValues = toRef(props, 'initialValues');
@@ -1932,7 +2417,7 @@ const Form = defineComponent({
             initialTouched: props.initialTouched,
             validateOnMount: props.validateOnMount,
         });
-        const onSubmit = props.onSubmit ? handleSubmit(props.onSubmit) : submitForm;
+        const onSubmit = props.onSubmit ? handleSubmit(props.onSubmit, props.onInvalidSubmit) : submitForm;
         function handleFormReset(e) {
             if (isEvent(e)) {
                 // Prevent default form reset behavior
@@ -1945,7 +2430,7 @@ const Form = defineComponent({
         }
         function handleScopedSlotSubmit(evt, onSubmit) {
             const onSuccess = typeof evt === 'function' && !onSubmit ? evt : onSubmit;
-            return handleSubmit(onSuccess)(evt);
+            return handleSubmit(onSuccess, props.onInvalidSubmit)(evt);
         }
         function slotProps() {
             return {
@@ -1999,6 +2484,203 @@ const Form = defineComponent({
     },
 });
 
+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),
+        remove: noOp,
+        push: noOp,
+        swap: noOp,
+        insert: noOp,
+        update: noOp,
+        replace: noOp,
+        prepend: noOp,
+    };
+    if (!form) {
+        warn('FieldArray requires being a child of `<Form/>` or `useForm` being called before it. Array fields may not work correctly');
+        return noOpApi;
+    }
+    if (!unref(arrayPath)) {
+        warn('FieldArray requires a field path to be provided, did you forget to pass the `name` prop?');
+        return noOpApi;
+    }
+    let entryCounter = 0;
+    function initFields() {
+        const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []);
+        fields.value = currentValues.map(createEntry);
+        updateEntryFlags();
+    }
+    initFields();
+    function updateEntryFlags() {
+        const fieldsLength = fields.value.length;
+        for (let i = 0; i < fieldsLength; i++) {
+            const entry = fields.value[i];
+            entry.isFirst = i === 0;
+            entry.isLast = i === fieldsLength - 1;
+        }
+    }
+    function createEntry(value) {
+        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];
+            }),
+            isFirst: false,
+            isLast: false,
+        };
+        return entry;
+    }
+    function remove(idx) {
+        const pathName = unref(arrayPath);
+        const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+        if (!pathValue || !Array.isArray(pathValue)) {
+            return;
+        }
+        const newValue = [...pathValue];
+        newValue.splice(idx, 1);
+        form === null || form === void 0 ? void 0 : form.unsetInitialValue(pathName + `[${idx}]`);
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        fields.value.splice(idx, 1);
+        updateEntryFlags();
+    }
+    function push(value) {
+        const pathName = unref(arrayPath);
+        const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+        const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
+        if (!Array.isArray(normalizedPathValue)) {
+            return;
+        }
+        const newValue = [...normalizedPathValue];
+        newValue.push(value);
+        form === null || form === void 0 ? void 0 : form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        fields.value.push(createEntry(value));
+        updateEntryFlags();
+    }
+    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]) {
+            return;
+        }
+        const newValue = [...pathValue];
+        const newFields = [...fields.value];
+        // the old switcheroo
+        const temp = newValue[indexA];
+        newValue[indexA] = newValue[indexB];
+        newValue[indexB] = temp;
+        const tempEntry = newFields[indexA];
+        newFields[indexA] = newFields[indexB];
+        newFields[indexB] = tempEntry;
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        fields.value = newFields;
+        updateEntryFlags();
+    }
+    function insert(idx, value) {
+        const pathName = unref(arrayPath);
+        const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+        if (!Array.isArray(pathValue) || pathValue.length < idx) {
+            return;
+        }
+        const newValue = [...pathValue];
+        const newFields = [...fields.value];
+        newValue.splice(idx, 0, value);
+        newFields.splice(idx, 0, createEntry(value));
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        fields.value = newFields;
+        updateEntryFlags();
+    }
+    function replace(arr) {
+        const pathName = unref(arrayPath);
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, arr);
+        initFields();
+    }
+    function update(idx, value) {
+        const pathName = unref(arrayPath);
+        const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+        if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
+            return;
+        }
+        form === null || form === void 0 ? void 0 : form.setFieldValue(`${pathName}[${idx}]`, value);
+    }
+    function prepend(value) {
+        const pathName = unref(arrayPath);
+        const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
+        const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
+        if (!Array.isArray(normalizedPathValue)) {
+            return;
+        }
+        const newValue = [value, ...normalizedPathValue];
+        form === null || form === void 0 ? void 0 : form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        fields.value.unshift(createEntry(value));
+        updateEntryFlags();
+    }
+    form.fieldArraysLookup[id] = {
+        reset: initFields,
+    };
+    onBeforeUnmount(() => {
+        delete form.fieldArraysLookup[id];
+    });
+    return {
+        fields: readonly(fields),
+        remove,
+        push,
+        swap,
+        insert,
+        update,
+        replace,
+        prepend,
+    };
+}
+
+const FieldArray = defineComponent({
+    name: 'FieldArray',
+    inheritAttrs: false,
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props, ctx) {
+        const { push, remove, swap, insert, replace, update, prepend, fields } = useFieldArray(toRef(props, 'name'));
+        function slotProps() {
+            return {
+                fields: fields.value,
+                push,
+                remove,
+                swap,
+                insert,
+                update,
+                replace,
+                prepend,
+            };
+        }
+        ctx.expose({
+            push,
+            remove,
+            swap,
+            insert,
+            update,
+            replace,
+            prepend,
+        });
+        return () => {
+            const children = normalizeChildren(undefined, ctx, slotProps);
+            return children;
+        };
+    },
+});
+
 const ErrorMessage = defineComponent({
     name: 'ErrorMessage',
     props: {
@@ -2012,9 +2694,9 @@ const ErrorMessage = defineComponent({
         },
     },
     setup(props, ctx) {
-        const errors = inject(FormErrorsKey, undefined);
+        const form = inject(FormContextKey, undefined);
         const message = computed(() => {
-            return errors === null || errors === void 0 ? void 0 : errors.value[props.name];
+            return form === null || form === void 0 ? void 0 : form.errors.value[props.name];
         });
         function slotProps() {
             return {
@@ -2065,7 +2747,7 @@ function useIsFieldDirty(path) {
     let field = path ? undefined : inject(FieldContextKey);
     return computed(() => {
         if (path) {
-            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[unref(path)]);
+            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[unref(path)]);
         }
         if (!field) {
             warn(`field with name ${unref(path)} was not found`);
@@ -2083,7 +2765,7 @@ function useIsFieldTouched(path) {
     let field = path ? undefined : inject(FieldContextKey);
     return computed(() => {
         if (path) {
-            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[unref(path)]);
+            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[unref(path)]);
         }
         if (!field) {
             warn(`field with name ${unref(path)} was not found`);
@@ -2101,7 +2783,7 @@ function useIsFieldValid(path) {
     let field = path ? undefined : inject(FieldContextKey);
     return computed(() => {
         if (path) {
-            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[unref(path)]);
+            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[unref(path)]);
         }
         if (!field) {
             warn(`field with name ${unref(path)} was not found`);
@@ -2133,7 +2815,7 @@ function useValidateField(path) {
     let field = path ? undefined : inject(FieldContextKey);
     return function validateField() {
         if (path) {
-            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[unref(path)]);
+            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[unref(path)]);
         }
         if (!field) {
             warn(`field with name ${unref(path)} was not found`);
@@ -2226,11 +2908,10 @@ function useFieldValue(path) {
     // We don't want to use self injected context as it doesn't make sense
     const field = path ? undefined : inject(FieldContextKey);
     return computed(() => {
-        var _a;
         if (path) {
             return getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(path));
         }
-        return (_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.value;
+        return unref(field === null || field === void 0 ? void 0 : field.value);
     });
 }
 
@@ -2251,24 +2932,25 @@ function useFormValues() {
  * Gives access to all form errors
  */
 function useFormErrors() {
-    const errors = injectWithSelf(FormErrorsKey);
-    if (!errors) {
+    const form = injectWithSelf(FormContextKey);
+    if (!form) {
         warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
     }
-    return errors || computed(() => ({}));
+    return computed(() => {
+        return ((form === null || form === void 0 ? void 0 : form.errors.value) || {});
+    });
 }
 
 /**
  * Gives access to a single field error
  */
 function useFieldError(path) {
-    const errors = injectWithSelf(FormErrorsKey);
+    const form = injectWithSelf(FormContextKey);
     // We don't want to use self injected context as it doesn't make sense
     const field = path ? undefined : inject(FieldContextKey);
     return computed(() => {
-        var _a;
         if (path) {
-            return (_a = errors === null || errors === void 0 ? void 0 : errors.value) === null || _a === void 0 ? void 0 : _a[unref(path)];
+            return form === null || form === void 0 ? void 0 : form.errors.value[unref(path)];
         }
         return field === null || field === void 0 ? void 0 : field.errorMessage.value;
     });
@@ -2288,4 +2970,4 @@ function useSubmitForm(cb) {
     };
 }
 
-export { ErrorMessage, Field, FieldContextKey, Form, FormContextKey, configure, defineRule, useField, 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, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate };