vee-validate 4.9.2 → 4.9.4

package/dist/vee-validate.esm.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.9.2
+  * vee-validate v4.9.4
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
@@ -1373,11 +1373,11 @@ 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));
+    return btoa(encodeURIComponent(JSON.stringify(idObject)));
 }
 function decodeNodeId(nodeId) {
     try {
-        const idObject = JSON.parse(atob(nodeId));
+        const idObject = JSON.parse(decodeURIComponent(atob(nodeId)));
         const form = DEVTOOLS_FORMS[idObject.f];
         if (!form && idObject.ff) {
             const field = DEVTOOLS_FIELDS[idObject.ff];
@@ -1432,7 +1432,7 @@ function buildFieldState(state) {
     };
 }
 function buildFormState(form) {
-    const { errorBag, meta, values, isSubmitting, submitCount } = form;
+    const { errorBag, meta, values, isSubmitting, isValidating, submitCount } = form;
     return {
         'Form state': [
             {
@@ -1443,6 +1443,10 @@ function buildFormState(form) {
                 key: 'isSubmitting',
                 value: isSubmitting.value,
             },
+            {
+                key: 'isValidating',
+                value: isValidating.value,
+            },
             {
                 key: 'touched',
                 value: meta.value.touched,
@@ -1576,10 +1580,7 @@ function _useField(path, rules, opts) {
     // Common input/change event handler
     function handleChange(e, shouldValidate = true) {
         const newValue = normalizeEventValue(e);
-        setValue(newValue, false);
-        if (!validateOnValueUpdate && shouldValidate) {
-            validateWithStateMutation();
-        }
+        setValue(newValue, shouldValidate);
     }
     // Runs the initial validation
     onMounted(() => {
@@ -1608,12 +1609,13 @@ function _useField(path, rules, opts) {
         meta.validated = false;
         validateValidStateOnly();
     }
-    function setValue(newValue, validate = true) {
+    function setValue(newValue, shouldValidate = true) {
         value.value = newValue;
-        if (!validate) {
+        if (!shouldValidate) {
+            validateValidStateOnly();
             return;
         }
-        const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+        const validateFn = shouldValidate ? validateWithStateMutation : validateValidStateOnly;
         validateFn();
     }
     function setErrors(errors) {
@@ -1862,7 +1864,7 @@ function getCurrentModelValue(vm, propName) {
     return vm.props[propName];
 }
 
-const FieldImpl = defineComponent({
+const FieldImpl = /** #__PURE__ */ defineComponent({
     name: 'Field',
     inheritAttrs: false,
     props: {
@@ -1955,15 +1957,6 @@ const FieldImpl = defineComponent({
             handleChange(e, shouldValidate);
             ctx.emit('update:modelValue', value.value);
         };
-        const handleInput = (e) => {
-            if (!hasCheckedAttr(ctx.attrs.type)) {
-                value.value = normalizeEventValue(e);
-            }
-        };
-        const onInputHandler = function handleInputWithModel(e) {
-            handleInput(e);
-            ctx.emit('update:modelValue', value.value);
-        };
         const fieldProps = computed(() => {
             const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = resolveValidationTriggers(props);
             function baseOnBlur(e) {
@@ -2013,7 +2006,7 @@ const FieldImpl = defineComponent({
                 validate: validateField,
                 resetField,
                 handleChange: onChangeHandler,
-                handleInput: onInputHandler,
+                handleInput: e => onChangeHandler(e, false),
                 handleReset,
                 handleBlur,
                 setTouched,
@@ -2081,6 +2074,8 @@ function useForm(opts) {
     let FIELD_ID_COUNTER = 0;
     // If the form is currently submitting
     const isSubmitting = ref(false);
+    // If the form is currently validating
+    const isValidating = ref(false);
     // The number of times the user tried to submit the form
     const submitCount = ref(0);
     // field arrays managed by this form
@@ -2095,7 +2090,9 @@ function useForm(opts) {
     function setFieldError(field, message) {
         const state = findPathState(field);
         if (!state) {
-            extraErrorsBag.value[field] = normalizeErrorItem(message);
+            if (typeof field === 'string') {
+                extraErrorsBag.value[field] = normalizeErrorItem(message);
+            }
             return;
         }
         state.errors = normalizeErrorItem(message);
@@ -2241,11 +2238,11 @@ function useForm(opts) {
         // this ensures we have a complete key map of all the fields
         const paths = [
             ...new Set([...keysOf(formResult.results), ...pathStates.value.map(p => p.path), ...currentErrorsPaths]),
-        ];
+        ].sort();
         // aggregates the paths into a single result object while applying the results on the fields
         return paths.reduce((validation, _path) => {
             const path = _path;
-            const pathState = findPathState(path);
+            const pathState = findPathState(path) || findHoistedPath(path);
             const messages = (formResult.results[path] || { errors: [] }).errors;
             const fieldResult = {
                 errors: messages,
@@ -2283,6 +2280,15 @@ function useForm(opts) {
         const pathState = typeof path === 'string' ? pathStates.value.find(state => state.path === path) : path;
         return pathState;
     }
+    function findHoistedPath(path) {
+        const candidates = pathStates.value.filter(state => path.startsWith(state.path));
+        return candidates.reduce((bestCandidate, candidate) => {
+            if (!bestCandidate) {
+                return candidate;
+            }
+            return (candidate.path.length > bestCandidate.path.length ? candidate : bestCandidate);
+        }, undefined);
+    }
     let UNSET_BATCH = [];
     let PENDING_UNSET;
     function unsetPathValue(path) {
@@ -2395,6 +2401,7 @@ function useForm(opts) {
         submitCount,
         meta,
         isSubmitting,
+        isValidating,
         fieldArrays,
         keepValuesOnUnmount,
         validateSchema: unref(schema) ? validateSchema : undefined,
@@ -2517,6 +2524,7 @@ function useForm(opts) {
         if (formCtx.validateSchema) {
             return formCtx.validateSchema(mode);
         }
+        isValidating.value = true;
         // No schema, each field is responsible to validate itself
         const validations = await Promise.all(pathStates.value.map(state => {
             if (!state.validate) {
@@ -2534,6 +2542,7 @@ function useForm(opts) {
                 };
             });
         }));
+        isValidating.value = false;
         const results = {};
         const errors = {};
         for (const validation of validations) {
@@ -2589,12 +2598,14 @@ function useForm(opts) {
         if (!schemaValue) {
             return { valid: true, results: {}, errors: {} };
         }
+        isValidating.value = true;
         const formResult = isYupValidator(schemaValue) || isTypedSchema(schemaValue)
             ? await validateTypedSchema(schemaValue, formValues)
             : await validateObjectSchema(schemaValue, formValues, {
                 names: fieldNames.value,
                 bailsMap: fieldBailsMap.value,
             });
+        isValidating.value = false;
         return formResult;
     }
     const submitForm = handleSubmit((_, { evt }) => {
@@ -2631,7 +2642,7 @@ function useForm(opts) {
     provide(FormContextKey, formCtx);
     if ((process.env.NODE_ENV !== 'production')) {
         registerFormWithDevTools(formCtx);
-        watch(() => (Object.assign(Object.assign({ errors: errorBag.value }, meta.value), { values: formValues, isSubmitting: isSubmitting.value, submitCount: submitCount.value })), refreshInspector, {
+        watch(() => (Object.assign(Object.assign({ errors: errorBag.value }, meta.value), { values: formValues, isSubmitting: isSubmitting.value, isValidating: isValidating.value, submitCount: submitCount.value })), refreshInspector, {
             deep: true,
         });
     }
@@ -2786,7 +2797,9 @@ function useFormInitialValues(pathsState, formValues, opts) {
     }
     if (isRef(providedValues)) {
         watch(providedValues, value => {
-            setInitialValues(value, true);
+            if (value) {
+                setInitialValues(value, true);
+            }
         }, {
             deep: true,
         });
@@ -2798,7 +2811,7 @@ function useFormInitialValues(pathsState, formValues, opts) {
     };
 }
 
-const FormImpl = defineComponent({
+const FormImpl = /** #__PURE__ */ defineComponent({
     name: 'Form',
     inheritAttrs: false,
     props: {
@@ -2843,7 +2856,7 @@ const FormImpl = defineComponent({
         const initialValues = toRef(props, 'initialValues');
         const validationSchema = toRef(props, 'validationSchema');
         const keepValues = toRef(props, 'keepValues');
-        const { errors, errorBag, values, meta, isSubmitting, submitCount, controlledValues, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, resetField, } = useForm({
+        const { errors, errorBag, values, meta, isSubmitting, isValidating, submitCount, controlledValues, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, resetField, } = useForm({
             validationSchema: validationSchema.value ? validationSchema : undefined,
             initialValues,
             initialErrors: props.initialErrors,
@@ -2887,6 +2900,7 @@ const FormImpl = defineComponent({
                 errorBag: errorBag.value,
                 values,
                 isSubmitting: isSubmitting.value,
+                isValidating: isValidating.value,
                 submitCount: submitCount.value,
                 controlledValues: controlledValues.value,
                 validate,
@@ -3166,7 +3180,7 @@ function useFieldArray(arrayPath) {
     return fieldArrayCtx;
 }
 
-const FieldArrayImpl = defineComponent({
+const FieldArrayImpl = /** #__PURE__ */ defineComponent({
     name: 'FieldArray',
     inheritAttrs: false,
     props: {
@@ -3208,7 +3222,7 @@ const FieldArrayImpl = defineComponent({
 });
 const FieldArray = FieldArrayImpl;
 
-const ErrorMessageImpl = defineComponent({
+const ErrorMessageImpl = /** #__PURE__ */ defineComponent({
     name: 'ErrorMessage',
     props: {
         as: {
@@ -3323,6 +3337,20 @@ function useIsSubmitting() {
     });
 }
 
+/**
+ * If the form is validating or not
+ */
+function useIsValidating() {
+    const form = injectWithSelf(FormContextKey);
+    if (!form) {
+        warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
+    }
+    return computed(() => {
+        var _a;
+        return (_a = form === null || form === void 0 ? void 0 : form.isValidating.value) !== null && _a !== void 0 ? _a : false;
+    });
+}
+
 /**
  * Validates a single field
  */
@@ -3486,4 +3514,4 @@ function useSubmitForm(cb) {
     };
 }
 
-export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate, validateObjectSchema as validateObject };
+export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useIsValidating, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate, validateObjectSchema as validateObject };

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.9.2
+  * vee-validate v4.9.4
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
@@ -1182,10 +1182,7 @@
         // Common input/change event handler
         function handleChange(e, shouldValidate = true) {
             const newValue = normalizeEventValue(e);
-            setValue(newValue, false);
-            if (!validateOnValueUpdate && shouldValidate) {
-                validateWithStateMutation();
-            }
+            setValue(newValue, shouldValidate);
         }
         // Runs the initial validation
         vue.onMounted(() => {
@@ -1214,12 +1211,13 @@
             meta.validated = false;
             validateValidStateOnly();
         }
-        function setValue(newValue, validate = true) {
+        function setValue(newValue, shouldValidate = true) {
             value.value = newValue;
-            if (!validate) {
+            if (!shouldValidate) {
+                validateValidStateOnly();
                 return;
             }
-            const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+            const validateFn = shouldValidate ? validateWithStateMutation : validateValidStateOnly;
             validateFn();
         }
         function setErrors(errors) {
@@ -1446,7 +1444,7 @@
         return vm.props[propName];
     }
 
-    const FieldImpl = vue.defineComponent({
+    const FieldImpl = /** #__PURE__ */ vue.defineComponent({
         name: 'Field',
         inheritAttrs: false,
         props: {
@@ -1539,15 +1537,6 @@
                 handleChange(e, shouldValidate);
                 ctx.emit('update:modelValue', value.value);
             };
-            const handleInput = (e) => {
-                if (!hasCheckedAttr(ctx.attrs.type)) {
-                    value.value = normalizeEventValue(e);
-                }
-            };
-            const onInputHandler = function handleInputWithModel(e) {
-                handleInput(e);
-                ctx.emit('update:modelValue', value.value);
-            };
             const fieldProps = vue.computed(() => {
                 const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = resolveValidationTriggers(props);
                 function baseOnBlur(e) {
@@ -1597,7 +1586,7 @@
                     validate: validateField,
                     resetField,
                     handleChange: onChangeHandler,
-                    handleInput: onInputHandler,
+                    handleInput: e => onChangeHandler(e, false),
                     handleReset,
                     handleBlur,
                     setTouched,
@@ -1665,6 +1654,8 @@
         let FIELD_ID_COUNTER = 0;
         // If the form is currently submitting
         const isSubmitting = vue.ref(false);
+        // If the form is currently validating
+        const isValidating = vue.ref(false);
         // The number of times the user tried to submit the form
         const submitCount = vue.ref(0);
         // field arrays managed by this form
@@ -1679,7 +1670,9 @@
         function setFieldError(field, message) {
             const state = findPathState(field);
             if (!state) {
-                extraErrorsBag.value[field] = normalizeErrorItem(message);
+                if (typeof field === 'string') {
+                    extraErrorsBag.value[field] = normalizeErrorItem(message);
+                }
                 return;
             }
             state.errors = normalizeErrorItem(message);
@@ -1825,11 +1818,11 @@
             // this ensures we have a complete key map of all the fields
             const paths = [
                 ...new Set([...keysOf(formResult.results), ...pathStates.value.map(p => p.path), ...currentErrorsPaths]),
-            ];
+            ].sort();
             // aggregates the paths into a single result object while applying the results on the fields
             return paths.reduce((validation, _path) => {
                 const path = _path;
-                const pathState = findPathState(path);
+                const pathState = findPathState(path) || findHoistedPath(path);
                 const messages = (formResult.results[path] || { errors: [] }).errors;
                 const fieldResult = {
                     errors: messages,
@@ -1867,6 +1860,15 @@
             const pathState = typeof path === 'string' ? pathStates.value.find(state => state.path === path) : path;
             return pathState;
         }
+        function findHoistedPath(path) {
+            const candidates = pathStates.value.filter(state => path.startsWith(state.path));
+            return candidates.reduce((bestCandidate, candidate) => {
+                if (!bestCandidate) {
+                    return candidate;
+                }
+                return (candidate.path.length > bestCandidate.path.length ? candidate : bestCandidate);
+            }, undefined);
+        }
         let UNSET_BATCH = [];
         let PENDING_UNSET;
         function unsetPathValue(path) {
@@ -1979,6 +1981,7 @@
             submitCount,
             meta,
             isSubmitting,
+            isValidating,
             fieldArrays,
             keepValuesOnUnmount,
             validateSchema: vue.unref(schema) ? validateSchema : undefined,
@@ -2101,6 +2104,7 @@
             if (formCtx.validateSchema) {
                 return formCtx.validateSchema(mode);
             }
+            isValidating.value = true;
             // No schema, each field is responsible to validate itself
             const validations = await Promise.all(pathStates.value.map(state => {
                 if (!state.validate) {
@@ -2118,6 +2122,7 @@
                     };
                 });
             }));
+            isValidating.value = false;
             const results = {};
             const errors = {};
             for (const validation of validations) {
@@ -2173,12 +2178,14 @@
             if (!schemaValue) {
                 return { valid: true, results: {}, errors: {} };
             }
+            isValidating.value = true;
             const formResult = isYupValidator(schemaValue) || isTypedSchema(schemaValue)
                 ? await validateTypedSchema(schemaValue, formValues)
                 : await validateObjectSchema(schemaValue, formValues, {
                     names: fieldNames.value,
                     bailsMap: fieldBailsMap.value,
                 });
+            isValidating.value = false;
             return formResult;
         }
         const submitForm = handleSubmit((_, { evt }) => {
@@ -2364,7 +2371,9 @@
         }
         if (vue.isRef(providedValues)) {
             vue.watch(providedValues, value => {
-                setInitialValues(value, true);
+                if (value) {
+                    setInitialValues(value, true);
+                }
             }, {
                 deep: true,
             });
@@ -2376,7 +2385,7 @@
         };
     }
 
-    const FormImpl = vue.defineComponent({
+    const FormImpl = /** #__PURE__ */ vue.defineComponent({
         name: 'Form',
         inheritAttrs: false,
         props: {
@@ -2421,7 +2430,7 @@
             const initialValues = vue.toRef(props, 'initialValues');
             const validationSchema = vue.toRef(props, 'validationSchema');
             const keepValues = vue.toRef(props, 'keepValues');
-            const { errors, errorBag, values, meta, isSubmitting, submitCount, controlledValues, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, resetField, } = useForm({
+            const { errors, errorBag, values, meta, isSubmitting, isValidating, submitCount, controlledValues, validate, validateField, handleReset, resetForm, handleSubmit, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, resetField, } = useForm({
                 validationSchema: validationSchema.value ? validationSchema : undefined,
                 initialValues,
                 initialErrors: props.initialErrors,
@@ -2465,6 +2474,7 @@
                     errorBag: errorBag.value,
                     values,
                     isSubmitting: isSubmitting.value,
+                    isValidating: isValidating.value,
                     submitCount: submitCount.value,
                     controlledValues: controlledValues.value,
                     validate,
@@ -2744,7 +2754,7 @@
         return fieldArrayCtx;
     }
 
-    const FieldArrayImpl = vue.defineComponent({
+    const FieldArrayImpl = /** #__PURE__ */ vue.defineComponent({
         name: 'FieldArray',
         inheritAttrs: false,
         props: {
@@ -2786,7 +2796,7 @@
     });
     const FieldArray = FieldArrayImpl;
 
-    const ErrorMessageImpl = vue.defineComponent({
+    const ErrorMessageImpl = /** #__PURE__ */ vue.defineComponent({
         name: 'ErrorMessage',
         props: {
             as: {
@@ -2901,6 +2911,20 @@
         });
     }
 
+    /**
+     * If the form is validating or not
+     */
+    function useIsValidating() {
+        const form = injectWithSelf(FormContextKey);
+        if (!form) {
+            warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
+        }
+        return vue.computed(() => {
+            var _a;
+            return (_a = form === null || form === void 0 ? void 0 : form.isValidating.value) !== null && _a !== void 0 ? _a : false;
+        });
+    }
+
     /**
      * Validates a single field
      */
@@ -3087,6 +3111,7 @@
     exports.useIsFormTouched = useIsFormTouched;
     exports.useIsFormValid = useIsFormValid;
     exports.useIsSubmitting = useIsSubmitting;
+    exports.useIsValidating = useIsValidating;
     exports.useResetForm = useResetForm;
     exports.useSubmitCount = useSubmitCount;
     exports.useSubmitForm = useSubmitForm;