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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
- data/app/pb_kits/playbook/pb_button/button.html.erb +3 -2
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +6 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -3
- data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +0 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +6 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +9 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +12 -7
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +14 -9
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +11 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +14 -8
- data/app/pb_kits/playbook/pb_list/item.html.erb +8 -30
- data/app/pb_kits/playbook/pb_list/item.rb +0 -7
- data/app/pb_kits/playbook/pb_list/list.html.erb +11 -31
- data/app/pb_kits/playbook/pb_list/list.rb +0 -4
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -6
- data/app/pb_kits/playbook/pb_map/_map.scss +3 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +4 -4
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +7 -7
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +5 -5
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +12 -30
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -3
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +1 -20
- data/app/pb_kits/playbook/pb_radio/_radio.scss +8 -12
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +3 -8
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +3 -17
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +0 -3
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +4 -11
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +0 -3
- data/app/pb_kits/playbook/pb_table/_table.tsx +3 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_table/index.ts +88 -187
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -12
- data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +2 -17
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +1 -20
- data/app/pb_kits/playbook/pb_table/table_row.rb +0 -5
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +30 -30
- data/dist/chunks/{_typeahead-DjGX1O4K.js → _typeahead-BNULwihE.js} +2 -2
- data/dist/chunks/_weekday_stacked-BKWemDAe.js +45 -0
- data/dist/chunks/{lib-kMuhBuU7.js → lib-B7sgJtGS.js} +2 -2
- data/dist/chunks/{pb_form_validation-DBJ0wZuS.js → pb_form_validation-C5Cc0-1v.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -34
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +0 -15
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +0 -24
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +0 -47
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts +0 -22
- data/dist/chunks/_weekday_stacked-s8bX_aFg.js +0 -45
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_react.md → _table_with_collapsible.md} +0 -0
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.11.1.pre.alpha.
|
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-
|
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/
|
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-
|
3268
|
-
- dist/chunks/_weekday_stacked-
|
3240
|
+
- dist/chunks/_typeahead-BNULwihE.js
|
3241
|
+
- dist/chunks/_weekday_stacked-BKWemDAe.js
|
3269
3242
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3270
|
-
- dist/chunks/lib-
|
3271
|
-
- dist/chunks/pb_form_validation-
|
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,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
|
-
}
|