playbook_ui 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492 → 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454

data/lib/playbook/forms/builder/typeahead_field.rb

@@ -5,6 +5,19 @@ module Playbook
     class Builder
       def typeahead(name, _options = {}, _html_options = {}, props: {})
         props[:name] = name
+
+        input_id = "#{name}_input"
+        props[:input_options] ||= {}
+        props[:input_options][:id] ||= input_id
+
+        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
+
+        if props[:validation]
+          validation_message = props[:validation][:message]
+          props[:input_options][:data] ||= {}
+          props[:input_options][:data][:validation_message] = validation_message
+        end
+
         @template.pb_rails("typeahead", props: props)
       end
     end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.7.0"
-  VERSION = "14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492"
+  VERSION = "14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492
+  version: 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-14 00:00:00.000000000 Z
+date: 2024-11-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -881,9 +881,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
@@ -1101,29 +1098,17 @@ files:
 - app/pb_kits/playbook/pb_draggable/context/types.ts
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
-- app/pb_kits/playbook/pb_draggable/draggable.html.erb
-- app/pb_kits/playbook/pb_draggable/draggable.rb
 - app/pb_kits/playbook/pb_draggable/draggable.test.jsx
-- app/pb_kits/playbook/pb_draggable/draggable_container.html.erb
-- app/pb_kits/playbook/pb_draggable/draggable_container.rb
-- app/pb_kits/playbook/pb_draggable/draggable_item.html.erb
-- app/pb_kits/playbook/pb_draggable/draggable_item.rb
-- app/pb_kits/playbook/pb_draggable/index.js
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
 - app/pb_kits/playbook/pb_drawer/_close_icon.tsx
@@ -3166,11 +3151,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-DZmYDBaL.js
-- dist/chunks/_weekday_stacked-CgPamJiY.js
+- dist/chunks/_typeahead-B-juiSkw.js
+- dist/chunks/_weekday_stacked-DPqQHJ1l.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BC6ESsxG.js
-- dist/chunks/pb_form_validation-B_Z9rEbg.js
+- dist/chunks/lib-DpxYMiKe.js
+- dist/chunks/pb_form_validation-LqRlnmi6.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -1,42 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  default_date: "This month",
-  end_date_id: "quick-pick-end-date",
-  end_date_name: "quick-pick-end-date",
-  mode: "range",
-  picker_id: "quick-pick-default-date",
-  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "quick-pick-start-date",
-  start_date_name: "quick-pick-start-date"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  custom_quick_pick_dates: {
-    dates: [
-      {
-        label: "Last 15 months",
-        value: {
-          timePeriod: "months",
-          amount: 15,
-        },
-      },
-      {
-        label: "First Week of June 2022",
-        value: ["06/01/2022", "06/07/2022"],
-      },
-    ],
-  },
-  default_date: "First Week of June 2022",
-  end_date_id: "quick-pick-end-date",
-  end_date_name: "quick-pick-end-date",
-  label: "Custom Date Picker",
-  mode: "range",
-  picker_id: "custom-quick-pick-default-date",
-  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "quick-pick-start-date",
-  start_date_name: "quick-pick-start-date"
-}) %>
-

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx

@@ -1,44 +0,0 @@
-import React from "react"
-import DatePicker from "../_date_picker"
-
-const DatePickerQuickPickDefaultDate = (props) => (
-    <>
-        <DatePicker
-            allowInput
-            defaultDate="This month"
-            mode="range"
-            pickerId="quick-pick-default-date"
-            placeholder="mm/dd/yyyy to mm/dd/yyyy"
-            selectionType="quickpick"
-            {...props}
-        />
-
-        <DatePicker
-            allowInput
-            customQuickPickDates={{
-                dates: [
-                    {
-                        label: "Last 15 months",
-                        value: {
-                            timePeriod: "months",
-                            amount: 15,
-                        },
-                    },
-                    {
-                        label: "First Week of June 2022",
-                        value: ["06/01/2022", "06/07/2022"],
-                    },
-                ],
-            }}
-            defaultDate="First Week of June 2022"
-            label="Custom Date Picker"
-            mode="range"
-            pickerId="custom-quick-pick-default-date"
-            placeholder="mm/dd/yyyy to mm/dd/yyyy"
-            selectionType="quickpick"
-            {...props}
-        />
-    </>
-)
-
-export default DatePickerQuickPickDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md

@@ -1 +0,0 @@
-To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb

@@ -1,26 +0,0 @@
-<% initial_items = [
-  {
-    id: "1",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "2",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "3",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex") do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md

@@ -1,7 +0,0 @@
-The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
-
-`initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
- 
-`draggable/draggable_container` = This specifies the container within which items can be dropped.
-
-`draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -1,38 +0,0 @@
-<% initial_items = [
-  { id: "21", name: "Joe Black" },
-  { id: "22", name: "Nancy White" },
-  { id: "23", name: "Bill Green" },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <% initial_items.each do |item| %>
-      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
-          <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
-            <%= pb_rails("flex", props:{gap: "xs"}) do %>
-              <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
-              <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
-            <% end %>
-            <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
-            <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
-              <%= pb_rails("flex", props:{gap: "xxs"}) do %>
-                <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
-                  <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
-                <% end %>
-                <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
-                  <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
-                <% end %>
-              <% end %>
-              <%= pb_rails("flex") do %>
-                <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
-                <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
-                <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
-            <% end %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -1,19 +0,0 @@
-<% initial_items = [
-  { id: "31", name: "Philadelphia" },
-  { id: "32", name: "New Jersey" },
-  { id: "33", name: "Maryland" },
-  { id: "34", name: "Connecticut" },
-
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("list", props: {ordered: false}) do %>
-        <% initial_items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/draggable.html.erb

@@ -1,3 +0,0 @@
-<%= pb_content_tag do %>
-  <%= content.presence %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDraggable
-    class Draggable < ::Playbook::KitBase
-      prop :initial_items, type: Playbook::Props::Array,
-                           default: []
-
-      def data
-        Hash(prop(:data)).merge(pb_draggable: true)
-      end
-
-      def classname
-        generate_classname("pb_draggable")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +0,0 @@
-<%= pb_content_tag do %>
-    <%= content.presence %>
-  <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDraggable
-    class DraggableContainer < ::Playbook::KitBase
-      def data
-        Hash(prop(:data)).merge(pb_draggable_container: true)
-      end
-
-      def classname
-        generate_classname("pb_draggable_container")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,7 +0,0 @@
-<%= pb_content_tag(:div, {
-id: "item_#{object.drag_id}",
-draggable: true
-}) do %>
-    <%= content.presence %>
-<% end %>
-  

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDraggable
-    class DraggableItem < ::Playbook::KitBase
-      prop :drag_id, type: Playbook::Props::String,
-                     default: ""
-
-      def data
-        Hash(prop(:data)).merge(pb_draggable_item: true)
-      end
-
-      def classname
-        generate_classname("pb_draggable_item")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -1,125 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
-const DRAGGABLE_CONTAINER = ".pb_draggable_container";
-
-export default class PbDraggable extends PbEnhancedElement {
-  static get selector() {
-    return DRAGGABLE_SELECTOR;
-  }
-
-  connect() {
-    this.draggedItem = null;
-    this.draggedItemId = null;
-    document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
-  }
-
-  bindEventListeners() {
-    // Needed to prevent images within draggable items from being independently draggable
-    // Needed if using Image kit in draggable items
-    this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
-      img.setAttribute("draggable", "false");
-    });
-
-    this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
-      item.addEventListener("dragstart", this.handleDragStart.bind(this));
-      item.addEventListener("dragend", this.handleDragEnd.bind(this));
-      item.addEventListener("dragenter", this.handleDragEnter.bind(this));
-    });
-
-    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
-    if (container) {
-      container.addEventListener("dragover", this.handleDragOver.bind(this));
-      container.addEventListener("drop", this.handleDrop.bind(this));
-    }
-  }
-
-  handleDragStart(event) {
-    // Needed to prevent images within draggable items from being independently draggable
-    // Needed if using Image kit in draggable items
-    if (event.target.tagName.toLowerCase() === 'img') {
-      event.preventDefault();
-      return;
-    }
-    
-    this.draggedItem = event.target;
-    this.draggedItemId = event.target.id;
-    event.target.classList.add("is_dragging");
-
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', this.draggedItemId);
-    }
-
-    setTimeout(() => {
-      event.target.style.opacity = '0.5';
-    }, 0);
-  }
-
-  handleDragEnter(event) {
-    if (!this.draggedItem || event.target === this.draggedItem) return;
-
-    const targetItem = event.target.closest('.pb_draggable_item');
-    if (!targetItem) return;
-
-    const container = targetItem.parentNode;
-    const items = Array.from(container.children);
-    const draggedIndex = items.indexOf(this.draggedItem);
-    const targetIndex = items.indexOf(targetItem);
-
-    if (draggedIndex > targetIndex) {
-      container.insertBefore(this.draggedItem, targetItem);
-    } else {
-      container.insertBefore(this.draggedItem, targetItem.nextSibling);
-    }
-  }
-
-  handleDragOver(event) {
-    event.preventDefault();
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
-
-    if (container) {
-      container.classList.add("active_container");
-    }
-  }
-
-  handleDrop(event) {
-    event.preventDefault();
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (!container || !this.draggedItem) return;
-  
-    container.classList.remove("active_container");
-    this.draggedItem.style.opacity = '1';
-  
-    // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(container.children)
-      .filter(item => item.classList.contains("pb_draggable_item"))
-      .map(item => item.id.replace("item_", "")); 
-  
-    // Store reordered items in a data attribute on the container
-    container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-  
-    const customEvent = new CustomEvent('pb-draggable-reorder', {
-      detail: {
-        reorderedItems,
-        containerId: container.id,
-      }
-    });
-    this.element.dispatchEvent(customEvent);
-  
-    this.draggedItem = null;
-    this.draggedItemId = null;
-  }
-  
-
-  handleDragEnd(event) {
-    event.target.classList.remove("is_dragging");
-    event.target.style.opacity = '1';
-    this.draggedItem = null;
-    this.draggedItemId = null;
-
-    this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
-      container.classList.remove("active_container");
-    });
-  }
-}