bkui-vue 0.0.1-beta.220 → 0.0.1-beta.222

package/dist/index.esm.js

@@ -27158,6 +27158,10 @@ var EVENTS = /* @__PURE__ */ ((EVENTS2) => {
   EVENTS2["NODE_COLLAPSE"] = "nodeCollapse";
   EVENTS2["NODE_EXPAND"] = "nodeExpand";
   EVENTS2["NODE_CHECKED"] = "nodeChecked";
+  EVENTS2["NODE_DRAG_START"] = "nodeDragStart";
+  EVENTS2["NODE_DRAG_OVER"] = "nodeDragOver";
+  EVENTS2["NODE_DRAG_LEAVE"] = "nodeDragLeave";
+  EVENTS2["NODE_DROP"] = "nodeDrop";
   return EVENTS2;
 })(EVENTS || {});
 const EMPTY = (..._args) => true;
@@ -27165,7 +27169,11 @@ const TreeEmitEventsType = {
   ["nodeClick"]: EMPTY,
   ["nodeCollapse"]: EMPTY,
   ["nodeExpand"]: EMPTY,
-  ["nodeChecked"]: EMPTY
+  ["nodeChecked"]: EMPTY,
+  ["nodeDragStart"]: EMPTY,
+  ["nodeDragOver"]: EMPTY,
+  ["nodeDragLeave"]: EMPTY,
+  ["nodeDrop"]: EMPTY
 };
 var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
   NODE_ATTRIBUTES2["DEPTH"] = "__depth";
@@ -27242,6 +27250,8 @@ const treeProps = {
   ]).def(void 0),
   emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
   draggable: PropTypes.bool.def(false),
+  disableDrag: Function,
+  disableDrop: Function,
   dragSort: PropTypes.bool.def(false),
   selectable: PropTypes.bool.def(true),
   showCheckbox: PropTypes.bool.def(false),
@@ -27438,6 +27448,8 @@ const getNodeRowClass = (item, schema) => {
   return {
     "is-checked": __is_checked,
     "is-selected": __is_selected,
+    "node-folder": item.is_folder,
+    "node-leaf": item.is_leaf,
     [resolveClassName("node-row")]: true
   };
 };
@@ -27815,10 +27827,10 @@ var useNodeAction = (props2, ctx, flatData, _renderData, schemaValues, initOptio
       "class": getNodeItemClass(item, flatData.schema, props2),
       "style": getNodeItemStyle(item, props2, flatData),
       "onClick": (e) => handleNodeContentClick(item, e)
-    }, [createVNode("span", {
+    }, [createVNode("div", {
       "class": [resolveClassName("node-action")],
       "onClick": (e) => handleNodeActionClick(e, item)
-    }, [getActionIcon(item)]), createVNode("span", {
+    }, [getActionIcon(item)]), createVNode("div", {
       "class": resolveClassName("node-content")
     }, [[getCheckboxRender(item), getNodePrefixIcon(item)], createVNode("span", {
       "class": resolveClassName("node-text")
@@ -27835,7 +27847,7 @@ var useNodeAction = (props2, ctx, flatData, _renderData, schemaValues, initOptio
     setOpen
   };
 };
-var useNodeDrag = (props2, root, flatData) => {
+var useNodeDrag = (props2, ctx, root, flatData) => {
   const {
     getSourceNodeByUID,
     getNodeParentIdById,
@@ -27844,22 +27856,43 @@ var useNodeDrag = (props2, root, flatData) => {
     getNodePath,
     isRootNode
   } = useNodeAttribute(flatData, props2);
+  const isNeedCheckDraggable = computed(() => typeof props2.disableDrag === "function");
+  const isNeedCheckDroppable = computed(() => typeof props2.disableDrop === "function");
   const getTargetTreeNode = (e) => {
     const target = e.target;
     return target.closest("[data-tree-node]");
   };
+  const getNodeByTargetTreeNode = (targetNode) => {
+    var _a;
+    const uid = (_a = targetNode == null ? void 0 : targetNode.dataset) == null ? void 0 : _a.treeNode;
+    return getSourceNodeByUID(uid);
+  };
   const handleTreeNodeMouseup = (e) => {
     const targetNode = getTargetTreeNode(e);
     targetNode.removeEventListener("mouseup", handleTreeNodeMouseup);
   };
   const handleTreeNodeMousedown = (e) => {
     const targetNode = getTargetTreeNode(e);
+    const data2 = getNodeByTargetTreeNode(targetNode);
+    if (data2.draggable === false || isNeedCheckDraggable.value && props2.disableDrag(data2)) {
+      targetNode.classList.add("bk-tree-drag-disabled");
+      return;
+    }
     targetNode.setAttribute("draggable", "true");
     targetNode.addEventListener("mouseup", handleTreeNodeMouseup);
   };
   const handleTreeNodeDragover = (e) => {
     e.preventDefault();
     const targetNode = getTargetTreeNode(e);
+    const data2 = getNodeByTargetTreeNode(targetNode);
+    ctx.emit(EVENTS.NODE_DRAG_OVER, e, targetNode, data2);
+    if (isNeedCheckDroppable.value && (props2 == null ? void 0 : props2.disableDrop(data2))) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.dropEffect = "none";
+      targetNode.classList.add("bk-tree-drop-disabled");
+      return;
+    }
+    targetNode.classList.add("bk-tree-drop-active");
     const sourceNodeId = e.dataTransfer.getData("node-id");
     const targetNodeId = targetNode.getAttribute("data-tree-node");
     const transferEffect = isNodeSortable(sourceNodeId, targetNodeId) ? "move" : "none";
@@ -27872,42 +27905,49 @@ var useNodeDrag = (props2, root, flatData) => {
     const targetNode = getTargetTreeNode(e);
     e.dataTransfer.setData("text/plain", "");
     e.dataTransfer.setData("node-id", targetNode.getAttribute("data-tree-node"));
+    ctx.emit(EVENTS.NODE_DRAG_START, e, targetNode);
   };
   const handleTreeNodeDrop = (e) => {
     e.preventDefault();
     e.stopPropagation();
     const targetNode = getTargetTreeNode(e);
+    targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
+    const data2 = getNodeByTargetTreeNode(targetNode);
+    if (isNeedCheckDroppable.value && props2.disableDrop(data2)) {
+      return;
+    }
     const sourceNodeId = e.dataTransfer.getData("node-id");
     const targetNodeId = targetNode.getAttribute("data-tree-node");
     Reflect.apply(props2.dragSort ? dragSortData : dragAsChildNode, globalThis, [sourceNodeId, targetNodeId]);
+    ctx.emit(EVENTS.NODE_DROP, e, targetNode, data2);
   };
-  const isNodeSortable = (sourceId, tartgetId) => {
+  const isNodeSortable = (sourceId, targetId) => {
     const sourcePath = getNodePath({
       [NODE_ATTRIBUTES.UUID]: sourceId
     });
     const targetPath = getNodePath({
-      [NODE_ATTRIBUTES.UUID]: tartgetId
+      [NODE_ATTRIBUTES.UUID]: targetId
     });
     const sourceParentNodeId = getNodeParentIdById(sourceId);
-    const targetParentNode = getNodeParentIdById(tartgetId);
+    const targetParentNode = getNodeParentIdById(targetId);
     if (sourceParentNodeId === targetParentNode) {
       return true;
     }
     return sourcePath.indexOf(targetPath) === -1 && targetPath.indexOf(sourcePath) === -1;
   };
-  const dragSortData = (sourceId, tartgetId) => {
-    if (!isNodeSortable(sourceId, tartgetId)) {
+  const dragSortData = (sourceId, targetId) => {
+    if (!isNodeSortable(sourceId, targetId)) {
       return;
     }
     const sourceNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(sourceId)));
-    const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(tartgetId)));
+    const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(targetId)));
     const sourceNodeParent = getParentNodeData(sourceId);
-    const targetNodeParent = getParentNodeData(tartgetId);
+    const targetNodeParent = getParentNodeData(targetId);
     const sourceNodeIndex = getNodeAttr2({
       [NODE_ATTRIBUTES.UUID]: sourceId
     }, NODE_ATTRIBUTES.INDEX);
     const targetNodeIndex = getNodeAttr2({
-      [NODE_ATTRIBUTES.UUID]: tartgetId
+      [NODE_ATTRIBUTES.UUID]: targetId
     }, NODE_ATTRIBUTES.INDEX);
     sourceNodeParent == null ? void 0 : sourceNodeParent[props2.children].splice(sourceNodeIndex, 1, targetNodeData);
     targetNodeParent == null ? void 0 : targetNodeParent[props2.children].splice(targetNodeIndex, 1, sourceNodeData);
@@ -27935,12 +27975,19 @@ var useNodeDrag = (props2, root, flatData) => {
     }
     targetNodeData[props2.children].unshift(sourceNodeData);
   };
+  const handleTreeNodeDragLeave = (e) => {
+    e.preventDefault();
+    const targetNode = getTargetTreeNode(e);
+    targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
+    ctx.emit(EVENTS.NODE_DRAG_LEAVE, e, targetNode);
+  };
   onMounted(() => {
     if (props2.draggable && root.value) {
       const rootTree = root.value.$el;
       rootTree.addEventListener("mousedown", handleTreeNodeMousedown);
       rootTree.addEventListener("dragstart", handleTreeNodeDragStart);
       rootTree.addEventListener("dragover", handleTreeNodeDragover);
+      rootTree.addEventListener("dragleave", handleTreeNodeDragLeave);
       rootTree.addEventListener("drop", handleTreeNodeDrop);
     }
   });
@@ -27950,6 +27997,7 @@ var useNodeDrag = (props2, root, flatData) => {
       rootTree.removeEventListener("mousedown", handleTreeNodeMousedown);
       rootTree.removeEventListener("dragstart", handleTreeNodeDragStart);
       rootTree.removeEventListener("dragover", handleTreeNodeDragover);
+      rootTree.removeEventListener("dragleave", handleTreeNodeDragLeave);
       rootTree.removeEventListener("drop", handleTreeNodeDrop);
     }
   });
@@ -28339,7 +28387,7 @@ var Component$8 = defineComponent({
     const {
       renderEmpty
     } = useEmpty(props2, ctx);
-    useNodeDrag(props2, root, flatData);
+    useNodeDrag(props2, ctx, root, flatData);
     const renderTreeContent = (scopedData) => {
       if (scopedData.length) {
         return scopedData.map(renderTreeNode);