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.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("span", {
27830
+ }, [createVNode("div", {
27819
27831
  "class": [resolveClassName("node-action")],
27820
27832
  "onClick": (e) => handleNodeActionClick(e, item)
27821
- }, [getActionIcon(item)]), createVNode("span", {
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, tartgetId) => {
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]: tartgetId
27929
+ [NODE_ATTRIBUTES.UUID]: targetId
27890
27930
  });
27891
27931
  const sourceParentNodeId = getNodeParentIdById(sourceId);
27892
- const targetParentNode = getNodeParentIdById(tartgetId);
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, tartgetId) => {
27899
- if (!isNodeSortable(sourceId, tartgetId)) {
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(tartgetId)));
27943
+ const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(targetId)));
27904
27944
  const sourceNodeParent = getParentNodeData(sourceId);
27905
- const targetNodeParent = getParentNodeData(tartgetId);
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]: tartgetId
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);