vft 0.0.524 → 0.0.525

package/lib/components/form/form-item.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,335 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../hooks/use-namespace/index.cjs");
+const require_index$1 = require("../../hooks/use-id/index.cjs");
+const require_helper = require("../../utils/helper.cjs");
+const require_constants = require("./constants.cjs");
+const require_use_form_common_props = require("./hooks/use-form-common-props.cjs");
+const require_form_label_wrap = require("./form-label-wrap.cjs");
+let _vft_utils = require("@vft/utils");
+let _vueuse_core = require("@vueuse/core");
+let lodash_es = require("lodash-es");
+let vue = require("vue");
+let async_validator = require("async-validator");
+async_validator = require_runtime.__toESM(async_validator);
+//#region ../../packages/components/form/form-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["role", "aria-labelledby"];
+const __default__ = (0, vue.defineComponent)({ name: "vft-form-item" });
+var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	...__default__,
+	props: {
+		label: {
+			type: String,
+			required: false
+		},
+		labelWidth: {
+			type: [String, Number],
+			required: false,
+			default: ""
+		},
+		labelPosition: {
+			type: String,
+			required: false
+		},
+		prop: {
+			type: [String, Array],
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rules: {
+			type: null,
+			required: false
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		for: {
+			type: String,
+			required: false
+		},
+		validateStatus: {
+			type: String,
+			required: false
+		},
+		inlineMessage: {
+			type: [String, Boolean],
+			required: false,
+			default: ""
+		},
+		showMessage: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		hideRequiredAsterisk: {
+			type: Boolean,
+			required: false
+		},
+		hideLabel: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:error"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const formContext = (0, vue.inject)(require_constants.formContextKey, void 0);
+		const parentFormItemContext = (0, vue.inject)(require_constants.formItemContextKey, void 0);
+		const _size = require_use_form_common_props.useFormSize(void 0, { formItem: false });
+		const ns = require_index.useNamespace("form-item");
+		const labelId = require_index$1.useId().value;
+		const inputIds = (0, vue.ref)([]);
+		const validateState = (0, vue.ref)("");
+		const validateStateDebounced = (0, _vueuse_core.refDebounced)(validateState, 100);
+		const validateMessage = (0, vue.ref)("");
+		const formItemRef = (0, vue.ref)();
+		let initialValue;
+		let isResettingField = false;
+		const labelPosition = (0, vue.computed)(() => props.labelPosition || formContext?.labelPosition);
+		const labelStyle = (0, vue.computed)(() => {
+			if (labelPosition.value === "top") return {};
+			const labelWidth = require_helper.addUnit(props.labelWidth || formContext?.labelWidth || "");
+			if (labelWidth) return { width: labelWidth };
+			return {};
+		});
+		const contentStyle = (0, vue.computed)(() => {
+			if (labelPosition.value === "top" || formContext?.inline) return {};
+			if (!props.label && !props.labelWidth && isNested) return {};
+			const labelWidth = require_helper.addUnit(props.labelWidth || formContext?.labelWidth || "");
+			if (!props.label && !slots.label) return { marginLeft: labelWidth };
+			return {};
+		});
+		const formItemClasses = (0, vue.computed)(() => [
+			ns.b(),
+			ns.m(_size.value),
+			ns.is("error", validateState.value === "error"),
+			ns.is("validating", validateState.value === "validating"),
+			ns.is("success", validateState.value === "success"),
+			ns.is("required", isRequired.value || props.required),
+			ns.is("no-asterisk", props?.hideRequiredAsterisk || formContext?.hideRequiredAsterisk),
+			formContext?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
+			{
+				[ns.m("feedback")]: formContext?.statusIcon,
+				[ns.m(`label-${labelPosition.value}`)]: labelPosition.value
+			}
+		]);
+		const _inlineMessage = (0, vue.computed)(() => (0, _vft_utils.isBoolean)(props.inlineMessage) ? props.inlineMessage : formContext?.inlineMessage || false);
+		const validateClasses = (0, vue.computed)(() => [ns.e("error"), { [ns.em("error", "inline")]: _inlineMessage.value }]);
+		const propString = (0, vue.computed)(() => {
+			if (!props.prop) return "";
+			return (0, lodash_es.isArray)(props.prop) ? props.prop.join(".") : props.prop;
+		});
+		const hasLabel = (0, vue.computed)(() => {
+			return !!(props.label || slots.label);
+		});
+		const labelFor = (0, vue.computed)(() => {
+			return props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : void 0);
+		});
+		const isGroup = (0, vue.computed)(() => {
+			return !labelFor.value && hasLabel.value;
+		});
+		const isNested = !!parentFormItemContext;
+		const fieldValue = (0, vue.computed)(() => {
+			const model = formContext?.model;
+			if (!model || !props.prop) return;
+			return (0, _vft_utils.getProp)(model, props.prop).value;
+		});
+		const normalizedRules = (0, vue.computed)(() => {
+			const { required } = props;
+			const rules = [];
+			if (props.rules) rules.push(...require_helper.castArray(props.rules).map((item) => {
+				item.trigger = item.trigger || "blur";
+				return item;
+			}));
+			const formRules = formContext?.rules;
+			if (formRules && props.prop) {
+				const _rules = (0, _vft_utils.getProp)(formRules, props.prop).value;
+				if (_rules) rules.push(...require_helper.castArray(_rules));
+			}
+			if (required !== void 0) {
+				const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required"));
+				if (requiredRules.length > 0) for (const [rule, i] of requiredRules) {
+					if (rule.required === required) continue;
+					rules[i] = {
+						...rule,
+						required
+					};
+				}
+				else rules.push({ required });
+			}
+			return rules;
+		});
+		const validateEnabled = (0, vue.computed)(() => normalizedRules.value.length > 0);
+		const getFilteredRule = (trigger) => {
+			return normalizedRules.value.filter((rule) => {
+				if (!rule.trigger || !trigger) return true;
+				if ((0, lodash_es.isArray)(rule.trigger)) return rule.trigger.includes(trigger);
+				else return rule.trigger === trigger;
+			}).map(({ trigger, ...rule }) => rule);
+		};
+		const isRequired = (0, vue.computed)(() => normalizedRules.value.some((rule) => rule.required));
+		const shouldShowError = (0, vue.computed)(() => validateStateDebounced.value === "error" && props.showMessage && (formContext?.showMessage ?? true));
+		const currentLabel = (0, vue.computed)(() => `${props.label || ""}${formContext?.labelSuffix || ""}`);
+		const setValidationState = (state) => {
+			validateState.value = state;
+		};
+		const onValidationFailed = (error) => {
+			const { errors, fields } = error;
+			if (!errors || !fields) console.error(error);
+			setValidationState("error");
+			validateMessage.value = errors ? errors?.[0]?.message ?? `${props.prop} is required` : "";
+			formContext?.emit("validate", props.prop, false, validateMessage.value);
+		};
+		const onValidationSucceeded = () => {
+			setValidationState("success");
+			formContext?.emit("validate", props.prop, true, "");
+		};
+		const doValidate = async (rules) => {
+			const modelName = propString.value;
+			return new async_validator.default({ [modelName]: rules }).validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => {
+				onValidationSucceeded();
+				return true;
+			}).catch((err) => {
+				onValidationFailed(err);
+				return Promise.reject(err);
+			});
+		};
+		const validate = async (trigger, callback) => {
+			if (isResettingField || !props.prop) return false;
+			const hasCallback = (0, _vft_utils.isFunction)(callback);
+			if (!validateEnabled.value) {
+				callback?.(false);
+				return false;
+			}
+			const rules = getFilteredRule(trigger);
+			if (rules.length === 0) {
+				callback?.(true);
+				return true;
+			}
+			setValidationState("validating");
+			return doValidate(rules).then(() => {
+				callback?.(true);
+				return true;
+			}).catch((err) => {
+				const { fields } = err;
+				callback?.(false, fields);
+				return hasCallback ? false : Promise.reject(fields);
+			});
+		};
+		const clearValidate = () => {
+			if (props.error) emit("update:error", "");
+			setValidationState("");
+			validateMessage.value = "";
+			isResettingField = false;
+		};
+		const resetField = async () => {
+			const model = formContext?.model;
+			if (!model || !props.prop) return;
+			const computedValue = (0, _vft_utils.getProp)(model, props.prop);
+			isResettingField = true;
+			computedValue.value = (0, lodash_es.clone)(initialValue);
+			await (0, vue.nextTick)();
+			clearValidate();
+			isResettingField = false;
+		};
+		const addInputId = (id) => {
+			if (!inputIds.value.includes(id)) inputIds.value.push(id);
+		};
+		const removeInputId = (id) => {
+			inputIds.value = inputIds.value.filter((listId) => listId !== id);
+		};
+		(0, vue.watch)(() => props.error, (val) => {
+			validateMessage.value = val || "";
+			setValidationState(val ? "error" : "");
+		}, { immediate: true });
+		(0, vue.watch)(() => props.validateStatus, (val) => setValidationState(val || ""));
+		const context = (0, vue.reactive)({
+			...(0, vue.toRefs)(props),
+			$el: formItemRef,
+			size: _size,
+			validateMessage,
+			validateState,
+			labelId,
+			inputIds,
+			isGroup,
+			hasLabel,
+			fieldValue,
+			addInputId,
+			removeInputId,
+			resetField,
+			clearValidate,
+			validate,
+			propString
+		});
+		(0, vue.provide)(require_constants.formItemContextKey, context);
+		(0, vue.onMounted)(() => {
+			if (props.prop) {
+				formContext?.addField(context);
+				initialValue = (0, lodash_es.clone)(fieldValue.value);
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			formContext?.removeField(context);
+		});
+		__expose({
+			size: _size,
+			validateMessage,
+			validateState,
+			validate,
+			clearValidate,
+			resetField
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "formItemRef",
+				ref: formItemRef,
+				class: (0, vue.normalizeClass)(formItemClasses.value),
+				role: isGroup.value ? "group" : void 0,
+				"aria-labelledby": isGroup.value ? (0, vue.unref)(labelId) : void 0
+			}, [!__props.hideLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_form_label_wrap.default), {
+				key: 0,
+				"is-auto-width": labelStyle.value.width === "auto",
+				"update-all": (0, vue.unref)(formContext)?.labelWidth === "auto"
+			}, {
+				default: (0, vue.withCtx)(() => [hasLabel.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(labelFor.value ? "label" : "div"), {
+					key: 0,
+					id: (0, vue.unref)(labelId),
+					for: labelFor.value,
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("label")),
+					style: (0, vue.normalizeStyle)(labelStyle.value)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", { label: currentLabel.value }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(currentLabel.value), 1)])]),
+					_: 3
+				}, 8, [
+					"id",
+					"for",
+					"class",
+					"style"
+				])) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 3
+			}, 8, ["is-auto-width", "update-all"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content")),
+				style: (0, vue.normalizeStyle)(contentStyle.value)
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createVNode)(vue.TransitionGroup, { name: `${(0, vue.unref)(ns).namespace.value}-zoom-in-top` }, {
+				default: (0, vue.withCtx)(() => [shouldShowError.value ? (0, vue.renderSlot)(_ctx.$slots, "error", {
+					key: 0,
+					error: validateMessage.value
+				}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(validateClasses.value) }, (0, vue.toDisplayString)(validateMessage.value), 3)]) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 3
+			}, 8, ["name"])], 6)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+exports.default = form_item_vue_vue_type_script_setup_true_lang_default;

package/lib/components/form/form-label-wrap.cjs

@@ -1 +1,69 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("@vueuse/core");require("@vft/utils");const q=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");require("./index.cjs");const L=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const m=require("./constants.cjs"),h="VftLabelWrap",C=e.defineComponent({name:h,props:{isAutoWidth:Boolean,updateAll:Boolean},setup(l,{slots:o}){const n=e.inject(m.formContextKey,void 0),u=e.inject(m.formItemContextKey);u||q.throwError(h,"usage: <vft-form-item><label-wrap /></vft-form-item>");const b=L.useNamespace("form"),r=e.ref(),a=e.ref(0),p=()=>{if(r.value?.firstElementChild){const t=window.getComputedStyle(r.value.firstElementChild).width;return Math.ceil(Number.parseFloat(t))}else return 0},d=(t="update")=>{e.nextTick(()=>{o.default&&l.isAutoWidth&&(t==="update"?a.value=p():t==="remove"&&n?.deregisterLabelWidth(a.value))})},s=()=>d("update");return e.onMounted(()=>{s()}),e.onBeforeUnmount(()=>{d("remove")}),e.onUpdated(()=>s()),e.watch(a,(t,i)=>{l.updateAll&&n?.registerLabelWidth(t,i)}),g.useResizeObserver(e.computed(()=>r.value?.firstElementChild??null),s),()=>{if(!o)return null;const{isAutoWidth:t}=l;if(t){const i=n?.autoLabelWidth,v=u?.hasLabel,c={};if(v&&i&&i!=="auto"){const f=Math.max(0,Number.parseInt(i,10)-a.value),W=(u.labelPosition||n.labelPosition)==="left"?"marginRight":"marginLeft";f&&(c[W]=`${f}px`)}return e.createVNode("div",{ref:r,class:[b.be("item","label-wrap")],style:c},[o.default?.()])}else return e.createVNode(e.Fragment,{ref:r},[o.default?.()])}}});exports.default=C;
+const require_error = require("../../utils/error.cjs");
+const require_index = require("../../hooks/use-namespace/index.cjs");
+const require_constants = require("./constants.cjs");
+let _vueuse_core = require("@vueuse/core");
+let vue = require("vue");
+//#region ../../packages/components/form/form-label-wrap.tsx
+const COMPONENT_NAME = "VftLabelWrap";
+var form_label_wrap_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: COMPONENT_NAME,
+	props: {
+		isAutoWidth: Boolean,
+		updateAll: Boolean
+	},
+	setup(props, { slots }) {
+		const formContext = (0, vue.inject)(require_constants.formContextKey, void 0);
+		const formItemContext = (0, vue.inject)(require_constants.formItemContextKey);
+		if (!formItemContext) require_error.throwError(COMPONENT_NAME, "usage: <vft-form-item><label-wrap /></vft-form-item>");
+		const ns = require_index.useNamespace("form");
+		const el = (0, vue.ref)();
+		const computedWidth = (0, vue.ref)(0);
+		const getLabelWidth = () => {
+			if (el.value?.firstElementChild) {
+				const width = window.getComputedStyle(el.value.firstElementChild).width;
+				return Math.ceil(Number.parseFloat(width));
+			} else return 0;
+		};
+		const updateLabelWidth = (action = "update") => {
+			(0, vue.nextTick)(() => {
+				if (slots.default && props.isAutoWidth) {
+					if (action === "update") computedWidth.value = getLabelWidth();
+					else if (action === "remove") formContext?.deregisterLabelWidth(computedWidth.value);
+				}
+			});
+		};
+		const updateLabelWidthFn = () => updateLabelWidth("update");
+		(0, vue.onMounted)(() => {
+			updateLabelWidthFn();
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			updateLabelWidth("remove");
+		});
+		(0, vue.onUpdated)(() => updateLabelWidthFn());
+		(0, vue.watch)(computedWidth, (val, oldVal) => {
+			if (props.updateAll) formContext?.registerLabelWidth(val, oldVal);
+		});
+		(0, _vueuse_core.useResizeObserver)((0, vue.computed)(() => el.value?.firstElementChild ?? null), updateLabelWidthFn);
+		return () => {
+			if (!slots) return null;
+			const { isAutoWidth } = props;
+			if (isAutoWidth) {
+				const autoLabelWidth = formContext?.autoLabelWidth;
+				const hasLabel = formItemContext?.hasLabel;
+				const style = {};
+				if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
+					const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
+					const marginPosition = (formItemContext.labelPosition || formContext.labelPosition) === "left" ? "marginRight" : "marginLeft";
+					if (marginWidth) style[marginPosition] = `${marginWidth}px`;
+				}
+				return (0, vue.createVNode)("div", {
+					"ref": el,
+					"class": [ns.be("item", "label-wrap")],
+					"style": style
+				}, [slots.default?.()]);
+			} else return (0, vue.createVNode)(vue.Fragment, { "ref": el }, [slots.default?.()]);
+		};
+	}
+});
+//#endregion
+exports.default = form_label_wrap_default;

package/lib/components/form/form.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region ../../packages/components/form/form.vue
+var form_default = require("./form.vue_vue_type_script_setup_true_lang.cjs").default;
+//#endregion
+exports.default = form_default;

package/lib/components/form/form.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,226 @@
+const require_error = require("../../utils/error.cjs");
+const require_index = require("../../hooks/use-namespace/index.cjs");
+const require_constants = require("./constants.cjs");
+const require_use_form_common_props = require("./hooks/use-form-common-props.cjs");
+const require_utils = require("./utils.cjs");
+let _vft_utils = require("@vft/utils");
+let vue = require("vue");
+//#region ../../packages/components/form/form.vue?vue&type=script&setup=true&lang.ts
+const __default__ = (0, vue.defineComponent)({ name: "vft-form" });
+var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	...__default__,
+	props: {
+		size: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: false
+		},
+		rules: {
+			type: Object,
+			required: false
+		},
+		labelPosition: {
+			type: String,
+			required: false,
+			default: "right"
+		},
+		requireAsteriskPosition: {
+			type: String,
+			required: false,
+			default: "left"
+		},
+		labelWidth: {
+			type: [String, Number],
+			required: false,
+			default: ""
+		},
+		labelSuffix: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		},
+		inlineMessage: {
+			type: Boolean,
+			required: false
+		},
+		statusIcon: {
+			type: Boolean,
+			required: false
+		},
+		showMessage: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		validateOnRuleChange: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		hideRequiredAsterisk: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		scrollToError: {
+			type: Boolean,
+			required: false
+		},
+		scrollIntoViewOptions: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: ["validate"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const instance = (0, vue.getCurrentInstance)();
+		const formRef = (0, vue.ref)();
+		const fields = (0, vue.reactive)([]);
+		const formSize = require_use_form_common_props.useFormSize();
+		const ns = require_index.useNamespace("form");
+		const formClasses = (0, vue.computed)(() => {
+			return [
+				ns.b(),
+				ns.m(formSize.value || "default"),
+				{
+					[ns.m(`label-${__props.labelPosition}`)]: __props.labelPosition,
+					[ns.m("inline")]: __props.inline
+				}
+			];
+		});
+		const getField = (prop) => {
+			return require_utils.filterFields(fields, [prop])[0];
+		};
+		const addField = (field) => {
+			fields.push(field);
+		};
+		const removeField = (field) => {
+			if (field.prop) fields.splice(fields.indexOf(field), 1);
+		};
+		const resetFields = (properties = []) => {
+			if (!__props.model) {
+				require_error.debugWarn(ns.b(), "model is required for resetFields to work.");
+				return;
+			}
+			require_utils.filterFields(fields, properties).forEach((field) => field.resetField());
+		};
+		const clearValidate = (props = []) => {
+			require_utils.filterFields(fields, props).forEach((field) => field.clearValidate());
+		};
+		const isValidatable = (0, vue.computed)(() => {
+			const hasModel = !!__props.model;
+			if (!hasModel) require_error.debugWarn(ns.b(), "model is required for validate to work.");
+			return hasModel;
+		});
+		const obtainValidateFields = (props) => {
+			if (fields.length === 0) return [];
+			const filteredFields = require_utils.filterFields(fields, props);
+			if (!filteredFields.length) {
+				require_error.debugWarn(ns.b(), "please pass correct props!");
+				return [];
+			}
+			return filteredFields;
+		};
+		const validate = async (props, callback) => validateField(props || void 0, callback);
+		const doValidateField = async (props = []) => {
+			if (!isValidatable.value) return false;
+			const fields = obtainValidateFields(props);
+			if (fields.length === 0) return true;
+			let validationErrors = {};
+			for (const field of fields) try {
+				await field.validate("");
+				if (field.validateState === "error") field.resetField();
+			} catch (fields) {
+				validationErrors = {
+					...validationErrors,
+					...fields
+				};
+			}
+			if (Object.keys(validationErrors).length === 0) return true;
+			return Promise.reject(validationErrors);
+		};
+		const validateField = async (modelProps = [], callback) => {
+			let result = false;
+			const shouldThrow = !(0, _vft_utils.isFunction)(callback);
+			try {
+				result = await doValidateField(modelProps);
+				if (result === true) await callback?.(result);
+				return __props.model;
+			} catch (e) {
+				if (e instanceof Error) throw e;
+				const invalidFields = e;
+				if (__props.scrollToError) {
+					if (formRef.value) formRef.value.querySelector(`.${ns.b()}-item.is-error`)?.scrollIntoView(__props.scrollIntoViewOptions);
+				}
+				console.error(e);
+				!result && await callback?.(false, invalidFields);
+				return shouldThrow && Promise.reject(invalidFields);
+			}
+		};
+		const scrollToField = (prop) => {
+			const field = getField(prop);
+			if (field) field.$el?.scrollIntoView(__props.scrollIntoViewOptions);
+		};
+		(0, vue.watch)(() => __props.rules, () => {
+			if (__props.validateOnRuleChange) validate().catch((err) => require_error.debugWarn(err));
+		}, {
+			deep: true,
+			flush: "post"
+		});
+		(0, vue.provide)(require_constants.formContextKey, (0, vue.reactive)({
+			...(0, vue.toRefs)(instance.props),
+			emit,
+			resetFields,
+			clearValidate,
+			validateField,
+			getField,
+			addField,
+			removeField,
+			...require_utils.useFormLabelWidth()
+		}));
+		__expose({
+			/**
+			* @description Validate the whole form. Receives a callback or returns `Promise`.
+			*/
+			validate,
+			/**
+			* @description Validate specified fields.
+			*/
+			validateField,
+			/**
+			* @description Reset specified fields and remove validation result.
+			*/
+			resetFields,
+			/**
+			* @description Clear validation message for specified fields.
+			*/
+			clearValidate,
+			/**
+			* @description Scroll to the specified fields.
+			*/
+			scrollToField
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("form", {
+				ref_key: "formRef",
+				ref: formRef,
+				class: (0, vue.normalizeClass)(formClasses.value)
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+exports.default = form_vue_vue_type_script_setup_true_lang_default;

package/lib/components/form/hooks/index.cjs

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-form-common-props.cjs"),s=require("./use-form-item.cjs");exports.useDisabled=e.useDisabled;exports.useFormDisabled=e.useFormDisabled;exports.useFormSize=e.useFormSize;exports.useSize=e.useSize;exports.useFormItem=s.useFormItem;exports.useFormItemInputId=s.useFormItemInputId;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_use_form_common_props = require("./use-form-common-props.cjs");
+const require_use_form_item = require("./use-form-item.cjs");
+exports.useDisabled = require_use_form_common_props.useDisabled;
+exports.useFormDisabled = require_use_form_common_props.useFormDisabled;
+exports.useFormItem = require_use_form_item.useFormItem;
+exports.useFormItemInputId = require_use_form_item.useFormItemInputId;
+exports.useFormSize = require_use_form_common_props.useFormSize;
+exports.useSize = require_use_form_common_props.useSize;

package/lib/components/form/hooks/use-form-common-props.cjs

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@vueuse/core");require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");const e=require("vue");require("lodash-es");require("../index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");const a=require("../../../hooks/use-size/index.cjs");require("../../../hooks/use-z-index/index.cjs");const t=require("@vft/use"),i=require("../constants.cjs"),u=(s,o={})=>{const r=e.ref(void 0),c=o.prop?r:t.useProp("size"),d=o.global?r:a.useGlobalSize(),l=o.form?{size:void 0}:e.inject(i.formContextKey,void 0),m=o.formItem?{size:void 0}:e.inject(i.formItemContextKey,void 0);return e.computed(()=>c.value||e.unref(s)||m?.size||l?.size||d.value||"")},n=s=>{const o=t.useProp("disabled"),r=e.inject(i.formContextKey,void 0);return e.computed(()=>o.value||e.unref(s)||r?.disabled||!1)},f=u,b=n;exports.useDisabled=b;exports.useFormDisabled=n;exports.useFormSize=u;exports.useSize=f;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_index = require("../../../hooks/use-size/index.cjs");
+const require_constants = require("../constants.cjs");
+let vue = require("vue");
+let _vft_use = require("@vft/use");
+//#region ../../packages/components/form/hooks/use-form-common-props.ts
+const useFormSize = (fallback, ignore = {}) => {
+	const emptyRef = (0, vue.ref)(void 0);
+	const size = ignore.prop ? emptyRef : (0, _vft_use.useProp)("size");
+	const globalConfig = ignore.global ? emptyRef : require_index.useGlobalSize();
+	const form = ignore.form ? { size: void 0 } : (0, vue.inject)(require_constants.formContextKey, void 0);
+	const formItem = ignore.formItem ? { size: void 0 } : (0, vue.inject)(require_constants.formItemContextKey, void 0);
+	return (0, vue.computed)(() => size.value || (0, vue.unref)(fallback) || formItem?.size || form?.size || globalConfig.value || "");
+};
+const useFormDisabled = (fallback) => {
+	const disabled = (0, _vft_use.useProp)("disabled");
+	const form = (0, vue.inject)(require_constants.formContextKey, void 0);
+	return (0, vue.computed)(() => disabled.value || (0, vue.unref)(fallback) || form?.disabled || false);
+};
+const useSize = useFormSize;
+const useDisabled = useFormDisabled;
+//#endregion
+exports.useDisabled = useDisabled;
+exports.useFormDisabled = useFormDisabled;
+exports.useFormSize = useFormSize;
+exports.useSize = useSize;