vee-validate 4.2.3 → 4.3.0

package/dist/vee-validate.esm.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.2.3
+  * vee-validate v4.3.0
   * (c) 2021 Abdelrahman Awad
   * @license MIT
   */
@@ -11,6 +11,10 @@ function isCallable(fn) {
 const isObject = (obj) => obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj);
 function isIndex(value) {
     return Number(value) >= 0;
+}
+function toNumber(value) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n;
 }
 
 const RULES = {};
@@ -38,6 +42,66 @@ function guardExtend(id, validator) {
     throw new Error(`Extension Error: The validator '${id}' must be a function.`);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const normalizeChildren = (context, slotProps) => {
+    if (!context.slots.default) {
+        return context.slots.default;
+    }
+    return context.slots.default(slotProps);
+};
+/**
+ * Vue adds a `_value` prop at the moment on the input elements to store the REAL value on them, real values are different than the `value` attribute
+ * as they do not get casted to strings unlike `el.value` which preserves user-code behavior
+ */
+function getBoundValue(el) {
+    if (hasValueBinding(el)) {
+        return el._value;
+    }
+    return undefined;
+}
+/**
+ * Vue adds a `_value` prop at the moment on the input elements to store the REAL value on them, real values are different than the `value` attribute
+ * as they do not get casted to strings unlike `el.value` which preserves user-code behavior
+ */
+function hasValueBinding(el) {
+    return '_value' in el;
+}
+
+const isEvent = (evt) => {
+    if (!evt) {
+        return false;
+    }
+    if (typeof Event !== 'undefined' && isCallable(Event) && evt instanceof Event) {
+        return true;
+    }
+    // this is for IE and Cypress #3161
+    /* istanbul ignore next */
+    if (evt && evt.srcElement) {
+        return true;
+    }
+    return false;
+};
+function normalizeEventValue(value) {
+    if (!isEvent(value)) {
+        return value;
+    }
+    const input = value.target;
+    // Vue sets the current bound value on `_value` prop
+    // for checkboxes it it should fetch the value binding type as is (boolean instead of string)
+    if (hasCheckedAttr(input.type) && hasValueBinding(input)) {
+        return getBoundValue(input);
+    }
+    if (input.type === 'file' && input.files) {
+        return Array.from(input.files);
+    }
+    if (isNativeMultiSelect(input)) {
+        return Array.from(input.options)
+            .filter(opt => opt.selected && !opt.disabled)
+            .map(getBoundValue);
+    }
+    return input.value;
+}
+
 function isLocator(value) {
     return isCallable(value) && !!value.__locatorRef;
 }
@@ -100,6 +164,9 @@ function isNativeMultiSelectNode(tag, attrs) {
  */
 function shouldHaveValueBinding(tag, attrs) {
     return isNativeMultiSelectNode(tag, attrs) || isFileInputNode(tag, attrs);
+}
+function isFormSubmitEvent(evt) {
+    return isEvent(evt) && evt.target && 'submit' in evt.target;
 }
 
 function cleanupNonNestedPath(path) {
@@ -222,6 +289,20 @@ function normalizeField(field) {
     }
     return field;
 }
+/**
+ * Applies a mutation function on a field or field group
+ */
+function applyFieldMutation(field, mutation, onlyFirst = false) {
+    if (!Array.isArray(field)) {
+        mutation(field);
+        return;
+    }
+    if (onlyFirst) {
+        mutation(field[0]);
+        return;
+    }
+    field.forEach(mutation);
+}
 function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
     if (Array.isArray(currentValue)) {
         const newVal = [...currentValue];
@@ -232,66 +313,6 @@ function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
     return currentValue === checkedValue ? uncheckedValue : checkedValue;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const normalizeChildren = (context, slotProps) => {
-    if (!context.slots.default) {
-        return context.slots.default;
-    }
-    return context.slots.default(slotProps);
-};
-/**
- * Vue adds a `_value` prop at the moment on the input elements to store the REAL value on them, real values are different than the `value` attribute
- * as they do not get casted to strings unlike `el.value` which preserves user-code behavior
- */
-function getBoundValue(el) {
-    if (hasValueBinding(el)) {
-        return el._value;
-    }
-    return undefined;
-}
-/**
- * Vue adds a `_value` prop at the moment on the input elements to store the REAL value on them, real values are different than the `value` attribute
- * as they do not get casted to strings unlike `el.value` which preserves user-code behavior
- */
-function hasValueBinding(el) {
-    return '_value' in el;
-}
-
-const isEvent = (evt) => {
-    if (!evt) {
-        return false;
-    }
-    if (typeof Event !== 'undefined' && isCallable(Event) && evt instanceof Event) {
-        return true;
-    }
-    // this is for IE and Cypress #3161
-    /* istanbul ignore next */
-    if (evt && evt.srcElement) {
-        return true;
-    }
-    return false;
-};
-function normalizeEventValue(value) {
-    if (!isEvent(value)) {
-        return value;
-    }
-    const input = value.target;
-    // Vue sets the current bound value on `_value` prop
-    // for checkboxes it it should fetch the value binding type as is (boolean instead of string)
-    if (hasCheckedAttr(input.type) && hasValueBinding(input)) {
-        return getBoundValue(input);
-    }
-    if (input.type === 'file' && input.files) {
-        return Array.from(input.files);
-    }
-    if (isNativeMultiSelect(input)) {
-        return Array.from(input.options)
-            .filter(opt => opt.selected && !opt.disabled)
-            .map(getBoundValue);
-    }
-    return input.value;
-}
-
 /**
  * Normalizes the given rules expression.
  */
@@ -624,7 +645,7 @@ function useField(name, rules, opts) {
     const fid = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
     const { initialValue, validateOnMount, bails, type, valueProp, label, validateOnValueUpdate, uncheckedValue, } = normalizeOptions(unref(name), opts);
     const form = injectWithSelf(FormContextSymbol);
-    const { meta, errors, errorMessage, handleBlur, handleInput, resetValidationState, setValidationState, value, checked, } = useValidationState({
+    const { meta, errors, errorMessage, handleBlur, handleInput, resetValidationState, setValidationState, setErrors, value, checked, } = useValidationState({
         name,
         initValue: initialValue,
         form,
@@ -633,7 +654,7 @@ function useField(name, rules, opts) {
     });
     const normalizedRules = computed(() => {
         let rulesValue = unref(rules);
-        const schema = form === null || form === void 0 ? void 0 : form.schema;
+        const schema = unref(form === null || form === void 0 ? void 0 : form.schema);
         if (schema && !isYupValidator(schema)) {
             rulesValue = extractRuleFromSchema(schema, unref(name)) || rulesValue;
         }
@@ -646,6 +667,7 @@ function useField(name, rules, opts) {
         var _a, _b;
         meta.pending = true;
         let result;
+        meta.validated = true;
         if (!form || !form.validateSchema) {
             result = await validate(value.value, normalizedRules.value, {
                 name: unref(label) || unref(name),
@@ -654,7 +676,7 @@ function useField(name, rules, opts) {
             });
         }
         else {
-            result = (_b = (await form.validateSchema())[unref(name)]) !== null && _b !== void 0 ? _b : { valid: true, errors: [] };
+            result = (_b = (await form.validateSchema('validated-only'))[unref(name)]) !== null && _b !== void 0 ? _b : { valid: true, errors: [] };
         }
         meta.pending = false;
         return setValidationState(result);
@@ -670,7 +692,7 @@ function useField(name, rules, opts) {
             });
         }
         else {
-            result = (_c = (_b = (await form.validateSchema(false))) === null || _b === void 0 ? void 0 : _b[unref(name)]) !== null && _c !== void 0 ? _c : { valid: true, errors: [] };
+            result = (_c = (_b = (await form.validateSchema('silent'))) === null || _b === void 0 ? void 0 : _b[unref(name)]) !== null && _c !== void 0 ? _c : { valid: true, errors: [] };
         }
         meta.valid = result.valid;
     }
@@ -686,7 +708,6 @@ function useField(name, rules, opts) {
             newValue = resolveNextCheckboxValue(value.value, unref(valueProp), unref(uncheckedValue));
         }
         value.value = newValue;
-        meta.hadValueUserInteraction = true;
         if (!validateOnValueUpdate) {
             return validateWithStateMutation();
         }
@@ -737,6 +758,7 @@ function useField(name, rules, opts) {
         handleInput,
         setValidationState,
         setTouched,
+        setErrors,
     };
     provide(FieldContextSymbol, field);
     if (isRef(rules) && typeof unref(rules) !== 'function') {
@@ -844,7 +866,6 @@ function useValidationState({ name, initValue, form, type, valueProp, }) {
         if (!hasCheckedAttr(type)) {
             value.value = normalizeEventValue(e);
         }
-        meta.hadValueUserInteraction = true;
     };
     // Updates the validation state with the validation result
     function setValidationState(result) {
@@ -867,12 +888,13 @@ function useValidationState({ name, initValue, form, type, valueProp, }) {
         setErrors((state === null || state === void 0 ? void 0 : state.errors) || []);
         meta.touched = (_b = state === null || state === void 0 ? void 0 : state.touched) !== null && _b !== void 0 ? _b : false;
         meta.pending = false;
-        meta.hadValueUserInteraction = false;
+        meta.validated = false;
     }
     return {
         meta,
         errors,
         errorMessage,
+        setErrors,
         setValidationState,
         resetValidationState,
         handleBlur,
@@ -889,7 +911,7 @@ function useMeta(initialValue, currentValue, errors) {
         touched: false,
         pending: false,
         valid: true,
-        hadValueUserInteraction: false,
+        validated: false,
         initialValue: computed(() => unref(initialValue)),
         dirty: computed(() => {
             return !es6(currentValue.value, unref(initialValue));
@@ -942,7 +964,7 @@ function useErrorsSource(path, form) {
             errors: computed(() => errors.value),
             errorMessage: computed(() => errors.value[0]),
             setErrors: (messages) => {
-                errors.value = messages;
+                errors.value = Array.isArray(messages) ? messages : [messages];
             },
         };
     }
@@ -1007,6 +1029,10 @@ const Field = defineComponent({
         modelValue: {
             type: null,
         },
+        modelModifiers: {
+            type: null,
+            default: () => ({}),
+        },
     },
     emits: ['update:modelValue'],
     setup(props, ctx) {
@@ -1014,7 +1040,7 @@ const Field = defineComponent({
         const name = toRef(props, 'name');
         const label = toRef(props, 'label');
         const uncheckedValue = toRef(props, 'uncheckedValue');
-        const { errors, value, errorMessage, validate: validateField, handleChange, handleBlur, handleInput, setTouched, resetField, handleReset, meta, checked, } = useField(name, rules, {
+        const { errors, value, errorMessage, validate: validateField, handleChange, handleBlur, handleInput, setTouched, resetField, handleReset, meta, checked, setErrors, } = useField(name, rules, {
             validateOnMount: props.validateOnMount,
             bails: props.bails,
             type: ctx.attrs.type,
@@ -1084,12 +1110,13 @@ const Field = defineComponent({
                 handleReset,
                 handleBlur,
                 setTouched,
+                setErrors,
             };
         });
         if ('modelValue' in props) {
             const modelValue = toRef(props, 'modelValue');
             watch(modelValue, newModelValue => {
-                if (newModelValue !== value.value) {
+                if (newModelValue !== applyModifiers(value.value, props.modelModifiers)) {
                     value.value = newModelValue;
                     validateField();
                 }
@@ -1121,6 +1148,12 @@ function resolveValidationTriggers(props) {
         validateOnBlur: (_c = props.validateOnBlur) !== null && _c !== void 0 ? _c : validateOnBlur,
         validateOnModelUpdate: (_d = props.validateOnModelUpdate) !== null && _d !== void 0 ? _d : validateOnModelUpdate,
     };
+}
+function applyModifiers(value, modifiers) {
+    if (modifiers.number) {
+        return toNumber(value);
+    }
+    return value;
 }
 
 function useForm(opts) {
@@ -1233,11 +1266,7 @@ function useForm(opts) {
         if (!fieldInstance) {
             return;
         }
-        if (Array.isArray(fieldInstance)) {
-            fieldInstance.forEach(f => f.setTouched(isTouched));
-            return;
-        }
-        fieldInstance.setTouched(isTouched);
+        applyFieldMutation(fieldInstance, f => f.setTouched(isTouched));
     }
     /**
      * Sets the touched meta state on multiple fields
@@ -1330,7 +1359,7 @@ function useForm(opts) {
             return acc;
         }
         if (formCtx.validateSchema) {
-            return formCtx.validateSchema(true).then(results => {
+            return formCtx.validateSchema('force').then(results => {
                 return keysOf(results)
                     .map(r => ({ key: r, errors: results[r].errors }))
                     .reduce(resultReducer, { errors: {}, valid: true });
@@ -1396,6 +1425,7 @@ function useForm(opts) {
         setInPath(formValues, path, value);
         setInPath(initialValues.value, path, value);
     }
+    const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
     const formCtx = {
         register: registerField,
         unregister: unregisterField,
@@ -1403,11 +1433,11 @@ function useForm(opts) {
         values: formValues,
         setFieldErrorBag,
         errorBag,
-        schema: opts === null || opts === void 0 ? void 0 : opts.validationSchema,
+        schema,
         submitCount,
-        validateSchema: isYupValidator(opts === null || opts === void 0 ? void 0 : opts.validationSchema)
-            ? (shouldMutate = false) => {
-                return validateYupSchema(formCtx, shouldMutate);
+        validateSchema: isYupValidator(unref(schema))
+            ? mode => {
+                return validateYupSchema(formCtx, mode);
             }
             : undefined,
         validate,
@@ -1431,9 +1461,8 @@ function useForm(opts) {
         }, {});
     });
     const submitForm = handleSubmit((_, { evt }) => {
-        var _a, _b;
-        if (evt) {
-            (_b = (_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.submit) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (isFormSubmitEvent(evt)) {
+            evt.target.submit();
         }
     });
     // Trigger initial validation
@@ -1452,9 +1481,15 @@ function useForm(opts) {
         // otherwise run initial silent validation through schema if available
         // the useField should skip their own silent validation if a yup schema is present
         if (formCtx.validateSchema) {
-            formCtx.validateSchema(false);
+            formCtx.validateSchema('silent');
         }
     });
+    if (isRef(schema)) {
+        watch(schema, () => {
+            var _a;
+            (_a = formCtx.validateSchema) === null || _a === void 0 ? void 0 : _a.call(formCtx, 'validated-only');
+        });
+    }
     // Provide injections
     provide(FormContextSymbol, formCtx);
     provide(FormErrorsSymbol, errors);
@@ -1499,8 +1534,8 @@ function useFormMeta(fields, currentValues, initialValues) {
         return Object.assign(Object.assign({ initialValues: unref(initialValues) }, flags), { dirty: isDirty.value });
     });
 }
-async function validateYupSchema(form, shouldMutate = false) {
-    const errors = await form.schema
+async function validateYupSchema(form, mode) {
+    const errors = await unref(form.schema)
         .validate(form.values, { abortEarly: false })
         .then(() => [])
         .catch((err) => {
@@ -1526,24 +1561,15 @@ async function validateYupSchema(form, shouldMutate = false) {
             valid: !messages.length,
         };
         result[fieldId] = fieldResult;
-        const hadInteraction = Array.isArray(field)
-            ? field.some(f => f.meta.hadValueUserInteraction)
-            : field.meta.hadValueUserInteraction;
-        if (!shouldMutate && !hadInteraction) {
-            // Update the valid flag regardless to keep it accurate
-            if (Array.isArray(field)) {
-                field.forEach(f => (f.meta.valid = fieldResult.valid));
-            }
-            else {
-                field.meta.valid = fieldResult.valid;
-            }
+        if (mode === 'silent') {
+            applyFieldMutation(field, f => (f.meta.valid = fieldResult.valid));
             return result;
         }
-        if (Array.isArray(field)) {
-            field[0].setValidationState(fieldResult);
+        const wasValidated = Array.isArray(field) ? field.some(f => f.meta.validated) : field.meta.validated;
+        if (mode === 'validated-only' && !wasValidated) {
             return result;
         }
-        field.setValidationState(fieldResult);
+        applyFieldMutation(field, f => f.setValidationState(fieldResult), true);
         return result;
     }, {});
     return aggregatedResult;
@@ -1562,14 +1588,14 @@ function useFormInitialValues(fields, formValues, providedValues) {
         if (!updateFields) {
             return;
         }
-        // update the non-interacted-by-user fields
+        // update the pristine non-touched fields
         // 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 isSafeToUpdate = (f) => f.meta.hadValueUserInteraction;
+        const hadInteraction = (f) => f.meta.touched;
         keysOf(fields.value).forEach(fieldPath => {
             const field = fields.value[fieldPath];
-            const touchedByUser = Array.isArray(field) ? field.some(isSafeToUpdate) : isSafeToUpdate(field);
+            const touchedByUser = Array.isArray(field) ? field.some(hadInteraction) : hadInteraction(field);
             if (touchedByUser) {
                 return;
             }
@@ -1652,8 +1678,9 @@ const Form = defineComponent({
     },
     setup(props, ctx) {
         const initialValues = toRef(props, 'initialValues');
+        const validationSchema = toRef(props, 'validationSchema');
         const { errors, values, meta, isSubmitting, submitCount, validate, validateField, handleReset, resetForm, handleSubmit, submitForm, setErrors, setFieldError, setFieldValue, setValues, setFieldTouched, setTouched, } = useForm({
-            validationSchema: props.validationSchema,
+            validationSchema: validationSchema.value ? validationSchema : undefined,
             initialValues,
             initialErrors: props.initialErrors,
             initialTouched: props.initialTouched,