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

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

@@ -1,99 +1,93 @@
-import { computed, nextTick } from 'vue';
-import { useSelectedWidget } from '../widget/useSelectedWidget.mjs';
-import { isString, isObject } from 'lodash-es';
-import { useDesignCache } from '../designer/useDesignCache.mjs';
-import { regRoot } from '../design-state.mjs';
-
-const propEditorProps = {
-  propName: {
-    type: [String, Object],
-    default: ""
-  },
-  propConfig: {
-    type: Object,
-    default: {}
-  },
-  changeCallback: {
-    type: Function
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  validate: {
-    type: Promise
-  },
-  widget: {
-    type: Object
-  }
+import { regRoot } from "../design-state.mjs";
+import { useSelectedWidget } from "../widget/useSelectedWidget.mjs";
+import { useDesignCache } from "../designer/useDesignCache.mjs";
+import { isObject, isString } from "lodash-es";
+import { computed, nextTick } from "vue";
+//#region src/hooks/design-view/editor/usePropEditor.ts
+var propEditorProps = {
+	propName: {
+		type: String,
+		default: ""
+	},
+	propConfig: {
+		type: Object,
+		default: {}
+	},
+	changeCallback: { type: Function },
+	required: {
+		type: Boolean,
+		default: false
+	},
+	validate: { type: Promise },
+	widget: { type: Object }
 };
 function usePropEditor(propName, changeCallback, globData = {}) {
-  const { selectedProps, selectedRef } = useSelectedWidget();
-  const { emitCache } = useDesignCache();
-  function setValue(value, name) {
-    if (isString(name)) {
-      const widget = regRoot.test(name) ? selectedRef : selectedProps;
-      const keyslist = name.replace(regRoot, "").split(".");
-      const len = keyslist.length - 1;
-      keyslist.reduce(
-        (memo, cur, index) => {
-          if (index === len) {
-            memo[cur] = value;
-          }
-          return memo[cur];
-        },
-        widget.value
-      );
-    }
-    if (isObject(name)) {
-      const valueMap = value;
-      for (const key in name) {
-        const valKey = name[key];
-        setValue(valueMap[key], valKey);
-      }
-    }
-  }
-  function getValue(name) {
-    if (isString(name)) {
-      const widget = regRoot.test(name) ? selectedRef : selectedProps;
-      if (!widget?.value) return;
-      const keyslist = name.replace(regRoot, "").split(".");
-      try {
-        return keyslist.reduce(
-          (memo, cur) => memo[cur],
-          widget.value
-        );
-      } catch (err) {
-        console.warn(err);
-      }
-    }
-    if (isObject(name)) {
-      const valueMap = {};
-      for (const key in name) {
-        const valKey = name[key];
-        valueMap[key] = getValue(valKey);
-      }
-      return valueMap;
-    }
-  }
-  const propValue = computed({
-    get() {
-      const baseValue = getValue(propName);
-      return baseValue ?? (isString(propName) ? globData[propName] : baseValue);
-    },
-    set(val) {
-      setValue(val, propName);
-      if (!!changeCallback && typeof changeCallback === "function") {
-        nextTick().then(() => {
-          changeCallback(selectedRef.value, val);
-        });
-      }
-      emitCache();
-    }
-  });
-  return {
-    propValue
-  };
+	const { selectedProps, selectedRef } = useSelectedWidget();
+	const { emitCache } = useDesignCache();
+	/**
+	* propName支持字符串链式调用，对象情况支持多字段
+	*
+	* @param {unknown} value 要设置的值
+	* @param {PropNameType} name 属性名称或映射
+	*/
+	function setValue(value, name) {
+		if (isString(name)) {
+			/**root 开头的字段就在全链路处理 */
+			const widget = regRoot.test(name) ? selectedRef : selectedProps;
+			const keyslist = name.replace(regRoot, "").split(".");
+			const len = keyslist.length - 1;
+			keyslist.reduce((memo, cur, index) => {
+				if (index === len) memo[cur] = value;
+				return memo[cur];
+			}, widget.value);
+		}
+		if (isObject(name)) {
+			const valueMap = value;
+			for (const key in name) {
+				const valKey = name[key];
+				setValue(valueMap[key], valKey);
+			}
+		}
+	}
+	/**
+	* 获取属性值，支持链式路径和对象映射
+	*
+	* @param {PropNameType} name 属性名称或映射
+	* @returns {unknown} 属性值
+	*/
+	function getValue(name) {
+		if (isString(name)) {
+			const widget = regRoot.test(name) ? selectedRef : selectedProps;
+			if (!widget?.value) return;
+			const keyslist = name.replace(regRoot, "").split(".");
+			try {
+				return keyslist.reduce((memo, cur) => memo[cur], widget.value);
+			} catch (err) {
+				console.warn(err);
+			}
+		}
+		if (isObject(name)) {
+			const valueMap = {};
+			for (const key in name) {
+				const valKey = name[key];
+				valueMap[key] = getValue(valKey);
+			}
+			return valueMap;
+		}
+	}
+	return { propValue: computed({
+		get() {
+			const baseValue = getValue(propName);
+			return baseValue ?? (isString(propName) ? globData[propName] : baseValue);
+		},
+		set(val) {
+			setValue(val, propName);
+			if (!!changeCallback && typeof changeCallback === "function") nextTick().then(() => {
+				changeCallback(selectedRef.value, val);
+			});
+			emitCache();
+		}
+	}) };
 }
-
+//#endregion
 export { propEditorProps, usePropEditor };

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

@@ -1,30 +1,39 @@
-import { computed } from 'vue';
-import { propsToStyle as propsToStyle$1, extractFontStyle, generateWrapperStyle } from '@gct-paas/schema';
-
+import { computed } from "vue";
+import { extractFontStyle, generateWrapperStyle, propsToStyle } from "@gct-paas/schema";
+//#region src/hooks/design-view/editor/useStyle.ts
 function useStyle(widget) {
-  const { style = {}, ignoringStyle } = widget;
-  const wStyle = computed(() => {
-    return propsToStyle$1(style);
-  });
-  const wrapperStyle = computed(() => {
-    return generateWrapperStyle(style, ignoringStyle);
-  });
-  const labelFont = computed(() => {
-    return extractFontStyle(style.labelFont);
-  });
-  const contentFont = computed(() => {
-    return extractFontStyle(style.contentFont);
-  });
-  return {
-    wrapperStyle,
-    wStyle,
-    labelFont,
-    contentFont
-  };
+	const { style = {}, ignoringStyle } = widget;
+	const wStyle = computed(() => {
+		return propsToStyle(style);
+	});
+	return {
+		wrapperStyle: computed(() => {
+			return generateWrapperStyle(style, ignoringStyle);
+		}),
+		wStyle,
+		labelFont: computed(() => {
+			return extractFontStyle(style.labelFont);
+		}),
+		contentFont: computed(() => {
+			return extractFontStyle(style.contentFont);
+		})
+	};
 }
-const schemaToStyle = (schema) => extractFontStyle(schema);
-function propsToStyle(styleProps = {}) {
-  return propsToStyle$1(styleProps);
+/**
+* 将样式对象转换为字体样式
+*
+* @param schema - 样式配置对象
+* @returns 转换后的字体样式对象
+*/
+var schemaToStyle = (schema) => extractFontStyle(schema);
+/**
+* 将样式属性对象转换为 CSS 样式字符串格式
+*
+* @param styleProps - 样式属性对象
+* @returns 转换后的样式对象
+*/
+function propsToStyle$1(styleProps = {}) {
+	return propsToStyle(styleProps);
 }
-
-export { propsToStyle, schemaToStyle, useStyle };
+//#endregion
+export { propsToStyle$1 as propsToStyle, schemaToStyle, useStyle };

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

@@ -1,77 +1,84 @@
-import { computed, nextTick } from 'vue';
-import { useSelectedWidget } from '../widget/useSelectedWidget.mjs';
-import { isString, isObject } from 'lodash-es';
-import { useDesignCache } from '../designer/useDesignCache.mjs';
-
-const styleEditorProps = {
-  editor: {
-    type: Object,
-    default: {}
-  },
-  widget: {
-    type: Object
-  },
-  propConfig: {
-    type: Object,
-    default: {}
-  }
+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();
-  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);
-      }
-    }
-  }
-  function getValue(name) {
-    if (isString(name)) {
-      const keys = name.split(".");
-      return keys.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;
-    }
-  }
-  const 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();
-    }
-  });
-  return {
-    styleValue
-  };
+	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 };