duck-vue-components 0.1.8 → 0.1.9

package/dist/{controls-CXpx_MLk.cjs → controls-B7qU1vjR.cjs}

@@ -2,6 +2,7 @@ const require_chunk = require("./chunk-CZWwpsFl.cjs");
 const require_utils = require("./utils-D8ZjYN3B.cjs");
 const require_locale = require("./locale-DTHxb_wp.cjs");
 const require_stores = require("./stores.cjs");
+const require_hooks = require("./hooks.cjs");
 let element_plus = require("element-plus");
 let pinia = require("pinia");
 let vue = require("vue");
@@ -989,53 +990,6 @@ function init$30(name, templateName, buttons, options = {}) {
 	return dialogControl;
 }
 //#endregion
-//#region src/packages/hooks/useFormValue.ts
-/**
-* 表单组件值绑定 Hook
-* 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
-* @param componentName 组件名称（用于警告信息）
-* @param control 表单控件配置（必须包含 name 属性）
-* @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
-* @returns 包含计算属性 fieldValue 的对象
-*/
-function useFormValue(componentName, control, modelPropName = "modelValue") {
-	const instance = (0, vue.getCurrentInstance)();
-	if (!instance) throw new Error(`[${componentName}] useFormValue 必须在组件实例中调用`);
-	const formData = (0, vue.inject)(require_utils.FormDataKey, null);
-	if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && formData) {
-		const trackId = `[${formData.formId}] ${control.name}`;
-		console.time(`useFormValue:${trackId}`);
-		(0, vue.onUnmounted)(() => console.timeEnd(`useFormValue:${trackId}`));
-	}
-	const fieldValue = (0, vue.computed)({
-		get: () => {
-			if (instance.props[modelPropName] !== void 0) return instance.props[modelPropName];
-			if (formData) return formData.getFieldValue(control.name);
-			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 未绑定数据源。请使用 v-model 或在 RwForm 组件内使用`);
-		},
-		set: (value) => {
-			const props = instance.props;
-			if (props[modelPropName] !== void 0 || props.control && typeof props.control === "object" && "isModel" in props.control && props.control.isModel) {
-				instance.emit(`update:${modelPropName}`, value);
-				return;
-			}
-			if (formData) {
-				try {
-					formData.setFieldValue(control.name, value);
-				} catch (error) {
-					if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.error(`[${componentName}] 更新字段 '${control.name}' 失败:`, error);
-				}
-				return;
-			}
-			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 无数据接收器，值变更将丢失。`);
-		}
-	});
-	(0, vue.onUnmounted)(() => {
-		if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {}
-	});
-	return { fieldValue };
-}
-//#endregion
 //#region src/packages/controls/input/input.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$19 = {
 	class: "minput-box",
@@ -1100,7 +1054,7 @@ var input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				resizeObserver.observe(el);
 			}
 		}, { flush: "post" });
-		const { fieldValue } = useFormValue("RwInput", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwInput", props.control);
 		const createEmptyLangObject = () => {
 			const langObj = {};
 			require_locale.localeOptions.forEach((option) => {
@@ -1471,7 +1425,7 @@ var select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const { lists, showCheckAll, groupBy, remoteUrl, loading, optionTemplate, tagTemplate, empty, prefix, ...rest } = props.control || {};
 			return rest;
 		});
-		const { fieldValue } = useFormValue("RwSelect", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwSelect", props.control);
 		const placeholder = (0, vue.computed)(() => {
 			const { placeholder, label, moduleName, name } = props.control;
 			if (placeholder) return t(`${moduleName}.${placeholder}`);
@@ -1783,7 +1737,7 @@ var inputTag_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const { prefix, suffix, tag, ...rest } = props.control;
 			return rest;
 		});
-		const { fieldValue } = useFormValue("RwInputTag", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwInputTag", props.control);
 		const currentValue = (0, vue.computed)({
 			get: () => {
 				if (typeof fieldValue.value === "string" && fieldValue.value.indexOf(",") !== -1) return fieldValue.value.split(",");
@@ -1905,7 +1859,7 @@ var inputNumber_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const { prefix, suffix, decreaseIcon, increaseIcon, ...rest } = props.control;
 			return rest;
 		});
-		const { fieldValue } = useFormValue("RwInputNumber", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwInputNumber", props.control);
 		const placeholder = (0, vue.computed)(() => {
 			const { placeholder, label, moduleName, name } = props.control;
 			if (placeholder) return require_locale.t(`${moduleName}.${placeholder}`);
@@ -2002,7 +1956,7 @@ var radio_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
-		const { fieldValue } = useFormValue("RwRadio", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwRadio", props.control);
 		const optionsData = (0, vue.ref)([]);
 		const isLoading = (0, vue.ref)(false);
 		const error = (0, vue.ref)("");
@@ -2244,7 +2198,7 @@ var mergeInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const currentComponent = (0, vue.computed)(() => {
 			return componentMap[props.control.inputType || "input"];
 		});
-		const { fieldValue } = useFormValue("RwMergeInput", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwMergeInput", props.control);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(currentComponent.value), {
 				modelValue: (0, vue.unref)(fieldValue),
@@ -2307,7 +2261,7 @@ var switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const { activeAction, inactiveAction, ...rest } = props.control;
 			return rest;
 		});
-		const { fieldValue } = useFormValue("RwSwitch", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwSwitch", props.control);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(element_plus.ElSwitch), (0, vue.mergeProps)(switchProps.value, {
 				modelValue: (0, vue.unref)(fieldValue),
@@ -2534,7 +2488,7 @@ var mergeSelect_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
 		const optionsList = (0, vue.ref)([]);
 		const dataCache = (0, vue.ref)({});
 		const emit = __emit;
-		const { fieldValue } = useFormValue("RwMergeSelect", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwMergeSelect", props.control);
 		const fieldValueAsStringOrNumber = (0, vue.computed)({
 			get: () => fieldValue.value,
 			set: (value) => {
@@ -2996,7 +2950,7 @@ var map_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__
 		const mapContainer = (0, vue.ref)(null);
 		const appConfig = require_utils.useAppConfigStore();
 		const props = __props;
-		const { fieldValue } = useFormValue("RwMap", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwMap", props.control);
 		const currVal = (0, vue.ref)(fieldValue.value);
 		const inputControl = (0, vue.reactive)(init$29(props.control.moduleName ?? "", props.control.name, {
 			readonly: true,
@@ -4414,7 +4368,7 @@ var upload_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 			"faf3e6da-control.imgWidth ? (control.imgHeight ? control.imgHeight + \"px\" : control.imgWidth + \"px\") : \"var(--el-upload-list-picture-card-size, 148px)\"": _ctx.control.imgWidth ? _ctx.control.imgHeight ? _ctx.control.imgHeight + "px" : _ctx.control.imgWidth + "px" : "var(--el-upload-list-picture-card-size, 148px)"
 		}));
 		const props = __props;
-		const { fieldValue } = useFormValue("RwUpload", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwUpload", props.control);
 		const dialogShow = (0, vue.ref)(false);
 		const fileList = (0, vue.ref)([]);
 		const isLoading = (0, vue.ref)(false);
@@ -4644,7 +4598,7 @@ var tree_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const treeRef = (0, vue.ref)();
-		const { fieldValue } = useFormValue("RwTree", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwTree", props.control);
 		const optionsData = (0, vue.ref)([]);
 		const isLoading = (0, vue.ref)(false);
 		const error = (0, vue.ref)("");
@@ -4971,7 +4925,7 @@ var text_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props) {
 		const { pageTable, system } = (0, pinia.storeToRefs)(require_stores.useLocalSettingStore());
 		const props = __props;
-		const { fieldValue } = useFormValue("RwIext", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwIext", props.control);
 		const showTextValue = (0, vue.computed)(() => {
 			if (props.control.multiLang) try {
 				return JSON.parse(fieldValue.value);
@@ -5121,7 +5075,7 @@ var table_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
 		}
 		const props = __props;
 		const formObj = getFormContent(props.control.columns);
-		const { fieldValue } = useFormValue("RwTable", props.control, "defaultData");
+		const { fieldValue } = require_hooks.useFormValue("RwTable", props.control, "defaultData");
 		const emits = __emit;
 		function checkRow(row) {
 			props.control.clickRow = row;
@@ -5619,7 +5573,7 @@ var tagComp_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	setup(__props, { emit: __emit }) {
 		require_stores.useLocalSettingStore();
 		const props = __props;
-		const { fieldValue } = useFormValue("RwTagComp", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwTagComp", props.control);
 		const tagProps = (0, vue.computed)(() => {
 			const { collapseNum, optionValues, optionFrom, buttonIcon, buttonLabel, ...rest } = props.control;
 			return {
@@ -6068,7 +6022,7 @@ var segmented_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const { ...rest } = props.control;
 			return rest;
 		});
-		const { fieldValue } = useFormValue("RwSegmented", props.control);
+		const { fieldValue } = require_hooks.useFormValue("RwSegmented", props.control);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(element_plus.ElSegmented), (0, vue.mergeProps)({
 				modelValue: (0, vue.unref)(fieldValue),

package/dist/{controls-Dk08t8aW.js → controls-BXlqLD72.js}

@@ -2,9 +2,10 @@ import { t as __exportAll } from "./chunk-pbuEa-1d.js";
 import { Et as isHTML, Lt as renderTemplate, P as withInstall, a as bd09ToGcj02, h as http, n as PathUtils, o as gcj02ToBd09, qt as loadScript, r as createFormData, s as exportExcel, t as FormDataKey, tt as assignmentData, u as useAppConfigStore, ut as transDataToString, xt as isComponent } from "./utils-CUQ01uOs.js";
 import { a as localeOptions, i as locale, t as i18n, u as t$3 } from "./locale-B3sWTtoq.js";
 import { useColumnsSettingStore, useLocalSettingStore } from "./stores.js";
+import { useFormValue } from "./hooks.js";
 import { ElAffix, ElAutocomplete, ElButton, ElButtonGroup, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElCol, ElConfigProvider, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElForm, ElFormItem, ElIcon, ElImage, ElInput, ElInputNumber, ElInputTag, ElMessage, ElMessageBox, ElNotification, ElOption, ElOptionGroup, ElPagination, ElPopconfirm, ElPopover, ElRadio, ElRadioButton, ElRadioGroup, ElRow, ElSegmented, ElSelect, ElSlider, ElSwitch, ElTabPane, ElTableColumn, ElTabs, ElTag, ElText, ElTooltip, ElTree, ElTreeSelect, ElUpload, ElWatermark } from "element-plus";
 import { storeToRefs } from "pinia";
-import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, isReactive, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, onUpdated, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, toDisplayString, toRaw, unref, useCssVars, useModel, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isReactive, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, onUpdated, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, toDisplayString, toRaw, unref, useCssVars, useModel, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { debounce } from "lodash-es";
 import axios from "axios";
 import Cookies from "js-cookie";
@@ -986,53 +987,6 @@ function init$30(name, templateName, buttons, options = {}) {
 	return dialogControl;
 }
 //#endregion
-//#region src/packages/hooks/useFormValue.ts
-/**
-* 表单组件值绑定 Hook
-* 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
-* @param componentName 组件名称（用于警告信息）
-* @param control 表单控件配置（必须包含 name 属性）
-* @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
-* @returns 包含计算属性 fieldValue 的对象
-*/
-function useFormValue(componentName, control, modelPropName = "modelValue") {
-	const instance = getCurrentInstance();
-	if (!instance) throw new Error(`[${componentName}] useFormValue 必须在组件实例中调用`);
-	const formData = inject(FormDataKey, null);
-	if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && formData) {
-		const trackId = `[${formData.formId}] ${control.name}`;
-		console.time(`useFormValue:${trackId}`);
-		onUnmounted(() => console.timeEnd(`useFormValue:${trackId}`));
-	}
-	const fieldValue = computed({
-		get: () => {
-			if (instance.props[modelPropName] !== void 0) return instance.props[modelPropName];
-			if (formData) return formData.getFieldValue(control.name);
-			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 未绑定数据源。请使用 v-model 或在 RwForm 组件内使用`);
-		},
-		set: (value) => {
-			const props = instance.props;
-			if (props[modelPropName] !== void 0 || props.control && typeof props.control === "object" && "isModel" in props.control && props.control.isModel) {
-				instance.emit(`update:${modelPropName}`, value);
-				return;
-			}
-			if (formData) {
-				try {
-					formData.setFieldValue(control.name, value);
-				} catch (error) {
-					if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.error(`[${componentName}] 更新字段 '${control.name}' 失败:`, error);
-				}
-				return;
-			}
-			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 无数据接收器，值变更将丢失。`);
-		}
-	});
-	onUnmounted(() => {
-		if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {}
-	});
-	return { fieldValue };
-}
-//#endregion
 //#region src/packages/controls/input/input.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$19 = {
 	class: "minput-box",

package/dist/controls.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_controls = require("./controls-CXpx_MLk.cjs");
+const require_controls = require("./controls-B7qU1vjR.cjs");
 exports.MyButton = require_controls.MyButton_default;
 Object.defineProperty(exports, "RwAffix", {
 	enumerable: true,

package/dist/controls.js

@@ -1,2 +1,2 @@
-import { A as select_exports, C as mergeSelect_exports, D as radio_exports, E as mergeInput_exports, F as popconfirm_exports, I as button_exports, L as autocomplete_exports, M as dialog_exports, N as buttonGroup_exports, O as inputNumber_exports, P as dropdown_exports, R as affix_exports, S as slider_exports, T as switch_exports, _ as text_exports, a as pageForm_exports, b as pagination_exports, c as pageBase_exports, d as tabPane_exports, f as RwFormItems, g as tag_exports, h as tagComp_exports, i as pageTable_exports, j as input_exports, k as inputTag_exports, l as RwForm, m as table_exports, n as search_exports, o as pageStruct_exports, p as segmented_exports, r as mTreeSTable_exports, s as tableStruct_exports, u as tabs_exports, v as tree_exports, w as image_exports, x as map_exports, y as upload_exports, z as MyButton_default } from "./controls-Dk08t8aW.js";
+import { A as select_exports, C as mergeSelect_exports, D as radio_exports, E as mergeInput_exports, F as popconfirm_exports, I as button_exports, L as autocomplete_exports, M as dialog_exports, N as buttonGroup_exports, O as inputNumber_exports, P as dropdown_exports, R as affix_exports, S as slider_exports, T as switch_exports, _ as text_exports, a as pageForm_exports, b as pagination_exports, c as pageBase_exports, d as tabPane_exports, f as RwFormItems, g as tag_exports, h as tagComp_exports, i as pageTable_exports, j as input_exports, k as inputTag_exports, l as RwForm, m as table_exports, n as search_exports, o as pageStruct_exports, p as segmented_exports, r as mTreeSTable_exports, s as tableStruct_exports, u as tabs_exports, v as tree_exports, w as image_exports, x as map_exports, y as upload_exports, z as MyButton_default } from "./controls-BXlqLD72.js";
 export { MyButton_default as MyButton, affix_exports as RwAffix, autocomplete_exports as RwAutocomplete, button_exports as RwButton, buttonGroup_exports as RwButtonGroup, dialog_exports as RwDialog, dropdown_exports as RwDropdown, RwForm, RwFormItems, image_exports as RwImage, input_exports as RwInput, inputNumber_exports as RwInputNumber, inputTag_exports as RwInputTag, mTreeSTable_exports as RwMTreeSTable, map_exports as RwMap, mergeInput_exports as RwMergeInput, mergeSelect_exports as RwMergeSelect, pageBase_exports as RwPageBase, pageForm_exports as RwPageForm, pageTable_exports as RwPageTable, pagination_exports as RwPagination, popconfirm_exports as RwPopconfirm, radio_exports as RwRadio, search_exports as RwSearch, segmented_exports as RwSegmented, select_exports as RwSelect, slider_exports as RwSlider, switch_exports as RwSwitch, tabPane_exports as RwTabPane, table_exports as RwTable, tabs_exports as RwTabs, tag_exports as RwTag, tagComp_exports as RwTagComp, text_exports as RwText, tree_exports as RwTree, upload_exports as RwUpload, pageStruct_exports as pageStruct, tableStruct_exports as tableStruct };

package/dist/hooks.cjs

@@ -0,0 +1,140 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./chunk-CZWwpsFl.cjs");
+const require_utils = require("./utils-D8ZjYN3B.cjs");
+let vue = require("vue");
+//#region src/packages/hooks/use-namespace/index.ts
+const defaultNamespace = "el";
+const statePrefix = "is-";
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+	let cls = `${namespace}-${block}`;
+	if (blockSuffix) cls += `-${blockSuffix}`;
+	if (element) cls += `__${element}`;
+	if (modifier) cls += `--${modifier}`;
+	return cls;
+};
+const namespaceContextKey = Symbol("namespaceContextKey");
+const useGetDerivedNamespace = (namespaceOverrides) => {
+	const derivedNamespace = namespaceOverrides || ((0, vue.getCurrentInstance)() ? (0, vue.inject)(namespaceContextKey, (0, vue.ref)("el")) : (0, vue.ref)("el"));
+	return (0, vue.computed)(() => {
+		return (0, vue.unref)(derivedNamespace) || "el";
+	});
+};
+const useNamespace = (block, namespaceOverrides) => {
+	const namespace = useGetDerivedNamespace(namespaceOverrides);
+	const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
+	const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
+	const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
+	const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
+	const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
+	const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
+	const is = (name, ...args) => {
+		const state = args.length >= 1 ? args[0] : true;
+		return name && state ? `${statePrefix}${name}` : "";
+	};
+	const cssVar = (object) => {
+		const styles = {};
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
+		return styles;
+	};
+	const cssVarBlock = (object) => {
+		const styles = {};
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
+		return styles;
+	};
+	const cssVarName = (name) => `--${namespace.value}-${name}`;
+	const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is,
+		cssVar,
+		cssVarName,
+		cssVarBlock,
+		cssVarBlockName
+	};
+};
+//#endregion
+//#region src/packages/hooks/useFormValue.ts
+/**
+* 表单组件值绑定 Hook
+* 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
+* @param componentName 组件名称（用于警告信息）
+* @param control 表单控件配置（必须包含 name 属性）
+* @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
+* @returns 包含计算属性 fieldValue 的对象
+*/
+function useFormValue(componentName, control, modelPropName = "modelValue") {
+	const instance = (0, vue.getCurrentInstance)();
+	if (!instance) throw new Error(`[${componentName}] useFormValue 必须在组件实例中调用`);
+	const formData = (0, vue.inject)(require_utils.FormDataKey, null);
+	if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && formData) {
+		const trackId = `[${formData.formId}] ${control.name}`;
+		console.time(`useFormValue:${trackId}`);
+		(0, vue.onUnmounted)(() => console.timeEnd(`useFormValue:${trackId}`));
+	}
+	const fieldValue = (0, vue.computed)({
+		get: () => {
+			if (instance.props[modelPropName] !== void 0) return instance.props[modelPropName];
+			if (formData) return formData.getFieldValue(control.name);
+			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 未绑定数据源。请使用 v-model 或在 RwForm 组件内使用`);
+		},
+		set: (value) => {
+			const props = instance.props;
+			if (props[modelPropName] !== void 0 || props.control && typeof props.control === "object" && "isModel" in props.control && props.control.isModel) {
+				instance.emit(`update:${modelPropName}`, value);
+				return;
+			}
+			if (formData) {
+				try {
+					formData.setFieldValue(control.name, value);
+				} catch (error) {
+					if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.error(`[${componentName}] 更新字段 '${control.name}' 失败:`, error);
+				}
+				return;
+			}
+			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 无数据接收器，值变更将丢失。`);
+		}
+	});
+	(0, vue.onUnmounted)(() => {
+		if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {}
+	});
+	return { fieldValue };
+}
+//#endregion
+//#region src/packages/hooks/useMouse.ts
+function useMouse() {
+	const show = (0, vue.ref)(true);
+	const timeoutId = (0, vue.ref)();
+	const isAnimating = (0, vue.ref)(false);
+	const handleMouseEnter = () => {
+		if (isAnimating.value) return;
+		if (timeoutId.value) clearTimeout(timeoutId.value);
+		isAnimating.value = true;
+		show.value = false;
+		timeoutId.value = setTimeout(() => {
+			show.value = true;
+		}, 500);
+	};
+	const handleMouseLeave = () => {
+		isAnimating.value = false;
+	};
+	return {
+		show,
+		handleMouseEnter,
+		handleMouseLeave
+	};
+}
+//#endregion
+exports.defaultNamespace = defaultNamespace;
+exports.namespaceContextKey = namespaceContextKey;
+exports.useFormValue = useFormValue;
+exports.useGetDerivedNamespace = useGetDerivedNamespace;
+exports.useMouse = useMouse;
+exports.useNamespace = useNamespace;

package/dist/hooks.d.cts

@@ -0,0 +1,50 @@
+import * as _$vue from "vue";
+import { InjectionKey, Ref } from "vue";
+
+//#region src/packages/hooks/use-namespace/index.d.ts
+declare const defaultNamespace = "el";
+declare const namespaceContextKey: InjectionKey<Ref<string | undefined>>;
+declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string | undefined>) => _$vue.ComputedRef<string>;
+declare const useNamespace: (block: string, namespaceOverrides?: Ref<string | undefined>) => {
+  namespace: _$vue.ComputedRef<string>;
+  b: (blockSuffix?: string) => string;
+  e: (element?: string) => string;
+  m: (modifier?: string) => string;
+  be: (blockSuffix?: string, element?: string) => string;
+  em: (element?: string, modifier?: string) => string;
+  bm: (blockSuffix?: string, modifier?: string) => string;
+  bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+  is: {
+    (name: string, state: boolean | undefined): string;
+    (name: string): string;
+  };
+  cssVar: (object: Record<string, string>) => Record<string, string>;
+  cssVarName: (name: string) => string;
+  cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+  cssVarBlockName: (name: string) => string;
+};
+type UseNamespaceReturn = ReturnType<typeof useNamespace>;
+//#endregion
+//#region src/packages/hooks/useFormValue.d.ts
+/**
+ * 表单组件值绑定 Hook
+ * 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
+ * @param componentName 组件名称（用于警告信息）
+ * @param control 表单控件配置（必须包含 name 属性）
+ * @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
+ * @returns 包含计算属性 fieldValue 的对象
+ */
+declare function useFormValue<T extends {
+  name: string;
+}>(componentName: string, control: T, modelPropName?: string): {
+  fieldValue: _$vue.WritableComputedRef<any, any>;
+};
+//#endregion
+//#region src/packages/hooks/useMouse.d.ts
+declare function useMouse(): {
+  show: _$vue.Ref<boolean, boolean>;
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+};
+//#endregion
+export { UseNamespaceReturn, defaultNamespace, namespaceContextKey, useFormValue, useGetDerivedNamespace, useMouse, useNamespace };

package/dist/hooks.d.ts

@@ -0,0 +1,50 @@
+import * as _$vue from "vue";
+import { InjectionKey, Ref } from "vue";
+
+//#region src/packages/hooks/use-namespace/index.d.ts
+declare const defaultNamespace = "el";
+declare const namespaceContextKey: InjectionKey<Ref<string | undefined>>;
+declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string | undefined>) => _$vue.ComputedRef<string>;
+declare const useNamespace: (block: string, namespaceOverrides?: Ref<string | undefined>) => {
+  namespace: _$vue.ComputedRef<string>;
+  b: (blockSuffix?: string) => string;
+  e: (element?: string) => string;
+  m: (modifier?: string) => string;
+  be: (blockSuffix?: string, element?: string) => string;
+  em: (element?: string, modifier?: string) => string;
+  bm: (blockSuffix?: string, modifier?: string) => string;
+  bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+  is: {
+    (name: string, state: boolean | undefined): string;
+    (name: string): string;
+  };
+  cssVar: (object: Record<string, string>) => Record<string, string>;
+  cssVarName: (name: string) => string;
+  cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+  cssVarBlockName: (name: string) => string;
+};
+type UseNamespaceReturn = ReturnType<typeof useNamespace>;
+//#endregion
+//#region src/packages/hooks/useFormValue.d.ts
+/**
+ * 表单组件值绑定 Hook
+ * 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
+ * @param componentName 组件名称（用于警告信息）
+ * @param control 表单控件配置（必须包含 name 属性）
+ * @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
+ * @returns 包含计算属性 fieldValue 的对象
+ */
+declare function useFormValue<T extends {
+  name: string;
+}>(componentName: string, control: T, modelPropName?: string): {
+  fieldValue: _$vue.WritableComputedRef<any, any>;
+};
+//#endregion
+//#region src/packages/hooks/useMouse.d.ts
+declare function useMouse(): {
+  show: _$vue.Ref<boolean, boolean>;
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+};
+//#endregion
+export { UseNamespaceReturn, defaultNamespace, namespaceContextKey, useFormValue, useGetDerivedNamespace, useMouse, useNamespace };

package/dist/hooks.js

@@ -0,0 +1,133 @@
+import { t as FormDataKey } from "./utils-CUQ01uOs.js";
+import { computed, getCurrentInstance, inject, onUnmounted, ref, unref } from "vue";
+//#region src/packages/hooks/use-namespace/index.ts
+const defaultNamespace = "el";
+const statePrefix = "is-";
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+	let cls = `${namespace}-${block}`;
+	if (blockSuffix) cls += `-${blockSuffix}`;
+	if (element) cls += `__${element}`;
+	if (modifier) cls += `--${modifier}`;
+	return cls;
+};
+const namespaceContextKey = Symbol("namespaceContextKey");
+const useGetDerivedNamespace = (namespaceOverrides) => {
+	const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref("el")) : ref("el"));
+	return computed(() => {
+		return unref(derivedNamespace) || "el";
+	});
+};
+const useNamespace = (block, namespaceOverrides) => {
+	const namespace = useGetDerivedNamespace(namespaceOverrides);
+	const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
+	const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
+	const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
+	const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
+	const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
+	const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
+	const is = (name, ...args) => {
+		const state = args.length >= 1 ? args[0] : true;
+		return name && state ? `${statePrefix}${name}` : "";
+	};
+	const cssVar = (object) => {
+		const styles = {};
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
+		return styles;
+	};
+	const cssVarBlock = (object) => {
+		const styles = {};
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
+		return styles;
+	};
+	const cssVarName = (name) => `--${namespace.value}-${name}`;
+	const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is,
+		cssVar,
+		cssVarName,
+		cssVarBlock,
+		cssVarBlockName
+	};
+};
+//#endregion
+//#region src/packages/hooks/useFormValue.ts
+/**
+* 表单组件值绑定 Hook
+* 支持 v-model 与 FormData 上下文的双向绑定，优先使用 v-model
+* @param componentName 组件名称（用于警告信息）
+* @param control 表单控件配置（必须包含 name 属性）
+* @param modelPropName v-model 绑定的属性名（默认 "modelValue"）
+* @returns 包含计算属性 fieldValue 的对象
+*/
+function useFormValue(componentName, control, modelPropName = "modelValue") {
+	const instance = getCurrentInstance();
+	if (!instance) throw new Error(`[${componentName}] useFormValue 必须在组件实例中调用`);
+	const formData = inject(FormDataKey, null);
+	if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && formData) {
+		const trackId = `[${formData.formId}] ${control.name}`;
+		console.time(`useFormValue:${trackId}`);
+		onUnmounted(() => console.timeEnd(`useFormValue:${trackId}`));
+	}
+	const fieldValue = computed({
+		get: () => {
+			if (instance.props[modelPropName] !== void 0) return instance.props[modelPropName];
+			if (formData) return formData.getFieldValue(control.name);
+			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 未绑定数据源。请使用 v-model 或在 RwForm 组件内使用`);
+		},
+		set: (value) => {
+			const props = instance.props;
+			if (props[modelPropName] !== void 0 || props.control && typeof props.control === "object" && "isModel" in props.control && props.control.isModel) {
+				instance.emit(`update:${modelPropName}`, value);
+				return;
+			}
+			if (formData) {
+				try {
+					formData.setFieldValue(control.name, value);
+				} catch (error) {
+					if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.error(`[${componentName}] 更新字段 '${control.name}' 失败:`, error);
+				}
+				return;
+			}
+			if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") console.warn(`[${componentName}] 字段 '${control.name}' 无数据接收器，值变更将丢失。`);
+		}
+	});
+	onUnmounted(() => {
+		if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {}
+	});
+	return { fieldValue };
+}
+//#endregion
+//#region src/packages/hooks/useMouse.ts
+function useMouse() {
+	const show = ref(true);
+	const timeoutId = ref();
+	const isAnimating = ref(false);
+	const handleMouseEnter = () => {
+		if (isAnimating.value) return;
+		if (timeoutId.value) clearTimeout(timeoutId.value);
+		isAnimating.value = true;
+		show.value = false;
+		timeoutId.value = setTimeout(() => {
+			show.value = true;
+		}, 500);
+	};
+	const handleMouseLeave = () => {
+		isAnimating.value = false;
+	};
+	return {
+		show,
+		handleMouseEnter,
+		handleMouseLeave
+	};
+}
+//#endregion
+export { defaultNamespace, namespaceContextKey, useFormValue, useGetDerivedNamespace, useMouse, useNamespace };

package/dist/index.cjs

@@ -4,7 +4,7 @@ Object.defineProperties(exports, {
 });
 const require_chunk = require("./chunk-CZWwpsFl.cjs");
 const require_config = require("./config.cjs");
-const require_controls = require("./controls-CXpx_MLk.cjs");
+const require_controls = require("./controls-B7qU1vjR.cjs");
 const require_locale = require("./locale-DTHxb_wp.cjs");
 require("element-plus/dist/index.css");
 require("element-plus/theme-chalk/dark/css-vars.css");

package/dist/index.js

@@ -1,5 +1,5 @@
 import { t as config_exports } from "./config.js";
-import { t as controls_exports } from "./controls-Dk08t8aW.js";
+import { t as controls_exports } from "./controls-BXlqLD72.js";
 import { d as tw_default, f as en_default, p as cn_default } from "./locale-B3sWTtoq.js";
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "duck-vue-components",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A Vue 3 component library with controls, utils, stores and more.",
   "author": "Your Name <your.email@mail.com>",
   "license": "MIT",
@@ -37,6 +37,10 @@
       "import": "./dist/controls.js",
       "require": "./dist/controls.cjs"
     },
+    "./hooks": {
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
+    },
     "./locale": {
       "import": "./dist/locale.js",
       "require": "./dist/locale.cjs"