playbook_ui_docs 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4617 → 14.8.0.pre.alpha.PLAY1615movenegativetoleftofcurrencysign4539
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_checkbox/docs/_checkbox_indeterminate.html.erb +7 -84
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -47
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -59
- data/dist/playbook-doc.js +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '09a43a4d46127160800077864401c96f1a633e762d79a55a732817f82aab58a0'
|
4
|
+
data.tar.gz: 2d763ad05c0c9d165d4664c5a7c2adc78ee6046b05a4564bbb93fb8b509e2c11
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: de4ca762c121c045d52f6f552f9423b26363fe0a862ad2b926e3799d35973c81ab6e579831b204a2f06ed9a53f23f70982a4a67fc49fcac04fa4b21d46a4ad02
|
7
|
+
data.tar.gz: ee521e2eb8aa17c1116894ce1e29b6604170031b174a7a630da7b7762f3426d92bb75e6166f45770e8e4b206b314ee64156147c6663380989194007a77f8ed4b
|
@@ -1,84 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
<thead>
|
9
|
-
<tr>
|
10
|
-
<th>
|
11
|
-
<%= pb_rails("checkbox", props: {
|
12
|
-
checked: true,
|
13
|
-
text: "Uncheck All",
|
14
|
-
value: "checkbox-value",
|
15
|
-
name: "main-checkbox",
|
16
|
-
indeterminate: true,
|
17
|
-
id: "indeterminate-checkbox"
|
18
|
-
}) %>
|
19
|
-
</th>
|
20
|
-
</tr>
|
21
|
-
</thead>
|
22
|
-
|
23
|
-
<tbody>
|
24
|
-
<% checkboxes.each do |checkbox| %>
|
25
|
-
<tr>
|
26
|
-
<td>
|
27
|
-
<%= pb_rails("checkbox", props: {
|
28
|
-
checked: checkbox[:checked],
|
29
|
-
text: checkbox[:name],
|
30
|
-
value: checkbox[:id],
|
31
|
-
name: "#{checkbox[:id]}-indeterminate-checkbox",
|
32
|
-
id: "#{checkbox[:id]}-indeterminate-checkbox",
|
33
|
-
}) %>
|
34
|
-
</td>
|
35
|
-
</tr>
|
36
|
-
<% end %>
|
37
|
-
</tbody>
|
38
|
-
<% end %>
|
39
|
-
|
40
|
-
<script>
|
41
|
-
document.addEventListener('DOMContentLoaded', function() {
|
42
|
-
const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
|
43
|
-
const mainCheckbox = document.getElementsByName("main-checkbox")[0];
|
44
|
-
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
|
45
|
-
|
46
|
-
const updateMainCheckbox = () => {
|
47
|
-
// Count the number of checked child checkboxes
|
48
|
-
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
49
|
-
// Determine if the main checkbox should be in an indeterminate state
|
50
|
-
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
51
|
-
|
52
|
-
// Set the main checkbox states
|
53
|
-
mainCheckbox.indeterminate = indeterminate;
|
54
|
-
mainCheckbox.checked = checkedCount > 0;
|
55
|
-
|
56
|
-
// Determine the main checkbox label based on the number of checked checkboxes
|
57
|
-
const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
|
58
|
-
|
59
|
-
// Determine the icon class to add and remove based on the number of checked checkboxes
|
60
|
-
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
61
|
-
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
62
|
-
|
63
|
-
// Update main checkbox label
|
64
|
-
mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
|
65
|
-
|
66
|
-
// Add and remove the icon class to the main checkbox wrapper
|
67
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
68
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
69
|
-
|
70
|
-
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
71
|
-
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
72
|
-
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
73
|
-
};
|
74
|
-
|
75
|
-
mainCheckbox.addEventListener('change', function() {
|
76
|
-
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
77
|
-
updateMainCheckbox();
|
78
|
-
});
|
79
|
-
|
80
|
-
childCheckboxes.forEach(cb => {
|
81
|
-
cb.addEventListener('change', updateMainCheckbox);
|
82
|
-
});
|
83
|
-
});
|
84
|
-
</script>
|
1
|
+
<%= pb_rails("checkbox" , props: {
|
2
|
+
text: "Select ",
|
3
|
+
value: "checkbox-value",
|
4
|
+
name: "main",
|
5
|
+
indeterminate: true,
|
6
|
+
id: "test-indeterminate-js"
|
7
|
+
}) %>
|
@@ -23,7 +23,7 @@
|
|
23
23
|
%>
|
24
24
|
|
25
25
|
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
26
|
-
<%= form.typeahead :
|
26
|
+
<%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
|
27
27
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
28
28
|
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
|
29
29
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
@@ -92,7 +92,7 @@
|
|
92
92
|
const selectedUserData = JSON.parse(selectedUserJSON)
|
93
93
|
|
94
94
|
// set the input field's value
|
95
|
-
event.target.querySelector('input[name=
|
95
|
+
event.target.querySelector('input[name=example_user]').value = selectedUserData.login
|
96
96
|
|
97
97
|
// log the selected option's dataset
|
98
98
|
console.log('The selected user data:')
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
|
2
|
-
<%= form.text_field :
|
2
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
3
3
|
|
4
4
|
<%= form.actions do |action| %>
|
5
5
|
<%= action.submit %>
|
@@ -22,74 +22,23 @@
|
|
22
22
|
%>
|
23
23
|
|
24
24
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
25
|
-
<%= form.
|
26
|
-
<%= form.
|
27
|
-
<%= form.
|
28
|
-
<%= form.
|
29
|
-
<%= form.
|
30
|
-
<%= form.
|
31
|
-
<%= form.
|
32
|
-
<%= form.
|
33
|
-
<%= form.
|
34
|
-
<%= form.
|
35
|
-
<%= form.
|
36
|
-
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
25
|
+
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
26
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
|
27
|
+
<%= form.email_field :example_email_field, props: { label: true, required: true } %>
|
28
|
+
<%= form.number_field :example_number_field, props: { label: true, required: true } %>
|
29
|
+
<%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
30
|
+
<%= form.password_field :example_password_field, props: { label: true, required: true } %>
|
31
|
+
<%= form.url_field :example_url_field, props: { label: true, required: true } %>
|
32
|
+
<%= form.text_area :example_text_area, props: { label: true, required: true } %>
|
33
|
+
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
|
34
|
+
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
35
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
37
36
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
38
37
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
39
|
-
<%= form.star_rating_field :
|
38
|
+
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
|
40
39
|
|
41
40
|
<%= form.actions do |action| %>
|
42
41
|
<%= action.submit %>
|
43
42
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
44
43
|
<% end %>
|
45
44
|
<% end %>
|
46
|
-
|
47
|
-
<!-- form.typeahead user results example template -->
|
48
|
-
<template data-typeahead-example-result-option>
|
49
|
-
<%= pb_rails("user", props: {
|
50
|
-
name: tag(:slot, name: "name"),
|
51
|
-
orientation: "horizontal",
|
52
|
-
align: "left",
|
53
|
-
avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
|
54
|
-
avatar: true
|
55
|
-
}) %>
|
56
|
-
</template>
|
57
|
-
|
58
|
-
<!-- form.typeahead JS example implementation -->
|
59
|
-
<%= javascript_tag defer: "defer" do %>
|
60
|
-
document.addEventListener("pb-typeahead-kit-search", function(event) {
|
61
|
-
if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
|
62
|
-
|
63
|
-
fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
|
64
|
-
.then(response => response.json())
|
65
|
-
.then((result) => {
|
66
|
-
const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
|
67
|
-
|
68
|
-
event.detail.setResults((result.items || []).map((user) => {
|
69
|
-
const wrapper = resultOptionTemplate.content.cloneNode(true)
|
70
|
-
wrapper.children[0].dataset.user = JSON.stringify(user)
|
71
|
-
wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
|
72
|
-
wrapper.querySelector('img').dataset.src = user.avatar_url
|
73
|
-
return wrapper
|
74
|
-
}))
|
75
|
-
})
|
76
|
-
})
|
77
|
-
|
78
|
-
|
79
|
-
document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
|
80
|
-
if (!event.target.dataset.typeaheadExample2) return
|
81
|
-
|
82
|
-
const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
|
83
|
-
const selectedUserData = JSON.parse(selectedUserJSON)
|
84
|
-
|
85
|
-
// set the input field's value
|
86
|
-
event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
|
87
|
-
|
88
|
-
// log the selected option's dataset
|
89
|
-
console.log('The selected user data:')
|
90
|
-
console.dir(selectedUserData)
|
91
|
-
|
92
|
-
// do even more with the data later - TBD
|
93
|
-
event.target.dataset.user = selectedUserJSON
|
94
|
-
})
|
95
|
-
<% end %>
|
@@ -41,50 +41,3 @@
|
|
41
41
|
}) %>
|
42
42
|
<% end %>
|
43
43
|
<% end %>
|
44
|
-
|
45
|
-
<br /><br /><br />
|
46
|
-
|
47
|
-
<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
|
48
|
-
<%= pb_rails("timeline/item") do |item| %>
|
49
|
-
|
50
|
-
<% item.label do %>
|
51
|
-
<%= pb_rails("timeline/label") do %>
|
52
|
-
<%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
|
53
|
-
<% end %>
|
54
|
-
<% end %>
|
55
|
-
|
56
|
-
<% item.step do %>
|
57
|
-
<%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
|
58
|
-
<% end %>
|
59
|
-
|
60
|
-
<% item.detail do %>
|
61
|
-
<%= pb_rails("title_detail", props: {
|
62
|
-
title: "Jackson Heights",
|
63
|
-
detail: "37-27 74th Street"
|
64
|
-
}) %>
|
65
|
-
<% end %>
|
66
|
-
<% end %>
|
67
|
-
|
68
|
-
<%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
|
69
|
-
<%= pb_rails("title_detail", props: {
|
70
|
-
title: "Society Hill",
|
71
|
-
detail: "72 E St Astoria"
|
72
|
-
}) %>
|
73
|
-
<% end %>
|
74
|
-
|
75
|
-
<%= pb_rails("timeline/item") do |item| %>
|
76
|
-
|
77
|
-
<% item.step do %>
|
78
|
-
<%= pb_rails("timeline/step") do %>
|
79
|
-
<%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
|
80
|
-
<% end %>
|
81
|
-
<% end %>
|
82
|
-
|
83
|
-
<% item.detail do %>
|
84
|
-
<%= pb_rails("title_detail", props: {
|
85
|
-
title: "Greenpoint",
|
86
|
-
detail: "81 Gate St Brooklyn"
|
87
|
-
}) %>
|
88
|
-
<% end %>
|
89
|
-
<% end %>
|
90
|
-
<% end %>
|
@@ -62,65 +62,6 @@ const TimelineWithChildren = (props) => (
|
|
62
62
|
</Timeline.Detail>
|
63
63
|
</Timeline.Item>
|
64
64
|
</Timeline>
|
65
|
-
|
66
|
-
<br />
|
67
|
-
<br />
|
68
|
-
<br />
|
69
|
-
|
70
|
-
<Timeline orientation="vertical"
|
71
|
-
showDate
|
72
|
-
{...props}
|
73
|
-
>
|
74
|
-
<Timeline.Item lineStyle="solid"
|
75
|
-
{...props}
|
76
|
-
>
|
77
|
-
<Timeline.Label>
|
78
|
-
<Title size={4}
|
79
|
-
text='Any Kit'
|
80
|
-
/>
|
81
|
-
</Timeline.Label>
|
82
|
-
<Timeline.Step icon="user"
|
83
|
-
iconColor="royal"
|
84
|
-
/>
|
85
|
-
<Timeline.Detail>
|
86
|
-
<TitleDetail detail="37-27 74th Street"
|
87
|
-
title="Jackson Heights"
|
88
|
-
{...props}
|
89
|
-
/>
|
90
|
-
</Timeline.Detail>
|
91
|
-
</Timeline.Item>
|
92
|
-
|
93
|
-
<Timeline.Item lineStyle="dotted"
|
94
|
-
{...props}
|
95
|
-
>
|
96
|
-
<Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
|
97
|
-
<Timeline.Step icon="map-marker-alt"
|
98
|
-
iconColor="purple"
|
99
|
-
/>
|
100
|
-
<Timeline.Detail>
|
101
|
-
<TitleDetail detail="72 E St Astoria"
|
102
|
-
title="Society Hill"
|
103
|
-
{...props}
|
104
|
-
/>
|
105
|
-
</Timeline.Detail>
|
106
|
-
</Timeline.Item>
|
107
|
-
|
108
|
-
<Timeline.Item lineStyle="solid"
|
109
|
-
{...props}
|
110
|
-
>
|
111
|
-
<Timeline.Step>
|
112
|
-
<Pill text="3"
|
113
|
-
variant="success"
|
114
|
-
/>
|
115
|
-
</Timeline.Step>
|
116
|
-
<Timeline.Detail>
|
117
|
-
<TitleDetail detail="81 Gate St Brooklyn"
|
118
|
-
title="Greenpoint"
|
119
|
-
{...props}
|
120
|
-
/>
|
121
|
-
</Timeline.Detail>
|
122
|
-
</Timeline.Item>
|
123
|
-
</Timeline>
|
124
65
|
</div>
|
125
66
|
)
|
126
67
|
|