playbook_ui 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448 → 14.7.0.pre.alpha.spacingquickchange4482

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af27bbc68c5af9c78ae2a7ea4b8fec2f9dc7226d41a138c38ada6b3cb5e8b03b
-  data.tar.gz: 33704917fbbfc70e3ba6f1e5193085237b8ed7fd1c85e776dbbbacd3e3423e90
+  metadata.gz: eb4670689518bf254b63ee24477971a5e2c1666b7f452199ad898551857bd62a
+  data.tar.gz: d334c3d12c391703d725f9a608c454087732ed3beda3cdca6e5b0bbb000dde49
 SHA512:
-  metadata.gz: edebbf85a4e8f8d4b87614225aaf4a0fa565739709ecd8b2b9bbe032e606184e4ef855d34a7e714d8ca5bf0afffa5ed2a5d9ae3f086b001c59c4e0726adaf434
-  data.tar.gz: 1ea48f5e83772d3f33682e8456fc1250a3fe4eeaf5d75937fe1d608578f52a53968f2c47976267f3ddbe9a0b7a02d7ee5b5e66d66d7a4ca387cc81a94b620e0d
+  metadata.gz: '05496ee6555f50603e6fec1676da0f40c0fc2de7d90869409cd06b2de2d7e7a70896d6129480363fc6f908b22e6413406bbe29177a468480daca64af5f0fae5d'
+  data.tar.gz: bb61330ca3b6dc7340b0773eb0fcb3c7ad5312413c61d82f0ef6b070e7b8db8c044ec504c6ad67358135c8b16888c7615da8793114c715e4da8482879ccee752

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_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");
+    });
+  }
+}