wunderbaum 0.3.2 → 0.3.4
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/wunderbaum.css +408 -0
- package/dist/wunderbaum.d.ts +8 -8
- package/dist/wunderbaum.esm.js +37 -20
- package/dist/wunderbaum.esm.min.js +16 -16
- package/dist/wunderbaum.esm.min.js.map +1 -1
- package/dist/wunderbaum.umd.js +37 -20
- package/dist/wunderbaum.umd.min.js +16 -16
- package/dist/wunderbaum.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/types.ts +30 -9
- package/src/wb_ext_edit.ts +1 -2
- package/src/wb_node.ts +10 -7
- package/src/wb_options.ts +1 -12
- package/src/wunderbaum.scss +145 -74
- package/src/wunderbaum.ts +18 -1
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Wunderbaum style sheet (generated from wunderbaum.scss)
|
|
3
|
+
* Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
|
|
4
|
+
* v0.3.4-0, Sun, 18 Jun 2023 16:04:04 GMT (https://github.com/mar10/wunderbaum)
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
--wb-font-stack: Helvetica, sans-serif;
|
|
8
|
+
--wb-error-color: #b5373b;
|
|
9
|
+
--wb-node-text-color: #56534c;
|
|
10
|
+
--wb-border-color: #56534c;
|
|
11
|
+
--wb-bg-highlight-color: #26a0da;
|
|
12
|
+
--wb-header-color: #dedede;
|
|
13
|
+
--wb-background-color: white;
|
|
14
|
+
--wb-alternate-row-color: #f7f7f7;
|
|
15
|
+
--wb-alternate-row-color-hover: #f3f3f3;
|
|
16
|
+
--wb-focus-border-color: #275dc5;
|
|
17
|
+
--wb-drop-source-color: #d3d2ce;
|
|
18
|
+
--wb-drop-target-color: #d4ecf8;
|
|
19
|
+
--wb-dim-color: #8c877c;
|
|
20
|
+
--wb-error-background-color: #f5ddde;
|
|
21
|
+
--wb-hover-color: #f7fcfe;
|
|
22
|
+
--wb-hover-border-color: #f7fcfe;
|
|
23
|
+
--wb-grid-color: #dedede;
|
|
24
|
+
--wb-active-color: #e5f3fb;
|
|
25
|
+
--wb-active-cell-color: #7dc6e9;
|
|
26
|
+
--wb-active-border-color: #70c0e7;
|
|
27
|
+
--wb-active-hover-color: #dceff8;
|
|
28
|
+
--wb-active-hover-border-color: #26a0da;
|
|
29
|
+
--wb-active-column-color: #f7fcfe;
|
|
30
|
+
--wb-active-header-column-color: #c5c5c5;
|
|
31
|
+
--wb-active-color-grayscale: #f0f0f0;
|
|
32
|
+
--wb-active-border-color-grayscale: #acacac;
|
|
33
|
+
--wb-active-hover-color-grayscale: #eaeaea;
|
|
34
|
+
--wb-active-cell-color-grayscale: #b3b3b3;
|
|
35
|
+
--wb-grid-color-grayscale: #dedede;
|
|
36
|
+
--wb-filter-dim-color: #dedede;
|
|
37
|
+
--wb-filter-submatch-color: #868581;
|
|
38
|
+
--wb-row-outer-height: 22px;
|
|
39
|
+
--wb-row-inner-height: 20px;
|
|
40
|
+
--wb-row-padding-y: 1px;
|
|
41
|
+
--wb-col-padding-x: 2px;
|
|
42
|
+
--wb-icon-outer-height: 20px;
|
|
43
|
+
--wb-icon-outer-width: 20px;
|
|
44
|
+
--wb-icon-height: 16px;
|
|
45
|
+
--wb-icon-width: 16px;
|
|
46
|
+
--wb-icon-padding-y: 2px;
|
|
47
|
+
--wb-icon-padding-x: 2px;
|
|
48
|
+
--wb-header-height: 22px; }
|
|
49
|
+
|
|
50
|
+
div.wunderbaum * {
|
|
51
|
+
box-sizing: border-box; }
|
|
52
|
+
|
|
53
|
+
div.wunderbaum {
|
|
54
|
+
height: 100%;
|
|
55
|
+
min-height: 4px;
|
|
56
|
+
background-color: var(--wb-background-color);
|
|
57
|
+
margin: 0;
|
|
58
|
+
padding: 0;
|
|
59
|
+
font-family: var(--wb-font-stack);
|
|
60
|
+
font-size: 14px;
|
|
61
|
+
color: var(--wb-node-text-color);
|
|
62
|
+
border: 2px solid var(--wb-border-color);
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
background-clip: content-box;
|
|
65
|
+
overflow-x: auto;
|
|
66
|
+
overflow-y: scroll;
|
|
67
|
+
/* --- FIXED-COLUMN --- */
|
|
68
|
+
/* Fixed column must be opaque, i.e. have the bg color set. */
|
|
69
|
+
/* --- GRID --- */
|
|
70
|
+
/* --- FILTER --- */
|
|
71
|
+
/* --- DND --- */
|
|
72
|
+
/* --- SPECIAL EFFECTS --- */
|
|
73
|
+
/* Colorize indentation levels. */
|
|
74
|
+
/* Fade out expanders, when container is not hovered or active */
|
|
75
|
+
/* Skeleton */
|
|
76
|
+
/* Auto-hide checkboxes unless selected or hovered */ }
|
|
77
|
+
div.wunderbaum:focus, div.wunderbaum:focus-within {
|
|
78
|
+
border-color: var(--wb-focus-border-color); }
|
|
79
|
+
div.wunderbaum.wb-disabled {
|
|
80
|
+
opacity: 0.7;
|
|
81
|
+
pointer-events: none; }
|
|
82
|
+
div.wunderbaum div.wb-list-container {
|
|
83
|
+
position: relative;
|
|
84
|
+
min-height: 4px; }
|
|
85
|
+
div.wunderbaum div.wb-header {
|
|
86
|
+
position: sticky;
|
|
87
|
+
top: 0;
|
|
88
|
+
z-index: 2; }
|
|
89
|
+
div.wunderbaum div.wb-header,
|
|
90
|
+
div.wunderbaum div.wb-list-container {
|
|
91
|
+
overflow: unset; }
|
|
92
|
+
div.wunderbaum div.wb-row {
|
|
93
|
+
position: absolute;
|
|
94
|
+
width: 100%;
|
|
95
|
+
height: var(--wb-row-outer-height);
|
|
96
|
+
line-height: var(--wb-row-outer-height);
|
|
97
|
+
border: 1px solid transparent; }
|
|
98
|
+
div.wunderbaum.wb-fixed-col {
|
|
99
|
+
/* Sticky firdt column (header and nodes) */ }
|
|
100
|
+
div.wunderbaum.wb-fixed-col span.wb-col:first-of-type {
|
|
101
|
+
position: sticky;
|
|
102
|
+
left: 0;
|
|
103
|
+
z-index: 1;
|
|
104
|
+
background-color: var(--wb-background-color); }
|
|
105
|
+
div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type {
|
|
106
|
+
background-color: var(--wb-header-color); }
|
|
107
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
|
|
108
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
|
|
109
|
+
background-color: var(--wb-active-color); }
|
|
110
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active:hover span.wb-col:first-of-type,
|
|
111
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected:hover span.wb-col:first-of-type {
|
|
112
|
+
background-color: var(--wb-active-hover-color); }
|
|
113
|
+
div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row:hover span.wb-col:first-of-type {
|
|
114
|
+
background-color: var(--wb-hover-color); }
|
|
115
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
|
|
116
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
|
|
117
|
+
div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
|
|
118
|
+
background-color: var(--wb-active-color-grayscale);
|
|
119
|
+
border-color: var(--wb-active-border-color-grayscale); }
|
|
120
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type,
|
|
121
|
+
div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type,
|
|
122
|
+
div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type {
|
|
123
|
+
background-color: var(--wb-active-hover-color-grayscale); }
|
|
124
|
+
div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected {
|
|
125
|
+
background-color: var(--wb-active-color-grayscale);
|
|
126
|
+
border-color: var(--wb-active-border-color-grayscale); }
|
|
127
|
+
div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover {
|
|
128
|
+
background-color: var(--wb-active-hover-color-grayscale); }
|
|
129
|
+
div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
|
|
130
|
+
background-color: var(--wb-alternate-row-color); }
|
|
131
|
+
div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
|
|
132
|
+
background-color: var(--wb-alternate-row-color-hover); }
|
|
133
|
+
div.wunderbaum div.wb-node-list div.wb-row:hover {
|
|
134
|
+
background-color: var(--wb-hover-color); }
|
|
135
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active, div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
|
|
136
|
+
background-color: var(--wb-active-color); }
|
|
137
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover {
|
|
138
|
+
background-color: var(--wb-active-hover-color); }
|
|
139
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active) {
|
|
140
|
+
border-style: dotted;
|
|
141
|
+
border-color: var(--wb-active-border-color); }
|
|
142
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active {
|
|
143
|
+
border-style: solid;
|
|
144
|
+
border-color: var(--wb-active-border-color); }
|
|
145
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover {
|
|
146
|
+
border-color: var(--wb-active-hover-border-color); }
|
|
147
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-loading {
|
|
148
|
+
font-style: italic; }
|
|
149
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-busy,
|
|
150
|
+
div.wunderbaum div.wb-node-list div.wb-row i.wb-busy,
|
|
151
|
+
div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-busy {
|
|
152
|
+
font-style: italic;
|
|
153
|
+
background: repeating-linear-gradient(45deg, transparent, transparent 3.88px, #dedede 3.88px, #dedede 7.78px);
|
|
154
|
+
animation: wb-busy-animation 2s linear infinite; }
|
|
155
|
+
div.wunderbaum div.wb-node-list div.wb-row.wb-error, div.wunderbaum div.wb-node-list div.wb-row.wb-status-error {
|
|
156
|
+
color: var(--wb-error-color); }
|
|
157
|
+
div.wunderbaum div.wb-header {
|
|
158
|
+
position: sticky;
|
|
159
|
+
height: var(--wb-header-height);
|
|
160
|
+
border-bottom: 1px solid var(--wb-border-color);
|
|
161
|
+
padding: 0;
|
|
162
|
+
background-color: var(--wb-header-color); }
|
|
163
|
+
div.wunderbaum div.wb-header span.wb-col {
|
|
164
|
+
font-weight: bold;
|
|
165
|
+
overflow: visible; }
|
|
166
|
+
div.wunderbaum div.wb-header span.wb-col-title {
|
|
167
|
+
width: 100%;
|
|
168
|
+
overflow: hidden;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
text-overflow: ellipsis; }
|
|
171
|
+
div.wunderbaum div.wb-header span.wb-col-resizer {
|
|
172
|
+
position: absolute;
|
|
173
|
+
top: 0;
|
|
174
|
+
right: -1px;
|
|
175
|
+
width: 3px;
|
|
176
|
+
border: none;
|
|
177
|
+
border-right: 2px solid var(--wb-border-color);
|
|
178
|
+
height: 100%;
|
|
179
|
+
cursor: col-resize; }
|
|
180
|
+
div.wunderbaum span.wb-col {
|
|
181
|
+
position: absolute;
|
|
182
|
+
display: inline-block;
|
|
183
|
+
overflow: hidden;
|
|
184
|
+
height: var(--wb-row-inner-height);
|
|
185
|
+
line-height: var(--wb-row-inner-height);
|
|
186
|
+
padding: 0 2px;
|
|
187
|
+
border-right: 1px solid #dedede;
|
|
188
|
+
white-space: nowrap; }
|
|
189
|
+
div.wunderbaum span.wb-col:last-of-type {
|
|
190
|
+
border-right: none; }
|
|
191
|
+
div.wunderbaum span.wb-node {
|
|
192
|
+
user-select: none;
|
|
193
|
+
/* Fix Bootstrap Icon alignment */ }
|
|
194
|
+
div.wunderbaum span.wb-node i.wb-checkbox,
|
|
195
|
+
div.wunderbaum span.wb-node i.wb-expander,
|
|
196
|
+
div.wunderbaum span.wb-node i.wb-icon,
|
|
197
|
+
div.wunderbaum span.wb-node i.wb-indent {
|
|
198
|
+
height: var(--wb-icon-outer-height);
|
|
199
|
+
width: var(--wb-icon-outer-width);
|
|
200
|
+
padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
|
|
201
|
+
display: inline-block; }
|
|
202
|
+
div.wunderbaum span.wb-node i.bi::before {
|
|
203
|
+
vertical-align: baseline; }
|
|
204
|
+
div.wunderbaum span.wb-node img.wb-icon {
|
|
205
|
+
width: var(--wb-icon-width);
|
|
206
|
+
height: var(--wb-icon-height);
|
|
207
|
+
padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x); }
|
|
208
|
+
div.wunderbaum span.wb-node i.wb-indent::before {
|
|
209
|
+
content: "\00a0"; }
|
|
210
|
+
div.wunderbaum span.wb-node i.wb-expander.wb-spin,
|
|
211
|
+
div.wunderbaum span.wb-node i.wb-icon.wb-spin {
|
|
212
|
+
height: unset;
|
|
213
|
+
width: unset;
|
|
214
|
+
padding: 0 3px;
|
|
215
|
+
animation: wb-spin-animation 2s linear infinite; }
|
|
216
|
+
div.wunderbaum span.wb-node span.wb-title {
|
|
217
|
+
min-width: 1em;
|
|
218
|
+
vertical-align: top;
|
|
219
|
+
overflow-x: hidden;
|
|
220
|
+
display: inline-block;
|
|
221
|
+
white-space: nowrap;
|
|
222
|
+
text-overflow: ellipsis; }
|
|
223
|
+
div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover {
|
|
224
|
+
background-color: var(--wb-active-header-column-color); }
|
|
225
|
+
div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active {
|
|
226
|
+
background-color: var(--wb-active-hover-color); }
|
|
227
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row {
|
|
228
|
+
border-bottom-color: var(--wb-grid-color); }
|
|
229
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected) {
|
|
230
|
+
background-color: var(--wb-hover-color); }
|
|
231
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active {
|
|
232
|
+
border-bottom-color: var(--wb-active-border-color); }
|
|
233
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col {
|
|
234
|
+
border-right: 1px solid #dedede; }
|
|
235
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,
|
|
236
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="color"],
|
|
237
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="date"],
|
|
238
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="datetime"],
|
|
239
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="datetime-local"],
|
|
240
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="email"],
|
|
241
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="month"],
|
|
242
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="number"],
|
|
243
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="password"],
|
|
244
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="search"],
|
|
245
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="tel"],
|
|
246
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="text"],
|
|
247
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="time"],
|
|
248
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="url"],
|
|
249
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="week"],
|
|
250
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select {
|
|
251
|
+
width: 100%;
|
|
252
|
+
max-height: var(--wb-row-inner-height);
|
|
253
|
+
border: none; }
|
|
254
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input:focus,
|
|
255
|
+
div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select:focus {
|
|
256
|
+
border: 1px dashed #70c0e7; }
|
|
257
|
+
div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan).wb-active span.wb-col.wb-active {
|
|
258
|
+
background-color: var(--wb-active-cell-color-grayscale); }
|
|
259
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active {
|
|
260
|
+
background-color: var(--wb-active-column-color); }
|
|
261
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active {
|
|
262
|
+
background-color: var(--wb-active-column-color); }
|
|
263
|
+
div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active {
|
|
264
|
+
background-color: var(--wb-active-cell-color); }
|
|
265
|
+
div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
|
|
266
|
+
background-color: var(--wb-alternate-row-color); }
|
|
267
|
+
div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
|
|
268
|
+
background-color: var(--wb-alternate-row-color-hover); }
|
|
269
|
+
div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row, div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row {
|
|
270
|
+
border-bottom-color: var(--wb-grid-color-grayscale); }
|
|
271
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row {
|
|
272
|
+
color: var(--wb-filter-dim-color); }
|
|
273
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch {
|
|
274
|
+
color: var(--wb-filter-submatch-color); }
|
|
275
|
+
div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match {
|
|
276
|
+
color: var(--wb-node-text-color); }
|
|
277
|
+
div.wunderbaum div.wb-row.wb-drag-source {
|
|
278
|
+
opacity: 0.5; }
|
|
279
|
+
div.wunderbaum div.wb-row.wb-drag-source .wb-node {
|
|
280
|
+
background-color: var(--wb-drop-source-color); }
|
|
281
|
+
div.wunderbaum div.wb-row.wb-drop-target {
|
|
282
|
+
overflow: visible; }
|
|
283
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node {
|
|
284
|
+
background-color: var(--wb-drop-target-color);
|
|
285
|
+
overflow: visible; }
|
|
286
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon {
|
|
287
|
+
position: relative;
|
|
288
|
+
overflow: visible; }
|
|
289
|
+
div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after {
|
|
290
|
+
position: absolute;
|
|
291
|
+
z-index: 1000;
|
|
292
|
+
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
|
|
293
|
+
left: 0;
|
|
294
|
+
top: 3px; }
|
|
295
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after,
|
|
296
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
|
|
297
|
+
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
|
|
298
|
+
left: 0;
|
|
299
|
+
top: -8px; }
|
|
300
|
+
div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
|
|
301
|
+
top: 14px; }
|
|
302
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 1),
|
|
303
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 1) {
|
|
304
|
+
background: #ffffc9; }
|
|
305
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 2),
|
|
306
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 2) {
|
|
307
|
+
background: #daffda; }
|
|
308
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 3),
|
|
309
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 3) {
|
|
310
|
+
background: #ffd9fe; }
|
|
311
|
+
div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 4),
|
|
312
|
+
div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 4) {
|
|
313
|
+
background: #ccfafa; }
|
|
314
|
+
div.wunderbaum.wb-fade-expander i.wb-expander {
|
|
315
|
+
transition: color 1.5s;
|
|
316
|
+
color: rgba(86, 83, 76, 0); }
|
|
317
|
+
div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander,
|
|
318
|
+
div.wunderbaum.wb-fade-expander:hover i.wb-expander,
|
|
319
|
+
div.wunderbaum.wb-fade-expander:focus i.wb-expander,
|
|
320
|
+
div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,
|
|
321
|
+
div.wunderbaum.wb-fade-expander [class*="wb-statusnode-"] i.wb-expander {
|
|
322
|
+
transition: color 0.6s;
|
|
323
|
+
color: var(--wb-node-text-color); }
|
|
324
|
+
div.wunderbaum div.wb-row.wb-skeleton span.wb-title,
|
|
325
|
+
div.wunderbaum div.wb-row.wb-skeleton i.wb-icon {
|
|
326
|
+
animation: wb-skeleton-animation 1s linear infinite alternate;
|
|
327
|
+
border-radius: 0.25em;
|
|
328
|
+
color: transparent;
|
|
329
|
+
opacity: 0.7; }
|
|
330
|
+
div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox {
|
|
331
|
+
visibility: hidden; }
|
|
332
|
+
div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,
|
|
333
|
+
div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox {
|
|
334
|
+
visibility: unset; }
|
|
335
|
+
div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox, div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox {
|
|
336
|
+
visibility: unset; }
|
|
337
|
+
|
|
338
|
+
/* --- TOOL CLASSES --- */
|
|
339
|
+
.wb-helper-center {
|
|
340
|
+
text-align: center; }
|
|
341
|
+
|
|
342
|
+
.wb-helper-disabled {
|
|
343
|
+
color: var(--wb-dim-color); }
|
|
344
|
+
|
|
345
|
+
.wb-helper-hidden {
|
|
346
|
+
display: none; }
|
|
347
|
+
|
|
348
|
+
.wb-helper-invalid {
|
|
349
|
+
color: var(--wb-error-color); }
|
|
350
|
+
|
|
351
|
+
.wb-helper-lazy-expander {
|
|
352
|
+
color: var(--wb-bg-highlight-color); }
|
|
353
|
+
|
|
354
|
+
.wb-helper-link {
|
|
355
|
+
cursor: pointer; }
|
|
356
|
+
|
|
357
|
+
.wb-no-select {
|
|
358
|
+
user-select: none;
|
|
359
|
+
-webkit-user-select: none; }
|
|
360
|
+
.wb-no-select span.wb-title {
|
|
361
|
+
user-select: contain;
|
|
362
|
+
-webkit-user-select: contain; }
|
|
363
|
+
|
|
364
|
+
/* RTL support */
|
|
365
|
+
.wb-helper-start,
|
|
366
|
+
.wb-helper-start > input {
|
|
367
|
+
text-align: left; }
|
|
368
|
+
|
|
369
|
+
.wb-helper-end,
|
|
370
|
+
.wb-helper-end > input {
|
|
371
|
+
text-align: right; }
|
|
372
|
+
|
|
373
|
+
.wb-rtl .wb-helper-start,
|
|
374
|
+
.wb-rtl .wb-helper-start > input {
|
|
375
|
+
text-align: right; }
|
|
376
|
+
|
|
377
|
+
.wb-rtl .wb-helper-end,
|
|
378
|
+
.wb-rtl .wb-helper-end > input {
|
|
379
|
+
text-align: left; }
|
|
380
|
+
|
|
381
|
+
/* Class 'wb-tristate' is used to mark checkboxes that should toggle like
|
|
382
|
+
* indeterminate -> checked -> unchecked -> indeterminate ...
|
|
383
|
+
*/
|
|
384
|
+
.wb-col input[type="checkbox"]:indeterminate {
|
|
385
|
+
color: var(--wb-dim-color);
|
|
386
|
+
background-color: red; }
|
|
387
|
+
|
|
388
|
+
.wb-col input:invalid {
|
|
389
|
+
color: var(--wb-error-color);
|
|
390
|
+
background-color: var(--wb-error-background-color); }
|
|
391
|
+
|
|
392
|
+
@keyframes wb-spin-animation {
|
|
393
|
+
0% {
|
|
394
|
+
transform: rotate(0deg); }
|
|
395
|
+
to {
|
|
396
|
+
transform: rotate(1turn); } }
|
|
397
|
+
|
|
398
|
+
@keyframes wb-skeleton-animation {
|
|
399
|
+
0% {
|
|
400
|
+
background-color: #a3b8c2; }
|
|
401
|
+
100% {
|
|
402
|
+
background-color: #f0f3f5; } }
|
|
403
|
+
|
|
404
|
+
@keyframes wb-busy-animation {
|
|
405
|
+
0% {
|
|
406
|
+
background-position: 0 0; }
|
|
407
|
+
100% {
|
|
408
|
+
background-position: 0 22px; } }
|
package/dist/wunderbaum.d.ts
CHANGED
|
@@ -1121,7 +1121,7 @@ declare module "wb_node" {
|
|
|
1121
1121
|
* @param {function} callback the callback function.
|
|
1122
1122
|
* Return false to stop iteration, return "skip" to skip this node and
|
|
1123
1123
|
* its children only.
|
|
1124
|
-
* @see {@link WunderbaumNode
|
|
1124
|
+
* @see {@link IterableIterator<WunderbaumNode>}, {@link Wunderbaum.visit}.
|
|
1125
1125
|
*/
|
|
1126
1126
|
visit(callback: NodeVisitCallback, includeSelf?: boolean): NodeVisitResponse;
|
|
1127
1127
|
/** Call fn(node) for all parent nodes, bottom-up, including invisible system root.<br>
|
|
@@ -1225,7 +1225,7 @@ declare module "types" {
|
|
|
1225
1225
|
event: KeyboardEvent;
|
|
1226
1226
|
node: WunderbaumNode;
|
|
1227
1227
|
info: WbEventInfo;
|
|
1228
|
-
/** Canical name of the key including modifiers. @see {@link eventToString} */
|
|
1228
|
+
/** Canical name of the key including modifiers. @see {@link util.eventToString} */
|
|
1229
1229
|
eventName: string;
|
|
1230
1230
|
}
|
|
1231
1231
|
export interface WbInitEventType extends WbTreeEventType {
|
|
@@ -1282,7 +1282,7 @@ declare module "types" {
|
|
|
1282
1282
|
};
|
|
1283
1283
|
/**
|
|
1284
1284
|
* Column type definitions.
|
|
1285
|
-
* @see {@link
|
|
1285
|
+
* @see {@link Wunderbaum.columns}
|
|
1286
1286
|
*/
|
|
1287
1287
|
export interface ColumnDefinition {
|
|
1288
1288
|
/** Column ID as defined in `tree.columns` definition ("*" for title column). */
|
|
@@ -1448,7 +1448,7 @@ declare module "types" {
|
|
|
1448
1448
|
/** Do not send events. @default false */
|
|
1449
1449
|
noEvents?: boolean;
|
|
1450
1450
|
}
|
|
1451
|
-
/** Possible values for {@link
|
|
1451
|
+
/** Possible values for {@link WunderbaumNode.navigate()}. */
|
|
1452
1452
|
export interface NavigateOptions {
|
|
1453
1453
|
/** Activate the new node (otherwise focus only). @default true */
|
|
1454
1454
|
activate?: boolean;
|
|
@@ -1472,7 +1472,7 @@ declare module "types" {
|
|
|
1472
1472
|
/** @internal. @default true */
|
|
1473
1473
|
resizeCols?: boolean;
|
|
1474
1474
|
}
|
|
1475
|
-
/** Possible values for {@link scrollIntoView()} `options` argument. */
|
|
1475
|
+
/** Possible values for {@link WunderbaumNode.scrollIntoView()} `options` argument. */
|
|
1476
1476
|
export interface ScrollIntoViewOptions {
|
|
1477
1477
|
/** Do not animate (currently not implemented). @default false */
|
|
1478
1478
|
noAnimation?: boolean;
|
|
@@ -1500,12 +1500,12 @@ declare module "types" {
|
|
|
1500
1500
|
focusTree?: boolean;
|
|
1501
1501
|
/** Optional original event that will be passed to the (de)activate handler. */
|
|
1502
1502
|
event?: Event;
|
|
1503
|
-
/** Call {@link setColumn}. */
|
|
1503
|
+
/** Call {@link Wunderbaum.setColumn}. */
|
|
1504
1504
|
colIdx?: number;
|
|
1505
1505
|
}
|
|
1506
1506
|
/** Possible values for {@link WunderbaumNode.setExpanded()} `options` argument. */
|
|
1507
1507
|
export interface SetExpandedOptions {
|
|
1508
|
-
/** Ignore {@link minExpandLevel}. @default false */
|
|
1508
|
+
/** Ignore {@link WunderbaumOptions.minExpandLevel}. @default false */
|
|
1509
1509
|
force?: boolean;
|
|
1510
1510
|
/** Immediately update viewport (async otherwise). @default false */
|
|
1511
1511
|
immediate?: boolean;
|
|
@@ -2424,7 +2424,7 @@ declare module "wunderbaum" {
|
|
|
2424
2424
|
protected _updateRows(options?: any): boolean;
|
|
2425
2425
|
/**
|
|
2426
2426
|
* Call `callback(node)` for all nodes in hierarchical order (depth-first, pre-order).
|
|
2427
|
-
* @see {@link
|
|
2427
|
+
* @see {@link IterableIterator<WunderbaumNode>}, {@link WunderbaumNode.visit}.
|
|
2428
2428
|
*
|
|
2429
2429
|
* @param {function} callback the callback function.
|
|
2430
2430
|
* Return false to stop iteration, return "skip" to skip this node and
|