playbook_ui 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454 → 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ba8b6ebdd4078924cdcecd475be6892960449af516b17143f79b6475a4f0162
-  data.tar.gz: ab99598eb62828f045a9f61622b5b0d036e07a410a410004b9ed0ca29ab1630c
+  metadata.gz: f74c864e0b28a72c58ed441ea7c3e26d913a0f5d43d478ed4e25a9cdb8305e28
+  data.tar.gz: f1197937eed8354a6deb1fa7a25903cf2884af86f2f11c080aed2f45b3525f8c
 SHA512:
-  metadata.gz: 644594e1a5ff791f14904f59c7b959d9d22bb22f7ef5c148dd37449608a2b86248cdf452a1a6b3eecf3a826c0867f10709c5464588a61cec763c5fc1bf7acbd2
-  data.tar.gz: 2c26b39a37968e5cc44bd2bdb135bad81d67c624b9ae3b47bdcb2f58e76efbb965ae6d510bbec45f859c2a0a0401661dd3149a3a748a91a9b613eb98593a4408
+  metadata.gz: fb2220fe41c9c975e651cad80ea071f1b563713d1b037fd7d7b2561113adc6c44f0cdbb51f85ef29cceb2f79aabf1a82b184483eee9ce738be2b7d44e8cae80a
+  data.tar.gz: 349fd43db3d601210f1cc77adbec7fffa313e5dcef5924aabdee3cf5671e85eabbe201d731f15ed1637c1c19fc3f83f1f400c5e46040df4c9676735fa1eca7ad

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -28,5 +28,8 @@
         [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
+        [class^=pb_body_kit], [class^=pb_caption_kit] {
+            color: $text_dk_light !important;
+        }
     }
 }

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -143,7 +143,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates, defaultDate as string))
     }
 
     // time selection

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

@@ -0,0 +1,42 @@
+<%= 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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1 @@
+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_date_picker/docs/example.yml

@@ -12,6 +12,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -42,6 +43,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
+export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -26,7 +26,7 @@ type customQuickPickDatesType = {
 
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined, defaultDate: string) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -185,6 +185,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
     return {
       // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
+        let defaultDateRange
+
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
@@ -201,6 +203,14 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
               fp.close();
             }
           });
+
+          // check if there is a default date and set the default date range and label for quick pick
+          if (defaultDate) {
+            if (label.toLowerCase() === defaultDate.toLowerCase()) {
+              activeLabel = label
+              defaultDateRange = range
+            }
+          }
         }
         // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
         if (pluginData.rangesNav.children.length > 0) {
@@ -216,6 +226,12 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
           // function to give the active button the active class
           selectActiveRangeButton(selectedDates);
         }
+
+        // set the default date range if there is one and select the active button
+        if (defaultDateRange) {
+          fp.setDate(defaultDateRange, false);
+          selectActiveRangeButton(defaultDateRange);
+        }
       },
       onValueUpdate(selectedDates: Array<Date>) {
         selectActiveRangeButton(selectedDates)

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

@@ -0,0 +1,26 @@
+<% 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,38 @@
+<% 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

@@ -0,0 +1,19 @@
+<% 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/docs/example.yml

@@ -8,4 +8,10 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
   
+  rails:
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_cards_rails: Draggable with Cards
+
+
   

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

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

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

@@ -0,0 +1,18 @@
+# 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

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

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

@@ -0,0 +1,15 @@
+# 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

@@ -0,0 +1,7 @@
+<%= 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

@@ -0,0 +1,18 @@
+# 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

@@ -0,0 +1,125 @@
+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");
+    });
+  }
+}