playbook_ui 13.19.0.pre.alpha.play1141iconkitusinglibrary2264 → 13.20.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +18 -6
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
- data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
- data/app/pb_kits/playbook/pb_table/table.rb +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +9 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
|
4
|
+
data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
|
7
|
+
data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
|
@@ -20,7 +20,7 @@ import AdvancedTableContext from "./Context/AdvancedTableContext";
|
|
20
20
|
import { TableHeader } from "./SubKits/TableHeader";
|
21
21
|
import { TableBody } from "./SubKits/TableBody";
|
22
22
|
|
23
|
-
import { DataType
|
23
|
+
import { DataType } from "./Utilities/types";
|
24
24
|
|
25
25
|
type AdvancedTableProps = {
|
26
26
|
aria?: { [key: string]: string };
|
@@ -80,7 +80,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
80
80
|
? expandedControl.onChange
|
81
81
|
: setLocalExpanded;
|
82
82
|
|
83
|
-
const columnHelper = createColumnHelper
|
83
|
+
const columnHelper = createColumnHelper();
|
84
84
|
|
85
85
|
//Create cells for first columns
|
86
86
|
const createCellFunction = (cellAccessors: string[]) => {
|
@@ -163,7 +163,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
163
163
|
data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
|
164
164
|
columns,
|
165
165
|
onExpandedChange: setExpanded,
|
166
|
-
getSubRows: (row) => row.children,
|
166
|
+
getSubRows: (row: DataType) => row.children,
|
167
167
|
getCoreRowModel: getCoreRowModel(),
|
168
168
|
getExpandedRowModel: getExpandedRowModel(),
|
169
169
|
getSortedRowModel: getSortedRowModel(),
|
@@ -192,7 +192,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
192
192
|
const handleExpandOrCollapse = (row: Row<DataType>) => {
|
193
193
|
onToggleExpansionClick && onToggleExpansionClick(row);
|
194
194
|
|
195
|
-
const expandedState = expanded
|
195
|
+
const expandedState = expanded;
|
196
196
|
const targetParent = row?.parentId;
|
197
197
|
return setExpanded(
|
198
198
|
updateExpandAndCollapseState(tableRows, expandedState, targetParent)
|
@@ -5,67 +5,60 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
5
5
|
import PbTable from '.'
|
6
6
|
|
7
7
|
type TableProps = {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
8
|
+
aria?: { [key: string]: string },
|
9
|
+
children: React.ReactNode[] | React.ReactNode,
|
10
|
+
className: string,
|
11
|
+
collapse?: "sm" | "md" | "lg",
|
12
|
+
container?: boolean,
|
13
|
+
dark?: boolean,
|
14
|
+
data?: { [key: string]: string },
|
15
|
+
dataTable: boolean,
|
16
|
+
disableHover?: boolean,
|
17
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
18
|
+
id?: string,
|
19
|
+
responsive?: "collapse" | "scroll" | "none",
|
20
|
+
singleLine?: boolean,
|
21
|
+
size?: "sm" | "md" | "lg",
|
22
|
+
sticky?: boolean,
|
23
|
+
striped?: boolean,
|
24
|
+
tag?: "table" | "div",
|
25
|
+
verticalBorder?: boolean,
|
25
26
|
} & GlobalProps
|
26
27
|
|
27
28
|
const Table = (props: TableProps) => {
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
29
|
+
const {
|
30
|
+
aria = {},
|
31
|
+
children,
|
32
|
+
className,
|
33
|
+
collapse = 'sm',
|
34
|
+
container = true,
|
35
|
+
dark,
|
36
|
+
data = {},
|
37
|
+
dataTable = false,
|
38
|
+
disableHover = false,
|
39
|
+
htmlOptions = {},
|
40
|
+
id,
|
41
|
+
responsive = 'collapse',
|
42
|
+
singleLine = false,
|
43
|
+
size = 'sm',
|
44
|
+
sticky = false,
|
45
|
+
striped = false,
|
46
|
+
tag = 'table',
|
47
|
+
verticalBorder = false,
|
48
|
+
} = props
|
47
49
|
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
50
|
+
const ariaProps = buildAriaProps(aria)
|
51
|
+
const dataProps = buildDataProps(data)
|
52
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
53
|
+
const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
|
54
|
+
const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
|
55
|
+
const isTableTag = tag === 'table'
|
53
56
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
return (
|
60
|
-
<table
|
61
|
-
{...ariaProps}
|
62
|
-
{...dataProps}
|
63
|
-
{...htmlProps}
|
64
|
-
className={classnames(
|
65
|
-
'pb_table',
|
66
|
-
`table-${size}`,
|
67
|
-
`table-responsive-${responsive}`,
|
68
|
-
{
|
57
|
+
const classNames = classnames(
|
58
|
+
'pb_table',
|
59
|
+
`table-${size}`,
|
60
|
+
`table-responsive-${responsive}`,
|
61
|
+
{
|
69
62
|
'table-card': container,
|
70
63
|
'table-dark': dark,
|
71
64
|
'data_table': dataTable,
|
@@ -73,17 +66,43 @@ const Table = (props: TableProps) => {
|
|
73
66
|
'no-hover': disableHover,
|
74
67
|
'sticky-header': sticky,
|
75
68
|
'striped': striped,
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
69
|
+
},
|
70
|
+
globalProps(props),
|
71
|
+
tableCollapseCss,
|
72
|
+
verticalBorderCss,
|
73
|
+
className
|
74
|
+
)
|
75
|
+
|
76
|
+
useEffect(() => {
|
77
|
+
const instance = new PbTable()
|
78
|
+
instance.connect()
|
79
|
+
}, [])
|
80
|
+
|
81
|
+
return (
|
82
|
+
<>
|
83
|
+
{isTableTag ? (
|
84
|
+
<table
|
85
|
+
{...ariaProps}
|
86
|
+
{...dataProps}
|
87
|
+
{...htmlProps}
|
88
|
+
className={classNames}
|
89
|
+
id={id}
|
90
|
+
>
|
91
|
+
{children}
|
92
|
+
</table>
|
93
|
+
) : (
|
94
|
+
<div
|
95
|
+
{...ariaProps}
|
96
|
+
{...dataProps}
|
97
|
+
{...htmlProps}
|
98
|
+
className={classNames}
|
99
|
+
id={id}
|
100
|
+
>
|
101
|
+
{children}
|
102
|
+
</div>
|
103
|
+
)}
|
104
|
+
</>
|
105
|
+
)
|
87
106
|
}
|
88
107
|
|
89
108
|
export default Table
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
|
2
|
+
<div class="pb_table_thead">
|
3
|
+
<div class="pb_table_tr">
|
4
|
+
<div class="pb_table_th">Column 1</div>
|
5
|
+
<div class="pb_table_th">Column 2</div>
|
6
|
+
<div class="pb_table_th">Column 3</div>
|
7
|
+
<div class="pb_table_th">Column 4</div>
|
8
|
+
<div class="pb_table_th">Column 5</div>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
<div class="pb_table_tbody">
|
12
|
+
<div class="pb_table_tr">
|
13
|
+
<div class="pb_table_td">Value 1</div>
|
14
|
+
<div class="pb_table_td">Value 2</div>
|
15
|
+
<div class="pb_table_td">Value 3</div>
|
16
|
+
<div class="pb_table_td">Value 4</div>
|
17
|
+
<div class="pb_table_td">Value 5</div>
|
18
|
+
</div>
|
19
|
+
<div class="pb_table_tr">
|
20
|
+
<div class="pb_table_td">Value 1</div>
|
21
|
+
<div class="pb_table_td">Value 2</div>
|
22
|
+
<div class="pb_table_td">Value 3</div>
|
23
|
+
<div class="pb_table_td">Value 4</div>
|
24
|
+
<div class="pb_table_td">Value 5</div>
|
25
|
+
</div>
|
26
|
+
<div class="pb_table_tr">
|
27
|
+
<div class="pb_table_td">Value 1</div>
|
28
|
+
<div class="pb_table_td">Value 2</div>
|
29
|
+
<div class="pb_table_td">Value 3</div>
|
30
|
+
<div class="pb_table_td">Value 4</div>
|
31
|
+
<div class="pb_table_td">Value 5</div>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
<% end %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Table from '../_table'
|
3
|
+
|
4
|
+
const TableDiv = (props) => {
|
5
|
+
return (
|
6
|
+
<Table
|
7
|
+
size="sm"
|
8
|
+
tag="div"
|
9
|
+
{...props}
|
10
|
+
>
|
11
|
+
<div className="pb_table_thead">
|
12
|
+
<div className="pb_table_tr">
|
13
|
+
<div className="pb_table_th">{'Column 1'}</div>
|
14
|
+
<div className="pb_table_th">{'Column 2'}</div>
|
15
|
+
<div className="pb_table_th">{'Column 3'}</div>
|
16
|
+
<div className="pb_table_th">{'Column 4'}</div>
|
17
|
+
<div className="pb_table_th">{'Column 5'}</div>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
<div className="pb_table_tbody">
|
21
|
+
<div className="pb_table_tr">
|
22
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
23
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
24
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
25
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
26
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
27
|
+
</div>
|
28
|
+
<div className="pb_table_tr">
|
29
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
30
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
31
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
32
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
33
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
34
|
+
</div>
|
35
|
+
<div className="pb_table_tr">
|
36
|
+
<div className="pb_table_td">{'Value 1'}</div>
|
37
|
+
<div className="pb_table_td">{'Value 2'}</div>
|
38
|
+
<div className="pb_table_td">{'Value 3'}</div>
|
39
|
+
<div className="pb_table_td">{'Value 4'}</div>
|
40
|
+
<div className="pb_table_td">{'Value 5'}</div>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
</Table>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
export default TableDiv
|
@@ -1,5 +1,6 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
+
# - table_div: Div
|
3
4
|
- table_sm: Small
|
4
5
|
- table_md: Medium
|
5
6
|
- table_lg: Large
|
@@ -26,6 +27,7 @@ examples:
|
|
26
27
|
- table_striped: Striped Table
|
27
28
|
|
28
29
|
react:
|
30
|
+
# - table_div: Div
|
29
31
|
- table_sm: Small
|
30
32
|
- table_md: Medium
|
31
33
|
- table_lg: Large
|
@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
|
|
21
21
|
export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
23
23
|
export { default as TableStriped } from './_table_striped.jsx'
|
24
|
+
export { default as TableDiv } from './_table_div.jsx'
|
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead {
|
14
|
-
tr {
|
13
|
+
thead, .pb_table_thead {
|
14
|
+
tr, .pb_table_tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th {
|
19
|
+
th, .pb_table_th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody {
|
26
|
-
tr {
|
27
|
-
td {
|
25
|
+
tbody, .pb_table_tbody {
|
26
|
+
tr, .pb_table_tr {
|
27
|
+
td, .pb_table_td {
|
28
28
|
display: block;
|
29
29
|
visibility: visible;
|
30
30
|
border-left-width: 1px !important;
|
@@ -63,7 +63,7 @@
|
|
63
63
|
}
|
64
64
|
|
65
65
|
&:first-child {
|
66
|
-
td {
|
66
|
+
td, .pb_table_td {
|
67
67
|
&:first-child {
|
68
68
|
margin-top: $space-xs !important;
|
69
69
|
}
|
@@ -74,9 +74,9 @@
|
|
74
74
|
&.table-card {
|
75
75
|
background: none !important;
|
76
76
|
|
77
|
-
tbody {
|
78
|
-
tr {
|
79
|
-
td {
|
77
|
+
tbody, .pb_table_tbody {
|
78
|
+
tr, .pb_table_tr {
|
79
|
+
td, .pb_table_td {
|
80
80
|
background: $white !important;
|
81
81
|
border-left-width: 1px !important;
|
82
82
|
border-right-width: 1px !important;
|
@@ -98,8 +98,8 @@
|
|
98
98
|
}
|
99
99
|
@media (hover:hover) {
|
100
100
|
&:hover {
|
101
|
-
tbody {
|
102
|
-
tr {
|
101
|
+
tbody, .pb_table_tbody {
|
102
|
+
tr, .pb_table_tr {
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
104
104
|
}
|
105
105
|
}
|
@@ -108,9 +108,9 @@
|
|
108
108
|
// reset the first and last to normalize
|
109
109
|
@each $name, $value in $cell-pad-list {
|
110
110
|
&.#{$name} {
|
111
|
-
tbody {
|
112
|
-
tr {
|
113
|
-
td {
|
111
|
+
tbody, .pb_table_tbody {
|
112
|
+
tr, .pb_table_tr {
|
113
|
+
td, .pb_table_td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
9
9
|
&.table-lg {
|
10
10
|
&:not(.no-hover) {
|
11
11
|
border-collapse: collapse;
|
12
|
-
tbody {
|
13
|
-
tr {
|
12
|
+
tbody, .pb_table_tbody {
|
13
|
+
tr, .pb_table_tr {
|
14
14
|
box-shadow: 0 0 0 $white;
|
15
15
|
transition: box-shadow $transition-speed ease;
|
16
|
-
td {
|
16
|
+
td, .pb_table_td {
|
17
17
|
border-top-color: transparent;
|
18
18
|
border-top-width: 0;
|
19
19
|
transition: all $transition-speed ease;
|
20
20
|
}
|
21
21
|
@media (hover:hover) {
|
22
|
-
td {
|
22
|
+
td, .pb_table_td {
|
23
23
|
position: relative;
|
24
24
|
&:after {
|
25
25
|
transition: background-color $transition-speed ease, height $transition-speed ease;
|
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
41
41
|
}
|
42
42
|
&:hover {
|
43
43
|
box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
|
44
|
-
td {
|
44
|
+
td, .pb_table_td {
|
45
45
|
border-color: darken($border_light, 10%);
|
46
46
|
border-top-width: 0;
|
47
47
|
border-top-color: transparent;
|
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
57
57
|
}
|
58
58
|
&.table-card {
|
59
59
|
border-collapse: separate;
|
60
|
-
tbody {
|
61
|
-
tr {
|
62
|
-
td {
|
60
|
+
tbody, .pb_table_tbody {
|
61
|
+
tr, .pb_table_tr {
|
62
|
+
td, .pb_table_td {
|
63
63
|
&:first-child {
|
64
64
|
border-left-width: 1px;
|
65
65
|
}
|
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
|
|
72
72
|
}
|
73
73
|
|
74
74
|
&.dark {
|
75
|
-
tbody {
|
76
|
-
tr {
|
75
|
+
tbody, .pb_table_tbody {
|
76
|
+
tr, .pb_table_tr {
|
77
77
|
@media (hover:hover) {
|
78
78
|
&:hover {
|
79
79
|
box-shadow: 0 2px 10px 0 $shadow_dark;
|
80
|
-
td {
|
80
|
+
td, .pb_table_td {
|
81
81
|
border-top-width: 0;
|
82
82
|
border-top-color: transparent;
|
83
83
|
border-color: $border_hover_color_dark !important;
|
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead {
|
14
|
-
tr {
|
13
|
+
thead, .pb_table_thead {
|
14
|
+
tr, .pb_table_tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th {
|
19
|
+
th, .pb_table_th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody {
|
26
|
-
tr {
|
27
|
-
td {
|
25
|
+
tbody, .pb_table_tbody {
|
26
|
+
tr, .pb_table_tr {
|
27
|
+
td, .pb_table_td {
|
28
28
|
display: block;
|
29
29
|
visibility: visible;
|
30
30
|
border-left-width: 1px !important;
|
@@ -63,7 +63,7 @@
|
|
63
63
|
}
|
64
64
|
|
65
65
|
&:first-child {
|
66
|
-
td {
|
66
|
+
td, .pb_table_td {
|
67
67
|
&:first-child {
|
68
68
|
margin-top: $space-xs !important;
|
69
69
|
}
|
@@ -74,9 +74,9 @@
|
|
74
74
|
&.table-card {
|
75
75
|
background: none !important;
|
76
76
|
|
77
|
-
tbody {
|
78
|
-
tr {
|
79
|
-
td {
|
77
|
+
tbody, .pb_table_tbody {
|
78
|
+
tr, .pb_table_tr {
|
79
|
+
td, .pb_table_td {
|
80
80
|
background: $white !important;
|
81
81
|
border-left-width: 1px !important;
|
82
82
|
border-right-width: 1px !important;
|
@@ -98,8 +98,8 @@
|
|
98
98
|
}
|
99
99
|
@media (hover:hover) {
|
100
100
|
&:hover {
|
101
|
-
tbody {
|
102
|
-
tr {
|
101
|
+
tbody, .pb_table_tbody {
|
102
|
+
tr, .pb_table_tr {
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
104
104
|
}
|
105
105
|
}
|
@@ -108,9 +108,9 @@
|
|
108
108
|
// reset the first and last to normalize
|
109
109
|
@each $name, $value in $cell-pad-list {
|
110
110
|
&.#{$name} {
|
111
|
-
tbody {
|
112
|
-
tr {
|
113
|
-
td {
|
111
|
+
tbody, .pb_table_tbody {
|
112
|
+
tr, .pb_table_tr {
|
113
|
+
td, .pb_table_td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead {
|
14
|
-
tr {
|
13
|
+
thead, .pb_table_thead {
|
14
|
+
tr, .pb_table_tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th {
|
19
|
+
th, .pb_table_th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody {
|
26
|
-
tr {
|
27
|
-
td {
|
25
|
+
tbody, .pb_table_tbody {
|
26
|
+
tr, .pb_table_tr {
|
27
|
+
td, .pb_table_td {
|
28
28
|
display: block;
|
29
29
|
visibility: visible;
|
30
30
|
border-left-width: 1px !important;
|
@@ -63,7 +63,7 @@
|
|
63
63
|
}
|
64
64
|
|
65
65
|
&:first-child {
|
66
|
-
td {
|
66
|
+
td, .pb_table_td {
|
67
67
|
&:first-child {
|
68
68
|
margin-top: $space-xs !important;
|
69
69
|
}
|
@@ -74,9 +74,9 @@
|
|
74
74
|
&.table-card {
|
75
75
|
background: none !important;
|
76
76
|
|
77
|
-
tbody {
|
78
|
-
tr {
|
79
|
-
td {
|
77
|
+
tbody, .pb_table_tbody {
|
78
|
+
tr, .pb_table_tr {
|
79
|
+
td, .pb_table_td {
|
80
80
|
background: $white !important;
|
81
81
|
border-left-width: 1px !important;
|
82
82
|
border-right-width: 1px !important;
|
@@ -98,8 +98,8 @@
|
|
98
98
|
}
|
99
99
|
@media (hover:hover) {
|
100
100
|
&:hover {
|
101
|
-
tbody {
|
102
|
-
tr {
|
101
|
+
tbody, .pb_table_tbody {
|
102
|
+
tr, .pb_table_tr {
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
104
104
|
}
|
105
105
|
}
|
@@ -108,9 +108,9 @@
|
|
108
108
|
// reset the first and last to normalize
|
109
109
|
@each $name, $value in $cell-pad-list {
|
110
110
|
&.#{$name} {
|
111
|
-
tbody {
|
112
|
-
tr {
|
113
|
-
td {
|
111
|
+
tbody, .pb_table_tbody {
|
112
|
+
tr, .pb_table_tr {
|
113
|
+
td, .pb_table_td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
|
|
8
8
|
}
|
9
9
|
|
10
10
|
[class^=pb_table] {
|
11
|
-
tbody {
|
11
|
+
tbody, .pb_table_tbody {
|
12
12
|
[class^=pb_table_row_kit] {
|
13
13
|
@each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
|
14
14
|
&[class*=_side_highlight_#{$color_name}] {
|
15
|
-
td {
|
15
|
+
td, .pb_table_td {
|
16
16
|
&:first-child {
|
17
17
|
@include pb_table_row_kit_side_highlight($color_value);
|
18
18
|
}
|
@@ -4,9 +4,9 @@
|
|
4
4
|
max-width: 100vw;
|
5
5
|
table-layout: fixed;
|
6
6
|
|
7
|
-
tbody {
|
8
|
-
tr {
|
9
|
-
td {
|
7
|
+
tbody, .pb_table_tbody {
|
8
|
+
tr, .pb_table_tr {
|
9
|
+
td, .pb_table_td {
|
10
10
|
white-space: nowrap;
|
11
11
|
text-overflow: ellipsis;
|
12
12
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
display: block !important;
|
21
21
|
}
|
22
22
|
|
23
|
-
br {
|
23
|
+
br, .pb_table_br {
|
24
24
|
content:' ' !important;
|
25
25
|
|
26
26
|
&::after {
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
[class^="pb_table"] {
|
4
4
|
&.sticky-header {
|
5
|
-
thead {
|
5
|
+
thead, .pb_table_thead {
|
6
6
|
background: $white;
|
7
7
|
position: sticky;
|
8
8
|
top: 0;
|
@@ -12,7 +12,7 @@
|
|
12
12
|
|
13
13
|
&.dark {
|
14
14
|
&.sticky-header {
|
15
|
-
thead {
|
15
|
+
thead, .pb_table_thead {
|
16
16
|
background: $bg_dark;
|
17
17
|
position: sticky;
|
18
18
|
top: 0;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
[class^=pb_table] {
|
2
2
|
&.striped {
|
3
|
-
tbody {
|
4
|
-
tr:nth-child(odd) {
|
3
|
+
tbody, .pb_table_tbody {
|
4
|
+
tr:nth-child(odd), .tr:nth-child(odd) {
|
5
5
|
background-color: $bg_light;
|
6
6
|
}
|
7
7
|
}
|
@@ -9,8 +9,8 @@
|
|
9
9
|
|
10
10
|
&.dark {
|
11
11
|
&.striped {
|
12
|
-
tbody {
|
13
|
-
tr:nth-child(odd) {
|
12
|
+
tbody, .pb_table_tbody {
|
13
|
+
tr:nth-child(odd), .tr:nth-child(odd) {
|
14
14
|
background-color: $bg_dark;
|
15
15
|
}
|
16
16
|
}
|
@@ -1,12 +1,19 @@
|
|
1
1
|
@import "../../tokens/colors";
|
2
2
|
|
3
3
|
[class^=pb_table] {
|
4
|
+
display: table;
|
5
|
+
|
4
6
|
@each $name, $value in $cell-pad-list {
|
5
7
|
&.#{$name} {
|
6
8
|
width: 100%;
|
7
|
-
thead {
|
8
|
-
|
9
|
-
|
9
|
+
thead, .pb_table_thead {
|
10
|
+
display: table-header-group;
|
11
|
+
|
12
|
+
tr, .pb_table_tr {
|
13
|
+
display: table-row;
|
14
|
+
|
15
|
+
th, .pb_table_th {
|
16
|
+
display: table-cell;
|
10
17
|
padding: $cell-pad-md $cell-gutter;
|
11
18
|
|
12
19
|
&:first-child {
|
@@ -18,9 +25,14 @@
|
|
18
25
|
}
|
19
26
|
}
|
20
27
|
}
|
21
|
-
tbody {
|
22
|
-
|
23
|
-
|
28
|
+
tbody, .pb_table_tbody {
|
29
|
+
display: table-row-group;
|
30
|
+
|
31
|
+
tr, .pb_table_tr {
|
32
|
+
display: table-row;
|
33
|
+
|
34
|
+
td, .pb_table_td {
|
35
|
+
display: table-cell;
|
24
36
|
border-color: $border_light;
|
25
37
|
border-style: solid;
|
26
38
|
border-width: 0 0 1px;
|
@@ -7,9 +7,9 @@
|
|
7
7
|
border-spacing: 0;
|
8
8
|
background: $white;
|
9
9
|
|
10
|
-
thead {
|
11
|
-
tr {
|
12
|
-
th {
|
10
|
+
thead, .pb_table_thead {
|
11
|
+
tr, .pb_table_tr {
|
12
|
+
th, .pb_table_th {
|
13
13
|
border-color: $border_light;
|
14
14
|
border-style: solid;
|
15
15
|
border-width: 1px 0 1px 0;
|
@@ -26,9 +26,9 @@
|
|
26
26
|
}
|
27
27
|
}
|
28
28
|
|
29
|
-
tbody {
|
30
|
-
tr {
|
31
|
-
td {
|
29
|
+
tbody, .pb_table_tbody {
|
30
|
+
tr, .pb_table_tr {
|
31
|
+
td, .pb_table_td {
|
32
32
|
border-color: $border_light;
|
33
33
|
border-style: solid;
|
34
34
|
border-width: 0 0 1px 0;
|
@@ -42,7 +42,7 @@
|
|
42
42
|
}
|
43
43
|
|
44
44
|
&:last-child {
|
45
|
-
td {
|
45
|
+
td, .pb_table_td {
|
46
46
|
border-width: 0 0 1px 0;
|
47
47
|
|
48
48
|
&:first-child {
|
@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
|
|
7
7
|
&.table-md,
|
8
8
|
&.table-lg {
|
9
9
|
&.table-dark {
|
10
|
-
thead {
|
11
|
-
tr {
|
10
|
+
thead, .pb_table_thead {
|
11
|
+
tr, .pb_table_tr {
|
12
12
|
border-color: $border_dark !important;
|
13
13
|
|
14
|
-
th {
|
14
|
+
th, .pb_table_th {
|
15
15
|
border-color: $border_dark !important;
|
16
16
|
color: $text_dk_light;
|
17
17
|
}
|
18
18
|
}
|
19
19
|
}
|
20
|
-
tbody {
|
21
|
-
tr {
|
20
|
+
tbody, .pb_table_tbody {
|
21
|
+
tr, .pb_table_tr {
|
22
22
|
border-color: $border_dark;
|
23
23
|
transition: none !important;
|
24
24
|
|
25
|
-
td {
|
25
|
+
td, .pb_table_td {
|
26
26
|
border-color: $border_dark !important;
|
27
27
|
color: $white;
|
28
28
|
|
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
|
|
31
31
|
}
|
32
32
|
}
|
33
33
|
&:first-child {
|
34
|
-
td {
|
34
|
+
td, .pb_table_td {
|
35
35
|
border-top-width: 0 !important;
|
36
36
|
}
|
37
37
|
}
|
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
|
|
54
54
|
&.table-dark {
|
55
55
|
background: none !important;
|
56
56
|
|
57
|
-
tbody {
|
58
|
-
tr {
|
59
|
-
td {
|
57
|
+
tbody, .pb_table_tbody {
|
58
|
+
tr, .pb_table_tr {
|
59
|
+
td, .pb_table_td {
|
60
60
|
background: $table-dark-card-bg !important;
|
61
61
|
}
|
62
62
|
}
|
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
|
|
64
64
|
}
|
65
65
|
}
|
66
66
|
&.table-dark {
|
67
|
-
tbody {
|
68
|
-
tr {
|
69
|
-
td {
|
67
|
+
tbody, .pb_table_tbody {
|
68
|
+
tr, .pb_table_tr {
|
69
|
+
td, .pb_table_td {
|
70
70
|
&:first-child {
|
71
71
|
border-top-color: $border_dark !important;
|
72
72
|
}
|
73
73
|
}
|
74
74
|
&:first-child {
|
75
|
-
td {
|
75
|
+
td, .pb_table_td {
|
76
76
|
border-top-width: 1px !important;
|
77
77
|
}
|
78
78
|
}
|
@@ -10,7 +10,7 @@ $text_align_values: (
|
|
10
10
|
);
|
11
11
|
|
12
12
|
[class^=pb_table] {
|
13
|
-
thead {
|
13
|
+
thead, .pb_table_thead {
|
14
14
|
[class^=pb_table_header_kit] {
|
15
15
|
@each $align_name, $align_value in $text_align_values {
|
16
16
|
&[class*=_align_#{$align_name}] {
|
@@ -32,7 +32,7 @@ $text_align_values: (
|
|
32
32
|
}
|
33
33
|
|
34
34
|
[class^=pb_table] {
|
35
|
-
thead {
|
35
|
+
thead, .pb_table_thead {
|
36
36
|
[class^=pb_th_active] {
|
37
37
|
color: $primary !important;
|
38
38
|
}
|
@@ -10,21 +10,21 @@
|
|
10
10
|
width: 100%;
|
11
11
|
background: none !important;
|
12
12
|
|
13
|
-
thead {
|
14
|
-
tr {
|
13
|
+
thead, .pb_table_thead {
|
14
|
+
tr, .pb_table_tr {
|
15
15
|
left: $offscreen;
|
16
16
|
position: absolute;
|
17
17
|
top: $offscreen;
|
18
18
|
|
19
|
-
th {
|
19
|
+
th, .pb_table_th {
|
20
20
|
display: block;
|
21
21
|
visibility: visible;
|
22
22
|
}
|
23
23
|
}
|
24
24
|
}
|
25
|
-
tbody {
|
26
|
-
tr {
|
27
|
-
td {
|
25
|
+
tbody, .pb_table_tbody {
|
26
|
+
tr, .pb_table_tr {
|
27
|
+
td, .pb_table_td {
|
28
28
|
display: block;
|
29
29
|
visibility: visible;
|
30
30
|
border-left-width: 1px !important;
|
@@ -63,7 +63,7 @@
|
|
63
63
|
}
|
64
64
|
|
65
65
|
&:first-child {
|
66
|
-
td {
|
66
|
+
td, .pb_table_td {
|
67
67
|
&:first-child {
|
68
68
|
margin-top: $space-xs !important;
|
69
69
|
}
|
@@ -74,9 +74,9 @@
|
|
74
74
|
&.table-card {
|
75
75
|
background: none !important;
|
76
76
|
|
77
|
-
tbody {
|
78
|
-
tr {
|
79
|
-
td {
|
77
|
+
tbody, .pb_table_tbody {
|
78
|
+
tr, .pb_table_tr {
|
79
|
+
td, .pb_table_td {
|
80
80
|
background: $white !important;
|
81
81
|
border-left-width: 1px !important;
|
82
82
|
border-right-width: 1px !important;
|
@@ -98,8 +98,8 @@
|
|
98
98
|
}
|
99
99
|
@media (hover:hover) {
|
100
100
|
&:hover {
|
101
|
-
tbody {
|
102
|
-
tr {
|
101
|
+
tbody, .pb_table_tbody {
|
102
|
+
tr, .pb_table_tr {
|
103
103
|
box-shadow: 0 0 0 $white !important;
|
104
104
|
}
|
105
105
|
}
|
@@ -108,9 +108,9 @@
|
|
108
108
|
// reset the first and last to normalize
|
109
109
|
@each $name, $value in $cell-pad-list {
|
110
110
|
&.#{$name} {
|
111
|
-
tbody {
|
112
|
-
tr {
|
113
|
-
td {
|
111
|
+
tbody, .pb_table_tbody {
|
112
|
+
tr, .pb_table_tr {
|
113
|
+
td, .pb_table_td {
|
114
114
|
&:first-child,
|
115
115
|
&:last-child {
|
116
116
|
padding: $value $cell-gutter !important;
|
@@ -1,13 +1,12 @@
|
|
1
1
|
[class^=pb_table] {
|
2
2
|
&.vertical-border {
|
3
|
-
td,
|
4
|
-
th {
|
3
|
+
td, th, .pb_table_td, .pb_table_th {
|
5
4
|
border-right: 1px solid $border_light !important;
|
6
5
|
}
|
7
6
|
|
8
7
|
@media screen and (min-width: $screen-xs-min) {
|
9
|
-
tr:hover {
|
10
|
-
td:last-child {
|
8
|
+
tr:hover, .pb_table_tr:hover {
|
9
|
+
td:last-child, .pb_table_td:last-child {
|
11
10
|
border-right-color: darken($border_light, 10%) !important;
|
12
11
|
}
|
13
12
|
}
|
@@ -1,9 +1,19 @@
|
|
1
1
|
<%= content_tag(:div) do %>
|
2
|
-
|
2
|
+
<% if object.tag == "table" %>
|
3
|
+
<%= content_tag(:table,
|
3
4
|
aria: object.aria,
|
4
5
|
class: object.classname,
|
5
6
|
data: object.data,
|
6
7
|
id: object.id) do %>
|
7
|
-
|
8
|
+
<%= content.presence %>
|
9
|
+
<% end %>
|
10
|
+
<% else %>
|
11
|
+
<%= content_tag(:div,
|
12
|
+
aria: object.aria,
|
13
|
+
class: object.classname,
|
14
|
+
data: object.data,
|
15
|
+
id: object.id) do %>
|
16
|
+
<%= content.presence %>
|
17
|
+
<% end %>
|
8
18
|
<% end %>
|
9
19
|
<% end %>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.
|
4
|
+
version: 13.20.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-03-
|
12
|
+
date: 2024-03-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -2245,6 +2245,8 @@ files:
|
|
2245
2245
|
- app/pb_kits/playbook/pb_table/docs/_table_data_table.md
|
2246
2246
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
|
2247
2247
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
|
2248
|
+
- app/pb_kits/playbook/pb_table/docs/_table_div.html.erb
|
2249
|
+
- app/pb_kits/playbook/pb_table/docs/_table_div.jsx
|
2248
2250
|
- app/pb_kits/playbook/pb_table/docs/_table_header.html.erb
|
2249
2251
|
- app/pb_kits/playbook/pb_table/docs/_table_header.md
|
2250
2252
|
- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
|
@@ -2849,7 +2851,7 @@ homepage: https://playbook.powerapp.cloud/
|
|
2849
2851
|
licenses:
|
2850
2852
|
- ISC
|
2851
2853
|
metadata: {}
|
2852
|
-
post_install_message:
|
2854
|
+
post_install_message:
|
2853
2855
|
rdoc_options: []
|
2854
2856
|
require_paths:
|
2855
2857
|
- lib
|
@@ -2860,12 +2862,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2860
2862
|
version: '0'
|
2861
2863
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2862
2864
|
requirements:
|
2863
|
-
- - "
|
2865
|
+
- - ">="
|
2864
2866
|
- !ruby/object:Gem::Version
|
2865
|
-
version:
|
2867
|
+
version: '0'
|
2866
2868
|
requirements: []
|
2867
2869
|
rubygems_version: 3.3.7
|
2868
|
-
signing_key:
|
2870
|
+
signing_key:
|
2869
2871
|
specification_version: 4
|
2870
2872
|
summary: Playbook Design System
|
2871
2873
|
test_files: []
|