playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12820 → 13.26.0
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/_advanced_table.scss +0 -14
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -3
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +21 -86
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +3 -26
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +0 -41
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -9
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -3
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_default.html.erb → _loading_inline_light.html.erb} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_default.jsx → _loading_inline_light.jsx} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +2 -4
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +0 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +0 -14
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +0 -6
- data/dist/menu.yml +1 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +2 -2
- metadata +8 -34
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +0 -33
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -24
- data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -78
- data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +0 -44
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +0 -71
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +0 -77
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +0 -71
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +0 -77
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +0 -17
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +0 -60
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +0 -45
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +0 -17
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +0 -47
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +0 -20
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -19
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -15
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -19
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +0 -22
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +0 -22
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +0 -38
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +0 -30
- data/app/pb_kits/playbook/pb_dropdown/index.js +0 -152
- data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +0 -77
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +0 -13
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +0 -26
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.26.0
|
4
|
+
version: 13.26.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-05-
|
12
|
+
date: 2024-05-02 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -261,8 +261,6 @@ files:
|
|
261
261
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb
|
262
262
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
|
263
263
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
|
264
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
|
265
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
|
266
264
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
|
267
265
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
|
268
266
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
@@ -283,11 +281,11 @@ files:
|
|
283
281
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md
|
284
282
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
|
285
283
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
|
284
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_description.md
|
286
285
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
287
286
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
|
288
287
|
- app/pb_kits/playbook/pb_advanced_table/docs/example.yml
|
289
288
|
- app/pb_kits/playbook/pb_advanced_table/docs/index.js
|
290
|
-
- app/pb_kits/playbook/pb_advanced_table/index.js
|
291
289
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
|
292
290
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
|
293
291
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
|
@@ -297,16 +295,11 @@ files:
|
|
297
295
|
- app/pb_kits/playbook/pb_advanced_table/table_header.rb
|
298
296
|
- app/pb_kits/playbook/pb_advanced_table/table_row.html.erb
|
299
297
|
- app/pb_kits/playbook/pb_advanced_table/table_row.rb
|
300
|
-
- app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx
|
301
298
|
- app/pb_kits/playbook/pb_avatar/_avatar.scss
|
302
299
|
- app/pb_kits/playbook/pb_avatar/_avatar.tsx
|
303
300
|
- app/pb_kits/playbook/pb_avatar/avatar.html.erb
|
304
301
|
- app/pb_kits/playbook/pb_avatar/avatar.rb
|
305
302
|
- app/pb_kits/playbook/pb_avatar/avatar.test.js
|
306
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb
|
307
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
|
308
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb
|
309
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
|
310
303
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
|
311
304
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx
|
312
305
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default_swift.md
|
@@ -1044,48 +1037,31 @@ files:
|
|
1044
1037
|
- app/pb_kits/playbook/pb_dropdown/_dropdown.scss
|
1045
1038
|
- app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
|
1046
1039
|
- app/pb_kits/playbook/pb_dropdown/context/index.tsx
|
1047
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
|
1048
1040
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
1049
1041
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
|
1050
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
|
1051
1042
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
1052
1043
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
|
1053
1044
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
|
1054
1045
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
|
1055
1046
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
|
1056
1047
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
|
1057
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
|
1058
1048
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
|
1059
1049
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
|
1060
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
|
1061
1050
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
|
1062
1051
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
|
1063
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
|
1064
1052
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
|
1065
1053
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
|
1066
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
|
1067
1054
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
|
1068
1055
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
|
1069
1056
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
|
1070
1057
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
|
1071
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
|
1072
1058
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
|
1073
1059
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
|
1074
1060
|
- app/pb_kits/playbook/pb_dropdown/docs/example.yml
|
1075
1061
|
- app/pb_kits/playbook/pb_dropdown/docs/index.js
|
1076
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown.html.erb
|
1077
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown.rb
|
1078
1062
|
- app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
|
1079
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb
|
1080
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_container.rb
|
1081
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb
|
1082
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_option.rb
|
1083
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb
|
1084
|
-
- app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb
|
1085
1063
|
- app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx
|
1086
1064
|
- app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx
|
1087
|
-
- app/pb_kits/playbook/pb_dropdown/index.js
|
1088
|
-
- app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js
|
1089
1065
|
- app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss
|
1090
1066
|
- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx
|
1091
1067
|
- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
|
@@ -1624,10 +1600,8 @@ files:
|
|
1624
1600
|
- app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss
|
1625
1601
|
- app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
|
1626
1602
|
- app/pb_kits/playbook/pb_loading_inline/docs/_description.md
|
1627
|
-
- app/pb_kits/playbook/pb_loading_inline/docs/
|
1628
|
-
- app/pb_kits/playbook/pb_loading_inline/docs/
|
1629
|
-
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb
|
1630
|
-
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.jsx
|
1603
|
+
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.html.erb
|
1604
|
+
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx
|
1631
1605
|
- app/pb_kits/playbook/pb_loading_inline/docs/example.yml
|
1632
1606
|
- app/pb_kits/playbook/pb_loading_inline/docs/index.js
|
1633
1607
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
|
@@ -2944,7 +2918,7 @@ homepage: https://playbook.powerapp.cloud/
|
|
2944
2918
|
licenses:
|
2945
2919
|
- ISC
|
2946
2920
|
metadata: {}
|
2947
|
-
post_install_message:
|
2921
|
+
post_install_message:
|
2948
2922
|
rdoc_options: []
|
2949
2923
|
require_paths:
|
2950
2924
|
- lib
|
@@ -2960,7 +2934,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2960
2934
|
version: '0'
|
2961
2935
|
requirements: []
|
2962
2936
|
rubygems_version: 3.5.3
|
2963
|
-
signing_key:
|
2937
|
+
signing_key:
|
2964
2938
|
specification_version: 4
|
2965
2939
|
summary: Playbook Design System
|
2966
2940
|
test_files: []
|
@@ -1,33 +0,0 @@
|
|
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: {table_data: @table_data, column_definitions: column_definitions}) %>
|
@@ -1,24 +0,0 @@
|
|
1
|
-
**BETA VERSION**
|
2
|
-
This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
|
3
|
-
<br />
|
4
|
-
<br />
|
5
|
-
<br />
|
6
|
-
|
7
|
-
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
|
8
|
-
|
9
|
-
### table_data
|
10
|
-
|
11
|
-
`table_data` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.
|
12
|
-
|
13
|
-
For a visual of the data structure needed for `table_data`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
|
14
|
-
|
15
|
-
### column_definitions
|
16
|
-
|
17
|
-
Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `column_definitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
|
18
|
-
|
19
|
-
- `accessor`: this is the key from your data for the value you want rendered in that column
|
20
|
-
- `label`: this is what will be rendered as the column header label
|
21
|
-
|
22
|
-
There is also one optional item that is only required if the table has nested data:
|
23
|
-
|
24
|
-
- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
|
@@ -1,78 +0,0 @@
|
|
1
|
-
import PbEnhancedElement from '../pb_enhanced_element'
|
2
|
-
|
3
|
-
const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
|
4
|
-
const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
|
5
|
-
const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
|
6
|
-
const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
|
7
|
-
|
8
|
-
export default class PbAdvancedTable extends PbEnhancedElement {
|
9
|
-
static get selector() {
|
10
|
-
return ADVANCED_TABLE_SELECTOR
|
11
|
-
}
|
12
|
-
|
13
|
-
get target() {
|
14
|
-
return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
|
15
|
-
}
|
16
|
-
|
17
|
-
connect() {
|
18
|
-
this.element.addEventListener('click', () => {
|
19
|
-
this.toggleElement(this.target)
|
20
|
-
})
|
21
|
-
}
|
22
|
-
|
23
|
-
showElement(elem) {
|
24
|
-
const getHeight = () => {
|
25
|
-
elem.style.display = 'block'
|
26
|
-
const height = elem.scrollHeight + 'px'
|
27
|
-
elem.style.display = ''
|
28
|
-
return height
|
29
|
-
}
|
30
|
-
|
31
|
-
const height = getHeight()
|
32
|
-
elem.classList.add('is-visible')
|
33
|
-
elem.style.height = height
|
34
|
-
elem.style.overflow = "hidden"
|
35
|
-
|
36
|
-
window.setTimeout(() => {
|
37
|
-
elem.style.height = ''
|
38
|
-
elem.style.overflow = "visible"
|
39
|
-
}, 250)
|
40
|
-
}
|
41
|
-
|
42
|
-
hideElement(elem) {
|
43
|
-
elem.style.height = elem.scrollHeight + 'px'
|
44
|
-
|
45
|
-
window.setTimeout(() => {
|
46
|
-
elem.style.height = '0'
|
47
|
-
elem.style.paddingTop = '0'
|
48
|
-
elem.style.paddingBottom = '0'
|
49
|
-
elem.style.overflow = "hidden"
|
50
|
-
}, 1)
|
51
|
-
|
52
|
-
window.setTimeout(() => {
|
53
|
-
elem.classList.remove('is-visible')
|
54
|
-
elem.style.overflow = ""
|
55
|
-
}, 200)
|
56
|
-
}
|
57
|
-
|
58
|
-
toggleElement(elem) {
|
59
|
-
if (elem.classList.contains('is-visible')) {
|
60
|
-
this.hideElement(elem)
|
61
|
-
this.displayDownArrow()
|
62
|
-
return
|
63
|
-
}
|
64
|
-
|
65
|
-
this.showElement(elem)
|
66
|
-
this.displayUpArrow()
|
67
|
-
}
|
68
|
-
|
69
|
-
displayDownArrow() {
|
70
|
-
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
|
71
|
-
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
|
72
|
-
}
|
73
|
-
|
74
|
-
displayUpArrow() {
|
75
|
-
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
|
76
|
-
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
|
77
|
-
}
|
78
|
-
}
|
@@ -1,44 +0,0 @@
|
|
1
|
-
export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs") => {
|
2
|
-
let placementMapping: { [key: string]: any } = {};
|
3
|
-
|
4
|
-
switch (size) {
|
5
|
-
case 'xxs':
|
6
|
-
case 'xs':
|
7
|
-
placementMapping = {
|
8
|
-
'top-right': { top: 'xs', right: 'xs' },
|
9
|
-
'bottom-left': { bottom: 'xs', left: 'xs' },
|
10
|
-
'top-left': { top: 'xs', left: 'xs' },
|
11
|
-
'bottom-right': { bottom: 'xs', right: 'xs' },
|
12
|
-
};
|
13
|
-
break;
|
14
|
-
|
15
|
-
case 'sm':
|
16
|
-
placementMapping = {
|
17
|
-
'top-right': { top: '0', right: 'xs' },
|
18
|
-
'bottom-left': { bottom: '0', left: 'xs' },
|
19
|
-
'top-left': { top: '0', left: 'xs' },
|
20
|
-
'bottom-right': { bottom: '0', right: 'xs' },
|
21
|
-
};
|
22
|
-
break;
|
23
|
-
|
24
|
-
case 'md':
|
25
|
-
case 'lg':
|
26
|
-
placementMapping = {
|
27
|
-
'top-right': { top: '0', right: '0' },
|
28
|
-
'bottom-left': { bottom: '0', left: '0' },
|
29
|
-
'top-left': { top: '0', left: '0' },
|
30
|
-
'bottom-right': { bottom: '0', right: '0' },
|
31
|
-
};
|
32
|
-
break;
|
33
|
-
|
34
|
-
case 'xl':
|
35
|
-
placementMapping = {
|
36
|
-
'top-right': { top: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
|
37
|
-
'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
|
38
|
-
'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
|
39
|
-
'bottom-right': { bottom: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
|
40
|
-
};
|
41
|
-
break;
|
42
|
-
}
|
43
|
-
return placementMapping[placement] || {};
|
44
|
-
};
|
@@ -1,71 +0,0 @@
|
|
1
|
-
<%= pb_rails("avatar", props: {
|
2
|
-
component_overlay: {
|
3
|
-
component: "badge",
|
4
|
-
text: "12",
|
5
|
-
placement: "top-left"
|
6
|
-
},
|
7
|
-
name: "Terry Johnson",
|
8
|
-
size: "xxs",
|
9
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
10
|
-
margin_bottom: "sm"
|
11
|
-
}) %>
|
12
|
-
|
13
|
-
<%= pb_rails("avatar", props: {
|
14
|
-
component_overlay: {
|
15
|
-
component: "badge",
|
16
|
-
text: "12",
|
17
|
-
placement: "top-right"
|
18
|
-
},
|
19
|
-
name: "Terry Johnson",
|
20
|
-
size: "xs",
|
21
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
22
|
-
margin_bottom: "sm"
|
23
|
-
}) %>
|
24
|
-
|
25
|
-
<%= pb_rails("avatar", props: {
|
26
|
-
component_overlay: {
|
27
|
-
component: "badge",
|
28
|
-
text: "12",
|
29
|
-
placement: "bottom-right"
|
30
|
-
},
|
31
|
-
name: "Terry Johnson",
|
32
|
-
size: "sm",
|
33
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
34
|
-
margin_bottom: "sm"
|
35
|
-
}) %>
|
36
|
-
|
37
|
-
<%= pb_rails("avatar", props: {
|
38
|
-
component_overlay: {
|
39
|
-
component: "badge",
|
40
|
-
text: "12",
|
41
|
-
placement: "bottom-left"
|
42
|
-
},
|
43
|
-
name: "Terry Johnson",
|
44
|
-
size: "md",
|
45
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
46
|
-
margin_bottom: "sm"
|
47
|
-
}) %>
|
48
|
-
|
49
|
-
<%= pb_rails("avatar", props: {
|
50
|
-
component_overlay: {
|
51
|
-
component: "badge",
|
52
|
-
text: "12",
|
53
|
-
placement: "top-left"
|
54
|
-
},
|
55
|
-
name: "Terry Johnson",
|
56
|
-
size: "lg",
|
57
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
58
|
-
margin_bottom: "sm"
|
59
|
-
}) %>
|
60
|
-
|
61
|
-
<%= pb_rails("avatar", props: {
|
62
|
-
component_overlay: {
|
63
|
-
component: "badge",
|
64
|
-
text: "12",
|
65
|
-
placement: "top-right"
|
66
|
-
},
|
67
|
-
name: "Terry Johnson",
|
68
|
-
size: "xl",
|
69
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
70
|
-
margin_bottom: "sm"
|
71
|
-
}) %>
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { Avatar } from '../..'
|
3
|
-
|
4
|
-
const AvatarBadgeComponentOverlay = () => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<Avatar
|
8
|
-
componentOverlay={{
|
9
|
-
component: "badge",
|
10
|
-
placement: "top-left",
|
11
|
-
text: "12"
|
12
|
-
}}
|
13
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
14
|
-
marginBottom="sm"
|
15
|
-
size="xxs"
|
16
|
-
/>
|
17
|
-
|
18
|
-
<Avatar
|
19
|
-
componentOverlay={{
|
20
|
-
component: "badge",
|
21
|
-
placement: "top-right",
|
22
|
-
text: "12"
|
23
|
-
}}
|
24
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
25
|
-
marginBottom="sm"
|
26
|
-
size="xs"
|
27
|
-
/>
|
28
|
-
|
29
|
-
<Avatar
|
30
|
-
componentOverlay={{
|
31
|
-
component: "badge",
|
32
|
-
placement: "bottom-right",
|
33
|
-
text: "12"
|
34
|
-
}}
|
35
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
36
|
-
marginBottom="sm"
|
37
|
-
size="sm"
|
38
|
-
/>
|
39
|
-
|
40
|
-
<Avatar
|
41
|
-
componentOverlay={{
|
42
|
-
component: "badge",
|
43
|
-
placement: "bottom-left",
|
44
|
-
text: "12"
|
45
|
-
}}
|
46
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
47
|
-
marginBottom="sm"
|
48
|
-
size="md"
|
49
|
-
/>
|
50
|
-
|
51
|
-
<Avatar
|
52
|
-
componentOverlay={{
|
53
|
-
component: "badge",
|
54
|
-
placement: "top-left",
|
55
|
-
text: "12"
|
56
|
-
}}
|
57
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
58
|
-
marginBottom="sm"
|
59
|
-
size="lg"
|
60
|
-
/>
|
61
|
-
|
62
|
-
<Avatar
|
63
|
-
componentOverlay={{
|
64
|
-
component: "badge",
|
65
|
-
placement: "top-right",
|
66
|
-
text: "12"
|
67
|
-
}}
|
68
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
69
|
-
marginBottom="sm"
|
70
|
-
size="xl"
|
71
|
-
/>
|
72
|
-
|
73
|
-
</div>
|
74
|
-
)
|
75
|
-
}
|
76
|
-
|
77
|
-
export default AvatarBadgeComponentOverlay
|
@@ -1,71 +0,0 @@
|
|
1
|
-
<%= pb_rails("avatar", props: {
|
2
|
-
component_overlay: {
|
3
|
-
component: "icon_circle",
|
4
|
-
icon: "plus",
|
5
|
-
placement: "top-left"
|
6
|
-
},
|
7
|
-
name: "Terry Johnson",
|
8
|
-
size: "xxs",
|
9
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
10
|
-
margin_bottom: "sm"
|
11
|
-
}) %>
|
12
|
-
|
13
|
-
<%= pb_rails("avatar", props: {
|
14
|
-
component_overlay: {
|
15
|
-
component: "icon_circle",
|
16
|
-
icon: "plus",
|
17
|
-
placement: "top-right"
|
18
|
-
},
|
19
|
-
name: "Terry Johnson",
|
20
|
-
size: "xs",
|
21
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
22
|
-
margin_bottom: "sm"
|
23
|
-
}) %>
|
24
|
-
|
25
|
-
<%= pb_rails("avatar", props: {
|
26
|
-
component_overlay: {
|
27
|
-
component: "icon_circle",
|
28
|
-
icon: "plus",
|
29
|
-
placement: "bottom-right"
|
30
|
-
},
|
31
|
-
name: "Terry Johnson",
|
32
|
-
size: "sm",
|
33
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
34
|
-
margin_bottom: "sm"
|
35
|
-
}) %>
|
36
|
-
|
37
|
-
<%= pb_rails("avatar", props: {
|
38
|
-
component_overlay: {
|
39
|
-
component: "icon_circle",
|
40
|
-
icon: "plus",
|
41
|
-
placement: "bottom-left"
|
42
|
-
},
|
43
|
-
name: "Terry Johnson",
|
44
|
-
size: "md",
|
45
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
46
|
-
margin_bottom: "sm"
|
47
|
-
}) %>
|
48
|
-
|
49
|
-
<%= pb_rails("avatar", props: {
|
50
|
-
component_overlay: {
|
51
|
-
component: "icon_circle",
|
52
|
-
icon: "plus",
|
53
|
-
placement: "top-left"
|
54
|
-
},
|
55
|
-
name: "Terry Johnson",
|
56
|
-
size: "lg",
|
57
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
58
|
-
margin_bottom: "sm"
|
59
|
-
}) %>
|
60
|
-
|
61
|
-
<%= pb_rails("avatar", props: {
|
62
|
-
component_overlay: {
|
63
|
-
component: "icon_circle",
|
64
|
-
icon: "plus",
|
65
|
-
placement: "top-right"
|
66
|
-
},
|
67
|
-
name: "Terry Johnson",
|
68
|
-
size: "xl",
|
69
|
-
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
70
|
-
margin_bottom: "sm"
|
71
|
-
}) %>
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { Avatar } from '../..'
|
3
|
-
|
4
|
-
const AvatarCircleIconComponentOverlay = () => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<Avatar
|
8
|
-
componentOverlay={{
|
9
|
-
component: "iconCircle",
|
10
|
-
icon: "plus",
|
11
|
-
placement: "top-left"
|
12
|
-
}}
|
13
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
14
|
-
marginBottom="sm"
|
15
|
-
size="xxs"
|
16
|
-
/>
|
17
|
-
|
18
|
-
<Avatar
|
19
|
-
componentOverlay={{
|
20
|
-
component: "iconCircle",
|
21
|
-
icon: "plus",
|
22
|
-
placement: "top-right"
|
23
|
-
}}
|
24
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
25
|
-
marginBottom="sm"
|
26
|
-
size="xs"
|
27
|
-
/>
|
28
|
-
|
29
|
-
<Avatar
|
30
|
-
componentOverlay={{
|
31
|
-
component: "iconCircle",
|
32
|
-
icon: "plus",
|
33
|
-
placement: "bottom-right",
|
34
|
-
}}
|
35
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
36
|
-
marginBottom="sm"
|
37
|
-
size="sm"
|
38
|
-
/>
|
39
|
-
|
40
|
-
<Avatar
|
41
|
-
componentOverlay={{
|
42
|
-
component: "iconCircle",
|
43
|
-
icon: "plus",
|
44
|
-
placement: "bottom-left"
|
45
|
-
}}
|
46
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
47
|
-
marginBottom="sm"
|
48
|
-
size="md"
|
49
|
-
/>
|
50
|
-
|
51
|
-
<Avatar
|
52
|
-
componentOverlay={{
|
53
|
-
component: "iconCircle",
|
54
|
-
icon: "plus",
|
55
|
-
placement: "top-left"
|
56
|
-
}}
|
57
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
58
|
-
marginBottom="sm"
|
59
|
-
size="lg"
|
60
|
-
/>
|
61
|
-
|
62
|
-
<Avatar
|
63
|
-
componentOverlay={{
|
64
|
-
component: "iconCircle",
|
65
|
-
icon: "plus",
|
66
|
-
placement: "top-right"
|
67
|
-
}}
|
68
|
-
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
69
|
-
marginBottom="sm"
|
70
|
-
size="xl"
|
71
|
-
/>
|
72
|
-
|
73
|
-
</div>
|
74
|
-
)
|
75
|
-
}
|
76
|
-
|
77
|
-
export default AvatarCircleIconComponentOverlay
|
@@ -1,17 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: 'United States', value: 'United States' },
|
4
|
-
{ label: 'Canada', value: 'Canada' },
|
5
|
-
{ label: 'Pakistan', value: 'Pakistan' },
|
6
|
-
]
|
7
|
-
|
8
|
-
%>
|
9
|
-
|
10
|
-
<%= pb_rails("dropdown", props: {options: options}) do %>
|
11
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
12
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
13
|
-
<% options.each do |option| %>
|
14
|
-
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
15
|
-
<% end %>
|
16
|
-
<% end %>
|
17
|
-
<% end %>
|