bkui-vue 0.0.1-beta.220 → 0.0.1-beta.221
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +21 -21
- package/dist/index.esm.js +42 -8
- package/dist/index.umd.js +21 -21
- package/dist/style.css +1 -1
- package/dist/style.variable.css +1 -1
- package/lib/table/table.css +4 -2
- package/lib/table/table.less +9 -7
- package/lib/table/table.variable.css +4 -2
- package/lib/tree/index.d.ts +8 -0
- package/lib/tree/index.js +1 -1
- package/lib/tree/props.d.ts +2 -0
- package/lib/tree/tree.css +21 -12
- package/lib/tree/tree.d.ts +4 -0
- package/lib/tree/tree.less +17 -2
- package/lib/tree/tree.variable.css +21 -12
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
@@ -27242,6 +27242,8 @@ const treeProps = {
|
|
27242
27242
|
]).def(void 0),
|
27243
27243
|
emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
|
27244
27244
|
draggable: PropTypes.bool.def(false),
|
27245
|
+
disableDrag: Function,
|
27246
|
+
disableDrop: Function,
|
27245
27247
|
dragSort: PropTypes.bool.def(false),
|
27246
27248
|
selectable: PropTypes.bool.def(true),
|
27247
27249
|
showCheckbox: PropTypes.bool.def(false),
|
@@ -27844,22 +27846,42 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27844
27846
|
getNodePath,
|
27845
27847
|
isRootNode
|
27846
27848
|
} = useNodeAttribute(flatData, props2);
|
27849
|
+
const isNeedCheckDraggable = computed(() => typeof props2.disableDrag === "function");
|
27850
|
+
const isNeedCheckDroppable = computed(() => typeof props2.disableDrop === "function");
|
27847
27851
|
const getTargetTreeNode = (e) => {
|
27848
27852
|
const target = e.target;
|
27849
27853
|
return target.closest("[data-tree-node]");
|
27850
27854
|
};
|
27855
|
+
const getNodeByTargetTreeNode = (targetNode) => {
|
27856
|
+
var _a;
|
27857
|
+
const uid = (_a = targetNode == null ? void 0 : targetNode.dataset) == null ? void 0 : _a.treeNode;
|
27858
|
+
return getSourceNodeByUID(uid);
|
27859
|
+
};
|
27851
27860
|
const handleTreeNodeMouseup = (e) => {
|
27852
27861
|
const targetNode = getTargetTreeNode(e);
|
27853
27862
|
targetNode.removeEventListener("mouseup", handleTreeNodeMouseup);
|
27854
27863
|
};
|
27855
27864
|
const handleTreeNodeMousedown = (e) => {
|
27856
27865
|
const targetNode = getTargetTreeNode(e);
|
27866
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27867
|
+
if (data2.draggable === false || isNeedCheckDraggable.value && props2.disableDrag(data2)) {
|
27868
|
+
targetNode.classList.add("bk-tree-drag-disabled");
|
27869
|
+
return;
|
27870
|
+
}
|
27857
27871
|
targetNode.setAttribute("draggable", "true");
|
27858
27872
|
targetNode.addEventListener("mouseup", handleTreeNodeMouseup);
|
27859
27873
|
};
|
27860
27874
|
const handleTreeNodeDragover = (e) => {
|
27861
27875
|
e.preventDefault();
|
27862
27876
|
const targetNode = getTargetTreeNode(e);
|
27877
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27878
|
+
if (isNeedCheckDroppable.value && (props2 == null ? void 0 : props2.disableDrop(data2))) {
|
27879
|
+
e.dataTransfer.effectAllowed = "move";
|
27880
|
+
e.dataTransfer.dropEffect = "none";
|
27881
|
+
targetNode.classList.add("bk-tree-drop-disabled");
|
27882
|
+
return;
|
27883
|
+
}
|
27884
|
+
targetNode.classList.add("bk-tree-drop-active");
|
27863
27885
|
const sourceNodeId = e.dataTransfer.getData("node-id");
|
27864
27886
|
const targetNodeId = targetNode.getAttribute("data-tree-node");
|
27865
27887
|
const transferEffect = isNodeSortable(sourceNodeId, targetNodeId) ? "move" : "none";
|
@@ -27877,37 +27899,42 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27877
27899
|
e.preventDefault();
|
27878
27900
|
e.stopPropagation();
|
27879
27901
|
const targetNode = getTargetTreeNode(e);
|
27902
|
+
targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
|
27903
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27904
|
+
if (isNeedCheckDroppable.value && props2.disableDrop(data2)) {
|
27905
|
+
return;
|
27906
|
+
}
|
27880
27907
|
const sourceNodeId = e.dataTransfer.getData("node-id");
|
27881
27908
|
const targetNodeId = targetNode.getAttribute("data-tree-node");
|
27882
27909
|
Reflect.apply(props2.dragSort ? dragSortData : dragAsChildNode, globalThis, [sourceNodeId, targetNodeId]);
|
27883
27910
|
};
|
27884
|
-
const isNodeSortable = (sourceId,
|
27911
|
+
const isNodeSortable = (sourceId, targetId) => {
|
27885
27912
|
const sourcePath = getNodePath({
|
27886
27913
|
[NODE_ATTRIBUTES.UUID]: sourceId
|
27887
27914
|
});
|
27888
27915
|
const targetPath = getNodePath({
|
27889
|
-
[NODE_ATTRIBUTES.UUID]:
|
27916
|
+
[NODE_ATTRIBUTES.UUID]: targetId
|
27890
27917
|
});
|
27891
27918
|
const sourceParentNodeId = getNodeParentIdById(sourceId);
|
27892
|
-
const targetParentNode = getNodeParentIdById(
|
27919
|
+
const targetParentNode = getNodeParentIdById(targetId);
|
27893
27920
|
if (sourceParentNodeId === targetParentNode) {
|
27894
27921
|
return true;
|
27895
27922
|
}
|
27896
27923
|
return sourcePath.indexOf(targetPath) === -1 && targetPath.indexOf(sourcePath) === -1;
|
27897
27924
|
};
|
27898
|
-
const dragSortData = (sourceId,
|
27899
|
-
if (!isNodeSortable(sourceId,
|
27925
|
+
const dragSortData = (sourceId, targetId) => {
|
27926
|
+
if (!isNodeSortable(sourceId, targetId)) {
|
27900
27927
|
return;
|
27901
27928
|
}
|
27902
27929
|
const sourceNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(sourceId)));
|
27903
|
-
const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(
|
27930
|
+
const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(targetId)));
|
27904
27931
|
const sourceNodeParent = getParentNodeData(sourceId);
|
27905
|
-
const targetNodeParent = getParentNodeData(
|
27932
|
+
const targetNodeParent = getParentNodeData(targetId);
|
27906
27933
|
const sourceNodeIndex = getNodeAttr2({
|
27907
27934
|
[NODE_ATTRIBUTES.UUID]: sourceId
|
27908
27935
|
}, NODE_ATTRIBUTES.INDEX);
|
27909
27936
|
const targetNodeIndex = getNodeAttr2({
|
27910
|
-
[NODE_ATTRIBUTES.UUID]:
|
27937
|
+
[NODE_ATTRIBUTES.UUID]: targetId
|
27911
27938
|
}, NODE_ATTRIBUTES.INDEX);
|
27912
27939
|
sourceNodeParent == null ? void 0 : sourceNodeParent[props2.children].splice(sourceNodeIndex, 1, targetNodeData);
|
27913
27940
|
targetNodeParent == null ? void 0 : targetNodeParent[props2.children].splice(targetNodeIndex, 1, sourceNodeData);
|
@@ -27935,12 +27962,18 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27935
27962
|
}
|
27936
27963
|
targetNodeData[props2.children].unshift(sourceNodeData);
|
27937
27964
|
};
|
27965
|
+
const handleTreeNodeDragLeave = (e) => {
|
27966
|
+
e.preventDefault();
|
27967
|
+
const targetNode = getTargetTreeNode(e);
|
27968
|
+
targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
|
27969
|
+
};
|
27938
27970
|
onMounted(() => {
|
27939
27971
|
if (props2.draggable && root.value) {
|
27940
27972
|
const rootTree = root.value.$el;
|
27941
27973
|
rootTree.addEventListener("mousedown", handleTreeNodeMousedown);
|
27942
27974
|
rootTree.addEventListener("dragstart", handleTreeNodeDragStart);
|
27943
27975
|
rootTree.addEventListener("dragover", handleTreeNodeDragover);
|
27976
|
+
rootTree.addEventListener("dragleave", handleTreeNodeDragLeave);
|
27944
27977
|
rootTree.addEventListener("drop", handleTreeNodeDrop);
|
27945
27978
|
}
|
27946
27979
|
});
|
@@ -27950,6 +27983,7 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27950
27983
|
rootTree.removeEventListener("mousedown", handleTreeNodeMousedown);
|
27951
27984
|
rootTree.removeEventListener("dragstart", handleTreeNodeDragStart);
|
27952
27985
|
rootTree.removeEventListener("dragover", handleTreeNodeDragover);
|
27986
|
+
rootTree.removeEventListener("dragleave", handleTreeNodeDragLeave);
|
27953
27987
|
rootTree.removeEventListener("drop", handleTreeNodeDrop);
|
27954
27988
|
}
|
27955
27989
|
});
|