playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.alphaforaudiences7167
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +3 -23
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +1 -11
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -60
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
- data/dist/chunks/{_typeahead-HqfDnjRe.js → _typeahead-7W5Ha5Td.js} +1 -1
- data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +16 -21
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
- data/dist/chunks/_weekday_stacked-CPNaHtxQ.js +0 -45
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
|
4
|
+
data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
|
7
|
+
data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useContext
|
1
|
+
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
3
|
import { flexRender, Row, Cell } from "@tanstack/react-table"
|
4
4
|
|
@@ -32,21 +32,9 @@ export const RegularTableView = ({
|
|
32
32
|
table,
|
33
33
|
selectableRows,
|
34
34
|
hasAnySubRows,
|
35
|
-
|
35
|
+
isPinnedLeft = false,
|
36
36
|
} = useContext(AdvancedTableContext)
|
37
37
|
|
38
|
-
|
39
|
-
useEffect(() => {
|
40
|
-
if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
|
41
|
-
stickyLeftColumn.forEach((columnId) => {
|
42
|
-
const column = table.getColumn(columnId);
|
43
|
-
if (column && column.getCanPin()) {
|
44
|
-
column.pin('left');
|
45
|
-
}
|
46
|
-
});
|
47
|
-
}
|
48
|
-
},[stickyLeftColumn, table]);
|
49
|
-
|
50
38
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
51
39
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
52
40
|
|
@@ -94,7 +82,7 @@ export const RegularTableView = ({
|
|
94
82
|
{row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
|
95
83
|
const isPinnedLeft = columnPinning.left.includes(cell.column.id);
|
96
84
|
const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
|
97
|
-
|
85
|
+
|
98
86
|
return (
|
99
87
|
<td
|
100
88
|
align="right"
|
@@ -102,17 +90,9 @@ export const RegularTableView = ({
|
|
102
90
|
`${cell.id}-cell position_relative`,
|
103
91
|
isChrome() ? "chrome-styles" : "",
|
104
92
|
isPinnedLeft && 'pinned-left',
|
105
|
-
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
|
106
93
|
isLastCell && 'last-cell',
|
107
94
|
)}
|
108
95
|
key={`${cell.id}-data`}
|
109
|
-
style={{
|
110
|
-
left: isPinnedLeft
|
111
|
-
? i === 1 //Accounting for set min-width for first column
|
112
|
-
? '180px'
|
113
|
-
: `${column.getStart("left")}px`
|
114
|
-
: undefined,
|
115
|
-
}}
|
116
96
|
>
|
117
97
|
{collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
|
118
98
|
<span id={`${cell.id}-span`}>
|
@@ -45,7 +45,6 @@ export const TableHeaderCell = ({
|
|
45
45
|
selectableRows,
|
46
46
|
hasAnySubRows,
|
47
47
|
showActionsBar,
|
48
|
-
stickyLeftColumn,
|
49
48
|
inlineRowLoading,
|
50
49
|
isActionBarVisible,
|
51
50
|
} = useContext(AdvancedTableContext);
|
@@ -77,9 +76,7 @@ const cellClassName = classnames(
|
|
77
76
|
`${isChrome() ? "chrome-styles" : ""}`,
|
78
77
|
`${enableSorting ? "table-header-cells-active" : ""}`,
|
79
78
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
80
|
-
isLastHeaderCell ? "last-header-cell" : ""
|
81
|
-
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
|
82
|
-
|
79
|
+
isLastHeaderCell ? "last-header-cell" : ""
|
83
80
|
);
|
84
81
|
|
85
82
|
const cellId = `${loading ?
|
@@ -114,13 +111,6 @@ const isToggleExpansionEnabled =
|
|
114
111
|
colSpan={header?.colSpan}
|
115
112
|
id={cellId}
|
116
113
|
key={`${header?.id}-header`}
|
117
|
-
style={{
|
118
|
-
left: isPinnedLeft
|
119
|
-
? header?.index === 1 //Accounting for set min-width for first column
|
120
|
-
? '180px'
|
121
|
-
: `${header?.column.getStart("left")}px`
|
122
|
-
: undefined,
|
123
|
-
}}
|
124
114
|
>
|
125
115
|
{header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
|
126
116
|
<Flex alignItems="center">
|
@@ -8,7 +8,6 @@
|
|
8
8
|
@import "../tokens/screen_sizes";
|
9
9
|
@import "../tokens/shadows";
|
10
10
|
@import "../tokens/positioning";
|
11
|
-
@import "./scss_partials/advanced_table_sticky_mixin";
|
12
11
|
|
13
12
|
.pb_advanced_table {
|
14
13
|
$border-color: 1px solid $border_light;
|
@@ -94,8 +93,8 @@
|
|
94
93
|
border-right: 1px solid $border_light !important;
|
95
94
|
}
|
96
95
|
.table-header-cells-custom {
|
97
|
-
text-align:
|
98
|
-
[class^=
|
96
|
+
text-align:center;
|
97
|
+
[class^=pb_checkbox_kit] .pb_checkbox_label {
|
99
98
|
padding-left: 0px;
|
100
99
|
}
|
101
100
|
}
|
@@ -105,7 +104,7 @@
|
|
105
104
|
}
|
106
105
|
// Right align header content of first data column in selectable row no subrow setup
|
107
106
|
&.selectable-rows-enabled {
|
108
|
-
tr {
|
107
|
+
tr {
|
109
108
|
th:nth-child(2),
|
110
109
|
.pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
|
111
110
|
justify-content: flex-end;
|
@@ -123,7 +122,7 @@
|
|
123
122
|
}
|
124
123
|
|
125
124
|
// Set fixed width for checkbox column
|
126
|
-
&.table-header-cells-custom,
|
125
|
+
&.table-header-cells-custom,
|
127
126
|
&.checkbox-cell.checkbox-cell-header {
|
128
127
|
width: 40px !important;
|
129
128
|
min-width: 40px !important;
|
@@ -146,7 +145,7 @@
|
|
146
145
|
.checkbox-cell {
|
147
146
|
display: flex;
|
148
147
|
justify-content: center;
|
149
|
-
[class^=
|
148
|
+
[class^=pb_checkbox_kit] .pb_checkbox_label {
|
150
149
|
padding-left: 0px;
|
151
150
|
}
|
152
151
|
}
|
@@ -174,7 +173,7 @@
|
|
174
173
|
}
|
175
174
|
}
|
176
175
|
td {
|
177
|
-
[class^=
|
176
|
+
[class^=pb_text_input_kit] .text_input_wrapper input {
|
178
177
|
padding: 0 $space_xxs;
|
179
178
|
font-size: 14px;
|
180
179
|
text-align: right;
|
@@ -231,12 +230,12 @@
|
|
231
230
|
max-height: 1920px;
|
232
231
|
overflow-y: auto;
|
233
232
|
}
|
234
|
-
|
233
|
+
|
235
234
|
// Fullscreen
|
236
235
|
&.advanced-table-allow-fullscreen {
|
237
236
|
transition: all 0.3s ease;
|
238
237
|
}
|
239
|
-
|
238
|
+
|
240
239
|
&.advanced-table-fullscreen {
|
241
240
|
background-color: $bg_light;
|
242
241
|
box-sizing: border-box;
|
@@ -249,10 +248,7 @@
|
|
249
248
|
z-index: $z_10;
|
250
249
|
|
251
250
|
.pb_table {
|
252
|
-
th,
|
253
|
-
td,
|
254
|
-
div,
|
255
|
-
button {
|
251
|
+
th, td, div, button {
|
256
252
|
font-size: calc(100%);
|
257
253
|
}
|
258
254
|
box-sizing: border-box;
|
@@ -270,7 +266,7 @@
|
|
270
266
|
}
|
271
267
|
}
|
272
268
|
}
|
273
|
-
|
269
|
+
|
274
270
|
.advanced-table-fullscreen-header {
|
275
271
|
background-color: $white;
|
276
272
|
height: 44px;
|
@@ -376,32 +372,78 @@
|
|
376
372
|
width: 2px;
|
377
373
|
}
|
378
374
|
|
379
|
-
// Sticky Left Columns Styling
|
380
|
-
&[class*="advanced-table-sticky-left-columns"] {
|
381
|
-
overflow-x: scroll;
|
382
|
-
.sticky-left {
|
383
|
-
position: sticky !important;
|
384
|
-
z-index: 2;
|
385
|
-
background-color: $white;
|
386
|
-
box-shadow: $shadow_deep;
|
387
|
-
}
|
388
|
-
@include advanced-table-sticky-mixin(
|
389
|
-
$border_light,
|
390
|
-
$white,
|
391
|
-
lighten($silver, $opacity_7)
|
392
|
-
);
|
393
|
-
}
|
394
|
-
|
395
375
|
// Responsive Styles
|
396
376
|
@media only screen and (max-width: $screen-xl-min) {
|
397
377
|
&[class*="advanced-table-responsive-scroll"] {
|
378
|
+
border-radius: 4px;
|
379
|
+
box-shadow: 1px 0 0 0px $border_light,
|
380
|
+
-1px 0 0 0px $border_light;
|
381
|
+
display: block;
|
398
382
|
overflow-x: auto;
|
399
383
|
width: 100%;
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
384
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
385
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
386
|
+
border-left-width: 0px !important;
|
387
|
+
}
|
388
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
389
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
390
|
+
border-right-width: 0px;
|
391
|
+
}
|
392
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
393
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
394
|
+
border-radius: 0 0 0 0;
|
395
|
+
}
|
396
|
+
.table-header-cells:first-child,
|
397
|
+
td:first-child,
|
398
|
+
.pb_table_td:first-child,
|
399
|
+
.checkbox-cell.checkbox-cell-header:first-child,
|
400
|
+
[class*="pinned-left"] {
|
401
|
+
background-color: $white;
|
402
|
+
box-shadow: $shadow_deep !important;
|
403
|
+
position: sticky !important;
|
404
|
+
left: 0;
|
405
|
+
z-index: 2;
|
406
|
+
}
|
407
|
+
.bg-silver td:first-child {
|
408
|
+
background-color: lighten($silver, $opacity_7);
|
409
|
+
}
|
410
|
+
.bg-white td:first-child {
|
411
|
+
background-color: $white;
|
412
|
+
}
|
413
|
+
|
414
|
+
.virtualized-table-row {
|
415
|
+
&.bg-silver td:first-child {
|
416
|
+
background-color: lighten($silver, $opacity_7);
|
417
|
+
}
|
418
|
+
&.bg-white td:first-child {
|
419
|
+
background-color: $white;
|
420
|
+
}
|
421
|
+
&.bg-row-selection td:first-child {
|
422
|
+
background-color: $info_subtle;
|
423
|
+
}
|
424
|
+
}
|
425
|
+
|
426
|
+
.row-selection-actions-card {
|
427
|
+
border-right-width: 0px;
|
428
|
+
border-left-width: 0px;
|
429
|
+
position: sticky;
|
430
|
+
top: 0;
|
431
|
+
left: 0;
|
432
|
+
border-radius: unset;
|
433
|
+
}
|
434
|
+
.checkbox-cell {
|
435
|
+
display: table-cell !important;
|
436
|
+
}
|
437
|
+
.sticky-header {
|
438
|
+
thead {
|
439
|
+
th:first-child {
|
440
|
+
box-shadow: 1px 0 10px -2px $border_light !important;
|
441
|
+
}
|
442
|
+
}
|
443
|
+
.pb_advanced_table_header {
|
444
|
+
box-shadow: none !important;
|
445
|
+
}
|
446
|
+
}
|
405
447
|
}
|
406
448
|
}
|
407
449
|
@media only screen and (min-width: $screen-xl-min) {
|
@@ -438,9 +480,7 @@
|
|
438
480
|
}
|
439
481
|
}
|
440
482
|
|
441
|
-
.table-header-cells:first-child,
|
442
|
-
td:first-child,
|
443
|
-
.pb_table_td:first-child {
|
483
|
+
.table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
|
444
484
|
box-shadow: 1px 0px 0px 0px $border_dark !important;
|
445
485
|
}
|
446
486
|
|
@@ -448,14 +488,12 @@
|
|
448
488
|
background-color: $border_dark !important;
|
449
489
|
}
|
450
490
|
|
451
|
-
.sort-button-icon,
|
452
|
-
.header-sort-button > div,
|
453
|
-
.pb_th_link {
|
491
|
+
.sort-button-icon, .header-sort-button > div, .pb_th_link {
|
454
492
|
color: $white !important;
|
455
493
|
}
|
456
494
|
|
457
495
|
.gray-icon {
|
458
|
-
color:
|
496
|
+
color: $text_dk_light !important;
|
459
497
|
}
|
460
498
|
|
461
499
|
.sticky-header {
|
@@ -498,33 +536,63 @@
|
|
498
536
|
z-index: $z_10;
|
499
537
|
}
|
500
538
|
|
501
|
-
&[class*="advanced-table-sticky-left-columns"] {
|
502
|
-
.sticky-left {
|
503
|
-
background-color: $bg_dark;
|
504
|
-
}
|
505
|
-
@include advanced-table-sticky-mixin(
|
506
|
-
$border_dark,
|
507
|
-
$bg_dark_card,
|
508
|
-
$bg_dark
|
509
|
-
);
|
510
|
-
}
|
511
|
-
|
512
539
|
// Dark Mode Responsive Styles
|
513
540
|
@media only screen and (max-width: $screen-xl-min) {
|
514
541
|
&[class*="advanced-table-responsive-scroll"] {
|
542
|
+
border-radius: 4px;
|
543
|
+
box-shadow: 1px 0 0 0px $border_dark,
|
544
|
+
-1px 0 0 0px $border_dark;
|
545
|
+
display: block;
|
546
|
+
overflow-x: scroll;
|
547
|
+
width: 100%;
|
548
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
549
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
550
|
+
border-left-width: 0px;
|
551
|
+
}
|
552
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
553
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
554
|
+
border-right-width: 0px;
|
555
|
+
}
|
556
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
557
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
558
|
+
border-radius: 0 0 0 0;
|
559
|
+
}
|
560
|
+
.table-header-cells:first-child,
|
561
|
+
td:first-child,
|
562
|
+
.pb_table_td:first-child,
|
563
|
+
.checkbox-cell.checkbox-cell-header:first-child,
|
564
|
+
[class*="pinned-left"] {
|
565
|
+
background: $bg_dark_card;
|
566
|
+
border-right: $border_dark;
|
567
|
+
box-shadow: $shadow_deep !important;
|
568
|
+
position: sticky !important;
|
569
|
+
}
|
570
|
+
.bg-silver td:first-child {
|
571
|
+
background-color: $bg_dark;
|
572
|
+
}
|
573
|
+
.bg-white td:first-child {
|
574
|
+
background-color: $bg_dark_card;
|
575
|
+
}
|
576
|
+
|
577
|
+
// Dark mode virtualized rows
|
578
|
+
.virtualized-table-row {
|
579
|
+
&.bg-silver td:first-child {
|
580
|
+
background-color: $bg_dark;
|
581
|
+
}
|
582
|
+
&.bg-white td:first-child {
|
583
|
+
background-color: $bg_dark_card;
|
584
|
+
}
|
585
|
+
}
|
586
|
+
|
515
587
|
.sticky-header {
|
516
588
|
thead {
|
517
589
|
th:first-child {
|
518
|
-
background: $
|
590
|
+
background: $bg_dark;
|
591
|
+
box-shadow: 1px 0 10px -2px $border_dark !important;
|
519
592
|
}
|
520
593
|
}
|
521
594
|
}
|
522
|
-
@include advanced-table-sticky-mixin(
|
523
|
-
$border_dark,
|
524
|
-
$bg_dark_card,
|
525
|
-
$bg_dark
|
526
|
-
);
|
527
595
|
}
|
528
596
|
}
|
529
597
|
}
|
530
|
-
}
|
598
|
+
}
|
@@ -87,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
87
87
|
showActionsBar = true,
|
88
88
|
selectableRows,
|
89
89
|
sortControl,
|
90
|
-
stickyLeftColumn,
|
91
90
|
tableData,
|
92
91
|
tableOptions,
|
93
92
|
tableProps,
|
@@ -234,7 +233,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
234
233
|
'advanced-table-fullscreen': isFullscreen,
|
235
234
|
'advanced-table-allow-fullscreen': allowFullScreen
|
236
235
|
},
|
237
|
-
{'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
|
238
236
|
globalProps(props),
|
239
237
|
className
|
240
238
|
);
|
@@ -293,7 +291,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
293
291
|
setExpanded={setExpanded}
|
294
292
|
showActionsBar={showActionsBar}
|
295
293
|
sortControl={sortControl}
|
296
|
-
stickyLeftColumn={stickyLeftColumn}
|
297
294
|
subRowHeaders={tableOptions?.subRowHeaders}
|
298
295
|
table={table}
|
299
296
|
tableContainerRef={tableWrapperRef}
|
@@ -25,7 +25,6 @@ examples:
|
|
25
25
|
- advanced_table_collapsible_trail: Collapsible Trail
|
26
26
|
- advanced_table_table_options: Table Options
|
27
27
|
- advanced_table_table_props: Table Props
|
28
|
-
- advanced_table_sticky_columns: Sticky Columns
|
29
28
|
- advanced_table_table_props_sticky_header: Table Props Sticky Header
|
30
29
|
- advanced_table_inline_row_loading: Inline Row Loading
|
31
30
|
- advanced_table_responsive: Responsive Tables
|
@@ -22,5 +22,4 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
|
|
22
22
|
export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
24
24
|
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
25
|
-
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
26
|
-
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
25
|
+
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
@@ -1,6 +1,5 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
@import "../tokens/opacity";
|
3
|
-
@import "../tokens/border_radius";
|
4
3
|
|
5
4
|
.pb_draggable_container {
|
6
5
|
.pb_draggable_item {
|
@@ -35,7 +34,7 @@
|
|
35
34
|
width: 100%;
|
36
35
|
height: 100%;
|
37
36
|
border: 2px dashed $neutral;
|
38
|
-
border-radius: $
|
37
|
+
border-radius: $border-radius-sm;
|
39
38
|
box-sizing: border-box;
|
40
39
|
z-index: 10;
|
41
40
|
pointer-events: none;
|
@@ -65,7 +64,7 @@
|
|
65
64
|
width: 100%;
|
66
65
|
height: 100%;
|
67
66
|
background-color: rgba($neutral, $opacity_5);
|
68
|
-
border-radius: $
|
67
|
+
border-radius: $border-radius-sm;
|
69
68
|
z-index: 10;
|
70
69
|
pointer-events: none;
|
71
70
|
}
|
@@ -74,70 +73,48 @@
|
|
74
73
|
&.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
|
75
74
|
&.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
|
76
75
|
}
|
77
|
-
|
78
|
-
|
79
|
-
// Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
|
80
|
-
&.line_vertical {
|
81
|
-
.pb_draggable_item {
|
82
|
-
position: relative;
|
76
|
+
|
77
|
+
// Line variant
|
83
78
|
&.drop_zone_line {
|
84
|
-
// Hide the original content to show the line
|
85
|
-
position: relative;
|
86
|
-
z-index: 2;
|
79
|
+
// Hide the original content to show the line
|
87
80
|
& > * {
|
88
81
|
opacity: 0;
|
89
82
|
}
|
90
|
-
|
83
|
+
|
91
84
|
// Style for horizontal line (default)
|
92
85
|
&::before {
|
93
86
|
content: '';
|
94
87
|
position: absolute;
|
95
88
|
left: 0;
|
96
89
|
top: 0;
|
97
|
-
width:
|
98
|
-
height:
|
90
|
+
width: 4px;
|
91
|
+
height: 100%;
|
99
92
|
background-color: $neutral;
|
100
|
-
border-radius:
|
93
|
+
border-radius: 1000px;
|
101
94
|
z-index: 10;
|
102
95
|
pointer-events: none;
|
103
|
-
transform: translateY(-50%);
|
104
96
|
}
|
105
|
-
|
97
|
+
|
98
|
+
// Apply color variants
|
106
99
|
&.drop_zone_color_primary::before { background-color: $primary; }
|
107
100
|
&.drop_zone_color_purple::before { background-color: $purple; }
|
108
101
|
}
|
109
102
|
}
|
110
103
|
}
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
104
|
+
}
|
105
|
+
|
106
|
+
// Support for vertical layouts (horizontal line)
|
107
|
+
.pb_draggable_container.vertical {
|
108
|
+
.pb_draggable_item {
|
109
|
+
&.is_dragging {
|
110
|
+
// Line variant for vertical layouts (horizontal line)
|
115
111
|
&.drop_zone_line {
|
116
|
-
position: relative;
|
117
|
-
z-index: 2;
|
118
|
-
& > * {
|
119
|
-
opacity: 0;
|
120
|
-
}
|
121
|
-
width: 4px;
|
122
|
-
height: auto;
|
123
|
-
// Style for vertical line
|
124
112
|
&::before {
|
125
|
-
|
126
|
-
|
113
|
+
width: 100%;
|
114
|
+
height: 4px;
|
127
115
|
left: 0;
|
128
116
|
top: 0;
|
129
|
-
width: 4px;
|
130
|
-
height: 100%;
|
131
|
-
background-color: $neutral;
|
132
|
-
border-radius: $border_radius_rounded;
|
133
|
-
z-index: 10;
|
134
|
-
pointer-events: none;
|
135
|
-
transform: translateX(-50%);
|
136
117
|
}
|
137
|
-
|
138
|
-
// Apply color variants to the ::before element
|
139
|
-
&.drop_zone_color_primary::before { background-color: $primary; }
|
140
|
-
&.drop_zone_color_purple::before { background-color: $purple; }
|
141
118
|
}
|
142
119
|
}
|
143
120
|
}
|