playbook_ui 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
  3. data/app/pb_kits/playbook/pb_button/button.html.erb +3 -2
  4. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +6 -1
  5. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -3
  6. data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +0 -3
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +6 -2
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +9 -3
  10. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
  12. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +12 -7
  13. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +14 -9
  14. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +11 -6
  15. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +14 -8
  16. data/app/pb_kits/playbook/pb_list/item.html.erb +8 -30
  17. data/app/pb_kits/playbook/pb_list/item.rb +0 -7
  18. data/app/pb_kits/playbook/pb_list/list.html.erb +11 -31
  19. data/app/pb_kits/playbook/pb_list/list.rb +0 -4
  20. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -6
  21. data/app/pb_kits/playbook/pb_map/_map.scss +3 -0
  22. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +4 -4
  23. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +5 -5
  25. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +12 -30
  26. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
  27. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  28. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -3
  29. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +1 -20
  30. data/app/pb_kits/playbook/pb_radio/_radio.scss +8 -12
  31. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +3 -8
  32. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +3 -17
  33. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +0 -3
  34. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +4 -11
  35. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +0 -3
  36. data/app/pb_kits/playbook/pb_table/_table.tsx +3 -2
  37. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  38. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
  39. data/app/pb_kits/playbook/pb_table/index.ts +88 -187
  40. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -12
  41. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_table/table.rb +2 -17
  43. data/app/pb_kits/playbook/pb_table/table_row.html.erb +1 -20
  44. data/app/pb_kits/playbook/pb_table/table_row.rb +0 -5
  45. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +30 -30
  46. data/dist/chunks/{_typeahead-DjGX1O4K.js → _typeahead-BNULwihE.js} +2 -2
  47. data/dist/chunks/_weekday_stacked-BKWemDAe.js +45 -0
  48. data/dist/chunks/{lib-kMuhBuU7.js → lib-B7sgJtGS.js} +2 -2
  49. data/dist/chunks/{pb_form_validation-DBJ0wZuS.js → pb_form_validation-C5Cc0-1v.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/version.rb +1 -1
  56. metadata +7 -34
  57. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -5
  58. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
  59. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
  60. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +0 -15
  61. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +0 -24
  62. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +0 -1
  63. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
  64. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
  65. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
  66. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
  67. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +0 -47
  68. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +0 -2
  69. data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts +0 -22
  70. data/dist/chunks/_weekday_stacked-s8bX_aFg.js +0 -45
  71. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_react.md → _table_with_collapsible.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.11.1"
5
- VERSION = "14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536"
5
+ VERSION = "14.11.1.pre.alpha.play1724darkmodeauditmap5409"
6
6
  end
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.11.1.pre.alpha.pbntr703collapsiblerowsrails5536
4
+ version: 14.11.1.pre.alpha.play1724darkmodeauditmap5409
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-01-22 00:00:00.000000000 Z
12
+ date: 2025-01-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -95,20 +95,6 @@ dependencies:
95
95
  - - "~>"
96
96
  - !ruby/object:Gem::Version
97
97
  version: 0.3.2
98
- - !ruby/object:Gem::Dependency
99
- name: brakeman
100
- requirement: !ruby/object:Gem::Requirement
101
- requirements:
102
- - - '='
103
- - !ruby/object:Gem::Version
104
- version: 7.0.0
105
- type: :development
106
- prerelease: false
107
- version_requirements: !ruby/object:Gem::Requirement
108
- requirements:
109
- - - '='
110
- - !ruby/object:Gem::Version
111
- version: 7.0.0
112
98
  - !ruby/object:Gem::Dependency
113
99
  name: byebug
114
100
  requirement: !ruby/object:Gem::Requirement
@@ -1146,11 +1132,8 @@ files:
1146
1132
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
1147
1133
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
1148
1134
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
1149
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
1150
1135
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
1151
1136
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
1152
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
1153
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
1154
1137
  - app/pb_kits/playbook/pb_draggable/docs/example.yml
1155
1138
  - app/pb_kits/playbook/pb_draggable/docs/index.js
1156
1139
  - app/pb_kits/playbook/pb_draggable/draggable.html.erb
@@ -2157,9 +2140,6 @@ files:
2157
2140
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
2158
2141
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
2159
2142
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
2160
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
2161
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
2162
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
2163
2143
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
2164
2144
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
2165
2145
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
@@ -2665,17 +2645,13 @@ files:
2665
2645
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
2666
2646
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
2667
2647
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
2668
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb
2669
2648
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx
2670
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md
2671
2649
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md
2672
2650
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
2673
2651
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
2674
2652
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
2675
2653
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
2676
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb
2677
2654
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx
2678
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md
2679
2655
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md
2680
2656
  - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
2681
2657
  - app/pb_kits/playbook/pb_table/docs/_table_striped.jsx
@@ -2690,10 +2666,8 @@ files:
2690
2666
  - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
2691
2667
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
2692
2668
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
2693
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb
2694
2669
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2695
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2696
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2670
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md
2697
2671
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2698
2672
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2699
2673
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
@@ -2755,7 +2729,6 @@ files:
2755
2729
  - app/pb_kits/playbook/pb_table/table_header.rb
2756
2730
  - app/pb_kits/playbook/pb_table/table_row.html.erb
2757
2731
  - app/pb_kits/playbook/pb_table/table_row.rb
2758
- - app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts
2759
2732
  - app/pb_kits/playbook/pb_text_input/_text_input.scss
2760
2733
  - app/pb_kits/playbook/pb_text_input/_text_input.tsx
2761
2734
  - app/pb_kits/playbook/pb_text_input/add_on.html.erb
@@ -3264,11 +3237,11 @@ files:
3264
3237
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3265
3238
  - app/pb_kits/playbook/utilities/text.ts
3266
3239
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3267
- - dist/chunks/_typeahead-DjGX1O4K.js
3268
- - dist/chunks/_weekday_stacked-s8bX_aFg.js
3240
+ - dist/chunks/_typeahead-BNULwihE.js
3241
+ - dist/chunks/_weekday_stacked-BKWemDAe.js
3269
3242
  - dist/chunks/lazysizes-B7xYodB-.js
3270
- - dist/chunks/lib-kMuhBuU7.js
3271
- - dist/chunks/pb_form_validation-DBJ0wZuS.js
3243
+ - dist/chunks/lib-B7sgJtGS.js
3244
+ - dist/chunks/pb_form_validation-C5Cc0-1v.js
3272
3245
  - dist/chunks/vendor.js
3273
3246
  - dist/menu.yml
3274
3247
  - dist/playbook-doc.js
@@ -1,5 +0,0 @@
1
- For a simplified version of the Draggable API for the List kit, you can do the following:
2
-
3
- The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
4
-
5
- An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
@@ -1,38 +0,0 @@
1
- <%= pb_rails("selectable_list",
2
- props: {
3
- enable_drag: true,
4
- variant: "radio",
5
- items: [
6
- { drag_id: "41",
7
- text: "Task 1",
8
- input_options: {
9
- value: "1",
10
- name: "radio-name",
11
- }
12
- },
13
- { drag_id: "42",
14
- text: "Task 2",
15
- checked: true,
16
- input_options: {
17
- value: "2",
18
- name: "radio-name",
19
- }
20
- },
21
- { drag_id: "43",
22
- text: "Task 3",
23
- input_options: {
24
- value: "3",
25
- name: "radio-name",
26
- }
27
- },
28
- { drag_id: "44",
29
- text: "Task 4",
30
- input_options: {
31
- value: "4",
32
- name: "radio-name",
33
- }
34
- }
35
- ]
36
- }
37
- )
38
- %>
@@ -1,3 +0,0 @@
1
- For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
2
-
3
- The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
@@ -1,15 +0,0 @@
1
- <%= pb_rails("phone_number_input", props: {
2
- id: "phone_number_input",
3
- format_as_you_type: true
4
- }) %>
5
-
6
- <%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
7
-
8
- <%= javascript_tag do %>
9
- document.querySelector('#clickable').addEventListener('click', () => {
10
- const formattedPhoneNumber = document.querySelector('#phone_number_input').value
11
- const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
12
-
13
- alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
14
- })
15
- <% end %>
@@ -1,24 +0,0 @@
1
- import React, { useState } from "react";
2
- import { PhoneNumberInput, Body } from "playbook-ui";
3
-
4
- const PhoneNumberInputFormat = (props) => {
5
- const [phoneNumber, setPhoneNumber] = useState("");
6
-
7
- const handleOnChange = ({ number }) => {
8
- setPhoneNumber(number);
9
- };
10
-
11
- return (
12
- <>
13
- <PhoneNumberInput
14
- formatAsYouType
15
- id="format"
16
- onChange={handleOnChange}
17
- {...props}
18
- />
19
- {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
20
- </>
21
- );
22
- };
23
-
24
- export default PhoneNumberInputFormat;
@@ -1 +0,0 @@
1
- NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually.
@@ -1,74 +0,0 @@
1
- <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
2
- <thead>
3
- <tr>
4
- <th id="a">Column 1</th>
5
- <th>Column 2</th>
6
- <th>Column 3</th>
7
- <th>Column 4</th>
8
- <th>Column 5</th>
9
- <th>Column 6</th>
10
- <th>Column 7</th>
11
- <th>Column 8</th>
12
- <th>Column 9</th>
13
- <th>Column 10</th>
14
- <th>Column 11</th>
15
- <th>Column 12</th>
16
- <th>Column 13</th>
17
- <th>Column 14</th>
18
- <th id="b">Column 15</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <tr>
23
- <td id="a">Value 1</td>
24
- <td>Value 2</td>
25
- <td>Value 3</td>
26
- <td>Value 4</td>
27
- <td>Value 5</td>
28
- <td>Value 6</td>
29
- <td>Value 7</td>
30
- <td>Value 8</td>
31
- <td>Value 9</td>
32
- <td>Value 10</td>
33
- <td>Value 11</td>
34
- <td>Value 12</td>
35
- <td>Value 13</td>
36
- <td>Value 14</td>
37
- <td id="b">Value 15</td>
38
- </tr>
39
- <tr>
40
- <td id="a">Value 1</td>
41
- <td>Value 2</td>
42
- <td>Value 3</td>
43
- <td>Value 4</td>
44
- <td>Value 5</td>
45
- <td>Value 6</td>
46
- <td>Value 7</td>
47
- <td>Value 8</td>
48
- <td>Value 9</td>
49
- <td>Value 10</td>
50
- <td>Value 11</td>
51
- <td>Value 12</td>
52
- <td>Value 13</td>
53
- <td>Value 14</td>
54
- <td id="b">Value 15</td>
55
- </tr>
56
- <tr>
57
- <td id="a">Value 1</td>
58
- <td>Value 2</td>
59
- <td>Value 3</td>
60
- <td>Value 4</td>
61
- <td>Value 5</td>
62
- <td>Value 6</td>
63
- <td>Value 7</td>
64
- <td>Value 8</td>
65
- <td>Value 9</td>
66
- <td>Value 10</td>
67
- <td>Value 11</td>
68
- <td>Value 12</td>
69
- <td>Value 13</td>
70
- <td>Value 14</td>
71
- <td id="b">Value 15</td>
72
- </tr>
73
- </tbody>
74
- <% end %>
@@ -1,3 +0,0 @@
1
- The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
2
-
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
@@ -1,74 +0,0 @@
1
- <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
2
- <thead>
3
- <tr>
4
- <th>Column 1</th>
5
- <th>Column 2</th>
6
- <th>Column 3</th>
7
- <th>Column 4</th>
8
- <th>Column 5</th>
9
- <th>Column 6</th>
10
- <th>Column 7</th>
11
- <th>Column 8</th>
12
- <th>Column 9</th>
13
- <th>Column 10</th>
14
- <th>Column 11</th>
15
- <th>Column 12</th>
16
- <th id="13">Column 13</th>
17
- <th id="14">Column 14</th>
18
- <th id="15">Column 15</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <tr>
23
- <td>Value 1</td>
24
- <td>Value 2</td>
25
- <td>Value 3</td>
26
- <td>Value 4</td>
27
- <td>Value 5</td>
28
- <td>Value 6</td>
29
- <td>Value 7</td>
30
- <td>Value 8</td>
31
- <td>Value 9</td>
32
- <td>Value 10</td>
33
- <td>Value 11</td>
34
- <td>Value 12</td>
35
- <td id="13">Value 13</td>
36
- <td id="14">Value 14</td>
37
- <td id="15">Value 15</td>
38
- </tr>
39
- <tr>
40
- <td>Value 1</td>
41
- <td>Value 2</td>
42
- <td>Value 3</td>
43
- <td>Value 4</td>
44
- <td>Value 5</td>
45
- <td>Value 6</td>
46
- <td>Value 7</td>
47
- <td>Value 8</td>
48
- <td>Value 9</td>
49
- <td>Value 10</td>
50
- <td>Value 11</td>
51
- <td>Value 12</td>
52
- <td id="13">Value 13</td>
53
- <td id="14">Value 14</td>
54
- <td id="15">Value 15</td>
55
- </tr>
56
- <tr>
57
- <td>Value 1</td>
58
- <td>Value 2</td>
59
- <td>Value 3</td>
60
- <td>Value 4</td>
61
- <td>Value 5</td>
62
- <td>Value 6</td>
63
- <td>Value 7</td>
64
- <td>Value 8</td>
65
- <td>Value 9</td>
66
- <td>Value 10</td>
67
- <td>Value 11</td>
68
- <td>Value 12</td>
69
- <td id="13">Value 13</td>
70
- <td id="14">Value 14</td>
71
- <td id="15">Value 15</td>
72
- </tr>
73
- </tbody>
74
- <% end %>
@@ -1,3 +0,0 @@
1
- The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
-
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.
@@ -1,47 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
- <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
4
- <% end %>
5
- <% end %>
6
-
7
- <%= pb_rails("table", props: { size: "sm" }) do %>
8
- <%= pb_rails("table/table_head") do %>
9
- <%= pb_rails("table/table_row") do %>
10
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
11
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
12
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
13
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
14
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
15
- <%= pb_rails("table/table_header", props: { text: ""}) %>
16
- <% end %>
17
- <% end %>
18
- <%= pb_rails("table/table_body") do %>
19
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
20
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
21
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
22
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
23
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
24
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
25
- <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
26
- <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
27
- <% end %>
28
- <% end %>
29
- <%= pb_rails("table/table_row") do %>
30
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
31
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
32
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
33
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
34
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
35
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
36
- <% end %>
37
- <%= pb_rails("table/table_row") do %>
38
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
39
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
40
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
41
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
42
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
43
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
44
- <% end %>
45
- <% end %>
46
- <% end %>
47
-
@@ -1,2 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
2
- Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
@@ -1,22 +0,0 @@
1
- export const addDataTitle = () => {
2
- const tables = document.querySelectorAll('.table-responsive-collapse');
3
- // Each Table
4
- [].forEach.call(tables, (table: HTMLTableElement) => {
5
- // Header Titles
6
- const headers: string[] = [];
7
- [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
8
- const colSpan = header.colSpan
9
- for (let i = 0; i < colSpan; i++) {
10
- headers.push(header.textContent.replace(/\r?\n|\r/, ''));
11
- }
12
- });
13
- // for each row in tbody
14
- [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
15
- // for each cell
16
- [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
17
- // apply the attribute
18
- cell.setAttribute('data-title', headers[headerIndex])
19
- })
20
- })
21
- });
22
- }