playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12816 → 13.26.0.pre.alpha.jasoncypretpatch12820
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_dropdown/_dropdown.scss +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
- 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.html.erb +60 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +15 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +38 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
- data/app/pb_kits/playbook/pb_dropdown/index.js +152 -0
- data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +3 -0
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +18 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0f58c4cbdc37f2196240ed4beb45f559f749af9855066602ad58a1d35e85fee3
|
|
4
|
+
data.tar.gz: d34a51429e697f5e1c51fd2ad58771019944926afc4776b3cf7b0fffb6d3e016
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 81b61acc8877f7c9b4de796cfbf2eb8ae95cc7fb1b225db5fbbf5e82ceee3940878d9a64ff6fab776116ce20b00dbfafa637a920bc0823de2ac0cfbd0fe0338c
|
|
7
|
+
data.tar.gz: 57c56349740deb36705f8698b742951504311afaab29f77aa34727a67170970cc28a98422b9d68cb2491a36d4505ccaaf5483b70daeba90d12be181d9dbd64ea
|
|
@@ -0,0 +1,17 @@
|
|
|
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 %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
|
|
2
2
|
|
|
3
|
-
`Dropdown. Trigger`
|
|
4
|
-
`Dropdown.Container`
|
|
5
|
-
`Dropdown.Option`
|
|
3
|
+
`Dropdown. Trigger` / `dropdown/dropdown_trigger`
|
|
4
|
+
`Dropdown.Container`/ `dropdown/dropdown_container`
|
|
5
|
+
`Dropdown.Option` / `dropdown/dropdown_option`
|
|
6
6
|
|
|
7
7
|
See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Jasper Furniss",
|
|
5
|
+
value: "Jasper Furniss",
|
|
6
|
+
territory: "PHL",
|
|
7
|
+
title: "Senior UX Engineer",
|
|
8
|
+
id: "jasper-furniss",
|
|
9
|
+
status: "Offline"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Ramon Ruiz",
|
|
13
|
+
value: "Ramon Ruiz",
|
|
14
|
+
territory: "PHL",
|
|
15
|
+
title: "Senior UX Designer",
|
|
16
|
+
id: "ramon-ruiz",
|
|
17
|
+
status: "Away"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Jason Cypret",
|
|
21
|
+
value: "Jason Cypret",
|
|
22
|
+
territory: "PHL",
|
|
23
|
+
title: "VP of User Experience",
|
|
24
|
+
id: "jason-cypret",
|
|
25
|
+
status: "Online"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Courtney Long",
|
|
29
|
+
value: "Courtney Long",
|
|
30
|
+
territory: "PHL",
|
|
31
|
+
title: "UX Design Mentor",
|
|
32
|
+
id: "courtney-long",
|
|
33
|
+
status: "Online"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<%
|
|
40
|
+
custom_display = capture do
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
42
|
+
end
|
|
43
|
+
%>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
47
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
|
48
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
49
|
+
<% options.each do |option| %>
|
|
50
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
52
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
55
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "🇺🇸",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "🇨🇦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "🇵🇰",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
30
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
31
|
+
<% options.each do |option| %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
33
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
34
|
+
<%= pb_rails("flex") do %>
|
|
35
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
36
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
40
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
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, padding:"sm"}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "🇺🇸",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "🇨🇦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "🇵🇰",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") do %>
|
|
30
|
+
<%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
|
|
33
|
+
<% options.each do |option| %>
|
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
35
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
36
|
+
<%= pb_rails("flex") do %>
|
|
37
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
38
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
42
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
<% end %>
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
rails:
|
|
3
|
+
- dropdown_default: Default
|
|
4
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
5
|
+
- dropdown_with_label: With Label
|
|
6
|
+
- dropdown_with_custom_options: Custom Options
|
|
7
|
+
- dropdown_with_custom_display: Custom Display
|
|
8
|
+
- dropdown_with_custom_trigger: Custom Trigger
|
|
9
|
+
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
|
10
|
+
|
|
4
11
|
react:
|
|
5
12
|
- dropdown_default: Default
|
|
6
13
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<%= pb_content_tag do %>
|
|
2
|
+
<% if object.label.present? %>
|
|
3
|
+
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
<div class="dropdown_wrapper" style="position: relative">
|
|
6
|
+
<% if content.present? %>
|
|
7
|
+
<%= content.presence %>
|
|
8
|
+
<% else %>
|
|
9
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
10
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
11
|
+
<% if object.options.present? %>
|
|
12
|
+
<% object.options.each do |option| %>
|
|
13
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
</div>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDropdown
|
|
5
|
+
class Dropdown < Playbook::KitBase
|
|
6
|
+
prop :options, type: Playbook::Props::Array,
|
|
7
|
+
default: []
|
|
8
|
+
prop :label, type: Playbook::Props::String
|
|
9
|
+
|
|
10
|
+
def data
|
|
11
|
+
Hash(prop(:data)).merge(pb_dropdown: true)
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def classname
|
|
15
|
+
generate_classname("pb_dropdown")
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<%= pb_content_tag(:div, style: object.container_style) do %>
|
|
2
|
+
<%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
|
|
3
|
+
<% if content.present? %>
|
|
4
|
+
<%= content.presence %>
|
|
5
|
+
<% else %>
|
|
6
|
+
<%= pb_rails("list/item", props: {
|
|
7
|
+
display: "flex",
|
|
8
|
+
justify_content: "center",
|
|
9
|
+
padding:"xs",
|
|
10
|
+
}) do %>
|
|
11
|
+
<%= pb_rails("body", props: {text: "No option"}) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDropdown
|
|
5
|
+
class DropdownContainer < Playbook::KitBase
|
|
6
|
+
def classname
|
|
7
|
+
generate_classname("pb_dropdown_container", "close", separator: " ")
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
def container_style
|
|
11
|
+
"position: absolute"
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def data
|
|
15
|
+
Hash(prop(:data)).merge(dropdown_container: true)
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%= pb_content_tag do %>
|
|
2
|
+
<%= pb_rails("list/item", props: {
|
|
3
|
+
display: "flex",
|
|
4
|
+
justify_content: "center",
|
|
5
|
+
padding:"none",
|
|
6
|
+
cursor: "pointer"
|
|
7
|
+
}) do %>
|
|
8
|
+
<%= pb_rails("flex", props: {
|
|
9
|
+
align: "center",
|
|
10
|
+
classname:"dropdown_option_wrapper",
|
|
11
|
+
justify: "between",
|
|
12
|
+
padding_x:"sm",
|
|
13
|
+
padding_y:"xxs",
|
|
14
|
+
}) do %>
|
|
15
|
+
<% if content.present? %>
|
|
16
|
+
<%= content.presence %>
|
|
17
|
+
<% else %>
|
|
18
|
+
<%= pb_rails("body", props: {text: object.option[:label]}) %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDropdown
|
|
5
|
+
class DropdownOption < Playbook::KitBase
|
|
6
|
+
prop :option, type: Playbook::Props::String
|
|
7
|
+
prop :id, type: Playbook::Props::String
|
|
8
|
+
|
|
9
|
+
def data
|
|
10
|
+
Hash(prop(:data)).merge("dropdown_option_label": option)
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def padding_helper
|
|
14
|
+
" p_xs"
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
def classname
|
|
18
|
+
generate_classname("pb_dropdown_option", "list") + padding_helper
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<%= pb_content_tag do %>
|
|
2
|
+
<% if content.present? %>
|
|
3
|
+
<div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
|
|
4
|
+
<%= content.presence %>
|
|
5
|
+
</div>
|
|
6
|
+
<% else %>
|
|
7
|
+
<%= pb_rails("flex", props: {
|
|
8
|
+
align: "center",
|
|
9
|
+
border_radius:"lg",
|
|
10
|
+
classname: object.trigger_wrapper_classes,
|
|
11
|
+
cursor: "pointer",
|
|
12
|
+
justify: "between",
|
|
13
|
+
padding_x:"sm",
|
|
14
|
+
padding_y:"xs",
|
|
15
|
+
html_options: {tabindex:"0"}
|
|
16
|
+
}) do %>
|
|
17
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
18
|
+
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
19
|
+
<% if object.custom_display.present? %>
|
|
20
|
+
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
21
|
+
<div id="dropdown_trigger_custom_display" style="display: none;">
|
|
22
|
+
<%= object.custom_display %>
|
|
23
|
+
</div>
|
|
24
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% else %>
|
|
27
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
|
28
|
+
<% end %>
|
|
29
|
+
<% end %>
|
|
30
|
+
<% end %>
|
|
31
|
+
<%= pb_rails("body", props: {display: "flex"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
|
|
33
|
+
<%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% end %>
|
|
37
|
+
<% end %>
|
|
38
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDropdown
|
|
5
|
+
class DropdownTrigger < Playbook::KitBase
|
|
6
|
+
prop :options, type: Playbook::Props::Array,
|
|
7
|
+
default: []
|
|
8
|
+
prop :id, type: Playbook::Props::String,
|
|
9
|
+
default: ""
|
|
10
|
+
prop :placeholder, type: Playbook::Props::String
|
|
11
|
+
prop :custom_display
|
|
12
|
+
|
|
13
|
+
def data
|
|
14
|
+
Hash(prop(:data)).merge(dropdown_trigger: true)
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
def classname
|
|
18
|
+
generate_classname("pb_dropdown_trigger")
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
def default_display_placeholder
|
|
22
|
+
placeholder || "Select..."
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
def trigger_wrapper_classes
|
|
26
|
+
generate_classname("dropdown_trigger_wrapper", "select_only")
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
end
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element";
|
|
2
|
+
import { PbDropdownKeyboard } from "./keyboard_accessibility";
|
|
3
|
+
|
|
4
|
+
const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
|
|
5
|
+
const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
|
|
6
|
+
const CONTAINER_SELECTOR = "[data-dropdown-container]";
|
|
7
|
+
const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
|
|
8
|
+
const UP_ARROW_SELECTOR = "#dropdown_close_icon";
|
|
9
|
+
const OPTION_SELECTOR = "[data-dropdown-option-label]";
|
|
10
|
+
const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
|
|
11
|
+
|
|
12
|
+
export default class PbDropdown extends PbEnhancedElement {
|
|
13
|
+
static get selector() {
|
|
14
|
+
return DROPDOWN_SELECTOR;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
connect() {
|
|
18
|
+
this.keyboardHandler = new PbDropdownKeyboard(this);
|
|
19
|
+
this.bindEventListeners();
|
|
20
|
+
this.updateArrowDisplay(false);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
bindEventListeners() {
|
|
24
|
+
const customTrigger =
|
|
25
|
+
this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
|
|
26
|
+
customTrigger.addEventListener("click", () =>
|
|
27
|
+
this.toggleElement(this.target)
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
this.target.addEventListener("click", this.handleOptionClick.bind(this));
|
|
31
|
+
document.addEventListener(
|
|
32
|
+
"click",
|
|
33
|
+
this.handleDocumentClick.bind(this),
|
|
34
|
+
true
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
handleOptionClick(event) {
|
|
39
|
+
const option = event.target.closest(OPTION_SELECTOR);
|
|
40
|
+
if (option) {
|
|
41
|
+
const value = option.dataset.dropdownOptionLabel;
|
|
42
|
+
this.onOptionSelected(value, option);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
handleDocumentClick(event) {
|
|
47
|
+
if (this.isClickOutside(event) && this.target.classList.contains("open")) {
|
|
48
|
+
this.hideElement(this.target);
|
|
49
|
+
this.updateArrowDisplay(false);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
isClickOutside(event) {
|
|
54
|
+
const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
|
|
55
|
+
if (customTrigger) {
|
|
56
|
+
return !customTrigger.contains(event.target);
|
|
57
|
+
} else {
|
|
58
|
+
const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
|
|
59
|
+
const containerElement =
|
|
60
|
+
this.element.parentNode.querySelector(CONTAINER_SELECTOR);
|
|
61
|
+
|
|
62
|
+
const isOutsideTrigger = triggerElement
|
|
63
|
+
? !triggerElement.contains(event.target)
|
|
64
|
+
: true;
|
|
65
|
+
const isOutsideContainer = containerElement
|
|
66
|
+
? !containerElement.contains(event.target)
|
|
67
|
+
: true;
|
|
68
|
+
|
|
69
|
+
return isOutsideTrigger && isOutsideContainer;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
onOptionSelected(value, selectedOption) {
|
|
74
|
+
const triggerElement = this.element.querySelector(
|
|
75
|
+
"#dropdown_trigger_display"
|
|
76
|
+
);
|
|
77
|
+
const customDisplayElement = this.element.querySelector(
|
|
78
|
+
"#dropdown_trigger_custom_display"
|
|
79
|
+
);
|
|
80
|
+
if (triggerElement) {
|
|
81
|
+
const selectedLabel = JSON.parse(value).label;
|
|
82
|
+
triggerElement.textContent = selectedLabel;
|
|
83
|
+
if (customDisplayElement) {
|
|
84
|
+
customDisplayElement.style.display = "block";
|
|
85
|
+
customDisplayElement.style.paddingRight = "8px";
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
|
|
90
|
+
if (customTrigger) {
|
|
91
|
+
if (this.target.classList.contains("open")) {
|
|
92
|
+
this.hideElement(this.target);
|
|
93
|
+
this.updateArrowDisplay(false);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const options = this.element.querySelectorAll(OPTION_SELECTOR);
|
|
98
|
+
options.forEach((option) => {
|
|
99
|
+
option.classList.remove("pb_dropdown_option_selected");
|
|
100
|
+
});
|
|
101
|
+
selectedOption.classList.add("pb_dropdown_option_selected");
|
|
102
|
+
console.log(`Selected value: ${value}`);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
get target() {
|
|
106
|
+
return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
showElement(elem) {
|
|
110
|
+
elem.classList.remove("close");
|
|
111
|
+
elem.classList.add("open");
|
|
112
|
+
elem.style.height = elem.scrollHeight + "px";
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
hideElement(elem) {
|
|
116
|
+
elem.style.height = elem.scrollHeight + "px";
|
|
117
|
+
window.setTimeout(() => {
|
|
118
|
+
elem.classList.add("close");
|
|
119
|
+
elem.classList.remove("open");
|
|
120
|
+
this.resetFocus();
|
|
121
|
+
}, 0);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
resetFocus() {
|
|
125
|
+
if (this.keyboardHandler) {
|
|
126
|
+
this.keyboardHandler.focusedOptionIndex = -1;
|
|
127
|
+
const options = this.element.querySelectorAll(OPTION_SELECTOR);
|
|
128
|
+
options.forEach((option) =>
|
|
129
|
+
option.classList.remove("pb_dropdown_option_focused")
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
toggleElement(elem) {
|
|
135
|
+
if (elem.classList.contains("open")) {
|
|
136
|
+
this.hideElement(elem);
|
|
137
|
+
this.updateArrowDisplay(false);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
this.showElement(elem);
|
|
141
|
+
this.updateArrowDisplay(true);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
updateArrowDisplay(isOpen) {
|
|
145
|
+
const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
|
|
146
|
+
const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
|
|
147
|
+
if (downArrow && upArrow) {
|
|
148
|
+
downArrow.style.display = isOpen ? "none" : "inline-block";
|
|
149
|
+
upArrow.style.display = isOpen ? "inline-block" : "none";
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|