hy-virtual-tree 1.1.43 → 1.1.44
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 +9 -0
- package/dist/index.css +139 -2
- package/dist/index.js +798 -210
- package/package.json +2 -4
package/CHANGELOG.md
CHANGED
package/dist/index.css
CHANGED
|
@@ -1,3 +1,82 @@
|
|
|
1
|
+
.hy-tooltip {
|
|
2
|
+
--hy-tooltip-bg: #1C324B;
|
|
3
|
+
position: absolute;
|
|
4
|
+
border-radius: 4px;
|
|
5
|
+
padding: 7px 9px;
|
|
6
|
+
z-index: 2000;
|
|
7
|
+
font-size: 12px;
|
|
8
|
+
line-height: 20px;
|
|
9
|
+
min-width: 10px;
|
|
10
|
+
overflow-wrap: break-word;
|
|
11
|
+
word-break: normal;
|
|
12
|
+
visibility: visible;
|
|
13
|
+
color: #fff;
|
|
14
|
+
background: var(--hy-tooltip-bg);
|
|
15
|
+
border: 1px solid #375C86;
|
|
16
|
+
transform: translateX(-50%) translateY(calc(-100% - 10px));
|
|
17
|
+
}
|
|
18
|
+
.hy-tooltip.top .hy-popper__arrow {
|
|
19
|
+
left: 50%;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
transform: translateY(50%) translateX(-50%);
|
|
22
|
+
}
|
|
23
|
+
.hy-tooltip.top .hy-popper__arrow::before {
|
|
24
|
+
border-right: 1px solid #375C86;
|
|
25
|
+
border-bottom: 1px solid #375C86;
|
|
26
|
+
}
|
|
27
|
+
.hy-tooltip.bottom {
|
|
28
|
+
transform: translateX(-50%) translateY(10px);
|
|
29
|
+
}
|
|
30
|
+
.hy-tooltip.bottom .hy-popper__arrow {
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 50%;
|
|
33
|
+
transform: translateY(-50%) translateX(-50%);
|
|
34
|
+
}
|
|
35
|
+
.hy-tooltip.bottom .hy-popper__arrow::before {
|
|
36
|
+
border-top: 1px solid #375C86;
|
|
37
|
+
border-left: 1px solid #375C86;
|
|
38
|
+
}
|
|
39
|
+
.hy-tooltip.left {
|
|
40
|
+
transform: translateX(calc(-100% - 10px)) translateY(-50%);
|
|
41
|
+
}
|
|
42
|
+
.hy-tooltip.left .hy-popper__arrow {
|
|
43
|
+
top: 50%;
|
|
44
|
+
right: 0;
|
|
45
|
+
transform: translateY(-50%) translateX(50%);
|
|
46
|
+
}
|
|
47
|
+
.hy-tooltip.left .hy-popper__arrow::before {
|
|
48
|
+
border-right: 1px solid #375C86;
|
|
49
|
+
border-top: 1px solid #375C86;
|
|
50
|
+
}
|
|
51
|
+
.hy-tooltip.right {
|
|
52
|
+
transform: translateX(10px) translateY(-50%);
|
|
53
|
+
}
|
|
54
|
+
.hy-tooltip.right .hy-popper__arrow {
|
|
55
|
+
top: 50%;
|
|
56
|
+
left: 0;
|
|
57
|
+
transform: translateY(-50%) translateX(-50%);
|
|
58
|
+
}
|
|
59
|
+
.hy-tooltip.right .hy-popper__arrow::before {
|
|
60
|
+
border-left: 1px solid #375C86;
|
|
61
|
+
border-bottom: 1px solid #375C86;
|
|
62
|
+
}
|
|
63
|
+
.hy-tooltip .hy-popper__arrow {
|
|
64
|
+
position: absolute;
|
|
65
|
+
width: 10px;
|
|
66
|
+
height: 10px;
|
|
67
|
+
z-index: -1;
|
|
68
|
+
}
|
|
69
|
+
.hy-tooltip .hy-popper__arrow::before {
|
|
70
|
+
position: absolute;
|
|
71
|
+
width: 10px;
|
|
72
|
+
height: 10px;
|
|
73
|
+
z-index: -1;
|
|
74
|
+
content: " ";
|
|
75
|
+
transform: rotate(45deg);
|
|
76
|
+
background: var(--hy-tooltip-bg);
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
}
|
|
79
|
+
|
|
1
80
|
.hy-icon {
|
|
2
81
|
display: flex;
|
|
3
82
|
align-items: center;
|
|
@@ -59,7 +138,7 @@
|
|
|
59
138
|
}
|
|
60
139
|
.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner {
|
|
61
140
|
background-color: var(--hy-checkbox-checked-bg-color);
|
|
62
|
-
box-shadow: 0 0
|
|
141
|
+
box-shadow: 0 0 5px 1px var(--hy-color-primary);
|
|
63
142
|
border-color: var(--hy-checkbox-checked-input-border-color);
|
|
64
143
|
}
|
|
65
144
|
.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner::after {
|
|
@@ -230,7 +309,11 @@
|
|
|
230
309
|
--hy-color-primary: #2df2ff;
|
|
231
310
|
--hy-color-danger: #f56c6c;
|
|
232
311
|
--hy-color-success: #2ce898;
|
|
312
|
+
--hy-color-placeholder: #909399;
|
|
233
313
|
--hy-color-gradient: linear-gradient(270deg, #27acff 0%, #2ddbf4 100%);
|
|
314
|
+
--hy-tree-item-gap: 10px;
|
|
315
|
+
--hy-tree-item-height: 30px;
|
|
316
|
+
--hy-tree-channel-bg-color: '#10263B';
|
|
234
317
|
}
|
|
235
318
|
.hy-tree > div {
|
|
236
319
|
padding: 0 10px;
|
|
@@ -288,12 +371,21 @@
|
|
|
288
371
|
transition: all 0.3s linear;
|
|
289
372
|
}
|
|
290
373
|
.hy-tree .hy-tree-icon {
|
|
291
|
-
margin-right:
|
|
374
|
+
margin-right: 6px;
|
|
292
375
|
flex-shrink: 0;
|
|
293
376
|
display: flex;
|
|
294
377
|
align-items: center;
|
|
295
378
|
justify-content: center;
|
|
296
379
|
}
|
|
380
|
+
.hy-tree .hy-tree-icon.online {
|
|
381
|
+
color: var(--hy-color-success);
|
|
382
|
+
}
|
|
383
|
+
.hy-tree .hy-tree-icon.offline {
|
|
384
|
+
color: var(--hy-color-placeholder);
|
|
385
|
+
}
|
|
386
|
+
.hy-tree .hy-tree-icon.monitor {
|
|
387
|
+
color: var(--hy-color-primary);
|
|
388
|
+
}
|
|
297
389
|
.hy-tree .hy-tree-node__content {
|
|
298
390
|
white-space: nowrap;
|
|
299
391
|
overflow: hidden;
|
|
@@ -341,3 +433,48 @@
|
|
|
341
433
|
-webkit-background-clip: text;
|
|
342
434
|
-webkit-text-fill-color: transparent;
|
|
343
435
|
}
|
|
436
|
+
.hy-tree .hy-tree-channel-node {
|
|
437
|
+
background-color: var(--hy-tree-channel-bg-color);
|
|
438
|
+
}
|
|
439
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container {
|
|
440
|
+
background-color: transparent !important;
|
|
441
|
+
}
|
|
442
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand {
|
|
443
|
+
width: 24px;
|
|
444
|
+
position: relative;
|
|
445
|
+
margin-right: 0;
|
|
446
|
+
}
|
|
447
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::before {
|
|
448
|
+
display: block;
|
|
449
|
+
content: '';
|
|
450
|
+
width: 1px;
|
|
451
|
+
height: calc(var(--hy-tree-item-height) + var(--hy-tree-item-gap));
|
|
452
|
+
background-image: linear-gradient(to bottom, transparent 0px, transparent 2px, #5E9DB4 2px, #5E9DB4 4px);
|
|
453
|
+
background-size: 100% 4px;
|
|
454
|
+
background-repeat: repeat;
|
|
455
|
+
position: absolute;
|
|
456
|
+
left: 7px;
|
|
457
|
+
transform: translateY(-50%);
|
|
458
|
+
}
|
|
459
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::after {
|
|
460
|
+
display: block;
|
|
461
|
+
content: '';
|
|
462
|
+
height: 1px;
|
|
463
|
+
background-image: linear-gradient(to right, transparent 0px, transparent 2px, #5E9DB4 2px, #5E9DB4 4px);
|
|
464
|
+
background-size: 4px 100%;
|
|
465
|
+
background-repeat: repeat;
|
|
466
|
+
position: absolute;
|
|
467
|
+
top: 50%;
|
|
468
|
+
left: 6px;
|
|
469
|
+
right: 0;
|
|
470
|
+
transform: translateY(-50%);
|
|
471
|
+
}
|
|
472
|
+
.hy-tree .hy-tree-node:not(.hy-tree-channel-node):has(+ .hy-tree-channel-node) {
|
|
473
|
+
background-image: linear-gradient(to bottom, transparent 50%, var(--hy-tree-channel-bg-color) 50%, var(--hy-tree-channel-bg-color) 100%);
|
|
474
|
+
}
|
|
475
|
+
.hy-tree .hy-tree-node:not(.hy-tree-channel-node) + .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::before {
|
|
476
|
+
height: calc(var(--hy-tree-item-height) - var(--hy-tree-item-gap) / 2);
|
|
477
|
+
}
|
|
478
|
+
.hy-tree .hy-tree-channel-node:has( + .hy-tree-node:not(.hy-tree-channel-node)) {
|
|
479
|
+
background: linear-gradient(to bottom, var(--hy-tree-channel-bg-color) 0%, var(--hy-tree-channel-bg-color) calc(100% - var(--hy-tree-item-gap)), transparent calc(100% - var(--hy-tree-item-gap)));
|
|
480
|
+
}
|