playbook_ui 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980 → 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978
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 +82 -5
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +58 -2
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +13 -4
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +7 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +61 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +12 -8
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +6 -3
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +48 -2
- data/dist/chunks/_weekday_stacked-yWpUc_c0.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -4
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +0 -1
- data/app/pb_kits/playbook/pb_checkbox/index.js +0 -56
- data/dist/chunks/_weekday_stacked-C4d17aYW.js +0 -45
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.20.0.pre.alpha.
|
4
|
+
version: 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -340,6 +340,8 @@ files:
|
|
340
340
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
|
341
341
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
|
342
342
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
|
343
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
|
344
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
|
343
345
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
|
344
346
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
|
345
347
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
|
@@ -723,7 +725,6 @@ files:
|
|
723
725
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md
|
724
726
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb
|
725
727
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx
|
726
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md
|
727
728
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
|
728
729
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
|
729
730
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
|
@@ -732,7 +733,6 @@ files:
|
|
732
733
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
733
734
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
734
735
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
735
|
-
- app/pb_kits/playbook/pb_checkbox/index.js
|
736
736
|
- app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
|
737
737
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
738
738
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
|
@@ -3601,7 +3601,7 @@ files:
|
|
3601
3601
|
- app/pb_kits/playbook/utilities/text.ts
|
3602
3602
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3603
3603
|
- dist/chunks/_typeahead-CRW6dJbW.js
|
3604
|
-
- dist/chunks/_weekday_stacked-
|
3604
|
+
- dist/chunks/_weekday_stacked-yWpUc_c0.js
|
3605
3605
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3606
3606
|
- dist/chunks/lib-D5R1BjUn.js
|
3607
3607
|
- dist/chunks/pb_form_validation-BZ2AVAi_.js
|
@@ -1 +0,0 @@
|
|
1
|
-
If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
|
@@ -1,56 +0,0 @@
|
|
1
|
-
import PbEnhancedElement from "../pb_enhanced_element"
|
2
|
-
|
3
|
-
const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
|
4
|
-
|
5
|
-
export default class PbCheckbox extends PbEnhancedElement {
|
6
|
-
static get selector() {
|
7
|
-
return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
|
8
|
-
}
|
9
|
-
|
10
|
-
connect() {
|
11
|
-
const mainCheckboxWrapper = this.element;
|
12
|
-
const mainCheckbox = mainCheckboxWrapper.querySelector('input')
|
13
|
-
const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
|
14
|
-
|
15
|
-
const updateMainCheckbox = () => {
|
16
|
-
// Count the number of checked child checkboxes
|
17
|
-
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
18
|
-
// Determine if the main checkbox should be in an indeterminate state
|
19
|
-
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
20
|
-
|
21
|
-
// Set the main checkbox states
|
22
|
-
mainCheckbox.indeterminate = indeterminate;
|
23
|
-
mainCheckbox.checked = checkedCount > 0;
|
24
|
-
|
25
|
-
// Determine the main checkbox label based on the number of checked checkboxes
|
26
|
-
const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
|
27
|
-
|
28
|
-
// Determine the icon class to add and remove based on the number of checked checkboxes
|
29
|
-
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
30
|
-
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
31
|
-
|
32
|
-
// Update main checkbox label
|
33
|
-
mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
|
34
|
-
|
35
|
-
// Add and remove the icon class to the main checkbox wrapper
|
36
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
37
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
38
|
-
|
39
|
-
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
40
|
-
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
41
|
-
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
42
|
-
};
|
43
|
-
|
44
|
-
// Set indeterminate icon on main checkbox if initial children checkboxes are checked
|
45
|
-
updateMainCheckbox();
|
46
|
-
|
47
|
-
this.element.querySelector('input').addEventListener('change', function() {
|
48
|
-
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
49
|
-
updateMainCheckbox();
|
50
|
-
});
|
51
|
-
|
52
|
-
childCheckboxes.forEach(cb => {
|
53
|
-
cb.addEventListener('change', updateMainCheckbox);
|
54
|
-
});
|
55
|
-
}
|
56
|
-
}
|