playbook_ui_docs 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978 → 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052
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_custom.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb +22 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md +5 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +2 -48
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +3 -51
- data/dist/playbook-doc.js +1 -1
- metadata +8 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1f3218c35e8634460f531a5ec901105a2f2a4b71da0f90bca466def14ed29b72
|
4
|
+
data.tar.gz: 7af0cd726230f611174116707be74dca42f8209dbdbd57dd7b0c1692de227162
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3add2e5c13da822a9d2c8e7c83b6a449f7b861567ea3e6fc14337d8fe8163df65f9684d9464aebcf4319f4dd9b03875382fb3ee66101d207b483497e9febdd21
|
7
|
+
data.tar.gz: 95a659f716b7a3ad8fc9ab67d813e1242e389947f37537edb6e4bbf03370a494c5e87cf5798664e8d8e4380a6cc0a356fa87c4962a8745bbc532f14b1f428e7f
|
@@ -0,0 +1 @@
|
|
1
|
+
When using a custom checkbox wrapped in the Checkbox kit, hidden inputs are not automatically included and cannot be prop enabled. Manually add a hidden input before the checkbox if necessary to submit a value when the checkbox is unchecked (as is standard in Rails forms).
|
@@ -0,0 +1,22 @@
|
|
1
|
+
|
2
|
+
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
3
|
+
<%=pb_rails("flex", props: { gap: "sm", orientation: "column"}) do %>
|
4
|
+
<%= pb_rails("checkbox" , props: {
|
5
|
+
text: "1. pb_rails(\"checkbox\") Checkbox from kit",
|
6
|
+
value: "checkbox-value",
|
7
|
+
name: "checkbox-name",
|
8
|
+
hidden_input: true
|
9
|
+
}) %>
|
10
|
+
<%= form.check_box :example_checkbox,
|
11
|
+
data: { field1: "value1", field2: "value2" },
|
12
|
+
props: { text: "2. form.check_box Checkbox from Form Builder" },
|
13
|
+
unchecked_value: "no",
|
14
|
+
id: "checkbox-id",
|
15
|
+
name: "checkbox-name",
|
16
|
+
class: "checkbox-class"
|
17
|
+
%>
|
18
|
+
<%= form.actions do |action| %>
|
19
|
+
<%= action.button props: { type: "submit", text: "Submit", variant: "primary" } %>
|
20
|
+
<% end %>
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The way to access hidden inputs for form submission depends on which version of the kit being used within the form context.
|
2
|
+
|
3
|
+
If using the Rails Checkbox version of the kit, set `hidden_input: true`. Inspect Checkbox #1 in the example above to see the hidden input in the DOM.
|
4
|
+
|
5
|
+
If using the Form Builder version of the kit (reference the [Form kit page](https://playbook.powerapp.cloud/kits/form) for more on these), the hidden input will appear if the input has a set `unchecked_value`. Inspect Checkbox #2 in the example above (and the two checkbox examples on the Form kit page) to see the hidden input in the DOM. See the [Rails check_box FormHelper docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box) for more.
|
@@ -9,11 +9,10 @@
|
|
9
9
|
<tr>
|
10
10
|
<th>
|
11
11
|
<%= pb_rails("checkbox", props: {
|
12
|
-
checked: true,
|
13
12
|
text: "Uncheck All",
|
14
13
|
value: "checkbox-value",
|
15
14
|
name: "main-checkbox",
|
16
|
-
|
15
|
+
indeterminate_main: true,
|
17
16
|
id: "indeterminate-checkbox"
|
18
17
|
}) %>
|
19
18
|
</th>
|
@@ -30,55 +29,10 @@
|
|
30
29
|
value: checkbox[:id],
|
31
30
|
name: "#{checkbox[:id]}-indeterminate-checkbox",
|
32
31
|
id: "#{checkbox[:id]}-indeterminate-checkbox",
|
32
|
+
indeterminate_parent: "indeterminate-checkbox",
|
33
33
|
}) %>
|
34
34
|
</td>
|
35
35
|
</tr>
|
36
36
|
<% end %>
|
37
37
|
</tbody>
|
38
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 @@
|
|
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.
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
+
|
4
|
+
const DropdownCloseOnSelect = (props) => {
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{
|
8
|
+
label: "United States",
|
9
|
+
value: "United States",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: "Canada",
|
13
|
+
value: "Canada",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
label: "Pakistan",
|
17
|
+
value: "Pakistan",
|
18
|
+
}
|
19
|
+
];
|
20
|
+
|
21
|
+
|
22
|
+
return (
|
23
|
+
<div>
|
24
|
+
<Dropdown
|
25
|
+
closeOnSelection={false}
|
26
|
+
label="Default"
|
27
|
+
options={options}
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<br />
|
31
|
+
<Dropdown
|
32
|
+
closeOnSelection={false}
|
33
|
+
label="Multi Select"
|
34
|
+
multiSelect
|
35
|
+
options={options}
|
36
|
+
{...props}
|
37
|
+
/>
|
38
|
+
</div>
|
39
|
+
)
|
40
|
+
}
|
41
|
+
|
42
|
+
export default DropdownCloseOnSelect
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.
|
@@ -19,4 +19,5 @@ 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'
|
22
|
+
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
23
|
+
export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
|
@@ -101,7 +101,7 @@
|
|
101
101
|
<%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
|
102
102
|
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
103
103
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
104
|
-
<%= form.check_box :
|
104
|
+
<%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
|
105
105
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
|
106
106
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
107
107
|
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
@@ -18,7 +18,7 @@
|
|
18
18
|
checked: true,
|
19
19
|
value: "checkbox-value",
|
20
20
|
name: "main-checkbox-selectable",
|
21
|
-
|
21
|
+
indeterminate_main: 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" }) %>
|
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" }) %>
|
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,52 +45,4 @@
|
|
45
45
|
<% end %>
|
46
46
|
<% end %>
|
47
47
|
<% 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>
|
48
|
+
<% end %>
|