@vuu-ui/vuu-table 0.6.21-debug → 0.6.21

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/index.css CHANGED
@@ -1,514 +1,2 @@
1
- /* src/TableCell.css */
2
- .vuuTable {
3
- --cell-outline-width: 2px;
4
- user-select: none;
5
- }
6
- .vuuTable-table td {
7
- --saltEditableLabel-height: 17px;
8
- --saltInput-height: 17px;
9
- --saltInput-minHeight: 17px;
10
- border-right: 1px solid var(--vuuTableCell-border-rightColor);
11
- border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);
12
- color: var(--salt-text-primary-foreground);
13
- cursor: default;
14
- height: var(--vuuTable-rowHeight);
15
- line-height: calc(var(--vuuTable-rowHeight) - 1px);
16
- overflow: hidden;
17
- padding: 0 5px;
18
- }
19
- .vuuTable th:focus,
20
- .vuuTable td:focus {
21
- outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));
22
- outline-offset: calc(var(--cell-outline-width) * -1);
23
- box-shadow: inset 0 0 0 var(--cell-outline-width) white;
24
- border-bottom: none;
25
- }
26
- .vuuTable th:focus .vuuTable-headerCell-inner {
27
- padding-bottom: var(--cell-outline-width);
28
- }
29
- .vuuTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner {
30
- --columnResizer-color: transparent;
31
- }
32
- .vuuTable td:focus {
33
- border-right: none;
34
- padding-bottom: 1px;
35
- }
36
- td[data-editable=true] {
37
- --salt-text-fontSize: 10px;
38
- --vuu-icon-size: 5px;
39
- position: relative;
40
- }
41
- td[data-editable=true]:after {
42
- top: 0;
43
- content: "";
44
- background-color: var(--salt-text-secondary-foreground, black);
45
- left: 0;
46
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
47
- -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
48
- mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
49
- mask-repeat: no-repeat;
50
- -webkit-mask-repeat: no-repeat;
51
- position: absolute;
52
- transform: rotate(180deg);
53
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
54
- }
55
- td:focus[data-editable],
56
- td:focus-within[data-editable],
57
- td:has(.saltEditableLabel-editing) {
58
- outline: solid var(--salt-color-blue-400) 1px;
59
- background-color: white;
60
- outline-offset: -1px;
61
- }
62
- td:focus[data-editable=true]:after,
63
- td:has(.saltEditableLabel):after {
64
- background-color: var(--salt-color-blue-400);
65
- left: 1px;
66
- top: 1px;
67
- }
68
-
69
- /* src/TableGroupCell.css */
70
- .vuuTableGroupCell {
71
- --spacer-width: 20px;
72
- --toggle-icon-transform: var(--row-toggle-icon-transform, none);
73
- --vuu-icon-width: 18px;
74
- display: flex;
75
- align-items: center;
76
- }
77
- .vuuTableGroupCell-spacer {
78
- height: 100%;
79
- position: relative;
80
- width: var(--spacer-width);
81
- }
82
- .vuuTableGroupCell-spacer:after {
83
- background: var(--salt-container-primary-borderColor);
84
- content: "";
85
- position: absolute;
86
- top: 0;
87
- bottom: -1px;
88
- left: 9px;
89
- width: 1px;
90
- }
91
- .vuuTableGroupCell-toggle {
92
- transition: transform 0.25s;
93
- transform: var(--toggle-icon-transform);
94
- }
95
-
96
- /* src/TableRow.css */
97
- .vuuTableRow {
98
- background: transparent;
99
- }
100
- .vuuTableRow-even {
101
- --row-background: var(--row-background-even);
102
- }
103
- .vuuTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {
104
- background-color: var(--row-background);
105
- }
106
- .vuuTableRow-expanded {
107
- --row-toggle-icon-transform: rotate(90deg);
108
- }
109
- .vuuTableRow[aria-selected] {
110
- background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));
111
- --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
112
- }
113
- .vuuTableRow-preSelected {
114
- --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
115
- }
116
-
117
- /* src/ColumnResizer.css */
118
- .vuuColumnResizer {
119
- cursor: col-resize;
120
- margin-left: auto;
121
- width: 4px;
122
- }
123
- .vuuColumnResizer:after {
124
- content: "";
125
- position: absolute;
126
- width: var(--columnResizer-width, 1px);
127
- top: 0;
128
- bottom: 0;
129
- right: 0;
130
- background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
131
- height: var(--columnResizer-height, 100%);
132
- }
133
-
134
- /* src/SortIndicator.css */
135
- .vuuSortIndicator {
136
- --menu-icon-size: 18px;
137
- --menu-item-icon-color: black;
138
- display: flex;
139
- flex-direction: column;
140
- position: relative;
141
- width: 18px;
142
- }
143
- .vuuSortPosition {
144
- font-size: 10px;
145
- line-height: 10px;
146
- text-align: center;
147
- }
148
-
149
- /* src/TableHeaderCell.css */
150
- .vuuTable-heading:nth-child(2) {
151
- --heading-top: calc(var(--header-height));
152
- }
153
- .vuuTable-heading:nth-child(3) {
154
- --heading-top: calc(var(--header-height) * 2);
155
- }
156
- .vuuTable-heading:nth-child(3) {
157
- --heading-top: calc(var(--header-height) * 3);
158
- }
159
- .vuuTable-headingCell {
160
- background: var(--dataTable-background);
161
- border-color: var(--salt-separable-tertiary-borderColor);
162
- border-style: solid solid solid none;
163
- border-width: 1px;
164
- color: var(--salt-text-secondary-foreground);
165
- height: var(--vuuTableHeaderHeight);
166
- padding: 0 !important;
167
- position: sticky;
168
- top: var(--heading-top, 0);
169
- z-index: 1;
170
- }
171
- .vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {
172
- border-bottom-color: transparent;
173
- }
174
- .vuuTable-headerCell {
175
- --cell-align: "flex-start";
176
- text-align: left;
177
- background: var(--dataTable-background);
178
- border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);
179
- color: var(--salt-text-secondary-foreground);
180
- cursor: default;
181
- padding: 0 !important;
182
- position: sticky;
183
- top: calc(var(--total-header-height) - var(--header-height));
184
- height: var(--vuuTableHeaderHeight);
185
- z-index: 1;
186
- }
187
- .vuuTable-headerCell-right {
188
- --cell-align: flex-end;
189
- }
190
- .vuuTable-headerCell-inner {
191
- align-items: stretch;
192
- display: flex;
193
- height: 100%;
194
- padding: 0 0 0 3px;
195
- }
196
- .vuuTable-headerCell-inner:has(.vuuFilterIndicator) {
197
- padding-left: 0;
198
- }
199
- .vuuTable-headerCell-label {
200
- align-items: center;
201
- justify-content: var(--cell-align);
202
- display: flex;
203
- flex: 1 1 auto;
204
- }
205
- .vuuTable-headerCell-resizing {
206
- --columnResizer-color: var(--salt-color-blue-500);
207
- --columnResizer-height: var(--table-height);
208
- --columnResizer-width: 2px;
209
- }
210
- .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {
211
- box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.4);
212
- content: "";
213
- position: absolute;
214
- width: 1px;
215
- background-color: transparent;
216
- height: var(--table-height);
217
- top: 0;
218
- right: 0px;
219
- }
220
- .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {
221
- box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.3);
222
- content: "";
223
- position: absolute;
224
- width: 1px;
225
- background-color: transparent;
226
- height: var(--table-height);
227
- top: 0;
228
- left: 0px;
229
- }
230
-
231
- /* src/filter-indicator.css */
232
- .vuuFilterIndicator {
233
- --menu-icon-size: 12px;
234
- --menu-item-icon-color: black;
235
- align-items: center;
236
- cursor: pointer;
237
- display: flex;
238
- flex: 0 0 18px;
239
- flex-direction: column;
240
- justify-content: center;
241
- position: relative;
242
- }
243
- .vuuFilterIndicator + .vuuTable-headerCell-inner {
244
- padding-left: 0;
245
- }
246
-
247
- /* src/TableGroupHeaderCell.css */
248
- .salt-theme {
249
- --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>');
250
- }
251
- .vuuTable-groupHeaderCell {
252
- --cell-align: "flex-start";
253
- text-align: left;
254
- background: var(--dataTable-background);
255
- border-right: 1px solid var(--salt-separable-tertiary-borderColor);
256
- border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);
257
- color: var(--salt-text-secondary-foreground);
258
- cursor: default;
259
- padding: 0 !important;
260
- position: sticky;
261
- top: 0;
262
- height: var(--vuuTableHeaderHeight);
263
- z-index: 1;
264
- }
265
- .vuuTable-groupHeaderCell-inner {
266
- display: flex;
267
- height: 100%;
268
- }
269
- .vuuTable-groupHeaderCell-label {
270
- align-items: center;
271
- display: flex;
272
- flex: 0 0 auto;
273
- }
274
- .vuuTable-groupHeaderCell-col {
275
- align-items: center;
276
- background-color: inherit;
277
- display: inline-flex;
278
- flex: 0 1 auto;
279
- height: calc(var(--vuuTableHeaderHeight) - 4px);
280
- justify-content: space-between;
281
- padding-right: 8px;
282
- position: relative;
283
- }
284
- .vuuTable-groupHeaderCell-close {
285
- --vuu-icon-height: 18px;
286
- --vuu-icon-width: 18px;
287
- cursor: pointer;
288
- left: 3px;
289
- }
290
- .vuuTable-groupHeaderCell-col:nth-child(odd) {
291
- background-color: var(--salt-color-gray-50);
292
- }
293
- .vuuTable-groupHeaderCell-col:nth-child(even) {
294
- background-color: var(--salt-color-gray-40);
295
- }
296
- .vuuTable-groupHeaderCell-col:first-child {
297
- clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
298
- padding-left: 3px;
299
- z-index: 1;
300
- }
301
- .vuuTable-groupHeaderCell-col:not(:first-child) {
302
- margin-left: -6px;
303
- padding-left: 12px;
304
- clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
305
- }
306
- .vuuTable-groupHeaderCell-resizing {
307
- --columnResizer-color: var(--salt-color-blue-500);
308
- --columnResizer-height: var(--table-height);
309
- --columnResizer-width: 2px;
310
- }
311
- .vuuTable-groupHeaderCell-pending {
312
- --pending-content: "";
313
- }
314
- .vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after {
315
- content: var(--pending-content);
316
- width: 24px;
317
- height: 24px;
318
- background-image: var(--svg-spinner);
319
- background-repeat: no-repeat;
320
- background-size: cover;
321
- }
322
-
323
- /* src/Table.css */
324
- .vuuTable {
325
- --dataTable-background: var(--salt-container-primary-background, inherit);
326
- --row-background-even: var(--dataTable-background);
327
- --row-background-odd: var(--dataTable-background);
328
- --table-background: var(--dataTable-background);
329
- background-color: var(--dataTable-background);
330
- position: relative;
331
- }
332
- .vuuTable-zebra {
333
- --row-background-even: var(--salt-container-secondary-background);
334
- --table-background: 0 var(--header-height) repeating-linear-gradient( to bottom, var(--salt-container-secondary-background), var(--salt-container-secondary-background) var(--row-height), var(--dataTable-background) var(--row-height), var(--dataTable-background) calc(var(--row-height) *2));
335
- }
336
- .vuuTable-loading .vuuTable-table {
337
- --skeleton-height: 20px;
338
- --skeleton-width: calc(var(--content-width) - 8px);
339
- --skeleton-left: 4px;
340
- --skeleton-row-height: 16px;
341
- --skeleton-size: var(--skeleton-width) var(--skeleton-height);
342
- --skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );
343
- --skeleton-background-image: var(--skeleton-row);
344
- background-image: var(--skeleton-background-image);
345
- background-repeat: repeat-y;
346
- background-size: var(--skeleton-size);
347
- background-position-x: var(--skeleton-left);
348
- background-position-y: 27px;
349
- }
350
- .vuuTable-contentContainer {
351
- --vuuTable-contentHeight: var(--content-height, "auto");
352
- --vuuTable-contentWidth: var(--content-width, "auto");
353
- --vuuTableHeaderHeight: var(--header-height, 30px);
354
- --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));
355
- --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);
356
- --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);
357
- --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));
358
- background-color: var(--salt-container-primary-background);
359
- height: var(--vuuTable-height);
360
- position: relative;
361
- overflow: auto;
362
- overscroll-behavior: none;
363
- width: var(--vuuTable-width);
364
- }
365
- .vuuTable-contentContainer::-webkit-scrollbar {
366
- display: none;
367
- }
368
- .vuuTable-scrollbarContainer {
369
- --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));
370
- border-left: solid 1px var(--salt-container-primary-borderColor);
371
- border-top: solid 1px var(--salt-container-primary-borderColor);
372
- overflow: auto;
373
- position: absolute;
374
- height: calc(var(--table-height) - var(--total-header-height) + 1px);
375
- width: calc(var(--table-width) - var(--pinned-width-left) + 1px);
376
- }
377
- .vuuTable-scrollContainerHeader {
378
- background: #777;
379
- height: var(--header-height);
380
- position: fixed;
381
- top: 0;
382
- right: 0;
383
- width: var(--vuuTable-scrollbarSize);
384
- }
385
- .vuuTable-scrollContainerFooter {
386
- background-color: green;
387
- height: var(--vuuTable-scrollbarSize);
388
- position: fixed;
389
- bottom: 0;
390
- left: 0;
391
- width: var(--pinned-width-left);
392
- }
393
- .vuuTable-scrollContent {
394
- position: absolute;
395
- height: var(--content-height);
396
- width: var(--scroll-content-width, var(--content-width));
397
- }
398
- .vuuTable-tableContainer {
399
- background-color: var(--dataTable-background);
400
- border-bottom: solid 1px var(--salt-container-primary-borderColor);
401
- height: calc(var(--table-height) - var(--scrollbar-size));
402
- left: 0px;
403
- overflow: hidden;
404
- position: sticky;
405
- top: 0px;
406
- width: calc(var(--table-width) - var(--scrollbar-size));
407
- white-space: nowrap;
408
- }
409
- .vuuTable-table {
410
- --vuuTable-rowHeight: var(--row-height);
411
- --vuuTableCell-border-bottomColor: transparent;
412
- --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);
413
- position: absolute;
414
- top: 0;
415
- left: 0;
416
- background: var(--table-background);
417
- border-collapse: separate;
418
- border-spacing: 0;
419
- border-left: 1px solid #ccc;
420
- border: none;
421
- font-size: var(--vuuTable-font-size, 10px);
422
- margin: 0;
423
- min-height: 100%;
424
- table-layout: fixed;
425
- width: var(--vuuTable-contentWidth);
426
- }
427
- .vuuTable-columnBased {
428
- display: inline-table;
429
- height: var(--vuuTable-height);
430
- position: static;
431
- }
432
- .vuuTable-filler {
433
- height: var(--filler-height);
434
- }
435
- :is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
436
- position: sticky;
437
- }
438
- .vuuAlignRight {
439
- text-align: right;
440
- }
441
- th:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
442
- top: 0;
443
- z-index: 20;
444
- }
445
- table:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
446
- z-index: 10;
447
- }
448
- .vuuTable-settings {
449
- --saltButton-height: var(--header-height);
450
- --saltButton-width: 15px;
451
- position: absolute !important;
452
- right: 0;
453
- top: 0;
454
- }
455
- .vuuTable:has(.vuuTable-headerCell-resizing) * {
456
- cursor: col-resize;
457
- }
458
- .saltDraggable-table-column {
459
- background-color: var(--salt-container-primary-background);
460
- overflow: hidden;
461
- }
462
- .vuuTable-loading .vuuTable-table {
463
- --skeleton-height: 20px;
464
- --skeleton-width: calc(var(--content-width) - 8px);
465
- --skeleton-left: 4px;
466
- --skeleton-row-height: 16px;
467
- --skeleton-size: var(--skeleton-width) var(--skeleton-height);
468
- --skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );
469
- --skeleton-background-image: var(--skeleton-row);
470
- background-image: var(--skeleton-background-image);
471
- background-repeat: repeat-y;
472
- background-size: var(--skeleton-size);
473
- background-position-x: var(--skeleton-left);
474
- background-position-y: 27px;
475
- }
476
- .vuuTable-loading .vuuTable-table:after {
477
- animation: shimmer 2s infinite;
478
- background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0));
479
- content: "";
480
- height: var(--table-height);
481
- left: 0px;
482
- position: absolute;
483
- transform: translateX(-100%);
484
- top: var(--header-height);
485
- width: var(--content-width);
486
- }
487
- @keyframes shimmer {
488
- 100% {
489
- transform: translateX(100%);
490
- }
491
- }
492
-
493
- /* src/cell-renderers/json-cell/JsonCell.css */
494
- .vuuJsonCell-group {
495
- align-items: center;
496
- display: inline-flex;
497
- height: calc(var(--vuuTable-rowHeight) - 1px);
498
- width: 100%;
499
- }
500
- .vuuJsonCell-toggle {
501
- --vuu-icon-color: var(--salt-text-primary-foreground);
502
- --vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);
503
- --vuu-icon-width: 18px;
504
- flex-shrink: 0;
505
- margin-left: auto;
506
- }
507
- .vuuJsonCell-name {
508
- font-weight: var(--salt-typography-fontWeight-semiBold);
509
- }
510
- .vuuJsonCell-value {
511
- overflow: hidden;
512
- text-overflow: ellipsis;
513
- }
1
+ .vuuTable{--cell-outline-width: 2px;user-select:none}.vuuTable-table td{--saltEditableLabel-height: 17px;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight);line-height:calc(var(--vuuTable-rowHeight) - 1px);overflow:hidden;padding:0 5px}.vuuTable th:focus,.vuuTable td:focus{outline:var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));outline-offset:calc(var(--cell-outline-width) * -1);box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuTable th:focus .vuuTable-headerCell-inner{padding-bottom:var(--cell-outline-width)}.vuuTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{--columnResizer-color: transparent}.vuuTable td:focus{border-right:none;padding-bottom:1px}td[data-editable=true]{--salt-text-fontSize: 10px;--vuu-icon-size: 5px;position:relative}td[data-editable=true]:after{top:0;content:"";background-color:var(--salt-text-secondary-foreground, black);left:0;height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));-webkit-mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;transform:rotate(180deg);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}td:focus[data-editable],td:focus-within[data-editable],td:has(.saltEditableLabel-editing){outline:solid var(--salt-color-blue-400) 1px;background-color:#fff;outline-offset:-1px}td:focus[data-editable=true]:after,td:has(.saltEditableLabel):after{background-color:var(--salt-color-blue-400);left:1px;top:1px}.vuuTableGroupCell{--spacer-width: 20px;--toggle-icon-transform: var(--row-toggle-icon-transform, none);--vuu-icon-width: 18px;display:flex;align-items:center}.vuuTableGroupCell-spacer{height:100%;position:relative;width:var(--spacer-width)}.vuuTableGroupCell-spacer:after{background:var(--salt-container-primary-borderColor);content:"";position:absolute;top:0;bottom:-1px;left:9px;width:1px}.vuuTableGroupCell-toggle{transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuTableRow{background:transparent}.vuuTableRow-even{--row-background: var(--row-background-even)}.vuuTableRow :is(.vuuPinFloating,.vuuPinLeft,.vuuPinRight){background-color:var(--row-background)}.vuuTableRow-expanded{--row-toggle-icon-transform: rotate(90deg)}.vuuTableRow[aria-selected]{background-color:var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuTableRow-preSelected{--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuColumnResizer{cursor:col-resize;margin-left:auto;width:4px}.vuuColumnResizer:after{content:"";position:absolute;width:var(--columnResizer-width, 1px);top:0;bottom:0;right:0;background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));height:var(--columnResizer-height, 100%)}.vuuSortIndicator{--menu-icon-size: 18px;--menu-item-icon-color: black;display:flex;flex-direction:column;position:relative;width:18px}.vuuSortPosition{font-size:10px;line-height:10px;text-align:center}.vuuTable-heading:nth-child(2){--heading-top: calc(var(--header-height))}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 2)}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 3)}.vuuTable-headingCell{background:var(--dataTable-background);border-color:var(--salt-separable-tertiary-borderColor);border-style:solid solid solid none;border-width:1px;color:var(--salt-text-secondary-foreground);height:var(--vuuTableHeaderHeight);padding:0!important;position:sticky;top:var(--heading-top, 0);z-index:1}.vuuTable-heading:has(+ .vuuTable-heading)>.vuuTable-headingCell{border-bottom-color:transparent}.vuuTable-headerCell{--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);border-bottom:2px solid var(--salt-separable-tertiary-borderColor);color:var(--salt-text-secondary-foreground);cursor:default;padding:0!important;position:sticky;top:calc(var(--total-header-height) - var(--header-height));height:var(--vuuTableHeaderHeight);z-index:1}.vuuTable-headerCell-right{--cell-align: flex-end}.vuuTable-headerCell-inner{align-items:stretch;display:flex;height:100%;padding:0 0 0 3px}.vuuTable-headerCell-inner:has(.vuuFilterIndicator){padding-left:0}.vuuTable-headerCell-label{align-items:center;justify-content:var(--cell-align);display:flex;flex:1 1 auto}.vuuTable-headerCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTable-headerCell.vuuPinLeft.vuuEndPin:after{box-shadow:2px 0 5px #0006;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;right:0px}.vuuTable-headerCell.vuuPinRight.vuuEndPin:after{box-shadow:-2px 0 5px #0000004d;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;left:0px}.vuuFilterIndicator{--menu-icon-size: 12px;--menu-item-icon-color: black;align-items:center;cursor:pointer;display:flex;flex:0 0 18px;flex-direction:column;justify-content:center;position:relative}.vuuFilterIndicator+.vuuTable-headerCell-inner{padding-left:0}.salt-theme{--svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>')}.vuuTable-groupHeaderCell{--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);border-right:1px solid var(--salt-separable-tertiary-borderColor);border-bottom:2px solid var(--salt-separable-tertiary-borderColor);color:var(--salt-text-secondary-foreground);cursor:default;padding:0!important;position:sticky;top:0;height:var(--vuuTableHeaderHeight);z-index:1}.vuuTable-groupHeaderCell-inner{display:flex;height:100%}.vuuTable-groupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTable-groupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 4px);justify-content:space-between;padding-right:8px;position:relative}.vuuTable-groupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTable-groupHeaderCell-col:nth-child(odd){background-color:var(--salt-color-gray-50)}.vuuTable-groupHeaderCell-col:nth-child(even){background-color:var(--salt-color-gray-40)}.vuuTable-groupHeaderCell-col:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:3px;z-index:1}.vuuTable-groupHeaderCell-col:not(:first-child){margin-left:-6px;padding-left:12px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}.vuuTable-groupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTable-groupHeaderCell-pending{--pending-content: ""}.vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after{content:var(--pending-content);width:24px;height:24px;background-image:var(--svg-spinner);background-repeat:no-repeat;background-size:cover}.vuuTable{--dataTable-background: var(--salt-container-primary-background, inherit);--row-background-even: var(--dataTable-background);--row-background-odd: var(--dataTable-background);--table-background: var(--dataTable-background);background-color:var(--dataTable-background);position:relative}.vuuTable-zebra{--row-background-even: var(--salt-container-secondary-background);--table-background: 0 var(--header-height) repeating-linear-gradient( to bottom, var(--salt-container-secondary-background), var(--salt-container-secondary-background) var(--row-height), var(--dataTable-background) var(--row-height), var(--dataTable-background) calc(var(--row-height) *2))}.vuuTable-contentContainer{--vuuTable-contentHeight: var(--content-height, "auto");--vuuTable-contentWidth: var(--content-width, "auto");--vuuTableHeaderHeight: var(--header-height, 30px);--vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));--vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);--vuuTable-scrollbarSize: var(--scrollbar-size, 15px);--vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));background-color:var(--salt-container-primary-background);height:var(--vuuTable-height);position:relative;overflow:auto;overscroll-behavior:none;width:var(--vuuTable-width)}.vuuTable-contentContainer::-webkit-scrollbar{display:none}.vuuTable-scrollbarContainer{--scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));border-left:solid 1px var(--salt-container-primary-borderColor);border-top:solid 1px var(--salt-container-primary-borderColor);overflow:auto;position:absolute;height:calc(var(--table-height) - var(--total-header-height) + 1px);width:calc(var(--table-width) - var(--pinned-width-left) + 1px)}.vuuTable-scrollContainerHeader{background:#777;height:var(--header-height);position:fixed;top:0;right:0;width:var(--vuuTable-scrollbarSize)}.vuuTable-scrollContainerFooter{background-color:green;height:var(--vuuTable-scrollbarSize);position:fixed;bottom:0;left:0;width:var(--pinned-width-left)}.vuuTable-scrollContent{position:absolute;height:var(--content-height);width:var(--scroll-content-width, var(--content-width))}.vuuTable-tableContainer{background-color:var(--dataTable-background);border-bottom:solid 1px var(--salt-container-primary-borderColor);height:calc(var(--table-height) - var(--scrollbar-size));left:0px;overflow:hidden;position:sticky;top:0px;width:calc(var(--table-width) - var(--scrollbar-size));white-space:nowrap}.vuuTable-table{--vuuTable-rowHeight: var(--row-height);--vuuTableCell-border-bottomColor: transparent;--vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);position:absolute;top:0;left:0;background:var(--table-background);border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuTable-font-size, 10px);margin:0;min-height:100%;table-layout:fixed;width:var(--vuuTable-contentWidth)}.vuuTable-columnBased{display:inline-table;height:var(--vuuTable-height);position:static}.vuuTable-filler{height:var(--filler-height)}:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){position:sticky}.vuuAlignRight{text-align:right}th:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){top:0;z-index:20}table:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){z-index:10}.vuuTable-settings{--saltButton-height: var(--header-height);--saltButton-width: 15px;position:absolute!important;right:0;top:0}.vuuTable:has(.vuuTable-headerCell-resizing) *{cursor:col-resize}.saltDraggable-table-column{background-color:var(--salt-container-primary-background);overflow:hidden}.vuuTable-loading .vuuTable-table{--skeleton-height: 20px;--skeleton-width: calc(var(--content-width) - 8px);--skeleton-left: 4px;--skeleton-row-height: 16px;--skeleton-size: var(--skeleton-width) var(--skeleton-height);--skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );--skeleton-background-image: var(--skeleton-row);background-image:var(--skeleton-background-image);background-repeat:repeat-y;background-size:var(--skeleton-size);background-position-x:var(--skeleton-left);background-position-y:27px}.vuuTable-loading .vuuTable-table:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.6) 60%,rgba(255,255,255,0));content:"";height:var(--table-height);left:0px;position:absolute;transform:translate(-100%);top:var(--header-height);width:var(--content-width)}@keyframes shimmer{to{transform:translate(100%)}}.vuuJsonCell-group{align-items:center;display:inline-flex;height:calc(var(--vuuTable-rowHeight) - 1px);width:100%}.vuuJsonCell-toggle{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);--vuu-icon-width: 18px;flex-shrink:0;margin-left:auto}.vuuJsonCell-name{font-weight:var(--salt-typography-fontWeight-semiBold)}.vuuJsonCell-value{overflow:hidden;text-overflow:ellipsis}
514
2
  /*# sourceMappingURL=index.css.map */
package/index.css.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../packages/vuu-table/src/TableCell.css", "../../../packages/vuu-table/src/TableGroupCell.css", "../../../packages/vuu-table/src/TableRow.css", "../../../packages/vuu-table/src/ColumnResizer.css", "../../../packages/vuu-table/src/SortIndicator.css", "../../../packages/vuu-table/src/TableHeaderCell.css", "../../../packages/vuu-table/src/filter-indicator.css", "../../../packages/vuu-table/src/TableGroupHeaderCell.css", "../../../packages/vuu-table/src/Table.css", "../../../packages/vuu-table/src/cell-renderers/json-cell/JsonCell.css"],
4
4
  "sourcesContent": [".vuuTable {\n --cell-outline-width: 2px;\n user-select: none;\n}\n\n.vuuTable-table td {\n --saltEditableLabel-height: 17px;\n --saltInput-height: 17px;\n --saltInput-minHeight: 17px;\n\n border-right: 1px solid var(--vuuTableCell-border-rightColor);\n border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n color: var(--salt-text-primary-foreground);\n cursor: default;\n height: var(--vuuTable-rowHeight);\n line-height: calc(var(--vuuTable-rowHeight) - 1px);\n overflow: hidden;\n padding: 0 5px;\n}\n\n\n.vuuTable th:focus,\n.vuuTable td:focus {\n outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));\n outline-offset: calc(var(--cell-outline-width) * -1);\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuTable th:focus .vuuTable-headerCell-inner{\n /** This is to achieve a white background to outline dashes */\n padding-bottom: var(--cell-outline-width);\n}\n\n.vuuTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n --columnResizer-color: transparent;\n}\n\n\n.vuuTable td:focus {\n /** This is to achieve a white background to outline dashes */\n border-right: none;\n padding-bottom: 1px;\n}\n\n\ntd[data-editable=\"true\"] {\n --salt-text-fontSize: 10px;\n --vuu-icon-size: 5px;\n position: relative;\n}\n\ntd[data-editable=\"true\"]:after {\n top: 0;\n content: \"\";\n background-color: var(--salt-text-secondary-foreground, black);\n left: 0;\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n transform: rotate(180deg);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n }\n \ntd:focus[data-editable],\ntd:focus-within[data-editable],\ntd:has(.saltEditableLabel-editing) {\n outline: solid var(--salt-color-blue-400) 1px;\n background-color: white;\n outline-offset: -1px;\n}\n\ntd:focus[data-editable=\"true\"]:after,\ntd:has(.saltEditableLabel):after {\n /* background-color: black; */\n background-color: var(--salt-color-blue-400);\n left: 1px;\n top: 1px;\n}\n", ".vuuTableGroupCell {\n --spacer-width: 20px;\n --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n --vuu-icon-width: 18px;\n display: flex;\n align-items: center;\n}\n\n.vuuTableGroupCell-spacer {\n height: 100%;\n position: relative;\n width: var(--spacer-width);\n}\n\n.vuuTableGroupCell-spacer:after {\n background: var(--salt-container-primary-borderColor);\n content: '';\n position: absolute;\n top:0;\n bottom: -1px;\n /* left: calc(var(--spacer-width / 2)); */\n left: 9px;\n width: 1px;\n}\n\n.vuuTableGroupCell-toggle {\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n}\n\n\n/* .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-plus-box);\n}\n\n.vuuTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-minus-box);\n} */\n", " .vuuTableRow {\n background: transparent;\n /* background: var(--row-background); */\n }\n\n .vuuTableRow-even {\n --row-background: var(--row-background-even);\n }\n\n .vuuTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n background-color: var(--row-background);\n }\n \n .vuuTableRow-expanded {\n --row-toggle-icon-transform: rotate(90deg);\n }\n \n .vuuTableRow[aria-selected] {\n background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }\n\n /* .vuuTableRow:not([aria-selected]):has(+ [aria-selected]) {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n } */\n\n .vuuTableRow-preSelected {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }", ".vuuColumnResizer {\n cursor: col-resize;\n margin-left: auto;\n width: 4px;\n}\n\n.vuuColumnResizer:after {\n content: '';\n position: absolute;\n width: var(--columnResizer-width, 1px);\n top:0;\n bottom:0;\n right: 0;\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n height: var(--columnResizer-height, 100%);\n}", ".vuuSortIndicator {\n --menu-icon-size: 18px;\n --menu-item-icon-color: black;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 18px;\n}\n\n.vuuSortPosition {\n font-size: 10px;\n line-height: 10px;\n text-align: center;\n}\n\n", "/* We support multi level headings up to a maximum of 4 heading levels */\n.vuuTable-heading:nth-child(2) {\n --heading-top: calc(var(--header-height));\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 2);\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 3);\n}\n\n.vuuTable-headingCell {\n background: var(--dataTable-background);\n border-color: var(--salt-separable-tertiary-borderColor);\n border-style: solid solid solid none;\n border-width: 1px;\n color: var(--salt-text-secondary-foreground);\n height: var(--vuuTableHeaderHeight);\n padding: 0 !important;\n position: sticky;\n top: var(--heading-top, 0);\n z-index: 1;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n border-bottom-color: transparent;\n}\n\n.vuuTable-headerCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--dataTable-background);\n /* border-right: var(--header-border-rightWidth, 1px) solid var(--header-border-rightColor, var(--salt-separable-tertiary-borderColor)); */\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: calc(var(--total-header-height) - var(--header-height));\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n }\n\n .vuuTable-headerCell-right {\n --cell-align: flex-end;\n }\n \n .vuuTable-headerCell-inner {\n align-items: stretch;\n display: flex;\n height: 100%;\n padding: 0 0 0 3px;\n }\n\n .vuuTable-headerCell-inner:has(.vuuFilterIndicator){\n padding-left: 0;\n }\n\n .vuuTable-headerCell-label {\n align-items: center;\n justify-content: var(--cell-align);\n display: flex;\n flex: 1 1 auto;\n }\n\n .vuuTable-headerCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n\n .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {\n box-shadow: 2px 0px 5px rgba(0,0,0,0.4);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n right: 0px;\n }\n\n .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {\n box-shadow: -2px 0px 5px rgba(0,0,0,0.3);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n left: 0px;\n }", ".vuuFilterIndicator {\n --menu-icon-size: 12px;\n --menu-item-icon-color: black;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex: 0 0 18px;\n flex-direction: column;\n justify-content: center;\n position: relative;\n}\n\n.vuuFilterIndicator + .vuuTable-headerCell-inner {\n padding-left: 0;\n}\n", "\n.salt-theme {\n --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTable-groupHeaderCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--dataTable-background);\n border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: 0;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n }\n\n\n .vuuTable-groupHeaderCell-inner {\n display: flex;\n height: 100%;\n }\n\n .vuuTable-groupHeaderCell-label {\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n }\n\n .vuuTable-groupHeaderCell-col {\n align-items: center;\n background-color: inherit;\n display: inline-flex;\n flex: 0 1 auto;\n height: calc(var(--vuuTableHeaderHeight) - 4px);\n justify-content: space-between;\n padding-right: 8px;\n position: relative;\n }\n\n .vuuTable-groupHeaderCell-close {\n --vuu-icon-height: 18px;\n --vuu-icon-width: 18px;\n cursor: pointer;\n left: 3px;\n }\n\n .vuuTable-groupHeaderCell-col:nth-child(odd) {\n background-color: var(--salt-color-gray-50);\n }\n .vuuTable-groupHeaderCell-col:nth-child(even) {\n background-color: var(--salt-color-gray-40);\n }\n\n .vuuTable-groupHeaderCell-col:first-child {\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);\n padding-left: 3px;\n z-index: 1;\n }\n \n .vuuTable-groupHeaderCell-col:not(:first-child) {\n margin-left: -6px;\n padding-left: 12px;\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);\n }\n \n .vuuTable-groupHeaderCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n .vuuTable-groupHeaderCell-pending {\n --pending-content: '';\n }\n\n .vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after {\n content: var(--pending-content);\n width: 24px;\n height:24px;\n background-image: var(--svg-spinner);\n background-repeat: no-repeat;\n background-size: cover;\n }\n", "\n.vuuTable {\n --dataTable-background: var(--salt-container-primary-background, inherit);\n --row-background-even: var(--dataTable-background);\n --row-background-odd: var(--dataTable-background);\n --table-background: var(--dataTable-background);\n background-color: var(--dataTable-background);\n position: relative;\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-container-secondary-background);\n --table-background: 0 var(--header-height) repeating-linear-gradient(\n to bottom, \n var(--salt-container-secondary-background), \n var(--salt-container-secondary-background) var(--row-height), \n var(--dataTable-background) var(--row-height), \n var(--dataTable-background) calc(var(--row-height) *2));\n}\n\n.vuuTable-loading .vuuTable-table {\n --skeleton-height: 20px;\n --skeleton-width: calc(var(--content-width) - 8px);\n --skeleton-left: 4px;\n --skeleton-row-height: 16px;\n --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n --skeleton-row: linear-gradient(\n var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n transparent 0\n );\n --skeleton-background-image: var(--skeleton-row);\n\n\n background-image: var(--skeleton-background-image);\n background-repeat: repeat-y;\n background-size: var(--skeleton-size);\n background-position-x: var(--skeleton-left);\n background-position-y: 27px;\n}\n\n.vuuTable-contentContainer {\n \n --vuuTable-contentHeight: var(--content-height, 'auto');\n --vuuTable-contentWidth: var(--content-width, 'auto');\n --vuuTableHeaderHeight: var(--header-height, 30px);\n --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));\n --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n background-color: var(--salt-container-primary-background);\n\n height: var(--vuuTable-height);\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--vuuTable-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-scrollbarContainer {\n --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n border-left: solid 1px var(--salt-container-primary-borderColor);\n border-top: solid 1px var(--salt-container-primary-borderColor);\n overflow: auto;\n position: absolute;\n height: calc(var(--table-height) - var(--total-header-height) + 1px);\n width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuTable-scrollContainerHeader {\n background: #777;\n height: var(--header-height);\n position: fixed;\n top:0;\n right:0;\n width: var(--vuuTable-scrollbarSize);\n}\n.vuuTable-scrollContainerFooter {\n background-color: green;\n height: var(--vuuTable-scrollbarSize);\n position: fixed;\n bottom:0;\n left:0;\n width: var(--pinned-width-left);\n\n}\n\n.vuuTable-scrollContent {\n position: absolute;\n height: var(--content-height);\n width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuTable-tableContainer {\n background-color: var(--dataTable-background);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n height: calc(var(--table-height) - var(--scrollbar-size));\n left: 0px;\n overflow: hidden;\n position: sticky;\n top: 0px;\n width: calc(var(--table-width) - var(--scrollbar-size));\n white-space: nowrap;\n\n}\n\n\n.vuuTable-table {\n --vuuTable-rowHeight: var(--row-height);\n --vuuTableCell-border-bottomColor: transparent;\n --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n position: absolute;\n top: 0;\n left: 0;\n\n background: var(--table-background);\n /* background-position: 0 25px; */\n\n border-collapse: separate;\n border-spacing: 0;\n border-left: 1px solid #ccc;\n border: none;\n font-size: var(--vuuTable-font-size, 10px);\n margin: 0;\n min-height: 100%;\n table-layout: fixed;\n width: var(--vuuTable-contentWidth);\n}\n\n.vuuTable-columnBased {\n display: inline-table;\n height: var(--vuuTable-height);\n position: static;\n}\n\n/* .vuuTable-columnBased .vuuTable-headerCell{\n background-color: darkmagenta;\n} */\n\n.vuuTable-filler {\n height: var(--filler-height);\n}\n\n:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n position: sticky;\n}\n\n.vuuAlignRight {\n text-align: right;\n}\n\nth:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n top:0;\n z-index: 20;\n}\n\ntable:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n z-index: 10;\n}\n\n/* .vuuTable-row {\n transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuTable-settings {\n --saltButton-height: var(--header-height);\n --saltButton-width: 15px;\n position: absolute !important;\n right: 0;\n top: 0;\n}\n\n.vuuTable:has(.vuuTable-headerCell-resizing) * {\n cursor: col-resize;\n}\n\n.saltDraggable-table-column {\n background-color: var(--salt-container-primary-background);\n overflow: hidden;\n}\n\n.vuuTable-loading .vuuTable-table {\n --skeleton-height: 20px;\n --skeleton-width: calc(var(--content-width) - 8px);\n --skeleton-left: 4px;\n --skeleton-row-height: 16px;\n --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n --skeleton-row: linear-gradient(\n var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n transparent 0\n );\n --skeleton-background-image: var(--skeleton-row);\n\n background-image: var(--skeleton-background-image);\n background-repeat: repeat-y;\n background-size: var(--skeleton-size);\n background-position-x: var(--skeleton-left);\n background-position-y: 27px;\n\n /* animation:linearAnim 2s infinite linear */\n}\n\n.vuuTable-loading .vuuTable-table:after {\n animation: shimmer 2s infinite;\n background: linear-gradient(\n 90deg, \n rgba(255,255,255, 0) 0, \n rgba(255,255,255, .2) 20%, \n rgba(255,255,255, .6) 60%, \n rgba(255,255,255, 0)\n );\n content: '';\n height: var(--table-height);\n left: 0px;\n position: absolute;\n transform: translateX(-100%);\n top: var(--header-height);\n width: var(--content-width);\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}", ".vuuJsonCell-group {\n align-items: center;\n display: inline-flex;\n height: calc(var(--vuuTable-rowHeight) - 1px);\n width: 100%;\n}\n\n.vuuJsonCell-toggle {\n --vuu-icon-color: var(--salt-text-primary-foreground);\n --vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);\n --vuu-icon-width: 18px;\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.vuuJsonCell-name {\n font-weight: var(--salt-typography-fontWeight-semiBold); \n}\n\n.vuuJsonCell-value {\n overflow: hidden;\n text-overflow: ellipsis;\n}"],
5
- "mappings": ";AAAA;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AAAA;AAEI;AACA;AAEA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AAAA;AAIJ;AAEI;AACA;AAAA;AAIJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAAA;AAAA;AAGI;AACA;AACA;AAAA;AAGJ;AAAA;AAGI;AACA;AACA;AAAA;;;ACjFJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;;;AC3BF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAOF;AACE;AAAA;;;AC3BJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACdJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACXF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3FJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACC;AAAA;AAGD;AACE;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAIF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpFJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AAIA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKF;AACE;AACA;AACA;AAEA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAKF;AACE;AACA;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEI;AAAA;AAAA;;;ACnOJ;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACM;AAAA;AAGN;AACI;AACA;AAAA;",
5
+ "mappings": "AAAA,UACI,0BACA,iBAGJ,mBACI,iCACA,yBACA,4BAEA,6DACA,+DACA,0CACA,eACA,iCACA,kDACA,gBAhBJ,cAqBA,sCAEI,iGACA,oDAEA,sDACA,mBAGJ,8CAEI,yCAGJ,iFACI,mCAIJ,mBAEI,kBACA,mBAIJ,uBACI,2BACA,qBACA,kBAGJ,6BACI,MACA,WACA,8DACA,OACA,0DACA,gGACA,wFACA,sBACA,8BACA,kBACA,yBACA,wDAGJ,0FAGI,6CACA,sBACA,oBAGJ,oEAGI,4CACA,SACA,QCjFJ,mBACI,qBACA,gEACA,uBACA,aACA,mBAGJ,0BACI,YACA,kBACA,0BAGJ,gCACI,qDACA,WACA,kBACA,MACA,YAEA,SACA,UAGJ,0BACI,0BACA,uCC3BF,aACE,uBAIF,kBACE,6CAGF,2DACE,uCAGF,sBACE,2CAGF,4BACE,oGACA,+EAOF,yBACE,+EC3BJ,kBACI,kBACA,iBACA,UAGJ,wBACI,WACA,kBACA,sCACA,MACA,SACA,QACA,wFACA,yCCdJ,kBACE,uBACA,8BACA,aACA,sBACA,kBACA,WAGF,iBACE,eACA,iBACA,kBCXF,+BACE,0CAEF,+BACE,8CAEF,+BACE,8CAGF,sBACE,uCACA,wDACA,oCACA,iBACA,4CACA,mCAjBF,oBAmBE,gBACA,0BACA,UAGF,iEACE,gCAGF,qBACE,2BACA,gBACE,uCAEA,mEACA,4CACA,eAnCJ,oBAqCI,gBACA,4DACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAnDJ,kBAuDE,oDACE,eAGF,2BACE,mBACA,kCACA,aACA,cAGF,8BACE,kDACA,4CACA,2BAGF,gDACE,2BACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,UAGF,iDACE,gCACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,SC3FJ,oBACE,uBACA,8BACA,mBACA,eACA,aACA,cACA,sBACA,uBACA,kBAGF,+CACE,eCZF,YACC,4YAGD,0BACE,2BACA,gBACE,uCACA,kEACA,mEACA,4CACA,eAZJ,oBAcI,gBACA,MACA,mCAEA,UAIF,gCACE,aACA,YAGF,gCACE,mBACA,aACA,cAGF,8BACE,mBACA,yBACA,oBACA,cACA,+CACA,8BACA,kBACA,kBAGF,gCACE,wBACA,uBACA,eACA,SAGF,6CACE,2CAEF,8CACE,2CAGF,0CACE,gFACA,iBACA,UAGF,gDACE,iBACA,kBACA,wFAGF,mCACE,kDACA,4CACA,2BAEF,kCACE,sBAGF,6DACE,+BACA,WACA,YACA,oCACA,4BACA,sBCpFJ,UACE,0EACA,mDACA,kDACA,gDACA,6CACA,kBAGF,gBACE,kEACA,kSA4BF,2BAEE,wDACA,sDACA,mDACA,qEACA,2DACA,sDACA,mEAEA,0DAEA,8BACA,kBACA,cACA,yBACA,4BAGF,8CACE,aAGF,6BACE,8EACA,gEACA,+DACA,cACA,kBACA,oEACA,gEAGF,gCACE,gBACA,4BACA,eACA,MACA,QACA,oCAEF,gCACE,uBACA,qCACA,eACA,SACA,OACA,+BAIF,wBACE,kBACA,6BACA,wDAGF,yBACE,6CACA,kEACA,yDACA,SACA,gBACA,gBACA,QACA,uDACA,mBAKF,gBACE,wCACA,+CACA,6EAEA,kBACA,MACA,OAEA,mCAGA,yBACA,iBACA,2BACA,YACA,0CA/HF,SAiIE,gBACA,mBACA,mCAGF,sBACE,qBACA,8BACA,gBAOF,iBACE,4BAGF,8CACE,gBAGF,eACE,iBAGF,gDACE,MACA,WAGF,mDACE,WAOF,mBACE,0CACA,yBACA,4BACA,QACA,MAGF,+CACE,kBAGF,4BACE,0DACA,gBAGF,kCACE,wBACA,mDACA,qBACA,4BACA,8DACA,uHAIA,iDAEA,kDACA,2BACA,qCACA,2CACA,2BAKF,wCACE,8BACA,8HAOA,WACA,2BACA,SACA,kBACA,2BACA,yBACA,2BAGF,sBAEI,2BCnOJ,mBACI,mBACA,oBACA,6CACA,WAGJ,oBACI,sDACA,yDACA,uBACA,cACA,iBAGJ,kBACM,uDAGN,mBACI,gBACA",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@vuu-ui/vuu-table",
3
- "version": "0.6.21-debug",
3
+ "version": "0.6.21",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
6
6
  "dependencies": {
7
7
  "@salt-ds/core": "1.2.0",
8
8
  "@salt-ds/icons": "1.1.0",
9
9
  "@heswell/salt-lab": "1.0.0-alpha.2",
10
- "@vuu-ui/vuu-data": "0.6.21-debug",
11
- "@vuu-ui/vuu-filters": "0.6.21-debug",
12
- "@vuu-ui/vuu-popups": "0.6.21-debug",
13
- "@vuu-ui/vuu-utils": "0.6.21-debug"
10
+ "@vuu-ui/vuu-data": "0.6.21",
11
+ "@vuu-ui/vuu-filters": "0.6.21",
12
+ "@vuu-ui/vuu-popups": "0.6.21",
13
+ "@vuu-ui/vuu-utils": "0.6.21"
14
14
  },
15
15
  "peerDependencies": {
16
16
  "classnames": "^2.2.6",