playbook_ui_docs 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8086 → 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3a51f9aecae2eaf36075f3e09cd950e80b0c7fba3706ca3288ab669253553b28
4
- data.tar.gz: c827eb067a8e45fa2940bacff381bef26b000c067acfa14d35d47dd65f04d853
3
+ metadata.gz: fc5131eae9b5f300e6bfaaac89406f5976ed655a7a21738c7413963e4ac71c46
4
+ data.tar.gz: 37a37195fe377d1225a85232aba158e1e5aa1378a2d8837b1fcfc902b0447414
5
5
  SHA512:
6
- metadata.gz: ca1fce98173d5fe9b466c1d0b4a8aa23190395092e8347cda90675517ebff6328e32e2ab2ef7c77bde45230838332721ad7cc83ffaca6f0f1f117bd056b0f74c
7
- data.tar.gz: 07b19479de155da27d911ca59fd6e86ab0aba19c637804475e456caba705cccead292dcef244658ae2120b1257eaa260efacc1242ab75ab55c9df3cbf11f461c
6
+ metadata.gz: 2b07cad00d9c044ff8ec65d90f7b72dc6f757c724f61bb5ebd994c24babbc5d944224ea34ad7514d4ccdd81b2616e00b23713e09e4512a3795ff9863228f88a6
7
+ data.tar.gz: 21f597eae15847f19c80de19bf9787f6a5ac7f5245207c0263301f26c277628e7d77678394fd2ff8882c9721a20c7a887c015a98ec780e91ff5a0f328b9323e2
@@ -39,6 +39,7 @@ const AdvancedTableNoSubrows = (props) => {
39
39
  <div>
40
40
  <AdvancedTable
41
41
  columnDefinitions={columnDefinitions}
42
+ enableToggleExpansion="all"
42
43
  tableData={MOCK_DATA}
43
44
  {...props}
44
45
  />
@@ -13,12 +13,10 @@ examples:
13
13
  - advanced_table_column_headers: Multi-Header Columns
14
14
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
15
15
  - advanced_table_column_border_color_rails: Column Group Border Color
16
- - advanced_table_no_subrows: Table with No Subrows or Expansion
17
16
  - advanced_table_selectable_rows_rails: Selectable Rows
18
17
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
19
18
  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
20
19
  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
21
- - advanced_table_scrollbar_none: Advanced Table Scrollbar None
22
20
 
23
21
  react:
24
22
  - advanced_table_default: Default (Required Props)
@@ -44,7 +42,7 @@ examples:
44
42
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
45
43
  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
46
44
  - advanced_table_column_border_color: Column Group Border Color
47
- - advanced_table_no_subrows: Table with No Subrows or Expansion
45
+ # - advanced_table_no_subrows: Table with No Subrows
48
46
  - advanced_table_selectable_rows: Selectable Rows
49
47
  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
50
48
  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -54,6 +52,4 @@ examples:
54
52
  - advanced_table_column_visibility: Column Visibility Control
55
53
  - advanced_table_column_visibility_with_state: Column Visibility Control With State
56
54
  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
57
- - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
58
- - advanced_table_pinned_rows: Pinned Rows
59
- - advanced_table_scrollbar_none: Advanced Table Scrollbar None
55
+ - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
@@ -31,6 +31,4 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
31
31
  export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
32
32
  export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
33
33
  export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
34
- export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
35
- export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
36
- export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
34
+ export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
@@ -44,6 +44,4 @@ examples:
44
44
  - dropdown_clear_selection: Clear Selection
45
45
  - dropdown_separators_hidden: Separators Hidden
46
46
  - dropdown_with_external_control: useDropdown Hook
47
- - dropdown_close_on_select: Close On Selection
48
-
49
47
 
@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
19
19
  export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
20
20
  export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
21
21
  export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
22
- export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
23
- export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
22
+ export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
@@ -18,7 +18,7 @@
18
18
  checked: true,
19
19
  value: "checkbox-value",
20
20
  name: "main-checkbox-selectable",
21
- indeterminate_main: true,
21
+ indeterminate: true,
22
22
  id: "checkbox-selectable"
23
23
  }) %>
24
24
  <% end %>
@@ -33,7 +33,7 @@
33
33
  <% checkboxes.each_with_index do |checkbox, index| %>
34
34
  <%= pb_rails("table/table_row") do %>
35
35
  <%= pb_rails("table/table_cell") do %>
36
- <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value", indeterminate_parent: "checkbox-selectable" }) %>
36
+ <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
37
37
  <% end %>
38
38
  <%= pb_rails("table/table_cell") do %>
39
39
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
@@ -45,4 +45,52 @@
45
45
  <% end %>
46
46
  <% end %>
47
47
  <% end %>
48
- <% end %>
48
+ <% end %>
49
+
50
+ <script>
51
+ document.addEventListener('DOMContentLoaded', function() {
52
+ const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
53
+ const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
54
+ const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
55
+ const deleteButton = document.getElementById('delete-button');
56
+
57
+ const updateDeleteButton = () => {
58
+ const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
59
+ deleteButton.style.display = anyChecked ? 'block' : 'none';
60
+ };
61
+
62
+ const updateMainCheckbox = () => {
63
+ // Count the number of checked child checkboxes
64
+ const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
65
+ // Determine if the main checkbox should be in an indeterminate state
66
+ const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
67
+
68
+ // Set the main checkbox states
69
+ mainCheckbox.indeterminate = indeterminate;
70
+ mainCheckbox.checked = checkedCount > 0;
71
+
72
+ // Determine the icon class to add and remove based on the number of checked checkboxes
73
+ const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
74
+ const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
75
+
76
+ // Add and remove the icon class to the main checkbox wrapper
77
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
78
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
79
+
80
+ // Toggle the visibility of the checkbox icon based on the indeterminate state
81
+ mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
82
+ mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
83
+
84
+ updateDeleteButton();
85
+ };
86
+
87
+ mainCheckbox.addEventListener('change', function() {
88
+ childCheckboxes.forEach(cb => cb.checked = this.checked);
89
+ updateMainCheckbox();
90
+ });
91
+
92
+ childCheckboxes.forEach(cb => {
93
+ cb.addEventListener('change', updateMainCheckbox);
94
+ });
95
+ });
96
+ </script>