@ticatec/uniface-element 0.3.18 → 0.3.19
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/CHANGELOG.md +43 -0
- package/COMPONENT_GUIDE.md +441 -0
- package/COMPONENT_GUIDE_CN.md +465 -0
- package/COMPONENT_SELECTION_PROMPTS.md +568 -0
- package/CONTRIBUTING.md +217 -0
- package/README.md +19 -9
- package/dist/attachment-files/README.md +169 -0
- package/dist/attachment-files/README_CN.md +169 -0
- package/dist/color-picker/README.md +184 -0
- package/dist/color-picker/README_CN.md +185 -0
- package/dist/form-field/README.md +193 -0
- package/dist/form-field/README_CN.md +193 -0
- package/dist/form-panel/flex-form/FlexForm.svelte +1 -1
- package/dist/inline-cell-editor/README.md +116 -0
- package/dist/inline-cell-editor/README_CN.md +116 -0
- package/dist/lib/TreeNode_README.md +32 -57
- package/dist/lib/TreeNode_README_CN.md +25 -43
- package/dist/lib/TreeNodes.d.ts +49 -98
- package/dist/lib/TreeNodes.js +97 -86
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +2 -0
- package/dist/nav-menu/MenuItem.d.ts +2 -2
- package/dist/navigator/README.md +377 -0
- package/dist/navigator/README_CN.md +377 -0
- package/dist/separator/README.md +105 -0
- package/dist/separator/README_CN.md +105 -0
- package/dist/split/README.md +240 -0
- package/dist/split/README_CN.md +240 -0
- package/dist/tree-view/README.md +48 -36
- package/dist/tree-view/README_CN.md +45 -9
- package/dist/tree-view/TreeNodeView.svelte +2 -5
- package/package.json +16 -9
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
## TreeNode 类
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
class TreeNode<T> {
|
|
12
|
+
class TreeNode<T> implements ITreeNode<T> {
|
|
13
13
|
/** 节点的数据对象(只读) */
|
|
14
14
|
public readonly item: T;
|
|
15
15
|
|
|
@@ -20,26 +20,26 @@ class TreeNode<T> {
|
|
|
20
20
|
public loading: boolean;
|
|
21
21
|
|
|
22
22
|
/** 父节点(根节点为 null) */
|
|
23
|
-
public parent: TreeNode<T> | null;
|
|
23
|
+
public readonly parent: TreeNode<T> | null;
|
|
24
24
|
|
|
25
|
-
/**
|
|
26
|
-
get
|
|
25
|
+
/** 节点层级(根节点为 0) */
|
|
26
|
+
get level(): number;
|
|
27
|
+
|
|
28
|
+
/** 子节点(浅拷贝,使用方法修改) */
|
|
29
|
+
get children(): Array<TreeNode<T>> | null;
|
|
27
30
|
|
|
28
31
|
/** 添加子节点到当前节点 */
|
|
29
|
-
append(childItem: T):
|
|
32
|
+
append(childItem: T | Array<T>): ITreeNode<T> | Array<ITreeNode<T>>;
|
|
30
33
|
|
|
31
34
|
/** 从父节点中分离(删除当前节点) */
|
|
32
35
|
detach(): void;
|
|
33
36
|
|
|
34
|
-
/**
|
|
35
|
-
moveTo(newParent: TreeNode<T>):
|
|
37
|
+
/** 将当前节点移动到另一个父节点下(返回新节点) */
|
|
38
|
+
moveTo(newParent: TreeNode<T>): TreeNode<T>;
|
|
36
39
|
|
|
37
40
|
/** 替换当前节点的数据 */
|
|
38
41
|
replace(newItem: T): void;
|
|
39
42
|
|
|
40
|
-
/** 根据 ID 删除指定的子节点 */
|
|
41
|
-
removeChild(childId: any): void;
|
|
42
|
-
|
|
43
43
|
/** 删除所有子节点 */
|
|
44
44
|
removeChildren(): void;
|
|
45
45
|
}
|
|
@@ -87,25 +87,33 @@ class NodeViewOptions<T> {
|
|
|
87
87
|
|
|
88
88
|
### 1. append(childItem)
|
|
89
89
|
|
|
90
|
-
|
|
90
|
+
添加子节点到当前节点。
|
|
91
91
|
|
|
92
92
|
**参数**:
|
|
93
|
-
- `childItem: T
|
|
93
|
+
- `childItem: T | Array<T>` - 子节点的数据对象或子对象数组
|
|
94
94
|
|
|
95
95
|
**示例**:
|
|
96
96
|
```typescript
|
|
97
|
-
//
|
|
97
|
+
// 添加单个子节点
|
|
98
98
|
parentNode.append({
|
|
99
99
|
id: 123,
|
|
100
100
|
name: "新子节点",
|
|
101
101
|
parentId: parentNode.item.id // 会自动设置
|
|
102
102
|
});
|
|
103
|
+
|
|
104
|
+
// 添加多个子节点
|
|
105
|
+
parentNode.append([
|
|
106
|
+
{ id: 124, name: "子节点1", parentId: parentNode.item.id },
|
|
107
|
+
{ id: 125, name: "子节点2", parentId: parentNode.item.id }
|
|
108
|
+
]);
|
|
103
109
|
```
|
|
104
110
|
|
|
111
|
+
**返回值**:
|
|
112
|
+
- `ITreeNode<T> | Array<ITreeNode<T>>` - 添加的子节点
|
|
113
|
+
|
|
105
114
|
**注意事项**:
|
|
106
115
|
- 自动初始化 children 数组(如果需要)
|
|
107
116
|
- 如果配置了排序函数,会自动排序
|
|
108
|
-
- 父节点的 `expand` 会自动设置为 `true`
|
|
109
117
|
- 触发版本更新以实现响应式更新
|
|
110
118
|
|
|
111
119
|
---
|
|
@@ -195,32 +203,7 @@ node.replace({
|
|
|
195
203
|
|
|
196
204
|
---
|
|
197
205
|
|
|
198
|
-
### 5.
|
|
199
|
-
|
|
200
|
-
删除指定的子节点。
|
|
201
|
-
|
|
202
|
-
**参数**:
|
|
203
|
-
- `childId: any` - 要删除的子节点的 ID
|
|
204
|
-
|
|
205
|
-
**示例**:
|
|
206
|
-
```typescript
|
|
207
|
-
// 删除指定 ID 的子节点
|
|
208
|
-
parentNode.removeChild(123);
|
|
209
|
-
|
|
210
|
-
// 使用变量
|
|
211
|
-
const childId = childNode.item.id;
|
|
212
|
-
parentNode.removeChild(childId);
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
**注意事项**:
|
|
216
|
-
- 只删除直接子节点,不会递归删除孙子节点
|
|
217
|
-
- 如果子节点不存在,会静默忽略
|
|
218
|
-
- 子节点的所有后代也会被删除
|
|
219
|
-
- 触发版本更新以实现响应式更新
|
|
220
|
-
|
|
221
|
-
---
|
|
222
|
-
|
|
223
|
-
### 6. removeChildren()
|
|
206
|
+
### 5. removeChildren()
|
|
224
207
|
|
|
225
208
|
删除所有子节点。
|
|
226
209
|
|
|
@@ -387,7 +370,6 @@ node.append(childItem); // 添加子节点到该节点
|
|
|
387
370
|
node.detach(); // 从父节点中分离该节点
|
|
388
371
|
node.replace(newItem); // 替换该节点的数据
|
|
389
372
|
node.moveTo(newParentNode); // 将该节点移动到另一个父节点
|
|
390
|
-
node.removeChild(childId); // 删除该节点的指定子节点
|
|
391
373
|
node.removeChildren(); // 删除该节点的所有子节点
|
|
392
374
|
```
|
|
393
375
|
|
|
@@ -409,10 +391,10 @@ treeNodes.extractDirectories(item); // 提取目录结构(仅 TreeNodes)
|
|
|
409
391
|
节点中存储的数据对象。不能直接修改。使用 `replace()` 来更新数据。
|
|
410
392
|
|
|
411
393
|
### children(只读)
|
|
412
|
-
|
|
394
|
+
返回子节点数组的浅拷贝。要修改子节点,使用以下方法:
|
|
413
395
|
- `append()` - 添加子节点
|
|
414
|
-
- `removeChild()` - 删除特定子节点
|
|
415
396
|
- `removeChildren()` - 删除所有子节点
|
|
397
|
+
- 要删除特定子节点,请遍历子节点并对子节点调用 `detach()` 方法
|
|
416
398
|
|
|
417
399
|
### expand
|
|
418
400
|
控制节点是否展开(显示其子节点)。可以直接设置:
|
package/dist/lib/TreeNodes.d.ts
CHANGED
|
@@ -8,12 +8,6 @@ export declare function compareNumber(a: number, b: number): 0 | 1 | -1;
|
|
|
8
8
|
/**
|
|
9
9
|
* 节点视图配置类 - 定义节点的显示方式
|
|
10
10
|
* @template T 节点数据的类型
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* const options = new NodeViewOptions<MyData>({
|
|
14
|
-
* keyField: 'id',
|
|
15
|
-
* textField: 'name'
|
|
16
|
-
* });
|
|
17
11
|
*/
|
|
18
12
|
export declare class NodeViewOptions<T> {
|
|
19
13
|
/**
|
|
@@ -70,37 +64,20 @@ export interface ITreeNode<T> {
|
|
|
70
64
|
* @returns 子节点数组,如果没有子节点返回 null
|
|
71
65
|
*/
|
|
72
66
|
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>;
|
|
67
|
+
append(childItem: T | Array<T>): ITreeNode<T> | Array<ITreeNode<T>>;
|
|
82
68
|
/**
|
|
83
69
|
* 从父节点中分离(删除当前节点)
|
|
84
|
-
*
|
|
85
|
-
* @example
|
|
86
|
-
* node.detach();
|
|
87
70
|
*/
|
|
88
71
|
detach(): void;
|
|
89
72
|
/**
|
|
90
73
|
* 移动到另一个父节点下
|
|
91
74
|
* @param newParent 新的父节点
|
|
92
75
|
* @returns 当前节点(支持链式调用)
|
|
93
|
-
*
|
|
94
|
-
* @example
|
|
95
|
-
* node.moveTo(newParentNode);
|
|
96
76
|
*/
|
|
97
77
|
moveTo(newParent: ITreeNode<T>): ITreeNode<T>;
|
|
98
78
|
/**
|
|
99
79
|
* 替换当前节点的数据
|
|
100
80
|
* @param newItem 新的数据对象
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* node.replace({ id: 1, name: "新名称", ...otherFields });
|
|
104
81
|
*/
|
|
105
82
|
replace(newItem: T): void;
|
|
106
83
|
/**
|
|
@@ -109,15 +86,17 @@ export interface ITreeNode<T> {
|
|
|
109
86
|
get item(): T;
|
|
110
87
|
/**
|
|
111
88
|
* 删除所有子节点
|
|
112
|
-
*
|
|
113
|
-
* @example
|
|
114
|
-
* node.removeChildren();
|
|
115
89
|
*/
|
|
116
90
|
removeChildren(): void;
|
|
91
|
+
/**
|
|
92
|
+
* 获取父节点
|
|
93
|
+
*/
|
|
94
|
+
parent: TreeNode<T> | null;
|
|
117
95
|
}
|
|
118
96
|
/**
|
|
119
|
-
* TreeNode 类 -
|
|
97
|
+
* TreeNode 类 - 树节点,包含数据和方法(内部类)
|
|
120
98
|
* @template T 节点数据的类型
|
|
99
|
+
* @internal
|
|
121
100
|
*
|
|
122
101
|
* @description
|
|
123
102
|
* TreeNode 是树结构的基本单元,每个节点包含:
|
|
@@ -128,8 +107,10 @@ export interface ITreeNode<T> {
|
|
|
128
107
|
* - 加载状态(loading)
|
|
129
108
|
*
|
|
130
109
|
* 节点提供了丰富的操作方法,可以直接在节点上进行增删改查操作。
|
|
110
|
+
*
|
|
111
|
+
* 注意:此类为内部实现,外部应使用 ITreeNode 接口
|
|
131
112
|
*/
|
|
132
|
-
|
|
113
|
+
declare class TreeNode<T> implements ITreeNode<T> {
|
|
133
114
|
/**
|
|
134
115
|
* 节点数据(私有,只读)
|
|
135
116
|
* @private
|
|
@@ -157,20 +138,15 @@ export declare class TreeNode<T> implements ITreeNode<T> {
|
|
|
157
138
|
* @private
|
|
158
139
|
*/
|
|
159
140
|
private _children;
|
|
141
|
+
private readonly nodes;
|
|
160
142
|
/**
|
|
161
143
|
* 创建树节点
|
|
162
144
|
* @param item 节点数据
|
|
145
|
+
* @param nodes
|
|
163
146
|
* @param parent 父节点(可选)
|
|
164
147
|
* @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
148
|
*/
|
|
173
|
-
constructor(item: T, parent?: TreeNode<T> | null, children?: Array<TreeNode<T>> | null);
|
|
149
|
+
constructor(item: T, nodes: TreeNodes<T>, parent?: TreeNode<T> | null, children?: Array<TreeNode<T>> | null);
|
|
174
150
|
/**
|
|
175
151
|
* 获取节点层级
|
|
176
152
|
* @returns 层级值(根节点为 0)
|
|
@@ -179,28 +155,17 @@ export declare class TreeNode<T> implements ITreeNode<T> {
|
|
|
179
155
|
/**
|
|
180
156
|
* 获取子节点列表(只读)
|
|
181
157
|
* @returns 子节点数组的浅拷贝,如果没有子节点返回 null
|
|
182
|
-
*
|
|
183
|
-
* @example
|
|
184
|
-
* const children = node.children;
|
|
185
|
-
* if (children) {
|
|
186
|
-
* children.forEach(child => console.log(child.item));
|
|
187
|
-
* }
|
|
188
158
|
*/
|
|
189
159
|
get children(): Array<TreeNode<T>> | null;
|
|
160
|
+
set children(value: Array<TreeNode<T>>);
|
|
190
161
|
/**
|
|
191
162
|
* 添加子节点
|
|
192
163
|
* @param childItem 子节点数据
|
|
193
164
|
* @returns 新创建的子节点
|
|
194
|
-
*
|
|
195
|
-
* @example
|
|
196
|
-
* const childNode = parentNode.append({ id: 1, name: "子节点" });
|
|
197
165
|
*/
|
|
198
|
-
append(childItem: T):
|
|
166
|
+
append(childItem: T | Array<T>): ITreeNode<T> | Array<ITreeNode<T>>;
|
|
199
167
|
/**
|
|
200
168
|
* 从父节点中分离(删除当前节点)
|
|
201
|
-
*
|
|
202
|
-
* @example
|
|
203
|
-
* node.detach();
|
|
204
169
|
*/
|
|
205
170
|
detach(): void;
|
|
206
171
|
/**
|
|
@@ -213,17 +178,11 @@ export declare class TreeNode<T> implements ITreeNode<T> {
|
|
|
213
178
|
* 移动到另一个父节点下
|
|
214
179
|
* @param newParent 新的父节点
|
|
215
180
|
* @returns 新创建的节点(注意:返回的是新节点,不是原节点)
|
|
216
|
-
*
|
|
217
|
-
* @example
|
|
218
|
-
* node.moveTo(newParentNode);
|
|
219
181
|
*/
|
|
220
|
-
moveTo(newParent: TreeNode<T>):
|
|
182
|
+
moveTo(newParent: TreeNode<T>): ITreeNode<T>;
|
|
221
183
|
/**
|
|
222
184
|
* 替换当前节点的数据
|
|
223
185
|
* @param newItem 新的数据对象
|
|
224
|
-
*
|
|
225
|
-
* @example
|
|
226
|
-
* node.replace({ id: 1, name: "新名称", ...otherFields });
|
|
227
186
|
*/
|
|
228
187
|
replace(newItem: T): void;
|
|
229
188
|
/**
|
|
@@ -233,9 +192,6 @@ export declare class TreeNode<T> implements ITreeNode<T> {
|
|
|
233
192
|
get item(): T;
|
|
234
193
|
/**
|
|
235
194
|
* 删除所有子节点
|
|
236
|
-
*
|
|
237
|
-
* @example
|
|
238
|
-
* node.removeChildren();
|
|
239
195
|
*/
|
|
240
196
|
removeChildren(): void;
|
|
241
197
|
/**
|
|
@@ -273,6 +229,9 @@ export type GetText<T> = (data: T) => string;
|
|
|
273
229
|
* @template T 数据类型
|
|
274
230
|
*/
|
|
275
231
|
export type CheckIsDirectory<T> = (node: ITreeNode<T>) => boolean;
|
|
232
|
+
type StringKeys<T> = {
|
|
233
|
+
[K in keyof T]: T[K] extends string ? K : never;
|
|
234
|
+
}[keyof T];
|
|
276
235
|
/**
|
|
277
236
|
* TreeNodes 配置选项
|
|
278
237
|
* @template T 节点数据的类型
|
|
@@ -281,7 +240,7 @@ export interface TreeNodeOptions<T> {
|
|
|
281
240
|
/**
|
|
282
241
|
* 唯一标识字段名(默认:'id')
|
|
283
242
|
*/
|
|
284
|
-
keyField?:
|
|
243
|
+
keyField?: StringKeys<T>;
|
|
285
244
|
/**
|
|
286
245
|
* 显示文字的字段名或获取函数(默认:'text')
|
|
287
246
|
*/
|
|
@@ -289,7 +248,7 @@ export interface TreeNodeOptions<T> {
|
|
|
289
248
|
/**
|
|
290
249
|
* 父节点引用字段名(默认:'parentId')
|
|
291
250
|
*/
|
|
292
|
-
parentKeyField?:
|
|
251
|
+
parentKeyField?: StringKeys<T>;
|
|
293
252
|
/**
|
|
294
253
|
* 判断数据是否为根节点的函数(必需)
|
|
295
254
|
*/
|
|
@@ -317,33 +276,11 @@ export interface TreeNodeOptions<T> {
|
|
|
317
276
|
* - 节点的映射和查找
|
|
318
277
|
* - 版本管理(用于响应式更新)
|
|
319
278
|
* - 层级展开控制
|
|
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
279
|
*/
|
|
343
280
|
export default class TreeNodes<T> {
|
|
344
281
|
protected readonly checkIsRoot: CheckIsRoot<T>;
|
|
345
|
-
protected readonly keyField:
|
|
346
|
-
protected readonly parentKeyField:
|
|
282
|
+
protected readonly keyField: StringKeys<T>;
|
|
283
|
+
protected readonly parentKeyField: StringKeys<T>;
|
|
347
284
|
protected readonly textField: keyof T | GetText<T>;
|
|
348
285
|
protected readonly checkIsDirectory: CheckIsDirectory<T> | undefined;
|
|
349
286
|
protected nodeMap: Map<any, TreeNode<T>>;
|
|
@@ -367,19 +304,12 @@ export default class TreeNodes<T> {
|
|
|
367
304
|
* 3. 根据 parentKeyField 建立父子关系
|
|
368
305
|
* 4. 应用展开深度设置
|
|
369
306
|
* 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
|
-
* ]);
|
|
377
307
|
*/
|
|
378
308
|
setData(list: Array<T>): void;
|
|
379
309
|
/**
|
|
380
310
|
* 获取节点
|
|
381
311
|
*/
|
|
382
|
-
get nodes(): Array<
|
|
312
|
+
get nodes(): Array<ITreeNode<T>>;
|
|
383
313
|
/**
|
|
384
314
|
* 获取版本号,用于触发 Svelte 响应式更新
|
|
385
315
|
*/
|
|
@@ -393,17 +323,38 @@ export default class TreeNodes<T> {
|
|
|
393
323
|
protected setExpandForDepth(nodes: TreeNode<T>[], currentLevel: number): void;
|
|
394
324
|
/**
|
|
395
325
|
* 获取展开的展示列表
|
|
326
|
+
* @returns 展开的所有节点(按层级顺序)
|
|
396
327
|
*/
|
|
397
328
|
getHierarchyList(): Array<ITreeNode<T>>;
|
|
398
|
-
private addExpandNodesToList;
|
|
399
329
|
/**
|
|
400
|
-
*
|
|
330
|
+
* 将展开的节点添加到列表
|
|
331
|
+
* @param nodes 节点数组
|
|
332
|
+
* @param list 结果列表
|
|
333
|
+
* @private
|
|
401
334
|
*/
|
|
402
|
-
|
|
335
|
+
private addExpandNodesToList;
|
|
403
336
|
/**
|
|
404
337
|
* 增加一个新节点(便捷方法,会自动根据 parentKeyField 找到父节点)
|
|
405
338
|
* @param item 要添加的节点数据
|
|
406
339
|
*/
|
|
407
340
|
append(item: T): ITreeNode<T>;
|
|
408
|
-
|
|
341
|
+
replace(item: T): ITreeNode<T> | null;
|
|
342
|
+
remove(item: T): ITreeNode<T> | null;
|
|
343
|
+
/**
|
|
344
|
+
* 从节点列表中查找节点
|
|
345
|
+
* @param nodes 节点数组
|
|
346
|
+
* @param item 要查找的数据项
|
|
347
|
+
* @param matchedKey 匹配的字段名
|
|
348
|
+
* @returns 找到的节点或 null
|
|
349
|
+
* @private
|
|
350
|
+
*/
|
|
351
|
+
private _findNodeFromList;
|
|
352
|
+
}
|
|
353
|
+
export declare class MenuNodes<T> extends TreeNodes<T> {
|
|
354
|
+
/**
|
|
355
|
+
* 删除所有属于分支但没有子节点的节点
|
|
356
|
+
*/
|
|
357
|
+
protected cleanEmptyDirectories(): void;
|
|
358
|
+
private pruneEmptyDirs;
|
|
409
359
|
}
|
|
360
|
+
export {};
|