@ticatec/uniface-element 0.3.16 → 0.3.18
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/lib/TreeNode_README.md +247 -119
- package/dist/lib/TreeNode_README_CN.md +248 -120
- package/dist/lib/TreeNodes.d.ts +339 -85
- package/dist/lib/TreeNodes.js +376 -206
- package/dist/lib/index.d.ts +3 -4
- package/dist/lib/index.js +1 -2
- package/dist/nav-menu/Menus.d.ts +2 -2
- package/dist/nav-menu/Menus.js +6 -4
- package/dist/ticatec-uniface-web.css +29 -5
- package/dist/tree-view/README.md +131 -6
- package/dist/tree-view/TreeNodeView.svelte +10 -11
- package/dist/tree-view/TreeNodeView.svelte.d.ts +5 -5
- package/dist/tree-view/TreeView.svelte +23 -8
- package/dist/tree-view/TreeView.svelte.d.ts +3 -2
- package/dist/tree-view/Types.d.ts +5 -5
- package/dist/tree-view/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/lib/TreeNodes.d.ts
CHANGED
|
@@ -1,112 +1,380 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 比较两个数字
|
|
3
|
+
* @param a 第一个数字
|
|
4
|
+
* @param b 第二个数字
|
|
5
|
+
* @returns 如果相等返回 0,a > b 返回 1,否则返回 -1
|
|
6
|
+
*/
|
|
1
7
|
export declare function compareNumber(a: number, b: number): 0 | 1 | -1;
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
/**
|
|
9
|
+
* 节点视图配置类 - 定义节点的显示方式
|
|
10
|
+
* @template T 节点数据的类型
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* const options = new NodeViewOptions<MyData>({
|
|
14
|
+
* keyField: 'id',
|
|
15
|
+
* textField: 'name'
|
|
16
|
+
* });
|
|
17
|
+
*/
|
|
18
|
+
export declare class NodeViewOptions<T> {
|
|
19
|
+
/**
|
|
20
|
+
* 获取节点的唯一标识字段
|
|
21
|
+
*/
|
|
22
|
+
keyField: keyof T;
|
|
23
|
+
/**
|
|
24
|
+
* 获取节点的文字
|
|
25
|
+
* 可以是字段名或函数
|
|
26
|
+
*/
|
|
27
|
+
textField: keyof T | ((data: T) => string);
|
|
28
|
+
/**
|
|
29
|
+
* 创建节点视图配置
|
|
30
|
+
* @param options 配置选项
|
|
31
|
+
*/
|
|
32
|
+
constructor(options: {
|
|
33
|
+
/** 唯一标识字段名 */
|
|
34
|
+
keyField: keyof T;
|
|
35
|
+
/** 显示文字的字段名或获取函数 */
|
|
36
|
+
textField: keyof T | ((data: T) => string);
|
|
37
|
+
});
|
|
38
|
+
/**
|
|
39
|
+
* 获取节点的文字
|
|
40
|
+
* @param data 节点数据
|
|
41
|
+
* @returns 显示文字
|
|
42
|
+
*/
|
|
43
|
+
getText(data: T): string;
|
|
44
|
+
/**
|
|
45
|
+
* 获取节点的唯一标识
|
|
46
|
+
* @param data 节点数据
|
|
47
|
+
* @returns 唯一标识值
|
|
48
|
+
*/
|
|
49
|
+
getKey(data: T): any;
|
|
19
50
|
}
|
|
20
|
-
|
|
51
|
+
/**
|
|
52
|
+
* 树节点接口
|
|
53
|
+
* @template T 节点数据的类型
|
|
54
|
+
*/
|
|
55
|
+
export interface ITreeNode<T> {
|
|
21
56
|
/**
|
|
22
|
-
*
|
|
23
|
-
|
|
57
|
+
* 是否展开(显示子节点)
|
|
58
|
+
*/
|
|
59
|
+
expand: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* 是否正在加载(用于懒加载)
|
|
62
|
+
*/
|
|
63
|
+
loading: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* 获取节点层级(根节点为 0)
|
|
66
|
+
*/
|
|
67
|
+
get level(): number;
|
|
68
|
+
/**
|
|
69
|
+
* 获取子节点列表(只读,不能从外部修改)
|
|
70
|
+
* @returns 子节点数组,如果没有子节点返回 null
|
|
71
|
+
*/
|
|
72
|
+
get children(): Array<ITreeNode<T>> | null;
|
|
73
|
+
/**
|
|
74
|
+
* 添加子节点
|
|
75
|
+
* @param childItem 子节点数据
|
|
76
|
+
* @returns 新创建的子节点
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* const childNode = parentNode.append({ id: 1, name: "子节点" });
|
|
80
|
+
*/
|
|
81
|
+
append(childItem: T): ITreeNode<T>;
|
|
82
|
+
/**
|
|
83
|
+
* 从父节点中分离(删除当前节点)
|
|
24
84
|
*
|
|
25
85
|
* @example
|
|
26
|
-
*
|
|
27
|
-
* parentNode.append({ id: 1, name: "子节点" });
|
|
86
|
+
* node.detach();
|
|
28
87
|
*/
|
|
29
|
-
|
|
88
|
+
detach(): void;
|
|
30
89
|
/**
|
|
31
|
-
*
|
|
90
|
+
* 移动到另一个父节点下
|
|
91
|
+
* @param newParent 新的父节点
|
|
92
|
+
* @returns 当前节点(支持链式调用)
|
|
32
93
|
*
|
|
33
94
|
* @example
|
|
34
|
-
* node.
|
|
95
|
+
* node.moveTo(newParentNode);
|
|
35
96
|
*/
|
|
36
|
-
|
|
97
|
+
moveTo(newParent: ITreeNode<T>): ITreeNode<T>;
|
|
37
98
|
/**
|
|
38
99
|
* 替换当前节点的数据
|
|
39
|
-
* @param newItem
|
|
100
|
+
* @param newItem 新的数据对象
|
|
40
101
|
*
|
|
41
102
|
* @example
|
|
42
103
|
* node.replace({ id: 1, name: "新名称", ...otherFields });
|
|
43
104
|
*/
|
|
44
|
-
replace
|
|
105
|
+
replace(newItem: T): void;
|
|
45
106
|
/**
|
|
46
|
-
*
|
|
47
|
-
|
|
107
|
+
* 获取节点的数据
|
|
108
|
+
*/
|
|
109
|
+
get item(): T;
|
|
110
|
+
/**
|
|
111
|
+
* 删除所有子节点
|
|
48
112
|
*
|
|
49
113
|
* @example
|
|
50
|
-
* node.
|
|
114
|
+
* node.removeChildren();
|
|
51
115
|
*/
|
|
52
|
-
|
|
116
|
+
removeChildren(): void;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* TreeNode 类 - 树节点,包含数据和方法
|
|
120
|
+
* @template T 节点数据的类型
|
|
121
|
+
*
|
|
122
|
+
* @description
|
|
123
|
+
* TreeNode 是树结构的基本单元,每个节点包含:
|
|
124
|
+
* - 节点数据(item)
|
|
125
|
+
* - 父节点引用(parent)
|
|
126
|
+
* - 子节点列表(children)
|
|
127
|
+
* - 展开状态(expand)
|
|
128
|
+
* - 加载状态(loading)
|
|
129
|
+
*
|
|
130
|
+
* 节点提供了丰富的操作方法,可以直接在节点上进行增删改查操作。
|
|
131
|
+
*/
|
|
132
|
+
export declare class TreeNode<T> implements ITreeNode<T> {
|
|
133
|
+
/**
|
|
134
|
+
* 节点数据(私有,只读)
|
|
135
|
+
* @private
|
|
136
|
+
*/
|
|
137
|
+
private _item;
|
|
138
|
+
/**
|
|
139
|
+
* 节点层级(私有)
|
|
140
|
+
* @private
|
|
141
|
+
*/
|
|
142
|
+
private _level;
|
|
143
|
+
/**
|
|
144
|
+
* 是否展开(显示子节点)
|
|
145
|
+
*/
|
|
146
|
+
expand: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* 是否正在加载(用于懒加载)
|
|
149
|
+
*/
|
|
150
|
+
loading: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* 父节点(只读)
|
|
153
|
+
*/
|
|
154
|
+
readonly parent: TreeNode<T> | null;
|
|
155
|
+
/**
|
|
156
|
+
* 子节点数组(私有)
|
|
157
|
+
* @private
|
|
158
|
+
*/
|
|
159
|
+
private _children;
|
|
160
|
+
/**
|
|
161
|
+
* 创建树节点
|
|
162
|
+
* @param item 节点数据
|
|
163
|
+
* @param parent 父节点(可选)
|
|
164
|
+
* @param children 子节点列表(可选)
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* // 创建根节点
|
|
168
|
+
* const rootNode = new TreeNode({ id: 1, name: "根节点" });
|
|
169
|
+
*
|
|
170
|
+
* // 创建子节点
|
|
171
|
+
* const childNode = new TreeNode({ id: 2, name: "子节点" }, rootNode);
|
|
172
|
+
*/
|
|
173
|
+
constructor(item: T, parent?: TreeNode<T> | null, children?: Array<TreeNode<T>> | null);
|
|
174
|
+
/**
|
|
175
|
+
* 获取节点层级
|
|
176
|
+
* @returns 层级值(根节点为 0)
|
|
177
|
+
*/
|
|
178
|
+
get level(): number;
|
|
179
|
+
/**
|
|
180
|
+
* 获取子节点列表(只读)
|
|
181
|
+
* @returns 子节点数组的浅拷贝,如果没有子节点返回 null
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* const children = node.children;
|
|
185
|
+
* if (children) {
|
|
186
|
+
* children.forEach(child => console.log(child.item));
|
|
187
|
+
* }
|
|
188
|
+
*/
|
|
189
|
+
get children(): Array<TreeNode<T>> | null;
|
|
190
|
+
/**
|
|
191
|
+
* 添加子节点
|
|
192
|
+
* @param childItem 子节点数据
|
|
193
|
+
* @returns 新创建的子节点
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* const childNode = parentNode.append({ id: 1, name: "子节点" });
|
|
197
|
+
*/
|
|
198
|
+
append(childItem: T): TreeNode<T>;
|
|
199
|
+
/**
|
|
200
|
+
* 从父节点中分离(删除当前节点)
|
|
201
|
+
*
|
|
202
|
+
* @example
|
|
203
|
+
* node.detach();
|
|
204
|
+
*/
|
|
205
|
+
detach(): void;
|
|
53
206
|
/**
|
|
54
207
|
* 删除指定的子节点
|
|
55
|
-
* @param
|
|
208
|
+
* @param node 要删除的子节点
|
|
209
|
+
* @private
|
|
210
|
+
*/
|
|
211
|
+
private removeNode;
|
|
212
|
+
/**
|
|
213
|
+
* 移动到另一个父节点下
|
|
214
|
+
* @param newParent 新的父节点
|
|
215
|
+
* @returns 新创建的节点(注意:返回的是新节点,不是原节点)
|
|
56
216
|
*
|
|
57
217
|
* @example
|
|
58
|
-
* node.
|
|
218
|
+
* node.moveTo(newParentNode);
|
|
59
219
|
*/
|
|
60
|
-
|
|
220
|
+
moveTo(newParent: TreeNode<T>): TreeNode<T>;
|
|
221
|
+
/**
|
|
222
|
+
* 替换当前节点的数据
|
|
223
|
+
* @param newItem 新的数据对象
|
|
224
|
+
*
|
|
225
|
+
* @example
|
|
226
|
+
* node.replace({ id: 1, name: "新名称", ...otherFields });
|
|
227
|
+
*/
|
|
228
|
+
replace(newItem: T): void;
|
|
229
|
+
/**
|
|
230
|
+
* 获取节点数据
|
|
231
|
+
* @returns 节点数据对象
|
|
232
|
+
*/
|
|
233
|
+
get item(): T;
|
|
61
234
|
/**
|
|
62
235
|
* 删除所有子节点
|
|
63
236
|
*
|
|
64
237
|
* @example
|
|
65
238
|
* node.removeChildren();
|
|
66
239
|
*/
|
|
67
|
-
removeChildren
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
240
|
+
removeChildren(): void;
|
|
241
|
+
/**
|
|
242
|
+
* @internal 仅供 TreeNodes 内部使用
|
|
243
|
+
* 设置父节点,并将自己添加到父节点的 children 中
|
|
244
|
+
* @param parent 新的父节点
|
|
245
|
+
*
|
|
246
|
+
* @description
|
|
247
|
+
* 此方法会:
|
|
248
|
+
* 1. 从原父节点的 children 中移除自己
|
|
249
|
+
* 2. 更新父节点引用
|
|
250
|
+
* 3. 重新计算层级
|
|
251
|
+
* 4. 将自己添加到新父节点的 children 中
|
|
252
|
+
*/
|
|
253
|
+
_setParent(parent: TreeNode<T> | null): void;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* 判断数据是否为根节点的函数类型
|
|
257
|
+
* @template T 数据类型
|
|
258
|
+
*/
|
|
259
|
+
export type CheckIsRoot<T> = (data: T) => boolean;
|
|
260
|
+
/**
|
|
261
|
+
* 比较函数类型
|
|
262
|
+
* @template T 数据类型
|
|
263
|
+
* @returns 返回 0 表示相等,正数表示 o1 > o2,负数表示 o1 < o2
|
|
264
|
+
*/
|
|
265
|
+
export type CompareFun<T> = (o1: T, o2: T) => number | undefined;
|
|
266
|
+
/**
|
|
267
|
+
* 获取文本的函数类型
|
|
268
|
+
* @template T 数据类型
|
|
269
|
+
*/
|
|
270
|
+
export type GetText<T> = (data: T) => string;
|
|
271
|
+
/**
|
|
272
|
+
* 判断节点是否为分支(有子节点)的函数类型
|
|
273
|
+
* @template T 数据类型
|
|
274
|
+
*/
|
|
275
|
+
export type CheckIsDirectory<T> = (node: ITreeNode<T>) => boolean;
|
|
276
|
+
/**
|
|
277
|
+
* TreeNodes 配置选项
|
|
278
|
+
* @template T 节点数据的类型
|
|
279
|
+
*/
|
|
280
|
+
export interface TreeNodeOptions<T> {
|
|
82
281
|
/**
|
|
83
|
-
*
|
|
282
|
+
* 唯一标识字段名(默认:'id')
|
|
84
283
|
*/
|
|
85
|
-
|
|
284
|
+
keyField?: keyof T;
|
|
86
285
|
/**
|
|
87
|
-
*
|
|
286
|
+
* 显示文字的字段名或获取函数(默认:'text')
|
|
88
287
|
*/
|
|
89
|
-
|
|
288
|
+
textField?: keyof T | GetText<T>;
|
|
90
289
|
/**
|
|
91
|
-
*
|
|
290
|
+
* 父节点引用字段名(默认:'parentId')
|
|
92
291
|
*/
|
|
93
|
-
|
|
292
|
+
parentKeyField?: keyof T;
|
|
94
293
|
/**
|
|
95
|
-
*
|
|
294
|
+
* 判断数据是否为根节点的函数(必需)
|
|
96
295
|
*/
|
|
97
|
-
|
|
296
|
+
checkIsRoot: CheckIsRoot<T>;
|
|
98
297
|
/**
|
|
99
|
-
*
|
|
298
|
+
* 判断节点是否为分支的函数(可选)
|
|
100
299
|
*/
|
|
101
|
-
|
|
300
|
+
checkIsDirectory?: CheckIsDirectory<T>;
|
|
102
301
|
/**
|
|
103
|
-
*
|
|
302
|
+
* 排序比较函数(可选)
|
|
104
303
|
*/
|
|
105
|
-
|
|
304
|
+
compareFun?: CompareFun<T>;
|
|
106
305
|
/**
|
|
107
|
-
*
|
|
306
|
+
* 默认展开深度(默认:1)
|
|
307
|
+
*/
|
|
308
|
+
expendDepth?: number;
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* TreeNodes 类 - 树节点管理器
|
|
312
|
+
* @template T 节点数据的类型
|
|
313
|
+
*
|
|
314
|
+
* @description
|
|
315
|
+
* TreeNodes 负责管理树结构的数据,包括:
|
|
316
|
+
* - 树的构建和初始化
|
|
317
|
+
* - 节点的映射和查找
|
|
318
|
+
* - 版本管理(用于响应式更新)
|
|
319
|
+
* - 层级展开控制
|
|
320
|
+
*
|
|
321
|
+
* @example
|
|
322
|
+
* interface MyData {
|
|
323
|
+
* id: number;
|
|
324
|
+
* name: string;
|
|
325
|
+
* parentId: number | null;
|
|
326
|
+
* }
|
|
327
|
+
*
|
|
328
|
+
* const treeNodes = new TreeNodes<MyData>({
|
|
329
|
+
* keyField: 'id',
|
|
330
|
+
* textField: 'name',
|
|
331
|
+
* parentKeyField: 'parentId',
|
|
332
|
+
* checkIsRoot: (item) => item.parentId === null,
|
|
333
|
+
* checkIsDirectory: (node) => node.children !== null,
|
|
334
|
+
* expendDepth: 2
|
|
335
|
+
* });
|
|
336
|
+
*
|
|
337
|
+
* treeNodes.setData([
|
|
338
|
+
* { id: 1, name: "根节点", parentId: null },
|
|
339
|
+
* { id: 2, name: "子节点1", parentId: 1 },
|
|
340
|
+
* { id: 3, name: "子节点2", parentId: 1 }
|
|
341
|
+
* ]);
|
|
342
|
+
*/
|
|
343
|
+
export default class TreeNodes<T> {
|
|
344
|
+
protected readonly checkIsRoot: CheckIsRoot<T>;
|
|
345
|
+
protected readonly keyField: keyof T;
|
|
346
|
+
protected readonly parentKeyField: keyof T;
|
|
347
|
+
protected readonly textField: keyof T | GetText<T>;
|
|
348
|
+
protected readonly checkIsDirectory: CheckIsDirectory<T> | undefined;
|
|
349
|
+
protected nodeMap: Map<any, TreeNode<T>>;
|
|
350
|
+
protected compareFun: any | undefined;
|
|
351
|
+
protected expendDepth: number;
|
|
352
|
+
protected _nodes: Array<TreeNode<T>>;
|
|
353
|
+
protected _version: number;
|
|
354
|
+
/**
|
|
355
|
+
* 创建 TreeNodes 实例
|
|
356
|
+
* @param options 配置选项
|
|
357
|
+
*/
|
|
358
|
+
constructor(options: TreeNodeOptions<T>);
|
|
359
|
+
/**
|
|
360
|
+
* 设置树数据
|
|
361
|
+
* @param list 扁平化的节点数据数组
|
|
362
|
+
*
|
|
363
|
+
* @description
|
|
364
|
+
* 此方法会:
|
|
365
|
+
* 1. 清空现有树结构
|
|
366
|
+
* 2. 创建所有节点
|
|
367
|
+
* 3. 根据 parentKeyField 建立父子关系
|
|
368
|
+
* 4. 应用展开深度设置
|
|
369
|
+
* 5. 触发版本更新
|
|
370
|
+
*
|
|
371
|
+
* @example
|
|
372
|
+
* treeNodes.setData([
|
|
373
|
+
* { id: 1, name: "根节点", parentId: null },
|
|
374
|
+
* { id: 2, name: "子节点1", parentId: 1 },
|
|
375
|
+
* { id: 3, name: "子节点2", parentId: 1 }
|
|
376
|
+
* ]);
|
|
108
377
|
*/
|
|
109
|
-
protected removeChildrenNodes(parentNode: TreeNodeWithMethods<T>): void;
|
|
110
378
|
setData(list: Array<T>): void;
|
|
111
379
|
/**
|
|
112
380
|
* 获取节点
|
|
@@ -124,32 +392,18 @@ export declare class CommonTreeNodes<T> {
|
|
|
124
392
|
*/
|
|
125
393
|
protected setExpandForDepth(nodes: TreeNode<T>[], currentLevel: number): void;
|
|
126
394
|
/**
|
|
127
|
-
*
|
|
128
|
-
* @param node
|
|
129
|
-
* @param doSort
|
|
130
|
-
* @protected
|
|
395
|
+
* 获取展开的展示列表
|
|
131
396
|
*/
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
export default class TreeNodes<T> extends CommonTreeNodes<T> {
|
|
397
|
+
getHierarchyList(): Array<ITreeNode<T>>;
|
|
398
|
+
private addExpandNodesToList;
|
|
135
399
|
/**
|
|
136
|
-
*
|
|
400
|
+
* 不检测匹配情况,在指定的父节点下添加子节点
|
|
137
401
|
*/
|
|
138
|
-
|
|
402
|
+
batchAttachToParent(parent: TreeNode<T>, list: Array<T>): ITreeNode<T>[];
|
|
139
403
|
/**
|
|
140
404
|
* 增加一个新节点(便捷方法,会自动根据 parentKeyField 找到父节点)
|
|
141
405
|
* @param item 要添加的节点数据
|
|
142
406
|
*/
|
|
143
|
-
append(item: T):
|
|
144
|
-
|
|
145
|
-
* 获取除指定节点外的其他节点
|
|
146
|
-
* @param exclusiveData
|
|
147
|
-
*/
|
|
148
|
-
extractDirectories(exclusiveData: T): TreeNode<T>[];
|
|
149
|
-
/**
|
|
150
|
-
* 获取所有展开的节点
|
|
151
|
-
* @param tree
|
|
152
|
-
* @private
|
|
153
|
-
*/
|
|
154
|
-
private collectExpandedNodes;
|
|
407
|
+
append(item: T): ITreeNode<T>;
|
|
408
|
+
private findParent;
|
|
155
409
|
}
|