vee-validate 4.8.6 → 4.9.1

package/dist/vee-validate.esm.js

@@ -1,9 +1,9 @@
 /**
-  * vee-validate v4.8.6
+  * vee-validate v4.9.1
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
-import { getCurrentInstance, inject, warn as warn$1, computed, ref, watch, unref, isRef, reactive, onUnmounted, nextTick, onMounted, provide, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, watchEffect, markRaw } from 'vue';
+import { getCurrentInstance, inject, warn as warn$1, unref, computed, ref, watch, isRef, reactive, onUnmounted, nextTick, onMounted, provide, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, watchEffect, shallowRef } from 'vue';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 
 function isCallable(fn) {
@@ -20,6 +20,19 @@ function toNumber(value) {
     const n = parseFloat(value);
     return isNaN(n) ? value : n;
 }
+function merge(target, source) {
+    Object.keys(source).forEach(key => {
+        if (isObject(source[key])) {
+            if (!target[key]) {
+                target[key] = {};
+            }
+            merge(target[key], source[key]);
+            return;
+        }
+        target[key] = source[key];
+    });
+    return target;
+}
 
 const RULES = {};
 /**
@@ -390,15 +403,6 @@ function injectWithSelf(symbol, def = undefined) {
 function warn(message) {
     warn$1(`[vee-validate]: ${message}`);
 }
-/**
- * Ensures we deal with a singular field value
- */
-function normalizeField(field) {
-    if (Array.isArray(field)) {
-        return field[0];
-    }
-    return field;
-}
 function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
     if (Array.isArray(currentValue)) {
         const newVal = [...currentValue];
@@ -497,6 +501,27 @@ function unravel(value) {
 function lazyToRef(value) {
     return computed(() => unravel(value));
 }
+function normalizeErrorItem(message) {
+    return Array.isArray(message) ? message : message ? [message] : [];
+}
+function resolveFieldOrPathState(path) {
+    const form = injectWithSelf(FormContextKey);
+    const state = path ? computed(() => form === null || form === void 0 ? void 0 : form.getPathState(unref(path))) : undefined;
+    const field = path ? undefined : inject(FieldContextKey);
+    if (!field && !(state === null || state === void 0 ? void 0 : state.value)) {
+        warn(`field with name ${unref(path)} was not found`);
+    }
+    return state || field;
+}
+function omit(obj, keys) {
+    const target = {};
+    for (const key in obj) {
+        if (!keys.includes(key)) {
+            target[key] = obj[key];
+        }
+    }
+    return target;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const normalizeChildren = (tag, context, slotProps) => {
@@ -921,32 +946,64 @@ async function validateObjectSchema(schema, values, opts) {
 let ID_COUNTER = 0;
 function useFieldState(path, init) {
     const { value, initialValue, setInitialValue } = _useFieldValue(path, init.modelValue, init.form);
-    const { errorMessage, errors, setErrors } = _useFieldErrors(path, init.form);
-    const meta = _useFieldMeta(value, initialValue, errors);
-    const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
+    if (!init.form) {
+        const { errors, setErrors } = createFieldErrors();
+        const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
+        const meta = createFieldMeta(value, initialValue, errors);
+        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,
+            setState,
+        };
+    }
+    const state = init.form.createPathState(path, {
+        bails: init.bails,
+        label: init.label,
+        type: init.type,
+        validate: init.validate,
+    });
+    const errors = computed(() => state.errors);
     function setState(state) {
-        var _a;
+        var _a, _b, _c;
         if ('value' in state) {
             value.value = state.value;
         }
         if ('errors' in state) {
-            setErrors(state.errors);
+            (_a = init.form) === null || _a === void 0 ? void 0 : _a.setFieldError(unref(path), state.errors);
         }
         if ('touched' in state) {
-            meta.touched = (_a = state.touched) !== null && _a !== void 0 ? _a : meta.touched;
+            (_b = init.form) === null || _b === void 0 ? void 0 : _b.setFieldTouched(unref(path), (_c = state.touched) !== null && _c !== void 0 ? _c : false);
         }
         if ('initialValue' in state) {
             setInitialValue(state.initialValue);
         }
     }
     return {
-        id,
+        id: Array.isArray(state.id) ? state.id[state.id.length - 1] : state.id,
         path,
         value,
-        initialValue,
-        meta,
         errors,
-        errorMessage,
+        meta: state,
+        initialValue,
         setState,
     };
 }
@@ -959,7 +1016,7 @@ function _useFieldValue(path, modelValue, form) {
         if (!form) {
             return unref(modelRef);
         }
-        return getFromPath(form.meta.value.initialValues, unref(path), unref(modelRef));
+        return getFromPath(form.initialValues.value, unref(path), unref(modelRef));
     }
     function setInitialValue(value) {
         if (!form) {
@@ -1017,7 +1074,7 @@ function resolveModelValue(modelValue, form, initialValue, path) {
 /**
  * Creates meta flags state and some associated effects with them
  */
-function _useFieldMeta(currentValue, initialValue, errors) {
+function createFieldMeta(currentValue, initialValue, errors) {
     const meta = reactive({
         touched: false,
         pending: false,
@@ -1039,29 +1096,12 @@ function _useFieldMeta(currentValue, initialValue, errors) {
 /**
  * Creates the error message state for the field state
  */
-function _useFieldErrors(path, form) {
-    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)] || []);
+function createFieldErrors() {
+    const errors = ref([]);
     return {
         errors,
-        errorMessage: computed(() => errors.value[0]),
         setErrors: (messages) => {
-            form.setFieldErrorBag(unref(path), normalizeErrors(messages));
+            errors.value = normalizeErrorItem(messages);
         },
     };
 }
@@ -1151,7 +1191,17 @@ function setupApiHooks(api) {
                         console.error('There is not a valid selected vee-validate node or component');
                         return;
                     }
-                    await SELECTED_NODE.validate();
+                    if (SELECTED_NODE.type === 'field') {
+                        await SELECTED_NODE.field.validate();
+                        return;
+                    }
+                    if (SELECTED_NODE.type === 'form') {
+                        await SELECTED_NODE.form.validate();
+                        return;
+                    }
+                    if (SELECTED_NODE.type === 'pathState') {
+                        await SELECTED_NODE.form.validateField(SELECTED_NODE.state.path);
+                    }
                 },
             },
             {
@@ -1162,11 +1212,16 @@ function setupApiHooks(api) {
                         console.error('There is not a valid selected vee-validate node or component');
                         return;
                     }
-                    if ('id' in SELECTED_NODE) {
-                        SELECTED_NODE.resetField();
+                    if (SELECTED_NODE.type === 'field') {
+                        SELECTED_NODE.field.resetField();
                         return;
                     }
-                    SELECTED_NODE.resetForm();
+                    if (SELECTED_NODE.type === 'form') {
+                        SELECTED_NODE.form.resetForm();
+                    }
+                    if (SELECTED_NODE.type === 'pathState') {
+                        SELECTED_NODE.form.resetField(SELECTED_NODE.state.path);
+                    }
                 },
             },
         ],
@@ -1186,29 +1241,37 @@ function setupApiHooks(api) {
         if (payload.inspectorId !== INSPECTOR_ID || ctx.currentTab !== `custom-inspector:${INSPECTOR_ID}`) {
             return;
         }
-        const { form, field, type } = decodeNodeId(payload.nodeId);
+        const { form, field, state, type } = decodeNodeId(payload.nodeId);
         if (form && type === 'form') {
             payload.state = buildFormState(form);
-            SELECTED_NODE = form;
+            SELECTED_NODE = { type: 'form', form };
+            return;
+        }
+        if (state && type === 'pathState' && form) {
+            payload.state = buildFieldState(state);
+            SELECTED_NODE = { type: 'pathState', state, form };
             return;
         }
         if (field && type === 'field') {
-            payload.state = buildFieldState(field);
-            SELECTED_NODE = field;
+            payload.state = buildFieldState({
+                errors: field.errors.value,
+                dirty: field.meta.dirty,
+                valid: field.meta.valid,
+                touched: field.meta.touched,
+                value: field.value.value,
+                initialValue: field.meta.initialValue,
+            });
+            SELECTED_NODE = { field, type: 'field' };
             return;
         }
         SELECTED_NODE = null;
     });
 }
 function mapFormForDevtoolsInspector(form) {
-    const { textColor, bgColor } = getTagTheme(form);
+    const { textColor, bgColor } = getValidityColors(form.meta.value.valid);
     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));
+    Object.values(form.getAllPathStates()).forEach(state => {
+        setInPath(formTreeNodes, unref(state.path), mapPathForDevtoolsInspector(state, form));
     });
     function buildFormTree(tree, path = []) {
         const key = [...path].pop();
@@ -1243,68 +1306,71 @@ function mapFormForDevtoolsInspector(form) {
                 backgroundColor: bgColor,
             },
             {
-                label: `${Object.keys(form.fieldsByPath.value).length} fields`,
+                label: `${form.getAllPathStates().length} fields`,
                 textColor: COLORS.white,
                 backgroundColor: COLORS.unknown,
             },
         ],
     };
 }
+function mapPathForDevtoolsInspector(state, form) {
+    return {
+        id: encodeNodeId(form, state),
+        label: unref(state.path),
+        tags: getFieldNodeTags(state.multiple, state.fieldsCount, state.type, state.valid, form),
+    };
+}
 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),
+        id: encodeNodeId(form, field),
+        label: unref(field.name),
+        tags: getFieldNodeTags(false, 1, field.type, field.meta.valid, form),
     };
 }
-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' };
+function getFieldNodeTags(multiple, fieldsCount, type, valid, form) {
+    const { textColor, bgColor } = getValidityColors(valid);
+    return [
+        multiple
+            ? undefined
+            : {
+                label: 'Field',
+                textColor,
+                backgroundColor: bgColor,
+            },
+        !form
+            ? {
+                label: 'Standalone',
+                textColor: COLORS.black,
+                backgroundColor: COLORS.gray,
+            }
+            : undefined,
+        type === 'checkbox'
+            ? {
+                label: 'Checkbox',
+                textColor: COLORS.white,
+                backgroundColor: COLORS.blue,
+            }
+            : undefined,
+        type === 'radio'
+            ? {
+                label: 'Radio',
+                textColor: COLORS.white,
+                backgroundColor: COLORS.purple,
+            }
+            : undefined,
+        multiple
+            ? {
+                label: 'Multiple',
+                textColor: COLORS.black,
+                backgroundColor: COLORS.orange,
+            }
+            : undefined,
+    ].filter(Boolean);
+}
+function encodeNodeId(form, stateOrField) {
+    const type = stateOrField ? ('path' in stateOrField ? 'pathState' : 'field') : 'form';
+    const fieldPath = stateOrField ? ('path' in stateOrField ? stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.path : unref(stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.name)) : '';
+    const idObject = { f: form === null || form === void 0 ? void 0 : form.formId, ff: fieldPath, type };
     return btoa(JSON.stringify(idObject));
 }
 function decodeNodeId(nodeId) {
@@ -1324,11 +1390,11 @@ function decodeNodeId(nodeId) {
         if (!form) {
             return {};
         }
-        const fieldGroup = form.fieldsByPath.value[idObject.ff];
+        const state = form.getPathState(idObject.ff);
         return {
             type: idObject.type,
             form,
-            field: Array.isArray(fieldGroup) ? fieldGroup[idObject.idx || 0] : fieldGroup,
+            state,
         };
     }
     catch (err) {
@@ -1336,30 +1402,29 @@ function decodeNodeId(nodeId) {
     }
     return {};
 }
-function buildFieldState(field) {
-    const { errors, meta, value } = field;
+function buildFieldState(state) {
     return {
         'Field state': [
-            { key: 'errors', value: errors.value },
+            { key: 'errors', value: state.errors },
             {
                 key: 'initialValue',
-                value: meta.initialValue,
+                value: state.initialValue,
             },
             {
                 key: 'currentValue',
-                value: value.value,
+                value: state.value,
             },
             {
                 key: 'touched',
-                value: meta.touched,
+                value: state.touched,
             },
             {
                 key: 'dirty',
-                value: meta.dirty,
+                value: state.dirty,
             },
             {
                 key: 'valid',
-                value: meta.valid,
+                value: state.valid,
             },
         ],
     };
@@ -1413,15 +1478,10 @@ function buildFormState(form) {
 /**
  * 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;
+function getValidityColors(valid) {
     return {
-        bgColor: isValid ? COLORS.success : COLORS.error,
-        textColor: isValid ? COLORS.black : COLORS.white,
+        bgColor: valid ? COLORS.success : COLORS.error,
+        textColor: valid ? COLORS.black : COLORS.white,
     };
 }
 
@@ -1430,7 +1490,7 @@ function getTagTheme(fieldOrForm) {
  */
 function useField(path, rules, opts) {
     if (hasCheckedAttr(opts === null || opts === void 0 ? void 0 : opts.type)) {
-        return useCheckboxField(path, rules, opts);
+        return useFieldWithChecked(path, rules, opts);
     }
     return _useField(path, rules, opts);
 }
@@ -1439,12 +1499,30 @@ function _useField(path, rules, opts) {
     const injectedForm = controlled ? injectWithSelf(FormContextKey) : undefined;
     const form = controlForm || injectedForm;
     const name = lazyToRef(path);
-    // 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, {
+    let PENDING_UNMOUNT = false;
+    const validator = computed(() => {
+        const schema = unref(form === null || form === void 0 ? void 0 : form.schema);
+        if (schema) {
+            return undefined;
+        }
+        const rulesValue = unref(rules);
+        if (isYupValidator(rulesValue) ||
+            isTypedSchema(rulesValue) ||
+            isCallable(rulesValue) ||
+            Array.isArray(rulesValue)) {
+            return rulesValue;
+        }
+        return normalizeRules(rulesValue);
+    });
+    const { id, value, initialValue, meta, setState, errors } = useFieldState(name, {
         modelValue,
         form,
+        bails,
+        label,
+        type,
+        validate: validator.value ? validate$1 : undefined,
     });
+    const errorMessage = computed(() => errors.value[0]);
     if (syncVModel) {
         useVModel({ value, prop: modelPropName, handleChange });
     }
@@ -1454,51 +1532,37 @@ function _useField(path, rules, opts) {
     const handleBlur = () => {
         meta.touched = true;
     };
-    const normalizedRules = computed(() => {
-        let rulesValue = unref(rules);
-        const schema = unref(form === null || form === void 0 ? void 0 : form.schema);
-        if (schema && !isYupValidator(schema) && !isTypedSchema(schema)) {
-            rulesValue = extractRuleFromSchema(schema, unref(name)) || rulesValue;
-        }
-        if (isYupValidator(rulesValue) ||
-            isTypedSchema(rulesValue) ||
-            isCallable(rulesValue) ||
-            Array.isArray(rulesValue)) {
-            return rulesValue;
-        }
-        return normalizeRules(rulesValue);
-    });
     async function validateCurrentValue(mode) {
         var _a, _b;
         if (form === null || form === void 0 ? void 0 : form.validateSchema) {
             return (_a = (await form.validateSchema(mode)).results[unref(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
         }
-        return validate(value.value, normalizedRules.value, {
-            name: unref(name),
-            label: unref(label),
-            values: (_b = form === null || form === void 0 ? void 0 : form.values) !== null && _b !== void 0 ? _b : {},
-            bails,
-        });
+        if (validator.value) {
+            return validate(value.value, validator.value, {
+                name: unref(name),
+                label: unref(label),
+                values: (_b = form === null || form === void 0 ? void 0 : form.values) !== null && _b !== void 0 ? _b : {},
+                bails,
+            });
+        }
+        return { valid: true, errors: [] };
     }
     const validateWithStateMutation = withLatest(async () => {
         meta.pending = true;
         meta.validated = true;
         return validateCurrentValue('validated-only');
     }, result => {
-        if (markedForRemoval) {
-            result.valid = true;
-            result.errors = [];
+        if (PENDING_UNMOUNT) {
+            return;
         }
         setState({ errors: result.errors });
         meta.pending = false;
+        meta.valid = result.valid;
         return result;
     });
     const validateValidStateOnly = withLatest(async () => {
         return validateCurrentValue('silent');
     }, result => {
-        if (markedForRemoval) {
-            result.valid = true;
-        }
         meta.valid = result.valid;
         return result;
     });
@@ -1511,7 +1575,7 @@ function _useField(path, rules, opts) {
     // Common input/change event handler
     function handleChange(e, shouldValidate = true) {
         const newValue = normalizeEventValue(e);
-        value.value = newValue;
+        setValue(newValue, false);
         if (!validateOnValueUpdate && shouldValidate) {
             validateWithStateMutation();
         }
@@ -1530,24 +1594,8 @@ function _useField(path, rules, opts) {
     function setTouched(isTouched) {
         meta.touched = isTouched;
     }
-    let unwatchValue;
-    let lastWatchedValue = klona(value.value);
-    function watchValue() {
-        unwatchValue = watch(value, (val, oldVal) => {
-            if (isEqual(val, oldVal) && isEqual(val, lastWatchedValue)) {
-                return;
-            }
-            const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
-            validateFn();
-            lastWatchedValue = klona(val);
-        }, {
-            deep: true,
-        });
-    }
-    watchValue();
     function resetField(state) {
         var _a;
-        unwatchValue === null || unwatchValue === void 0 ? void 0 : unwatchValue();
         const newValue = state && 'value' in state ? state.value : initialValue.value;
         setState({
             value: klona(newValue),
@@ -1558,22 +1606,41 @@ function _useField(path, rules, opts) {
         meta.pending = false;
         meta.validated = false;
         validateValidStateOnly();
-        // need to watch at next tick to avoid triggering the value watcher
-        nextTick(() => {
-            watchValue();
-        });
     }
-    function setValue(newValue) {
+    function setValue(newValue, validate = true) {
         value.value = newValue;
+        if (!validate) {
+            return;
+        }
+        const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+        validateFn();
     }
     function setErrors(errors) {
         setState({ errors: Array.isArray(errors) ? errors : [errors] });
     }
+    const valueProxy = computed({
+        get() {
+            return value.value;
+        },
+        set(newValue) {
+            setValue(newValue, validateOnValueUpdate);
+        },
+    });
+    if ((process.env.NODE_ENV !== 'production')) {
+        watch(valueProxy, (value, oldValue) => {
+            if (!isObject(value)) {
+                return;
+            }
+            if (value === oldValue && isEqual(value, oldValue)) {
+                warn$1('Detected a possible deep change on field `value` ref, for nested changes please either set the entire ref value or use `setValue` or `handleChange`.');
+            }
+        }, { deep: true });
+    }
     const field = {
         id,
         name,
         label,
-        value,
+        value: valueProxy,
         meta,
         errors,
         errorMessage,
@@ -1617,14 +1684,9 @@ function _useField(path, rules, opts) {
         return field;
     }
     // 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;
+        const rulesVal = validator.value;
         // is falsy, a function schema or a yup schema
         if (!rulesVal ||
             isCallable(rulesVal) ||
@@ -1658,6 +1720,37 @@ function _useField(path, rules, opts) {
             meta.validated ? validateWithStateMutation() : validateValidStateOnly();
         }
     });
+    onBeforeUnmount(() => {
+        var _a;
+        PENDING_UNMOUNT = true;
+        const shouldKeepValue = (_a = unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : unref(form.keepValuesOnUnmount);
+        if (shouldKeepValue || !form) {
+            return;
+        }
+        const path = unravel(name);
+        const pathState = form.getPathState(path);
+        const matchesId = Array.isArray(pathState === null || pathState === void 0 ? void 0 : pathState.id) && (pathState === null || pathState === void 0 ? void 0 : pathState.multiple)
+            ? pathState === null || pathState === void 0 ? void 0 : pathState.id.includes(field.id)
+            : (pathState === null || pathState === void 0 ? void 0 : pathState.id) === field.id;
+        if (!matchesId) {
+            return;
+        }
+        if ((pathState === null || pathState === void 0 ? void 0 : pathState.multiple) && Array.isArray(pathState.value)) {
+            const valueIdx = pathState.value.findIndex(i => isEqual(i, unref(field.checkedValue)));
+            if (valueIdx > -1) {
+                const newVal = [...pathState.value];
+                newVal.splice(valueIdx, 1);
+                form.setFieldValue(path, newVal);
+            }
+            if (Array.isArray(pathState.id)) {
+                pathState.id.splice(pathState.id.indexOf(field.id), 1);
+            }
+        }
+        else {
+            form.unsetPathValue(path);
+        }
+        form.removePathState(path);
+    });
     return field;
 }
 /**
@@ -1688,22 +1781,11 @@ function normalizeOptions(opts) {
     const controlled = 'standalone' in opts ? !opts.standalone : opts.controlled;
     return Object.assign(Object.assign(Object.assign({}, defaults()), (opts || {})), { initialValue, controlled: controlled !== null && controlled !== void 0 ? controlled : true, checkedValue });
 }
-/**
- * Extracts the validation rules from a schema
- */
-function extractRuleFromSchema(schema, fieldName) {
-    // no schema at all
-    if (!schema) {
-        return undefined;
-    }
-    // there is a key on the schema object for this field
-    return schema[fieldName];
-}
-function useCheckboxField(name, rules, opts) {
+function useFieldWithChecked(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) {
+    function patchCheckedApi(field) {
         const handleChange = field.handleChange;
         const checked = computed(() => {
             const currentValue = unref(field.value);
@@ -1720,9 +1802,15 @@ function useCheckboxField(name, rules, opts) {
                 }
                 return;
             }
-            let newValue = normalizeEventValue(e);
-            // Single checkbox field without a form to toggle it's value
-            if (!form) {
+            const path = unravel(name);
+            const pathState = form === null || form === void 0 ? void 0 : form.getPathState(path);
+            const value = normalizeEventValue(e);
+            let newValue;
+            if (form && (pathState === null || pathState === void 0 ? void 0 : pathState.multiple) && pathState.type === 'checkbox') {
+                newValue = resolveNextCheckboxValue(getFromPath(form.values, path) || [], value, undefined);
+            }
+            else {
+                // Single checkbox field without a form to toggle it's value
                 newValue = resolveNextCheckboxValue(unref(field.value), unref(checkedValue), unref(uncheckedValue));
             }
             handleChange(newValue, shouldValidate);
@@ -1731,7 +1819,7 @@ function useCheckboxField(name, rules, opts) {
             checkedValue,
             uncheckedValue, handleChange: handleCheckboxChange });
     }
-    return patchCheckboxApi(_useField(name, rules, opts));
+    return patchCheckedApi(_useField(name, rules, opts));
 }
 function useVModel({ prop, value, handleChange }) {
     const vm = getCurrentInstance();
@@ -1876,9 +1964,27 @@ const FieldImpl = defineComponent({
         };
         const fieldProps = computed(() => {
             const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = resolveValidationTriggers(props);
-            const baseOnBlur = [handleBlur, ctx.attrs.onBlur, validateOnBlur ? validateField : undefined].filter(Boolean);
-            const baseOnInput = [(e) => onChangeHandler(e, validateOnInput), ctx.attrs.onInput].filter(Boolean);
-            const baseOnChange = [(e) => onChangeHandler(e, validateOnChange), ctx.attrs.onChange].filter(Boolean);
+            function baseOnBlur(e) {
+                handleBlur(e);
+                if (isCallable(ctx.attrs.onBlur)) {
+                    ctx.attrs.onBlur(e);
+                }
+                if (validateOnBlur) {
+                    validateField();
+                }
+            }
+            function baseOnInput(e) {
+                onChangeHandler(e, validateOnInput);
+                if (isCallable(ctx.attrs.onInput)) {
+                    ctx.attrs.onInput(e);
+                }
+            }
+            function baseOnChange(e) {
+                onChangeHandler(e, validateOnChange);
+                if (isCallable(ctx.attrs.onChange)) {
+                    ctx.attrs.onChange(e);
+                }
+            }
             const attrs = {
                 name: props.name,
                 onBlur: baseOnBlur,
@@ -1957,6 +2063,7 @@ function resolveInitialValue(props, ctx) {
 const Field = FieldImpl;
 
 let FORM_COUNTER = 0;
+const PRIVATE_PATH_STATE_KEYS = ['bails', 'fieldsCount', 'id', 'multiple', 'type', 'validate'];
 function resolveInitialValues(opts) {
     const providedValues = unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
     const schema = unref(opts === null || opts === void 0 ? void 0 : opts.validationSchema);
@@ -1968,12 +2075,8 @@ function resolveInitialValues(opts) {
 function useForm(opts) {
     var _a;
     const formId = FORM_COUNTER++;
-    const controlledModelPaths = new Set();
     // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
-    // TODO: This won't be needed if we centralize all the state inside the `form` for form inputs
-    let RESET_LOCK = false;
-    // A lookup containing fields or field groups
-    const fieldsByPath = ref({});
+    let FIELD_ID_COUNTER = 0;
     // If the form is currently submitting
     const isSubmitting = ref(false);
     // The number of times the user tried to submit the form
@@ -1982,44 +2085,62 @@ function useForm(opts) {
     const fieldArrays = [];
     // a private ref for all form values
     const formValues = reactive(resolveInitialValues(opts));
-    // the source of errors for the form fields
-    const { errorBag, setErrorBag, setFieldErrorBag } = useErrorBag(opts === null || opts === void 0 ? void 0 : opts.initialErrors);
+    const pathStates = ref([]);
+    const extraErrorsBag = ref({});
+    /**
+     * Manually sets an error message on a specific field
+     */
+    function setFieldError(field, message) {
+        const state = findPathState(field);
+        if (!state) {
+            extraErrorsBag.value[field] = normalizeErrorItem(message);
+            return;
+        }
+        state.errors = normalizeErrorItem(message);
+    }
+    /**
+     * Sets errors for the fields specified in the object
+     */
+    function setErrors(paths) {
+        keysOf(paths).forEach(path => {
+            setFieldError(path, paths[path]);
+        });
+    }
+    if (opts === null || opts === void 0 ? void 0 : opts.initialErrors) {
+        setErrors(opts.initialErrors);
+    }
+    const errorBag = computed(() => {
+        const pathErrors = pathStates.value.reduce((acc, state) => {
+            if (state.errors.length) {
+                acc[state.path] = state.errors;
+            }
+            return acc;
+        }, {});
+        return Object.assign(Object.assign({}, extraErrorsBag.value), pathErrors);
+    });
     // Gets the first error of each field
     const errors = computed(() => {
         return keysOf(errorBag.value).reduce((acc, key) => {
-            const bag = errorBag.value[key];
-            if (bag && bag.length) {
-                acc[key] = bag[0];
+            const errors = errorBag.value[key];
+            if (errors === null || errors === void 0 ? void 0 : errors.length) {
+                acc[key] = errors[0];
             }
             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(fieldsByPath.value).reduce((names, path) => {
-            const field = getFirstFieldAtPath(path);
-            if (field) {
-                names[path] = { name: unref(field.name) || '', label: unref(field.label) || '' };
-            }
+        return pathStates.value.reduce((names, state) => {
+            names[state.path] = { name: state.path || '', label: state.label || '' };
             return names;
         }, {});
     });
     const fieldBailsMap = computed(() => {
-        return keysOf(fieldsByPath.value).reduce((map, path) => {
+        return pathStates.value.reduce((map, state) => {
             var _a;
-            const field = getFirstFieldAtPath(path);
-            if (field) {
-                map[path] = (_a = field.bails) !== null && _a !== void 0 ? _a : true;
-            }
+            map[state.path] = (_a = state.bails) !== null && _a !== void 0 ? _a : true;
             return map;
         }, {});
     });
@@ -2028,17 +2149,74 @@ function useForm(opts) {
     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);
+    const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(pathStates, formValues, opts);
     // form meta aggregations
-    const meta = useFormMeta(fieldsByPath, formValues, originalInitialValues, errors);
+    const meta = useFormMeta(pathStates, formValues, originalInitialValues, errors);
     const controlledValues = computed(() => {
-        return [...controlledModelPaths, ...keysOf(fieldsByPath.value)].reduce((acc, path) => {
-            const value = getFromPath(formValues, path);
-            setInPath(acc, path, value);
+        return pathStates.value.reduce((acc, state) => {
+            const value = getFromPath(formValues, state.path);
+            setInPath(acc, state.path, value);
             return acc;
         }, {});
     });
     const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
+    function createPathState(path, config) {
+        var _a, _b;
+        const initialValue = computed(() => getFromPath(initialValues.value, unravel(path)));
+        const pathStateExists = pathStates.value.find(state => state.path === unref(path));
+        if (pathStateExists) {
+            if ((config === null || config === void 0 ? void 0 : config.type) === 'checkbox' || (config === null || config === void 0 ? void 0 : config.type) === 'radio') {
+                pathStateExists.multiple = true;
+            }
+            if (Array.isArray(pathStateExists.id)) {
+                pathStateExists.id.push(FIELD_ID_COUNTER++);
+            }
+            else {
+                pathStateExists.id = [pathStateExists.id, FIELD_ID_COUNTER++];
+            }
+            pathStateExists.fieldsCount++;
+            return pathStateExists;
+        }
+        const currentValue = computed(() => getFromPath(formValues, unravel(path)));
+        const pathValue = unravel(path);
+        const state = reactive({
+            id: FIELD_ID_COUNTER++,
+            path,
+            touched: false,
+            pending: false,
+            valid: true,
+            validated: !!((_a = initialErrors[pathValue]) === null || _a === void 0 ? void 0 : _a.length),
+            initialValue,
+            errors: shallowRef([]),
+            bails: (_b = config === null || config === void 0 ? void 0 : config.bails) !== null && _b !== void 0 ? _b : false,
+            label: config === null || config === void 0 ? void 0 : config.label,
+            type: (config === null || config === void 0 ? void 0 : config.type) || 'default',
+            value: currentValue,
+            multiple: false,
+            fieldsCount: 1,
+            validate: config === null || config === void 0 ? void 0 : config.validate,
+            dirty: computed(() => {
+                return !isEqual(unref(currentValue), unref(initialValue));
+            }),
+        });
+        pathStates.value.push(state);
+        // if it has errors before, validate it.
+        if (errors.value[pathValue] && !initialErrors[pathValue]) {
+            nextTick(() => {
+                validateField(pathValue);
+            });
+        }
+        // Handles when a path changes
+        if (isRef(path)) {
+            watch(path, newPath => {
+                const nextValue = klona(currentValue.value);
+                nextTick(() => {
+                    setInPath(formValues, newPath, nextValue);
+                });
+            });
+        }
+        return state;
+    }
     /**
      * Batches validation runs in 5ms batches
      * Must have two distinct batch queues to make sure they don't override each other settings #3783
@@ -2049,17 +2227,17 @@ function useForm(opts) {
         return (await mode) === 'silent' ? debouncedSilentValidation() : debouncedValidation();
     }, (formResult, [mode]) => {
         // fields by id lookup
-        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
-        // this ensures we have a complete keymap of all the fields
+        // this ensures we have a complete key map of all the fields
         const paths = [
-            ...new Set([...keysOf(formResult.results), ...keysOf(fieldsById), ...currentErrorsPaths]),
+            ...new Set([...keysOf(formResult.results), ...pathStates.value.map(p => p.path), ...currentErrorsPaths]),
         ];
         // aggregates the paths into a single result object while applying the results on the fields
-        return paths.reduce((validation, path) => {
-            const field = fieldsById[path];
+        return paths.reduce((validation, _path) => {
+            const path = _path;
+            const pathState = findPathState(path);
             const messages = (formResult.results[path] || { errors: [] }).errors;
             const fieldResult = {
                 errors: messages,
@@ -2069,24 +2247,37 @@ function useForm(opts) {
             if (!fieldResult.valid) {
                 validation.errors[path] = fieldResult.errors[0];
             }
+            // clean up extra errors if path state exists
+            if (pathState && extraErrorsBag.value[path]) {
+                delete extraErrorsBag.value[path];
+            }
             // field not rendered
-            if (!field) {
+            if (!pathState) {
                 setFieldError(path, messages);
                 return validation;
             }
             // always update the valid flag regardless of the mode
-            applyFieldMutation(field, f => (f.meta.valid = fieldResult.valid));
+            pathState.valid = fieldResult.valid;
             if (mode === 'silent') {
                 return validation;
             }
-            const wasValidated = Array.isArray(field) ? field.some(f => f.meta.validated) : field.meta.validated;
-            if (mode === 'validated-only' && !wasValidated) {
+            if (mode === 'validated-only' && !pathState.validated) {
                 return validation;
             }
-            applyFieldMutation(field, f => f.setState({ errors: fieldResult.errors }));
+            setFieldError(pathState, fieldResult.errors);
             return validation;
         }, { valid: formResult.valid, results: {}, errors: {} });
     });
+    function mutateAllPathState(mutation) {
+        pathStates.value.forEach(mutation);
+    }
+    function findPathState(path) {
+        const pathState = typeof path === 'string' ? pathStates.value.find(state => state.path === path) : path;
+        return pathState;
+    }
+    function unsetPathValue(path) {
+        unsetPath(formValues, path);
+    }
     function makeSubmissionFactory(onlyControlled) {
         return function submitHandlerFactory(fn, onValidationError) {
             return function submissionHandler(e) {
@@ -2095,10 +2286,7 @@ function useForm(opts) {
                     e.stopPropagation();
                 }
                 // Touch all fields
-                setTouched(keysOf(fieldsByPath.value).reduce((acc, field) => {
-                    acc[field] = true;
-                    return acc;
-                }, {}));
+                mutateAllPathState(s => (s.touched = true));
                 isSubmitting.value = true;
                 submitCount.value++;
                 return validate()
@@ -2106,7 +2294,7 @@ function useForm(opts) {
                     const values = klona(formValues);
                     if (result.valid && typeof fn === 'function') {
                         const controlled = klona(controlledValues.value);
-                        let submittedValues = onlyControlled ? controlled : values;
+                        let submittedValues = (onlyControlled ? controlled : values);
                         if (result.values) {
                             submittedValues = result.values;
                         }
@@ -2146,9 +2334,22 @@ function useForm(opts) {
     const handleSubmitImpl = makeSubmissionFactory(false);
     const handleSubmit = handleSubmitImpl;
     handleSubmit.withControlled = makeSubmissionFactory(true);
+    function removePathState(path) {
+        const idx = pathStates.value.findIndex(s => s.path === path);
+        const pathState = pathStates.value[idx];
+        if (idx === -1 || !pathState) {
+            return;
+        }
+        if (pathState.multiple && pathState.fieldsCount) {
+            pathState.fieldsCount--;
+        }
+        if (!pathState.multiple || pathState.fieldsCount <= 0) {
+            pathStates.value.splice(idx, 1);
+            unsetInitialValue(path);
+        }
+    }
     const formCtx = {
         formId,
-        fieldsByPath,
         values: formValues,
         controlledValues,
         errorBag,
@@ -2161,14 +2362,11 @@ function useForm(opts) {
         keepValuesOnUnmount,
         validateSchema: unref(schema) ? validateSchema : undefined,
         validate,
-        register: registerField,
-        unregister: unregisterField,
-        setFieldErrorBag,
+        setFieldError,
         validateField,
         setFieldValue,
         setValues,
         setErrors,
-        setFieldError,
         setFieldTouched,
         setTouched,
         resetForm,
@@ -2178,102 +2376,63 @@ function useForm(opts) {
         unsetInitialValue,
         setFieldInitialValue,
         useFieldModel,
+        createPathState,
+        getPathState: findPathState,
+        unsetPathValue,
+        removePathState,
+        initialValues: initialValues,
+        getAllPathStates: () => pathStates.value,
     };
-    function isFieldGroup(fieldOrGroup) {
-        return Array.isArray(fieldOrGroup);
-    }
-    function applyFieldMutation(fieldOrGroup, mutation) {
-        if (Array.isArray(fieldOrGroup)) {
-            return fieldOrGroup.forEach(mutation);
-        }
-        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
-     */
-    function setFieldError(field, message) {
-        setFieldErrorBag(field, message);
-    }
-    /**
-     * Sets errors for the fields specified in the object
-     */
-    function setErrors(fields) {
-        setErrorBag(fields);
-    }
     /**
      * Sets a single field value
      */
-    function setFieldValue(field, value, { force } = { force: false }) {
-        var _a;
-        const fieldInstance = fieldsByPath.value[field];
+    function setFieldValue(field, value) {
         const clonedValue = klona(value);
-        // field wasn't found, create a virtual field as a placeholder
-        if (!fieldInstance) {
-            setInPath(formValues, field, clonedValue);
-            return;
-        }
-        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;
+        const path = typeof field === 'string' ? field : field.path;
+        const pathState = findPathState(path);
+        if (!pathState) {
+            createPathState(path);
         }
-        let newValue = clonedValue;
-        // Single Checkbox: toggles the field value unless the field is being reset then force it
-        if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force && !RESET_LOCK) {
-            newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field), value, unref(fieldInstance.uncheckedValue)));
-        }
-        setInPath(formValues, field, newValue);
+        setInPath(formValues, path, clonedValue);
     }
     /**
      * Sets multiple fields values
      */
     function setValues(fields) {
-        // clean up old values
-        keysOf(formValues).forEach(key => {
-            delete formValues[key];
-        });
-        // set up new values
-        keysOf(fields).forEach(path => {
-            setFieldValue(path, fields[path]);
-        });
+        merge(formValues, fields);
         // regenerate the arrays when the form values change
         fieldArrays.forEach(f => f && f.reset());
     }
     function createModel(path) {
-        const { value } = _useFieldValue(path, undefined, formCtx);
-        watch(value, () => {
-            if (!fieldExists(unref(path))) {
-                validate({ mode: 'validated-only' });
-            }
-        }, {
-            deep: true,
+        const pathState = findPathState(unref(path)) || createPathState(path);
+        return computed({
+            get() {
+                return pathState.value;
+            },
+            set(value) {
+                const pathValue = unref(path);
+                setFieldValue(pathValue, value);
+                pathState.validated = true;
+                pathState.pending = true;
+                validateField(pathValue).then(() => {
+                    pathState.pending = false;
+                });
+            },
         });
-        controlledModelPaths.add(unref(path));
-        return value;
     }
-    function useFieldModel(path) {
-        if (!Array.isArray(path)) {
-            return createModel(path);
+    function useFieldModel(pathOrPaths) {
+        if (!Array.isArray(pathOrPaths)) {
+            return createModel(pathOrPaths);
         }
-        return path.map(createModel);
+        return pathOrPaths.map(createModel);
     }
     /**
      * Sets the touched meta state on a field
      */
     function setFieldTouched(field, isTouched) {
-        const fieldInstance = fieldsByPath.value[field];
-        if (fieldInstance) {
-            applyFieldMutation(fieldInstance, f => f.setTouched(isTouched));
+        const pathState = findPathState(field);
+        if (pathState) {
+            pathState.touched = isTouched;
         }
     }
     /**
@@ -2285,172 +2444,53 @@ function useForm(opts) {
         });
     }
     function resetField(field, state) {
-        const fieldInstance = fieldsByPath.value[field];
-        if (fieldInstance) {
-            applyFieldMutation(fieldInstance, f => f.resetField(state));
-        }
+        var _a;
+        const newValue = state && 'value' in state ? state.value : getFromPath(initialValues.value, field);
+        setFieldInitialValue(field, klona(newValue));
+        setFieldValue(field, newValue);
+        setFieldTouched(field, (_a = state === null || state === void 0 ? void 0 : state.touched) !== null && _a !== void 0 ? _a : false);
+        setFieldError(field, (state === null || state === void 0 ? void 0 : state.errors) || []);
     }
     /**
      * Resets all fields
      */
-    function resetForm(state) {
-        RESET_LOCK = true;
-        // Reset all field states first
-        mutateAllFields(f => f.resetField());
-        // reset values
-        const newValues = (state === null || state === void 0 ? void 0 : state.values) ? state.values : originalInitialValues.value;
+    function resetForm(resetState) {
+        const newValues = (resetState === null || resetState === void 0 ? void 0 : resetState.values) ? resetState.values : originalInitialValues.value;
         setInitialValues(newValues);
         setValues(newValues);
-        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;
+        mutateAllPathState(state => {
+            var _a;
+            state.validated = false;
+            state.touched = ((_a = resetState === null || resetState === void 0 ? void 0 : resetState.touched) === null || _a === void 0 ? void 0 : _a[state.path]) || false;
+            setFieldValue(state.path, getFromPath(newValues, state.path));
+            setFieldError(state.path, undefined);
         });
-    }
-    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) {
-                delete fieldsByPath.value[fieldPath];
-            }
-        }
-    }
-    function registerField(field) {
-        const fieldPath = unref(field.name);
-        insertFieldAtPath(field, fieldPath);
-        if (isRef(field.name)) {
-            // ensures when a field's name was already taken that it preserves its same value
-            // necessary for fields generated by loops
-            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]) {
-                    // clear up both paths errors
-                    setFieldError(oldPath, undefined);
-                    validateField(newPath);
-                }
-                // clean up the old path if no other field is sharing that name
-                // #3325
-                await nextTick();
-                if (!fieldExists(oldPath)) {
-                    unsetPath(formValues, oldPath);
-                }
-            });
-        }
-        // 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 initialErrorMessage = unref(field.errorMessage);
-        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[fieldPath];
-    }
-    function unregisterField(field) {
-        const fieldName = unref(field.name);
-        const fieldInstance = fieldsByPath.value[fieldName];
-        const isGroup = !!fieldInstance && isFieldGroup(fieldInstance);
-        removeFieldFromPath(field, fieldName);
-        // 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
+        setErrors((resetState === null || resetState === void 0 ? void 0 : resetState.errors) || {});
+        submitCount.value = (resetState === null || resetState === void 0 ? void 0 : resetState.submitCount) || 0;
         nextTick(() => {
-            var _a;
-            const shouldKeepValue = (_a = unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : unref(keepValuesOnUnmount);
-            const currentGroupValue = getFromPath(formValues, fieldName);
-            // The boolean here is we check if the field still belongs to the same control group with that name
-            // if another group claimed the name, we should avoid handling it since it is no longer the same group
-            // this happens with `v-for` over some checkboxes and field arrays.
-            // also if the group no longer exist we can assume this group was the last one that controlled it
-            const isSameGroup = isGroup && (fieldInstance === fieldsByPath.value[fieldName] || !fieldsByPath.value[fieldName]);
-            // group field that still has a dangling value, the field may exist or not after it was removed.
-            // This used to be handled in the useField composable but the form has better context on when it should/not happen.
-            // if it does belong to it that means the group still exists
-            // #3844
-            if (isSameGroup && !shouldKeepValue) {
-                if (Array.isArray(currentGroupValue)) {
-                    const valueIdx = currentGroupValue.findIndex(i => isEqual(i, unref(field.checkedValue)));
-                    if (valueIdx > -1) {
-                        const newVal = [...currentGroupValue];
-                        newVal.splice(valueIdx, 1);
-                        setFieldValue(fieldName, newVal, { force: true });
-                    }
-                }
-                else if (currentGroupValue === unref(field.checkedValue)) {
-                    // Remove field if it is a group but does not have an array value, like for radio inputs #3963
-                    unsetPath(formValues, fieldName);
-                }
-            }
-            // Field was removed entirely, we should unset its path
-            // #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
-                if (shouldKeepValue) {
-                    return;
-                }
-                // Don't apply emptyContainer check unless the current group value is an array
-                if (isGroup && Array.isArray(currentGroupValue) && !isEmptyContainer(currentGroupValue)) {
-                    return;
-                }
-                unsetPath(formValues, fieldName);
-            }
+            validate({ mode: 'silent' });
         });
     }
     async function validate(opts) {
         const mode = (opts === null || opts === void 0 ? void 0 : opts.mode) || 'force';
         if (mode === 'force') {
-            mutateAllFields(f => (f.meta.validated = true));
+            mutateAllPathState(f => (f.validated = true));
         }
         if (formCtx.validateSchema) {
             return formCtx.validateSchema(mode);
         }
         // No schema, each field is responsible to validate itself
-        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: [] });
+        const validations = await Promise.all(pathStates.value.map(state => {
+            if (!state.validate) {
+                return Promise.resolve({
+                    key: state.path,
+                    valid: true,
+                    errors: [],
+                });
             }
-            return fieldInstance.validate(opts).then((result) => {
+            return state.validate(opts).then((result) => {
                 return {
-                    key: unref(fieldInstance.name),
+                    key: state.path,
                     valid: result.valid,
                     errors: result.errors,
                 };
@@ -2473,16 +2513,22 @@ function useForm(opts) {
             errors,
         };
     }
-    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 });
+    async function validateField(path) {
+        const state = findPathState(path);
+        if (state) {
+            state.validated = true;
+        }
+        if (schema) {
+            const { results } = await validateSchema('validated-only');
+            return results[path] || { errors: [], valid: true };
+        }
+        if (state === null || state === void 0 ? void 0 : state.validate) {
+            return state.validate();
         }
-        if (Array.isArray(fieldInstance)) {
-            return fieldInstance.map(f => f.validate())[0];
+        if (!state) {
+            warn$1(`field with path ${path} was not found`);
         }
-        return fieldInstance.validate();
+        return Promise.resolve({ errors: [], valid: true });
     }
     function unsetInitialValue(path) {
         unsetPath(initialValues.value, path);
@@ -2491,8 +2537,8 @@ function useForm(opts) {
      * Sneaky function to set initial field values
      */
     function stageInitialValue(path, value, updateOriginal = false) {
-        setInPath(formValues, path, value);
         setFieldInitialValue(path, value);
+        setInPath(formValues, path, value);
         if (updateOriginal && !(opts === null || opts === void 0 ? void 0 : opts.initialValues)) {
             setInPath(originalInitialValues.value, path, klona(value));
         }
@@ -2551,12 +2597,95 @@ function useForm(opts) {
             deep: true,
         });
     }
-    return Object.assign(Object.assign({}, formCtx), { handleReset: () => resetForm(), submitForm });
+    function defineComponentBinds(path, config) {
+        const pathState = findPathState(unravel(path)) || createPathState(path);
+        const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
+        function onBlur() {
+            var _a;
+            pathState.touched = true;
+            const validateOnBlur = (_a = evalConfig().validateOnBlur) !== null && _a !== void 0 ? _a : getConfig().validateOnBlur;
+            if (validateOnBlur) {
+                validateField(pathState.path);
+            }
+        }
+        function onUpdateModelValue(value) {
+            var _a;
+            setFieldValue(pathState.path, value);
+            const validateOnModelUpdate = (_a = evalConfig().validateOnModelUpdate) !== null && _a !== void 0 ? _a : getConfig().validateOnModelUpdate;
+            if (validateOnModelUpdate) {
+                validateField(pathState.path);
+            }
+        }
+        const props = computed(() => {
+            const base = {
+                modelValue: pathState.value,
+                'onUpdate:modelValue': onUpdateModelValue,
+                onBlur,
+            };
+            if (isCallable(config)) {
+                return Object.assign(Object.assign({}, base), (config(pathState).props || {}));
+            }
+            if (config === null || config === void 0 ? void 0 : config.mapProps) {
+                return Object.assign(Object.assign({}, base), config.mapProps(omit(pathState, PRIVATE_PATH_STATE_KEYS)));
+            }
+            return base;
+        });
+        return props;
+    }
+    function defineInputBinds(path, config) {
+        const pathState = (findPathState(unravel(path)) || createPathState(path));
+        const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
+        function onBlur() {
+            var _a;
+            pathState.touched = true;
+            const validateOnBlur = (_a = evalConfig().validateOnBlur) !== null && _a !== void 0 ? _a : getConfig().validateOnBlur;
+            if (validateOnBlur) {
+                validateField(pathState.path);
+            }
+        }
+        function onInput(e) {
+            var _a;
+            const value = normalizeEventValue(e);
+            setFieldValue(pathState.path, value);
+            const validateOnInput = (_a = evalConfig().validateOnInput) !== null && _a !== void 0 ? _a : getConfig().validateOnInput;
+            if (validateOnInput) {
+                validateField(pathState.path);
+            }
+        }
+        function onChange(e) {
+            var _a;
+            const value = normalizeEventValue(e);
+            setFieldValue(pathState.path, value);
+            const validateOnChange = (_a = evalConfig().validateOnChange) !== null && _a !== void 0 ? _a : getConfig().validateOnChange;
+            if (validateOnChange) {
+                validateField(pathState.path);
+            }
+        }
+        const props = computed(() => {
+            const base = {
+                value: pathState.value,
+                onChange,
+                onInput,
+                onBlur,
+            };
+            if (isCallable(config)) {
+                return Object.assign(Object.assign({}, base), (config(omit(pathState, PRIVATE_PATH_STATE_KEYS)).attrs || {}));
+            }
+            if (config === null || config === void 0 ? void 0 : config.mapAttrs) {
+                return Object.assign(Object.assign({}, base), config.mapAttrs(omit(pathState, PRIVATE_PATH_STATE_KEYS)));
+            }
+            return base;
+        });
+        return props;
+    }
+    return Object.assign(Object.assign({}, formCtx), { handleReset: () => resetForm(), submitForm,
+        defineComponentBinds,
+        defineInputBinds });
 }
 /**
  * Manages form meta aggregation
  */
-function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
+function useFormMeta(pathsState, currentValues, initialValues, errors) {
     const MERGE_STRATEGIES = {
         touched: 'some',
         pending: 'some',
@@ -2566,10 +2695,10 @@ function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
         return !isEqual(currentValues, unref(initialValues));
     });
     function calculateFlags() {
-        const fields = Object.values(fieldsByPath.value).flat(1).filter(Boolean);
+        const states = pathsState.value;
         return keysOf(MERGE_STRATEGIES).reduce((acc, flag) => {
             const mergeMethod = MERGE_STRATEGIES[flag];
-            acc[flag] = fields[mergeMethod](field => field.meta[flag]);
+            acc[flag] = states[mergeMethod](s => s[flag]);
             return acc;
         }, {});
     }
@@ -2587,7 +2716,7 @@ function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
 /**
  * Manages the initial values prop
  */
-function useFormInitialValues(fields, formValues, opts) {
+function useFormInitialValues(pathsState, formValues, opts) {
     const values = resolveInitialValues(opts);
     const providedValues = opts === null || opts === void 0 ? void 0 : opts.initialValues;
     // these are the mutable initial values as the fields are mounted/unmounted
@@ -2608,14 +2737,13 @@ function useFormInitialValues(fields, formValues, opts) {
         // 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
-        keysOf(fields.value).forEach(fieldPath => {
-            const field = fields.value[fieldPath];
-            const wasTouched = Array.isArray(field) ? field.some(f => f.meta.touched) : field === null || field === void 0 ? void 0 : field.meta.touched;
-            if (!field || wasTouched) {
+        pathsState.value.forEach(state => {
+            const wasTouched = state.touched;
+            if (wasTouched) {
                 return;
             }
-            const newValue = getFromPath(initialValues.value, fieldPath);
-            setInPath(formValues, fieldPath, klona(newValue));
+            const newValue = getFromPath(initialValues.value, state.path);
+            setInPath(formValues, state.path, klona(newValue));
         });
     }
     if (isRef(providedValues)) {
@@ -2631,42 +2759,6 @@ function useFormInitialValues(fields, formValues, opts) {
         setInitialValues,
     };
 }
-function useErrorBag(initialErrors) {
-    const errorBag = ref({});
-    function normalizeErrorItem(message) {
-        return Array.isArray(message) ? message : message ? [message] : [];
-    }
-    /**
-     * Manually sets an error message on a specific field
-     */
-    function setFieldErrorBag(field, message) {
-        if (!message) {
-            delete errorBag.value[field];
-            return;
-        }
-        errorBag.value[field] = normalizeErrorItem(message);
-    }
-    /**
-     * Sets errors for the fields specified in the object
-     */
-    function setErrorBag(fields) {
-        errorBag.value = keysOf(fields).reduce((acc, key) => {
-            const message = fields[key];
-            if (message) {
-                acc[key] = normalizeErrorItem(message);
-            }
-            return acc;
-        }, {});
-    }
-    if (initialErrors) {
-        setErrorBag(initialErrors);
-    }
-    return {
-        errorBag,
-        setErrorBag,
-        setFieldErrorBag,
-    };
-}
 
 const FormImpl = defineComponent({
     name: 'Form',
@@ -2847,7 +2939,10 @@ function useFieldArray(arrayPath) {
     }
     function initFields() {
         const currentValues = getCurrentValues();
-        fields.value = currentValues.map(createEntry);
+        if (!Array.isArray(currentValues)) {
+            return;
+        }
+        fields.value = currentValues.map((v, idx) => createEntry(v, idx, fields.value));
         updateEntryFlags();
     }
     initFields();
@@ -2859,7 +2954,13 @@ function useFieldArray(arrayPath) {
             entry.isLast = i === fieldsLength - 1;
         }
     }
-    function createEntry(value) {
+    function createEntry(value, idx, currentFields) {
+        // Skips the work by returning the current entry if it already exists
+        // This should make the `key` prop stable and doesn't cause more re-renders than needed
+        // The value is computed and should update anyways
+        if (currentFields && !isNullOrUndefined(idx) && currentFields[idx]) {
+            return currentFields[idx];
+        }
         const key = entryCounter++;
         const entry = {
             key,
@@ -2896,8 +2997,9 @@ function useFieldArray(arrayPath) {
         }
         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);
+        const fieldPath = pathName + `[${idx}]`;
+        form.unsetInitialValue(fieldPath);
+        setInPath(form.values, pathName, newValue);
         fields.value.splice(idx, 1);
         afterMutation();
     }
@@ -2910,8 +3012,8 @@ function useFieldArray(arrayPath) {
         }
         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);
+        form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+        setInPath(form.values, pathName, newValue);
         fields.value.push(createEntry(value));
         afterMutation();
     }
@@ -2930,7 +3032,7 @@ function useFieldArray(arrayPath) {
         const tempEntry = newFields[indexA];
         newFields[indexA] = newFields[indexB];
         newFields[indexB] = tempEntry;
-        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        setInPath(form.values, pathName, newValue);
         fields.value = newFields;
         updateEntryFlags();
     }
@@ -2944,13 +3046,14 @@ function useFieldArray(arrayPath) {
         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);
+        setInPath(form.values, pathName, newValue);
         fields.value = newFields;
         afterMutation();
     }
     function replace(arr) {
         const pathName = unref(arrayPath);
-        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, arr);
+        form.stageInitialValue(pathName, arr);
+        setInPath(form.values, pathName, arr);
         initFields();
         afterMutation();
     }
@@ -2960,7 +3063,7 @@ function useFieldArray(arrayPath) {
         if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
             return;
         }
-        form === null || form === void 0 ? void 0 : form.setFieldValue(`${pathName}[${idx}]`, value);
+        setInPath(form.values, `${pathName}[${idx}]`, value);
         form === null || form === void 0 ? void 0 : form.validate({ mode: 'validated-only' });
     }
     function prepend(value) {
@@ -2971,8 +3074,8 @@ function useFieldArray(arrayPath) {
             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);
+        form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+        setInPath(form.values, pathName, newValue);
         fields.value.unshift(createEntry(value));
         afterMutation();
     }
@@ -2990,7 +3093,7 @@ function useFieldArray(arrayPath) {
         const movedValue = newValue[oldIdx];
         newValue.splice(oldIdx, 1);
         newValue.splice(newIdx, 0, movedValue);
-        form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+        setInPath(form.values, pathName, newValue);
         fields.value = newFields;
         afterMutation();
     }
@@ -3129,17 +3232,13 @@ function useResetForm() {
  * If a field is dirty or not
  */
 function useIsFieldDirty(path) {
-    const form = injectWithSelf(FormContextKey);
-    let field = path ? undefined : inject(FieldContextKey);
+    const fieldOrPath = resolveFieldOrPathState(path);
     return computed(() => {
-        if (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`);
+        var _a, _b;
+        if (!fieldOrPath) {
             return false;
         }
-        return field.meta.dirty;
+        return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.dirty : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.dirty)) !== null && _b !== void 0 ? _b : false;
     });
 }
 
@@ -3147,17 +3246,13 @@ function useIsFieldDirty(path) {
  * If a field is touched or not
  */
 function useIsFieldTouched(path) {
-    const form = injectWithSelf(FormContextKey);
-    let field = path ? undefined : inject(FieldContextKey);
+    const fieldOrPath = resolveFieldOrPathState(path);
     return computed(() => {
-        if (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`);
+        var _a, _b;
+        if (!fieldOrPath) {
             return false;
         }
-        return field.meta.touched;
+        return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.touched : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.touched)) !== null && _b !== void 0 ? _b : false;
     });
 }
 
@@ -3165,17 +3260,13 @@ function useIsFieldTouched(path) {
  * If a field is validated and is valid
  */
 function useIsFieldValid(path) {
-    const form = injectWithSelf(FormContextKey);
-    let field = path ? undefined : inject(FieldContextKey);
+    const fieldOrPath = resolveFieldOrPathState(path);
     return computed(() => {
-        if (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`);
+        var _a, _b;
+        if (!fieldOrPath) {
             return false;
         }
-        return field.meta.valid;
+        return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.valid : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.valid)) !== null && _b !== void 0 ? _b : false;
     });
 }
 
@@ -3198,19 +3289,19 @@ function useIsSubmitting() {
  */
 function useValidateField(path) {
     const form = injectWithSelf(FormContextKey);
-    let field = path ? undefined : inject(FieldContextKey);
+    const field = path ? undefined : inject(FieldContextKey);
     return function validateField() {
-        if (path) {
-            field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[unref(path)]);
+        if (field) {
+            return field.validate();
         }
-        if (!field) {
-            warn(`field with name ${unref(path)} was not found`);
-            return Promise.resolve({
-                errors: [],
-                valid: true,
-            });
+        if (form && path) {
+            return form === null || form === void 0 ? void 0 : form.validateField(unref(path));
         }
-        return field.validate();
+        warn(`field with name ${unref(path)} was not found`);
+        return Promise.resolve({
+            errors: [],
+            valid: true,
+        });
     };
 }