bkui-vue 3.0.4 → 3.0.5
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 +1 -1
- package/dist/index.esm.js +645 -450
- package/dist/index.umd.js +21 -21
- package/dist/style.css +1 -1
- package/dist/style.variable.css +1 -1
- package/lib/index.js +1 -1
- package/lib/packages/tree/constant.d.ts +2 -0
- package/lib/packages/tree/tree-node-row.d.ts +54 -0
- package/lib/packages/tree/use-node-attribute.d.ts +6 -5
- package/lib/packages/tree/use-search.d.ts +2 -0
- package/lib/packages/tree/use-visible-nodes.d.ts +8 -1
- package/lib/tree/index.js +699 -209
- package/lib/tree/tree.css +24 -6
- package/lib/tree/tree.less +24 -6
- package/lib/tree/tree.variable.css +24 -6
- package/package.json +1 -1
package/lib/tree/tree.css
CHANGED
|
@@ -194,7 +194,8 @@
|
|
|
194
194
|
display: flex;
|
|
195
195
|
height: var(--lineHeight);
|
|
196
196
|
padding-left: 0;
|
|
197
|
-
|
|
197
|
+
/* 行高只作用在文本上；此处用 normal 避免 SVG/icon 继承大行高后贴基线，导致视觉中心偏上、连线看起来打在 prefix 底部 */
|
|
198
|
+
line-height: normal;
|
|
198
199
|
cursor: pointer;
|
|
199
200
|
align-items: center;
|
|
200
201
|
}
|
|
@@ -206,7 +207,7 @@
|
|
|
206
207
|
}
|
|
207
208
|
.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child::before {
|
|
208
209
|
position: absolute;
|
|
209
|
-
top:
|
|
210
|
+
top: 50%;
|
|
210
211
|
left: 0;
|
|
211
212
|
right: 0;
|
|
212
213
|
z-index: 1;
|
|
@@ -217,7 +218,7 @@
|
|
|
217
218
|
}
|
|
218
219
|
.bk-tree-node:not(.is-root).level-line::before {
|
|
219
220
|
position: absolute;
|
|
220
|
-
top:
|
|
221
|
+
top: 50%;
|
|
221
222
|
left: calc(0px - var(--indent) + 6px);
|
|
222
223
|
z-index: 1;
|
|
223
224
|
width: calc(var(--indent) - 6px);
|
|
@@ -231,7 +232,12 @@
|
|
|
231
232
|
}
|
|
232
233
|
.bk-tree-node .node-virtual-line {
|
|
233
234
|
position: absolute;
|
|
234
|
-
|
|
235
|
+
/*
|
|
236
|
+
* 竖线终点：当前行中线（与横向连线相接）
|
|
237
|
+
* 竖线起点：父级行中线 + 半个 prefix(14/2)，即父级 bk-node-prefix 下沿
|
|
238
|
+
* 避免 top=-50% 时竖线穿过父级展开图标中心造成「重合」
|
|
239
|
+
*/
|
|
240
|
+
top: calc(var(--lineHeight) / -2 + 7px);
|
|
235
241
|
bottom: 50%;
|
|
236
242
|
left: calc(var(--depth) * var(--indent) * -1 + 6px);
|
|
237
243
|
display: inline-block;
|
|
@@ -240,16 +246,23 @@
|
|
|
240
246
|
}
|
|
241
247
|
.bk-tree-node .bk-node-prefix {
|
|
242
248
|
display: flex;
|
|
249
|
+
flex-shrink: 0;
|
|
243
250
|
width: 14px;
|
|
244
251
|
height: 14px;
|
|
252
|
+
line-height: 1;
|
|
245
253
|
align-items: center;
|
|
246
254
|
justify-content: center;
|
|
247
|
-
transform: translateY(3px);
|
|
248
255
|
}
|
|
249
256
|
.bk-tree-node .bk-node-action {
|
|
257
|
+
display: inline-flex;
|
|
258
|
+
flex-shrink: 0;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
width: 14px;
|
|
262
|
+
height: 14px;
|
|
250
263
|
margin-right: 6px;
|
|
264
|
+
line-height: 1;
|
|
251
265
|
color: #979ba5;
|
|
252
|
-
min-width: 14px;
|
|
253
266
|
}
|
|
254
267
|
.bk-tree-node .bk-tree-icon {
|
|
255
268
|
margin: 0 6px 0 4px;
|
|
@@ -259,9 +272,13 @@
|
|
|
259
272
|
flex: 1;
|
|
260
273
|
align-items: center;
|
|
261
274
|
min-width: 0;
|
|
275
|
+
line-height: normal;
|
|
262
276
|
}
|
|
263
277
|
.bk-tree-node .bk-node-content .node-check-box {
|
|
264
278
|
display: inline-flex;
|
|
279
|
+
flex-shrink: 0;
|
|
280
|
+
align-items: center;
|
|
281
|
+
line-height: 1;
|
|
265
282
|
}
|
|
266
283
|
.bk-tree-node .bk-node-content .bk-checkbox {
|
|
267
284
|
margin: 0;
|
|
@@ -274,6 +291,7 @@
|
|
|
274
291
|
overflow: hidden;
|
|
275
292
|
text-overflow: ellipsis;
|
|
276
293
|
white-space: nowrap;
|
|
294
|
+
line-height: var(--lineHeight);
|
|
277
295
|
}
|
|
278
296
|
.bk-tree-node-draggable {
|
|
279
297
|
cursor: grab;
|
package/lib/tree/tree.less
CHANGED
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
display: flex;
|
|
31
31
|
height: var(--lineHeight);
|
|
32
32
|
padding-left: 0;
|
|
33
|
-
|
|
33
|
+
/* 行高只作用在文本上；此处用 normal 避免 SVG/icon 继承大行高后贴基线，导致视觉中心偏上、连线看起来打在 prefix 底部 */
|
|
34
|
+
line-height: normal;
|
|
34
35
|
cursor: pointer;
|
|
35
36
|
align-items: center;
|
|
36
37
|
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
|
|
46
47
|
&::before {
|
|
47
48
|
position: absolute;
|
|
48
|
-
top:
|
|
49
|
+
top: 50%;
|
|
49
50
|
left: 0;
|
|
50
51
|
right: 0;
|
|
51
52
|
z-index: 1;
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
|
|
60
61
|
&::before {
|
|
61
62
|
position: absolute;
|
|
62
|
-
top:
|
|
63
|
+
top: 50%;
|
|
63
64
|
left: calc(0px - var(--indent) + 6px);
|
|
64
65
|
z-index: 1;
|
|
65
66
|
width: calc(var(--indent) - 6px);
|
|
@@ -80,7 +81,12 @@
|
|
|
80
81
|
|
|
81
82
|
.node-virtual-line {
|
|
82
83
|
position: absolute;
|
|
83
|
-
|
|
84
|
+
/*
|
|
85
|
+
* 竖线终点：当前行中线（与横向连线相接）
|
|
86
|
+
* 竖线起点：父级行中线 + 半个 prefix(14/2)，即父级 bk-node-prefix 下沿
|
|
87
|
+
* 避免 top=-50% 时竖线穿过父级展开图标中心造成「重合」
|
|
88
|
+
*/
|
|
89
|
+
top: calc(var(--lineHeight) / -2 + 7px);
|
|
84
90
|
bottom: 50%;
|
|
85
91
|
left: calc(var(--depth) * var(--indent) * -1 + 6px);
|
|
86
92
|
display: inline-block;
|
|
@@ -90,17 +96,24 @@
|
|
|
90
96
|
|
|
91
97
|
.@{bk-prefix}-node-prefix {
|
|
92
98
|
display: flex;
|
|
99
|
+
flex-shrink: 0;
|
|
93
100
|
width: 14px;
|
|
94
101
|
height: 14px;
|
|
102
|
+
line-height: 1;
|
|
95
103
|
align-items: center;
|
|
96
104
|
justify-content: center;
|
|
97
|
-
transform: translateY(3px);
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
.@{bk-prefix}-node-action {
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
flex-shrink: 0;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
width: 14px;
|
|
113
|
+
height: 14px;
|
|
101
114
|
margin-right: 6px;
|
|
115
|
+
line-height: 1;
|
|
102
116
|
color: #979ba5;
|
|
103
|
-
min-width: 14px;
|
|
104
117
|
}
|
|
105
118
|
|
|
106
119
|
.@{bk-prefix}-tree-icon {
|
|
@@ -112,9 +125,13 @@
|
|
|
112
125
|
flex: 1;
|
|
113
126
|
align-items: center;
|
|
114
127
|
min-width: 0;
|
|
128
|
+
line-height: normal;
|
|
115
129
|
|
|
116
130
|
.node-check-box {
|
|
117
131
|
display: inline-flex;
|
|
132
|
+
flex-shrink: 0;
|
|
133
|
+
align-items: center;
|
|
134
|
+
line-height: 1;
|
|
118
135
|
}
|
|
119
136
|
|
|
120
137
|
.@{bk-prefix}-checkbox {
|
|
@@ -130,6 +147,7 @@
|
|
|
130
147
|
overflow: hidden;
|
|
131
148
|
text-overflow: ellipsis;
|
|
132
149
|
white-space: nowrap;
|
|
150
|
+
line-height: var(--lineHeight);
|
|
133
151
|
}
|
|
134
152
|
}
|
|
135
153
|
}
|
|
@@ -325,7 +325,8 @@
|
|
|
325
325
|
display: flex;
|
|
326
326
|
height: var(--lineHeight);
|
|
327
327
|
padding-left: 0;
|
|
328
|
-
|
|
328
|
+
/* 行高只作用在文本上；此处用 normal 避免 SVG/icon 继承大行高后贴基线，导致视觉中心偏上、连线看起来打在 prefix 底部 */
|
|
329
|
+
line-height: normal;
|
|
329
330
|
cursor: pointer;
|
|
330
331
|
align-items: center;
|
|
331
332
|
}
|
|
@@ -337,7 +338,7 @@
|
|
|
337
338
|
}
|
|
338
339
|
.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child::before {
|
|
339
340
|
position: absolute;
|
|
340
|
-
top:
|
|
341
|
+
top: 50%;
|
|
341
342
|
left: 0;
|
|
342
343
|
right: 0;
|
|
343
344
|
z-index: 1;
|
|
@@ -348,7 +349,7 @@
|
|
|
348
349
|
}
|
|
349
350
|
.bk-tree-node:not(.is-root).level-line::before {
|
|
350
351
|
position: absolute;
|
|
351
|
-
top:
|
|
352
|
+
top: 50%;
|
|
352
353
|
left: calc(0px - var(--indent) + 6px);
|
|
353
354
|
z-index: 1;
|
|
354
355
|
width: calc(var(--indent) - 6px);
|
|
@@ -362,7 +363,12 @@
|
|
|
362
363
|
}
|
|
363
364
|
.bk-tree-node .node-virtual-line {
|
|
364
365
|
position: absolute;
|
|
365
|
-
|
|
366
|
+
/*
|
|
367
|
+
* 竖线终点：当前行中线（与横向连线相接）
|
|
368
|
+
* 竖线起点：父级行中线 + 半个 prefix(14/2)，即父级 bk-node-prefix 下沿
|
|
369
|
+
* 避免 top=-50% 时竖线穿过父级展开图标中心造成「重合」
|
|
370
|
+
*/
|
|
371
|
+
top: calc(var(--lineHeight) / -2 + 7px);
|
|
366
372
|
bottom: 50%;
|
|
367
373
|
left: calc(var(--depth) * var(--indent) * -1 + 6px);
|
|
368
374
|
display: inline-block;
|
|
@@ -371,16 +377,23 @@
|
|
|
371
377
|
}
|
|
372
378
|
.bk-tree-node .bk-node-prefix {
|
|
373
379
|
display: flex;
|
|
380
|
+
flex-shrink: 0;
|
|
374
381
|
width: 14px;
|
|
375
382
|
height: 14px;
|
|
383
|
+
line-height: 1;
|
|
376
384
|
align-items: center;
|
|
377
385
|
justify-content: center;
|
|
378
|
-
transform: translateY(3px);
|
|
379
386
|
}
|
|
380
387
|
.bk-tree-node .bk-node-action {
|
|
388
|
+
display: inline-flex;
|
|
389
|
+
flex-shrink: 0;
|
|
390
|
+
align-items: center;
|
|
391
|
+
justify-content: center;
|
|
392
|
+
width: 14px;
|
|
393
|
+
height: 14px;
|
|
381
394
|
margin-right: 6px;
|
|
395
|
+
line-height: 1;
|
|
382
396
|
color: #979ba5;
|
|
383
|
-
min-width: 14px;
|
|
384
397
|
}
|
|
385
398
|
.bk-tree-node .bk-tree-icon {
|
|
386
399
|
margin: 0 6px 0 4px;
|
|
@@ -390,9 +403,13 @@
|
|
|
390
403
|
flex: 1;
|
|
391
404
|
align-items: center;
|
|
392
405
|
min-width: 0;
|
|
406
|
+
line-height: normal;
|
|
393
407
|
}
|
|
394
408
|
.bk-tree-node .bk-node-content .node-check-box {
|
|
395
409
|
display: inline-flex;
|
|
410
|
+
flex-shrink: 0;
|
|
411
|
+
align-items: center;
|
|
412
|
+
line-height: 1;
|
|
396
413
|
}
|
|
397
414
|
.bk-tree-node .bk-node-content .bk-checkbox {
|
|
398
415
|
margin: 0;
|
|
@@ -405,6 +422,7 @@
|
|
|
405
422
|
overflow: hidden;
|
|
406
423
|
text-overflow: ellipsis;
|
|
407
424
|
white-space: nowrap;
|
|
425
|
+
line-height: var(--lineHeight);
|
|
408
426
|
}
|
|
409
427
|
.bk-tree-node-draggable {
|
|
410
428
|
cursor: grab;
|