@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

package/es/hooks/design-view/editor/useStyleEditor.mjs

@@ -0,0 +1,84 @@
+import { useSelectedWidget } from "../widget/useSelectedWidget.mjs";
+import { useDesignCache } from "../designer/useDesignCache.mjs";
+import "../utils/color.util.mjs";
+import "../constants/style-editor.const.mjs";
+import { isObject, isString } from "lodash-es";
+import { computed, nextTick } from "vue";
+//#region src/hooks/design-view/editor/useStyleEditor.ts
+var styleEditorProps = {
+	editor: {
+		type: Object,
+		default: {}
+	},
+	widget: { type: Object },
+	propConfig: {
+		type: Object,
+		default: {}
+	}
+};
+/**
+* 样式编辑器 composable
+* 封装样式属性的读写逻辑，支持链式路径和对象映射
+*
+* @template T 样式值类型
+* @param {IObject} editor 样式编辑器配置
+* @returns {{ styleValue: ComputedRef<T> }}
+*/
+function useStyleEditor(editor) {
+	const { selectedStyle, selectedRef } = useSelectedWidget();
+	const { emitCache } = useDesignCache();
+	/**
+	* 设置样式值，支持链式路径和对象映射
+	*
+	* @param {IObject} value 要设置的值
+	* @param {IObject} name 属性名称或映射
+	*/
+	function setValue(value, name) {
+		if (isString(name)) {
+			const keyslist = name.split(".");
+			const len = keyslist.length - 1;
+			keyslist.reduce((memo, cur, index) => {
+				if (index === len) memo[cur] = value;
+				return memo[cur];
+			}, selectedStyle.value);
+		}
+		if (isObject(name)) {
+			const valueMap = value;
+			for (const key in name) {
+				const valKey = name[key];
+				setValue(valueMap[key], valKey);
+			}
+		}
+	}
+	/**
+	* 获取样式值，支持链式路径和对象映射
+	*
+	* @param {IObject} name 属性名称或映射
+	* @returns {unknown} 样式值
+	*/
+	function getValue(name) {
+		if (isString(name)) return name.split(".").reduce((memo, cur) => memo[cur], selectedStyle.value);
+		if (isObject(name)) {
+			const valueMap = {};
+			for (const key in name) {
+				const valKey = name[key];
+				valueMap[key] = getValue(valKey);
+			}
+			return valueMap;
+		}
+	}
+	return { styleValue: computed({
+		get() {
+			return getValue(editor.name);
+		},
+		set(val) {
+			setValue(val, editor.name);
+			if (!!editor.changeCallback && typeof editor.changeCallback === "function") nextTick().then(() => {
+				editor.changeCallback(selectedRef.value, val);
+			});
+			emitCache();
+		}
+	}) };
+}
+//#endregion
+export { styleEditorProps, useStyleEditor };