playbook_ui 14.12.0.pre.rc.5 → 14.12.0.pre.rc.6
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_draggable/docs/_draggable_with_selectable_list_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +3 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +17 -3
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +3 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +11 -4
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c209d4ff36d749f527f44e280e1324f50a89162f0a18052be0c30e80470b0b67
|
|
4
|
+
data.tar.gz: 827cfdc6eb69f7a72d77de5f3c68860d48d9e8cfc2193d66dd873b3dcfe17a07
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ba3643c54c7484e92c81b95ae4d49c7b4760926bd7248d727166a7b249fbfb71b051b70ff2b2ee53add4111a9825df2034bc9c42bd220b432f88bbe28facf000
|
|
7
|
+
data.tar.gz: a245498faf9f989c0d007886cb4d620811e0d20129f4c8233495b54cce83be44a30aa3cd15012ac1812bcdc024e4bb1c0da36594311c3a0d13507991e7215ce2
|
|
@@ -0,0 +1,38 @@
|
|
|
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
|
+
%>
|
|
@@ -0,0 +1,3 @@
|
|
|
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.
|
|
@@ -4,9 +4,23 @@
|
|
|
4
4
|
data: object.data,
|
|
5
5
|
id: object.id,
|
|
6
6
|
**combined_html_options) do %>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<%= pb_rails("
|
|
7
|
+
<% if enable_drag %>
|
|
8
|
+
<%= pb_rails("draggable", props: {initial_items: object.items}) do %>
|
|
9
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
|
10
|
+
<%= pb_rails("list", props: {ordered: false}) do %>
|
|
11
|
+
<% object.items.each do |item| %>
|
|
12
|
+
<%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
|
|
13
|
+
<%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% else %>
|
|
20
|
+
<%= pb_rails("list") do %>
|
|
21
|
+
<% object.items.each do |item| %>
|
|
22
|
+
<%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
|
|
23
|
+
<% end %>
|
|
10
24
|
<% end %>
|
|
11
25
|
<% end %>
|
|
12
26
|
<% end %>
|
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
data: object.data,
|
|
5
5
|
id: object.id,
|
|
6
6
|
**combined_html_options) do %>
|
|
7
|
+
<% if object.drag_id && object.drag_handle %>
|
|
8
|
+
<span style="vertical-align: middle;">
|
|
9
|
+
<%= pb_rails("body") do %>
|
|
10
|
+
<svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
|
|
11
|
+
<% end %>
|
|
12
|
+
</span>
|
|
13
|
+
<% end %>
|
|
7
14
|
<% if object.variant == "radio"%>
|
|
8
15
|
<%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
|
|
9
16
|
<% if content.present? %>
|
|
@@ -19,10 +26,10 @@
|
|
|
19
26
|
<% if object.variant == "checkbox"%>
|
|
20
27
|
<script>
|
|
21
28
|
var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
|
|
22
|
-
|
|
29
|
+
|
|
23
30
|
checkboxElement.addEventListener("change", (evt) => {
|
|
24
31
|
var listItemElement = document.querySelector("#<%=object.id%>")
|
|
25
|
-
|
|
32
|
+
|
|
26
33
|
if (evt.target.checked) {
|
|
27
34
|
listItemElement.classList.add("checked_item");
|
|
28
35
|
} else {
|
|
@@ -34,9 +41,9 @@
|
|
|
34
41
|
<script>
|
|
35
42
|
var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
|
|
36
43
|
|
|
37
|
-
radioElement.addEventListener("change", () => {
|
|
44
|
+
radioElement.addEventListener("change", () => {
|
|
38
45
|
var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
|
|
39
|
-
|
|
46
|
+
|
|
40
47
|
radios.forEach((radio) => {
|
|
41
48
|
if (radio.checked) {
|
|
42
49
|
radio.closest("li").classList.add("checked_item");
|
|
@@ -6,6 +6,9 @@ module Playbook
|
|
|
6
6
|
prop :tabindex
|
|
7
7
|
prop :checked, type: Playbook::Props::Boolean,
|
|
8
8
|
default: false
|
|
9
|
+
prop :drag_handle, type: Playbook::Props::Boolean,
|
|
10
|
+
default: true
|
|
11
|
+
prop :drag_id, type: Playbook::Props::String
|
|
9
12
|
prop :name, type: Playbook::Props::String
|
|
10
13
|
prop :text, type: Playbook::Props::String
|
|
11
14
|
prop :value, type: Playbook::Props::String
|
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.12.0.pre.rc.
|
|
4
|
+
version: 14.12.0.pre.rc.6
|
|
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-17 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1148,6 +1148,8 @@ files:
|
|
|
1148
1148
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
|
|
1149
1149
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
|
|
1150
1150
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
|
|
1151
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
|
|
1152
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
|
|
1151
1153
|
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|
|
1152
1154
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
|
1153
1155
|
- app/pb_kits/playbook/pb_draggable/draggable.html.erb
|