@gct-paas/design 0.1.4-dev.1 → 0.1.4-dev.11

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

@@ -0,0 +1,99 @@
+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,
+    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
+  };
+}
+
+export { propEditorProps, usePropEditor };

package/es/hooks/design-view/editor/useStyle.d.ts

@@ -0,0 +1,21 @@
+import { LowCodeModal, LowCodeWidget } from '@gct-paas/schema';
+export declare function useStyle(widget: LowCodeWidget.BasicSchema | LowCodeModal.Modal): {
+    wrapperStyle: import('vue').ComputedRef<IObject>;
+    wStyle: import('vue').ComputedRef<IObject>;
+    labelFont: import('vue').ComputedRef<IObject>;
+    contentFont: import('vue').ComputedRef<IObject>;
+};
+/**
+ * 将样式对象转换为字体样式
+ *
+ * @param schema - 样式配置对象
+ * @returns 转换后的字体样式对象
+ */
+export declare const schemaToStyle: (schema: IObject) => IObject;
+/**
+ * 将样式属性对象转换为 CSS 样式字符串格式
+ *
+ * @param styleProps - 样式属性对象
+ * @returns 转换后的样式对象
+ */
+export declare function propsToStyle(styleProps?: IObject): IObject;

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

@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { propsToStyle as propsToStyle$1, extractFontStyle, generateWrapperStyle } from '@gct-paas/schema';
+
+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 schemaToStyle = (schema) => extractFontStyle(schema);
+function propsToStyle(styleProps = {}) {
+  return propsToStyle$1(styleProps);
+}
+
+export { propsToStyle, schemaToStyle, useStyle };

package/es/hooks/design-view/editor/useStyleEditor.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
+import { shadeColor, rgba2hex } from '../utils/color.util';
+import { PRESET_COLOR, BTN_TYPE_COLOR } from '../constants/style-editor.const';
+export { shadeColor, rgba2hex };
+export { PRESET_COLOR as presetColor, BTN_TYPE_COLOR as btnTypeColor };
+export declare const styleEditorProps: {
+    editor: {
+        type: PropType<LowCodeWidget.StyleEditor>;
+        default: {};
+    };
+    widget: {
+        type: PropType<LowCodeWidget.BasicSchema | LowCodeModal.Modal>;
+    };
+    propConfig: {
+        type: ObjectConstructor;
+        default: {};
+    };
+};
+/**
+ * 样式编辑器 composable
+ * 封装样式属性的读写逻辑，支持链式路径和对象映射
+ *
+ * @template T 样式值类型
+ * @param {IObject} editor 样式编辑器配置
+ * @returns {{ styleValue: ComputedRef<T> }}
+ */
+export declare function useStyleEditor<T = IObject>(editor: IObject): {
+    styleValue: import('vue').WritableComputedRef<T, T>;
+};

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

@@ -0,0 +1,77 @@
+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: {}
+  }
+};
+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
+  };
+}
+
+export { styleEditorProps, useStyleEditor };