playbook_ui_docs 14.8.0.pre.alpha.PLAY1615movenegativetoleftofcurrencysign4543 → 14.8.0.pre.alpha.pbntr661createstickyleftprop4612
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_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 565d4df4e7478be967957422514a5bb206717fcae3a3fbabc62a7d2c164fb726
|
|
4
|
+
data.tar.gz: ec4515ee5746bdc4ef5e0c23150ab07bdb0d4e7691acd45546c64f3e954346da
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9448c1505f3e171b124c3baca81f5dbe4d70651e96034355ae7e787207aa04876f0a10b1e42da372bdbed17f744eaaeb27935c9be2896b91704111705fa5dcc4
|
|
7
|
+
data.tar.gz: 007b78a2168f4fd314c12b584934e05895753129af01320c4d1a03e142eb75ee1c25f3b896451c9fb5938f57bebec082dccca486e55444793ba6302fbcf0334d
|
|
@@ -1,7 +1,84 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
name:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}) %>
|
|
1
|
+
<% checkboxes = [
|
|
2
|
+
{ name: 'Coffee', id: 'coffee', checked: false },
|
|
3
|
+
{ name: 'Ice Cream', id: 'ice-cream', checked: false },
|
|
4
|
+
{ name: 'Chocolate', id: 'chocolate', checked: true }
|
|
5
|
+
] %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("table", props: { container: false, size: "md" }) do %>
|
|
8
|
+
<thead>
|
|
9
|
+
<tr>
|
|
10
|
+
<th>
|
|
11
|
+
<%= pb_rails("checkbox", props: {
|
|
12
|
+
checked: true,
|
|
13
|
+
text: "Uncheck All",
|
|
14
|
+
value: "checkbox-value",
|
|
15
|
+
name: "main-checkbox",
|
|
16
|
+
indeterminate: true,
|
|
17
|
+
id: "indeterminate-checkbox"
|
|
18
|
+
}) %>
|
|
19
|
+
</th>
|
|
20
|
+
</tr>
|
|
21
|
+
</thead>
|
|
22
|
+
|
|
23
|
+
<tbody>
|
|
24
|
+
<% checkboxes.each do |checkbox| %>
|
|
25
|
+
<tr>
|
|
26
|
+
<td>
|
|
27
|
+
<%= pb_rails("checkbox", props: {
|
|
28
|
+
checked: checkbox[:checked],
|
|
29
|
+
text: checkbox[:name],
|
|
30
|
+
value: checkbox[:id],
|
|
31
|
+
name: "#{checkbox[:id]}-indeterminate-checkbox",
|
|
32
|
+
id: "#{checkbox[:id]}-indeterminate-checkbox",
|
|
33
|
+
}) %>
|
|
34
|
+
</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<% end %>
|
|
37
|
+
</tbody>
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
<script>
|
|
41
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
42
|
+
const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
|
|
43
|
+
const mainCheckbox = document.getElementsByName("main-checkbox")[0];
|
|
44
|
+
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
|
|
45
|
+
|
|
46
|
+
const updateMainCheckbox = () => {
|
|
47
|
+
// Count the number of checked child checkboxes
|
|
48
|
+
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
|
49
|
+
// Determine if the main checkbox should be in an indeterminate state
|
|
50
|
+
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
|
51
|
+
|
|
52
|
+
// Set the main checkbox states
|
|
53
|
+
mainCheckbox.indeterminate = indeterminate;
|
|
54
|
+
mainCheckbox.checked = checkedCount > 0;
|
|
55
|
+
|
|
56
|
+
// Determine the main checkbox label based on the number of checked checkboxes
|
|
57
|
+
const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
|
|
58
|
+
|
|
59
|
+
// Determine the icon class to add and remove based on the number of checked checkboxes
|
|
60
|
+
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
|
61
|
+
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
|
62
|
+
|
|
63
|
+
// Update main checkbox label
|
|
64
|
+
mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
|
|
65
|
+
|
|
66
|
+
// Add and remove the icon class to the main checkbox wrapper
|
|
67
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
|
68
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
|
69
|
+
|
|
70
|
+
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
|
71
|
+
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
|
72
|
+
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
mainCheckbox.addEventListener('change', function() {
|
|
76
|
+
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
|
77
|
+
updateMainCheckbox();
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
childCheckboxes.forEach(cb => {
|
|
81
|
+
cb.addEventListener('change', updateMainCheckbox);
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
</script>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyLeftColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyLeftcolumn={["1", "2", "3"]}
|
|
10
|
+
>
|
|
11
|
+
<thead>
|
|
12
|
+
<tr>
|
|
13
|
+
<th id="1">{'Column 1'}</th>
|
|
14
|
+
<th id="2">{'Column 2'}</th>
|
|
15
|
+
<th id="3">{'Column 3'}</th>
|
|
16
|
+
<th>{'Column 4'}</th>
|
|
17
|
+
<th>{'Column 5'}</th>
|
|
18
|
+
<th>{'Column 6'}</th>
|
|
19
|
+
<th>{'Column 7'}</th>
|
|
20
|
+
<th>{'Column 8'}</th>
|
|
21
|
+
<th>{'Column 9'}</th>
|
|
22
|
+
<th>{'Column 10'}</th>
|
|
23
|
+
<th>{'Column 11'}</th>
|
|
24
|
+
<th>{'Column 12'}</th>
|
|
25
|
+
<th>{'Column 13'}</th>
|
|
26
|
+
<th>{'Column 14'}</th>
|
|
27
|
+
<th>{'Column 15'}</th>
|
|
28
|
+
</tr>
|
|
29
|
+
</thead>
|
|
30
|
+
<tbody>
|
|
31
|
+
<tr>
|
|
32
|
+
<td id="1">{'Value 1'}</td>
|
|
33
|
+
<td id="2">{'Value 2'}</td>
|
|
34
|
+
<td id="3">{'Value 3'}</td>
|
|
35
|
+
<td>{'Value 4'}</td>
|
|
36
|
+
<td>{'Value 5'}</td>
|
|
37
|
+
<td>{'Value 6'}</td>
|
|
38
|
+
<td>{'Value 7'}</td>
|
|
39
|
+
<td>{'Value 8'}</td>
|
|
40
|
+
<td>{'Value 9'}</td>
|
|
41
|
+
<td>{'Value 10'}</td>
|
|
42
|
+
<td>{'Value 11'}</td>
|
|
43
|
+
<td>{'Value 12'}</td>
|
|
44
|
+
<td>{'Value 13'}</td>
|
|
45
|
+
<td>{'Value 14'}</td>
|
|
46
|
+
<td>{'Value 15'}</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td id="1">{'Value 1'}</td>
|
|
50
|
+
<td id="2">{'Value 2'}</td>
|
|
51
|
+
<td id="3">{'Value 3'}</td>
|
|
52
|
+
<td>{'Value 4'}</td>
|
|
53
|
+
<td>{'Value 5'}</td>
|
|
54
|
+
<td>{'Value 6'}</td>
|
|
55
|
+
<td>{'Value 7'}</td>
|
|
56
|
+
<td>{'Value 8'}</td>
|
|
57
|
+
<td>{'Value 9'}</td>
|
|
58
|
+
<td>{'Value 10'}</td>
|
|
59
|
+
<td>{'Value 11'}</td>
|
|
60
|
+
<td>{'Value 12'}</td>
|
|
61
|
+
<td>{'Value 13'}</td>
|
|
62
|
+
<td>{'Value 14'}</td>
|
|
63
|
+
<td>{'Value 15'}</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td id="1">{'Value 1'}</td>
|
|
67
|
+
<td id="2">{'Value 2'}</td>
|
|
68
|
+
<td id="3">{'Value 3'}</td>
|
|
69
|
+
<td>{'Value 4'}</td>
|
|
70
|
+
<td>{'Value 5'}</td>
|
|
71
|
+
<td>{'Value 6'}</td>
|
|
72
|
+
<td>{'Value 7'}</td>
|
|
73
|
+
<td>{'Value 8'}</td>
|
|
74
|
+
<td>{'Value 9'}</td>
|
|
75
|
+
<td>{'Value 10'}</td>
|
|
76
|
+
<td>{'Value 11'}</td>
|
|
77
|
+
<td>{'Value 12'}</td>
|
|
78
|
+
<td>{'Value 13'}</td>
|
|
79
|
+
<td>{'Value 14'}</td>
|
|
80
|
+
<td>{'Value 15'}</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</Table>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default TableStickyLeftColumns
|
|
@@ -33,6 +33,7 @@ examples:
|
|
|
33
33
|
- table_md: Medium
|
|
34
34
|
- table_lg: Large
|
|
35
35
|
- table_sticky: Sticky Header
|
|
36
|
+
- table_sticky_left_columns: Sticky Left Column
|
|
36
37
|
- table_alignment_row: Row Alignment
|
|
37
38
|
- table_alignment_column: Cell Alignment
|
|
38
39
|
- table_alignment_shift_row: Row Shift
|
|
@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
|
|
|
25
25
|
export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
|
|
26
26
|
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
27
27
|
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
|
|
28
|
+
export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
|