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

package/es/components/design/design-item-highlighter-container/design-item-highlighter-container.mjs

@@ -0,0 +1,169 @@
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './design-item-highlighter-container.css';/* empty css                                        */
+import { maxBy, minBy } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, onUnmounted, ref, watch } from "vue";
+import { toRefs as toRefs$1, useElementBounding, useMutationObserver, useResizeObserver } from "@vueuse/core";
+//#region src/components/design/design-item-highlighter-container/design-item-highlighter-container.tsx
+function getAllScrollParents(element) {
+	const scrollParents = [];
+	let parent = element;
+	while (parent = parent.parentElement) if (parent instanceof HTMLElement && (parent.offsetWidth < parent.scrollWidth || parent.offsetHeight < parent.scrollHeight)) scrollParents.push(parent);
+	return scrollParents;
+}
+var DesignItemHighlighterContainer = /* @__PURE__ */ defineComponent({
+	name: "DesignItemHighlighterContainer",
+	props: {
+		mode: {
+			type: String,
+			default: "hover"
+		},
+		posEl: {
+			type: Object,
+			default: null
+		},
+		changeHalfRect: { type: Function },
+		changePosRect: { type: Function }
+	},
+	setup(props) {
+		const ns = useNamespace("design-item-highlighter-container");
+		const c = useDesignViewController();
+		const { posEl } = toRefs$1(props);
+		const elRect = useElementBounding(posEl);
+		useMutationObserver(posEl, () => {
+			changeSorts();
+		}, { attributes: true });
+		useResizeObserver(posEl, () => {
+			changeSorts();
+		});
+		const store = c.store;
+		const scrollEls = ref([]);
+		const defRect = -2;
+		const halfRect = ref({
+			top: defRect,
+			right: defRect,
+			bottom: defRect,
+			left: defRect
+		});
+		const styleConfig = computed(() => {
+			if (posEl.value) {
+				if (props.changePosRect) props.changePosRect({
+					width: elRect.width.value,
+					height: elRect.height.value,
+					top: elRect.top.value,
+					left: elRect.left.value,
+					right: elRect.right.value,
+					bottom: elRect.bottom.value
+				});
+				return {
+					display: store.isDragging ? "none" : "block",
+					width: elRect.width.value + "px",
+					height: elRect.height.value + "px",
+					top: elRect.top.value + "px",
+					left: elRect.left.value + "px"
+				};
+			}
+			if (props.changePosRect) props.changePosRect({
+				width: 0,
+				height: 0,
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0
+			});
+			return {
+				display: "none",
+				width: "0",
+				height: "0",
+				top: "0",
+				left: "0"
+			};
+		});
+		const changeSorts = () => {
+			if (posEl.value) {
+				const oldSorts = [...scrollEls.value];
+				scrollEls.value = getAllScrollParents(posEl.value);
+				const removeSorts = oldSorts.filter((el) => !scrollEls.value.includes(el));
+				const addSorts = scrollEls.value.filter((el) => !oldSorts.includes(el));
+				removeSorts.forEach((el) => {
+					el.removeEventListener("scroll", onScroll);
+				});
+				addSorts.forEach((el) => {
+					el.addEventListener("scroll", onScroll);
+				});
+				calcHalfRect();
+			}
+		};
+		const calcHalfRect = () => {
+			if (scrollEls.value.length > 0 && posEl.value) {
+				const rect = posEl.value.getBoundingClientRect();
+				const topScrollRect = maxBy(scrollEls.value, (el) => el.getBoundingClientRect().top).getBoundingClientRect();
+				const top = rect.top - topScrollRect.top + 4;
+				const right = minBy(scrollEls.value, (el) => el.getBoundingClientRect().right).getBoundingClientRect().right - rect.right + 4;
+				const bottom = minBy(scrollEls.value, (el) => el.getBoundingClientRect().bottom).getBoundingClientRect().bottom - rect.bottom + 4;
+				const leftScrollRect = maxBy(scrollEls.value, (el) => el.getBoundingClientRect().left).getBoundingClientRect();
+				const left = rect.left - leftScrollRect.left + 4;
+				halfRect.value = {
+					top: top >= 0 ? defRect : Math.abs(top),
+					right: right >= 0 ? defRect : Math.abs(right),
+					bottom: bottom >= 0 ? defRect : Math.abs(bottom),
+					left: left >= 0 ? defRect : Math.abs(left)
+				};
+			} else halfRect.value = {
+				top: defRect,
+				right: defRect,
+				bottom: defRect,
+				left: defRect
+			};
+			if (props.changeHalfRect) props.changeHalfRect(halfRect.value);
+			return halfRect.value;
+		};
+		function onScroll() {
+			calcHalfRect();
+		}
+		let t = -1;
+		let an = -1;
+		watch(posEl, () => {
+			changeSorts();
+			if (t !== -1) {
+				clearTimeout(t);
+				t = -1;
+			}
+			if (an !== -1) {
+				cancelAnimationFrame(an);
+				an = -1;
+			}
+			if (posEl.value) {
+				t = setInterval(() => {
+					elRect.update();
+				}, 50);
+				an = requestAnimationFrame(() => {
+					elRect.update();
+				});
+			}
+		});
+		onUnmounted(() => {
+			clearInterval(t);
+		});
+		return {
+			ns,
+			styleObj: computed(() => {
+				return {
+					...styleConfig.value,
+					"background-color": store.isDragging || props.mode === "select" ? "transparent" : "",
+					"clip-path": `inset(${halfRect.value.top}px ${halfRect.value.right}px ${halfRect.value.bottom}px ${halfRect.value.left}px)`
+				};
+			}),
+			calcHalfRect
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"style": this.styleObj,
+			"class": [this.ns.b(), this.ns.m(this.mode)]
+		}, [createVNode("div", { "class": [this.ns.e("mask")] }, null)]);
+	}
+});
+//#endregion
+export { DesignItemHighlighterContainer };

package/es/components/design/design-item-hover-title/design-item-hover-title.css

@@ -0,0 +1,12 @@
+.gct-design-item-hover-title {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 8px;
+  color: #fff;
+  background-color: rgb(from var(--ant-primary-color) r g b / 64%);
+}

package/es/components/design/design-item-hover-title/design-item-hover-title.d.ts

@@ -0,0 +1,60 @@
+export declare const DesignItemHoverTitle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    hoverEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    elRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    style: import('vue').ComputedRef<{
+        opacity: number;
+        top: string;
+        left: string;
+    }>;
+    isShow: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    hoverEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+}>> & Readonly<{}>, {
+    top: number;
+    left: number;
+    content: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-hover-title/design-item-hover-title.mjs

@@ -0,0 +1,60 @@
+import './design-item-hover-title.css';/* empty css                             */
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, toRefs } from "vue";
+import { useElementBounding } from "@vueuse/core";
+//#region src/components/design/design-item-hover-title/design-item-hover-title.tsx
+var DesignItemHoverTitle = /* @__PURE__ */ defineComponent({
+	name: "DesignItemHoverTitle",
+	props: {
+		top: {
+			type: Number,
+			default: 0
+		},
+		left: {
+			type: Number,
+			default: 0
+		},
+		content: {
+			type: String,
+			default: ""
+		},
+		halfRect: {
+			type: Object,
+			required: true
+		},
+		hoverEl: { type: HTMLDivElement }
+	},
+	setup(props) {
+		const ns = useNamespace("design-item-hover-title");
+		const elRef = ref(null);
+		const { hoverEl } = toRefs(props);
+		const { width, height } = useElementBounding(elRef);
+		const style = computed(() => {
+			return {
+				opacity: isShow.value ? 1 : 0,
+				top: `${props.top - height.value}px`,
+				left: `${props.left - width.value}px`
+			};
+		});
+		const isShow = computed(() => {
+			if (!hoverEl.value) return true;
+			const { top, right, bottom, left } = props.halfRect;
+			return !(top > 0 || right > 0 || bottom - hoverEl.value.clientHeight > 0 || left - hoverEl.value.clientWidth > 0);
+		});
+		return {
+			ns,
+			elRef,
+			style,
+			isShow
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "elRef",
+			"class": this.ns.b(),
+			"style": this.style
+		}, [this.content]);
+	}
+});
+//#endregion
+export { DesignItemHoverTitle };

package/es/components/design/design-item-preview/design-item-preview.css

@@ -0,0 +1,91 @@
+@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-item-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  display: none;
+  align-items: center;
+  height: 18px;
+  color: black;
+  pointer-events: none;
+  background-color: #B8B8B8;
+  border-radius: 1px;
+  box-shadow: 0 0 8px 0 rgba(33, 37, 40, 0.12);
+}
+.gct-design-item-preview__icon {
+  margin-top: 2px;
+  margin-left: 6px;
+}
+
+.gct-design-item-preview__label {
+  padding: 0 6px;
+  font-size: 12px;
+}
+
+.gct-design-item-preview.is-dragging {
+  display: flex;
+}

package/es/components/design/design-item-preview/design-item-preview.d.ts

@@ -0,0 +1 @@
+export declare const DesignItemPreview: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-preview/design-item-preview.mjs

@@ -0,0 +1,32 @@
+import './design-item-preview.css';/* empty css                          */
+import { t, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent } from "vue";
+import { toRefs as toRefs$1 } from "@vueuse/core";
+import { useDragLayer } from "vue3-dnd";
+//#region src/components/design/design-item-preview/design-item-preview.tsx
+var DesignItemPreview = /* @__PURE__ */ defineComponent({
+	name: "DesignItemPreview",
+	setup() {
+		const ns = useNamespace("design-item-preview");
+		const { isDragging, item, offset } = toRefs$1(useDragLayer((monitor) => {
+			return {
+				isDragging: !!monitor.isDragging(),
+				item: monitor.getItem(),
+				offset: monitor.getClientOffset()
+			};
+		}));
+		const pos = computed(() => {
+			if (!offset.value) return "";
+			const { x, y } = offset.value;
+			return `transform: translate(${x}px, ${y}px)`;
+		});
+		return () => {
+			return createVNode("div", {
+				"class": [ns.b(), ns.is("dragging", item.value?.data && isDragging.value)],
+				"style": pos.value
+			}, [createVNode("span", { "class": ns.e("icon") }, [createVNode("i", { "class": "iconfont icon-yidong" }, null)]), createVNode("span", { "class": ns.e("label") }, [t(item.value?.data?.label || "sys.pageDesigner.unknownComponent")])]);
+		};
+	}
+});
+//#endregion
+export { DesignItemPreview };

package/es/components/design/design-not-drag-item/design-not-drag-item.css

@@ -0,0 +1,67 @@
+@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-not-drag-item {
+  cursor: pointer;
+}

package/es/components/design/design-not-drag-item/design-not-drag-item.d.ts

@@ -0,0 +1,50 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '@gct-paas/schema';
+import { INodeProvider } from '../../../interface';
+export declare const DesignNotDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../../..').IDesignViewController;
+    style: import('vue').ComputedRef<IObject>;
+    provider: INodeProvider<IDesignNode<import('@gct-paas/schema').IDesignNodeData>>;
+    onActive: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-not-drag-item/design-not-drag-item.mjs

@@ -0,0 +1,68 @@
+import { DesignItemAttribute } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './design-not-drag-item.css';/* empty css                           */
+import { calcStyle, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, mergeProps, toRefs } from "vue";
+//#region src/components/design/design-not-drag-item/design-not-drag-item.tsx
+var DesignNotDragItem = /* @__PURE__ */ defineComponent({
+	name: "DesignNotDragItem",
+	props: {
+		group: {
+			type: String,
+			required: true
+		},
+		parent: { type: Object },
+		direction: {
+			type: String,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("design-not-drag-item");
+		const c = useDesignViewController();
+		const provider = NodeRegister.get(props.data.type, c.store.prefix);
+		const { data } = toRefs(props.data);
+		const style = computed(() => {
+			return calcStyle(data.value);
+		});
+		const onActive = (e) => {
+			e.stopPropagation();
+			c.store.setActive(props.data);
+		};
+		return {
+			ns,
+			c,
+			style,
+			provider,
+			onActive
+		};
+	},
+	render() {
+		return createVNode("div", mergeProps({ "id": this.data.id }, {
+			[DesignItemAttribute.NODE_ID_TAG]: this.data.id,
+			[DesignItemAttribute.ACTIVE_TAG]: true,
+			[DesignItemAttribute.DESIGN_NAME]: this.data.label,
+			[DesignItemAttribute.DRAG_GROUP_TYPE]: this.provider.type,
+			[DesignItemAttribute.GROUP_TAG]: this.group,
+			[DesignItemAttribute.INDEX_TAG]: this.index,
+			[DesignItemAttribute.SELECTOR_INDEX]: this.provider.selectorIndex ?? 0
+		}, {
+			"class": this.ns.b(),
+			"style": this.style,
+			"onClick": this.onActive
+		}), [this.$slots.default?.()]);
+	}
+});
+//#endregion
+export { DesignNotDragItem };

package/es/components/design/design-not-found/design-not-found.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-not-found {
+  font-size: 14px;
+  color: #C3C3C3;
+}