vee-validate 4.12.0-alpha.1 → 4.12.0

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.12.0-alpha.1
+  * vee-validate v4.12.0
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
@@ -487,8 +487,7 @@
                 return result;
             }
             latestRun = undefined;
-            onDone(result, args);
-            return result;
+            return onDone(result, args);
         };
     }
     function computedDeep({ get, set }) {
@@ -990,7 +989,7 @@
         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) {
@@ -1022,6 +1021,7 @@
             label: init.label,
             type: init.type,
             validate: init.validate,
+            schema: init.schema,
         });
         const errors = vue.computed(() => state.errors);
         function setState(state) {
@@ -1117,11 +1117,14 @@
     /**
      * 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 = vue.reactive({
             touched: false,
             pending: false,
             valid: true,
+            required: isRequired,
             validated: !!vue.unref(errors).length,
             initialValue: vue.computed(() => vue.unref(initialValue)),
             dirty: vue.computed(() => {
@@ -1184,6 +1187,7 @@
             label,
             type,
             validate: validator.value ? validate$1 : undefined,
+            schema: isTypedSchema(rules) ? rules : undefined,
         });
         const errorMessage = vue.computed(() => errors.value[0]);
         if (syncVModel) {
@@ -1206,7 +1210,8 @@
         async function validateCurrentValue(mode) {
             var _a, _b;
             if (form === null || form === void 0 ? void 0 : form.validateSchema) {
-                return (_a = (await form.validateSchema(mode)).results[vue.toValue(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
+                const { results } = await form.validateSchema(mode);
+                return (_a = results[vue.toValue(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
             }
             if (validator.value) {
                 return validate(value.value, validator.value, {
@@ -1224,7 +1229,7 @@
             return validateCurrentValue('validated-only');
         }, result => {
             if (flags.pendingUnmount[field.id]) {
-                return;
+                return result;
             }
             setState({ errors: result.errors });
             meta.pending = false;
@@ -1660,6 +1665,10 @@
                 };
             }
             ctx.expose({
+                value,
+                meta,
+                errors,
+                errorMessage,
                 setErrors,
                 setTouched,
                 reset: resetField,
@@ -1706,7 +1715,7 @@
     let FORM_COUNTER = 0;
     const PRIVATE_PATH_STATE_KEYS = ['bails', 'fieldsCount', 'id', 'multiple', 'type', 'validate'];
     function resolveInitialValues(opts) {
-        const providedValues = vue.unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
+        const providedValues = (opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
         const schema = vue.unref(opts === null || opts === void 0 ? void 0 : opts.validationSchema);
         if (schema && isTypedSchema(schema) && isCallable(schema.cast)) {
             return klona(schema.cast(providedValues) || {});
@@ -1824,10 +1833,9 @@
             var _a, _b;
             const initialValue = vue.computed(() => getFromPath(initialValues.value, vue.toValue(path)));
             const pathStateExists = pathStateLookup.value[vue.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);
@@ -1841,6 +1849,17 @@
             }
             const currentValue = vue.computed(() => getFromPath(formValues, vue.toValue(path)));
             const pathValue = vue.toValue(path);
+            const isRequired = vue.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, vue.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 = vue.reactive({
                 id,
@@ -1849,6 +1868,7 @@
                 pending: false,
                 valid: true,
                 validated: !!((_a = initialErrors[pathValue]) === null || _a === void 0 ? void 0 : _a.length),
+                required: isRequired,
                 initialValue,
                 errors: vue.shallowRef([]),
                 bails: (_b = config === null || config === void 0 ? void 0 : config.bails) !== null && _b !== void 0 ? _b : false,
@@ -1894,7 +1914,9 @@
         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
@@ -1905,14 +1927,16 @@
                 ...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 = (vue.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];
@@ -1937,6 +1961,7 @@
                 setFieldError(pathState, fieldResult.errors);
                 return validation;
             }, { valid: formResult.valid, results: {}, errors: {} });
+            return results;
         });
         function mutateAllPathState(mutation) {
             pathStates.value.forEach(mutation);
@@ -2053,14 +2078,16 @@
                 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));
+            vue.nextTick(() => {
+                rebuildPathLookup();
+            });
         }
         const formCtx = {
             formId,
@@ -2087,6 +2114,10 @@
             resetForm,
             resetField,
             handleSubmit,
+            useFieldModel,
+            defineInputBinds,
+            defineComponentBinds: defineComponentBinds,
+            defineField,
             stageInitialValue,
             unsetInitialValue,
             setFieldInitialValue,
@@ -2096,7 +2127,7 @@
             removePathState,
             initialValues: initialValues,
             getAllPathStates: () => pathStates.value,
-            markForUnmount,
+            destroyPath,
             isFieldTouched,
             isFieldDirty,
             isFieldValid,
@@ -2209,7 +2240,7 @@
          * 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 => {
@@ -2354,7 +2385,8 @@
         // Provide injections
         vue.provide(FormContextKey, formCtx);
         function defineField(path, config) {
-            const pathState = (findPathState(vue.toValue(path)) || createPathState(path));
+            const label = isCallable(config) ? undefined : config === null || config === void 0 ? void 0 : config.label;
+            const pathState = (findPathState(vue.toValue(path)) || createPathState(path, { label }));
             const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
             function onBlur() {
                 var _a;
@@ -2396,10 +2428,54 @@
                 }
                 return base;
             });
-            return [createModel(path, () => { var _a; return (_a = evalConfig().validateOnModelUpdate) !== null && _a !== void 0 ? _a : true; }), 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(vue.toValue(path), value, false);
+                props.value.onInput(e);
+            }
+            function onChange(e) {
+                const value = normalizeEventValue(e);
+                setFieldValue(vue.toValue(path), value, false);
+                props.value.onChange(e);
+            }
+            return vue.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(vue.toValue(path));
+            function onUpdateModelValue(value) {
+                model.value = value;
+            }
+            return vue.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: vue.readonly(formValues), handleReset: () => resetForm(), submitForm,
-            defineField });
+        return Object.assign(Object.assign({}, formCtx), { values: vue.readonly(formValues), handleReset: () => resetForm(), submitForm });
     }
     /**
      * Manages form meta aggregation
@@ -2437,7 +2513,6 @@
      */
     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 = vue.ref(values);
         // these are the original initial value as provided by the user initially, they don't keep track of conditional fields
@@ -2465,21 +2540,21 @@
                 setInPath(formValues, state.path, klona(newValue));
             });
         }
-        if (vue.isRef(providedValues)) {
-            vue.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__ */ vue.defineComponent({
         name: 'Form',
@@ -2523,12 +2598,11 @@
             },
         },
         setup(props, ctx) {
-            const initialValues = vue.toRef(props, 'initialValues');
             const validationSchema = vue.toRef(props, 'validationSchema');
             const keepValues = vue.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,
@@ -2655,7 +2729,7 @@
         }
         let entryCounter = 0;
         function getCurrentValues() {
-            return getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []) || [];
+            return getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.toValue(arrayPath), []) || [];
         }
         function initFields() {
             const currentValues = getCurrentValues();
@@ -2686,7 +2760,7 @@
                 key,
                 value: computedDeep({
                     get() {
-                        const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.unref(arrayPath), []) || [];
+                        const currentValues = getFromPath(form === null || form === void 0 ? void 0 : form.values, vue.toValue(arrayPath), []) || [];
                         const idx = fields.value.findIndex(e => e.key === key);
                         return idx === -1 ? value : currentValues[idx];
                     },
@@ -2697,7 +2771,7 @@
                         }
                         update(idx, value);
                     },
-                }),
+                }), // will be auto unwrapped
                 isFirst: false,
                 isLast: false,
             };
@@ -2709,7 +2783,7 @@
             form === null || form === void 0 ? void 0 : form.validate({ mode: 'silent' });
         }
         function remove(idx) {
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.toValue(arrayPath);
             const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
             if (!pathValue || !Array.isArray(pathValue)) {
                 return;
@@ -2717,7 +2791,7 @@
             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);
@@ -2725,7 +2799,7 @@
         }
         function push(initialValue) {
             const value = klona(initialValue);
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.toValue(arrayPath);
             const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
             const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
             if (!Array.isArray(normalizedPathValue)) {
@@ -2739,7 +2813,7 @@
             afterMutation();
         }
         function swap(indexA, indexB) {
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.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;
@@ -2759,7 +2833,7 @@
         }
         function insert(idx, initialValue) {
             const value = klona(initialValue);
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.toValue(arrayPath);
             const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
             if (!Array.isArray(pathValue) || pathValue.length < idx) {
                 return;
@@ -2773,14 +2847,14 @@
             afterMutation();
         }
         function replace(arr) {
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.toValue(arrayPath);
             form.stageInitialValue(pathName, arr);
             setInPath(form.values, pathName, arr);
             initFields();
             afterMutation();
         }
         function update(idx, value) {
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.toValue(arrayPath);
             const pathValue = getFromPath(form === null || form === void 0 ? void 0 : form.values, pathName);
             if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
                 return;
@@ -2790,20 +2864,20 @@
         }
         function prepend(initialValue) {
             const value = klona(initialValue);
-            const pathName = vue.unref(arrayPath);
+            const pathName = vue.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 = vue.unref(arrayPath);
+            const pathName = vue.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)) {
@@ -2833,7 +2907,7 @@
         };
         form.fieldArrays.push(Object.assign({ path: arrayPath, reset: initFields }, fieldArrayCtx));
         vue.onBeforeUnmount(() => {
-            const idx = form.fieldArrays.findIndex(i => vue.unref(i.path) === vue.unref(arrayPath));
+            const idx = form.fieldArrays.findIndex(i => vue.toValue(i.path) === vue.toValue(arrayPath));
             if (idx >= 0) {
                 form.fieldArrays.splice(idx, 1);
             }
@@ -2860,7 +2934,7 @@
             },
         },
         setup(props, ctx) {
-            const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(vue.toRef(props, 'name'));
+            const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(() => props.name);
             function slotProps() {
                 return {
                     fields: fields.value,
@@ -3256,8 +3330,10 @@
     exports.Form = Form;
     exports.FormContextKey = FormContextKey;
     exports.IS_ABSENT = IS_ABSENT;
+    exports.cleanupNonNestedPath = cleanupNonNestedPath;
     exports.configure = configure;
     exports.defineRule = defineRule;
+    exports.isNotNestedPath = isNotNestedPath;
     exports.normalizeRules = normalizeRules;
     exports.useField = useField;
     exports.useFieldArray = useFieldArray;