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

package/es/plugins/design-editor/user-signature/user-signature.css

@@ -0,0 +1,79 @@
+@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-editor-user-signature__preview {
+  width: 120px;
+  height: 68px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  border: 1px dashed #d9d9d9;
+  background-color: #f7f8fa;
+  border-radius: 4px;
+}
+.gct-design-editor-user-signature__preview .iconfont {
+  font-size: 40px;
+  color: rgb(195, 195, 195);
+}

package/es/plugins/design-editor/user-signature/user-signature.d.ts

@@ -0,0 +1,46 @@
+export declare const UserSignature: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    data: {
+        type: import('vue').PropType<import('../../..').IDesignEditorNode>;
+        required: boolean;
+        default: () => {};
+    };
+    field: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+    value: {
+        type: import('vue').PropType<any>;
+        default: string;
+    };
+    parent: {
+        type: import('vue').PropType<import('../../..').IDesignNode>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    data: {
+        type: import('vue').PropType<import('../../..').IDesignEditorNode>;
+        required: boolean;
+        default: () => {};
+    };
+    field: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+    value: {
+        type: import('vue').PropType<any>;
+        default: string;
+    };
+    parent: {
+        type: import('vue').PropType<import('../../..').IDesignNode>;
+    };
+}>> & Readonly<{}>, {
+    data: import('../../..').IDesignEditorNode<import('../../..').IDesignEditorData>;
+    value: any;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/design-editor/user-signature/user-signature.mjs

@@ -0,0 +1,23 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { nodeEditorProps } from '../../../props/index.mjs';
+import './user-signature.css';/* empty css                     */
+
+const UserSignature = /* @__PURE__ */ defineComponent({
+  name: 'UserSignature',
+  props: nodeEditorProps,
+  setup() {
+    const ns = useNamespace('design-editor-user-signature');
+    return () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('preview')
+      }, [createVNode("i", {
+        "class": "iconfont icon-tupian-shili"
+      }, null)])]);
+    };
+  }
+});
+
+export { UserSignature };

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

@@ -0,0 +1,68 @@
+@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-grid-component {
+  overflow: hidden;
+  min-height: 30px;
+}

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

@@ -0,0 +1,39 @@
+export declare const DesignGridComponent: 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;
+    c: import('../../..').IDesignViewController;
+    activeKey: import('vue').Ref<string, string>;
+}, {}, {}, {}, 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-grid/components/design-grid.component.mjs

@@ -0,0 +1,60 @@
+import { defineComponent, createVNode, resolveComponent, ref, isVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { nodeContainerProps } from '../../../props/index.mjs';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import 'lodash-es';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import './design-grid.component.css';/* empty css                            */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const DesignGridComponent = /* @__PURE__ */ defineComponent({
+  name: 'DesignGridComponent',
+  props: nodeContainerProps,
+  setup(setupProps) {
+    const ns = useNamespace('design-grid-component');
+    const c = useDesignViewController();
+    const activeKey = ref(setupProps.children[0]?.id || '');
+    return {
+      ns,
+      c,
+      activeKey
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode(resolveComponent("a-row"), {
+      "class": this.ns.b(),
+      "gutter": this.data.data.gutter
+    }, _isSlot(_slot = this.children.map((item, i) => {
+      return createVNode(resolveComponent("a-col"), {
+        "class": this.ns.e('col'),
+        "span": item.data.span
+      }, {
+        default: () => [this.$slots.item?.({
+          index: i,
+          node: item,
+          parent: this.data
+        })]
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { DesignGridComponent };

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

@@ -0,0 +1,34 @@
+import { IDesignNodeData } from '../../interface';
+import { DesignContainerNode } from '../../data';
+/**
+ * 表格节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-30 10:07:58
+ * @export
+ * @interface IDesignGridNode
+ * @extends {IDesignNodeData}
+ */
+export interface IDesignGridNode extends IDesignNodeData {
+    /**
+     * 间距
+     *
+     * @author zhanghanrui
+     * @date 2024-07-30 10:07:53
+     * @type {number}
+     */
+    gutter: number;
+}
+/**
+ * 设计栅格容器节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 13:07:43
+ * @export
+ * @class DesignGridNode
+ * @extends {DesignContainerNode<IDesignGridNode>}
+ */
+export declare class DesignGridNode extends DesignContainerNode<IDesignGridNode> {
+    type: string;
+    protected createData(): IDesignGridNode;
+}

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

@@ -0,0 +1,17 @@
+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 DesignGridNode extends DesignContainerNode {
+  type = DesignNodeType.GRID;
+  createData() {
+    return {
+      name: t("sys.designView.components.grid.title"),
+      gutter: 8
+    };
+  }
+}
+
+export { DesignGridNode };

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

@@ -0,0 +1,26 @@
+import { IEditForm } from '@gct-paas/core';
+import { DesignNodeMode } from '../../constant';
+import { IDesignViewController, IDragDataItem, IMaterialData, INodeProvider } from '../../interface';
+import { DesignGridNode } from './design-grid.data';
+import { NodeBaseProvider } from '../../provider';
+/**
+ * 栅格容器
+ *
+ * @author zhanghanrui
+ * @date 2024-07-16 17:07:32
+ * @export
+ * @class DesignGridProvider
+ * @extends {NodeBaseProvider<DesignGridNode>}
+ * @implements {INodeProvider<DesignGridNode>}
+ */
+export declare class DesignGridProvider extends NodeBaseProvider<DesignGridNode> implements INodeProvider<DesignGridNode> {
+    mode: DesignNodeMode;
+    type: string;
+    isDrop: boolean;
+    component: string;
+    static materialConfig: IMaterialData;
+    model: IEditForm;
+    create(data?: DesignGridNode): DesignGridNode;
+    beforeDrop(c: IDesignViewController, item?: IDragDataItem<DesignGridNode>): Promise<DesignGridNode | null>;
+    afterDrop(c: IDesignViewController, item?: IDragDataItem<DesignGridNode>): Promise<boolean>;
+}

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

@@ -0,0 +1,273 @@
+import { EditorType, t } from '@gct-paas/core';
+import { DesignNodeMode, DesignNodeType, MaterialGroup } from '../../constant/index.mjs';
+import { DesignGridNode } from './design-grid.data.mjs';
+import { NodeBaseProvider } from '../../provider/node-base/node-base.provider.mjs';
+import '../../provider/design-editor-node/design-editor-node.provider.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+
+class DesignGridProvider extends NodeBaseProvider {
+  mode = DesignNodeMode.CONTAINER;
+  type = DesignNodeType.GRID;
+  isDrop = false;
+  component = "DesignGridComponent";
+  static materialConfig = {
+    group: MaterialGroup.LAYOUT,
+    label: "栅格容器",
+    type: DesignNodeType.GRID,
+    icon: "icon-grid",
+    order: 0
+  };
+  model = {
+    type: "edit",
+    children: [
+      {
+        type: "tab",
+        name: "tab",
+        isContainer: true,
+        layout: "flex",
+        navPosition: "center",
+        height: "100%",
+        children: [
+          {
+            name: "pane1",
+            type: "tab-pane",
+            isContainer: true,
+            title: t("sys.designView.form.attribute"),
+            layout: "grid",
+            children: [
+              {
+                name: "collapse-property",
+                type: "collapse",
+                isContainer: true,
+                layout: "flex",
+                children: [
+                  {
+                    name: "collapse-pane-config",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    style: { "padding-top": 0 },
+                    title: t("sys.designView.components.grid.form.group"),
+                    children: [
+                      {
+                        type: "item",
+                        labelPosition: "top",
+                        name: "tabItems",
+                        editor: {
+                          title: t("sys.designView.components.grid.form.label"),
+                          type: DesignEditorType.CHILD_LIST_EDITOR,
+                          childDesignType: DesignNodeType.GRID_ITEM,
+                          childEditFieldKey: "span",
+                          sort: false,
+                          select: false,
+                          editorType: "number",
+                          editorProps: {
+                            min: 1,
+                            max: 24
+                          },
+                          showLabel: true,
+                          props: {
+                            size: "small"
+                          }
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.designView.components.grid.form.label2"),
+                        labelPosition: "top",
+                        name: "gutter",
+                        defaultValue: 20,
+                        editor: {
+                          type: EditorType.NUMBER,
+                          addonAfter: "px",
+                          min: 0,
+                          max: 100,
+                          props: {
+                            size: "small"
+                          }
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: "pane2",
+            type: "tab-pane",
+            class: "style-pane",
+            title: t("sys.designView.form.style"),
+            isContainer: true,
+            layout: "grid",
+            children: [
+              {
+                name: "collapse-style",
+                type: "collapse",
+                isContainer: true,
+                layout: "flex",
+                children: [
+                  {
+                    name: "collapse-pane-layout",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.form.layout"),
+                    children: [
+                      {
+                        type: "item",
+                        label: t("sys.designView.form.position"),
+                        name: "position",
+                        noColon: true,
+                        labelAlign: "left",
+                        labelWidth: "34px",
+                        editor: {
+                          type: DesignEditorType.STYLE_POSITION
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.width"),
+                        name: "width",
+                        noColon: true,
+                        labelAlign: "left",
+                        labelWidth: "34px",
+                        editor: {
+                          type: EditorType.LENGTH_UNIT
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.height"),
+                        name: "height",
+                        noColon: true,
+                        labelAlign: "left",
+                        labelWidth: "34px",
+                        editor: {
+                          type: EditorType.LENGTH_UNIT
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    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: "padding"
+                      },
+                      {
+                        type: "item",
+                        name: "margin",
+                        fields: ["margin", "padding"],
+                        editor: {
+                          type: DesignEditorType.STYLE_SPACING,
+                          showArea: ["margin"]
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    name: "collapse-pane-border",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.form.border"),
+                    children: [
+                      {
+                        type: "item",
+                        name: "border",
+                        editor: {
+                          type: DesignEditorType.STYLE_BORDER,
+                          showArea: ["basics"]
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  create(data) {
+    return new DesignGridNode(data);
+  }
+  async beforeDrop(c, item) {
+    c.store.disableCache();
+    return item ? item.data : null;
+  }
+  async afterDrop(c, item) {
+    if (!item) {
+      return false;
+    }
+    const { data } = item;
+    const children = c.store.getChildren(data);
+    if (children && children.length > 0) {
+      return false;
+    }
+    const res = await _gct.openUtil.modal(
+      "col-modal",
+      {},
+      {
+        title: t("sys.designView.components.grid.modal.title"),
+        width: 642
+      }
+    );
+    if (res && res.ok && res.data) {
+      const d = res.data[0];
+      if (d && d.spanArr) {
+        const items = d.spanArr;
+        for (let i = 0; i < items.length; i++) {
+          const span = items[i];
+          const params = {
+            data: { span }
+          };
+          const node = NodeRegister.get(
+            DesignNodeType.GRID_ITEM,
+            c.store.prefix
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ).create(params);
+          node.data.name = `${node.data.name}${i + 1}`;
+          c.store.setNode(data.id, node);
+        }
+      }
+      c.store.enableCache();
+      c.store.cacheHistory();
+      return true;
+    }
+    c.store.deleteNode(data.id);
+    return false;
+  }
+}
+
+export { DesignGridProvider };