playbook_ui 14.12.0.pre.rc.5 → 14.12.0.pre.rc.7
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_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +3 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +5 -0
- 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_list/item.html.erb +30 -8
- data/app/pb_kits/playbook/pb_list/item.rb +7 -0
- data/app/pb_kits/playbook/pb_list/list.html.erb +31 -11
- data/app/pb_kits/playbook/pb_list/list.rb +4 -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 +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fbb3bb09ce2cb5adfe6021117dfc7f94c9ff26aa30f9c775f65266892fd34f70
|
|
4
|
+
data.tar.gz: d05ecfa187943ae9320fe32fd460a1cb8895ed7d055aa79a28c378ab2d708c94
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9fbb9f00d3724699dc6441b979a4925b88bc5e7f968d9177586e845d3be818a50658d1679e1ba99fb03fb5173b53fa51911dd8b9ad9cc63c5046decbc3ab58e3
|
|
7
|
+
data.tar.gz: c19e0a21180bd59178227d2a91310b23897fb7b5333fbe2a697783506b0ce03c20d864c1c861e0deac487e69586cf7980835ace5a7e977661c4102493a2c429c
|
|
@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
|
|
|
2
2
|
|
|
3
3
|
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
|
|
@@ -6,14 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
] %>
|
|
8
8
|
|
|
9
|
-
<%= pb_rails("
|
|
10
|
-
|
|
11
|
-
<%= pb_rails("list", props:
|
|
12
|
-
<% initial_items.each do |item| %>
|
|
13
|
-
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
|
14
|
-
<%= pb_rails("list/item") do %><%= item[:name] %><% end %>
|
|
15
|
-
<% end %>
|
|
16
|
-
<% end %>
|
|
17
|
-
<% end %>
|
|
9
|
+
<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
|
|
10
|
+
<% initial_items.each do |item| %>
|
|
11
|
+
<%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
|
|
18
12
|
<% end %>
|
|
19
13
|
<% end %>
|
|
@@ -0,0 +1,5 @@
|
|
|
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.
|
|
@@ -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.
|
|
@@ -1,10 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
<% if object.draggable? %>
|
|
2
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
|
|
3
|
+
<%= content_tag(:li,
|
|
4
|
+
aria: object.aria,
|
|
5
|
+
class: object.classname,
|
|
6
|
+
data: object.data,
|
|
7
|
+
id: object.id,
|
|
8
|
+
tabindex: object.tabindex,
|
|
9
|
+
**combined_html_options
|
|
10
|
+
) do %>
|
|
11
|
+
<% if object.drag_handle %>
|
|
12
|
+
<span style="vertical-align: middle;">
|
|
13
|
+
<%= pb_rails("body") do %>
|
|
14
|
+
<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>
|
|
15
|
+
<% end %>
|
|
16
|
+
</span>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= content.presence %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% else %>
|
|
22
|
+
<%= content_tag(:li,
|
|
23
|
+
aria: object.aria,
|
|
24
|
+
class: object.classname,
|
|
25
|
+
data: object.data,
|
|
26
|
+
id: object.id,
|
|
27
|
+
tabindex: object.tabindex,
|
|
28
|
+
**combined_html_options
|
|
29
|
+
) do %>
|
|
9
30
|
<%= content.presence %>
|
|
31
|
+
<% end %>
|
|
10
32
|
<% end %>
|
|
@@ -3,11 +3,18 @@
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbList
|
|
5
5
|
class Item < Playbook::KitBase
|
|
6
|
+
prop :drag_handle, type: Playbook::Props::Boolean,
|
|
7
|
+
default: true
|
|
8
|
+
prop :drag_id, type: Playbook::Props::String
|
|
6
9
|
prop :tabindex
|
|
7
10
|
|
|
8
11
|
def classname
|
|
9
12
|
generate_classname("pb_item_kit")
|
|
10
13
|
end
|
|
14
|
+
|
|
15
|
+
def draggable?
|
|
16
|
+
drag_id.present?
|
|
17
|
+
end
|
|
11
18
|
end
|
|
12
19
|
end
|
|
13
20
|
end
|
|
@@ -1,13 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
<%=
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
<% if object.enable_drag %>
|
|
2
|
+
<%= pb_rails("draggable", props: {initial_items: object.items}) do %>
|
|
3
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
|
4
|
+
<%= content_tag(:div, class: object.list_classname) do %>
|
|
5
|
+
<%= content_tag(:"#{object.ordered_class}",
|
|
6
|
+
aria: object.aria,
|
|
7
|
+
class: object.classname,
|
|
8
|
+
data: object.data,
|
|
9
|
+
id: object.id,
|
|
10
|
+
role: object.role,
|
|
11
|
+
tabindex: object.tabindex,
|
|
12
|
+
**combined_html_options
|
|
13
|
+
) do %>
|
|
14
|
+
<%= content.presence %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% else %>
|
|
20
|
+
<%= content_tag(:div, class: object.list_classname) do %>
|
|
21
|
+
<%= content_tag(:"#{object.ordered_class}",
|
|
22
|
+
aria: object.aria,
|
|
23
|
+
class: object.classname,
|
|
24
|
+
data: object.data,
|
|
25
|
+
id: object.id,
|
|
26
|
+
role: object.role,
|
|
27
|
+
tabindex: object.tabindex,
|
|
28
|
+
**combined_html_options
|
|
29
|
+
) do %>
|
|
30
|
+
<%= content.presence %>
|
|
31
|
+
<% end %>
|
|
12
32
|
<% end %>
|
|
13
33
|
<% end %>
|
|
@@ -7,6 +7,10 @@ module Playbook
|
|
|
7
7
|
default: false
|
|
8
8
|
prop :dark, type: Playbook::Props::Boolean,
|
|
9
9
|
default: false
|
|
10
|
+
prop :enable_drag, type: Playbook::Props::Boolean,
|
|
11
|
+
default: false
|
|
12
|
+
prop :items, type: Playbook::Props::Array,
|
|
13
|
+
default: []
|
|
10
14
|
prop :layout, type: Playbook::Props::Enum,
|
|
11
15
|
values: ["left", "right", ""],
|
|
12
16
|
default: ""
|
|
@@ -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.7
|
|
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-20 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1146,8 +1146,11 @@ files:
|
|
|
1146
1146
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
|
|
1147
1147
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
|
|
1148
1148
|
- 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
|
|
1149
1150
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
|
|
1150
1151
|
- 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
|
|
1151
1154
|
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|
|
1152
1155
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
|
1153
1156
|
- app/pb_kits/playbook/pb_draggable/draggable.html.erb
|