@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.12

package/es/modules/gct-dnd/components/gct-dnd-container/gct-dnd-container.mjs

@@ -1,195 +1,160 @@
-import { defineComponent, createVNode, ref, reactive, provide, toRef, watch } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { useDrop } from 'vue3-dnd';
-import { cloneDeep } from 'lodash-es';
-import { GctDndItem } from '../gct-dnd-item/gct-dnd-item.mjs';
-import { GctDndDropLine } from '../gct-dnd-drop-line/gct-dnd-drop-line.mjs';
-import { GCT_DND_INSERT_POS } from '../../constants/index.mjs';
+import { GCT_DND_INSERT_POS } from "../../constants/index.mjs";
+import GctDndItem from "../gct-dnd-item/gct-dnd-item.mjs";
+import { GctDndDropLine } from "../gct-dnd-drop-line/gct-dnd-drop-line.mjs";
 import './gct-dnd-container.css';/* empty css                        */
-
-const GctDndContainer = /* @__PURE__ */ defineComponent({
-  name: 'GctDndContainer',
-  props: {
-    config: {
-      type: Object,
-      default: () => {
-        return {
-          group: 'GctDnd',
-          insertPos: GCT_DND_INSERT_POS.LAST
-        };
-      }
-    },
-    items: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['update:items'],
-  setup(props, {
-    emit
-  }) {
-    const {
-      config
-    } = props;
-    const ns = useNamespace('dnd-container');
-    const rootRef = ref(null);
-    // 拖拽线状态
-    const dropLineState = reactive({
-      activeKey: '',
-      isBeforeHover: false
-    });
-    provide('vue3-dnd-drop-line-state', dropLineState);
-    const items = toRef(props.items);
-    const [collect, drop] = useDrop({
-      accept: config.group,
-      collect(monitor) {
-        return {
-          handlerId: monitor.getHandlerId(),
-          isOver: monitor.isOver(),
-          canDrop: monitor.canDrop(),
-          isShallowOver: monitor.isOver({
-            shallow: true
-          })
-        };
-      },
-      canDrop(item) {
-        if (config.isDrop === false) {
-          return false;
-        }
-        if (config.canDrop) {
-          return config.canDrop(item);
-        }
-        return true;
-      },
-      drop: (item, monitor) => {
-        if (collect.value.isShallowOver !== true || monitor.canDrop() === false) {
-          return;
-        }
-        const callback = async () => {
-          let data = item.data;
-          if (config.drop) {
-            data = await config.drop(item);
-            if (!data) {
-              return {
-                group: config.group,
-                success: false,
-                cfg: cloneDeep(props.config)
-              };
-            }
-          }
-          const i = items.value.findIndex(_ => _.id === item.data.id);
-          // 数据不存在才可以从容器拖入
-          if (i === -1) {
-            onDrop(props.config.insertPos, data);
-          }
-          emit('update:items', items.value);
-          return {
-            group: config.group,
-            success: true,
-            cfg: cloneDeep(props.config),
-            data
-          };
-        };
-        return {
-          asyncDrop: callback
-        };
-      }
-    });
-    if (config.isDrop !== false) {
-      drop(rootRef);
-    }
-    watch(collect, () => {
-      if (collect.value.isOver !== true) {
-        dropLineState.activeKey = '';
-      }
-    });
-
-    /**
-     * 拖拽结束放置逻辑
-     *
-     * @param {GCT_DND_INSERT_POS} insertPos
-     * @param {IGctDndData} data
-     * @param {number} [insertIndex=-1] 指定放置前后时，需要指定插入谁的前后
-     */
-    function onDrop(insertPos, data, insertIndex = -1) {
-      if (!data) {
-        console.error('data is required');
-        return;
-      }
-      if (insertPos === GCT_DND_INSERT_POS.FIRST) {
-        items.value.unshift(data);
-      } else if (insertPos === GCT_DND_INSERT_POS.LAST) {
-        items.value.push(data);
-      } else {
-        if (insertIndex === -1) {
-          console.error('insertIndex is required');
-          return;
-        }
-        const i = items.value.findIndex(item => item.id === data.id);
-        // 在原本位置不做任何操作
-        if (i === insertIndex) {
-          return;
-        }
-        // 新位置在前，先删除，再插入
-        if (i !== -1 && insertIndex < i) {
-          items.value.splice(i, 1);
-        }
-        if (insertPos === GCT_DND_INSERT_POS.AFTER) {
-          // 插入后，在指定位置 + 1
-          items.value.splice(insertIndex + 1, 0, data);
-        } else {
-          // 插入前，在指定位置
-          items.value.splice(insertIndex, 0, data);
-        }
-        // 新位置在后，先插入，再删除
-        if (i !== -1 && insertIndex > i) {
-          items.value.splice(i, 1);
-        }
-      }
-      emit('update:items', items.value);
-    }
-    return {
-      ns,
-      rootRef,
-      dropLineState,
-      collect,
-      onDrop
-    };
-  },
-  render() {
-    const last = this.items[this.items.length - 1];
-    return createVNode("div", {
-      "ref": "rootRef",
-      "class": [this.collect.handlerId, this.ns.b(), this.ns.is('over', this.collect.isOver && this.collect.canDrop), this.ns.is('not-drop', this.collect.canDrop === false && this.collect.isOver), this.ns.is('shallow-over', this.collect.isShallowOver && this.collect.canDrop)]
-    }, [this.$slots.before?.(), this.items.map((item, i) => {
-      const before = this.items[i - 1];
-      const contents = [];
-      if (this.config.isDrop !== false) {
-        contents.push(createVNode(GctDndDropLine, {
-          "key": item.id + '___line',
-          "config": this.config,
-          "active": this.dropLineState.isBeforeHover === true && this.dropLineState.activeKey === item.id || before && this.dropLineState.activeKey === before.id && this.dropLineState.isBeforeHover === false,
-          "onDrop": data => this.onDrop(GCT_DND_INSERT_POS.BEFORE, data, i)
-        }, null));
-      }
-      contents.push(createVNode(GctDndItem, {
-        "key": item.id,
-        "config": this.config,
-        "index": i,
-        "data": item,
-        "last": i === this.items.length - 1,
-        "onDrop": (pos, data) => this.onDrop(pos, data, i)
-      }, {
-        default: this.$slots.default
-      }));
-      return contents;
-    }), last ? createVNode(GctDndDropLine, {
-      "key": last.id + '___last-line',
-      "config": this.config,
-      "active": this.dropLineState.activeKey === last.id && this.dropLineState.isBeforeHover === false,
-      "onDrop": data => this.onDrop(GCT_DND_INSERT_POS.AFTER, data, this.items.length - 1)
-    }, null) : null, this.$slots.after?.()]);
-  }
+import { createVNode, defineComponent, provide, reactive, ref, toRef, watch } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { useDrop } from "vue3-dnd";
+//#region src/modules/gct-dnd/components/gct-dnd-container/gct-dnd-container.tsx
+var GctDndContainer = /* @__PURE__ */ defineComponent({
+	name: "GctDndContainer",
+	props: {
+		config: {
+			type: Object,
+			default: () => {
+				return {
+					group: "GctDnd",
+					insertPos: GCT_DND_INSERT_POS.LAST
+				};
+			}
+		},
+		items: {
+			type: Array,
+			default: () => []
+		}
+	},
+	emits: ["update:items"],
+	setup(props, { emit }) {
+		const { config } = props;
+		const ns = useNamespace("dnd-container");
+		const rootRef = ref(null);
+		const dropLineState = reactive({
+			activeKey: "",
+			isBeforeHover: false
+		});
+		provide("vue3-dnd-drop-line-state", dropLineState);
+		const items = toRef(props.items);
+		const [collect, drop] = useDrop({
+			accept: config.group,
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					isOver: monitor.isOver(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true })
+				};
+			},
+			canDrop(item) {
+				if (config.isDrop === false) return false;
+				if (config.canDrop) return config.canDrop(item);
+				return true;
+			},
+			drop: (item, monitor) => {
+				if (collect.value.isShallowOver !== true || monitor.canDrop() === false) return;
+				const callback = async () => {
+					let data = item.data;
+					if (config.drop) {
+						data = await config.drop(item);
+						if (!data) return {
+							group: config.group,
+							success: false,
+							cfg: cloneDeep(props.config)
+						};
+					}
+					if (items.value.findIndex((_) => _.id === item.data.id) === -1) onDrop(props.config.insertPos, data);
+					emit("update:items", items.value);
+					return {
+						group: config.group,
+						success: true,
+						cfg: cloneDeep(props.config),
+						data
+					};
+				};
+				return { asyncDrop: callback };
+			}
+		});
+		if (config.isDrop !== false) drop(rootRef);
+		watch(collect, () => {
+			if (collect.value.isOver !== true) dropLineState.activeKey = "";
+		});
+		/**
+		* 拖拽结束放置逻辑
+		*
+		* @param {GCT_DND_INSERT_POS} insertPos
+		* @param {IGctDndData} data
+		* @param {number} [insertIndex=-1] 指定放置前后时，需要指定插入谁的前后
+		*/
+		function onDrop(insertPos, data, insertIndex = -1) {
+			if (!data) {
+				console.error("data is required");
+				return;
+			}
+			if (insertPos === GCT_DND_INSERT_POS.FIRST) items.value.unshift(data);
+			else if (insertPos === GCT_DND_INSERT_POS.LAST) items.value.push(data);
+			else {
+				if (insertIndex === -1) {
+					console.error("insertIndex is required");
+					return;
+				}
+				const i = items.value.findIndex((item) => item.id === data.id);
+				if (i === insertIndex) return;
+				if (i !== -1 && insertIndex < i) items.value.splice(i, 1);
+				if (insertPos === GCT_DND_INSERT_POS.AFTER) items.value.splice(insertIndex + 1, 0, data);
+				else items.value.splice(insertIndex, 0, data);
+				if (i !== -1 && insertIndex > i) items.value.splice(i, 1);
+			}
+			emit("update:items", items.value);
+		}
+		return {
+			ns,
+			rootRef,
+			dropLineState,
+			collect,
+			onDrop
+		};
+	},
+	render() {
+		const last = this.items[this.items.length - 1];
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [
+				this.collect.handlerId,
+				this.ns.b(),
+				this.ns.is("over", this.collect.isOver && this.collect.canDrop),
+				this.ns.is("not-drop", this.collect.canDrop === false && this.collect.isOver),
+				this.ns.is("shallow-over", this.collect.isShallowOver && this.collect.canDrop)
+			]
+		}, [
+			this.$slots.before?.(),
+			this.items.map((item, i) => {
+				const before = this.items[i - 1];
+				const contents = [];
+				if (this.config.isDrop !== false) contents.push(createVNode(GctDndDropLine, {
+					"key": item.id + "___line",
+					"config": this.config,
+					"active": this.dropLineState.isBeforeHover === true && this.dropLineState.activeKey === item.id || before && this.dropLineState.activeKey === before.id && this.dropLineState.isBeforeHover === false,
+					"onDrop": (data) => this.onDrop(GCT_DND_INSERT_POS.BEFORE, data, i)
+				}, null));
+				contents.push(createVNode(GctDndItem, {
+					"key": item.id,
+					"config": this.config,
+					"index": i,
+					"data": item,
+					"last": i === this.items.length - 1,
+					"onDrop": (pos, data) => this.onDrop(pos, data, i)
+				}, { default: this.$slots.default }));
+				return contents;
+			}),
+			last ? createVNode(GctDndDropLine, {
+				"key": last.id + "___last-line",
+				"config": this.config,
+				"active": this.dropLineState.activeKey === last.id && this.dropLineState.isBeforeHover === false,
+				"onDrop": (data) => this.onDrop(GCT_DND_INSERT_POS.AFTER, data, this.items.length - 1)
+			}, null) : null,
+			this.$slots.after?.()
+		]);
+	}
 });
-
-export { GctDndContainer };
+//#endregion
+export { GctDndContainer as default };

package/es/modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.mjs

@@ -1,98 +1,84 @@
-import { defineComponent, createVNode, ref } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { useDrop } from 'vue3-dnd';
-import { cloneDeep } from 'lodash-es';
 import './gct-dnd-drop-line.css';/* empty css                        */
-
-const GctDndDropLine = /* @__PURE__ */ defineComponent({
-  name: 'GctDndDropLine',
-  props: {
-    config: {
-      type: Object,
-      required: true
-    },
-    // 特殊指定当前线激活
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['drop'],
-  setup(props, {
-    emit
-  }) {
-    const {
-      config
-    } = props;
-    const ns = useNamespace('dnd-drop-line');
-    const rootRef = ref(null);
-    const [collect, drop] = useDrop({
-      accept: props.config.group,
-      collect: monitor => {
-        return {
-          handlerId: monitor.getHandlerId(),
-          isOver: monitor.isOver(),
-          canDrop: monitor.canDrop(),
-          isShallowOver: monitor.isOver({
-            shallow: true
-          })
-        };
-      },
-      canDrop(item) {
-        if (config.isDrop === false) {
-          return false;
-        }
-        if (config.canDrop) {
-          return config.canDrop(item);
-        }
-        return true;
-      },
-      drop: (item, monitor) => {
-        if (collect.value.isShallowOver !== true || monitor.canDrop() === false) {
-          return;
-        }
-        const callback = async () => {
-          let data = item.data;
-          if (config.drop) {
-            data = await config.drop(item);
-            if (!data) {
-              return {
-                group: config.group,
-                cfg: cloneDeep(props.config),
-                success: false
-              };
-            }
-          }
-          emit('drop', data);
-          return {
-            group: config.group,
-            success: true,
-            cfg: cloneDeep(props.config),
-            data
-          };
-        };
-        return {
-          asyncDrop: callback
-        };
-      }
-    });
-    if (config.isDrop !== false) {
-      drop(rootRef);
-    }
-    return {
-      ns,
-      rootRef,
-      collect
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "ref": "rootRef",
-      "class": [this.collect.handlerId, this.ns.b(), this.ns.is('over', this.collect.isOver && this.collect.canDrop), this.ns.is('shallow-over', this.collect.isShallowOver && this.collect.canDrop), this.ns.is('not-drop', this.collect.canDrop === false && this.collect.isShallowOver), this.ns.is('active', this.active)]
-    }, [createVNode("div", {
-      "class": this.ns.e('line')
-    }, null)]);
-  }
+import { createVNode, defineComponent, ref } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { useDrop } from "vue3-dnd";
+//#region src/modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.tsx
+var GctDndDropLine = /* @__PURE__ */ defineComponent({
+	name: "GctDndDropLine",
+	props: {
+		config: {
+			type: Object,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["drop"],
+	setup(props, { emit }) {
+		const { config } = props;
+		const ns = useNamespace("dnd-drop-line");
+		const rootRef = ref(null);
+		const [collect, drop] = useDrop({
+			accept: props.config.group,
+			collect: (monitor) => {
+				return {
+					handlerId: monitor.getHandlerId(),
+					isOver: monitor.isOver(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true })
+				};
+			},
+			canDrop(item) {
+				if (config.isDrop === false) return false;
+				if (config.canDrop) return config.canDrop(item);
+				return true;
+			},
+			drop: (item, monitor) => {
+				if (collect.value.isShallowOver !== true || monitor.canDrop() === false) return;
+				const callback = async () => {
+					let data = item.data;
+					if (config.drop) {
+						data = await config.drop(item);
+						if (!data) return {
+							group: config.group,
+							cfg: cloneDeep(props.config),
+							success: false
+						};
+					}
+					emit("drop", data);
+					return {
+						group: config.group,
+						success: true,
+						cfg: cloneDeep(props.config),
+						data
+					};
+				};
+				return { asyncDrop: callback };
+			}
+		});
+		if (config.isDrop !== false) drop(rootRef);
+		return {
+			ns,
+			rootRef,
+			collect
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [
+				this.collect.handlerId,
+				this.ns.b(),
+				this.ns.is("over", this.collect.isOver && this.collect.canDrop),
+				this.ns.is("shallow-over", this.collect.isShallowOver && this.collect.canDrop),
+				this.ns.is("not-drop", this.collect.canDrop === false && this.collect.isShallowOver),
+				this.ns.is("active", this.active)
+			]
+		}, [createVNode("div", { "class": this.ns.e("line") }, null)]);
+	}
 });
-
+//#endregion
 export { GctDndDropLine };