@gct-paas/design 0.1.5-dev.6 → 0.1.5-dev.8

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,190 @@
+import { VNode, PropType, Component } from 'vue';
+import { DesignItemHighlighterBinding } from '../design-item-highlighter/design-item-highlighter';
+import { IDesignViewOptions } from '../../../interface';
+import { IDesignNode } from '@gct-paas/schema';
+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 | Component>;
+    c: import('../../../interface').IDesignViewController;
+    onClick: (e: MouseEvent) => void;
+    renderContainer: (node: IDesignNode, children?: IDesignNode[], parent?: IDesignNode) => VNode;
+    renderItem: (item: IDesignNode, parent?: IDesignNode) => import("vue/jsx-runtime").JSX.Element;
+    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('../../../interface').IDesignViewState, IObject, import('../../../interface').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<{
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            width: number;
+            height: number;
+        }, import('../../../interface').IPosRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            width: number;
+            height: number;
+        }>;
+        selectRect: import('vue').Ref<{
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            width: number;
+            height: number;
+        }, import('../../../interface').IPosRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            width: number;
+            height: 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('../../../interface').IHalfRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        actionHalfRect: import('vue').Ref<{
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }, import('../../../interface').IHalfRect | {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        }>;
+        onChangeHoverHalfRect: (rect: import('../../../interface').IHalfRect) => void;
+        onChangeActionHalfRect: (rect: import('../../../interface').IHalfRect) => void;
+        onChangeHoverPosRect: (rect: import('../../../interface').IPosRect) => void;
+        onChangeSelectPosRect: (rect: import('../../../interface').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('../../../interface').IHalfRect) => void>;
+            };
+            changePosRect: {
+                type: PropType<(opt: import('../../../interface').IPosRect) => void>;
+            };
+        }>, {
+            ns: import('@gct-paas/core').Namespace;
+            styleObj: import('vue').ComputedRef<{
+                display: string;
+                width: string;
+                height: string;
+                top: string;
+                left: string;
+                'background-color': string;
+                'clip-path': 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('../../../interface').IHalfRect) => void>;
+            };
+            changePosRect: {
+                type: PropType<(opt: import('../../../interface').IPosRect) => void>;
+            };
+        }>> & Readonly<{}>, {
+            mode: "hover" | "select";
+            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,274 @@
+import { DesignItemAttribute, DesignNodeType } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { MobileContainer } from "../../mobile-container/mobile-container.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import { DesignItemHighlighter } from "../design-item-highlighter/design-item-highlighter.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 { DesignDropContainer } from "../design-drop-container/design-drop-container.mjs";
+import DesignNotFound from "../design-not-found/design-not-found.mjs";
+import './design-content.css';/* empty css                     */
+import { calcStyle, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, h, isVNode, nextTick, onBeforeUnmount, onMounted, ref, resolveComponent, watch } from "vue";
+import { DesignNodeMode } from "@gct-paas/schema";
+//#region src/components/design/design-content/design-content.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var 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(DesignNotFound, { "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(DesignNotFound, { "message": `未找到节点类型：${node.type}` }, null);
+			return createVNode(DesignDropContainer, {
+				"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(DesignNotFound, { "message": `未找到节点类型：${item.type}` }, null);
+			if (provider.mode === DesignNodeMode.CONTAINER) {
+				const items = getChildren(item);
+				return h(typeof provider.component === "string" ? resolveComponent(provider.component) : 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(typeof provider.component === "string" ? resolveComponent(provider.component) : 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(typeof rootCom.value === "string" ? resolveComponent(rootCom.value) : 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) return _.getAttribute(DesignItemAttribute.ACTIVE_TAG) == "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)]);
+	}
+});
+//#endregion
+export { DesignContent as default };