playbook_ui_docs 14.19.0.pre.alpha.PLAY21377811 → 14.19.0.pre.alpha.borderfixadvancedtable7816

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.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +137 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +40 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  8. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -11
  9. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -5
  10. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
  11. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
  12. data/dist/playbook-doc.js +1 -1
  13. metadata +6 -18
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +0 -31
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +0 -5
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +0 -56
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +0 -3
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +0 -58
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +0 -3
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +0 -20
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +0 -1
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +0 -19
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +0 -3
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +0 -20
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +0 -57
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +0 -1
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +0 -50
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +0 -105
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +0 -22
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +0 -67
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f4621a77a96e846e4eb7dc52da5f4038ecad9e3f410b13cd668e55125745879e
4
- data.tar.gz: 51a539487d60c65246dbc9daeeb42b6983f140358f28acf6a4e2dc6a16d3fed5
3
+ metadata.gz: 46f0917519cedd8ce9ecf8575884b9f34cc98c229b8b44b551ff8136c1369aa6
4
+ data.tar.gz: f625e0ac9ba4ac841d30f41ded77fdf85b7fe90a9982fb23aac2dd9b7ba65093
5
5
  SHA512:
6
- metadata.gz: bfe5ad6f89d790593d0127dde13888c39f09d6896b20c02d9037760f18f654ec19101d2588b8c6de3b3924af5c0122a21ac3b763f1772be20c7b4fe61fe8a14e
7
- data.tar.gz: 53dd9686b04e4724df6c68ce0e32abdb2009a2fcc2b43fe75aa4283d0d05ddccccd4ab3fe120f5b26074099af60388e2ed63ababf87c3f85fffda2f461ecee17
6
+ metadata.gz: aac1105d9afb76394028659a51c08a9c28518413b5a997016247db1a33b5ea0ffc4b1c347e211ad8ffaf0f15b1d1675ad8c8240a87ec72bf1505487cc3bb43dc
7
+ data.tar.gz: 9a6625756fe3bb74fbeed90449353552b533bd5da747adf029cb14c833eb590c01b2db8cdf374a96e90e9e11dec3b06579d2a573c2e61502c396171ff4a416e8
@@ -0,0 +1,137 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ]
32
+
33
+ actions = [
34
+ pb_rails("circle_icon_button", props: {
35
+ icon: "file-csv",
36
+ variant: "link",
37
+ id: "export-selected-rows-btn",
38
+ data: {
39
+ action_type: "export"
40
+ }
41
+ }),
42
+ pb_rails("circle_icon_button", props: {
43
+ icon: "trash-alt",
44
+ variant: "link",
45
+ id: "delete-selected-rows-btn",
46
+ data: {
47
+ action_type: "delete"
48
+ }
49
+ })
50
+ ]
51
+ %>
52
+
53
+ <%= pb_rails("advanced_table", props: {
54
+ id: "selectable_rows_with_actions",
55
+ table_data: @table_data_no_subrows,
56
+ column_definitions: column_definitions,
57
+ selectable_rows: true,
58
+ enable_toggle_expansion: "none",
59
+ actions: actions
60
+ }) %>
61
+
62
+ <script>
63
+ // Handle action clicks using the data-selected-rows attribute
64
+ window.handleActionClick = function(actionType) {
65
+ const tableContainer = document.getElementById('selectable_rows_with_actions');
66
+ if (!tableContainer) return;
67
+
68
+ // Get selected rows from the data attribute
69
+ const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
70
+ let selectedRowIds = [];
71
+
72
+ try {
73
+ // Parse the JSON string from the data attribute
74
+ if (selectedRowsJSON) {
75
+ selectedRowIds = JSON.parse(selectedRowsJSON);
76
+ }
77
+ } catch (e) {
78
+ // Fallback if JSON parsing fails
79
+ const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
80
+ const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
81
+ checkbox.id !== 'select-all-rows' &&
82
+ !checkbox.closest('#select-all-rows')
83
+ );
84
+ selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
85
+ }
86
+
87
+ // Show appropriate message
88
+ if (!selectedRowIds || selectedRowIds.length === 0) {
89
+ alert('No Selection Made');
90
+ } else {
91
+ if (actionType === 'export') {
92
+ alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
93
+ } else if (actionType === 'delete') {
94
+ alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
95
+ }
96
+ }
97
+ };
98
+
99
+ // Add event listeners when the DOM is ready
100
+ document.addEventListener('DOMContentLoaded', function() {
101
+ // Get the buttons
102
+ const exportBtn = document.getElementById('export-selected-rows-btn');
103
+ const deleteBtn = document.getElementById('delete-selected-rows-btn');
104
+
105
+ // Add click event listeners
106
+ if (exportBtn) {
107
+ exportBtn.addEventListener('click', function(e) {
108
+ e.preventDefault();
109
+ window.handleActionClick('export');
110
+ });
111
+ }
112
+
113
+ if (deleteBtn) {
114
+ deleteBtn.addEventListener('click', function(e) {
115
+ e.preventDefault();
116
+ window.handleActionClick('delete');
117
+ });
118
+ }
119
+
120
+ // Optional: Event delegation through the action bar
121
+ const actionBar = document.querySelector('.row-selection-actions-card');
122
+ if (actionBar) {
123
+ actionBar.addEventListener('click', function(e) {
124
+ const exportButton = e.target.closest('#export-selected-rows-btn');
125
+ const deleteButton = e.target.closest('#delete-selected-rows-btn');
126
+
127
+ if (exportButton) {
128
+ e.preventDefault();
129
+ window.handleActionClick('export');
130
+ } else if (deleteButton) {
131
+ e.preventDefault();
132
+ window.handleActionClick('delete');
133
+ }
134
+ });
135
+ }
136
+ });
137
+ </script>
@@ -0,0 +1,3 @@
1
+ Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
2
+
3
+ You can utilize script tags with your actions to provide your buttons with any clickable events needed.
@@ -0,0 +1,40 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: {
34
+ id: "selectable_rows_with_actions",
35
+ table_data: @table_data_no_subrows,
36
+ column_definitions: column_definitions,
37
+ selectable_rows: true,
38
+ enable_toggle_expansion: "none",
39
+ show_actions_bar: false
40
+ }) %>
@@ -0,0 +1 @@
1
+ `show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`
@@ -15,6 +15,8 @@ examples:
15
15
  - advanced_table_column_border_color_rails: Column Group Border Color
16
16
  - advanced_table_selectable_rows_rails: Selectable Rows
17
17
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
18
+ - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
19
+ - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
18
20
 
19
21
  react:
20
22
  - advanced_table_default: Default (Required Props)
@@ -0,0 +1,10 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options}) %>
@@ -1,45 +1,35 @@
1
1
  examples:
2
2
  rails:
3
- - dropdown_default_rails: Default
3
+ - dropdown_default: Default
4
4
  - dropdown_with_autocomplete: Autocomplete
5
- - dropdown_multi_select_rails: Multi Select
6
- - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
7
- - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
8
5
  - dropdown_subtle_variant: Subtle Variant
9
6
  - dropdown_subcomponent_structure_rails: Subcomponent Structure
10
7
  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
11
8
  - dropdown_with_label: With Label
12
9
  - dropdown_with_custom_options_rails: Custom Options
13
- - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
14
10
  - dropdown_with_custom_display_rails: Custom Display
15
11
  - dropdown_with_custom_trigger_rails: Custom Trigger
16
12
  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
17
13
  - dropdown_with_custom_padding: Custom Option Padding
18
14
  - dropdown_error: Dropdown with Error
19
15
  - dropdown_default_value: Default Value
20
- - dropdown_multi_select_with_default: Multi Select Default Value
21
16
  - dropdown_blank_selection: Blank Selection
22
17
  - dropdown_separators_hidden: Separators Hidden
23
18
 
24
19
  react:
25
20
  - dropdown_default: Default
26
21
  - dropdown_with_autocomplete: Autocomplete
27
- - dropdown_multi_select: Multi Select
28
- - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
29
- - dropdown_multi_select_display: Multi Select with Form Pill Props
30
22
  - dropdown_subtle_variant: Subtle Variant
31
23
  - dropdown_subcomponent_structure: Subcomponent Structure
32
24
  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
33
25
  - dropdown_with_label: With Label
34
26
  - dropdown_with_custom_options: Custom Options
35
- - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
36
27
  - dropdown_with_custom_display: Custom Display
37
28
  - dropdown_with_custom_trigger: Custom Trigger
38
29
  - dropdown_with_search: Custom Trigger Dropdown with Search
39
30
  - dropdown_with_custom_padding: Custom Option Padding
40
31
  - dropdown_error: Dropdown with Error
41
32
  - dropdown_default_value: Default Value
42
- - dropdown_multi_select_with_default: Multi Select Default Value
43
33
  - dropdown_blank_selection: Blank Selection
44
34
  - dropdown_clear_selection: Clear Selection
45
35
  - dropdown_separators_hidden: Separators Hidden
@@ -15,8 +15,3 @@ export { default as DropdownClearSelection } from './_dropdown_clear_selection.j
15
15
  export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
16
16
  export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
17
17
  export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
18
- export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
19
- export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
20
- export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
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'
@@ -99,7 +99,6 @@
99
99
  <%= form.url_field :example_url_field, props: { label: true } %>
100
100
  <%= form.text_area :example_text_area, props: { label: true } %>
101
101
  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
102
- <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
103
102
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
104
103
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
105
104
  <%= form.check_box :example_checkbox,
@@ -98,7 +98,6 @@
98
98
  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
99
99
  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
100
100
  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
101
- <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
102
101
  <%= 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
102
  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
104
103
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>