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

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

@@ -0,0 +1,179 @@
+@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-drag-item {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.gct-design-drag-item__item-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.gct-design-drag-item.is-dragging .gct-design-drag-item__dragging-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(82, 82, 82, 0.2);
+}
+
+.gct-design-drag-item.is-expansion {
+  border: 1px dashed var(--ant-primary-color);
+}
+.gct-design-drag-item.is-expansion .gct-design-drag-item__indicator {
+  display: none;
+}
+
+.gct-design-drag-item[is-action-dragging=true] .gct-design-drag-item__dragging-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(82, 82, 82, 0.2);
+}
+
+.gct-design-drag-item-indicator {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  background-color: white;
+}
+.gct-design-drag-item-indicator__horizontal {
+  left: 0;
+  width: 100%;
+  height: 4px;
+}
+.gct-design-drag-item-indicator__horizontal.is-before {
+  top: -2px;
+}
+
+.gct-design-drag-item-indicator__horizontal.is-after {
+  bottom: -2px;
+}
+
+.gct-design-drag-item-indicator__horizontal--line {
+  width: 100%;
+  height: 2px;
+  margin-top: 1px;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator__horizontal--start-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator__horizontal--end-line {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator__vertical {
+  top: 0;
+  width: 4px;
+  height: 100%;
+}
+.gct-design-drag-item-indicator__vertical.is-before {
+  left: -2px;
+}
+
+.gct-design-drag-item-indicator__vertical.is-after {
+  right: -2px;
+}
+
+.gct-design-drag-item-indicator__vertical--line {
+  width: 2px;
+  height: 100%;
+  margin-left: 1px;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator__vertical--start-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator__vertical--end-line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-design-drag-item-indicator.is-shallow-over {
+  display: block;
+}

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

@@ -0,0 +1,56 @@
+import { PropType } from 'vue';
+import { IDragCollect, IDropCollect, INodeProvider } from '../../../interface';
+import { IDesignNode } from '@gct-paas/schema';
+export declare const DesignDragItem: 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;
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    provider: INodeProvider<IDesignNode<import('@gct-paas/schema').IDesignNodeData>>;
+    isActive: import('vue').ComputedRef<boolean>;
+    isHover: import('vue').ComputedRef<boolean>;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+    style: import('vue').ComputedRef<IObject | null>;
+    dragCollect: import('vue').Ref<IDragCollect, IDragCollect>;
+    dropCollect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isBeforeHover: import('vue').Ref<boolean, boolean>;
+    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-drag-item/design-drag-item.mjs

@@ -0,0 +1,237 @@
+import { DesignItemAttribute, 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-drag-item.css';/* empty css                       */
+import { clone } from "lodash-es";
+import { calcStyle, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, onMounted, ref, watch } from "vue";
+import { toRefs as toRefs$1 } from "@vueuse/core";
+import { useDrag, useDrop } from "vue3-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+//#region src/components/design/design-drag-item/design-drag-item.tsx
+var DesignDragItem = /* @__PURE__ */ defineComponent({
+	name: "DesignDragItem",
+	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-drag-item");
+		const c = useDesignViewController();
+		const store = c.store;
+		const elRef = ref(null);
+		const isBeforeHover = ref(false);
+		const provider = NodeRegister.get(props.data.type, store.prefix);
+		const isActive = computed(() => {
+			return store.selected?.id === props.data.id;
+		});
+		const isHover = computed(() => {
+			return store.hoverId === props.data.id;
+		});
+		const isExpansion = ref(false);
+		if (props.parent) watch(() => store.count, () => {
+			isExpansion.value = store.isDragging && store.expansions.has(props.parent.id);
+		});
+		const { data } = toRefs$1(props.data);
+		const style = computed(() => {
+			if (provider.isCustomStyle === true) return null;
+			return calcStyle(data.value);
+		});
+		const [dragCollect, drag, preview] = useDrag({
+			type: DesignViewPrefix.CUSTOM_HOME,
+			item: () => {
+				store.setDragging(true);
+				return {
+					id: props.data.id,
+					group: props.group,
+					index: props.index,
+					data: clone(props.data),
+					mode: "move",
+					types: c.types(props.data)
+				};
+			},
+			collect: (monitor) => {
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging: monitor.isDragging()
+				};
+			},
+			end: async (_, monitor) => {
+				store.setDragging(false);
+				const r = monitor.getDropResult();
+				if (r && r.asyncDrop) {
+					const result = await r.asyncDrop;
+					if (result && result.success && result.group !== props.group) {}
+				}
+				c.dropEnd();
+			},
+			options: { dropEffect: "move" }
+		});
+		const [dropCollect, drop] = useDrop({
+			accept: DesignViewPrefix.CUSTOM_HOME,
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true }),
+					isOver: monitor.isOver()
+				};
+			},
+			hover(item, monitor) {
+				if (monitor.canDrop() === false || dragCollect.value.isDragging === true) return;
+				const isOver = monitor.isOver({ shallow: true });
+				if (props.data.id === item.id) return;
+				if (isOver) {
+					const rect = elRef.value.getBoundingClientRect();
+					const offset = monitor.getClientOffset();
+					let difference = 0;
+					if (props.direction === "vertical") {
+						const { top, height } = rect;
+						const { y } = offset;
+						const half = height / 2;
+						difference = y - top - half;
+						if (difference < 0) isBeforeHover.value = true;
+						else isBeforeHover.value = false;
+					}
+					if (props.direction === "horizontal") {
+						const { left, width } = rect;
+						const { x } = offset;
+						const half = width / 2;
+						difference = x - left - half;
+						if (difference < 0) isBeforeHover.value = true;
+						else isBeforeHover.value = false;
+					}
+				}
+			},
+			canDrop(item, _monitor) {
+				if (dragCollect.value.isDragging === true) return false;
+				return isCanCrop(props.parent, store, item);
+			},
+			drop(item, monitor) {
+				if (monitor.canDrop() === false || monitor.isOver({ shallow: true }) === false || dragCollect.value.isDragging === true) return;
+				const asyncDrop = async () => {
+					let _data = item.data;
+					const p = NodeRegister.get(_data.type, store.prefix);
+					if (p.beforeDrop) {
+						const data = await p.beforeDrop(c, item);
+						if (!data) return {
+							group: props.group,
+							success: false
+						};
+						_data = data;
+					}
+					if (store.insertNode(isBeforeHover.value ? InsertNodeMode.BEFORE : InsertNodeMode.AFTER, props.data, _data)) {
+						if (p.afterDrop) {
+							if (!await p.afterDrop(c, item)) return {
+								group: props.group,
+								success: false
+							};
+						}
+						const data = store.getNode(item.id);
+						if (data) nextTick(() => {
+							store.setActive(data);
+						});
+						return {
+							group: props.group,
+							success: true
+						};
+					}
+					return {
+						group: props.group,
+						success: false
+					};
+				};
+				return { asyncDrop: asyncDrop() };
+			}
+		});
+		drag(elRef);
+		drop(elRef);
+		onMounted(() => {
+			if (preview) preview(getEmptyImage(), { captureDraggingState: true });
+		});
+		const onActive = (e) => {
+			e.stopPropagation();
+			store.setActive(props.data);
+		};
+		watch(dropCollect, (_) => {
+			if (_.canDrop && _.isShallowOver) {
+				store.dropContainer = props.parent || null;
+				c.setExpansion([props.data.id]);
+			}
+		});
+		return {
+			ns,
+			elRef,
+			provider,
+			isActive,
+			isHover,
+			isExpansion,
+			style,
+			dragCollect,
+			dropCollect,
+			isBeforeHover,
+			onActive
+		};
+	},
+	render() {
+		return createVNode("div", mergeProps({
+			"ref": "elRef",
+			"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(),
+				this.ns.is("dragging", this.dragCollect.isDragging),
+				this.ns.is("can-drop", this.dropCollect.canDrop),
+				this.ns.is("shallow-over", this.dropCollect.isShallowOver),
+				this.ns.is("active", this.isActive),
+				this.ns.is("hover", this.isHover),
+				this.ns.is("expansion", this.isExpansion)
+			],
+			"style": this.style,
+			"onClick": this.onActive
+		}), [
+			this.$slots.default?.(),
+			this.provider.isDrag ? createVNode("div", { "class": this.ns.e("dragging-mask") }, null) : null,
+			this.provider.isDrop && this.isExpansion !== true ? createVNode("div", { "class": [
+				this.ns.b("indicator"),
+				this.ns.be("indicator", this.direction),
+				this.ns.is("shallow-over", !this.dragCollect?.isDragging && this.dropCollect.isShallowOver && this.dropCollect.canDrop),
+				this.ns.is("before", this.dropCollect.isShallowOver && this.isBeforeHover),
+				this.ns.is("after", this.dropCollect.isShallowOver && !this.isBeforeHover)
+			] }, [
+				createVNode("div", { "class": [this.ns.bem("indicator", this.direction, "start-line")] }, null),
+				createVNode("div", { "class": [this.ns.bem("indicator", this.direction, "line")] }, null),
+				createVNode("div", { "class": [this.ns.bem("indicator", this.direction, "end-line")] }, null)
+			]) : null
+		]);
+	}
+});
+//#endregion
+export { DesignDragItem };

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

@@ -0,0 +1,103 @@
+@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-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  border: 1px solid transparent;
+}
+.gct-design-drop-container.is-over {
+  background-color: #ccc;
+}
+
+.gct-design-drop-container.is-expansion {
+  padding: 4px;
+  border: 1px dashed var(--ant-primary-color);
+}
+
+.gct-design-drop-container.is-not-children {
+  background-color: #FCFCFD;
+  border: 2px dashed #DBDBDB;
+}
+
+.gct-design-drop-container__drag-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100px;
+  font-size: 14px;
+  color: #C3C3C3;
+}
+
+.gct-design-drop-container__drop-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  color: rgb(93, 100, 116);
+  pointer-events: none;
+  background-color: rgba(49, 104, 236, 0.24);
+}

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

@@ -0,0 +1,92 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '@gct-paas/schema';
+import { IDropCollect } from '../../../interface';
+export declare const DesignDropContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    items: {
+        type: {
+            (arrayLength: number): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            (...items: IDesignNode<import('@gct-paas/schema').IDesignNodeData>[]): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            new (arrayLength: number): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            new (...items: IDesignNode<import('@gct-paas/schema').IDesignNodeData>[]): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    infoMsg: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+    rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    collect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isDropMask: import('vue').ComputedRef<boolean | null | undefined>;
+    getMaskStyle: () => {};
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    items: {
+        type: {
+            (arrayLength: number): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            (...items: IDesignNode<import('@gct-paas/schema').IDesignNodeData>[]): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            new (arrayLength: number): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            new (...items: IDesignNode<import('@gct-paas/schema').IDesignNodeData>[]): IDesignNode<import('@gct-paas/schema').IDesignNodeData>[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    infoMsg: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    showInfo: boolean;
+    infoMsg: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;