bkui-vue 2.1.0-dev-beta.10 → 2.1.0-dev-beta.11
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 +62 -62
- package/dist/index.esm.js +13182 -13087
- package/dist/index.umd.js +59 -59
- package/dist/style.css +1 -1
- package/dist/style.variable.css +1 -1
- package/lib/cascader/index.js +11 -5
- package/lib/index.js +1 -1
- package/lib/input/index.d.ts +36 -15
- package/lib/input/index.js +80 -95
- package/lib/input/input.d.ts +34 -10
- package/lib/tree/constant.d.ts +6 -0
- package/lib/tree/index.d.ts +39 -9
- package/lib/tree/index.js +560 -484
- package/lib/tree/props.d.ts +57 -1
- package/lib/tree/tree.css +31 -0
- package/lib/tree/tree.d.ts +22 -7
- package/lib/tree/tree.less +38 -6
- package/lib/tree/tree.variable.css +31 -0
- package/lib/tree/use-intersection-observer.d.ts +1 -1
- package/lib/tree/use-node-action.d.ts +2 -2
- package/lib/tree/use-node-async.d.ts +13 -3
- package/lib/tree/use-node-attribute.d.ts +68 -40
- package/lib/tree/use-node-drag.d.ts +16 -3
- package/lib/tree/use-tree-init.d.ts +14 -1
- package/lib/tree/util.d.ts +30 -1
- package/package.json +1 -1
package/lib/tree/props.d.ts
CHANGED
|
@@ -19,6 +19,49 @@ export type TreeNode = {
|
|
|
19
19
|
*/
|
|
20
20
|
export type DropType = 'child' | 'move' | 'sort';
|
|
21
21
|
export type DisableDropHandler = (data: TreeNode, type: DropType, target: TreeNode) => boolean;
|
|
22
|
+
export type TreeDataChangeTrigger = 'async' | 'drag';
|
|
23
|
+
export type TreeDataChangePayload = {
|
|
24
|
+
trigger: TreeDataChangeTrigger;
|
|
25
|
+
data: TreeNode[];
|
|
26
|
+
node: TreeNode;
|
|
27
|
+
targetNode?: TreeNode;
|
|
28
|
+
parentNode?: TreeNode | null;
|
|
29
|
+
oldParentNode?: TreeNode | null;
|
|
30
|
+
dropType?: DropType;
|
|
31
|
+
sourceIndex?: number;
|
|
32
|
+
targetIndex?: number;
|
|
33
|
+
};
|
|
34
|
+
export type TreeDataChangeHandler = (payload: TreeDataChangePayload) => void;
|
|
35
|
+
export type TreeCheckedPayload = {
|
|
36
|
+
checkedNodes: TreeNode[];
|
|
37
|
+
indeterminateNodes: TreeNode[];
|
|
38
|
+
};
|
|
39
|
+
export type TreeSelectedPayload = {
|
|
40
|
+
selected: boolean;
|
|
41
|
+
node: TreeNode;
|
|
42
|
+
};
|
|
43
|
+
export type TreeDropPayload = {
|
|
44
|
+
event: unknown;
|
|
45
|
+
element: HTMLElement;
|
|
46
|
+
targetNode: TreeNode;
|
|
47
|
+
sourceNode: TreeNode;
|
|
48
|
+
data: TreeNode[];
|
|
49
|
+
parentNode?: TreeNode | null;
|
|
50
|
+
oldParentNode?: TreeNode | null;
|
|
51
|
+
dropType?: DropType;
|
|
52
|
+
sourceIndex?: number;
|
|
53
|
+
targetIndex?: number;
|
|
54
|
+
};
|
|
55
|
+
export type TreeDragSortPayload = {
|
|
56
|
+
sourceNode: TreeNode;
|
|
57
|
+
targetNode: TreeNode;
|
|
58
|
+
data: TreeNode[];
|
|
59
|
+
parentNode?: TreeNode | null;
|
|
60
|
+
oldParentNode?: TreeNode | null;
|
|
61
|
+
dropType?: DropType;
|
|
62
|
+
sourceIndex?: number;
|
|
63
|
+
targetIndex?: number;
|
|
64
|
+
};
|
|
22
65
|
/**
|
|
23
66
|
* Tree Prop: prefixIcon function
|
|
24
67
|
* @param {} isRoot 是否为分跟节点
|
|
@@ -102,6 +145,10 @@ export declare const treeProps: {
|
|
|
102
145
|
prefixIcon: import("vue-types").VueTypeDef<any> & {
|
|
103
146
|
default: any;
|
|
104
147
|
};
|
|
148
|
+
/**
|
|
149
|
+
* 当树数据需要由外部接管更新时的统一回调
|
|
150
|
+
*/
|
|
151
|
+
onDataChange: PropType<TreeDataChangeHandler>;
|
|
105
152
|
/**
|
|
106
153
|
* 异步加载节点数据配置
|
|
107
154
|
* @param callback 请求数据回调函数,函数返回 Promise
|
|
@@ -275,6 +322,14 @@ export declare const treeProps: {
|
|
|
275
322
|
} & {
|
|
276
323
|
default: boolean;
|
|
277
324
|
};
|
|
325
|
+
/**
|
|
326
|
+
* 是否开启父子勾选级联;未传时沿用 checkStrictly 历史语义
|
|
327
|
+
*/
|
|
328
|
+
cascade: import("vue-types").VueTypeValidableDef<boolean> & {
|
|
329
|
+
default: boolean;
|
|
330
|
+
} & {
|
|
331
|
+
default: boolean;
|
|
332
|
+
};
|
|
278
333
|
/**
|
|
279
334
|
* 是否开启监听Tree节点进入Tree容器可视区域
|
|
280
335
|
*/
|
|
@@ -282,8 +337,9 @@ export declare const treeProps: {
|
|
|
282
337
|
default: boolean | (() => IIntersectionObserver);
|
|
283
338
|
};
|
|
284
339
|
};
|
|
340
|
+
type AsyncLoadCallback = (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => Promise<unknown> | unknown, data?: unknown) => Promise<TreeNode | TreeNode[]> | TreeNode | TreeNode[];
|
|
285
341
|
type AsyncOption = {
|
|
286
|
-
callback:
|
|
342
|
+
callback: AsyncLoadCallback;
|
|
287
343
|
cache: boolean;
|
|
288
344
|
deepAutoOpen?: string;
|
|
289
345
|
trigger?: string[];
|
package/lib/tree/tree.css
CHANGED
|
@@ -189,6 +189,29 @@
|
|
|
189
189
|
.bk-tree .bk-node-row.is-selected:hover {
|
|
190
190
|
background-color: #e1ecff;
|
|
191
191
|
}
|
|
192
|
+
.bk-tree .bk-node-row.drop-before::before {
|
|
193
|
+
content: '';
|
|
194
|
+
position: absolute;
|
|
195
|
+
top: 0;
|
|
196
|
+
left: 0;
|
|
197
|
+
right: 0;
|
|
198
|
+
height: 1px;
|
|
199
|
+
background-color: #2196F3;
|
|
200
|
+
}
|
|
201
|
+
.bk-tree .bk-node-row.drop-after::before {
|
|
202
|
+
content: '';
|
|
203
|
+
position: absolute;
|
|
204
|
+
bottom: 0;
|
|
205
|
+
left: 0;
|
|
206
|
+
right: 0;
|
|
207
|
+
height: 1px;
|
|
208
|
+
background-color: #2196F3;
|
|
209
|
+
}
|
|
210
|
+
.bk-tree .bk-node-row.drop-inner {
|
|
211
|
+
background-color: rgba(33, 150, 243, 0.1);
|
|
212
|
+
outline: 1px dashed #2196F3;
|
|
213
|
+
outline-offset: -1px;
|
|
214
|
+
}
|
|
192
215
|
.bk-tree-node {
|
|
193
216
|
position: relative;
|
|
194
217
|
display: flex;
|
|
@@ -299,6 +322,14 @@
|
|
|
299
322
|
cursor: no-drop;
|
|
300
323
|
opacity: 0.5;
|
|
301
324
|
}
|
|
325
|
+
.bk-tree .insert-line {
|
|
326
|
+
position: absolute;
|
|
327
|
+
height: 2px;
|
|
328
|
+
background: #2196F3;
|
|
329
|
+
display: none;
|
|
330
|
+
pointer-events: none;
|
|
331
|
+
z-index: 999;
|
|
332
|
+
}
|
|
302
333
|
.bk-tree-drop-indicator {
|
|
303
334
|
position: fixed;
|
|
304
335
|
pointer-events: none;
|
package/lib/tree/tree.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TreePropTypes as defineTypes } from './props';
|
|
1
|
+
import { TreePropTypes as defineTypes, TreeNode } from './props';
|
|
2
2
|
export type TreePropTypes = defineTypes;
|
|
3
3
|
export type ITreeScrollTopOption = {
|
|
4
4
|
id?: string;
|
|
@@ -43,10 +43,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
43
43
|
prefixIcon: import("vue-types").VueTypeDef<any> & {
|
|
44
44
|
default: any;
|
|
45
45
|
};
|
|
46
|
+
onDataChange: import("vue").PropType<import("./props").TreeDataChangeHandler>;
|
|
46
47
|
async: import("vue-types").VueTypeShape<{
|
|
47
|
-
callback: (item:
|
|
48
|
-
[key: string]: any;
|
|
49
|
-
}>>;
|
|
48
|
+
callback: (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => unknown, data?: unknown) => TreeNode | TreeNode[] | Promise<TreeNode | TreeNode[]>;
|
|
50
49
|
cache: boolean;
|
|
51
50
|
deepAutoOpen?: string;
|
|
52
51
|
trigger?: string[];
|
|
@@ -139,14 +138,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
139
138
|
} & {
|
|
140
139
|
default: boolean;
|
|
141
140
|
};
|
|
141
|
+
cascade: import("vue-types").VueTypeValidableDef<boolean> & {
|
|
142
|
+
default: boolean;
|
|
143
|
+
} & {
|
|
144
|
+
default: boolean;
|
|
145
|
+
};
|
|
142
146
|
intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
|
|
143
147
|
default: boolean | (() => import("./props").IIntersectionObserver);
|
|
144
148
|
};
|
|
145
149
|
}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
150
|
+
nodeAsyncLoad: (..._args: any[]) => boolean;
|
|
151
|
+
nodeAsyncLoadError: (..._args: any[]) => boolean;
|
|
146
152
|
nodeClick: (..._args: any[]) => boolean;
|
|
147
153
|
nodeCollapse: (..._args: any[]) => boolean;
|
|
148
154
|
nodeExpand: (..._args: any[]) => boolean;
|
|
149
155
|
nodeChecked: (..._args: any[]) => boolean;
|
|
156
|
+
nodeDataChange: (..._args: any[]) => boolean;
|
|
150
157
|
nodeDragStart: (..._args: any[]) => boolean;
|
|
151
158
|
nodeDragOver: (..._args: any[]) => boolean;
|
|
152
159
|
nodeDragLeave: (..._args: any[]) => boolean;
|
|
@@ -193,10 +200,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
193
200
|
prefixIcon: import("vue-types").VueTypeDef<any> & {
|
|
194
201
|
default: any;
|
|
195
202
|
};
|
|
203
|
+
onDataChange: import("vue").PropType<import("./props").TreeDataChangeHandler>;
|
|
196
204
|
async: import("vue-types").VueTypeShape<{
|
|
197
|
-
callback: (item:
|
|
198
|
-
[key: string]: any;
|
|
199
|
-
}>>;
|
|
205
|
+
callback: (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => unknown, data?: unknown) => TreeNode | TreeNode[] | Promise<TreeNode | TreeNode[]>;
|
|
200
206
|
cache: boolean;
|
|
201
207
|
deepAutoOpen?: string;
|
|
202
208
|
trigger?: string[];
|
|
@@ -289,13 +295,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
289
295
|
} & {
|
|
290
296
|
default: boolean;
|
|
291
297
|
};
|
|
298
|
+
cascade: import("vue-types").VueTypeValidableDef<boolean> & {
|
|
299
|
+
default: boolean;
|
|
300
|
+
} & {
|
|
301
|
+
default: boolean;
|
|
302
|
+
};
|
|
292
303
|
intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
|
|
293
304
|
default: boolean | (() => import("./props").IIntersectionObserver);
|
|
294
305
|
};
|
|
295
306
|
}>> & Readonly<{
|
|
307
|
+
onNodeAsyncLoad?: (...args: any[]) => any;
|
|
308
|
+
onNodeAsyncLoadError?: (...args: any[]) => any;
|
|
296
309
|
onNodeChecked?: (...args: any[]) => any;
|
|
297
310
|
onNodeClick?: (...args: any[]) => any;
|
|
298
311
|
onNodeCollapse?: (...args: any[]) => any;
|
|
312
|
+
onNodeDataChange?: (...args: any[]) => any;
|
|
299
313
|
onNodeDragLeave?: (...args: any[]) => any;
|
|
300
314
|
onNodeDragOver?: (...args: any[]) => any;
|
|
301
315
|
onNodeDragSort?: (...args: any[]) => any;
|
|
@@ -335,5 +349,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
335
349
|
nodeContentAction: any;
|
|
336
350
|
keepSlotData: boolean;
|
|
337
351
|
checkStrictly: boolean;
|
|
352
|
+
cascade: boolean;
|
|
338
353
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
339
354
|
export default _default;
|
package/lib/tree/tree.less
CHANGED
|
@@ -22,6 +22,35 @@
|
|
|
22
22
|
background-color: #e1ecff;
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
&.drop-before {
|
|
27
|
+
&::before {
|
|
28
|
+
content: '';
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
height: 1px;
|
|
34
|
+
background-color: #2196F3;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&.drop-after {
|
|
38
|
+
&::before {
|
|
39
|
+
content: '';
|
|
40
|
+
position: absolute;
|
|
41
|
+
bottom: 0;
|
|
42
|
+
left: 0;
|
|
43
|
+
right: 0;
|
|
44
|
+
height: 1px;
|
|
45
|
+
background-color: #2196F3;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.drop-inner {
|
|
50
|
+
background-color: rgba(33, 150, 243, 0.1);
|
|
51
|
+
outline: 1px dashed #2196F3;
|
|
52
|
+
outline-offset: -1px;
|
|
53
|
+
}
|
|
25
54
|
}
|
|
26
55
|
|
|
27
56
|
&-node {
|
|
@@ -143,7 +172,6 @@
|
|
|
143
172
|
}
|
|
144
173
|
}
|
|
145
174
|
|
|
146
|
-
// SortableJS ghost/chosen/drag 样式
|
|
147
175
|
&-ghost {
|
|
148
176
|
opacity: 0.5;
|
|
149
177
|
background: #c8ebfb;
|
|
@@ -165,17 +193,22 @@
|
|
|
165
193
|
opacity: 0.5;
|
|
166
194
|
}
|
|
167
195
|
}
|
|
196
|
+
|
|
197
|
+
.insert-line {
|
|
198
|
+
position: absolute;
|
|
199
|
+
height: 2px;
|
|
200
|
+
background: #2196F3;
|
|
201
|
+
display: none;
|
|
202
|
+
pointer-events: none;
|
|
203
|
+
z-index: 999;
|
|
204
|
+
}
|
|
168
205
|
}
|
|
169
206
|
|
|
170
|
-
// 拖拽放置指示器(overlay 方式,挂载在 body 上)
|
|
171
|
-
// sort/move 类型:水平线 + 两端圆点,指示同级插入位置
|
|
172
|
-
// child 类型:高亮边框 + 浅色背景,指示嵌入为子节点
|
|
173
207
|
.@{bk-prefix}-tree-drop-indicator {
|
|
174
208
|
position: fixed;
|
|
175
209
|
pointer-events: none;
|
|
176
210
|
z-index: 9999;
|
|
177
211
|
|
|
178
|
-
// child 类型:嵌入为子节点的指示器
|
|
179
212
|
&.@{bk-prefix}-tree-drop-inner {
|
|
180
213
|
background: rgba(33, 150, 243, 0.06);
|
|
181
214
|
outline: 2px dashed #3a84ff;
|
|
@@ -184,7 +217,6 @@
|
|
|
184
217
|
box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.1);
|
|
185
218
|
}
|
|
186
219
|
|
|
187
|
-
// sort/move 类型:同级插入的水平线指示器
|
|
188
220
|
&.@{bk-prefix}-tree-drop-line {
|
|
189
221
|
background: #3a84ff;
|
|
190
222
|
border-radius: 1px;
|
|
@@ -320,6 +320,29 @@
|
|
|
320
320
|
.bk-tree .bk-node-row.is-selected:hover {
|
|
321
321
|
background-color: #e1ecff;
|
|
322
322
|
}
|
|
323
|
+
.bk-tree .bk-node-row.drop-before::before {
|
|
324
|
+
content: '';
|
|
325
|
+
position: absolute;
|
|
326
|
+
top: 0;
|
|
327
|
+
left: 0;
|
|
328
|
+
right: 0;
|
|
329
|
+
height: 1px;
|
|
330
|
+
background-color: #2196F3;
|
|
331
|
+
}
|
|
332
|
+
.bk-tree .bk-node-row.drop-after::before {
|
|
333
|
+
content: '';
|
|
334
|
+
position: absolute;
|
|
335
|
+
bottom: 0;
|
|
336
|
+
left: 0;
|
|
337
|
+
right: 0;
|
|
338
|
+
height: 1px;
|
|
339
|
+
background-color: #2196F3;
|
|
340
|
+
}
|
|
341
|
+
.bk-tree .bk-node-row.drop-inner {
|
|
342
|
+
background-color: rgba(33, 150, 243, 0.1);
|
|
343
|
+
outline: 1px dashed #2196F3;
|
|
344
|
+
outline-offset: -1px;
|
|
345
|
+
}
|
|
323
346
|
.bk-tree-node {
|
|
324
347
|
position: relative;
|
|
325
348
|
display: flex;
|
|
@@ -430,6 +453,14 @@
|
|
|
430
453
|
cursor: no-drop;
|
|
431
454
|
opacity: 0.5;
|
|
432
455
|
}
|
|
456
|
+
.bk-tree .insert-line {
|
|
457
|
+
position: absolute;
|
|
458
|
+
height: 2px;
|
|
459
|
+
background: #2196F3;
|
|
460
|
+
display: none;
|
|
461
|
+
pointer-events: none;
|
|
462
|
+
z-index: 999;
|
|
463
|
+
}
|
|
433
464
|
.bk-tree-drop-indicator {
|
|
434
465
|
position: fixed;
|
|
435
466
|
pointer-events: none;
|
|
@@ -4,13 +4,13 @@ declare const _default: (props: TreePropTypes, ctx: any, flatData: IFlatData, _r
|
|
|
4
4
|
renderTreeNode: (item: TreeNode, showTree?: boolean) => JSX.Element;
|
|
5
5
|
handleTreeNodeClick: (item: TreeNode, e: MouseEvent, event?: string) => void;
|
|
6
6
|
deepAutoOpen: () => void;
|
|
7
|
-
asyncNodeClick: (item: TreeNode) => Promise<boolean
|
|
7
|
+
asyncNodeClick: (item: TreeNode) => Promise<boolean | (TreeNode | TreeNode[])>;
|
|
8
8
|
setNodeAction: (args: TreeNode | TreeNode[], action: string, value: unknown) => void;
|
|
9
9
|
setNodeOpened: (item: TreeNode, isOpen?: any, e?: MouseEvent, fireEmit?: boolean) => void;
|
|
10
10
|
setSelect: (nodes: TreeNode | TreeNode[], selected?: boolean, autoOpen?: boolean, triggerEvent?: boolean, event?: string) => void;
|
|
11
11
|
setOpen: (item: TreeNode, isOpen?: boolean, autoOpenParents?: boolean) => void;
|
|
12
12
|
setNodeAttribute: (node: TreeNode, attrName: string | string[], value: (boolean | number | string)[] | boolean | number | string, loopParent?: boolean) => void;
|
|
13
|
-
isIndeterminate: (item: TreeNode) =>
|
|
13
|
+
isIndeterminate: (item: TreeNode) => boolean;
|
|
14
14
|
deepUpdateChildNode: (node: TreeNode, attr: string | string[], value: unknown | unknown[]) => void;
|
|
15
15
|
updateParentChecked: (item: TreeNode, isChecked: any) => void;
|
|
16
16
|
};
|
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { EVENTS } from './constant';
|
|
2
|
+
import { TreeDataChangePayload, TreeNode, TreePropTypes } from './props';
|
|
3
|
+
import { IFlatData } from './util';
|
|
4
|
+
type TreeContext = {
|
|
5
|
+
emit: (event: EVENTS, ...args: unknown[]) => void;
|
|
6
|
+
};
|
|
7
|
+
type AsyncLoadResponse = TreeNode | TreeNode[];
|
|
8
|
+
export type UseNodeAsyncOptions = {
|
|
9
|
+
getTreeData?: () => TreeNode[];
|
|
10
|
+
onTreeDataChange?: (payload: TreeDataChangePayload) => void;
|
|
11
|
+
};
|
|
12
|
+
declare const _default: (props: TreePropTypes, flatData: IFlatData, ctx?: TreeContext, options?: UseNodeAsyncOptions) => {
|
|
13
|
+
asyncNodeClick: (item: TreeNode) => Promise<boolean | AsyncLoadResponse>;
|
|
4
14
|
deepAutoOpen: () => void;
|
|
5
15
|
};
|
|
6
16
|
export default _default;
|
|
@@ -1,71 +1,99 @@
|
|
|
1
|
+
import { NODE_ATTRIBUTES } from './constant';
|
|
1
2
|
import { TreeNode, TreePropTypes } from './props';
|
|
3
|
+
type TreeNodeAttributeMap = {
|
|
4
|
+
[NODE_ATTRIBUTES.DEPTH]: number;
|
|
5
|
+
[NODE_ATTRIBUTES.HAS_CHILD]: boolean;
|
|
6
|
+
[NODE_ATTRIBUTES.INDEX]: number;
|
|
7
|
+
[NODE_ATTRIBUTES.IS_ASYNC]: boolean;
|
|
8
|
+
[NODE_ATTRIBUTES.IS_ASYNC_INIT]: boolean;
|
|
9
|
+
[NODE_ATTRIBUTES.IS_CACHED]: boolean;
|
|
10
|
+
[NODE_ATTRIBUTES.IS_CHECKED]: boolean;
|
|
11
|
+
[NODE_ATTRIBUTES.IS_INDETERMINATE]: boolean;
|
|
12
|
+
[NODE_ATTRIBUTES.IS_LOADING]: boolean;
|
|
13
|
+
[NODE_ATTRIBUTES.IS_MATCH]: boolean;
|
|
14
|
+
[NODE_ATTRIBUTES.IS_NULL]: boolean;
|
|
15
|
+
[NODE_ATTRIBUTES.IS_OPEN]: boolean;
|
|
16
|
+
[NODE_ATTRIBUTES.IS_ROOT]: boolean;
|
|
17
|
+
[NODE_ATTRIBUTES.IS_SELECTED]: boolean;
|
|
18
|
+
[NODE_ATTRIBUTES.ORDER]: number;
|
|
19
|
+
[NODE_ATTRIBUTES.PARENT]: TreeNode;
|
|
20
|
+
[NODE_ATTRIBUTES.PATH]: string;
|
|
21
|
+
[NODE_ATTRIBUTES.TREE_NODE_ATTR]: Record<string, unknown>;
|
|
22
|
+
[NODE_ATTRIBUTES.UUID]: string | number;
|
|
23
|
+
};
|
|
2
24
|
declare const _default: (flatData: {
|
|
3
25
|
data: TreeNode[];
|
|
4
|
-
schema: WeakMap<TreeNode, unknown
|
|
26
|
+
schema: WeakMap<TreeNode, Record<string, unknown>>;
|
|
27
|
+
nodeMap?: Map<number | string, TreeNode>;
|
|
28
|
+
childMap?: WeakMap<TreeNode, TreeNode[]>;
|
|
29
|
+
rootNodes?: TreeNode[];
|
|
5
30
|
}, props?: TreePropTypes) => {
|
|
6
|
-
getSchemaVal: (node: TreeNode) => unknown
|
|
7
|
-
getNodeAttr:
|
|
8
|
-
|
|
31
|
+
getSchemaVal: (node: TreeNode) => Record<string, unknown>;
|
|
32
|
+
getNodeAttr: {
|
|
33
|
+
<T extends NODE_ATTRIBUTES>(node: TreeNode | null | undefined, attr: T): TreeNodeAttributeMap[T];
|
|
34
|
+
(node: TreeNode | null | undefined, attr: string): unknown;
|
|
35
|
+
};
|
|
36
|
+
getNodeId: (node: TreeNode | null | undefined) => string | number;
|
|
9
37
|
getNodeById: (id: string | unknown) => TreeNode;
|
|
10
|
-
getNodeParentId: (node: TreeNode) =>
|
|
11
|
-
getParentNodeData: (node: TreeNode | string) =>
|
|
12
|
-
getNodePathById: (id: string) =>
|
|
13
|
-
getNodeAttrById: (id: string, attr: string) =>
|
|
14
|
-
getNodeParentIdById: (id: string) =>
|
|
38
|
+
getNodeParentId: (node: TreeNode) => string | number;
|
|
39
|
+
getParentNodeData: (node: TreeNode | string) => TreeNode;
|
|
40
|
+
getNodePathById: (id: string) => string;
|
|
41
|
+
getNodeAttrById: (id: string, attr: string) => unknown;
|
|
42
|
+
getNodeParentIdById: (id: string) => string | number;
|
|
15
43
|
getNodeIndexById: (id: string) => number;
|
|
16
44
|
getNodeIndexByNode: (node: TreeNode) => number;
|
|
17
45
|
getRootNodeList: () => TreeNode[];
|
|
18
|
-
getParentNodeAttr: (node: TreeNode, attrName: string) =>
|
|
19
|
-
getParentNode: (node: TreeNode) =>
|
|
46
|
+
getParentNodeAttr: (node: TreeNode, attrName: string) => unknown;
|
|
47
|
+
getParentNode: (node: TreeNode) => TreeNode;
|
|
20
48
|
setNodeAttr: (node: TreeNode, attr: string, val: unknown, id?: any) => void;
|
|
21
49
|
setNodeAttrById: (id: unknown, attr: string, val: unknown) => void;
|
|
22
|
-
getNodePath: (node: TreeNode) =>
|
|
23
|
-
isRootNode: (node: TreeNode | string) =>
|
|
24
|
-
isNodeOpened: (node: TreeNode) =>
|
|
25
|
-
hasChildNode: (node: TreeNode) =>
|
|
26
|
-
isItemOpen: (item: TreeNode) =>
|
|
27
|
-
isNodeChecked: (node: TreeNode) =>
|
|
28
|
-
isNodeMatched: (node: TreeNode) =>
|
|
29
|
-
isNodeLoading: (node: TreeNode) =>
|
|
30
|
-
checkNodeIsOpen: (node: TreeNode) =>
|
|
50
|
+
getNodePath: (node: TreeNode) => string;
|
|
51
|
+
isRootNode: (node: TreeNode | string) => boolean;
|
|
52
|
+
isNodeOpened: (node: TreeNode) => boolean;
|
|
53
|
+
hasChildNode: (node: TreeNode) => boolean;
|
|
54
|
+
isItemOpen: (item: TreeNode) => unknown;
|
|
55
|
+
isNodeChecked: (node: TreeNode) => boolean;
|
|
56
|
+
isNodeMatched: (node: TreeNode) => boolean;
|
|
57
|
+
isNodeLoading: (node: TreeNode) => boolean;
|
|
58
|
+
checkNodeIsOpen: (node: TreeNode) => unknown;
|
|
31
59
|
getSourceNodeByPath: (path: string, uid?: string) => any[];
|
|
32
60
|
getSourceNodeByUID: (uid: string) => TreeNode;
|
|
33
|
-
isMatchedNode: (node: TreeNode) =>
|
|
61
|
+
isMatchedNode: (node: TreeNode) => boolean;
|
|
34
62
|
resolveScopedSlotParam: (item: TreeNode) => {
|
|
35
|
-
[x: string]:
|
|
36
|
-
fullPath:
|
|
37
|
-
uuid:
|
|
38
|
-
parent:
|
|
39
|
-
parentId:
|
|
63
|
+
[x: string]: string | number | boolean | TreeNode;
|
|
64
|
+
fullPath: string;
|
|
65
|
+
uuid: string | number;
|
|
66
|
+
parent: TreeNode;
|
|
67
|
+
parentId: string | number;
|
|
40
68
|
};
|
|
41
69
|
setTreeNodeLoading: (node: TreeNode, value: boolean) => void;
|
|
42
70
|
extendNodeAttr: (item: TreeNode) => TreeNode & {
|
|
43
71
|
__attr__: {
|
|
44
|
-
[x: string]:
|
|
45
|
-
fullPath:
|
|
46
|
-
uuid:
|
|
47
|
-
parent:
|
|
48
|
-
parentId:
|
|
72
|
+
[x: string]: string | number | boolean | TreeNode;
|
|
73
|
+
fullPath: string;
|
|
74
|
+
uuid: string | number;
|
|
75
|
+
parent: TreeNode;
|
|
76
|
+
parentId: string | number;
|
|
49
77
|
};
|
|
50
78
|
};
|
|
51
79
|
getChildNodes: (node: TreeNode) => TreeNode[];
|
|
52
80
|
extendNodeScopedData: (item: TreeNode) => {
|
|
53
81
|
data: TreeNode;
|
|
54
82
|
attributes: {
|
|
55
|
-
[x: string]:
|
|
56
|
-
fullPath:
|
|
57
|
-
uuid:
|
|
58
|
-
parent:
|
|
59
|
-
parentId:
|
|
83
|
+
[x: string]: string | number | boolean | TreeNode;
|
|
84
|
+
fullPath: string;
|
|
85
|
+
uuid: string | number;
|
|
86
|
+
parent: TreeNode;
|
|
87
|
+
parentId: string | number;
|
|
60
88
|
};
|
|
61
89
|
};
|
|
62
90
|
getIntersectionResponse: (target: HTMLElement | TreeNode) => {
|
|
63
|
-
level:
|
|
91
|
+
level: number;
|
|
64
92
|
target: HTMLElement | TreeNode;
|
|
65
|
-
index:
|
|
66
|
-
parent:
|
|
93
|
+
index: number;
|
|
94
|
+
parent: TreeNode;
|
|
67
95
|
node: HTMLElement | TreeNode;
|
|
68
|
-
isRoot:
|
|
96
|
+
isRoot: boolean;
|
|
69
97
|
};
|
|
70
98
|
};
|
|
71
99
|
export default _default;
|
|
@@ -1,5 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { Ref, SetupContext } from 'vue';
|
|
2
|
+
import { TreeEmitEventsType } from './constant';
|
|
3
|
+
import { TreeDataChangePayload, TreeNode, TreePropTypes } from './props';
|
|
4
|
+
import { IFlatData } from './util';
|
|
5
|
+
type TreeContext = {
|
|
6
|
+
emit: SetupContext<typeof TreeEmitEventsType>['emit'];
|
|
7
|
+
};
|
|
8
|
+
type TreeRoot = {
|
|
9
|
+
$el: HTMLElement;
|
|
10
|
+
};
|
|
11
|
+
type UseNodeDragOptions = {
|
|
12
|
+
getTreeData?: () => TreeNode[];
|
|
13
|
+
onTreeDataChange?: (payload: TreeDataChangePayload) => void;
|
|
14
|
+
};
|
|
15
|
+
declare const _default: (props: TreePropTypes, ctx: TreeContext, root: Ref<TreeRoot>, flatData: IFlatData, options?: UseNodeDragOptions) => {
|
|
16
|
+
isDragging: Ref<boolean, boolean>;
|
|
4
17
|
};
|
|
5
18
|
export default _default;
|
|
@@ -6,12 +6,25 @@ declare const _default: (props: TreePropTypes) => {
|
|
|
6
6
|
children?: any[];
|
|
7
7
|
}[];
|
|
8
8
|
schema: WeakMap<TreeNode, Record<string, unknown>> & Omit<WeakMap<TreeNode, Record<string, unknown>>, keyof WeakMap<any, any>>;
|
|
9
|
+
nodeMap: Map<string, {
|
|
10
|
+
[x: string]: unknown;
|
|
11
|
+
children?: any[];
|
|
12
|
+
}> & Omit<Map<string, TreeNode>, keyof Map<any, any>>;
|
|
13
|
+
childMap: WeakMap<TreeNode, {
|
|
14
|
+
[x: string]: unknown;
|
|
15
|
+
children?: any[];
|
|
16
|
+
}[]> & Omit<WeakMap<TreeNode, TreeNode[]>, keyof WeakMap<any, any>>;
|
|
17
|
+
rootNodes: {
|
|
18
|
+
[x: string]: unknown;
|
|
19
|
+
children?: any[];
|
|
20
|
+
}[];
|
|
9
21
|
levelLineSchema: {};
|
|
10
22
|
};
|
|
11
|
-
asyncNodeClick: (item: TreeNode) => Promise<boolean
|
|
23
|
+
asyncNodeClick: (item: TreeNode) => Promise<boolean | (TreeNode | TreeNode[])>;
|
|
12
24
|
deepAutoOpen: () => void;
|
|
13
25
|
afterDataUpdate: (callFn: (d: any) => void) => void;
|
|
14
26
|
registerNextLoop: (key: string, event: any, reset?: boolean) => void;
|
|
27
|
+
rebuildData: (treeData: TreeNode[], cachedSchema?: WeakMap<TreeNode, Record<string, unknown>> & Omit<WeakMap<TreeNode, Record<string, unknown>>, keyof WeakMap<any, any>>) => void;
|
|
15
28
|
onSelected: (event: (d: any) => void) => void;
|
|
16
29
|
};
|
|
17
30
|
export default _default;
|
package/lib/tree/util.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { TreeNode, TreePropTypes } from './props';
|
|
1
|
+
import { TreeDataChangePayload, TreeNode, TreePropTypes } from './props';
|
|
2
|
+
export type TreeNodeKey = number | string;
|
|
2
3
|
export type IFlatData = {
|
|
3
4
|
data: TreeNode[];
|
|
4
5
|
schema: WeakMap<TreeNode, Record<string, unknown>>;
|
|
6
|
+
nodeMap?: Map<TreeNodeKey, TreeNode>;
|
|
7
|
+
childMap?: WeakMap<TreeNode, TreeNode[]>;
|
|
8
|
+
rootNodes?: TreeNode[];
|
|
5
9
|
};
|
|
6
10
|
/**
|
|
7
11
|
* 获取当前节点显示Label
|
|
@@ -48,6 +52,7 @@ export declare const getNodeItemClass: (item: TreeNode, schema: WeakMap<TreeNode
|
|
|
48
52
|
export declare const getNodeRowClass: (item: TreeNode, schema: WeakMap<TreeNode, Record<string, unknown>>) => {
|
|
49
53
|
[x: string]: unknown;
|
|
50
54
|
'is-checked': unknown;
|
|
55
|
+
'is-indeterminate': unknown;
|
|
51
56
|
'is-selected': unknown;
|
|
52
57
|
'node-folder': unknown;
|
|
53
58
|
'node-leaf': unknown;
|
|
@@ -61,6 +66,29 @@ export declare const getNodeRowClass: (item: TreeNode, schema: WeakMap<TreeNode,
|
|
|
61
66
|
* @param nodeValue 节点值
|
|
62
67
|
*/
|
|
63
68
|
export declare const updateTreeNode: (path: string, treeData: TreeNode[], childKey: string, nodekey: string, nodeValue: Record<string, unknown>[]) => void;
|
|
69
|
+
export declare const cloneTreeData: (treeData?: TreeNode[], childKey?: string) => TreeNode[];
|
|
70
|
+
export declare const isSameNodeId: (left: unknown, right: unknown) => boolean;
|
|
71
|
+
export declare const findNodeById: (treeData: TreeNode[], nodeId: number | string, nodeKey: string, childKey: string) => TreeNode | null;
|
|
72
|
+
export declare const mutateTreeById: (treeData: TreeNode[], nodeId: number | string, nodeKey: string, childKey: string, updater: (node: TreeNode) => void) => TreeNode[];
|
|
73
|
+
export declare const removeTreeNodeById: (treeData: TreeNode[], nodeId: number | string, nodeKey: string, childKey: string) => {
|
|
74
|
+
node: TreeNode | null;
|
|
75
|
+
data: TreeNode[];
|
|
76
|
+
parentNode: TreeNode | null;
|
|
77
|
+
index: number;
|
|
78
|
+
};
|
|
79
|
+
export declare const insertTreeNodeById: (treeData: TreeNode[], node: TreeNode, targetNodeId: number | string, nodeKey: string, childKey: string, options: {
|
|
80
|
+
dropType: 'child' | 'move' | 'sort';
|
|
81
|
+
willInsertAfter?: boolean;
|
|
82
|
+
}) => {
|
|
83
|
+
data: TreeNode[];
|
|
84
|
+
parentNode: TreeNode | null;
|
|
85
|
+
targetNode: TreeNode | null;
|
|
86
|
+
index: number;
|
|
87
|
+
};
|
|
88
|
+
export declare const moveTreeNodeById: (treeData: TreeNode[], nodeId: number | string, targetNodeId: number | string, nodeKey: string, childKey: string, options: {
|
|
89
|
+
dropType: 'child' | 'move' | 'sort';
|
|
90
|
+
willInsertAfter?: boolean;
|
|
91
|
+
}) => TreeDataChangePayload | null;
|
|
64
92
|
/**
|
|
65
93
|
* 根据路径更新指定节点Child-Data
|
|
66
94
|
* @param path 节点路径
|
|
@@ -72,3 +100,4 @@ export declare const assignTreeNode: (path: string, treeData: TreeNode[], childK
|
|
|
72
100
|
export declare const resolveNodeItem: (node: TreeNode) => TreeNode;
|
|
73
101
|
export declare const resolvePropIsMatched: (node: any, prop: any, id: any) => any;
|
|
74
102
|
export declare const showCheckbox: (props: TreePropTypes, node?: TreeNode) => any;
|
|
103
|
+
export declare const isCascadeEnabled: (props: TreePropTypes) => boolean;
|