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

package/es/components/design/design-content/design-content.css

@@ -0,0 +1,76 @@
+@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-content {
+  height: 100%;
+  overflow: hidden auto;
+  --design-drop-line-width: 4px;
+}
+.gct-design-content__container {
+  position: relative;
+  overflow: hidden auto;
+}
+.gct-design-content__container::-webkit-scrollbar {
+  display: none;
+}

package/es/components/design/design-content/design-content.d.ts

@@ -0,0 +1,191 @@
+import { VNode, PropType } from 'vue';
+import { DesignItemHighlighterBinding } from '../design-item-highlighter/design-item-highlighter';
+import { IDesignNode, IDesignViewOptions } from '../../../interface';
+export declare const DesignContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IDesignViewOptions>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    highlighter: import('vue').Ref<{
+        ns: {
+            readonly namespace: string;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string) => string;
+            m: (modifier?: string) => string;
+            be: (blockSuffix?: string, element?: string) => string;
+            em: (element?: string, modifier?: string) => string;
+            bm: (blockSuffix?: string, modifier?: string) => string;
+            bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+            is: (name: string, state?: boolean) => string;
+            cssVar: (object: Record<string, string>) => Record<string, string>;
+            cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+            cssVarName: (name: string) => string;
+            cssVarBlockName: (name: string) => string;
+        };
+        isHover: boolean;
+        isSelect: boolean;
+        setHover: (el?: HTMLElement) => void;
+        setSelect: (el?: HTMLElement) => void;
+    } | null, DesignItemHighlighterBinding | {
+        ns: {
+            readonly namespace: string;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string) => string;
+            m: (modifier?: string) => string;
+            be: (blockSuffix?: string, element?: string) => string;
+            em: (element?: string, modifier?: string) => string;
+            bm: (blockSuffix?: string, modifier?: string) => string;
+            bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+            is: (name: string, state?: boolean) => string;
+            cssVar: (object: Record<string, string>) => Record<string, string>;
+            cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+            cssVarName: (name: string) => string;
+            cssVarBlockName: (name: string) => string;
+        };
+        isHover: boolean;
+        isSelect: boolean;
+        setHover: (el?: HTMLElement) => void;
+        setSelect: (el?: HTMLElement) => void;
+    } | null>;
+    style: import('vue').ComputedRef<IObject>;
+    rootCom: import('vue').ComputedRef<string>;
+    c: import('../../..').IDesignViewController;
+    onClick: (e: MouseEvent) => void;
+    renderContainer: (node: IDesignNode, children?: IDesignNode[], parent?: IDesignNode) => VNode;
+    renderItem: (item: IDesignNode, parent?: IDesignNode) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>;
+    renderPage: () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IDesignViewOptions>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {
+    DesignItemHighlighter: import('vue').DefineComponent<{}, {
+        ns: import('@gct-paas/core').Namespace;
+        store: import('pinia').Store<string, import('../../..').IDesignViewState, object, import('../../..').IDesignViewActions>;
+        rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        isHover: import('vue').Ref<boolean, boolean>;
+        isSelect: import('vue').Ref<boolean, boolean>;
+        hoverEl: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        selectEl: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        hoverRect: import('vue').Ref<{
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }, import('../../..').IPosRect | {
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        selectRect: import('vue').Ref<{
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }, import('../../..').IPosRect | {
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        setHover: (el?: HTMLElement) => void;
+        setSelect: (el?: HTMLElement) => void;
+        hoverWidgetName: import('vue').ComputedRef<string>;
+        hoverHalfRect: import('vue').Ref<{
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }, import('../../..').IHalfRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        actionHalfRect: import('vue').Ref<{
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }, import('../../..').IHalfRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        onChangeHoverHalfRect: (rect: import('../../..').IHalfRect) => void;
+        onChangeActionHalfRect: (rect: import('../../..').IHalfRect) => void;
+        onChangeHoverPosRect: (rect: import('../../..').IPosRect) => void;
+        onChangeSelectPosRect: (rect: import('../../..').IPosRect) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+        DesignItemHighlighterContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            mode: {
+                type: PropType<"hover" | "select">;
+                default: string;
+            };
+            posEl: {
+                type: PropType<HTMLDivElement | null>;
+                default: null;
+            };
+            changeHalfRect: {
+                type: PropType<(opt: import('../../..').IHalfRect) => void>;
+            };
+            changePosRect: {
+                type: PropType<(opt: import('../../..').IPosRect) => void>;
+            };
+        }>, {
+            ns: import('@gct-paas/core').Namespace;
+            styleObj: import('vue').ComputedRef<{
+                'background-color': string;
+                'clip-path': string;
+                display: string;
+                width: string;
+                height: string;
+                top: string;
+                left: string;
+            }>;
+            calcHalfRect: () => {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            mode: {
+                type: PropType<"hover" | "select">;
+                default: string;
+            };
+            posEl: {
+                type: PropType<HTMLDivElement | null>;
+                default: null;
+            };
+            changeHalfRect: {
+                type: PropType<(opt: import('../../..').IHalfRect) => void>;
+            };
+            changePosRect: {
+                type: PropType<(opt: import('../../..').IPosRect) => void>;
+            };
+        }>> & Readonly<{}>, {
+            mode: "select" | "hover";
+            posEl: HTMLDivElement | null;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DesignContent;

package/es/components/design/design-content/design-content.mjs

@@ -0,0 +1,363 @@
+import { defineComponent, createVNode, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, isVNode, h, resolveComponent } from 'vue';
+import { DesignItemAttribute, DesignNodeMode, DesignNodeType } from '../../../constant/index.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import '../../../hooks/design-view/design-state.mjs';
+import { useNamespace, calcStyle } from '@gct-paas/core';
+import '@gct-paas/schema';
+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 { DesignItemHighlighter } from '../design-item-highlighter/design-item-highlighter.mjs';
+import { MobileContainer } from '../../mobile-container/mobile-container.mjs';
+import { DesignDragItem } from '../design-drag-item/design-drag-item.mjs';
+import { DesignDropLine } from '../design-drop-line/design-drop-line.mjs';
+import { DesignNotDragItem } from '../design-not-drag-item/design-not-drag-item.mjs';
+import './design-content.css';/* empty css                     */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const DesignContent = /* @__PURE__ */ defineComponent({
+  name: 'DesignContent',
+  components: {
+    DesignItemHighlighter
+  },
+  props: {
+    opts: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const ns = useNamespace('design-content');
+    const rootRef = ref(null);
+    const highlighter = ref(null);
+    const c = useDesignViewController();
+
+    /**
+     * 根据配置计算界面样式
+     */
+    const style = computed(() => {
+      if (c.store.pageNode) {
+        return calcStyle(c.store.pageNode.data);
+      }
+      return {};
+    });
+
+    /**
+     * 界面级跟组件，指定后会在绘制第一层之上包一层
+     */
+    const rootCom = computed(() => {
+      if (c.store.pageNode) {
+        const p = NodeRegister.get(c.store.pageNode.type, c.store.prefix);
+        if (p) {
+          return p.component;
+        }
+      }
+      return '';
+    });
+
+    /**
+     * 获取子节点
+     *
+     * @param {IDesignNode} item
+     * @returns {*}  {IDesignNode[]}
+     */
+    function getChildren(item) {
+      return item.type === DesignNodeType.PAGE ? c.store.getChildren() : c.store.getChildren(item.id);
+    }
+
+    /**
+     * 绘制可拖拽项
+     *
+     * @param index
+     * @param node
+     * @param parent
+     * @returns
+     */
+    const renderDragItem = (index, node, parent) => {
+      let _slot2;
+      const provider = NodeRegister.get(node.type, c.store.prefix);
+      if (!provider) {
+        return createVNode(resolveComponent("design-not-found"), {
+          "message": `未找到节点类型：${node.type}`
+        }, null);
+      }
+      if (provider.isDrag === false) {
+        let _slot;
+        return createVNode(DesignNotDragItem, {
+          "key": node.id,
+          "direction": "horizontal",
+          "group": parent.id,
+          "parent": parent,
+          "index": index,
+          "data": node
+        }, _isSlot(_slot = renderItem(node, parent)) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+      return createVNode(DesignDragItem, {
+        "key": node.id,
+        "direction": "horizontal",
+        "group": parent.id,
+        "parent": parent,
+        "index": index,
+        "data": node
+      }, _isSlot(_slot2 = renderItem(node, parent)) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    };
+
+    /**
+     * 绘制拖拽项
+     *
+     * @param provider
+     * @param node
+     * @param children
+     * @returns
+     */
+    const renderItems = (provider, node, children) => {
+      const content = [];
+      children.forEach((item, i) => {
+        if (provider) {
+          if (provider.isDrop) {
+            content.push(createVNode(DesignDropLine, {
+              "key": `after_drop_line_${item.id}`,
+              "group": item.id,
+              "index": i,
+              "item": item,
+              "parent": node,
+              "beforeItem": children[i - 1],
+              "direction": provider.direction ?? 'horizontal'
+            }, null));
+          }
+          content.push(renderDragItem(i, item, node));
+          if (provider.isDrop && children.length === i + 1) {
+            content.push(createVNode(DesignDropLine, {
+              "key": `after_drop_line_${item.id}`,
+              "group": item.id,
+              "index": i,
+              "item": item,
+              "parent": node,
+              "beforeItem": children[i - 1],
+              "direction": provider.direction ?? 'horizontal',
+              "isBefore": false
+            }, null));
+          }
+        }
+      });
+      return content;
+    };
+
+    /**
+     * 绘制拖拽容器
+     *
+     * @param node
+     * @param children
+     * @param parent
+     * @returns
+     */
+    const renderContainer = (node, children = getChildren(node), parent) => {
+      let _slot3;
+      const provider = NodeRegister.get(node.type, c.store.prefix);
+      if (!provider) {
+        return createVNode(resolveComponent("design-not-found"), {
+          "message": `未找到节点类型：${node.type}`
+        }, null);
+      }
+      return createVNode(resolveComponent("design-drop-container"), {
+        "key": node.id,
+        "node": node,
+        "items": children,
+        "parent": parent,
+        "direction": provider.direction ?? 'horizontal'
+      }, _isSlot(_slot3 = renderItems(provider, node, children)) ? _slot3 : {
+        default: () => [_slot3]
+      });
+    };
+
+    /**
+     * 绘制组件项
+     *
+     * @param item 当前项数据
+     * @param parent 父级项数据
+     * @returns
+     */
+    const renderItem = (item, parent) => {
+      const provider = NodeRegister.get(item.type, c.store.prefix);
+      if (!provider) {
+        return createVNode(resolveComponent("design-not-found"), {
+          "message": `未找到节点类型：${item.type}`
+        }, null);
+      }
+      if (provider.mode === DesignNodeMode.CONTAINER) {
+        const items = getChildren(item);
+        return h(resolveComponent(provider.component), {
+          key: item.id,
+          count: c.store.count,
+          data: item,
+          parent,
+          children: items
+        }, {
+          default: data => {
+            // 特殊指定父，根据父取绘制
+            if (data && data.node) {
+              return renderContainer(data.node, data.children ?? items, data.parent ?? item);
+            }
+            // 未指定父，根据当前项取绘制
+            return renderContainer(item, items, parent);
+          },
+          item: data => {
+            return renderDragItem(data.index, data.node, data.parent ?? item);
+          }
+        });
+      }
+      return h(resolveComponent(provider.component), {
+        key: item.id,
+        count: c.store.count,
+        data: item,
+        parent
+      });
+    };
+    const renderPage = () => {
+      const item = c.store.pageNode;
+      const items = getChildren(item);
+      return h(resolveComponent(rootCom.value), {
+        count: c.store.count,
+        node: c.store.pageNode
+      }, {
+        default: data => {
+          // 特殊指定父，根据父取绘制
+          if (data && data.node) {
+            return renderContainer(data.node, data.children ?? items, data.parent ?? item);
+          }
+          // 未指定父，根据当前项取绘制
+          return renderContainer(item, items);
+        },
+        item: data => {
+          return renderDragItem(data.index, data.node, data.parent ?? item);
+        }
+      });
+    };
+    const onMouseHover = e => {
+      if (!highlighter.value) {
+        return;
+      }
+      const pathList = e.composedPath().filter(_ => {
+        if (_ instanceof HTMLElement) {
+          const el = _;
+          const canDrop = el.getAttribute(DesignItemAttribute.ACTIVE_TAG);
+          return canDrop == 'true';
+        }
+        return false;
+      });
+      if (pathList.length && pathList.length > 0) {
+        const el = pathList[0];
+        highlighter.value.setHover(el);
+      } else {
+        if (highlighter.value.isHover) {
+          highlighter.value.setHover();
+        }
+      }
+    };
+    const onMouseenter = e => {
+      onMouseHover(e);
+    };
+    const onMouseleave = e => {
+      onMouseHover(e);
+    };
+    onMounted(() => {
+      rootRef.value.addEventListener('mouseenter', onMouseenter, {
+        capture: true
+      });
+      rootRef.value.addEventListener('mouseleave', onMouseleave, {
+        capture: true
+      });
+      rootRef.value.addEventListener('mouseover', onMouseenter, {
+        capture: true
+      });
+      rootRef.value.addEventListener('mouseout', onMouseleave, {
+        capture: true
+      });
+    });
+    onBeforeUnmount(() => {
+      rootRef.value.removeEventListener('mouseenter', onMouseenter, {
+        capture: true
+      });
+      rootRef.value.removeEventListener('mouseleave', onMouseleave, {
+        capture: true
+      });
+      rootRef.value.removeEventListener('mouseover', onMouseenter, {
+        capture: true
+      });
+      rootRef.value.removeEventListener('mouseout', onMouseleave, {
+        capture: true
+      });
+    });
+    const calcHighlighter = () => {
+      if (highlighter.value) {
+        if (c.store.selected) {
+          const el = rootRef.value.querySelector(`[${DesignItemAttribute.NODE_ID_TAG}="${c.store.selected.id}"]`);
+          highlighter.value.setSelect(el);
+        } else {
+          highlighter.value.setSelect();
+        }
+      }
+    };
+    watch(() => [c.store.selected, c.store.map.size], () => {
+      calcHighlighter();
+    });
+    watch(() => c.store.count, () => {
+      nextTick(() => {
+        calcHighlighter();
+      });
+    });
+    const onClick = e => {
+      e.stopPropagation();
+      c.store.activePage();
+    };
+    return {
+      ns,
+      rootRef,
+      highlighter,
+      style,
+      rootCom,
+      c,
+      onClick,
+      renderContainer,
+      renderItem,
+      renderPage
+    };
+  },
+  render() {
+    const content = this.renderContainer(this.c.store.pageNode);
+    content.props.style = this.style;
+    const container = this.$slots.container;
+    const child = this.rootCom ? this.renderPage() : content;
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": [this.ns.b()],
+      "onClick": this.onClick
+    }, [createVNode(DesignItemHighlighter, {
+      "ref": "highlighter"
+    }, null), !container ? createVNode(MobileContainer, {
+      "headerBgColor": this.c.store.pageNode?.data.headerBgColor,
+      "showTitleBar": this.opts.showMobileTitleBar
+    }, _isSlot(child) ? child : {
+      default: () => [child]
+    }) : container(child)]);
+  }
+});
+
+export { DesignContent };