vee-validate 4.4.10 → 4.5.0

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.4.10
+  * vee-validate v4.5.0
   * (c) 2021 Abdelrahman Awad
   * @license MIT
   */
@@ -50,8 +50,6 @@
   }
 
   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');
 
@@ -151,17 +149,14 @@
       }
       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) => {
@@ -265,20 +260,6 @@
       }
       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];
@@ -287,6 +268,24 @@
           return newVal;
       }
       return currentValue === checkedValue ? uncheckedValue : checkedValue;
+  }
+  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
@@ -777,21 +776,162 @@
   };
 
   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 = vue.ref(vue.unref(modelValue));
+      function resolveInitialValue() {
+          if (!form) {
+              return vue.unref(modelRef);
+          }
+          return getFromPath(form.meta.value.initialValues, vue.unref(path), vue.unref(modelRef));
+      }
+      function setInitialValue(value) {
+          if (!form) {
+              modelRef.value = value;
+              return;
+          }
+          form.setFieldInitialValue(vue.unref(path), value);
+      }
+      const initialValue = vue.computed(resolveInitialValue);
+      // if no form is associated, use a regular ref.
+      if (!form) {
+          const value = vue.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 ? vue.unref(modelValue) : getFromPath(form.values, vue.unref(path), vue.unref(initialValue));
+      form.stageInitialValue(vue.unref(path), currentValue);
+      // otherwise use a computed setter that triggers the `setFieldValue`
+      const value = vue.computed({
+          get() {
+              return getFromPath(form.values, vue.unref(path));
+          },
+          set(newVal) {
+              form.setFieldValue(vue.unref(path), newVal);
+          },
+      });
+      return {
+          value,
+          initialValue,
+          setInitialValue,
+      };
+  }
+  /**
+   * Creates meta flags state and some associated effects with them
+   */
+  function _useFieldMeta(currentValue, initialValue, errors) {
+      const meta = vue.reactive({
+          touched: false,
+          pending: false,
+          valid: true,
+          validated: !!vue.unref(errors).length,
+          initialValue: vue.computed(() => vue.unref(initialValue)),
+          dirty: vue.computed(() => {
+              return !es6(vue.unref(currentValue), vue.unref(initialValue));
+          }),
+      });
+      vue.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 = vue.ref([]);
+          return {
+              errors,
+              errorMessage: vue.computed(() => errors.value[0]),
+              setErrors: (messages) => {
+                  errors.value = normalizeErrors(messages);
+              },
+          };
+      }
+      const errors = vue.computed(() => form.errorBag.value[vue.unref(path)] || []);
+      return {
+          errors,
+          errorMessage: vue.computed(() => errors.value[0]),
+          setErrors: (messages) => {
+              form.setFieldErrorBag(vue.unref(path), normalizeErrors(messages));
+          },
+      };
+  }
+
   /**
    * 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(vue.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(vue.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 = vue.computed(() => {
           let rulesValue = vue.unref(rules);
           const schema = vue.unref(form === null || form === void 0 ? void 0 : form.schema);
@@ -818,27 +958,30 @@
           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, vue.unref(checkedValue), vue.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
@@ -863,17 +1006,31 @@
       }
       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
           vue.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,
@@ -883,17 +1040,16 @@
           type,
           checkedValue,
           uncheckedValue,
-          checked,
           bails,
           resetField,
           handleReset: () => resetField(),
-          validate: validateWithStateMutation,
+          validate: validate$1,
           handleChange,
           handleBlur,
-          handleInput,
-          setValidationState,
+          setState,
           setTouched,
           setErrors,
+          setValue,
       };
       vue.provide(FieldContextKey, field);
       if (vue.isRef(rules) && typeof vue.unref(rules) !== 'function') {
@@ -901,7 +1057,7 @@
               if (es6(value, oldValue)) {
                   return;
               }
-              return validateWithStateMutation();
+              meta.validated ? validateWithStateMutation() : validateValidStateOnly();
           }, {
               deep: true,
           });
@@ -944,7 +1100,7 @@
           }
           const shouldValidate = !es6(deps, oldDeps);
           if (shouldValidate) {
-              meta.dirty ? validateWithStateMutation() : validateValidStateOnly();
+              meta.validated ? validateWithStateMutation() : validateValidStateOnly();
           }
       });
       return field;
@@ -969,104 +1125,6 @@
       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 = vue.ref(vue.unref(initValue));
-      const initialValue = vue.computed(() => {
-          return getFromPath(vue.unref(formInitialValues), vue.unref(name), vue.unref(initialValueRef));
-      });
-      const value = useFieldValue$1(initialValue, name, form);
-      const meta = useFieldMeta(initialValue, value, errors);
-      const checked = hasCheckedAttr(type)
-          ? vue.computed(() => {
-              if (Array.isArray(value.value)) {
-                  return value.value.includes(vue.unref(checkedValue));
-              }
-              return vue.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 = vue.unref(name);
-          const newValue = state && 'value' in state
-              ? state.value
-              : getFromPath(vue.unref(formInitialValues), fieldPath, vue.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 = vue.reactive({
-          touched: false,
-          pending: false,
-          valid: true,
-          validated: !!vue.unref(errors).length,
-          initialValue: vue.computed(() => vue.unref(initialValue)),
-          dirty: vue.computed(() => {
-              return !es6(vue.unref(currentValue), vue.unref(initialValue));
-          }),
-      });
-      vue.watch(errors, value => {
-          meta.valid = !value.length;
-      }, {
-          immediate: true,
-          flush: 'sync',
-      });
-      return meta;
-  }
   /**
    * Extracts the validation rules from a schema
    */
@@ -1078,49 +1136,40 @@
       // 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 vue.ref(vue.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, vue.unref(path), vue.unref(initialValue));
-      form.stageInitialValue(vue.unref(path), currentValue === undefined ? vue.unref(initialValue) : currentValue);
-      // otherwise use a computed setter that triggers the `setFieldValue`
-      const value = vue.computed({
-          get() {
-              return getFromPath(form.values, vue.unref(path));
-          },
-          set(newVal) {
-              form.setFieldValue(vue.unref(path), newVal);
-          },
-      });
-      return value;
-  }
-  function useFieldErrors(path, form) {
-      if (!form) {
-          const errors = vue.ref([]);
-          return {
-              errors: vue.computed(() => errors.value),
-              errorMessage: vue.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 = vue.computed(() => {
+              const currentValue = vue.unref(field.value);
+              const checkedVal = vue.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(vue.unref(field.value), vue.unref(checkedValue), vue.unref(uncheckedValue));
+              }
+              handleChange(newValue, shouldValidate);
+          }
+          vue.onBeforeUnmount(() => {
+              // toggles the checkbox value if it was checked
+              if (checked.value) {
+                  handleCheckboxChange(vue.unref(checkedValue), false);
+              }
+          });
+          return Object.assign(Object.assign({}, field), { checked,
+              checkedValue,
+              uncheckedValue, handleChange: handleCheckboxChange });
       }
-      const errors = vue.computed(() => form.errorBag.value[vue.unref(path)] || []);
-      return {
-          errors,
-          errorMessage: vue.computed(() => errors.value[0]),
-          setErrors: (messages) => {
-              form.setFieldErrorBag(vue.unref(path), messages);
-          },
-      };
+      return patchCheckboxApi(_useField(name, rules, opts));
   }
 
   const Field = vue.defineComponent({
@@ -1194,7 +1243,7 @@
           const label = vue.toRef(props, 'label');
           const uncheckedValue = vue.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,
@@ -1213,8 +1262,13 @@
                   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);
               }
@@ -1273,6 +1327,13 @@
                   setErrors,
               };
           }
+          ctx.expose({
+              setErrors,
+              setTouched,
+              reset: resetField,
+              validate: validateField,
+              handleChange,
+          });
           return () => {
               const tag = vue.resolveDynamicComponent(resolveTag(props, ctx));
               const children = normalizeChildren(tag, ctx, slotProps);
@@ -1315,40 +1376,19 @@
       return isPropPresent(props, 'modelValue') ? props.modelValue : undefined;
   }
 
+  let FORM_COUNTER = 0;
   function useForm(opts) {
-      // A flat array containing field references
-      const fields = vue.ref([]);
+      const formId = FORM_COUNTER++;
+      // A lookup containing fields or field groups
+      const fieldsByPath = vue.ref({});
       // If the form is currently submitting
       const isSubmitting = vue.ref(false);
-      // a field map object useful for faster access of fields
-      const fieldsById = vue.computed(() => {
-          return fields.value.reduce((acc, field) => {
-              const fieldPath = vue.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 = vue.ref(0);
+      // dictionary for field arrays to receive various signals like reset
+      const fieldArraysLookup = {};
       // a private ref for all form values
       const formValues = vue.reactive(klona(vue.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
@@ -1361,12 +1401,19 @@
               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 = vue.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] = vue.unref(field.label || field.name) || '';
               }
@@ -1374,9 +1421,9 @@
           }, {});
       });
       const fieldBailsMap = vue.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;
               }
@@ -1387,18 +1434,21 @@
       // 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: vue.unref(schema) ? validateSchema : undefined,
           validate,
           register: registerField,
@@ -1414,8 +1464,18 @@
           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
        */
@@ -1433,7 +1493,7 @@
        */
       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) {
@@ -1441,28 +1501,17 @@
               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, vue.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
@@ -1476,16 +1525,17 @@
           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
@@ -1505,108 +1555,123 @@
               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 = vue.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 = vue.unref(field.name);
+          insertFieldAtPath(field, fieldPath);
           if (vue.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
-              vue.watch(field.name, (newPath, oldPath) => {
-                  setFieldValue(newPath, valuesByFid[field.fid]);
-                  const isSharingName = fields.value.find(f => vue.unref(f.name) === oldPath);
+              vue.watch(field.name, async (newPath, oldPath) => {
+                  // cache the value
+                  await vue.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 vue.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 = vue.unref(field.name);
           const initialErrorMessage = vue.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 = vue.unref(field.name);
+          removeFieldFromPath(field, fieldName);
           vue.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 = vue.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 => vue.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, vue.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: vue.unref(f.name),
+                      key: vue.unref(fieldInstance.name),
                       valid: result.valid,
                       errors: result.errors,
                   };
@@ -1629,8 +1694,8 @@
               errors,
           };
       }
-      function validateField(field) {
-          const fieldInstance = fieldsById.value[field];
+      async function validateField(field) {
+          const fieldInstance = fieldsByPath.value[field];
           if (!fieldInstance) {
               vue.warn(`field with name ${field} was not found`);
               return Promise.resolve({ errors: [], valid: true });
@@ -1640,14 +1705,14 @@
           }
           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;
               }, {}));
@@ -1667,9 +1732,18 @@
                           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
@@ -1680,6 +1754,9 @@
       function setFieldInitialValue(path, value) {
           setInPath(initialValues.value, path, klona(value));
       }
+      function unsetInitialValue(path) {
+          unsetPath(initialValues.value, path);
+      }
       /**
        * Sneaky function to set initial field values
        */
@@ -1687,7 +1764,7 @@
           setInPath(formValues, path, value);
           setFieldInitialValue(path, value);
       }
-      async function validateSchema(mode) {
+      async function _validateSchema() {
           const schemaValue = vue.unref(schema);
           if (!schemaValue) {
               return { valid: true, results: {}, errors: {} };
@@ -1698,8 +1775,16 @@
                   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
@@ -1733,7 +1818,7 @@
               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: {} });
       }
@@ -1769,7 +1854,6 @@
       }
       // Provide injections
       vue.provide(FormContextKey, formCtx);
-      vue.provide(FormErrorsKey, errors);
       return {
           errors,
           meta,
@@ -1793,7 +1877,7 @@
   /**
    * Manages form meta aggregation
    */
-  function useFormMeta(fields, currentValues, initialValues, errors) {
+  function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
       const MERGE_STRATEGIES = {
           touched: 'some',
           pending: 'some',
@@ -1803,9 +1887,10 @@
           return !es6(currentValues, vue.unref(initialValues));
       });
       const flags = vue.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;
           }, {});
       });
@@ -1817,13 +1902,17 @@
    * Manages the initial values prop
    */
   function useFormInitialValues(fields, formValues, providedValues) {
-      const initialValues = vue.ref(vue.unref(providedValues) || {});
-      // acts as a read only proxy of the initial values object
-      const computedInitials = vue.computed(() => {
-          return initialValues.value;
-      });
+      // these are the mutable initial values as the fields are mounted/unmounted
+      const initialValues = vue.ref(klona(vue.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 = vue.ref(klona(vue.unref(providedValues)) || {});
       function setInitialValues(values, updateFields = false) {
           initialValues.value = klona(values);
+          originalInitialValues.value = klona(values);
           if (!updateFields) {
               return;
           }
@@ -1831,15 +1920,14 @@
           // 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 (vue.isRef(providedValues)) {
@@ -1849,10 +1937,9 @@
               deep: true,
           });
       }
-      vue.provide(FormInitialValuesKey, computedInitials);
       return {
-          readonlyInitialValues: computedInitials,
           initialValues,
+          originalInitialValues,
           setInitialValues,
       };
   }
@@ -1925,6 +2012,10 @@
               type: Function,
               default: undefined,
           },
+          onInvalidSubmit: {
+              type: Function,
+              default: undefined,
+          },
       },
       setup(props, ctx) {
           const initialValues = vue.toRef(props, 'initialValues');
@@ -1936,7 +2027,7 @@
               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
@@ -1949,7 +2040,7 @@
           }
           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 {
@@ -2003,6 +2094,203 @@
       },
   });
 
+  let FIELD_ARRAY_COUNTER = 0;
+  function useFieldArray(arrayPath) {
+      const id = FIELD_ARRAY_COUNTER++;
+      const form = injectWithSelf(FormContextKey, undefined);
+      const fields = vue.ref([]);
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      const noOp = () => { };
+      const noOpApi = {
+          fields: vue.readonly(fields),
+          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 (!vue.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, vue.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: vue.computed(() => {
+                  const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []);
+                  const idx = fields.value.findIndex(e => e.key === key);
+                  return idx === -1 ? value : currentValues[idx];
+              }),
+              isFirst: false,
+              isLast: false,
+          };
+          return entry;
+      }
+      function remove(idx) {
+          const pathName = vue.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 = vue.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 = vue.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 = vue.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 = vue.unref(arrayPath);
+          form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, arr);
+          initFields();
+      }
+      function update(idx, value) {
+          const pathName = vue.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 = vue.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,
+      };
+      vue.onBeforeUnmount(() => {
+          delete form.fieldArraysLookup[id];
+      });
+      return {
+          fields: vue.readonly(fields),
+          remove,
+          push,
+          swap,
+          insert,
+          update,
+          replace,
+          prepend,
+      };
+  }
+
+  const FieldArray = vue.defineComponent({
+      name: 'FieldArray',
+      inheritAttrs: false,
+      props: {
+          name: {
+              type: String,
+              required: true,
+          },
+      },
+      setup(props, ctx) {
+          const { push, remove, swap, insert, replace, update, prepend, fields } = useFieldArray(vue.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 = vue.defineComponent({
       name: 'ErrorMessage',
       props: {
@@ -2016,9 +2304,9 @@
           },
       },
       setup(props, ctx) {
-          const errors = vue.inject(FormErrorsKey, undefined);
+          const form = vue.inject(FormContextKey, undefined);
           const message = vue.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 {
@@ -2069,7 +2357,7 @@
       let field = path ? undefined : vue.inject(FieldContextKey);
       return vue.computed(() => {
           if (path) {
-              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[vue.unref(path)]);
+              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
           }
           if (!field) {
               warn(`field with name ${vue.unref(path)} was not found`);
@@ -2087,7 +2375,7 @@
       let field = path ? undefined : vue.inject(FieldContextKey);
       return vue.computed(() => {
           if (path) {
-              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[vue.unref(path)]);
+              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
           }
           if (!field) {
               warn(`field with name ${vue.unref(path)} was not found`);
@@ -2105,7 +2393,7 @@
       let field = path ? undefined : vue.inject(FieldContextKey);
       return vue.computed(() => {
           if (path) {
-              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[vue.unref(path)]);
+              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
           }
           if (!field) {
               warn(`field with name ${vue.unref(path)} was not found`);
@@ -2137,7 +2425,7 @@
       let field = path ? undefined : vue.inject(FieldContextKey);
       return function validateField() {
           if (path) {
-              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsById.value[vue.unref(path)]);
+              field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
           }
           if (!field) {
               warn(`field with name ${vue.unref(path)} was not found`);
@@ -2230,11 +2518,10 @@
       // We don't want to use self injected context as it doesn't make sense
       const field = path ? undefined : vue.inject(FieldContextKey);
       return vue.computed(() => {
-          var _a;
           if (path) {
               return getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(path));
           }
-          return (_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.value;
+          return vue.unref(field === null || field === void 0 ? void 0 : field.value);
       });
   }
 
@@ -2255,24 +2542,25 @@
    * 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 || vue.computed(() => ({}));
+      return vue.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 : vue.inject(FieldContextKey);
       return vue.computed(() => {
-          var _a;
           if (path) {
-              return (_a = errors === null || errors === void 0 ? void 0 : errors.value) === null || _a === void 0 ? void 0 : _a[vue.unref(path)];
+              return form === null || form === void 0 ? void 0 : form.errors.value[vue.unref(path)];
           }
           return field === null || field === void 0 ? void 0 : field.errorMessage.value;
       });
@@ -2294,12 +2582,14 @@
 
   exports.ErrorMessage = ErrorMessage;
   exports.Field = Field;
+  exports.FieldArray = FieldArray;
   exports.FieldContextKey = FieldContextKey;
   exports.Form = Form;
   exports.FormContextKey = FormContextKey;
   exports.configure = configure;
   exports.defineRule = defineRule;
   exports.useField = useField;
+  exports.useFieldArray = useFieldArray;
   exports.useFieldError = useFieldError;
   exports.useFieldValue = useFieldValue;
   exports.useForm = useForm;