wunderbaum 0.3.3 → 0.3.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.
Files changed (16) hide show
  1. package/README.md +3 -3
  2. package/dist/wunderbaum.css +112 -66
  3. package/dist/wunderbaum.d.ts +637 -616
  4. package/dist/wunderbaum.esm.js +42 -18
  5. package/dist/wunderbaum.esm.min.js +16 -16
  6. package/dist/wunderbaum.esm.min.js.map +1 -1
  7. package/dist/wunderbaum.umd.js +42 -18
  8. package/dist/wunderbaum.umd.min.js +24 -24
  9. package/dist/wunderbaum.umd.min.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/types.ts +30 -4
  12. package/src/wb_ext_edit.ts +1 -2
  13. package/src/wb_node.ts +9 -6
  14. package/src/wb_options.ts +1 -12
  15. package/src/wunderbaum.scss +147 -75
  16. package/src/wunderbaum.ts +23 -0
package/README.md CHANGED
@@ -1,14 +1,14 @@
1
1
  # ![](docs/assets/tree_logo_32.png) wunderbaum
2
+
2
3
  [![GitHub version](https://img.shields.io/github/v/release/mar10/wunderbaum?display_name=tag&sort=semver)](https://github.com/mar10/wunderbaum/releases/latest)
4
+ [![Node.js CI](https://github.com/mar10/wunderbaum/actions/workflows/node.js.yml/badge.svg)](https://github.com/mar10/wunderbaum/actions/workflows/node.js.yml)
3
5
  [![Build Status](https://travis-ci.com/mar10/wunderbaum.svg?branch=main)](https://travis-ci.com/github/mar10/wunderbaum)
4
6
  [![npm](https://img.shields.io/npm/dm/wunderbaum.svg)](https://www.npmjs.com/package/wunderbaum)
5
7
  [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/wunderbaum/badge)](https://www.jsdelivr.com/package/npm/wunderbaum)
6
8
  [![Released with: grunt-yabs](https://img.shields.io/badge/released%20with-grunt--yabs-yellowgreen)](https://github.com/mar10/grunt-yabs)
7
9
  [![StackOverflow: wunderbaum](https://img.shields.io/badge/StackOverflow-wunderbaum-blue.svg)](https://stackoverflow.com/questions/tagged/wunderbaum)
8
10
 
9
-
10
- > Potential successor of [Fancytree](https://github.com/mar10/fancytree).<br>
11
- > **NOTE: Status _beta_. Do not use in production!**
11
+ > Potential successor of [Fancytree](https://github.com/mar10/fancytree).<br> > **NOTE: Status _beta_. Do not use in production!**
12
12
 
13
13
  [![Demo](docs/assets/teaser_2.png?raw=true)](https://mar10.github.io/wunderbaum/demo/)
14
14
 
package/dist/wunderbaum.css CHANGED
@@ -1,19 +1,65 @@
1
1
  /*!
2
2
  * Wunderbaum style sheet (generated from wunderbaum.scss)
3
3
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
4
- * v0.3.3, Wed, 07 Jun 2023 06:41:26 GMT (https://github.com/mar10/wunderbaum)
4
+ * v0.3.5, Mon, 19 Jun 2023 06:20:59 GMT (https://github.com/mar10/wunderbaum)
5
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: #ffffff;
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
+
6
53
  div.wunderbaum {
7
- box-sizing: border-box;
8
54
  height: 100%;
9
55
  min-height: 4px;
10
- background-color: white;
56
+ background-color: var(--wb-background-color);
11
57
  margin: 0;
12
58
  padding: 0;
13
- font-family: Helvetica, sans-serif;
59
+ font-family: var(--wb-font-stack);
14
60
  font-size: 14px;
15
- color: #56534c;
16
- border: 2px solid #56534c;
61
+ color: var(--wb-node-text-color);
62
+ border: 2px solid var(--wb-border-color);
17
63
  border-radius: 4px;
18
64
  background-clip: content-box;
19
65
  overflow-x: auto;
@@ -29,7 +75,7 @@ div.wunderbaum {
29
75
  /* Skeleton */
30
76
  /* Auto-hide checkboxes unless selected or hovered */ }
31
77
  div.wunderbaum:focus, div.wunderbaum:focus-within {
32
- border-color: #275dc5; }
78
+ border-color: var(--wb-focus-border-color); }
33
79
  div.wunderbaum.wb-disabled {
34
80
  opacity: 0.7;
35
81
  pointer-events: none; }
@@ -46,8 +92,8 @@ div.wunderbaum {
46
92
  div.wunderbaum div.wb-row {
47
93
  position: absolute;
48
94
  width: 100%;
49
- height: 22px;
50
- line-height: 22px;
95
+ height: var(--wb-row-outer-height);
96
+ line-height: var(--wb-row-outer-height);
51
97
  border: 1px solid transparent; }
52
98
  div.wunderbaum.wb-fixed-col {
53
99
  /* Sticky firdt column (header and nodes) */ }
@@ -55,49 +101,49 @@ div.wunderbaum {
55
101
  position: sticky;
56
102
  left: 0;
57
103
  z-index: 1;
58
- background-color: white; }
104
+ background-color: var(--wb-background-color); }
59
105
  div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type {
60
- background-color: #dedede; }
106
+ background-color: var(--wb-header-color); }
61
107
  div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
62
108
  div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
63
- background-color: #e5f3fb; }
109
+ background-color: var(--wb-active-color); }
64
110
  div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active:hover span.wb-col:first-of-type,
65
111
  div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected:hover span.wb-col:first-of-type {
66
- background-color: #dceff8; }
112
+ background-color: var(--wb-active-hover-color); }
67
113
  div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row:hover span.wb-col:first-of-type {
68
- background-color: #f7fcfe; }
114
+ background-color: var(--wb-hover-color); }
69
115
  div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
70
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,
71
117
  div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
72
- background-color: #f0f0f0;
73
- border-color: #acacac; }
118
+ background-color: var(--wb-active-color-grayscale);
119
+ border-color: var(--wb-active-border-color-grayscale); }
74
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,
75
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,
76
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 {
77
- background-color: #eaeaea; }
123
+ background-color: var(--wb-active-hover-color-grayscale); }
78
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 {
79
- background-color: #f0f0f0;
80
- border-color: #acacac; }
125
+ background-color: var(--wb-active-color-grayscale);
126
+ border-color: var(--wb-active-border-color-grayscale); }
81
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 {
82
- background-color: #eaeaea; }
128
+ background-color: var(--wb-active-hover-color-grayscale); }
83
129
  div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
84
- background-color: #f7f7f7; }
130
+ background-color: var(--wb-alternate-row-color); }
85
131
  div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
86
- background-color: #f3f3f3; }
132
+ background-color: var(--wb-alternate-row-color-hover); }
87
133
  div.wunderbaum div.wb-node-list div.wb-row:hover {
88
- background-color: #f7fcfe; }
134
+ background-color: var(--wb-hover-color); }
89
135
  div.wunderbaum div.wb-node-list div.wb-row.wb-active, div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
90
- background-color: #e5f3fb; }
136
+ background-color: var(--wb-active-color); }
91
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 {
92
- background-color: #dceff8; }
138
+ background-color: var(--wb-active-hover-color); }
93
139
  div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active) {
94
140
  border-style: dotted;
95
- border-color: #70c0e7; }
141
+ border-color: var(--wb-active-border-color); }
96
142
  div.wunderbaum div.wb-node-list div.wb-row.wb-active {
97
143
  border-style: solid;
98
- border-color: #70c0e7; }
144
+ border-color: var(--wb-active-border-color); }
99
145
  div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover {
100
- border-color: #26a0da; }
146
+ border-color: var(--wb-active-hover-border-color); }
101
147
  div.wunderbaum div.wb-node-list div.wb-row.wb-loading {
102
148
  font-style: italic; }
103
149
  div.wunderbaum div.wb-node-list div.wb-row.wb-busy,
@@ -107,13 +153,13 @@ div.wunderbaum {
107
153
  background: repeating-linear-gradient(45deg, transparent, transparent 3.88px, #dedede 3.88px, #dedede 7.78px);
108
154
  animation: wb-busy-animation 2s linear infinite; }
109
155
  div.wunderbaum div.wb-node-list div.wb-row.wb-error, div.wunderbaum div.wb-node-list div.wb-row.wb-status-error {
110
- color: #b5373b; }
156
+ color: var(--wb-error-color); }
111
157
  div.wunderbaum div.wb-header {
112
158
  position: sticky;
113
- height: 22px;
114
- border-bottom: 1px solid #56534c;
159
+ height: var(--wb-header-height);
160
+ border-bottom: 1px solid var(--wb-border-color);
115
161
  padding: 0;
116
- background-color: #dedede; }
162
+ background-color: var(--wb-header-color); }
117
163
  div.wunderbaum div.wb-header span.wb-col {
118
164
  font-weight: bold;
119
165
  overflow: visible; }
@@ -128,15 +174,15 @@ div.wunderbaum {
128
174
  right: -1px;
129
175
  width: 3px;
130
176
  border: none;
131
- border-right: 2px solid #56534c;
177
+ border-right: 2px solid var(--wb-border-color);
132
178
  height: 100%;
133
179
  cursor: col-resize; }
134
180
  div.wunderbaum span.wb-col {
135
181
  position: absolute;
136
182
  display: inline-block;
137
183
  overflow: hidden;
138
- height: 20px;
139
- line-height: 20px;
184
+ height: var(--wb-row-inner-height);
185
+ line-height: var(--wb-row-inner-height);
140
186
  padding: 0 2px;
141
187
  border-right: 1px solid #dedede;
142
188
  white-space: nowrap; }
@@ -149,16 +195,16 @@ div.wunderbaum {
149
195
  div.wunderbaum span.wb-node i.wb-expander,
150
196
  div.wunderbaum span.wb-node i.wb-icon,
151
197
  div.wunderbaum span.wb-node i.wb-indent {
152
- height: 20px;
153
- width: 20px;
154
- padding: 2px 2px;
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);
155
201
  display: inline-block; }
156
202
  div.wunderbaum span.wb-node i.bi::before {
157
203
  vertical-align: baseline; }
158
204
  div.wunderbaum span.wb-node img.wb-icon {
159
- width: 16px;
160
- height: 16px;
161
- padding: 2px 2px; }
205
+ width: var(--wb-icon-width);
206
+ height: var(--wb-icon-height);
207
+ padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x); }
162
208
  div.wunderbaum span.wb-node i.wb-indent::before {
163
209
  content: "\00a0"; }
164
210
  div.wunderbaum span.wb-node i.wb-expander.wb-spin,
@@ -175,15 +221,15 @@ div.wunderbaum {
175
221
  white-space: nowrap;
176
222
  text-overflow: ellipsis; }
177
223
  div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover {
178
- background-color: #c5c5c5; }
224
+ background-color: var(--wb-active-header-column-color); }
179
225
  div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active {
180
- background-color: #dceff8; }
226
+ background-color: var(--wb-active-hover-color); }
181
227
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row {
182
- border-bottom-color: #dedede; }
228
+ border-bottom-color: var(--wb-grid-color); }
183
229
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected) {
184
- background-color: #f7fcfe; }
230
+ background-color: var(--wb-hover-color); }
185
231
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active {
186
- border-bottom-color: #70c0e7; }
232
+ border-bottom-color: var(--wb-active-border-color); }
187
233
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col {
188
234
  border-right: 1px solid #dedede; }
189
235
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,
@@ -203,39 +249,39 @@ div.wunderbaum {
203
249
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="week"],
204
250
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select {
205
251
  width: 100%;
206
- max-height: 20px;
252
+ max-height: var(--wb-row-inner-height);
207
253
  border: none; }
208
254
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input:focus,
209
255
  div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select:focus {
210
256
  border: 1px dashed #70c0e7; }
211
257
  div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan).wb-active span.wb-col.wb-active {
212
- background-color: #b3b3b3; }
258
+ background-color: var(--wb-active-cell-color-grayscale); }
213
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 {
214
- background-color: #f7fcfe; }
260
+ background-color: var(--wb-active-column-color); }
215
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 {
216
- background-color: #f7fcfe; }
262
+ background-color: var(--wb-active-column-color); }
217
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 {
218
- background-color: #7dc6e9; }
264
+ background-color: var(--wb-active-cell-color); }
219
265
  div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
220
- background-color: #f7f7f7; }
266
+ background-color: var(--wb-alternate-row-color); }
221
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 {
222
- background-color: #f3f3f3; }
268
+ background-color: var(--wb-alternate-row-color-hover); }
223
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 {
224
- border-bottom-color: #dedede; }
270
+ border-bottom-color: var(--wb-grid-color-grayscale); }
225
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 {
226
- color: #dedede; }
272
+ color: var(--wb-filter-dim-color); }
227
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 {
228
- color: #868581; }
274
+ color: var(--wb-filter-submatch-color); }
229
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 {
230
- color: #56534c; }
276
+ color: var(--wb-node-text-color); }
231
277
  div.wunderbaum div.wb-row.wb-drag-source {
232
278
  opacity: 0.5; }
233
279
  div.wunderbaum div.wb-row.wb-drag-source .wb-node {
234
- background-color: #d3d2ce; }
280
+ background-color: var(--wb-drop-source-color); }
235
281
  div.wunderbaum div.wb-row.wb-drop-target {
236
282
  overflow: visible; }
237
283
  div.wunderbaum div.wb-row.wb-drop-target .wb-node {
238
- background-color: #d4ecf8;
284
+ background-color: var(--wb-drop-target-color);
239
285
  overflow: visible; }
240
286
  div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon {
241
287
  position: relative;
@@ -274,7 +320,7 @@ div.wunderbaum {
274
320
  div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,
275
321
  div.wunderbaum.wb-fade-expander [class*="wb-statusnode-"] i.wb-expander {
276
322
  transition: color 0.6s;
277
- color: #56534c; }
323
+ color: var(--wb-node-text-color); }
278
324
  div.wunderbaum div.wb-row.wb-skeleton span.wb-title,
279
325
  div.wunderbaum div.wb-row.wb-skeleton i.wb-icon {
280
326
  animation: wb-skeleton-animation 1s linear infinite alternate;
@@ -294,16 +340,16 @@ div.wunderbaum {
294
340
  text-align: center; }
295
341
 
296
342
  .wb-helper-disabled {
297
- color: #8c877c; }
343
+ color: var(--wb-dim-color); }
298
344
 
299
345
  .wb-helper-hidden {
300
346
  display: none; }
301
347
 
302
348
  .wb-helper-invalid {
303
- color: #b5373b; }
349
+ color: var(--wb-error-color); }
304
350
 
305
351
  .wb-helper-lazy-expander {
306
- color: #26a0da; }
352
+ color: var(--wb-bg-highlight-color); }
307
353
 
308
354
  .wb-helper-link {
309
355
  cursor: pointer; }
@@ -336,12 +382,12 @@ div.wunderbaum {
336
382
  * indeterminate -> checked -> unchecked -> indeterminate ...
337
383
  */
338
384
  .wb-col input[type="checkbox"]:indeterminate {
339
- color: #8c877c;
385
+ color: var(--wb-dim-color);
340
386
  background-color: red; }
341
387
 
342
388
  .wb-col input:invalid {
343
- color: #b5373b;
344
- background-color: #f5ddde; }
389
+ color: var(--wb-error-color);
390
+ background-color: var(--wb-error-background-color); }
345
391
 
346
392
  @keyframes wb-spin-animation {
347
393
  0% {