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

package/es/plugins/design-page/design-page.provider.mjs

@@ -0,0 +1,109 @@
+import { EditorType, t } from '@gct-paas/core';
+import { DesignNodeMode, DesignNodeType, MaterialGroup, DesignViewPrefix } from '../../constant/index.mjs';
+import { NodeBaseProvider } from '../../provider/node-base/node-base.provider.mjs';
+import '../../provider/design-editor-node/design-editor-node.provider.mjs';
+import { DesignPageNode } from './design-page.data.mjs';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+
+class DesignPageProvider extends NodeBaseProvider {
+  mode = DesignNodeMode.PAGE;
+  type = DesignNodeType.PAGE;
+  component = "";
+  static materialConfig = {
+    group: MaterialGroup.LAYOUT,
+    label: "",
+    type: DesignNodeType.PAGE,
+    icon: "icon-a-gudingbiaosvg",
+    order: 0
+  };
+  model = {
+    type: "edit",
+    children: [
+      {
+        type: "container",
+        name: "group",
+        layout: "grid",
+        children: [
+          {
+            name: "collapse-style",
+            type: "collapse",
+            isContainer: true,
+            layout: "flex",
+            children: [
+              {
+                name: "collapse-pane-title-config",
+                type: "collapse-pane",
+                isContainer: true,
+                layout: "grid",
+                title: t("sys.designView.form.titleConfig"),
+                children: [
+                  {
+                    type: "item",
+                    label: t("sys.designView.form.titleBgColor"),
+                    name: "headerBgColor",
+                    noColon: true,
+                    labelAlign: "left",
+                    editor: {
+                      label: t("sys.designView.form.codeInfo"),
+                      type: EditorType.CHECK_SWITCH
+                    }
+                  }
+                ],
+                hidden(form) {
+                  return form.context.designType === DesignViewPrefix.CUSTOM_EXP_VIEW;
+                }
+              },
+              {
+                name: "collapse-pane-bg",
+                type: "collapse-pane",
+                isContainer: true,
+                layout: "grid",
+                title: t("sys.designView.form.background"),
+                children: [
+                  {
+                    type: "item",
+                    label: t("sys.designView.form.backgroundColor"),
+                    name: "background",
+                    noColon: true,
+                    labelAlign: "left",
+                    labelWidth: "56px",
+                    editor: {
+                      type: EditorType.COLOR
+                    }
+                  }
+                ]
+              },
+              {
+                name: "collapse-pane-spacing",
+                type: "collapse-pane",
+                isContainer: true,
+                layout: "grid",
+                title: t("sys.designView.form.margin"),
+                children: [
+                  {
+                    type: "hidden",
+                    name: "margin"
+                  },
+                  {
+                    type: "item",
+                    name: "padding",
+                    fields: ["margin", "padding"],
+                    editor: {
+                      type: DesignEditorType.STYLE_SPACING,
+                      showArea: ["padding"]
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  create(data) {
+    return new DesignPageNode(data);
+  }
+}
+
+export { DesignPageProvider };

package/es/plugins/design-panel/components/design-panel-component.css

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-panel-component .van-cell, .gct-design-panel-component .van-collapse-item__content {
+  background-color: transparent;
+}
+.gct-design-panel-component .van-collapse-item__content {
+  padding: 0;
+}
+.gct-design-panel-component__title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+  margin-left: 4px;
+}
+.gct-design-panel-component__title .icon-next {
+  margin-right: 4px;
+}
+
+.gct-design-panel-component__title-label {
+  width: 100%;
+}
+
+.gct-design-panel-component .van-collapse::after {
+  border-bottom: 0;
+}
+.gct-design-panel-component .van-cell__title > span::before {
+  content: " ";
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  width: 3px;
+  height: 16px;
+  background: var(--ant-primary-color);
+  transform: translate(0, -50%);
+}
+.gct-design-panel-component .van-collapse-item__title {
+  pointer-events: none;
+}
+.gct-design-panel-component .van-collapse-item__title::after {
+  border-bottom: 0;
+}
+.gct-design-panel-component .van-icon-arrow {
+  display: none;
+}

package/es/plugins/design-panel/components/design-panel.component.d.ts

@@ -0,0 +1,39 @@
+export declare const DesignPanelComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly count: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly data: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode>;
+        readonly required: true;
+    };
+    readonly children: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode[]>;
+        readonly default: () => never[];
+    };
+    readonly parent: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    activeNames: import('vue').Ref<string[], string[]>;
+    fontStyle: import('vue').ComputedRef<IObject>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly count: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly data: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode>;
+        readonly required: true;
+    };
+    readonly children: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode[]>;
+        readonly default: () => never[];
+    };
+    readonly parent: {
+        readonly type: import('vue').PropType<import('../../..').IDesignNode>;
+    };
+}>> & Readonly<{}>, {
+    readonly children: import('../../..').IDesignNode<import('../../..').IDesignNodeData>[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/design-panel/components/design-panel.component.mjs

@@ -0,0 +1,49 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed } from 'vue';
+import { useNamespace, calcFontStyle } from '@gct-paas/core';
+import { nodeContainerProps } from '../../../props/index.mjs';
+import './design-panel-component.css';/* empty css                             */
+
+const DesignPanelComponent = /* @__PURE__ */ defineComponent({
+  name: 'DesignPanelComponent',
+  props: nodeContainerProps,
+  setup(defProps) {
+    const ns = useNamespace('design-panel-component');
+    const activeNames = ref([defProps.data.id]);
+    const fontStyle = computed(() => {
+      return calcFontStyle(defProps.data.data);
+    });
+    return {
+      ns,
+      activeNames,
+      fontStyle
+    };
+  },
+  render() {
+    const v = this.data.data;
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is('not-collapse', this.data.data.collapse === 0)]
+    }, [createVNode(resolveComponent("van-collapse"), {
+      "modelValue": this.activeNames,
+      "onUpdate:modelValue": $event => this.activeNames = $event
+    }, {
+      default: () => [createVNode(resolveComponent("van-collapse-item"), {
+        "title": createVNode("span", {
+          "class": this.ns.e('title')
+        }, [v.icon && v.icon.icon ? createVNode(resolveComponent("icon-next"), {
+          "value": v.icon.icon,
+          "color": v.icon.color,
+          "background": v.icon.background,
+          "size": 18
+        }, null) : null, createVNode("span", {
+          "class": this.ns.e('title-label'),
+          "style": this.fontStyle
+        }, [this.data.label])]),
+        "name": this.data.id
+      }, {
+        default: this.$slots.default
+      })]
+    })]);
+  }
+});
+
+export { DesignPanelComponent };

package/es/plugins/design-panel/design-panel.data.d.ts

@@ -0,0 +1,64 @@
+import { IDesignNodeData } from '../../interface';
+import { DesignContainerNode } from '../../data';
+/**
+ * 面板数据
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 11:07:35
+ * @export
+ * @interface IDesignPanelNodeData
+ * @extends {IDesignNodeData}
+ */
+export interface IDesignPanelNodeData extends IDesignNodeData {
+    /**
+     * 面板标题
+     *
+     * @author zhanghanrui
+     * @date 2024-07-26 13:07:07
+     * @type {string}
+     */
+    title: string;
+    /**
+     * 面板头部图标
+     *
+     * @author zhanghanrui
+     * @date 2024-07-26 13:07:51
+     * @type {{ icon: string; color: string; background: string }}
+     */
+    icon: {
+        icon: string;
+        color: string;
+        background: string;
+    };
+    /**
+     * 是否支持折叠
+     *
+     * @author zhanghanrui
+     * @date 2024-07-26 13:07:38
+     * @type {(1 | 0)}
+     */
+    collapse: 1 | 0;
+    /**
+     * 是否默认折叠
+     *
+     * @default true
+     * @author zhanghanrui
+     * @date 2024-08-30 10:08:27
+     * @type {boolean}
+     */
+    defaultCollapse: boolean;
+}
+/**
+ * 设计面板节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 13:07:43
+ * @export
+ * @class DesignPanelNode
+ * @extends {DesignContainerNode<IDesignPanelNodeData>}
+ */
+export declare class DesignPanelNode extends DesignContainerNode<IDesignPanelNodeData> {
+    type: string;
+    get label(): string;
+    protected createData(): IDesignPanelNodeData;
+}

package/es/plugins/design-panel/design-panel.data.mjs

@@ -0,0 +1,27 @@
+import { DesignNodeType } from '../../constant/index.mjs';
+import { DesignContainerNode } from '../../data/design-container-node/design-container-node.mjs';
+import '@jsplumb/browser-ui';
+import 'lodash-es';
+import { t } from '@gct-paas/core';
+
+class DesignPanelNode extends DesignContainerNode {
+  type = DesignNodeType.PANEL;
+  get label() {
+    return this.data.title;
+  }
+  createData() {
+    return {
+      name: "",
+      collapse: 1,
+      title: t("sys.designView.components.panel.title"),
+      defaultCollapse: true,
+      icon: {
+        icon: "",
+        color: "",
+        background: ""
+      }
+    };
+  }
+}
+
+export { DesignPanelNode };

package/es/plugins/design-panel/design-panel.provider.d.ts

@@ -0,0 +1,23 @@
+import { IEditForm } from '@gct-paas/core';
+import { DesignNodeMode } from '../../constant';
+import { IMaterialData, INodeProvider } from '../../interface';
+import { DesignPanelNode } from './design-panel.data';
+import { NodeBaseProvider } from '../../provider';
+/**
+ * 面板
+ *
+ * @author zhanghanrui
+ * @date 2024-07-16 17:07:36
+ * @export
+ * @class DesignPanelProvider
+ * @extends {NodeBaseProvider<DesignPanelNode>}
+ * @implements {INodeProvider<DesignPanelNode>}
+ */
+export declare class DesignPanelProvider extends NodeBaseProvider<DesignPanelNode> implements INodeProvider<DesignPanelNode> {
+    mode: DesignNodeMode;
+    type: string;
+    component: string;
+    static materialConfig: IMaterialData;
+    model: IEditForm;
+    create(data?: DesignPanelNode): DesignPanelNode;
+}