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

package/dist/index.esm.js

@@ -27242,6 +27242,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),
@@ -27844,22 +27846,42 @@ 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);
+    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";
@@ -27877,37 +27899,42 @@ var useNodeDrag = (props2, root, flatData) => {
     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]);
   };
-  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 +27962,18 @@ 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");
+  };
   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 +27983,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);
     }
   });