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

package/es/components/design/design-drop-container/design-drop-container.mjs

@@ -0,0 +1,182 @@
+import { DesignViewPrefix } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { isCanCrop } from "../../../utils/can-drop/can-drop.mjs";
+import "../../../utils/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './design-drop-container.css';/* empty css                            */
+import { clone } from "lodash-es";
+import { t, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, nextTick, onMounted, onUnmounted, ref, vShow, watch, withDirectives } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useDrop } from "vue3-dnd";
+//#region src/components/design/design-drop-container/design-drop-container.tsx
+var DesignDropContainer = /* @__PURE__ */ defineComponent({
+	name: "DesignDropContainer",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		items: {
+			type: Array,
+			required: true
+		},
+		parent: { type: Object },
+		showInfo: {
+			type: Boolean,
+			default: true
+		},
+		infoMsg: {
+			type: String,
+			default: "sys.designView.drop.info"
+		},
+		direction: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("design-drop-container");
+		const rootRef = ref(null);
+		const c = useDesignViewController();
+		const group = computed(() => {
+			return props.node.id;
+		});
+		const store = c.store;
+		const provider = NodeRegister.get(props.node.type, store.prefix);
+		{
+			function onTapExpansion(keys) {
+				if (collect.value.isOver) keys.push(props.node.id);
+			}
+			c.hooks.expansion.tap(onTapExpansion);
+			onUnmounted(() => {
+				c.hooks.expansion.removeTap(onTapExpansion);
+			});
+		}
+		const isExpansion = ref(false);
+		watch(() => store.count, () => {
+			isExpansion.value = store.isDragging && store.expansions.has(props.node.id);
+		});
+		const isDropMask = computed(() => {
+			return provider.isDrop && collect.value && (collect.value.isShallowOver && collect.value.canDrop || collect.value.isOver && store.dropContainer && props.node.id === store.dropContainer.id);
+		});
+		const [collect, drop] = useDrop({
+			accept: DesignViewPrefix.CUSTOM_HOME,
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true }),
+					isOver: monitor.isOver()
+				};
+			},
+			canDrop(item) {
+				return isCanCrop(props.node, store, item);
+			},
+			drop(item, monitor) {
+				if (monitor.canDrop() === false || monitor.isOver({ shallow: true }) === false) return;
+				const asyncDrop = async () => {
+					let data = clone(item.data);
+					const p = NodeRegister.get(data.type, c.store.prefix);
+					if (p.beforeDrop) {
+						const _data = await p.beforeDrop(c, item);
+						if (!data) return {
+							group: group.value,
+							success: false
+						};
+						data = _data;
+					}
+					const oldPKey = c.store.getParentKey(data.id, null);
+					const newPKey = props.node ? props.node.id : null;
+					c.store.disableCache();
+					const isNew = !c.store.map.has(data.id);
+					const node = c.store.setNode(newPKey, data);
+					if (node) {
+						if (isNew === false) c.store.moveTreeItem(oldPKey, newPKey, node.id);
+						c.store.enableCache();
+						c.store.cacheHistory();
+						if (p.afterDrop) {
+							if (await p.afterDrop(c, item) === false) return {
+								group: group.value,
+								success: false
+							};
+						}
+						nextTick(() => {
+							c.store.setActive(node);
+						});
+					}
+					return {
+						group: group.value,
+						success: true
+					};
+				};
+				return { asyncDrop: asyncDrop() };
+			}
+		});
+		drop(rootRef);
+		watch(collect, (_) => {
+			if (_.canDrop && _.isShallowOver) {
+				store.dropContainer = props.node;
+				c.setExpansion([props.node.id]);
+			}
+		});
+		const count = ref(0);
+		function force() {
+			count.value += 1;
+		}
+		useResizeObserver(rootRef, () => {
+			force();
+		});
+		function onScroll() {
+			force();
+		}
+		onMounted(() => {
+			if (rootRef.value) rootRef.value.onscrollend = () => {
+				force();
+			};
+		});
+		watch(() => store.expansions.size, () => {
+			if (rootRef.value) if (store.expansions.size === 0) rootRef.value.removeEventListener("scroll", onScroll);
+			else rootRef.value.addEventListener("scroll", onScroll);
+		});
+		const getMaskStyle = () => {
+			if (rootRef.value) return {
+				count: count.value,
+				width: rootRef.value.scrollWidth + "px",
+				height: rootRef.value.scrollHeight + "px"
+			};
+			return {};
+		};
+		return {
+			ns,
+			isExpansion,
+			rootRef,
+			collect,
+			isDropMask,
+			getMaskStyle
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [
+				this.ns.b(),
+				this.ns.m(this.direction),
+				this.ns.is("over", this.collect.isShallowOver && this.collect.canDrop),
+				this.ns.is("expansion", this.isExpansion),
+				this.ns.is("not-children", this.items.length === 0)
+			]
+		}, [
+			this.items.length === 0 && this.showInfo !== false ? createVNode("div", { "class": this.ns.e("drag-info") }, [createVNode("span", null, [t(this.infoMsg)])]) : null,
+			this.$slots.default?.(),
+			withDirectives(createVNode("div", {
+				"style": this.getMaskStyle(),
+				"class": this.ns.e("drop-mask")
+			}, null), [[vShow, this.isDropMask]])
+		]);
+	}
+});
+//#endregion
+export { DesignDropContainer };

package/es/components/design/design-drop-line/design-drop-line.css

@@ -0,0 +1,165 @@
+@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-drop-line {
+  transition: all 0.3s ease-in-out;
+}
+.gct-design-drop-line__vertical {
+  display: inline-block;
+  height: auto;
+  padding: 0;
+  vertical-align: top;
+}
+.gct-design-drop-line__vertical.is-show {
+  padding: 0 4px;
+}
+
+.gct-design-drop-line__horizontal {
+  width: 100%;
+  min-width: inherit;
+  padding: 0;
+}
+.gct-design-drop-line__horizontal.is-show {
+  padding: 4px 0;
+}
+
+.gct-design-drop-line-drop-container {
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  --bg-color: transparent;
+}
+.gct-design-drop-line-drop-container.is-can-drop {
+  --bg-color: var(--ant-primary-color);
+}
+
+.gct-design-drop-line-drop-container__vertical {
+  width: 0;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+}
+.gct-design-drop-line-drop-container__vertical.is-show {
+  width: var(--design-drop-line-width, 4px);
+}
+
+.gct-design-drop-line-drop-container__vertical--line {
+  width: 2px;
+  height: 100%;
+  min-height: inherit;
+  margin-left: 1px;
+  background-color: var(--bg-color);
+}
+
+.gct-design-drop-line-drop-container__vertical--start-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--bg-color);
+}
+
+.gct-design-drop-line-drop-container__vertical--end-line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--bg-color);
+}
+
+.gct-design-drop-line-drop-container__horizontal {
+  width: 100%;
+  min-width: inherit;
+  height: 0;
+  overflow: hidden;
+}
+.gct-design-drop-line-drop-container__horizontal.is-show {
+  height: var(--design-drop-line-width, 4px);
+}
+
+.gct-design-drop-line-drop-container__horizontal--line {
+  width: 100%;
+  height: 2px;
+  margin-top: 1px;
+  background-color: var(--bg-color);
+}
+
+.gct-design-drop-line-drop-container__horizontal--start-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--bg-color);
+}
+
+.gct-design-drop-line-drop-container__horizontal--end-line {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--bg-color);
+}

package/es/components/design/design-drop-line/design-drop-line.d.ts

@@ -0,0 +1,73 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '@gct-paas/schema';
+import { IDropCollect } from '../../../interface';
+export declare const DesignDropLine: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    item: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    beforeItem: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    isBefore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    getStyleObj: () => {
+        height: string;
+    } | {
+        height?: undefined;
+    };
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    collect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    item: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    beforeItem: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    isBefore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    direction: "horizontal" | "vertical";
+    isBefore: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-drop-line/design-drop-line.mjs

@@ -0,0 +1,136 @@
+import { DesignViewPrefix, InsertNodeMode } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { isCanCrop } from "../../../utils/can-drop/can-drop.mjs";
+import "../../../utils/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './design-drop-line.css';/* empty css                       */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, nextTick, ref, watch } from "vue";
+import { useDrop } from "vue3-dnd";
+//#region src/components/design/design-drop-line/design-drop-line.tsx
+var DesignDropLine = /* @__PURE__ */ defineComponent({
+	name: "DesignDropLine",
+	props: {
+		group: {
+			type: String,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		parent: {
+			type: Object,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		beforeItem: { type: Object },
+		direction: {
+			type: String,
+			default: "horizontal"
+		},
+		isBefore: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("design-drop-line");
+		const elRef = ref(null);
+		const c = useDesignViewController();
+		const getStyleObj = () => {
+			if (isExpansion.value === false && props.direction === "vertical") return { height: "auto" };
+			return {};
+		};
+		const isExpansion = ref(false);
+		if (props.parent) watch(() => c.store.count, () => {
+			isExpansion.value = c.store.isDragging && c.store.expansions.has(props.parent.id);
+		});
+		const [collect, drop] = useDrop({
+			accept: DesignViewPrefix.CUSTOM_HOME,
+			collect(monitor) {
+				const isShallowOver = monitor.isOver({ shallow: true });
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver,
+					isOver: monitor.isOver()
+				};
+			},
+			canDrop(item) {
+				return isCanCrop(props.parent, c.store, item);
+			},
+			drop(item, monitor) {
+				if (!monitor.isOver({ shallow: true })) return;
+				const asyncDrop = async () => {
+					let _data = item.data;
+					const p = NodeRegister.get(_data.type, c.store.prefix);
+					if (p.beforeDrop) {
+						const data = await p.beforeDrop(c, item);
+						if (!data) return {
+							group: props.group,
+							success: false
+						};
+						_data = data;
+					}
+					if (c.store.insertNode(props.isBefore ? InsertNodeMode.BEFORE : InsertNodeMode.AFTER, props.item, _data)) {
+						if (p.afterDrop) {
+							if (!await p.afterDrop(c, item)) return {
+								group: props.group,
+								success: false
+							};
+						}
+						const data = c.store.getNode(item.id);
+						if (data) nextTick(() => {
+							c.store.setActive(data);
+						});
+						return {
+							group: props.group,
+							success: true
+						};
+					}
+					return {
+						group: props.group,
+						success: false
+					};
+				};
+				return { asyncDrop: asyncDrop() };
+			}
+		});
+		drop(elRef);
+		return {
+			ns,
+			getStyleObj,
+			elRef,
+			collect,
+			isExpansion
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "elRef",
+			"style": this.getStyleObj(),
+			"class": [
+				this.ns.b(),
+				this.ns.e(this.direction),
+				this.ns.is("show", this.isExpansion)
+			]
+		}, [createVNode("div", { "class": [
+			this.ns.b("drop-container"),
+			this.ns.be("drop-container", this.direction),
+			this.ns.is("show", this.isExpansion),
+			this.ns.is("can-drop", this.collect.canDrop && this.collect.isShallowOver)
+		] }, [
+			createVNode("div", { "class": this.ns.bem("drop-container", this.direction, "start-line") }, null),
+			createVNode("div", { "class": [this.ns.bem("drop-container", this.direction, "line")] }, null),
+			createVNode("div", { "class": this.ns.bem("drop-container", this.direction, "end-line") }, null)
+		])]);
+	}
+});
+//#endregion
+export { DesignDropLine };

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

@@ -0,0 +1,97 @@
+@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-actions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 5px 8px;
+  color: #fff;
+  background-color: var(--ant-primary-color);
+}
+.gct-design-item-actions__mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.16);
+}
+
+.gct-design-item-actions__item {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding-top: 2px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+.gct-design-item-actions__item:hover {
+  background-color: rgba(255, 255, 255, 0.48);
+}

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

@@ -0,0 +1,42 @@
+export declare const DesignItemActions: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    top: number;
+    left: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;