@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

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

@@ -1,76 +0,0 @@
-@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

@@ -1,191 +0,0 @@
-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

@@ -1,361 +0,0 @@
-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/useDesigner.mjs';
-import '../../../hooks/design-view/useGlobal.mjs';
-import '../../../hooks/design-view/usePage.mjs';
-import '../../../hooks/design-view/usePageOccupy.mjs';
-import '../../../hooks/design-view/usePropEditor.mjs';
-import '../../../hooks/design-view/useScope.mjs';
-import '../../../hooks/design-view/useSelectedWidget.mjs';
-import '@gct-paas/schema';
-import '../../../hooks/design-view/useToolkit.mjs';
-import '../../../hooks/design-view/useWidget.mjs';
-import '../../../hooks/develop/useCacheHistory.mjs';
-import { useNamespace, calcStyle } from '@gct-paas/core';
-import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.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 };