bkui-vue 2.0.2-beta.30 → 2.0.2-beta.32
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/cli.css +1 -1
- package/dist/index.cjs.js +17 -17
- package/dist/index.esm.js +5433 -5373
- package/dist/index.umd.js +21 -21
- package/dist/style.variable.css +1 -1
- package/lib/dropdown/dropdown.d.ts +1 -0
- package/lib/dropdown/index.d.ts +3 -0
- package/lib/dropdown/index.js +11 -6
- package/lib/form/form-item.d.ts +3 -0
- package/lib/form/form.css +16 -4
- package/lib/form/form.less +24 -6
- package/lib/form/form.variable.css +16 -4
- package/lib/form/index.d.ts +2 -0
- package/lib/form/index.js +7 -7
- package/lib/index.js +1 -1
- package/lib/search-select/index.d.ts +18 -0
- package/lib/search-select/index.js +46 -8
- package/lib/search-select/input.d.ts +3 -0
- package/lib/search-select/search-select.d.ts +6 -0
- package/lib/search-select/selected.d.ts +6 -0
- package/lib/tree/constant.d.ts +2 -0
- package/lib/tree/index.d.ts +44 -0
- package/lib/tree/index.js +94 -24
- package/lib/tree/props.d.ts +19 -0
- package/lib/tree/tree.d.ts +20 -0
- package/package.json +1 -1
@@ -78,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
78
78
|
menuList: import("vue").Ref<ISearchItem[]>;
|
79
79
|
menuHoverId: import("vue").Ref<string>;
|
80
80
|
isFocus: import("vue").Ref<boolean>;
|
81
|
+
isComposition: import("vue").Ref<boolean>;
|
81
82
|
usingItem: import("vue").Ref<SelectedItem>;
|
82
83
|
showPopover: import("vue").Ref<boolean>;
|
83
84
|
showNoSelectValueError: import("vue").Ref<boolean>;
|
@@ -113,6 +114,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
113
114
|
logical: string;
|
114
115
|
}>;
|
115
116
|
inputKey: import("vue").Ref<string>;
|
117
|
+
handleCompositionEnd: (event: CompositionEvent) => void;
|
118
|
+
handleCompositionStart: () => void;
|
116
119
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
|
117
120
|
data: {
|
118
121
|
type: PropType<ISearchItem[]>;
|
@@ -211,6 +214,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
211
214
|
menuList: import("vue").Ref<ISearchItem[]>;
|
212
215
|
menuHoverId: import("vue").Ref<string>;
|
213
216
|
isFocus: import("vue").Ref<boolean>;
|
217
|
+
isComposition: import("vue").Ref<boolean>;
|
214
218
|
usingItem: import("vue").Ref<SelectedItem>;
|
215
219
|
showPopover: import("vue").Ref<boolean>;
|
216
220
|
showNoSelectValueError: import("vue").Ref<boolean>;
|
@@ -246,6 +250,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
246
250
|
logical: string;
|
247
251
|
}>;
|
248
252
|
inputKey: import("vue").Ref<string>;
|
253
|
+
handleCompositionEnd: (event: CompositionEvent) => void;
|
254
|
+
handleCompositionStart: () => void;
|
249
255
|
}, {}, {}, {}, {
|
250
256
|
maxHeight: number;
|
251
257
|
mode: SearchInputMode;
|
package/lib/tree/constant.d.ts
CHANGED
@@ -4,6 +4,7 @@ export declare enum EVENTS {
|
|
4
4
|
NODE_COLLAPSE = "nodeCollapse",
|
5
5
|
NODE_DRAG_LEAVE = "nodeDragLeave",
|
6
6
|
NODE_DRAG_OVER = "nodeDragOver",
|
7
|
+
NODE_DRAG_SORT = "nodeDragSort",
|
7
8
|
NODE_DRAG_START = "nodeDragStart",
|
8
9
|
NODE_DROP = "nodeDrop",
|
9
10
|
NODE_ENTER_VIEW = "nodeEnterView",
|
@@ -18,6 +19,7 @@ export declare const TreeEmitEventsType: {
|
|
18
19
|
nodeDragStart: (..._args: any[]) => boolean;
|
19
20
|
nodeDragOver: (..._args: any[]) => boolean;
|
20
21
|
nodeDragLeave: (..._args: any[]) => boolean;
|
22
|
+
nodeDragSort: (..._args: any[]) => boolean;
|
21
23
|
nodeDrop: (..._args: any[]) => boolean;
|
22
24
|
nodeEnterView: (..._args: any[]) => boolean;
|
23
25
|
nodeSelected: (..._args: any[]) => boolean;
|
package/lib/tree/index.d.ts
CHANGED
@@ -70,11 +70,19 @@ declare const BkTree: {
|
|
70
70
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
71
71
|
default: (...args: any[]) => any;
|
72
72
|
};
|
73
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
74
|
+
default: number;
|
75
|
+
} & {
|
76
|
+
default: number;
|
77
|
+
};
|
73
78
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
74
79
|
default: boolean;
|
75
80
|
} & {
|
76
81
|
default: boolean;
|
77
82
|
};
|
83
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
84
|
+
default: string;
|
85
|
+
};
|
78
86
|
selectable: import("vue-types").VueTypeDef<any> & {
|
79
87
|
default: any;
|
80
88
|
};
|
@@ -132,6 +140,7 @@ declare const BkTree: {
|
|
132
140
|
onNodeCollapse?: (...args: any[]) => any;
|
133
141
|
onNodeDragLeave?: (...args: any[]) => any;
|
134
142
|
onNodeDragOver?: (...args: any[]) => any;
|
143
|
+
onNodeDragSort?: (...args: any[]) => any;
|
135
144
|
onNodeDragStart?: (...args: any[]) => any;
|
136
145
|
onNodeDrop?: (...args: any[]) => any;
|
137
146
|
onNodeEnterView?: (...args: any[]) => any;
|
@@ -145,6 +154,7 @@ declare const BkTree: {
|
|
145
154
|
nodeDragStart: (..._args: any[]) => boolean;
|
146
155
|
nodeDragOver: (..._args: any[]) => boolean;
|
147
156
|
nodeDragLeave: (..._args: any[]) => boolean;
|
157
|
+
nodeDragSort: (..._args: any[]) => boolean;
|
148
158
|
nodeDrop: (..._args: any[]) => boolean;
|
149
159
|
nodeEnterView: (..._args: any[]) => boolean;
|
150
160
|
nodeSelected: (..._args: any[]) => boolean;
|
@@ -219,11 +229,19 @@ declare const BkTree: {
|
|
219
229
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
220
230
|
default: (...args: any[]) => any;
|
221
231
|
};
|
232
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
233
|
+
default: number;
|
234
|
+
} & {
|
235
|
+
default: number;
|
236
|
+
};
|
222
237
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
223
238
|
default: boolean;
|
224
239
|
} & {
|
225
240
|
default: boolean;
|
226
241
|
};
|
242
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
243
|
+
default: string;
|
244
|
+
};
|
227
245
|
selectable: import("vue-types").VueTypeDef<any> & {
|
228
246
|
default: any;
|
229
247
|
};
|
@@ -281,6 +299,7 @@ declare const BkTree: {
|
|
281
299
|
onNodeCollapse?: (...args: any[]) => any;
|
282
300
|
onNodeDragLeave?: (...args: any[]) => any;
|
283
301
|
onNodeDragOver?: (...args: any[]) => any;
|
302
|
+
onNodeDragSort?: (...args: any[]) => any;
|
284
303
|
onNodeDragStart?: (...args: any[]) => any;
|
285
304
|
onNodeDrop?: (...args: any[]) => any;
|
286
305
|
onNodeEnterView?: (...args: any[]) => any;
|
@@ -304,7 +323,9 @@ declare const BkTree: {
|
|
304
323
|
virtualRender: boolean;
|
305
324
|
disableDrag: (...args: any[]) => any;
|
306
325
|
disableDrop: (...args: any[]) => any;
|
326
|
+
dragThreshold: number;
|
307
327
|
dragSort: boolean;
|
328
|
+
dragSortMode: string;
|
308
329
|
selectable: any;
|
309
330
|
disabledFolderSelectable: boolean;
|
310
331
|
showCheckbox: any;
|
@@ -393,11 +414,19 @@ declare const BkTree: {
|
|
393
414
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
394
415
|
default: (...args: any[]) => any;
|
395
416
|
};
|
417
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
418
|
+
default: number;
|
419
|
+
} & {
|
420
|
+
default: number;
|
421
|
+
};
|
396
422
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
397
423
|
default: boolean;
|
398
424
|
} & {
|
399
425
|
default: boolean;
|
400
426
|
};
|
427
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
428
|
+
default: string;
|
429
|
+
};
|
401
430
|
selectable: import("vue-types").VueTypeDef<any> & {
|
402
431
|
default: any;
|
403
432
|
};
|
@@ -455,6 +484,7 @@ declare const BkTree: {
|
|
455
484
|
onNodeCollapse?: (...args: any[]) => any;
|
456
485
|
onNodeDragLeave?: (...args: any[]) => any;
|
457
486
|
onNodeDragOver?: (...args: any[]) => any;
|
487
|
+
onNodeDragSort?: (...args: any[]) => any;
|
458
488
|
onNodeDragStart?: (...args: any[]) => any;
|
459
489
|
onNodeDrop?: (...args: any[]) => any;
|
460
490
|
onNodeEnterView?: (...args: any[]) => any;
|
@@ -478,7 +508,9 @@ declare const BkTree: {
|
|
478
508
|
virtualRender: boolean;
|
479
509
|
disableDrag: (...args: any[]) => any;
|
480
510
|
disableDrop: (...args: any[]) => any;
|
511
|
+
dragThreshold: number;
|
481
512
|
dragSort: boolean;
|
513
|
+
dragSortMode: string;
|
482
514
|
selectable: any;
|
483
515
|
disabledFolderSelectable: boolean;
|
484
516
|
showCheckbox: any;
|
@@ -564,11 +596,19 @@ declare const BkTree: {
|
|
564
596
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
565
597
|
default: (...args: any[]) => any;
|
566
598
|
};
|
599
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
600
|
+
default: number;
|
601
|
+
} & {
|
602
|
+
default: number;
|
603
|
+
};
|
567
604
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
568
605
|
default: boolean;
|
569
606
|
} & {
|
570
607
|
default: boolean;
|
571
608
|
};
|
609
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
610
|
+
default: string;
|
611
|
+
};
|
572
612
|
selectable: import("vue-types").VueTypeDef<any> & {
|
573
613
|
default: any;
|
574
614
|
};
|
@@ -626,6 +666,7 @@ declare const BkTree: {
|
|
626
666
|
onNodeCollapse?: (...args: any[]) => any;
|
627
667
|
onNodeDragLeave?: (...args: any[]) => any;
|
628
668
|
onNodeDragOver?: (...args: any[]) => any;
|
669
|
+
onNodeDragSort?: (...args: any[]) => any;
|
629
670
|
onNodeDragStart?: (...args: any[]) => any;
|
630
671
|
onNodeDrop?: (...args: any[]) => any;
|
631
672
|
onNodeEnterView?: (...args: any[]) => any;
|
@@ -639,6 +680,7 @@ declare const BkTree: {
|
|
639
680
|
nodeDragStart: (..._args: any[]) => boolean;
|
640
681
|
nodeDragOver: (..._args: any[]) => boolean;
|
641
682
|
nodeDragLeave: (..._args: any[]) => boolean;
|
683
|
+
nodeDragSort: (..._args: any[]) => boolean;
|
642
684
|
nodeDrop: (..._args: any[]) => boolean;
|
643
685
|
nodeEnterView: (..._args: any[]) => boolean;
|
644
686
|
nodeSelected: (..._args: any[]) => boolean;
|
@@ -660,7 +702,9 @@ declare const BkTree: {
|
|
660
702
|
virtualRender: boolean;
|
661
703
|
disableDrag: (...args: any[]) => any;
|
662
704
|
disableDrop: (...args: any[]) => any;
|
705
|
+
dragThreshold: number;
|
663
706
|
dragSort: boolean;
|
707
|
+
dragSortMode: string;
|
664
708
|
selectable: any;
|
665
709
|
disabledFolderSelectable: boolean;
|
666
710
|
showCheckbox: any;
|
package/lib/tree/index.js
CHANGED
@@ -169,6 +169,7 @@ function _defineProperty(obj, key, value) {
|
|
169
169
|
}
|
170
170
|
;// CONCATENATED MODULE: ../../packages/tree/src/constant.ts
|
171
171
|
|
172
|
+
var _TreeEmitEventsType;
|
172
173
|
/*
|
173
174
|
* Tencent is pleased to support the open source community by making
|
174
175
|
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
|
@@ -201,6 +202,7 @@ var EVENTS;
|
|
201
202
|
EVENTS["NODE_COLLAPSE"] = "nodeCollapse";
|
202
203
|
EVENTS["NODE_DRAG_LEAVE"] = "nodeDragLeave";
|
203
204
|
EVENTS["NODE_DRAG_OVER"] = "nodeDragOver";
|
205
|
+
EVENTS["NODE_DRAG_SORT"] = "nodeDragSort";
|
204
206
|
EVENTS["NODE_DRAG_START"] = "nodeDragStart";
|
205
207
|
EVENTS["NODE_DROP"] = "nodeDrop";
|
206
208
|
EVENTS["NODE_ENTER_VIEW"] = "nodeEnterView";
|
@@ -210,7 +212,7 @@ var EVENTS;
|
|
210
212
|
var EMPTY = function EMPTY() {
|
211
213
|
return true;
|
212
214
|
};
|
213
|
-
var TreeEmitEventsType = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(
|
215
|
+
var TreeEmitEventsType = (_TreeEmitEventsType = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TreeEmitEventsType, EVENTS.NODE_CLICK, EMPTY), EVENTS.NODE_COLLAPSE, EMPTY), EVENTS.NODE_EXPAND, EMPTY), EVENTS.NODE_CHECKED, EMPTY), EVENTS.NODE_DRAG_START, EMPTY), EVENTS.NODE_DRAG_OVER, EMPTY), EVENTS.NODE_DRAG_LEAVE, EMPTY), EVENTS.NODE_DRAG_SORT, EMPTY), EVENTS.NODE_DROP, EMPTY), EVENTS.NODE_ENTER_VIEW, EMPTY), _defineProperty(_TreeEmitEventsType, EVENTS.NODE_SELECTED, EMPTY));
|
214
216
|
/**
|
215
217
|
* 节点扩展属性
|
216
218
|
*/
|
@@ -382,10 +384,23 @@ var treeProps = {
|
|
382
384
|
draggable: shared_namespaceObject.PropTypes.bool.def(false),
|
383
385
|
disableDrag: shared_namespaceObject.PropTypes.func,
|
384
386
|
disableDrop: shared_namespaceObject.PropTypes.func,
|
387
|
+
/**
|
388
|
+
* 拖拽阈值
|
389
|
+
* 用于判断拖拽时鼠标位置与节点的距离
|
390
|
+
* 当鼠标位置与节点的距离大于此值时,才会触发拖拽
|
391
|
+
*/
|
392
|
+
dragThreshold: shared_namespaceObject.PropTypes.number.def(0.2),
|
385
393
|
/**
|
386
394
|
* 节点拖拽时可交换位置(开启拖拽可交换位置后将不支持改变层级)
|
387
395
|
*/
|
388
396
|
dragSort: shared_namespaceObject.PropTypes.bool.def(false),
|
397
|
+
/**
|
398
|
+
* 拖拽排序模式
|
399
|
+
* - any: 允许拖拽到任意位置
|
400
|
+
* - next: 只允许拖拽到同级节点的前后位置
|
401
|
+
* 默认 any
|
402
|
+
*/
|
403
|
+
dragSortMode: shared_namespaceObject.PropTypes.oneOf(['any', 'next']).def('any'),
|
389
404
|
/**
|
390
405
|
* 节点是否可以选中
|
391
406
|
*/
|
@@ -1907,7 +1922,8 @@ var use_node_drag_this = undefined;
|
|
1907
1922
|
getNodeParentIdById = _useNodeAttribute.getNodeParentIdById,
|
1908
1923
|
extendNodeAttr = _useNodeAttribute.extendNodeAttr,
|
1909
1924
|
getNodeAttrById = _useNodeAttribute.getNodeAttrById,
|
1910
|
-
isRootNode = _useNodeAttribute.isRootNode
|
1925
|
+
isRootNode = _useNodeAttribute.isRootNode,
|
1926
|
+
setNodeAttrById = _useNodeAttribute.setNodeAttrById;
|
1911
1927
|
var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
|
1912
1928
|
resolveClassName = _usePrefix.resolveClassName;
|
1913
1929
|
var isNeedCheckDraggable = (0,external_vue_namespaceObject.computed)(function () {
|
@@ -1916,6 +1932,7 @@ var use_node_drag_this = undefined;
|
|
1916
1932
|
var isNeedCheckDroppable = (0,external_vue_namespaceObject.computed)(function () {
|
1917
1933
|
return typeof props.disableDrop === 'function';
|
1918
1934
|
});
|
1935
|
+
var dragThreshold = props.dragThreshold || 0.2; // 新增配置项,默认值为 0.2
|
1919
1936
|
var dragNodeId = '';
|
1920
1937
|
var draggedItem = null;
|
1921
1938
|
var nodeRectMap = new WeakMap();
|
@@ -1928,6 +1945,14 @@ var use_node_drag_this = undefined;
|
|
1928
1945
|
var uid = targetNode === null || targetNode === void 0 || (_targetNode$dataset = targetNode.dataset) === null || _targetNode$dataset === void 0 ? void 0 : _targetNode$dataset.treeNode;
|
1929
1946
|
return getSourceNodeByUID(uid);
|
1930
1947
|
};
|
1948
|
+
var updateDropStyles = function updateDropStyles(targetNode, stylesToAdd, stylesToRemove) {
|
1949
|
+
stylesToRemove.forEach(function (style) {
|
1950
|
+
return targetNode.classList.remove(style);
|
1951
|
+
});
|
1952
|
+
stylesToAdd.forEach(function (style) {
|
1953
|
+
return targetNode.classList.add(style);
|
1954
|
+
});
|
1955
|
+
};
|
1931
1956
|
var handleTreeNodeMouseup = function handleTreeNodeMouseup(e) {
|
1932
1957
|
var targetNode = getTargetTreeNode(e);
|
1933
1958
|
targetNode.removeEventListener('mouseup', handleTreeNodeMouseup);
|
@@ -1956,6 +1981,7 @@ var use_node_drag_this = undefined;
|
|
1956
1981
|
dragOverItem = targetNode;
|
1957
1982
|
}
|
1958
1983
|
var data = extendNodeAttr(getNodeByTargetTreeNode(targetNode));
|
1984
|
+
// 如果目标节点不在缓存中,重新计算并缓存
|
1959
1985
|
if (!nodeRectMap.has(targetNode)) {
|
1960
1986
|
nodeRectMap.set(targetNode, targetNode.getBoundingClientRect());
|
1961
1987
|
}
|
@@ -1963,23 +1989,14 @@ var use_node_drag_this = undefined;
|
|
1963
1989
|
var _nodeRectMap$get = nodeRectMap.get(targetNode),
|
1964
1990
|
top = _nodeRectMap$get.top,
|
1965
1991
|
height = _nodeRectMap$get.height;
|
1966
|
-
var threshold = height *
|
1992
|
+
var threshold = height * dragThreshold; // 使用配置项
|
1967
1993
|
var offsetY = clientY - top;
|
1968
1994
|
if (offsetY < threshold) {
|
1969
|
-
|
1970
|
-
targetNode.classList.add(dropBefore);
|
1971
|
-
targetNode.classList.remove(dropAfter, dropInner);
|
1972
|
-
}
|
1995
|
+
updateDropStyles(targetNode, [dropBefore], [dropAfter, dropInner]);
|
1973
1996
|
} else if (offsetY > height - threshold) {
|
1974
|
-
|
1975
|
-
targetNode.classList.add(dropAfter);
|
1976
|
-
targetNode.classList.remove(dropBefore, dropInner);
|
1977
|
-
}
|
1997
|
+
updateDropStyles(targetNode, [dropAfter], [dropBefore, dropInner]);
|
1978
1998
|
} else {
|
1979
|
-
|
1980
|
-
targetNode.classList.add(dropInner);
|
1981
|
-
targetNode.classList.remove(dropBefore, dropAfter);
|
1982
|
-
}
|
1999
|
+
updateDropStyles(targetNode, [dropInner], [dropBefore, dropAfter]);
|
1983
2000
|
}
|
1984
2001
|
ctx.emit(EVENTS.NODE_DRAG_OVER, e, targetNode, data);
|
1985
2002
|
if (isNeedCheckDroppable.value && props !== null && props !== void 0 && props.disableDrop(data)) {
|
@@ -2013,19 +2030,19 @@ var use_node_drag_this = undefined;
|
|
2013
2030
|
e.preventDefault();
|
2014
2031
|
e.stopPropagation();
|
2015
2032
|
var targetNode = getTargetTreeNode(e);
|
2033
|
+
if (!targetNode) return;
|
2016
2034
|
targetNode.classList.remove("".concat(resolveClassName('tree-drop-active')), "".concat(resolveClassName('tree-drop-disabled')));
|
2017
2035
|
var data = extendNodeAttr(getNodeByTargetTreeNode(targetNode));
|
2018
2036
|
if (isNeedCheckDroppable.value && props.disableDrop(data)) {
|
2019
2037
|
return;
|
2020
2038
|
}
|
2021
|
-
var sourceNodeId = dragNodeId;
|
2039
|
+
var sourceNodeId = dragNodeId;
|
2022
2040
|
var targetNodeId = targetNode.getAttribute('data-tree-node');
|
2023
2041
|
if (sourceNodeId !== targetNodeId) {
|
2024
2042
|
var _dragOverItem2, _dragOverItem3, _dragOverItem4;
|
2025
2043
|
if ((_dragOverItem2 = dragOverItem) !== null && _dragOverItem2 !== void 0 && _dragOverItem2.classList.contains(dropInner)) {
|
2026
2044
|
Reflect.apply(dragAsChildNode, use_node_drag_this, [sourceNodeId, targetNodeId]);
|
2027
|
-
}
|
2028
|
-
if ((_dragOverItem3 = dragOverItem) !== null && _dragOverItem3 !== void 0 && _dragOverItem3.classList.contains(dropAfter) || (_dragOverItem4 = dragOverItem) !== null && _dragOverItem4 !== void 0 && _dragOverItem4.classList.contains(dropBefore)) {
|
2045
|
+
} else if ((_dragOverItem3 = dragOverItem) !== null && _dragOverItem3 !== void 0 && _dragOverItem3.classList.contains(dropAfter) || (_dragOverItem4 = dragOverItem) !== null && _dragOverItem4 !== void 0 && _dragOverItem4.classList.contains(dropBefore)) {
|
2029
2046
|
Reflect.apply(dragSortData, use_node_drag_this, [sourceNodeId, targetNodeId]);
|
2030
2047
|
}
|
2031
2048
|
ctx.emit(EVENTS.NODE_DROP, e, targetNode, data);
|
@@ -2038,20 +2055,69 @@ var use_node_drag_this = undefined;
|
|
2038
2055
|
return sourceId !== targetId;
|
2039
2056
|
};
|
2040
2057
|
var dragSortData = function dragSortData(sourceId, targetId) {
|
2041
|
-
var _dragOverItem6;
|
2058
|
+
var _dragOverItem6, _dragOverItem7;
|
2042
2059
|
if (!props.dragSort || !isNodeSortable(sourceId, targetId)) {
|
2043
2060
|
return;
|
2044
2061
|
}
|
2045
2062
|
var sourceNodeData = getSourceNodeByUID(sourceId);
|
2063
|
+
var targetNodeData = getSourceNodeByUID(targetId);
|
2064
|
+
if (!sourceNodeData || !targetNodeData) return;
|
2046
2065
|
var sourceNodeParent = getParentNodeData(sourceId);
|
2047
|
-
var
|
2048
|
-
|
2049
|
-
|
2066
|
+
var targetNodeParent = getParentNodeData(targetId);
|
2067
|
+
if (!sourceNodeParent || !targetNodeParent) return;
|
2068
|
+
// 只允许同父节点下排序
|
2069
|
+
if (props.dragSortMode === 'next') {
|
2070
|
+
if (sourceNodeParent !== targetNodeParent) return;
|
2071
|
+
}
|
2072
|
+
var childrenKey = props.children;
|
2073
|
+
var sourceSiblings = sourceNodeParent[childrenKey];
|
2074
|
+
var targetSlibings = targetNodeParent[childrenKey];
|
2075
|
+
if (!Array.isArray(sourceSiblings)) return;
|
2076
|
+
var sourceNodeIndex = sourceSiblings.findIndex(function (item) {
|
2077
|
+
return item === sourceNodeData;
|
2078
|
+
});
|
2079
|
+
var targetNodeIndex = targetSlibings.findIndex(function (item) {
|
2080
|
+
return item === targetNodeData;
|
2081
|
+
});
|
2082
|
+
if (sourceNodeIndex === -1 || targetNodeIndex === -1) return;
|
2083
|
+
// 先移除源节点
|
2084
|
+
sourceSiblings.splice(sourceNodeIndex, 1);
|
2085
|
+
// 计算插入位置
|
2050
2086
|
if ((_dragOverItem6 = dragOverItem) !== null && _dragOverItem6 !== void 0 && _dragOverItem6.classList.contains(dropAfter)) {
|
2087
|
+
// 如果源节点在目标节点前面,移除后 targetNodeIndex 需要减 1
|
2088
|
+
if (sourceNodeIndex < targetNodeIndex) {
|
2089
|
+
targetNodeIndex = targetNodeIndex - 1;
|
2090
|
+
}
|
2051
2091
|
targetNodeIndex = targetNodeIndex + 1;
|
2092
|
+
} else if ((_dragOverItem7 = dragOverItem) !== null && _dragOverItem7 !== void 0 && _dragOverItem7.classList.contains(dropBefore)) {
|
2093
|
+
// 如果源节点在目标节点后面,移除后 targetNodeIndex 不变
|
2094
|
+
if (sourceNodeIndex > targetNodeIndex) {
|
2095
|
+
// do nothing
|
2096
|
+
}
|
2052
2097
|
}
|
2053
|
-
|
2054
|
-
|
2098
|
+
// 插入节点
|
2099
|
+
targetSlibings.splice(targetNodeIndex, 0, sourceNodeData);
|
2100
|
+
// 更新所有兄弟节点的 INDEX
|
2101
|
+
targetSlibings.forEach(function (item, idx) {
|
2102
|
+
var nodeId = getNodeAttrById(item[NODE_ATTRIBUTES.UUID], NODE_ATTRIBUTES.UUID) || item[NODE_ATTRIBUTES.UUID];
|
2103
|
+
if (nodeId) {
|
2104
|
+
setNodeAttrById(nodeId, NODE_ATTRIBUTES.INDEX, idx);
|
2105
|
+
}
|
2106
|
+
});
|
2107
|
+
sourceSiblings.forEach(function (item, idx) {
|
2108
|
+
var nodeId = getNodeAttrById(item[NODE_ATTRIBUTES.UUID], NODE_ATTRIBUTES.UUID) || item[NODE_ATTRIBUTES.UUID];
|
2109
|
+
if (nodeId) {
|
2110
|
+
setNodeAttrById(nodeId, NODE_ATTRIBUTES.INDEX, idx);
|
2111
|
+
}
|
2112
|
+
});
|
2113
|
+
// 触发更新
|
2114
|
+
ctx.emit(EVENTS.NODE_DRAG_SORT, {
|
2115
|
+
sourceNode: sourceNodeData,
|
2116
|
+
targetNode: targetNodeData,
|
2117
|
+
sourceIndex: sourceNodeIndex,
|
2118
|
+
targetIndex: targetNodeIndex,
|
2119
|
+
targetSlibings: targetSlibings
|
2120
|
+
});
|
2055
2121
|
};
|
2056
2122
|
var dragAsChildNode = function dragAsChildNode(sourceNodeId, targetNodeId) {
|
2057
2123
|
var sourceNodeData = getSourceNodeByUID(sourceNodeId);
|
@@ -2076,6 +2142,10 @@ var use_node_drag_this = undefined;
|
|
2076
2142
|
var handleTreeNodeDragLeave = function handleTreeNodeDragLeave(e) {
|
2077
2143
|
e.preventDefault();
|
2078
2144
|
var targetNode = getTargetTreeNode(e);
|
2145
|
+
// 移除目标节点的缓存
|
2146
|
+
if (nodeRectMap.has(targetNode)) {
|
2147
|
+
nodeRectMap["delete"](targetNode);
|
2148
|
+
}
|
2079
2149
|
targetNode.classList.remove("".concat(resolveClassName('tree-drop-active')), "".concat(resolveClassName('tree-drop-disabled')));
|
2080
2150
|
targetNode.classList.remove(dropAfter, dropBefore, dropInner);
|
2081
2151
|
ctx.emit(EVENTS.NODE_DRAG_LEAVE, e, targetNode);
|
package/lib/tree/props.d.ts
CHANGED
@@ -132,6 +132,16 @@ export declare const treeProps: {
|
|
132
132
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
133
133
|
default: (...args: any[]) => any;
|
134
134
|
};
|
135
|
+
/**
|
136
|
+
* 拖拽阈值
|
137
|
+
* 用于判断拖拽时鼠标位置与节点的距离
|
138
|
+
* 当鼠标位置与节点的距离大于此值时,才会触发拖拽
|
139
|
+
*/
|
140
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
141
|
+
default: number;
|
142
|
+
} & {
|
143
|
+
default: number;
|
144
|
+
};
|
135
145
|
/**
|
136
146
|
* 节点拖拽时可交换位置(开启拖拽可交换位置后将不支持改变层级)
|
137
147
|
*/
|
@@ -140,6 +150,15 @@ export declare const treeProps: {
|
|
140
150
|
} & {
|
141
151
|
default: boolean;
|
142
152
|
};
|
153
|
+
/**
|
154
|
+
* 拖拽排序模式
|
155
|
+
* - any: 允许拖拽到任意位置
|
156
|
+
* - next: 只允许拖拽到同级节点的前后位置
|
157
|
+
* 默认 any
|
158
|
+
*/
|
159
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
160
|
+
default: string;
|
161
|
+
};
|
143
162
|
/**
|
144
163
|
* 节点是否可以选中
|
145
164
|
*/
|
package/lib/tree/tree.d.ts
CHANGED
@@ -75,11 +75,19 @@ declare const _default: import("vue").DefineComponent<{
|
|
75
75
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
76
76
|
default: (...args: any[]) => any;
|
77
77
|
};
|
78
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
79
|
+
default: number;
|
80
|
+
} & {
|
81
|
+
default: number;
|
82
|
+
};
|
78
83
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
79
84
|
default: boolean;
|
80
85
|
} & {
|
81
86
|
default: boolean;
|
82
87
|
};
|
88
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
89
|
+
default: string;
|
90
|
+
};
|
83
91
|
selectable: import("vue-types").VueTypeDef<any> & {
|
84
92
|
default: any;
|
85
93
|
};
|
@@ -139,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
139
147
|
nodeDragStart: (..._args: any[]) => boolean;
|
140
148
|
nodeDragOver: (..._args: any[]) => boolean;
|
141
149
|
nodeDragLeave: (..._args: any[]) => boolean;
|
150
|
+
nodeDragSort: (..._args: any[]) => boolean;
|
142
151
|
nodeDrop: (..._args: any[]) => boolean;
|
143
152
|
nodeEnterView: (..._args: any[]) => boolean;
|
144
153
|
nodeSelected: (..._args: any[]) => boolean;
|
@@ -213,11 +222,19 @@ declare const _default: import("vue").DefineComponent<{
|
|
213
222
|
disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
|
214
223
|
default: (...args: any[]) => any;
|
215
224
|
};
|
225
|
+
dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
|
226
|
+
default: number;
|
227
|
+
} & {
|
228
|
+
default: number;
|
229
|
+
};
|
216
230
|
dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
|
217
231
|
default: boolean;
|
218
232
|
} & {
|
219
233
|
default: boolean;
|
220
234
|
};
|
235
|
+
dragSortMode: import("vue-types").VueTypeDef<string> & {
|
236
|
+
default: string;
|
237
|
+
};
|
221
238
|
selectable: import("vue-types").VueTypeDef<any> & {
|
222
239
|
default: any;
|
223
240
|
};
|
@@ -275,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
275
292
|
onNodeCollapse?: (...args: any[]) => any;
|
276
293
|
onNodeDragLeave?: (...args: any[]) => any;
|
277
294
|
onNodeDragOver?: (...args: any[]) => any;
|
295
|
+
onNodeDragSort?: (...args: any[]) => any;
|
278
296
|
onNodeDragStart?: (...args: any[]) => any;
|
279
297
|
onNodeDrop?: (...args: any[]) => any;
|
280
298
|
onNodeEnterView?: (...args: any[]) => any;
|
@@ -298,7 +316,9 @@ declare const _default: import("vue").DefineComponent<{
|
|
298
316
|
virtualRender: boolean;
|
299
317
|
disableDrag: (...args: any[]) => any;
|
300
318
|
disableDrop: (...args: any[]) => any;
|
319
|
+
dragThreshold: number;
|
301
320
|
dragSort: boolean;
|
321
|
+
dragSortMode: string;
|
302
322
|
selectable: any;
|
303
323
|
disabledFolderSelectable: boolean;
|
304
324
|
showCheckbox: any;
|