playbook_ui_docs 14.9.0.pre.rc.6 → 14.9.0.pre.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6eb62fac45bf8d3eaad9770c6ac191cce85fa02bf62580a4f9038c5fcfcb4680
-  data.tar.gz: f12f49bf4666ab5566f252a93489b3681a01ec5ad1067ac8a8748ae45f8a6c0e
+  metadata.gz: f8be8e4de5818fe6f52511db390de3fc76f29aa46b2f5f7cfab68d67b54af9d2
+  data.tar.gz: c0bc22d98df3a4f70a822ccb0d4169ff0e9e3bf5575ffb7e901bb0d682384461
 SHA512:
-  metadata.gz: 1a09375ab71081ee65e9d157ee14b1240d9b866555c889250053cdf3ea7aa9bfbc0080bdf323f870fd8b77bf0dacdf9bd1d38e65fb52c1347989b2db9d318085
-  data.tar.gz: 6616c72493a25a290ac08eca7e354248d43c04bdf4db99e30ce68ff60b09e45528e77ae8f87ced89f807afe660240e52d2fbd5909045cfd6b377c9f3c76b3b4c
+  metadata.gz: 06075ecc01e2658a2739e967a16bce71dc4ee3eaa49fb3510d5f3e709b584b2831216b6f9bcbe5d3cd7b4578ce60ee400bc401a96ae853683db2002a87b8b917
+  data.tar.gz: ba0eaf8b17d3c83c59cad37596586bd96b8dd15e92ec01782185ec0ae58ab2015215e521e7d9785448e64709ff6cd8ddb912c9d91f77a49ec5be5d889fcee584

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field_loading, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -22,23 +22,74 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
-  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
-  <%= 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)." } } %>
-  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= 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." } } %>
+  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
+  <%= 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)." } } %>
+  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample2) return
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>