playbook_ui 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 → 14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392
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_date_picker/date_picker.html.erb +2 -13
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -12
- 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/app/pb_kits/playbook/pb_table/styles/_scroll.scss +6 -5
- data/dist/playbook.css +1 -1
- 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: 071ac4a9d2d662a3315cc562b8bebad49635a3d41cec083b5916b78bec1ab34e
|
|
4
|
+
data.tar.gz: '0823600ed64eb9bdab0670628538b695d77f5edb4d94a5409669c23248082644'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8fae221d702eb0002c5149e4ab73266d73b82c79dd441d82209125b0f5c255fcad3d34303bf6c35a42a09f8b09a90443854500aee4360b66eb998e16a2d0afa4
|
|
7
|
+
data.tar.gz: 1c02d773a31afe890617399e7897813c0819e9b3227cace5d8f4da8415d0a0200e980dec350e792a8499067ac4e9f198033ef5d1546bac7d800b210630a237c9
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
</div>
|
|
69
69
|
|
|
70
70
|
<%= javascript_tag do %>
|
|
71
|
-
|
|
71
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
72
72
|
datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
|
|
73
73
|
|
|
74
74
|
if (<%= object.selection_type == "quickpick" %>) {
|
|
@@ -80,17 +80,6 @@
|
|
|
80
80
|
endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
|
|
81
81
|
})
|
|
82
82
|
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
window.addEventListener("DOMContentLoaded", () => {
|
|
86
|
-
loadDatePicker();
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
if (<%= !object.custom_event_listener.empty? %>) {
|
|
90
|
-
window.addEventListener("<%= object.custom_event_listener %>", () => {
|
|
91
|
-
console.log("Custom Event listener fired");
|
|
92
|
-
loadDatePicker();
|
|
93
|
-
})
|
|
94
|
-
}
|
|
83
|
+
})
|
|
95
84
|
<% end %>
|
|
96
85
|
<% end %>
|
|
@@ -73,8 +73,6 @@ module Playbook
|
|
|
73
73
|
default: false
|
|
74
74
|
prop :year_range, type: Playbook::Props::Array,
|
|
75
75
|
default: [1900, 2100]
|
|
76
|
-
prop :custom_event_listener, type: Playbook::Props::String,
|
|
77
|
-
default: ""
|
|
78
76
|
|
|
79
77
|
def classname
|
|
80
78
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"
|
|
2
|
-
<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
|
|
3
|
-
|
|
4
|
-
<script>
|
|
5
|
-
document.getElementById("date-picker-loader").addEventListener("click", () => {
|
|
6
|
-
window.document.dispatchEvent(
|
|
7
|
-
new CustomEvent("datePickerLoader", {
|
|
8
|
-
bubbles: true,
|
|
9
|
-
})
|
|
10
|
-
);
|
|
11
|
-
});
|
|
12
|
-
</script>
|
|
1
|
+
<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>
|
|
@@ -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
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "../../tokens/screen_sizes";
|
|
2
|
+
@import "../../tokens/border_radius";
|
|
2
3
|
|
|
3
4
|
.table-responsive-scroll {
|
|
4
|
-
display: block;
|
|
5
5
|
overflow-x: scroll;
|
|
6
6
|
|
|
7
7
|
// hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
// Responsive Styles
|
|
28
28
|
@media (max-width: 1600px) {
|
|
29
29
|
&[class*="table-responsive-scroll"] {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
&:has(> table.table-card) {
|
|
31
|
+
border-radius: $border_rad_light;
|
|
32
|
+
box-shadow: 1px 0 0 0px $border_light,
|
|
32
33
|
-1px 0 0 0px $border_light
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
}
|
|
35
|
+
}
|
|
35
36
|
&[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
|
36
37
|
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
|
37
38
|
border-left-width: 0px;
|