swal_rails 0.3.3 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db0cf6b419c2e989dfcc877d644fc85244f2c85e0fc2e012661b594854d5cdad
-  data.tar.gz: f26da33eb89b79b5338eb822281f89d5bc43376ca3a22f39969aaba3c7440f66
+  metadata.gz: 9c32d3f037cf95eabb9afc8d578ca88927dbbf95cfca901534f74bc11aad2976
+  data.tar.gz: 3e5bef30b1085080e83c98ec3a97b7da2dbd28ea1d2452546ab3252b9fa7f029
 SHA512:
-  metadata.gz: 35d5a3a5d411f39870070332ab2516987d9f6345ca3cf17f3fb6b0958f1ae9680608bb1a355ce2ffad3257cabb3e384fee9533018756c90784a29fc176c456c9
-  data.tar.gz: e48305dfd6fdb0bcb3bab2cbafbf4f56a017006e5d2d95cb716ecff61fa15ffd4abea636206c04e7e57f76a15a7d9888bd64cf6f114ce21bf78a346b52b43424
+  metadata.gz: 15fc85547a69d5bbadd35cfe7a2f2c8b7f9e7627e75f14161dcdfda5c9ed23595f4ae856716baaea56d8f9ed21f2ff9ded2a9b2ba1a99dd70d51c82b5cf70c62
+  data.tar.gz: e7c1aa7c9057d6c4bcc4708259dc38b40096e57b2bc6a870d8dd2bbe0c3cbdf80b19053a75d47649e541524f52b33fbf8df8fa979b64d38920434e068b7a122a

data/CHANGELOG.md

@@ -6,6 +6,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.4] - 2026-05-01
+
+### Added
+- Chain step DSL gains `inputExpected` / `inputExpectedError` for typed
+  confirmations in JSON-delivered flows (`data-swal-steps`,
+  `data-turbo-confirm` arrays, Stimulus `stepsValue`). The runtime injects
+  an `inputValidator` that requires exact text (after trim), making "Type
+  DELETE" steps enforceable without embedding JavaScript functions.
+
+### Fixed
+- Stacked flash toasts no longer render with the icon/title/content
+  collapsed into a vertical block. SweetAlert2 only sets
+  `popup.style.display = "grid"` at `didOpen`, but the stacked-mode runtime
+  clones the popup at `didRender` (one lifecycle step earlier) so the
+  inline display is missing. Outside SA2's `.swal2-container` the toast
+  fell back to `display: block` and the `.swal2-toast` grid template never
+  applied. The clone now pins `display: grid` itself, matching the
+  geometry of standard toasts.
+
 ## [0.3.3] - 2026-04-25
 
 ### Added

data/README.md

@@ -363,7 +363,12 @@ server:
       swal_steps: [
         { title: "Delete your account?", icon: "warning" },
         { title: "This cannot be undone", icon: "error" },
-        { title: "Type DELETE to confirm", input: "text" }
+        {
+          title: "Type DELETE to confirm",
+          input: "text",
+          inputExpected: "DELETE",
+          inputExpectedError: "Type DELETE exactly"
+        }
       ].to_json
     } %>
 ```
@@ -373,6 +378,10 @@ icon, buttons, timer, `input:` type, anything SA2 accepts. The per-step
 defaults (`showCancelButton: true`, `focusCancel: true`, `icon: "warning"`)
 are merged in first and can be replaced key-by-key.
 
+When a step uses `input:`, you can add `inputExpected` (and optional
+`inputExpectedError`) to enforce typed confirmations from JSON-only payloads
+where a function-based `inputValidator` cannot be serialized.
+
 #### Conditional branching (`onConfirmed` / `onDenied`)
 
 Add a Deny button (`showDenyButton: true`) to get a three-way choice, and
@@ -717,6 +726,8 @@ Returns `true` iff a complete path through the chain was confirmed. `steps` may
 | -------------- | ------------------- | ------ |
 | `onConfirmed`  | `Array<StepOptions>` | On `isConfirmed`, run this sub-chain and adopt its boolean result (replaces the remainder of the current chain). |
 | `onDenied`     | `Array<StepOptions>` | On `isDenied` (requires `showDenyButton: true`), run this sub-chain and adopt its boolean result. Without this key, `isDenied` aborts the chain. |
+| `inputExpected` | `String`            | If present, injects an `inputValidator` that requires an exact match (after trim). Useful for JSON-delivered typed confirmations (e.g. `"DELETE"`). |
+| `inputExpectedError` | `String`       | Optional error message used when `inputExpected` does not match. |
 
 #### Events
 

data/app/assets/javascripts/swal_rails/chain.js

@@ -14,6 +14,28 @@ export const CHAIN_DEFAULTS = {
   icon: "warning"
 }
 
+// JSON-delivered steps cannot ship functions (e.g. inputValidator).
+// `inputExpected` provides a declarative guard for typed confirmations.
+const normalizeStep = (step) => {
+  const {
+    onConfirmed,
+    onDenied,
+    inputExpected,
+    inputExpectedError,
+    ...sa2Options
+  } = step || {}
+
+  if (typeof inputExpected === "string") {
+    const expected = inputExpected
+    const error = inputExpectedError || `Type "${expected}" to continue`
+    sa2Options.inputValidator = (value) => (
+      (value || "").trim() === expected ? undefined : error
+    )
+  }
+
+  return { onConfirmed, onDenied, sa2Options }
+}
+
 export const chainDialogs = async (Swal, steps) => {
   if (!Array.isArray(steps) || steps.length === 0) return true
 
@@ -21,7 +43,7 @@ export const chainDialogs = async (Swal, steps) => {
     // Strip our own control keys — SA2 ignores unknown options, but leaking
     // `onConfirmed`/`onDenied` into the popup options keeps the serialized
     // payload noisy and invites confusion.
-    const { onConfirmed, onDenied, ...sa2Options } = step || {}
+    const { onConfirmed, onDenied, sa2Options } = normalizeStep(step)
     const result = await Swal.fire({ ...CHAIN_DEFAULTS, ...sa2Options })
 
     if (result.isDismissed) return false

data/app/assets/javascripts/swal_rails/flash.js

@@ -3,35 +3,39 @@
 // would have its fireNext chain launched twice, racing and cascading via
 // Swal.fire's replace-current-popup behavior — only the last message wins.
 const readFlash = () => {
-  const el = document.querySelector('meta[name="swal-flash"]')
-  if (!el || el.dataset.swalConsumed === "1") return []
-  el.dataset.swalConsumed = "1"
-  try { return JSON.parse(el.getAttribute("content")) || [] } catch { return [] }
-}
+  const el = document.querySelector('meta[name="swal-flash"]');
+  if (!el || el.dataset.swalConsumed === "1") return [];
+  el.dataset.swalConsumed = "1";
+  try {
+    return JSON.parse(el.getAttribute("content")) || [];
+  } catch {
+    return [];
+  }
+};
 
 // Keys attached by `swal_flash` helper for per-request mode / delay override.
 // Stripped from the options before being passed to Swal.fire so they never
 // leak into SA2.
-const META_KEYS = ["_arrayMode", "_stackDelay"]
+const META_KEYS = ["_arrayMode", "_stackDelay"];
 
 const extractMeta = (queue) => {
-  let mode = null
-  let delay = null
+  let mode = null;
+  let delay = null;
   for (const item of queue) {
-    if (mode === null && item._arrayMode) mode = item._arrayMode
-    if (delay === null && item._stackDelay != null) delay = item._stackDelay
-    for (const k of META_KEYS) delete item[k]
+    if (mode === null && item._arrayMode) mode = item._arrayMode;
+    if (delay === null && item._stackDelay != null) delay = item._stackDelay;
+    for (const k of META_KEYS) delete item[k];
   }
-  return { mode, delay }
-}
+  return { mode, delay };
+};
 
-const STACK_ID = "swal-rails-stack"
+const STACK_ID = "swal-rails-stack";
 
 const ensureStackContainer = () => {
-  let el = document.getElementById(STACK_ID)
+  let el = document.getElementById(STACK_ID);
   if (!el) {
-    el = document.createElement("div")
-    el.id = STACK_ID
+    el = document.createElement("div");
+    el.id = STACK_ID;
     // 360px matches SA2's `body.swal2-toast-shown .swal2-container` width;
     // without it the cloned popups inherit `width: 100%` from SA2 and
     // visually span the whole screen.
@@ -45,21 +49,21 @@ const ensureStackContainer = () => {
       "flex-direction:column",
       "gap:.5rem",
       "z-index:10000",
-      "pointer-events:none"
-    ].join(";")
-    document.body.appendChild(el)
+      "pointer-events:none",
+    ].join(";");
+    document.body.appendChild(el);
   }
-  return el
-}
+  return el;
+};
 
 const fireSequential = (Swal, queue) => {
   const fireNext = () => {
-    const opts = queue.shift()
-    if (!opts) return
-    Swal.fire(opts).then(fireNext)
-  }
-  fireNext()
-}
+    const opts = queue.shift();
+    if (!opts) return;
+    Swal.fire(opts).then(fireNext);
+  };
+  fireNext();
+};
 
 // SA2 is singleton — two concurrent Swal.fire calls collapse into one
 // popup (the second replaces the first). To stack multiple toasts we let
@@ -68,15 +72,15 @@ const fireSequential = (Swal, queue) => {
 // stack with their own timer and click-to-dismiss handlers. Empiler des
 // modales bloquantes n'a pas de sens — on force toast: true.
 const fireStacked = async (Swal, queue, delay) => {
-  const stack = ensureStackContainer()
+  const stack = ensureStackContainer();
   for (let i = 0; i < queue.length; i++) {
-    const opts = queue[i]
-    const slot = document.createElement("div")
-    slot.className = "swal-rails-stack-slot"
-    slot.style.cssText = "width:100%;pointer-events:auto;"
-    stack.appendChild(slot)
+    const opts = queue[i];
+    const slot = document.createElement("div");
+    slot.className = "swal-rails-stack-slot";
+    slot.style.cssText = "width:100%;pointer-events:auto;";
+    stack.appendChild(slot);
 
-    const timerMs = opts.timer
+    const timerMs = opts.timer;
     await new Promise((resolve) => {
       Swal.fire({
         ...opts,
@@ -89,50 +93,75 @@ const fireStacked = async (Swal, queue, delay) => {
         showClass: { popup: "", backdrop: "", icon: "" },
         hideClass: { popup: "", backdrop: "", icon: "" },
         didRender: (popup) => {
-          const clone = popup.cloneNode(true)
-          clone.style.opacity = ""
-          clone.querySelectorAll(".swal2-timer-progress-bar-container").forEach((e) => e.remove())
+          const clone = popup.cloneNode(true);
+          clone.style.opacity = "";
+          // SA2 only flips `popup.style.display` to `grid` at didOpen. We
+          // clone at didRender — earlier in the lifecycle — so the inline
+          // display is missing. Outside SA2's `.swal2-container` the toast
+          // therefore falls back to `display: block`, which collapses the
+          // grid layout (`.swal2-toast { grid-template-columns: … }`) and
+          // ends up rendering icon/title/content stacked vertically — the
+          // "vachement haute" symptom of stacked flashes.
+          clone.style.display = "grid";
+          clone
+            .querySelectorAll(".swal2-timer-progress-bar-container")
+            .forEach((e) => e.remove());
           // SA2 adds `.swal2-icon-show` only after didOpen, but we clone
           // earlier (in didRender) to beat the close animation. Apply it
           // manually so the icon's SVG is visibly drawn in the clone.
-          clone.querySelectorAll(".swal2-icon").forEach((icon) => icon.classList.add("swal2-icon-show"))
-          slot.appendChild(clone)
+          clone
+            .querySelectorAll(".swal2-icon")
+            .forEach((icon) => icon.classList.add("swal2-icon-show"));
+          slot.appendChild(clone);
           const dismiss = () => {
-            if (slot.isConnected) slot.remove()
-            if (stack.isConnected && stack.children.length === 0) stack.remove()
-          }
-          clone.querySelector(".swal2-close")?.addEventListener("click", dismiss)
-          if (timerMs) setTimeout(dismiss, timerMs)
+            if (slot.isConnected) slot.remove();
+            if (stack.isConnected && stack.children.length === 0)
+              stack.remove();
+          };
+          clone
+            .querySelector(".swal2-close")
+            ?.addEventListener("click", dismiss);
+          if (timerMs) setTimeout(dismiss, timerMs);
         },
-        didClose: () => resolve()
-      })
-    })
+        didClose: () => resolve(),
+      });
+    });
 
     if (i < queue.length - 1 && delay > 0) {
-      await new Promise((r) => setTimeout(r, delay))
+      await new Promise((r) => setTimeout(r, delay));
     }
   }
-}
+};
 
 export const installFlash = (Swal, config) => {
-  const flashes = readFlash()
-  if (!flashes.length) return
+  const flashes = readFlash();
+  if (!flashes.length) return;
 
-  const map = config.flashMap || {}
+  const map = config.flashMap || {};
   const queue = flashes.map((flash) => {
-    const spec = map[flash.key] || map[flash.key.toLowerCase()] || { icon: "info", toast: true, position: "top-end", timer: 3000 }
+    const spec = map[flash.key] ||
+      map[flash.key.toLowerCase()] || {
+        icon: "info",
+        toast: true,
+        position: "top-end",
+        timer: 3000,
+      };
     // Per-request options win over the per-key defaults from flash_map.
-    return { ...spec, ...(flash.options || {}) }
-  })
+    return { ...spec, ...(flash.options || {}) };
+  });
 
-  const meta = extractMeta(queue)
-  const mode = meta.mode || config.flashArrayMode || "sequential"
-  const delay = meta.delay != null ? meta.delay
-    : (config.flashStackDelay != null ? config.flashStackDelay : 500)
+  const meta = extractMeta(queue);
+  const mode = meta.mode || config.flashArrayMode || "sequential";
+  const delay =
+    meta.delay != null
+      ? meta.delay
+      : config.flashStackDelay != null
+        ? config.flashStackDelay
+        : 500;
 
   if (mode === "stacked" && queue.length > 1) {
-    fireStacked(Swal, queue, delay)
+    fireStacked(Swal, queue, delay);
   } else {
-    fireSequential(Swal, queue)
+    fireSequential(Swal, queue);
   }
-}
+};

data/lib/swal_rails/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module SwalRails
-  VERSION = "0.3.3"
+  VERSION = "0.3.4"
   SWEETALERT2_VERSION = "11.26.24"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swal_rails
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.4
 platform: ruby
 authors:
 - Florian Gagnaire
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-04-25 00:00:00.000000000 Z
+date: 2026-05-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties