playbook_ui_docs 14.8.0.pre.alpha.play1648heightglobalprops4559 → 14.8.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4567
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_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 +63 -12
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +1 -2
- data/dist/playbook-doc.js +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d420ab63dd93412385ababf1f7e84b203a4b98ff644d31c6df0ec90c94a3d3f4
|
|
4
|
+
data.tar.gz: da4555164c757237c61fae18a0e7261d385fe97880279a72633d9c8718d75177
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2c394ec2817fe00a543bd4533d1b7c82acf6d84376160d41efbd1c7ea3701b09e6bb344ed5a29d6c689cfe4d8fe671c5622a6f5edd78e5b15e4339cf74d446b0
|
|
7
|
+
data.tar.gz: 3bfc617aa9b0b8463f5248312102041f5de839f2eb946a7afa5c56daba184cafe3f8241b2d97cdb1afc1cfc20a56813272dd9efae7da0db43e5e7c324634f4ca
|
|
@@ -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_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, 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_typeahead]').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_loading, props: { label: true } %>
|
|
3
3
|
|
|
4
4
|
<%= form.actions do |action| %>
|
|
5
5
|
<%= action.submit %>
|
|
@@ -22,23 +22,74 @@
|
|
|
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.
|
|
25
|
+
<%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
|
|
26
|
+
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
|
27
|
+
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
|
|
28
|
+
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
|
29
|
+
<%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
|
|
30
|
+
<%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
|
31
|
+
<%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
|
|
32
|
+
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
|
33
|
+
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
|
34
|
+
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
|
35
|
+
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
36
|
+
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
36
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
|
37
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
|
38
|
-
<%= form.star_rating_field :
|
|
39
|
+
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
|
39
40
|
|
|
40
41
|
<%= form.actions do |action| %>
|
|
41
42
|
<%= action.submit %>
|
|
42
43
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
43
44
|
<% end %>
|
|
44
45
|
<% 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 %>
|