vee-validate 4.12.0-alpha.0 → 4.12.0

package/dist/vee-validate.esm.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.12.0-alpha.0
+  * vee-validate v4.12.0
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
@@ -505,8 +505,7 @@ function withLatest(fn, onDone) {
             return result;
         }
         latestRun = undefined;
-        onDone(result, args);
-        return result;
+        return onDone(result, args);
     };
 }
 function computedDeep({ get, set }) {
@@ -1012,7 +1011,7 @@ function useFieldState(path, init) {
     if (!init.form) {
         const { errors, setErrors } = createFieldErrors();
         const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
-        const meta = createFieldMeta(value, initialValue, errors);
+        const meta = createFieldMeta(value, initialValue, errors, init.schema);
         function setState(state) {
             var _a;
             if ('value' in state) {
@@ -1044,6 +1043,7 @@ function useFieldState(path, init) {
         label: init.label,
         type: init.type,
         validate: init.validate,
+        schema: init.schema,
     });
     const errors = computed(() => state.errors);
     function setState(state) {
@@ -1139,11 +1139,14 @@ function resolveModelValue(modelValue, form, initialValue, path) {
 /**
  * Creates meta flags state and some associated effects with them
  */
-function createFieldMeta(currentValue, initialValue, errors) {
+function createFieldMeta(currentValue, initialValue, errors, schema) {
+    var _a, _b;
+    const isRequired = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.describe) === null || _a === void 0 ? void 0 : _a.call(schema).required) !== null && _b !== void 0 ? _b : false;
     const meta = reactive({
         touched: false,
         pending: false,
         valid: true,
+        required: isRequired,
         validated: !!unref(errors).length,
         initialValue: computed(() => unref(initialValue)),
         dirty: computed(() => {
@@ -1589,6 +1592,7 @@ function _useField(path, rules, opts) {
         label,
         type,
         validate: validator.value ? validate$1 : undefined,
+        schema: isTypedSchema(rules) ? rules : undefined,
     });
     const errorMessage = computed(() => errors.value[0]);
     if (syncVModel) {
@@ -1611,7 +1615,8 @@ function _useField(path, rules, opts) {
     async function validateCurrentValue(mode) {
         var _a, _b;
         if (form === null || form === void 0 ? void 0 : form.validateSchema) {
-            return (_a = (await form.validateSchema(mode)).results[toValue(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
+            const { results } = await form.validateSchema(mode);
+            return (_a = results[toValue(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
         }
         if (validator.value) {
             return validate(value.value, validator.value, {
@@ -1629,7 +1634,7 @@ function _useField(path, rules, opts) {
         return validateCurrentValue('validated-only');
     }, result => {
         if (flags.pendingUnmount[field.id]) {
-            return;
+            return result;
         }
         setState({ errors: result.errors });
         meta.pending = false;
@@ -2087,6 +2092,10 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
             };
         }
         ctx.expose({
+            value,
+            meta,
+            errors,
+            errorMessage,
             setErrors,
             setTouched,
             reset: resetField,
@@ -2133,7 +2142,7 @@ const Field = FieldImpl;
 let FORM_COUNTER = 0;
 const PRIVATE_PATH_STATE_KEYS = ['bails', 'fieldsCount', 'id', 'multiple', 'type', 'validate'];
 function resolveInitialValues(opts) {
-    const providedValues = unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
+    const providedValues = (opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
     const schema = unref(opts === null || opts === void 0 ? void 0 : opts.validationSchema);
     if (schema && isTypedSchema(schema) && isCallable(schema.cast)) {
         return klona(schema.cast(providedValues) || {});
@@ -2251,10 +2260,9 @@ function useForm(opts) {
         var _a, _b;
         const initialValue = computed(() => getFromPath(initialValues.value, toValue(path)));
         const pathStateExists = pathStateLookup.value[toValue(path)];
-        if (pathStateExists) {
-            if ((config === null || config === void 0 ? void 0 : config.type) === 'checkbox' || (config === null || config === void 0 ? void 0 : config.type) === 'radio') {
-                pathStateExists.multiple = true;
-            }
+        const isCheckboxOrRadio = (config === null || config === void 0 ? void 0 : config.type) === 'checkbox' || (config === null || config === void 0 ? void 0 : config.type) === 'radio';
+        if (pathStateExists && isCheckboxOrRadio) {
+            pathStateExists.multiple = true;
             const id = FIELD_ID_COUNTER++;
             if (Array.isArray(pathStateExists.id)) {
                 pathStateExists.id.push(id);
@@ -2268,6 +2276,17 @@ function useForm(opts) {
         }
         const currentValue = computed(() => getFromPath(formValues, toValue(path)));
         const pathValue = toValue(path);
+        const isRequired = computed(() => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isTypedSchema(schema)) {
+                return (_c = (_b = (_a = schema).describe) === null || _b === void 0 ? void 0 : _b.call(_a, toValue(path)).required) !== null && _c !== void 0 ? _c : false;
+            }
+            // Path own schema
+            if (isTypedSchema(config === null || config === void 0 ? void 0 : config.schema)) {
+                return (_f = (_e = (_d = (config === null || config === void 0 ? void 0 : config.schema)).describe) === null || _e === void 0 ? void 0 : _e.call(_d).required) !== null && _f !== void 0 ? _f : false;
+            }
+            return false;
+        });
         const id = FIELD_ID_COUNTER++;
         const state = reactive({
             id,
@@ -2276,6 +2295,7 @@ function useForm(opts) {
             pending: false,
             valid: true,
             validated: !!((_a = initialErrors[pathValue]) === null || _a === void 0 ? void 0 : _a.length),
+            required: isRequired,
             initialValue,
             errors: shallowRef([]),
             bails: (_b = config === null || config === void 0 ? void 0 : config.bails) !== null && _b !== void 0 ? _b : false,
@@ -2321,7 +2341,9 @@ function useForm(opts) {
     const debouncedSilentValidation = debounceAsync(_validateSchema, 5);
     const debouncedValidation = debounceAsync(_validateSchema, 5);
     const validateSchema = withLatest(async (mode) => {
-        return (await mode) === 'silent' ? debouncedSilentValidation() : debouncedValidation();
+        return (await (mode === 'silent'
+            ? debouncedSilentValidation()
+            : debouncedValidation()));
     }, (formResult, [mode]) => {
         // fields by id lookup
         // errors fields names, we need it to also check if custom errors are updated
@@ -2332,14 +2354,16 @@ function useForm(opts) {
             ...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) || findHoistedPath(path);
-            const messages = (formResult.results[path] || { errors: [] }).errors;
-            const fieldResult = {
-                errors: messages,
-                valid: !messages.length,
-            };
+        const results = paths.reduce((validation, _path) => {
+            var _a;
+            const expectedPath = _path;
+            const pathState = findPathState(expectedPath) || findHoistedPath(expectedPath);
+            const messages = ((_a = formResult.results[expectedPath]) === null || _a === void 0 ? void 0 : _a.errors) || [];
+            // This is the real path of the field, because it might've been a hoisted field
+            const path = (toValue(pathState === null || pathState === void 0 ? void 0 : pathState.path) || expectedPath);
+            // It is possible that multiple paths are collected across loops
+            // We want to merge them to avoid overriding any iteration's results
+            const fieldResult = mergeValidationResults({ errors: messages, valid: !messages.length }, validation.results[path]);
             validation.results[path] = fieldResult;
             if (!fieldResult.valid) {
                 validation.errors[path] = fieldResult.errors[0];
@@ -2364,6 +2388,7 @@ function useForm(opts) {
             setFieldError(pathState, fieldResult.errors);
             return validation;
         }, { valid: formResult.valid, results: {}, errors: {} });
+        return results;
     });
     function mutateAllPathState(mutation) {
         pathStates.value.forEach(mutation);
@@ -2480,14 +2505,16 @@ function useForm(opts) {
             delete pathStateLookup.value[path];
         }
     }
-    function markForUnmount(path) {
-        return mutateAllPathState(s => {
-            if (s.path.startsWith(path)) {
-                keysOf(s.__flags.pendingUnmount).forEach(id => {
-                    s.__flags.pendingUnmount[id] = true;
-                });
+    function destroyPath(path) {
+        keysOf(pathStateLookup.value).forEach(key => {
+            if (key.startsWith(path)) {
+                delete pathStateLookup.value[key];
             }
         });
+        pathStates.value = pathStates.value.filter(s => !s.path.startsWith(path));
+        nextTick(() => {
+            rebuildPathLookup();
+        });
     }
     const formCtx = {
         formId,
@@ -2514,6 +2541,10 @@ function useForm(opts) {
         resetForm,
         resetField,
         handleSubmit,
+        useFieldModel,
+        defineInputBinds,
+        defineComponentBinds: defineComponentBinds,
+        defineField,
         stageInitialValue,
         unsetInitialValue,
         setFieldInitialValue,
@@ -2523,7 +2554,7 @@ function useForm(opts) {
         removePathState,
         initialValues: initialValues,
         getAllPathStates: () => pathStates.value,
-        markForUnmount,
+        destroyPath,
         isFieldTouched,
         isFieldDirty,
         isFieldValid,
@@ -2636,7 +2667,7 @@ function useForm(opts) {
      * Resets all fields
      */
     function resetForm(resetState, opts) {
-        let newValues = (resetState === null || resetState === void 0 ? void 0 : resetState.values) ? resetState.values : originalInitialValues.value;
+        let newValues = klona((resetState === null || resetState === void 0 ? void 0 : resetState.values) ? resetState.values : originalInitialValues.value);
         newValues = isTypedSchema(schema) && isCallable(schema.cast) ? schema.cast(newValues) : newValues;
         setInitialValues(newValues);
         mutateAllPathState(state => {
@@ -2792,7 +2823,8 @@ function useForm(opts) {
         });
     }
     function defineField(path, config) {
-        const pathState = (findPathState(toValue(path)) || createPathState(path));
+        const label = isCallable(config) ? undefined : config === null || config === void 0 ? void 0 : config.label;
+        const pathState = (findPathState(toValue(path)) || createPathState(path, { label }));
         const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
         function onBlur() {
             var _a;
@@ -2834,10 +2866,54 @@ function useForm(opts) {
             }
             return base;
         });
-        return [createModel(path, () => { var _a; return (_a = evalConfig().validateOnModelUpdate) !== null && _a !== void 0 ? _a : false; }), props];
+        const model = createModel(path, () => { var _a; return (_a = evalConfig().validateOnModelUpdate) !== null && _a !== void 0 ? _a : true; });
+        return [model, props];
+    }
+    function useFieldModel(pathOrPaths) {
+        if (!Array.isArray(pathOrPaths)) {
+            return createModel(pathOrPaths);
+        }
+        return pathOrPaths.map(p => createModel(p, true));
+    }
+    /**
+     * @deprecated use defineField instead
+     */
+    function defineInputBinds(path, config) {
+        const [model, props] = defineField(path, config);
+        function onBlur(e) {
+            props.value.onBlur(e);
+        }
+        function onInput(e) {
+            const value = normalizeEventValue(e);
+            setFieldValue(toValue(path), value, false);
+            props.value.onInput(e);
+        }
+        function onChange(e) {
+            const value = normalizeEventValue(e);
+            setFieldValue(toValue(path), value, false);
+            props.value.onChange(e);
+        }
+        return computed(() => {
+            return Object.assign(Object.assign({}, props.value), { onBlur,
+                onInput,
+                onChange, value: model.value });
+        });
+    }
+    /**
+     * @deprecated use defineField instead
+     */
+    function defineComponentBinds(path, config) {
+        const [model, props] = defineField(path, config);
+        const pathState = findPathState(toValue(path));
+        function onUpdateModelValue(value) {
+            model.value = value;
+        }
+        return computed(() => {
+            const conf = isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {};
+            return Object.assign({ [conf.model || 'modelValue']: model.value, [`onUpdate:${conf.model || 'modelValue'}`]: onUpdateModelValue }, props.value);
+        });
     }
-    return Object.assign(Object.assign({}, formCtx), { values: readonly(formValues), handleReset: () => resetForm(), submitForm,
-        defineField });
+    return Object.assign(Object.assign({}, formCtx), { values: readonly(formValues), handleReset: () => resetForm(), submitForm });
 }
 /**
  * Manages form meta aggregation
@@ -2875,7 +2951,6 @@ function useFormMeta(pathsState, currentValues, initialValues, errors) {
  */
 function useFormInitialValues(pathsState, formValues, opts) {
     const values = resolveInitialValues(opts);
-    const providedValues = opts === null || opts === void 0 ? void 0 : opts.initialValues;
     // these are the mutable initial values as the fields are mounted/unmounted
     const initialValues = ref(values);
     // these are the original initial value as provided by the user initially, they don't keep track of conditional fields
@@ -2903,21 +2978,21 @@ function useFormInitialValues(pathsState, formValues, opts) {
             setInPath(formValues, state.path, klona(newValue));
         });
     }
-    if (isRef(providedValues)) {
-        watch(providedValues, value => {
-            if (value) {
-                setInitialValues(value, true);
-            }
-        }, {
-            deep: true,
-        });
-    }
     return {
         initialValues,
         originalInitialValues,
         setInitialValues,
     };
 }
+function mergeValidationResults(a, b) {
+    if (!b) {
+        return a;
+    }
+    return {
+        valid: a.valid && b.valid,
+        errors: [...a.errors, ...b.errors],
+    };
+}
 
 const FormImpl = /** #__PURE__ */ defineComponent({
     name: 'Form',
@@ -2961,12 +3036,11 @@ const FormImpl = /** #__PURE__ */ defineComponent({
         },
     },
     setup(props, ctx) {
-        const initialValues = toRef(props, 'initialValues');
         const validationSchema = toRef(props, 'validationSchema');
         const keepValues = toRef(props, 'keepValues');
         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,
+            initialValues: props.initialValues,
             initialErrors: props.initialErrors,
             initialTouched: props.initialTouched,
             validateOnMount: props.validateOnMount,
@@ -3099,7 +3173,7 @@ function useFieldArray(arrayPath) {
     }
     let entryCounter = 0;
     function getCurrentValues() {
-        return getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []) || [];
+        return getFromPath(form === null || form === void 0 ? void 0 : form.values, toValue(arrayPath), []) || [];
     }
     function initFields() {
         const currentValues = getCurrentValues();
@@ -3130,7 +3204,7 @@ function useFieldArray(arrayPath) {
             key,
             value: computedDeep({
                 get() {
-                    const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, unref(arrayPath), []) || [];
+                    const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, toValue(arrayPath), []) || [];
                     const idx = fields.value.findIndex(e => e.key === key);
                     return idx === -1 ? value : currentValues[idx];
                 },
@@ -3144,7 +3218,7 @@ function useFieldArray(arrayPath) {
                     }
                     update(idx, value);
                 },
-            }),
+            }), // will be auto unwrapped
             isFirst: false,
             isLast: false,
         };
@@ -3156,7 +3230,7 @@ function useFieldArray(arrayPath) {
         form === null || form === void 0 ? void 0 : form.validate({ mode: 'silent' });
     }
     function remove(idx) {
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         if (!pathValue || !Array.isArray(pathValue)) {
             return;
@@ -3164,7 +3238,7 @@ function useFieldArray(arrayPath) {
         const newValue = [...pathValue];
         newValue.splice(idx, 1);
         const fieldPath = pathName + `[${idx}]`;
-        form.markForUnmount(fieldPath);
+        form.destroyPath(fieldPath);
         form.unsetInitialValue(fieldPath);
         setInPath(form.values, pathName, newValue);
         fields.value.splice(idx, 1);
@@ -3172,7 +3246,7 @@ function useFieldArray(arrayPath) {
     }
     function push(initialValue) {
         const value = klona(initialValue);
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
         if (!Array.isArray(normalizedPathValue)) {
@@ -3186,7 +3260,7 @@ function useFieldArray(arrayPath) {
         afterMutation();
     }
     function swap(indexA, indexB) {
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         if (!Array.isArray(pathValue) || !(indexA in pathValue) || !(indexB in pathValue)) {
             return;
@@ -3206,7 +3280,7 @@ function useFieldArray(arrayPath) {
     }
     function insert(idx, initialValue) {
         const value = klona(initialValue);
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         if (!Array.isArray(pathValue) || pathValue.length < idx) {
             return;
@@ -3220,14 +3294,14 @@ function useFieldArray(arrayPath) {
         afterMutation();
     }
     function replace(arr) {
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         form.stageInitialValue(pathName, arr);
         setInPath(form.values, pathName, arr);
         initFields();
         afterMutation();
     }
     function update(idx, value) {
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
             return;
@@ -3237,20 +3311,20 @@ function useFieldArray(arrayPath) {
     }
     function prepend(initialValue) {
         const value = klona(initialValue);
-        const pathName = unref(arrayPath);
+        const pathName = toValue(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.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
         setInPath(form.values, pathName, newValue);
+        form.stageInitialValue(pathName + `[0]`, value);
         fields.value.unshift(createEntry(value));
         afterMutation();
     }
     function move(oldIdx, newIdx) {
-        const pathName = unref(arrayPath);
+        const pathName = toValue(arrayPath);
         const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
         const newValue = isNullOrUndefined(pathValue) ? [] : [...pathValue];
         if (!Array.isArray(pathValue) || !(oldIdx in pathValue) || !(newIdx in pathValue)) {
@@ -3280,7 +3354,7 @@ function useFieldArray(arrayPath) {
     };
     form.fieldArrays.push(Object.assign({ path: arrayPath, reset: initFields }, fieldArrayCtx));
     onBeforeUnmount(() => {
-        const idx = form.fieldArrays.findIndex(i => unref(i.path) === unref(arrayPath));
+        const idx = form.fieldArrays.findIndex(i => toValue(i.path) === toValue(arrayPath));
         if (idx >= 0) {
             form.fieldArrays.splice(idx, 1);
         }
@@ -3307,7 +3381,7 @@ const FieldArrayImpl = /** #__PURE__ */ defineComponent({
         },
     },
     setup(props, ctx) {
-        const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(toRef(props, 'name'));
+        const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(() => props.name);
         function slotProps() {
             return {
                 fields: fields.value,
@@ -3772,4 +3846,4 @@ function useSetFormValues() {
     return setFormValues;
 }
 
-export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, configure, defineRule, normalizeRules, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useIsValidating, useResetForm, useSetFieldError, useSetFieldTouched, useSetFieldValue, useSetFormErrors, useSetFormTouched, useSetFormValues, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate, validateObjectSchema as validateObject };
+export { ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, cleanupNonNestedPath, configure, defineRule, isNotNestedPath, normalizeRules, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useIsValidating, useResetForm, useSetFieldError, useSetFieldTouched, useSetFieldValue, useSetFormErrors, useSetFormTouched, useSetFormValues, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate, validateObjectSchema as validateObject };