@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.8

package/es/hooks/design-view/useSelectedWidget.mjs

@@ -0,0 +1,249 @@
+import { TreeHelper, FIELD_TYPE, FormComponents, BuiltinType, Platform, PanelEnum } from '@gct-paas/core';
+import { getCompPos, commonStyle } from '@gct-paas/schema';
+import { isEmpty, has, get, isArray } from 'lodash-es';
+import { computed, ref } from 'vue';
+import { useDesigner } from './useDesigner.mjs';
+import { platform, usePage } from './usePage.mjs';
+import { useScope } from './useScope.mjs';
+
+const allWidgetInfo = {};
+const fieldFormEvents = {};
+const fieldFormEditors = {};
+const fieldFormStyles = {};
+const { togglePanel } = usePage();
+const selectedConfig = ref({ mode: "move" });
+const selectedParentChildren = ref([]);
+const selectedParentWidgets = ref([]);
+const selectedWidget = ref({});
+const selectedModal = ref({});
+const focusFormWidget = ref({});
+const hoverWidget = ref({});
+function useSelectedWidget() {
+  const { setScope, getScope, scopeData } = useScope();
+  const { subTableModalState, subTableModalId, allWidget } = useDesigner();
+  const selectedRef = computed(() => {
+    if (!isEmpty(selectedModal.value) && isEmpty(selectedWidget.value)) {
+      return selectedModal.value;
+    } else {
+      return selectedWidget.value;
+    }
+  });
+  const selectedParentRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return void 0;
+    }
+    return selectedParentWidgets.value[selectedParentWidgets.value.length - 1];
+  });
+  const selectedParentsRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return [];
+    }
+    return selectedParentWidgets.value;
+  });
+  const selectedParentChildrenRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return [];
+    }
+    return selectedParentChildren.value;
+  });
+  const selectedConfigRef = computed(() => {
+    return selectedConfig.value;
+  });
+  function setSelectedConfig(config) {
+    selectedConfig.value = config;
+  }
+  const setSelectedParentChildrenRef = (widgets) => {
+    selectedParentChildren.value = widgets;
+  };
+  const selectModalRef = computed(() => {
+    if (subTableModalState.value) {
+      const modalInfo = TreeHelper.findNode(scopeData.value, (node) => {
+        return getCompPos(node, FIELD_TYPE.MASTERSLAVE, FormComponents.Form) && node.preLocation === subTableModalId.value;
+      });
+      if (!modalInfo) {
+        return selectedRef.value;
+      }
+      return modalInfo;
+    }
+    return selectedRef.value;
+  });
+  const focusFormRef = computed(() => {
+    if ([
+      FormComponents.Form,
+      FormComponents.RdoForm,
+      FormComponents.MedProRdoForm,
+      FormComponents.CardList,
+      BuiltinType.MODAL,
+      FormComponents.FormProcess
+    ].includes(selectedRef.value.type)) {
+      return selectedRef.value;
+    }
+    return focusFormWidget.value;
+  });
+  const hoverRef = computed(() => {
+    return hoverWidget.value;
+  });
+  function setHoverWidget(widget = {}) {
+    hoverWidget.value = widget;
+  }
+  function setSelectedParentWidgets(widgets) {
+    selectedParentWidgets.value = widgets;
+  }
+  const setSelectedModal = (modal) => {
+    selectedModal.value = modal;
+    selectedWidget.value = {};
+    togglePanel(PanelEnum.WIDGET);
+  };
+  const resetSelectedModal = () => {
+    selectedModal.value = {};
+  };
+  const setSelectedWidget = (widget, scope) => {
+    selectedWidget.value = widget;
+    selectedModal.value = {};
+    if (scope) {
+      setScope(scope);
+    }
+    togglePanel(PanelEnum.WIDGET);
+  };
+  const resetSelectedWidget = (scope) => {
+    selectedWidget.value = {};
+    selectedParentWidgets.value = [];
+    selectedConfig.value = { mode: "move" };
+    focusFormWidget.value = {};
+    selectedParentChildren.value = [];
+    setScope(scope ? scope : getScope());
+  };
+  const selectedStyle = computed(() => {
+    if (!selectedRef.value.style) {
+      selectedRef.value.style = {};
+    }
+    return selectedRef.value.style || commonStyle;
+  });
+  const selectedProps = computed(() => {
+    return selectedRef.value.props;
+  });
+  const selectedEvents = computed({
+    get() {
+      return selectedRef.value.events;
+    },
+    set(val) {
+      selectedRef.value.events = val;
+    }
+  });
+  const selectedAllEvents = computed(() => {
+    const { type } = selectedRef.value;
+    let widgetEvents;
+    if (platform.value === Platform.MOBILE) {
+      widgetEvents = allWidgetInfo.mobileWidgetEvents;
+    } else if (platform.value === Platform.PAD) {
+      widgetEvents = allWidgetInfo.padWidgetEvents;
+    } else {
+      widgetEvents = allWidgetInfo.webWidgetEvents;
+    }
+    const eventConfig = widgetEvents[type] || fieldFormEvents[type] || [];
+    if (typeof eventConfig === "function") {
+      return eventConfig(selectedRef.value);
+    } else {
+      return eventConfig;
+    }
+  });
+  const selectedAllPropEditors = computed(() => {
+    const { type } = selectedRef.value;
+    let widgetPropsEditors;
+    if (platform.value === Platform.MOBILE) {
+      widgetPropsEditors = allWidgetInfo.mobileWidgetPropEditors;
+    } else if (platform.value === Platform.PAD) {
+      widgetPropsEditors = allWidgetInfo.padWidgetPropEditors;
+    } else {
+      widgetPropsEditors = allWidgetInfo.webWidgetPropEditors;
+    }
+    let preCompInfo;
+    if (has(selectedRef.value, "preLocation")) {
+      const { scopeData: scopeData2 } = useScope();
+      preCompInfo = TreeHelper.findNode(scopeData2.value, (widget) => {
+        return widget.id === get(selectedRef.value, "preLocation");
+      });
+    }
+    return widgetPropsEditors[type] && isArray(widgetPropsEditors[type]) ? widgetPropsEditors[type] : fieldFormEditors[type]?.(selectedRef.value, preCompInfo);
+  });
+  const selectedAllStyleEditors = computed(() => {
+    const { type } = selectedRef.value;
+    let widgetStyleEditors;
+    if (platform.value === Platform.MOBILE) {
+      widgetStyleEditors = allWidgetInfo.mobileWidgetStyleEditors;
+    } else if (platform.value === Platform.PAD) {
+      widgetStyleEditors = allWidgetInfo.padWidgetStyleEditors;
+    } else {
+      widgetStyleEditors = allWidgetInfo.webWidgetStyleEditors;
+    }
+    return widgetStyleEditors[type] || fieldFormStyles[type]?.(selectedRef.value);
+  });
+  const selectedAllDesingerConfig = computed(() => {
+    let widgetDesignerConfig;
+    if (platform.value === Platform.MOBILE) {
+      widgetDesignerConfig = allWidgetInfo.mobileWidgetDesignerConfig;
+    } else if (platform.value === Platform.PAD) {
+      widgetDesignerConfig = allWidgetInfo.padWidgetDesignerConfig;
+    } else {
+      widgetDesignerConfig = allWidgetInfo.webWidgetDesignerConfig;
+    }
+    return widgetDesignerConfig[selectedRef.value.type];
+  });
+  const setFocusFormContainer = (formId) => {
+    focusFormWidget.value = formId && allWidget.value.find((e) => e.id === formId) || {};
+  };
+  const focusFormContainer = computed(() => {
+    if (subTableModalState.value && focusFormRef.value.type === BuiltinType.MODAL) {
+      return {
+        isFocus: true
+      };
+    }
+    if (focusFormRef.value && focusFormRef.value?.props?.model) {
+      return {
+        isFocus: true,
+        formModelKey: focusFormRef.value?.props?.model,
+        formId: focusFormRef.value?.id,
+        nodeType: focusFormRef.value.props?.nodeType,
+        // 工作流节点类型
+        /**子表关联父模型 */
+        refParentModelkey: focusFormRef.value.props?.refParentModelkey
+      };
+    }
+    return {
+      isFocus: false,
+      formModelKey: "",
+      formId: "",
+      nodeType: ""
+    };
+  });
+  return {
+    setSelectedModal,
+    resetSelectedModal,
+    setSelectedWidget,
+    resetSelectedWidget,
+    selectedAllPropEditors,
+    selectedAllStyleEditors,
+    selectedAllEvents,
+    selectedEvents,
+    selectedProps,
+    selectedStyle,
+    selectedWidget,
+    selectedRef,
+    selectModalRef,
+    focusFormContainer,
+    selectedAllDesingerConfig,
+    setFocusFormContainer,
+    focusFormRef,
+    hoverRef,
+    setHoverWidget,
+    selectedParentRef,
+    setSelectedParentWidgets,
+    selectedParentsRef,
+    selectedParentChildrenRef,
+    setSelectedParentChildrenRef,
+    selectedConfigRef,
+    setSelectedConfig
+  };
+}
+
+export { useSelectedWidget };

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

@@ -0,0 +1,21 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+export declare function useStyle(widget: LowCodeWidget.BasicSchema): {
+    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/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/useStyleEditor.d.ts

@@ -0,0 +1,27 @@
+import { PropType } from 'vue';
+import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
+export declare const props: {
+    editor: {
+        type: PropType<LowCodeWidget.StyleEditor>;
+        default: {};
+    };
+    widget: {
+        type: PropType<LowCodeWidget.BasicSchema | LowCodeModal.Modal>;
+    };
+    propConfig: {
+        type: ObjectConstructor;
+        default: {};
+    };
+};
+export declare const presetColor: string[];
+export declare function useStyleEditor<T = IObject>(editor: IObject): {
+    styleValue: import('vue').WritableComputedRef<T, T>;
+};
+export declare const btnTypeColor: {
+    type: string;
+    danger: boolean;
+    fontColor: string;
+    backgroundColor: string;
+}[];
+export declare const shadeColor: (color: string) => string;
+export declare function rgba2hex(r: string | number, g: string | number, b: string | number, a?: string | number): string;