@vuu-ui/vuu-table-extras 0.8.2-debug → 0.8.2

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,583 +1,2 @@
1
- /* src/cell-renderers/background-cell/BackgroundCell.css */
2
- .vuuTable td:has(> .vuuBackgroundCell) {
3
- padding: 0;
4
- text-align: right;
5
- }
6
- .vuuBackgroundCell {
7
- padding-right: var(--salt-size-unit);
8
- position: relative;
9
- z-index: -1;
10
- }
11
- .vuuBackgroundCell-flasher {
12
- color: transparent;
13
- position: absolute;
14
- left: 0;
15
- right: 0;
16
- top: 0;
17
- bottom: 0;
18
- z-index: -1;
19
- }
20
- .vuuBackgroundCell-flasher {
21
- text-align: left;
22
- }
23
- .vuuBackgroundCell-flasher + .num {
24
- padding-left: 8px;
25
- }
26
- .right .vuuBackgroundCell-flasher {
27
- text-align: right;
28
- }
29
- .right .vuuBackgroundCell-flasher + .num {
30
- padding-right: 8px;
31
- }
32
- .up1 > .vuuBackgroundCell-flasher {
33
- animation-duration: 30s;
34
- animation-name: reactbgup1;
35
- }
36
- .up2 > .vuuBackgroundCell-flasher {
37
- animation-duration: 30s;
38
- animation-name: reactbgup2;
39
- }
40
- .down1 > .vuuBackgroundCell-flasher {
41
- animation-duration: 30s;
42
- animation-name: reactbgdown1;
43
- }
44
- .down2 > .vuuBackgroundCell-flasher {
45
- animation-duration: 30s;
46
- animation-name: reactbgdown2;
47
- }
48
- .up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
49
- animation-duration: 30s;
50
- animation-name: reactarrowup1;
51
- }
52
- .up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
53
- animation-duration: 30s;
54
- animation-name: reactarrowup2;
55
- }
56
- .down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
57
- animation-duration: 30s;
58
- animation-name: reactarrowdown1;
59
- }
60
- .down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
61
- animation-duration: 30s;
62
- animation-name: reactarrowdown2;
63
- }
64
- .up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
65
- animation-duration: 30s;
66
- animation-name: reactbgarrowup1;
67
- }
68
- .up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
69
- animation-duration: 30s;
70
- animation-name: reactbgarrowup2;
71
- }
72
- .down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
73
- animation-duration: 30s;
74
- animation-name: reactbgarrowdown1;
75
- }
76
- .down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
77
- animation-duration: 30s;
78
- animation-name: reactbgarrowdown2;
79
- }
80
-
81
- /* src/cell-renderers/background-cell/FlashingBackground.css */
82
- @keyframes reactbgup1 {
83
- from {
84
- background-color: var(--salt-differential-positive-background);
85
- }
86
- to {
87
- background-color: transparent;
88
- }
89
- }
90
- @keyframes reactbgup2 {
91
- from {
92
- background-color: var(--salt-differential-positive-background);
93
- }
94
- to {
95
- background-color: transparent;
96
- }
97
- }
98
- @keyframes reactbgdown1 {
99
- from {
100
- background-color: var(--salt-differential-negative-background);
101
- }
102
- to {
103
- background-color: transparent;
104
- }
105
- }
106
- @keyframes reactbgdown2 {
107
- from {
108
- background-color: var(--salt-differential-negative-background);
109
- }
110
- to {
111
- background-color: transparent;
112
- }
113
- }
114
- @keyframes reactarrowup1 {
115
- from {
116
- color: var(--salt-differential-positive-foreground);
117
- }
118
- to {
119
- color: transparent;
120
- }
121
- }
122
- @keyframes reactarrowup2 {
123
- from {
124
- color: var(--salt-differential-positive-foreground);
125
- }
126
- to {
127
- color: transparent;
128
- }
129
- }
130
- @keyframes reactarrowdown1 {
131
- from {
132
- color: var(--salt-differential-negative-foreground);
133
- }
134
- to {
135
- color: transparent;
136
- }
137
- }
138
- @keyframes reactarrowdown2 {
139
- from {
140
- color: var(--salt-differential-negative-foreground);
141
- }
142
- to {
143
- color: transparent;
144
- }
145
- }
146
- @keyframes reactbgarrowup1 {
147
- 0% {
148
- color: var(--salt-differential-positive-foreground);
149
- background-color: var(--salt-differential-positive-background);
150
- }
151
- 20% {
152
- color: var(--salt-differential-positive-foreground);
153
- background-color: transparent;
154
- }
155
- 100% {
156
- color: transparent;
157
- background-color: transparent;
158
- }
159
- }
160
- @keyframes reactbgarrowup2 {
161
- 0% {
162
- color: var(--salt-differential-positive-foreground);
163
- background-color: var(--salt-differential-positive-background);
164
- }
165
- 20% {
166
- color: var(--salt-differential-positive-foreground);
167
- background-color: transparent;
168
- }
169
- 100% {
170
- color: transparent;
171
- background-color: transparent;
172
- }
173
- }
174
- @keyframes reactbgarrowdown1 {
175
- 0% {
176
- color: var(--salt-differential-negative-foreground);
177
- background-color: var(--salt-differential-negative-background);
178
- }
179
- 20% {
180
- color: var(--salt-differential-negative-foreground);
181
- background-color: transparent;
182
- }
183
- 100% {
184
- color: transparent;
185
- background-color: transparent;
186
- }
187
- }
188
- @keyframes reactbgarrowdown2 {
189
- 0% {
190
- color: var(--salt-differential-negative-foreground);
191
- background-color: var(--salt-differential-negative-background);
192
- }
193
- 20% {
194
- color: var(--salt-differential-negative-foreground);
195
- background-color: transparent;
196
- }
197
- 100% {
198
- color: transparent;
199
- background-color: transparent;
200
- }
201
- }
202
-
203
- /* src/cell-renderers/progress-cell/ProgressCell.css */
204
- .vuuProgressCell {
205
- align-items: center;
206
- display: flex;
207
- }
208
- .vuuProgressCell-track {
209
- display: inline-block;
210
- flex: auto 1 1;
211
- height: 4px;
212
- overflow: hidden;
213
- position: relative;
214
- }
215
- .vuuProgressCell-bg {
216
- background-color: var(--salt-measured-background);
217
- display: inline-block;
218
- height: 2px;
219
- left: 0;
220
- position: absolute;
221
- top: 1px;
222
- width: 100%;
223
- }
224
- .vuuProgressCell-bar {
225
- background-color: var(--salt-measured-fill);
226
- display: inline-block;
227
- height: 100%;
228
- left: 0;
229
- position: absolute;
230
- top: 0;
231
- transform: translateX(var(--progress-bar-pct, -100%));
232
- width: 100%;
233
- }
234
- .vuuProgressCell-text {
235
- flex: 35px 0 0;
236
- text-align: right;
237
- }
238
-
239
- /* src/column-expression-input/ColumnExpressionInput.css */
240
- .vuuColumnExpressionInput {
241
- --vuuFilterEditor-background: var(--salt-container-primary-background);
242
- --vuuFilterEditor-color: var(--salt-text-primary-foreground);
243
- --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
244
- --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
245
- --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
246
- --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
247
- --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
248
- --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
249
- --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
250
- --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
251
- --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);
252
- --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
253
- --vuuFilterEditor-suggestion-height: 24px;
254
- --vuuFilterEditor-variableColor: blue;
255
- align-items: center;
256
- box-sizing: border-box;
257
- height: 30px;
258
- }
259
- .vuuColumnExpressionInput-FilterButton,
260
- .vuuColumnExpressionInput-ClearButton {
261
- --vuu-icon-size: 12px;
262
- --saltButton-width: 28px;
263
- }
264
- .expression-type-container {
265
- margin: 0 3px 0 auto;
266
- color: var(--salt-text-secondary-foreground);
267
- }
268
- .expression-kind {
269
- display: inline-block;
270
- width: 50px;
271
- }
272
- .expression-type {
273
- display: inline-block;
274
- text-align: right;
275
- width: 50px;
276
- }
277
- .vuuSuggestion {
278
- display: flex;
279
- align-items: center;
280
- }
281
- .vuuFunctionDoc .function-heading {
282
- display: flex;
283
- gap: 3px;
284
- }
285
- .vuuFunctionDoc .function-name {
286
- font-style: italic;
287
- }
288
- .vuuFunctionDoc .param-list {
289
- font-style: italic;
290
- color: blue;
291
- white-space: pre;
292
- }
293
- .vuuFunctionDoc .function-type {
294
- margin-left: auto;
295
- }
296
- .vuuFunctionDoc .example-container {
297
- background-color: var(--salt-container-secondary-background);
298
- margin: 6px 0;
299
- padding: 3px;
300
- }
301
- .vuuFunctionDoc .example-expression {
302
- font-family: var(--salt-typography-fontFamily-code);
303
- margin-left: 8px;
304
- margin-top: 6px;
305
- }
306
- .vuuFunctionDoc .example-result {
307
- margin-left: 8px;
308
- margin-top: 6px;
309
- }
310
-
311
- /* src/datagrid-configuration-ui/column-picker/ColumnListItem.css */
312
- .vuuColumnListItem {
313
- --svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z"/></svg>');
314
- align-items: center;
315
- padding: 0 !important;
316
- }
317
- .vuuColumnListItem-calculated {
318
- --vuu-icon-size: 12px;
319
- --column-icon-svg: var(--svg-function);
320
- --calculated-background: var(--salt-text-secondary-foreground);
321
- }
322
- .vuuColumnListItem-hidden {
323
- --vuu-icon-size: 14px;
324
- --hidden-background: var(--salt-text-secondary-foreground);
325
- --hidden-icon-svg: var(--svg-eye-hidden);
326
- }
327
- .vuuColumnListItem-label {
328
- flex: 1 1 auto;
329
- }
330
- .vuuColumnListItem-iconType {
331
- background-color: var(--calculated-background, transparent);
332
- display: inline-block;
333
- height: 100%;
334
- mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
335
- mask-repeat: no-repeat;
336
- -webkit-mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
337
- -webkit-mask-repeat: no-repeat;
338
- width: 20px;
339
- }
340
- .vuuColumnListItem-iconHidden {
341
- background-color: var(--hidden-background, transparent);
342
- display: inline-block;
343
- height: 100%;
344
- mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
345
- mask-repeat: no-repeat;
346
- -webkit-mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
347
- -webkit-mask-repeat: no-repeat;
348
- width: 20px;
349
- }
350
-
351
- /* src/datagrid-configuration-ui/column-picker/ColumnPicker.css */
352
- .vuuColumnPicker {
353
- --vuu-icon-color: var(--salt-text-primary-foreground);
354
- --vuu-icon-left: 0px;
355
- --vuu-icon-size: 12px;
356
- display: flex;
357
- flex-shrink: 0;
358
- gap: calc(var(--salt-size-unit) * 2);
359
- width: var(--vuuColumnPicker-width, 100%);
360
- }
361
- .vuuColumnPicker-listColumn {
362
- display: flex;
363
- flex: 1;
364
- flex-direction: column;
365
- }
366
- .vuuColumnPicker-listContainer {
367
- border: solid 1px var(--salt-container-primary-borderColor);
368
- margin-right: var(--salt-size-unit);
369
- }
370
- .vuuColumnPicker-defineColumn {
371
- align-items: center;
372
- border-top: solid 1px var(--salt-container-primary-borderColor);
373
- display: flex;
374
- flex: 0 0 calc(100% - var(--salt-size-unit));
375
- gap: var(--salt-size-unit);
376
- transition: .2s height;
377
- margin-top: 12px;
378
- height: 48px;
379
- }
380
- [data-align=right] .vuuColumnPicker-defineColumn {
381
- border-top: none;
382
- height: 0;
383
- }
384
- .vuuColumnPicker-addCalculatedColumn {
385
- margin-left: auto;
386
- margin-right: var(--salt-size-unit);
387
- width: 28px;
388
- }
389
-
390
- /* src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.css */
391
- .vuuColumnTypePanel {
392
- --settings-panel-marginTop: 0px;
393
- }
394
- .vuuColumnTypePanel-renderer {
395
- --saltButton-background: var(--salt-container-secondary-background);
396
- --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);
397
- }
398
-
399
- /* src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.css */
400
- .vuuColumnSettingsPanel {
401
- --saltFormField-margin: 3px 0;
402
- --saltFormField-label-width: 80px;
403
- --saltPanel-padding: var(--salt-size-unit);
404
- align-items: flex-start;
405
- border-left: solid 1px var(--salt-container-primary-borderColor);
406
- display: flex;
407
- flex-direction: column;
408
- flex-shrink: 0;
409
- min-width: 220px;
410
- padding-left: calc(var(--salt-size-unit) * 2);
411
- width: var(--vuuColumnSettings-width, auto);
412
- }
413
- .vuuColumnSettingsPanel-columnTabs {
414
- --saltFormField-margin: 0;
415
- }
416
- .vuuColumnSettingsPanel-columnTabs .saltFormField {
417
- margin-left: 0 !important;
418
- }
419
- .vuuColumnSettingsPanel .saltPanel {
420
- --saltFormField-margin: 3px 0;
421
- margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));
422
- align-items: stretch;
423
- display: flex;
424
- flex-direction: column;
425
- gap: var(--salt-size-unit);
426
- }
427
- .vuuColumnPanelSwitch {
428
- white-space: nowrap;
429
- width: 100%;
430
- }
431
- .vuuColumnSettingsPanel .saltSwitch {
432
- margin-left: auto;
433
- }
434
-
435
- /* src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css */
436
- .vuuGridSettingsPanel {
437
- --saltFormField-label-width: 150px;
438
- }
439
-
440
- /* src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.css */
441
- .vuuCalculatedColumnPanel {
442
- display: flex;
443
- flex-direction: column;
444
- gap: var(--salt-size-unit);
445
- }
446
-
447
- /* src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.css */
448
- .vuuDialog-gridConfig {
449
- }
450
- .vuuDatagridSettingsPanel {
451
- --svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="3" width="5" x="1" y="10" /><rect height="3" width="5" x="1" y="6" /><rect height="3" width="10" x="7" y="10" /><rect height="3" width="10" x="7" y="6" /><path d="M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z" /><path d="M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z" /><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z" /></svg>');
452
- --svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');
453
- --svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z" /><path d="M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z" /><path d="M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z" /><path d="M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z" /></svg>');
454
- --saltToolbar-background: transparent;
455
- --vuuView-borderStyle: solid;
456
- --vuuColumnPicker-width: 100%;
457
- --vuuColumnSettings-width: 50%;
458
- background-color: var(--salt-container-primary-background);
459
- display: flex;
460
- flex-direction: column;
461
- height: 442px;
462
- width: 520px;
463
- }
464
- [data-icon=column-chooser] {
465
- --vuu-icon-svg: var(--svg-column-chooser);
466
- }
467
- [data-icon=column-settings] {
468
- --vuu-icon-svg: var(--svg-column-settings);
469
- }
470
- [data-icon=table-settings] {
471
- --vuu-icon-svg: var(--svg-table-settings);
472
- }
473
- [data-icon=define-column] {
474
- --vuu-icon-svg: var(--svg-function);
475
- }
476
- .vuuDatagridSettingsPanel-header {
477
- flex: 0 0 50px;
478
- }
479
- .vuuDatagridSettingsPanel-stack {
480
- flex: 1;
481
- gap: 24px;
482
- overflow: hidden;
483
- }
484
- .vuuDatagridSettingsPanel-stack > .saltToolbar {
485
- --saltToolbar-background: var(--salt-container-secondary-background);
486
- --vuu-icon-color: var(--salt-text-secondary-foreground);
487
- --vuu-icon-size: 18px;
488
- --vuu-icon-height: 36px;
489
- --vuu-icon-width: 36px;
490
- border-bottom: none;
491
- }
492
- .vuuDatagridSettingsPanel-stack > .saltToolbar .saltTabstrip {
493
- --tabs-activationIndicator-inset: 0px auto 0px 1px;
494
- }
495
- .vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab[aria-selected=true],
496
- .vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab:hover {
497
- --vuu-icon-color: var(--salt-text-primary-foreground);
498
- }
499
- .vuuDatagridSettingsPanel-stack > .saltToolbar {
500
- --saltToolbar-background: var(--salt-container-secondary-background);
501
- }
502
- .vuuDatagridSettingsPanel-columnPanels {
503
- display: flex;
504
- flex-flow: nowrap;
505
- gap: calc(var(--salt-size-unit) * 1);
506
- margin: var(--salt-size-unit) 0;
507
- overflow: hidden;
508
- position: relative;
509
- }
510
- .vuuDatagridSettingsPanel-columnPanels > * {
511
- transition: .3s transform ease-out;
512
- transform: translate3d(0px, 0px, 0px);
513
- }
514
- .vuuDatagridSettingsPanel-columnPanels[data-align=right] > * {
515
- transform: translate3d(-235px, 0px, 0px);
516
- }
517
- .vuuDatagridSettingsPanel-columnToolbar {
518
- --saltButton-width: 60px;
519
- }
520
- .vuuDatagridSettingsPanel-columnToolbar > .Responsive-inner {
521
- align-items: center;
522
- }
523
- .vuuDatagridSettingsPanel-buttonBar {
524
- align-items: center;
525
- border-top: solid 1px var(--salt-separable-primary-borderColor);
526
- display: flex;
527
- flex: 0 0 40px;
528
- gap: var(--salt-size-unit);
529
- justify-content: flex-end;
530
- padding: 0 var(--salt-size-unit);
531
- }
532
-
533
- /* src/datasource-stats/DatasourceStats.css */
534
- .vuuDatasourceStats {
535
- display: flex;
536
- gap: var(--salt-size-unit);
537
- }
538
-
539
- /* src/table-settings/column-type-panel/ColumnTypePanel.css */
540
- .vuuColumnTypePanel {
541
- --settings-panel-marginTop: 0px;
542
- }
543
- .vuuColumnTypePanel-renderer {
544
- --saltButton-background: var(--salt-container-secondary-background);
545
- --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);
546
- }
547
-
548
- /* src/table-settings/column-settings-panel/ColumnSettingsPanel.css */
549
- .vuuColumnSettingsPanel {
550
- --saltFormField-margin: 3px 0;
551
- --saltFormField-label-width: 80px;
552
- --saltPanel-padding: var(--salt-size-unit);
553
- align-items: flex-start;
554
- border-left: solid 1px var(--salt-container-primary-borderColor);
555
- display: flex;
556
- flex-direction: column;
557
- flex-shrink: 0;
558
- min-width: 220px;
559
- padding-left: calc(var(--salt-size-unit) * 2);
560
- width: var(--vuuColumnSettings-width, auto);
561
- }
562
- .vuuColumnSettingsPanel-columnTabs {
563
- --saltFormField-margin: 0;
564
- }
565
- .vuuColumnSettingsPanel-columnTabs .saltFormField {
566
- margin-left: 0 !important;
567
- }
568
- .vuuColumnSettingsPanel .saltPanel {
569
- --saltFormField-margin: 3px 0;
570
- margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));
571
- align-items: stretch;
572
- display: flex;
573
- flex-direction: column;
574
- gap: var(--salt-size-unit);
575
- }
576
- .vuuColumnPanelSwitch {
577
- white-space: nowrap;
578
- width: 100%;
579
- }
580
- .vuuColumnSettingsPanel .saltSwitch {
581
- margin-left: auto;
582
- }
1
+ .vuuTable td:has(> .vuuBackgroundCell){padding:0;text-align:right}.vuuBackgroundCell{padding-right:var(--salt-size-unit);position:relative;z-index:-1}.vuuBackgroundCell-flasher{color:transparent;position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1}.vuuBackgroundCell-flasher{text-align:left}.vuuBackgroundCell-flasher+.num{padding-left:8px}.right .vuuBackgroundCell-flasher{text-align:right}.right .vuuBackgroundCell-flasher+.num{padding-right:8px}.up1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup1}.up2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup2}.down1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown1}.down2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown2}.up1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup1}.up2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup2}.down1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown1}.down2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown2}.up1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup1}.up2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup2}.down1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown1}.down2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown2}@keyframes reactbgup1{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgup2{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgdown1{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactbgdown2{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactarrowup1{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowup2{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowdown1{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactarrowdown2{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactbgarrowup1{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowup2{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown1{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown2{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}.vuuProgressCell{align-items:center;display:flex}.vuuProgressCell-track{display:inline-block;flex:auto 1 1;height:4px;overflow:hidden;position:relative}.vuuProgressCell-bg{background-color:var(--salt-measured-background);display:inline-block;height:2px;left:0;position:absolute;top:1px;width:100%}.vuuProgressCell-bar{background-color:var(--salt-measured-fill);display:inline-block;height:100%;left:0;position:absolute;top:0;transform:translate(var(--progress-bar-pct, -100%));width:100%}.vuuProgressCell-text{flex:35px 0 0;text-align:right}.vuuColumnExpressionInput{--vuuFilterEditor-background: var(--salt-container-primary-background);--vuuFilterEditor-color: var(--salt-text-primary-foreground);--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);--vuuFilterEditor-fontSize: var(--salt-text-fontSize);--vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);--vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);--vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);--vuuFilterEditor-suggestion-height: 24px;--vuuFilterEditor-variableColor: blue;align-items:center;box-sizing:border-box;height:30px}.vuuColumnExpressionInput-FilterButton,.vuuColumnExpressionInput-ClearButton{--vuu-icon-size: 12px;--saltButton-width: 28px}.expression-type-container{margin:0 3px 0 auto;color:var(--salt-text-secondary-foreground)}.expression-kind{display:inline-block;width:50px}.expression-type{display:inline-block;text-align:right;width:50px}.vuuSuggestion{display:flex;align-items:center}.vuuFunctionDoc .function-heading{display:flex;gap:3px}.vuuFunctionDoc .function-name{font-style:italic}.vuuFunctionDoc .param-list{font-style:italic;color:#00f;white-space:pre}.vuuFunctionDoc .function-type{margin-left:auto}.vuuFunctionDoc .example-container{background-color:var(--salt-container-secondary-background);margin:6px 0;padding:3px}.vuuFunctionDoc .example-expression{font-family:var(--salt-typography-fontFamily-code);margin-left:8px;margin-top:6px}.vuuFunctionDoc .example-result{margin-left:8px;margin-top:6px}.vuuColumnListItem{--svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z"/></svg>');align-items:center;padding:0!important}.vuuColumnListItem-calculated{--vuu-icon-size: 12px;--column-icon-svg: var(--svg-function);--calculated-background: var(--salt-text-secondary-foreground)}.vuuColumnListItem-hidden{--vuu-icon-size: 14px;--hidden-background: var(--salt-text-secondary-foreground);--hidden-icon-svg: var(--svg-eye-hidden)}.vuuColumnListItem-label{flex:1 1 auto}.vuuColumnListItem-iconType{background-color:var(--calculated-background, transparent);display:inline-block;height:100%;mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnListItem-iconHidden{background-color:var(--hidden-background, transparent);display:inline-block;height:100%;mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnPicker{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-left: 0px;--vuu-icon-size: 12px;display:flex;flex-shrink:0;gap:calc(var(--salt-size-unit) * 2);width:var(--vuuColumnPicker-width, 100%)}.vuuColumnPicker-listColumn{display:flex;flex:1;flex-direction:column}.vuuColumnPicker-listContainer{border:solid 1px var(--salt-container-primary-borderColor);margin-right:var(--salt-size-unit)}.vuuColumnPicker-defineColumn{align-items:center;border-top:solid 1px var(--salt-container-primary-borderColor);display:flex;flex:0 0 calc(100% - var(--salt-size-unit));gap:var(--salt-size-unit);transition:.2s height;margin-top:12px;height:48px}[data-align=right] .vuuColumnPicker-defineColumn{border-top:none;height:0}.vuuColumnPicker-addCalculatedColumn{margin-left:auto;margin-right:var(--salt-size-unit);width:28px}.vuuGridSettingsPanel{--saltFormField-label-width: 150px}.vuuCalculatedColumnPanel{display:flex;flex-direction:column;gap:var(--salt-size-unit)}.vuuDatagridSettingsPanel{--svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="3" width="5" x="1" y="10" /><rect height="3" width="5" x="1" y="6" /><rect height="3" width="10" x="7" y="10" /><rect height="3" width="10" x="7" y="6" /><path d="M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z" /><path d="M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z" /><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z" /></svg>');--svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');--svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z" /><path d="M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z" /><path d="M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z" /><path d="M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z" /></svg>');--saltToolbar-background: transparent;--vuuView-borderStyle: solid;--vuuColumnPicker-width: 100%;--vuuColumnSettings-width: 50%;background-color:var(--salt-container-primary-background);display:flex;flex-direction:column;height:442px;width:520px}[data-icon=column-chooser]{--vuu-icon-svg: var(--svg-column-chooser)}[data-icon=column-settings]{--vuu-icon-svg: var(--svg-column-settings)}[data-icon=table-settings]{--vuu-icon-svg: var(--svg-table-settings)}[data-icon=define-column]{--vuu-icon-svg: var(--svg-function)}.vuuDatagridSettingsPanel-header{flex:0 0 50px}.vuuDatagridSettingsPanel-stack{flex:1;gap:24px;overflow:hidden}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background);--vuu-icon-color: var(--salt-text-secondary-foreground);--vuu-icon-size: 18px;--vuu-icon-height: 36px;--vuu-icon-width: 36px;border-bottom:none}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTabstrip{--tabs-activationIndicator-inset: 0px auto 0px 1px}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab[aria-selected=true],.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab:hover{--vuu-icon-color: var(--salt-text-primary-foreground)}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background)}.vuuDatagridSettingsPanel-columnPanels{display:flex;flex-flow:nowrap;gap:calc(var(--salt-size-unit) * 1);margin:var(--salt-size-unit) 0;overflow:hidden;position:relative}.vuuDatagridSettingsPanel-columnPanels>*{transition:.3s transform ease-out;transform:translateZ(0)}.vuuDatagridSettingsPanel-columnPanels[data-align=right]>*{transform:translate3d(-235px,0,0)}.vuuDatagridSettingsPanel-columnToolbar{--saltButton-width: 60px}.vuuDatagridSettingsPanel-columnToolbar>.Responsive-inner{align-items:center}.vuuDatagridSettingsPanel-buttonBar{align-items:center;border-top:solid 1px var(--salt-separable-primary-borderColor);display:flex;flex:0 0 40px;gap:var(--salt-size-unit);justify-content:flex-end;padding:0 var(--salt-size-unit)}.vuuDatasourceStats{display:flex;gap:var(--salt-size-unit)}.vuuColumnTypePanel{--settings-panel-marginTop: 0px}.vuuColumnTypePanel-renderer{--saltButton-background: var(--salt-container-secondary-background);--saltButton-background-hover: var(--salt-actionable-secondary-background-hover)}.vuuColumnSettingsPanel{--saltFormField-margin: 3px 0;--saltFormField-label-width: 80px;--saltPanel-padding: var(--salt-size-unit);align-items:flex-start;border-left:solid 1px var(--salt-container-primary-borderColor);display:flex;flex-direction:column;flex-shrink:0;min-width:220px;padding-left:calc(var(--salt-size-unit) * 2);width:var(--vuuColumnSettings-width, auto)}.vuuColumnSettingsPanel-columnTabs{--saltFormField-margin: 0}.vuuColumnSettingsPanel-columnTabs .saltFormField{margin-left:0!important}.vuuColumnSettingsPanel .saltPanel{--saltFormField-margin: 3px 0;margin-top:var(--settings-panel-marginTop, var(--salt-size-unit));align-items:stretch;display:flex;flex-direction:column;gap:var(--salt-size-unit)}.vuuColumnPanelSwitch{white-space:nowrap;width:100%}.vuuColumnSettingsPanel .saltSwitch{margin-left:auto}
583
2
  /*# sourceMappingURL=index.css.map */