iron-cms 0.8.2 → 0.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 053e1ac01b6555dad4cb4836c77679aa622e99502ee68bce97ddfa643ee9e074
-  data.tar.gz: ccc7b5cff9fa76d856f5ddee5acb1bf2397dfd571715f931b4e72dcbebec18bf
+  metadata.gz: fa3607a886ecb036c62120d185fcd9bc82e9245948563ff1e3f74bc203a45e7c
+  data.tar.gz: 2799cafbf1445da0ab86935e577eea0cdbd5a6267790e161bc3ca781ff8a450b
 SHA512:
-  metadata.gz: ffea75ba7b33b21f0cee47b5d64461bc4691a843f626a697c5a325f521c58d8202709e8992be3d3e6f5e0a7413429b88b38d9f97ccc85e50fccb712d98a87878
-  data.tar.gz: 4e421bac5564e54a2a3a34860c81b5ab3e83b818cc899d10b7ab31fe1c2f611f637767524ca6e9a9afb001aabf01ca5b7c1a8af0937708795f8b61222b5e6b78
+  metadata.gz: 27bf0265abde161f09485aabcff0698eb7744502a2f38a01ca3f10b2933e34279e931ed8aa53ea3b9541543470762277805be95fde369a98f28d2e441dd7c26f
+  data.tar.gz: c4cdbc9b18a344848e14efbf3bea1ffd61c23d43c5b3b7993caeff7eaa47e163a646efc6369b356302a6180a4719146bfffdb226b394d3f6c6176c6006f1374d

data/app/assets/builds/iron.css

@@ -2084,6 +2084,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -2460,6 +2463,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2502,9 +2508,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-3\.5 {
-    padding-block: calc(var(--spacing) * 3.5);
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -2995,6 +2998,16 @@
       background-color: transparent;
     }
   }
+  .hover\:bg-red-500\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-stone-50 {
     &:hover {
       @media (hover: hover) {
@@ -3036,6 +3049,13 @@
       }
     }
   }
+  .hover\:text-red-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-400);
+      }
+    }
+  }
   .hover\:text-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -3043,6 +3063,13 @@
       }
     }
   }
+  .hover\:text-stone-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-stone-300);
+      }
+    }
+  }
   .hover\:text-stone-500 {
     &:hover {
       @media (hover: hover) {
@@ -5191,6 +5218,14 @@
     [data-sortable-list-target~="item"].dragging {
       opacity: 0%;
     }
+    [data-sortable-list-target~="handle"] {
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        inset: calc(var(--spacing) * -2);
+      }
+    }
   }
 }
 @layer base {

data/app/assets/tailwind/iron/application.css

@@ -65,6 +65,15 @@
     [data-sortable-list-target~="item"].dragging {
       @apply opacity-0;
     }
+
+    [data-sortable-list-target~="handle"] {
+      @apply relative;
+
+      &::before {
+        content: "";
+        @apply absolute -inset-2;
+      }
+    }
   }
 }
 

data/app/helpers/iron/form_builder.rb

@@ -41,6 +41,8 @@ module Iron
     end
 
     def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      return super if options.delete(:unstyled)
+
       @template.content_tag(:div, class: "group/checkbox checkbox") do
         super(method, options, checked_value, unchecked_value) +
         @template.icon("check")

data/app/javascript/iron/controllers/sortable_list_controller.js

@@ -2,16 +2,14 @@ import { Controller } from "@hotwired/stimulus";
 import { Lexorank } from "lib/lexorank";
 
 export default class extends Controller {
-  static targets = ["item", "handle", "rank"];
+  static targets = ["item", "handle", "rank", "dragImage"];
 
   handleTargetConnected(handle) {
     handle.addEventListener("pointerdown", this.#onHandleTapStart);
-    handle.addEventListener("pointerup", this.#onHandleTapEnd)
   }
 
   handleTargetDisconnected(handle) {
     handle.removeEventListener("pointerdown", this.#onHandleTapStart);
-    handle.removeEventListener("pointerup", this.#onHandleTapEnd)
   }
 
   rankTargetConnected(rank) {
@@ -25,6 +23,29 @@ export default class extends Controller {
     this.draggedEl = event.currentTarget;
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("text/plain", "");
+
+    // Use custom drag image if specified within the item
+    const dragImage = this.dragImageTargets.find(t => this.draggedEl.contains(t));
+    if (dragImage) {
+      // For collapsed details elements, clone and force closed to get correct preview
+      if (dragImage.tagName === "DETAILS" && !dragImage.open) {
+        const clone = dragImage.cloneNode(true);
+        clone.removeAttribute("open");
+        clone.style.position = "absolute";
+        clone.style.top = "-9999px";
+        clone.style.width = `${dragImage.offsetWidth}px`;
+        document.body.appendChild(clone);
+
+        const rect = dragImage.getBoundingClientRect();
+        event.dataTransfer.setDragImage(clone, event.clientX - rect.left, event.clientY - rect.top);
+
+        requestAnimationFrame(() => clone.remove());
+      } else {
+        const rect = dragImage.getBoundingClientRect();
+        event.dataTransfer.setDragImage(dragImage, event.clientX - rect.left, event.clientY - rect.top);
+      }
+    }
+
     requestAnimationFrame(() => {
       this.draggedEl.classList.add("dragging");
     });
@@ -41,13 +62,22 @@ export default class extends Controller {
 
   onDragOver = (event) => {
     event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+
     const overIndex = this.itemTargets.findIndex(t => t.contains(event.target));
     const overTarget = this.itemTargets[overIndex];
     if (!overTarget || overTarget === this.draggedEl) return;
 
-    const firstRects = new Map(this.itemTargets.map(el => [el, el.getBoundingClientRect()]));
-
+    const draggedIndex = this.itemTargets.indexOf(this.draggedEl);
     const shouldInsertBefore = this.draggedEl.getBoundingClientRect().top > overTarget.getBoundingClientRect().top;
+
+    // Skip if position unchanged
+    if ((shouldInsertBefore && draggedIndex === overIndex - 1) ||
+        (!shouldInsertBefore && draggedIndex === overIndex + 1)) {
+      return;
+    }
+
+    const firstRects = new Map(this.itemTargets.map(el => [el, el.getBoundingClientRect()]));
     this.element.insertBefore(this.draggedEl, shouldInsertBefore ? overTarget : this.itemTargets[overIndex + 1] ?? null);
 
     this.itemTargets.forEach(el => {
@@ -77,10 +107,6 @@ export default class extends Controller {
     this.#enableDraggableBehaviour();
   }
 
-  #onHandleTapEnd = () => {
-    this.#disableDraggableBehaviour();
-  }
-
   #enableDraggableBehaviour = () => {
     this.element.addEventListener("dragover", this.onDragOver);
     this.itemTargets.forEach(this.#enableItemDraggableBehaviour);

data/app/views/iron/entries/fields/_block.html.erb

@@ -6,41 +6,38 @@
   <% disclosure_id = dom_id(block, :disclosure) %>
 
   <div
-    class="has-[>_.destroy:checked]:hidden flex items-start space-x-1"
+    class="has-[>_.destroy:checked]:hidden"
     data-sortable-list-target="item"
   >
-    <%= builder.check_box :_destroy, class: "destroy hidden", data: { destroy: "" } %>
-    <button
-      type="button"
-      class="handle button-ghost button-sm py-3.5"
-      data-sortable-list-target="handle"
-    >
-      <%= icon "grip-vertical" %>
-    </button>
+    <%= builder.check_box :_destroy, class: "destroy hidden", unstyled: true, data: { destroy: "" } %>
     <details
       id="<%= disclosure_id %>"
-      class="group grow border border-stone-800 rounded-lg"
+      class="group border border-stone-800 rounded-lg bg-stone-900"
       data-controller="local-preference"
+      data-sortable-list-target="dragImage"
       <%= "open" if block.new_record? %>
     >
-      <summary
-        class="relative flex items-center justify-between gap-2 px-4 py-3 cursor-pointer transition-all hover:bg-stone-800/50 rounded-t-lg select-none"
-      >
-        <div class="flex flex-col gap-0.5 w-full min-w-0">
-          <span class="font-medium text-sm min-w-0">
-            <%= block.definition.name %>
-          </span>
+      <summary class="flex items-center gap-2 px-3 py-3 cursor-pointer select-none rounded-t-lg transition-colors hover:bg-stone-800/50">
+        <button
+          type="button"
+          class="handle text-stone-500 hover:text-stone-300 transition-colors cursor-grab"
+          data-sortable-list-target="handle"
+        >
+          <%= icon "grip-vertical", class: "size-4" %>
+        </button>
+
+        <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+          <span class="font-medium text-sm"><%= block.definition.name %></span>
           <% if block.title.present? %>
-            <span class="text-stone-400 text-sm line-clamp-1 group-open:hidden">
-              <%= block.title %>
-            </span>
+            <span class="text-stone-400 text-sm line-clamp-1 group-open:hidden"><%= block.title %></span>
           <% end %>
         </div>
-        <div class="flex items-center gap-2 shrink-0">
-          <%= builder.label :_destroy, class: "button-secondary button-sm" do %>
-            <%= icon "trash" %>
+
+        <div class="flex items-center gap-3">
+          <%= builder.label :_destroy, class: "p-1.5 rounded text-stone-500 hover:text-red-400 hover:bg-red-500/10 transition-colors" do %>
+            <%= icon "trash", class: "size-4" %>
           <% end %>
-          <%= icon "chevron-down", class: "transition-transform group-open:rotate-180" %>
+          <%= icon "chevron-down", class: "size-4 text-stone-500 transition-transform group-open:rotate-180" %>
         </div>
       </summary>
 

data/lib/iron/version.rb

@@ -1,3 +1,3 @@
 module Iron
-  VERSION = "0.8.2"
+  VERSION = "0.8.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: iron-cms
 version: !ruby/object:Gem::Version
-  version: 0.8.2
+  version: 0.8.3
 platform: ruby
 authors:
 - Massimo De Marchi