bkui-vue 0.0.1-beta.220 → 0.0.1-beta.222
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 +32 -32
- package/dist/index.esm.js +61 -13
- package/dist/index.umd.js +31 -31
- 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/constant.d.ts +9 -1
- package/lib/tree/index.d.ts +33 -1
- 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 +12 -0
- package/lib/tree/tree.less +17 -2
- package/lib/tree/tree.variable.css +21 -12
- package/lib/tree/use-node-drag.d.ts +1 -1
- package/lib/tree/util.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
@@ -27158,6 +27158,10 @@ var EVENTS = /* @__PURE__ */ ((EVENTS2) => {
|
|
27158
27158
|
EVENTS2["NODE_COLLAPSE"] = "nodeCollapse";
|
27159
27159
|
EVENTS2["NODE_EXPAND"] = "nodeExpand";
|
27160
27160
|
EVENTS2["NODE_CHECKED"] = "nodeChecked";
|
27161
|
+
EVENTS2["NODE_DRAG_START"] = "nodeDragStart";
|
27162
|
+
EVENTS2["NODE_DRAG_OVER"] = "nodeDragOver";
|
27163
|
+
EVENTS2["NODE_DRAG_LEAVE"] = "nodeDragLeave";
|
27164
|
+
EVENTS2["NODE_DROP"] = "nodeDrop";
|
27161
27165
|
return EVENTS2;
|
27162
27166
|
})(EVENTS || {});
|
27163
27167
|
const EMPTY = (..._args) => true;
|
@@ -27165,7 +27169,11 @@ const TreeEmitEventsType = {
|
|
27165
27169
|
["nodeClick"]: EMPTY,
|
27166
27170
|
["nodeCollapse"]: EMPTY,
|
27167
27171
|
["nodeExpand"]: EMPTY,
|
27168
|
-
["nodeChecked"]: EMPTY
|
27172
|
+
["nodeChecked"]: EMPTY,
|
27173
|
+
["nodeDragStart"]: EMPTY,
|
27174
|
+
["nodeDragOver"]: EMPTY,
|
27175
|
+
["nodeDragLeave"]: EMPTY,
|
27176
|
+
["nodeDrop"]: EMPTY
|
27169
27177
|
};
|
27170
27178
|
var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
|
27171
27179
|
NODE_ATTRIBUTES2["DEPTH"] = "__depth";
|
@@ -27242,6 +27250,8 @@ const treeProps = {
|
|
27242
27250
|
]).def(void 0),
|
27243
27251
|
emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
|
27244
27252
|
draggable: PropTypes.bool.def(false),
|
27253
|
+
disableDrag: Function,
|
27254
|
+
disableDrop: Function,
|
27245
27255
|
dragSort: PropTypes.bool.def(false),
|
27246
27256
|
selectable: PropTypes.bool.def(true),
|
27247
27257
|
showCheckbox: PropTypes.bool.def(false),
|
@@ -27438,6 +27448,8 @@ const getNodeRowClass = (item, schema) => {
|
|
27438
27448
|
return {
|
27439
27449
|
"is-checked": __is_checked,
|
27440
27450
|
"is-selected": __is_selected,
|
27451
|
+
"node-folder": item.is_folder,
|
27452
|
+
"node-leaf": item.is_leaf,
|
27441
27453
|
[resolveClassName("node-row")]: true
|
27442
27454
|
};
|
27443
27455
|
};
|
@@ -27815,10 +27827,10 @@ var useNodeAction = (props2, ctx, flatData, _renderData, schemaValues, initOptio
|
|
27815
27827
|
"class": getNodeItemClass(item, flatData.schema, props2),
|
27816
27828
|
"style": getNodeItemStyle(item, props2, flatData),
|
27817
27829
|
"onClick": (e) => handleNodeContentClick(item, e)
|
27818
|
-
}, [createVNode("
|
27830
|
+
}, [createVNode("div", {
|
27819
27831
|
"class": [resolveClassName("node-action")],
|
27820
27832
|
"onClick": (e) => handleNodeActionClick(e, item)
|
27821
|
-
}, [getActionIcon(item)]), createVNode("
|
27833
|
+
}, [getActionIcon(item)]), createVNode("div", {
|
27822
27834
|
"class": resolveClassName("node-content")
|
27823
27835
|
}, [[getCheckboxRender(item), getNodePrefixIcon(item)], createVNode("span", {
|
27824
27836
|
"class": resolveClassName("node-text")
|
@@ -27835,7 +27847,7 @@ var useNodeAction = (props2, ctx, flatData, _renderData, schemaValues, initOptio
|
|
27835
27847
|
setOpen
|
27836
27848
|
};
|
27837
27849
|
};
|
27838
|
-
var useNodeDrag = (props2, root, flatData) => {
|
27850
|
+
var useNodeDrag = (props2, ctx, root, flatData) => {
|
27839
27851
|
const {
|
27840
27852
|
getSourceNodeByUID,
|
27841
27853
|
getNodeParentIdById,
|
@@ -27844,22 +27856,43 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27844
27856
|
getNodePath,
|
27845
27857
|
isRootNode
|
27846
27858
|
} = useNodeAttribute(flatData, props2);
|
27859
|
+
const isNeedCheckDraggable = computed(() => typeof props2.disableDrag === "function");
|
27860
|
+
const isNeedCheckDroppable = computed(() => typeof props2.disableDrop === "function");
|
27847
27861
|
const getTargetTreeNode = (e) => {
|
27848
27862
|
const target = e.target;
|
27849
27863
|
return target.closest("[data-tree-node]");
|
27850
27864
|
};
|
27865
|
+
const getNodeByTargetTreeNode = (targetNode) => {
|
27866
|
+
var _a;
|
27867
|
+
const uid = (_a = targetNode == null ? void 0 : targetNode.dataset) == null ? void 0 : _a.treeNode;
|
27868
|
+
return getSourceNodeByUID(uid);
|
27869
|
+
};
|
27851
27870
|
const handleTreeNodeMouseup = (e) => {
|
27852
27871
|
const targetNode = getTargetTreeNode(e);
|
27853
27872
|
targetNode.removeEventListener("mouseup", handleTreeNodeMouseup);
|
27854
27873
|
};
|
27855
27874
|
const handleTreeNodeMousedown = (e) => {
|
27856
27875
|
const targetNode = getTargetTreeNode(e);
|
27876
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27877
|
+
if (data2.draggable === false || isNeedCheckDraggable.value && props2.disableDrag(data2)) {
|
27878
|
+
targetNode.classList.add("bk-tree-drag-disabled");
|
27879
|
+
return;
|
27880
|
+
}
|
27857
27881
|
targetNode.setAttribute("draggable", "true");
|
27858
27882
|
targetNode.addEventListener("mouseup", handleTreeNodeMouseup);
|
27859
27883
|
};
|
27860
27884
|
const handleTreeNodeDragover = (e) => {
|
27861
27885
|
e.preventDefault();
|
27862
27886
|
const targetNode = getTargetTreeNode(e);
|
27887
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27888
|
+
ctx.emit(EVENTS.NODE_DRAG_OVER, e, targetNode, data2);
|
27889
|
+
if (isNeedCheckDroppable.value && (props2 == null ? void 0 : props2.disableDrop(data2))) {
|
27890
|
+
e.dataTransfer.effectAllowed = "move";
|
27891
|
+
e.dataTransfer.dropEffect = "none";
|
27892
|
+
targetNode.classList.add("bk-tree-drop-disabled");
|
27893
|
+
return;
|
27894
|
+
}
|
27895
|
+
targetNode.classList.add("bk-tree-drop-active");
|
27863
27896
|
const sourceNodeId = e.dataTransfer.getData("node-id");
|
27864
27897
|
const targetNodeId = targetNode.getAttribute("data-tree-node");
|
27865
27898
|
const transferEffect = isNodeSortable(sourceNodeId, targetNodeId) ? "move" : "none";
|
@@ -27872,42 +27905,49 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27872
27905
|
const targetNode = getTargetTreeNode(e);
|
27873
27906
|
e.dataTransfer.setData("text/plain", "");
|
27874
27907
|
e.dataTransfer.setData("node-id", targetNode.getAttribute("data-tree-node"));
|
27908
|
+
ctx.emit(EVENTS.NODE_DRAG_START, e, targetNode);
|
27875
27909
|
};
|
27876
27910
|
const handleTreeNodeDrop = (e) => {
|
27877
27911
|
e.preventDefault();
|
27878
27912
|
e.stopPropagation();
|
27879
27913
|
const targetNode = getTargetTreeNode(e);
|
27914
|
+
targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
|
27915
|
+
const data2 = getNodeByTargetTreeNode(targetNode);
|
27916
|
+
if (isNeedCheckDroppable.value && props2.disableDrop(data2)) {
|
27917
|
+
return;
|
27918
|
+
}
|
27880
27919
|
const sourceNodeId = e.dataTransfer.getData("node-id");
|
27881
27920
|
const targetNodeId = targetNode.getAttribute("data-tree-node");
|
27882
27921
|
Reflect.apply(props2.dragSort ? dragSortData : dragAsChildNode, globalThis, [sourceNodeId, targetNodeId]);
|
27922
|
+
ctx.emit(EVENTS.NODE_DROP, e, targetNode, data2);
|
27883
27923
|
};
|
27884
|
-
const isNodeSortable = (sourceId,
|
27924
|
+
const isNodeSortable = (sourceId, targetId) => {
|
27885
27925
|
const sourcePath = getNodePath({
|
27886
27926
|
[NODE_ATTRIBUTES.UUID]: sourceId
|
27887
27927
|
});
|
27888
27928
|
const targetPath = getNodePath({
|
27889
|
-
[NODE_ATTRIBUTES.UUID]:
|
27929
|
+
[NODE_ATTRIBUTES.UUID]: targetId
|
27890
27930
|
});
|
27891
27931
|
const sourceParentNodeId = getNodeParentIdById(sourceId);
|
27892
|
-
const targetParentNode = getNodeParentIdById(
|
27932
|
+
const targetParentNode = getNodeParentIdById(targetId);
|
27893
27933
|
if (sourceParentNodeId === targetParentNode) {
|
27894
27934
|
return true;
|
27895
27935
|
}
|
27896
27936
|
return sourcePath.indexOf(targetPath) === -1 && targetPath.indexOf(sourcePath) === -1;
|
27897
27937
|
};
|
27898
|
-
const dragSortData = (sourceId,
|
27899
|
-
if (!isNodeSortable(sourceId,
|
27938
|
+
const dragSortData = (sourceId, targetId) => {
|
27939
|
+
if (!isNodeSortable(sourceId, targetId)) {
|
27900
27940
|
return;
|
27901
27941
|
}
|
27902
27942
|
const sourceNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(sourceId)));
|
27903
|
-
const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(
|
27943
|
+
const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(targetId)));
|
27904
27944
|
const sourceNodeParent = getParentNodeData(sourceId);
|
27905
|
-
const targetNodeParent = getParentNodeData(
|
27945
|
+
const targetNodeParent = getParentNodeData(targetId);
|
27906
27946
|
const sourceNodeIndex = getNodeAttr2({
|
27907
27947
|
[NODE_ATTRIBUTES.UUID]: sourceId
|
27908
27948
|
}, NODE_ATTRIBUTES.INDEX);
|
27909
27949
|
const targetNodeIndex = getNodeAttr2({
|
27910
|
-
[NODE_ATTRIBUTES.UUID]:
|
27950
|
+
[NODE_ATTRIBUTES.UUID]: targetId
|
27911
27951
|
}, NODE_ATTRIBUTES.INDEX);
|
27912
27952
|
sourceNodeParent == null ? void 0 : sourceNodeParent[props2.children].splice(sourceNodeIndex, 1, targetNodeData);
|
27913
27953
|
targetNodeParent == null ? void 0 : targetNodeParent[props2.children].splice(targetNodeIndex, 1, sourceNodeData);
|
@@ -27935,12 +27975,19 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27935
27975
|
}
|
27936
27976
|
targetNodeData[props2.children].unshift(sourceNodeData);
|
27937
27977
|
};
|
27978
|
+
const handleTreeNodeDragLeave = (e) => {
|
27979
|
+
e.preventDefault();
|
27980
|
+
const targetNode = getTargetTreeNode(e);
|
27981
|
+
targetNode.classList.remove("bk-tree-drop-active", "bk-tree-drop-disabled");
|
27982
|
+
ctx.emit(EVENTS.NODE_DRAG_LEAVE, e, targetNode);
|
27983
|
+
};
|
27938
27984
|
onMounted(() => {
|
27939
27985
|
if (props2.draggable && root.value) {
|
27940
27986
|
const rootTree = root.value.$el;
|
27941
27987
|
rootTree.addEventListener("mousedown", handleTreeNodeMousedown);
|
27942
27988
|
rootTree.addEventListener("dragstart", handleTreeNodeDragStart);
|
27943
27989
|
rootTree.addEventListener("dragover", handleTreeNodeDragover);
|
27990
|
+
rootTree.addEventListener("dragleave", handleTreeNodeDragLeave);
|
27944
27991
|
rootTree.addEventListener("drop", handleTreeNodeDrop);
|
27945
27992
|
}
|
27946
27993
|
});
|
@@ -27950,6 +27997,7 @@ var useNodeDrag = (props2, root, flatData) => {
|
|
27950
27997
|
rootTree.removeEventListener("mousedown", handleTreeNodeMousedown);
|
27951
27998
|
rootTree.removeEventListener("dragstart", handleTreeNodeDragStart);
|
27952
27999
|
rootTree.removeEventListener("dragover", handleTreeNodeDragover);
|
28000
|
+
rootTree.removeEventListener("dragleave", handleTreeNodeDragLeave);
|
27953
28001
|
rootTree.removeEventListener("drop", handleTreeNodeDrop);
|
27954
28002
|
}
|
27955
28003
|
});
|
@@ -28339,7 +28387,7 @@ var Component$8 = defineComponent({
|
|
28339
28387
|
const {
|
28340
28388
|
renderEmpty
|
28341
28389
|
} = useEmpty(props2, ctx);
|
28342
|
-
useNodeDrag(props2, root, flatData);
|
28390
|
+
useNodeDrag(props2, ctx, root, flatData);
|
28343
28391
|
const renderTreeContent = (scopedData) => {
|
28344
28392
|
if (scopedData.length) {
|
28345
28393
|
return scopedData.map(renderTreeNode);
|