ultimate_turbo_modal 3.3.0 → 3.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b52125720fe85438df47417fd9fc02a2d9509d3da42d1abbbe392892f5c0cc8a
-  data.tar.gz: 67bad39477deb507e85a4fd2b481f4b7947c8eda4391c10c9d392d0935c50b85
+  metadata.gz: e8449cf081c6d1dfc2b84106cc16b316fb6a15b25031a2a9dc94c2ce4bf99b35
+  data.tar.gz: b1067b8a6ef21a15e9556bee1e8a0ceb45fdb453ff8fa772eda0ad5191b7d669
 SHA512:
-  metadata.gz: '08478369a96054c23ad7c627da033febb05c0bbd40afe48e6ed54ed3d0098fb7efc175f152a4e72b21108cce21607d047d5f7956afbe8c64acdafd3cfadd50e7'
-  data.tar.gz: 75f5307c6f8bf3fca81357bd0da3a5f9b5dca97aa977cd267bf91b9f5156ebe39643965b215e33ac1fd8671225385abf9674f90fa23309bc83208ea1d7ff1076
+  metadata.gz: 86b485906013944b475e4f0aece1ee980dd226aa160b8daed3628fb84b8b7cbbea8b015086310372f2fceab89d34372a18acd0b4cd76720dbf5af0cd18574f74
+  data.tar.gz: 5e6753fa5decf7401e07a2bda70dcef18a25fe56c2c487f0eb76e66dc010b556b52a2d7893201de73815431bd95600a80861de94e7758d863d3e98949d67783f

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+## [3.4.0] - 2026-09-10
+
+- Added optional Turbo Confirm support: `data-turbo-confirm` prompts can now render as a UTMR dialog instead of the browser's `window.confirm`.
+- Fixed `<%= m.title do %>` and `<%= m.footer do %>` printing a `Proc` into the modal body. Both forms now work, with or without the `=`.
+
 ## [3.3.0] - 2026-09-05
 
 - Added `close_on_submit`, which keeps a modal or drawer open after a successful form submission. Individual forms can override it with `data-modal-close-on-submit`.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ultimate_turbo_modal (3.3.0)
+    ultimate_turbo_modal (3.4.0)
       actionpack (>= 8.0)
       activesupport (>= 8.0)
       phlex-rails (>= 2.0)

data/README.md

@@ -146,6 +146,14 @@ UltimateTurboModal.configure do |config|
     d.overlay = true
     d.size = :md
   end
+
+  # Only used when Turbo Confirm support is enabled.
+  # See https://github.com/cmer/ultimate_turbo_modal#turbo-confirm
+  config.confirm do |c|
+    c.title = "Are you sure?"
+    c.accept_label = "OK"
+    c.cancel_label = "Cancel"
+  end
 end
 ```
 
@@ -288,6 +296,160 @@ inside a default modal keeps that one form from dismissing it. Placing the
 attribute on a wrapping element applies it to every form inside; the nearest
 one wins.
 
+## Turbo Confirm
+
+Optional, opt-in. Once enabled, Turbo's `data-turbo-confirm` prompts render as
+UTMR dialogs in your app's flavor instead of the browser's `window.confirm`.
+
+Enabling it is one line in your layout:
+
+```erb
+<%= modal_confirm_template %>
+```
+
+That's the whole opt-in — no JavaScript changes. The helper renders an inert
+`<template>`, and its presence on the page is the switch: with it, UTMR handles
+confirmations; without it, Turbo falls back to `window.confirm` exactly as
+before. Remove the line to turn the feature off.
+
+You can also flip it from the initializer, which is handy for toggling per
+environment without touching the layout:
+
+```ruby
+UltimateTurboModal.configure do |config|
+  config.confirm do |c|
+    c.enabled = false
+  end
+end
+```
+
+### Basic usage
+
+Nothing changes about how you write confirmations:
+
+```erb
+<%= button_to "Delete", post_path(post), method: :delete,
+      form: { data: { turbo_confirm: "This can't be undone." } } %>
+```
+
+The message becomes the dialog body; the title and button labels come from your
+configured defaults.
+
+> [!NOTE]
+> Turbo only runs confirmations for form submissions. A plain `<a>` needs
+> `data-turbo-method` (or `data-turbo-stream`) for `data-turbo-confirm` to fire
+> at all — that is Turbo's behavior, not UTMR's.
+
+### Customizing a single confirmation
+
+For anything beyond the message, use the `modal_confirm` helper. It builds the
+`data` attributes for you:
+
+```erb
+<%= link_to "Delete", post_path(post), data: modal_confirm(
+      "This can't be undone.",
+      title: "Delete post?",
+      accept: "Delete",
+      variant: :danger,
+      turbo_method: :delete) %>
+```
+
+| Option | Description |
+|--------|-------------|
+| `body` | First positional argument. The message. |
+| `title` | Dialog heading. |
+| `accept` | Label for the confirming button. |
+| `cancel` | Label for the dismissing button. |
+| `variant` | `:danger` styles the accept button destructively and moves the initial focus to Cancel. |
+| `native` | `true` uses the browser's own `window.confirm` for this one prompt. |
+
+Any option you leave out keeps its configured default.
+
+You can also write the attributes by hand, which is convenient on forms:
+
+```erb
+<%= button_to "Delete", post_path(post), method: :delete, form: { data: {
+      turbo_confirm: "This can't be undone.",
+      turbo_confirm_title: "Delete post?",
+      turbo_confirm_accept: "Delete",
+      turbo_confirm_variant: "danger" } } %>
+```
+
+`data-turbo-confirm` itself has to be on the form or on the submit button:
+Turbo looks nowhere else, and a prompt written on a wrapping element is simply
+never triggered. The `data-turbo-confirm-*` options are read once the prompt has
+fired, so those may also sit on a wrapping element. The submitter wins when both
+it and the form carry the same option.
+
+> [!IMPORTANT]
+> On a **link**, use `modal_confirm`. Sibling `data-turbo-confirm-*` attributes
+> do not survive: Turbo rewrites a link carrying `data-turbo-method` into a
+> hidden form and copies only a fixed set of attributes across, so they are gone
+> before UTMR is called. The helper's JSON payload rides inside
+> `data-turbo-confirm` itself, which always survives. On forms, either style
+> works.
+
+### Defaults
+
+```ruby
+UltimateTurboModal.configure do |config|
+  config.confirm do |c|
+    c.enabled = true
+    c.title = "Are you sure?"
+    c.accept_label = "OK"
+    c.cancel_label = "Cancel"
+    c.close_button = false   # a confirm has its own Cancel button
+    c.header_divider = false # dividers chop up one or two lines of text
+    c.footer_divider = false
+    c.header = true
+    c.padding = true
+    c.overlay = true
+  end
+end
+```
+
+The confirm dialog is deliberately plainer than a modal: no close button and no
+dividers by default, and a set width (floor `20rem`, cap `28rem`) so a one-word
+prompt and a three-line one come out the same size. Adjust it by overriding
+`CONFIRM_CONTENT_CLASSES` in your flavor file.
+
+### Behavior
+
+- The dialog is appended to `<body>`, so it layers above an open modal or drawer without any extra setup.
+- **ESC** and the Cancel button both cancel — the action does not run.
+- Clicking the backdrop does nothing. A confirm has to be answered, so a stray click never decides it.
+- The confirming button is focused on open, so Enter accepts. `variant: :danger` focuses Cancel instead.
+- Accepting waits for the close animation to finish before the request is sent.
+- `window.modal` keeps pointing at the modal underneath, so `turbo_stream.modal(:close)` still addresses the right dialog.
+- `data-turbo-confirm-native` on a form or submitter opts that one confirmation back out to `window.confirm`. On a link, pass `native: true` to `modal_confirm` instead, for the same reason the other options have to travel in the payload.
+- If something else in your app assigns `Turbo.config.forms.confirm` after UTMR loads, it wins. Import `enableModalConfirm` from the package and call it afterwards to take the hook back.
+
+### Styling
+
+The dialog is cloned from the template, so it shares your flavor's dialog,
+backdrop and transition classes. Every slot falls back to its `MODAL_*` class
+unless the flavor defines a `CONFIRM_*` override, so you only need to define
+what should differ:
+
+| Constant | Falls back to |
+|----------|---------------|
+| `CONFIRM_INNER_CLASSES` | `MODAL_INNER_CLASSES` |
+| `CONFIRM_CONTENT_CLASSES` | `MODAL_CONTENT_CLASSES` |
+| `CONFIRM_HEADER_CLASSES` | `MODAL_HEADER_CLASSES` |
+| `CONFIRM_TITLE_CLASSES` | `MODAL_TITLE_CLASSES` |
+| `CONFIRM_TITLE_H_CLASSES` | `MODAL_TITLE_H_CLASSES` |
+| `CONFIRM_MAIN_CLASSES` | `MODAL_MAIN_CLASSES` |
+| `CONFIRM_FOOTER_CLASSES` | `MODAL_FOOTER_CLASSES` |
+| `CONFIRM_BODY_CLASSES` | — (confirm only) |
+| `CONFIRM_ACTIONS_CLASSES` | — (confirm only) |
+| `CONFIRM_ACCEPT_CLASSES` | — (confirm only) |
+| `CONFIRM_CANCEL_CLASSES` | — (confirm only) |
+
+Upgrading from an earlier version? Run
+`rails generate ultimate_turbo_modal:update` to refresh your flavor file — until
+you do, the confirm dialog falls back to the modal's classes and the four
+confirm-only slots render unstyled rather than raising.
+
 ## Opening a Modal from a Drawer
 
 You don't need to do anything special. Use `data-turbo-frame="modal"` like you would anywhere else, and UTMR handles the rest:
@@ -347,6 +509,7 @@ For a full lifecycle walkthrough and edge-case notes, see [docs/modal-from-drawe
 - Automatic (or not) close button
 - Native focus trapping via the `<dialog>` element for improved accessibility (Tab and Shift+Tab cycle through focusable elements within the modal only)
 - Smooth redirects: form submissions that redirect back to the same page morph the content behind the modal before closing; redirects to a different page close the modal with animation first, then navigate
+- Optional Turbo Confirm support: `data-turbo-confirm` prompts render as a styled dialog instead of the browser's `window.confirm`
 
 
 ### Running the Demo Application

data/VERSION

@@ -1 +1 @@
-3.3.0
+3.4.0

data/app/assets/stylesheets/ultimate_turbo_modal.css

@@ -190,6 +190,160 @@ dialog.utmr {
     height: 1.25rem;
   }
 
+  /* ========================================
+     Confirm dialog styles
+     Scoped to [data-utmr-confirm] so it can reuse the modal container,
+     backdrop and enter/leave transitions while overriding the layout.
+     ======================================== */
+
+  &[data-utmr-confirm] {
+    /* Real gutter on mobile: the card below is full width. */
+    .modal-inner {
+      padding: 1rem;
+      padding-top: 10vh;
+
+      @media (min-width: 640px) {
+        padding: 1rem;
+        padding-bottom: 10vh;
+      }
+    }
+
+    /* Sized rather than shrink-to-fit, so a one-word prompt and a three-line
+       one come out the same. The floor is written as min(20rem, 100%) so it can
+       never push the card wider than the space it has on a narrow screen. */
+    .confirm-content {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      min-width: min(20rem, 100%);
+      background-color: #ffffff;
+      text-align: left;
+      border-radius: 0.5rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+      @media (min-width: 640px) {
+        max-width: 28rem;
+      }
+    }
+
+    .confirm-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      width: 100%;
+      padding: 1.5rem 1.5rem 0;
+    }
+
+    .confirm-title-h {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      font-weight: 600;
+    }
+
+    .confirm-main {
+      padding: 0;
+    }
+
+    .confirm-body {
+      font-size: 0.875rem;
+      line-height: 1.5rem;
+    }
+
+    .confirm-footer {
+      padding: 1.5rem;
+    }
+
+    /* Stacked and full width on mobile, inline and right aligned from 640px.
+       Reversed so the primary action sits on top. */
+    .confirm-actions {
+      display: flex;
+      width: 100%;
+      flex-direction: column-reverse;
+      gap: 0.5rem;
+
+      @media (min-width: 640px) {
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 0.75rem;
+      }
+    }
+
+    .confirm-cancel,
+    .confirm-accept {
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding: 0.625rem 1rem;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      font-weight: 600;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: background-color 150ms ease-in-out;
+
+      @media (min-width: 640px) {
+        width: auto;
+        padding: 0.5rem 1rem;
+      }
+    }
+
+    .confirm-cancel {
+      background-color: #ffffff;
+      color: #111827;
+      border: 1px solid #D1D5DB;
+
+      &:hover {
+        background-color: #F9FAFB;
+      }
+    }
+
+    .confirm-accept {
+      background-color: #4F46E5;
+      color: #ffffff;
+      border: 1px solid transparent;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+      &:hover {
+        background-color: #6366F1;
+      }
+    }
+
+    /* Destructive variant, set from `variant: :danger` */
+    &[data-utmr-confirm-variant="danger"] .confirm-accept {
+      background-color: #DC2626;
+
+      &:hover {
+        background-color: #EF4444;
+      }
+    }
+
+    /* Options, matching the modal's data-attribute switches */
+    &[data-header="false"] .confirm-header {
+      display: none;
+    }
+
+    &[data-title="false"] .confirm-title-h {
+      display: none;
+    }
+
+    &[data-padding="true"] .confirm-main {
+      padding: 0.5rem 1.5rem 0;
+    }
+
+    &[data-header-divider="true"] .confirm-header {
+      padding-bottom: 1rem;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+
+    &[data-footer-divider="true"] .confirm-footer {
+      border-top-width: 1px;
+      border-top-style: solid;
+    }
+  }
+
   /* ========================================
      Drawer styles
      ======================================== */
@@ -399,6 +553,30 @@ dialog.utmr {
     color: #ffffff;
   }
 
+  .confirm-content {
+    background-color: #1F2937;
+    color: #ffffff;
+  }
+
+  .confirm-body {
+    color: #9CA3AF;
+  }
+
+  .confirm-header,
+  .confirm-footer {
+    border-color: #4B5563;
+  }
+
+  .confirm-cancel {
+    background-color: #374151;
+    color: #F3F4F6;
+    border-color: #4B5563;
+
+    &:hover {
+      background-color: #4B5563;
+    }
+  }
+
   .modal-close-button:hover,
   .modal-close-icon:hover,
   .drawer-close-button:hover,
@@ -409,6 +587,15 @@ dialog.utmr {
 }
 
 :not(.dark) dialog.utmr {
+  .confirm-body {
+    color: #6B7280;
+  }
+
+  .confirm-header,
+  .confirm-footer {
+    border-color: #E5E7EB;
+  }
+
   .modal-close-button,
   .modal-close-icon,
   .drawer-close-button,

data/lib/generators/ultimate_turbo_modal/install_generator.rb

@@ -127,6 +127,9 @@ module UltimateTurboModal
       def show_readme
         say "\nUltimateTurboModal installation complete!\n", :magenta
         say "Please review the initializer files, ensure JS is set up, and check your layout file.", :magenta
+        say "\nOptional: to render `data-turbo-confirm` prompts as modals instead of", :magenta
+        say "the browser's confirm dialog, add this to your layout:", :magenta
+        say "  <%= modal_confirm_template %>", :cyan
         say "Don't forget to restart your Rails server!", :yellow
       end
 

data/lib/generators/ultimate_turbo_modal/templates/flavors/custom.rb

@@ -8,7 +8,7 @@
 # Set to "" or omit entirely if you handle all styling via classes and external CSS.
 module UltimateTurboModal::Flavors
   class Custom < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog.utmr[open]) { overflow: hidden; }"
 
     MODAL_DIALOG_CLASSES = ""
     MODAL_INNER_CLASSES = ""
@@ -23,6 +23,15 @@ module UltimateTurboModal::Flavors
     MODAL_CLOSE_SR_CLASSES = ""
     MODAL_CLOSE_ICON_CLASSES = ""
 
+    # Confirm dialog constants
+    # Only the slots that have no modal equivalent are listed. Every other slot
+    # (dialog, inner, content, header, title, main, footer) falls back to the
+    # matching MODAL_* class above; define a CONFIRM_* one to override it.
+    CONFIRM_BODY_CLASSES = ""
+    CONFIRM_ACTIONS_CLASSES = ""
+    CONFIRM_CANCEL_CLASSES = ""
+    CONFIRM_ACCEPT_CLASSES = ""
+
     # Drawer constants
     DRAWER_DIALOG_CLASSES = MODAL_DIALOG_CLASSES
     DRAWER_WRAPPER_CLASSES = ""

data/lib/generators/ultimate_turbo_modal/templates/flavors/tailwind.rb

@@ -8,7 +8,7 @@
 # `data-entered` state (which would prevent the modal from animating out).
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog.utmr[open]) { overflow: hidden; }"
 
     # Modal constants
 
@@ -25,9 +25,11 @@ module UltimateTurboModal::Flavors
       "data-[closing]:backdrop:duration-200 data-[closing]:backdrop:ease-in"
     ].join(" ")
 
-    MODAL_INNER_CLASSES = [
-      "flex min-h-full items-start justify-center pt-[10vh] sm:items-center sm:pt-0 sm:p-4 sm:pb-[10vh]",
-      # Transition
+    # The enter/leave animation, shared by the modal and the confirm dialog.
+    # Tailwind resolves conflicts by CSS source order rather than by the order
+    # classes appear in the string, so the two cannot share a layout line -- but
+    # they must not drift apart on the animation.
+    MODAL_TRANSITION_CLASSES = [
       "transition duration-300 ease-out",
       "group-data-[closing]/utmr-modal:duration-200 group-data-[closing]/utmr-modal:ease-in",
       # Default state (closed): faded + shifted
@@ -36,6 +38,11 @@ module UltimateTurboModal::Flavors
       "group-data-[entered]/utmr-modal:opacity-100 group-data-[entered]/utmr-modal:translate-y-0 group-data-[entered]/utmr-modal:scale-100"
     ].join(" ")
 
+    MODAL_INNER_CLASSES = [
+      "flex min-h-full items-start justify-center pt-[10vh] sm:items-center sm:pt-0 sm:p-4 sm:pb-[10vh]",
+      MODAL_TRANSITION_CLASSES
+    ].join(" ")
+
     MODAL_CONTENT_CLASSES = "relative transform max-h-screen overflow-hidden rounded-lg bg-white text-left shadow-lg transition-all sm:max-w-3xl dark:bg-gray-800 dark:text-white"
     MODAL_MAIN_CLASSES = "group-data-[padding=true]/utmr-modal:p-4 group-data-[padding=true]/utmr-modal:pt-2 overflow-y-auto max-h-[75vh]"
     MODAL_HEADER_CLASSES = "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]/utmr-modal:border-b group-data-[header=false]/utmr-modal:absolute"
@@ -47,6 +54,73 @@ module UltimateTurboModal::Flavors
     MODAL_CLOSE_BUTTON_CLASSES = "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
     MODAL_CLOSE_ICON_CLASSES = "w-5 h-5"
 
+    # Confirm dialog constants
+    #
+    # The confirm dialog renders through the modal's markup, so it inherits the
+    # dialog, backdrop and transition classes above. These constants only
+    # narrow the card and retune the spacing for what is a short prompt rather
+    # than a page of content. Any slot left undefined falls back to MODAL_*.
+
+    # Same transition as a modal, with a real gutter so the full-width card
+    # never touches the screen edge on mobile.
+    CONFIRM_INNER_CLASSES = [
+      "flex min-h-full items-start justify-center p-4 pt-[10vh] sm:items-center sm:pt-4 sm:pb-[10vh]",
+      MODAL_TRANSITION_CLASSES
+    ].join(" ")
+
+    # Sized rather than shrink-to-fit, so a one-word prompt and a three-line one
+    # come out the same. The floor is written as `min(20rem, 100%)` so it can
+    # never push the card wider than the space it has on a narrow screen.
+    CONFIRM_CONTENT_CLASSES = [
+      "relative w-full transform overflow-hidden rounded-lg text-left shadow-xl transition-all",
+      "min-w-[min(20rem,100%)] sm:max-w-md",
+      "bg-white dark:bg-gray-800 dark:text-white"
+    ].join(" ")
+
+    CONFIRM_HEADER_CLASSES = [
+      "flex items-start justify-between gap-4 w-full px-6 pt-6",
+      "dark:border-gray-600",
+      "group-data-[header-divider=true]/utmr-modal:border-b group-data-[header-divider=true]/utmr-modal:pb-4",
+      "group-data-[header=false]/utmr-modal:hidden"
+    ].join(" ")
+
+    CONFIRM_TITLE_CLASSES = "min-w-0"
+    CONFIRM_TITLE_H_CLASSES = "group-data-[title=false]/utmr-modal:hidden text-base font-semibold text-gray-900 dark:text-white"
+
+    CONFIRM_MAIN_CLASSES = "group-data-[padding=true]/utmr-modal:px-6 group-data-[padding=true]/utmr-modal:pt-2"
+    CONFIRM_BODY_CLASSES = "text-sm/6 text-gray-500 dark:text-gray-400"
+
+    CONFIRM_FOOTER_CLASSES = [
+      "px-6 pt-6 pb-6",
+      "dark:border-gray-600 group-data-[footer-divider=true]/utmr-modal:border-t"
+    ].join(" ")
+
+    # Stacked and full-width on mobile (thumb-friendly), inline and right
+    # aligned from `sm` up. Reversed so the primary action sits on top.
+    CONFIRM_ACTIONS_CLASSES = "flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-3"
+
+    CONFIRM_BUTTON_CLASSES = [
+      "inline-flex w-full sm:w-auto justify-center items-center rounded-md",
+      "px-4 py-2.5 sm:py-2 text-sm font-semibold transition-colors",
+      "focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" ")
+
+    CONFIRM_CANCEL_CLASSES = [
+      CONFIRM_BUTTON_CLASSES,
+      "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
+      "dark:bg-gray-700 dark:text-gray-100 dark:ring-gray-600 dark:hover:bg-gray-600",
+      "focus-visible:outline-gray-400"
+    ].join(" ")
+
+    CONFIRM_ACCEPT_CLASSES = [
+      CONFIRM_BUTTON_CLASSES,
+      "text-white shadow-sm bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600",
+      # Destructive variant, set from `variant: :danger`
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:bg-red-600",
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:hover:bg-red-500",
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:focus-visible:outline-red-600"
+    ].join(" ")
+
     # Drawer constants
 
     DRAWER_DIALOG_CLASSES = [

data/lib/generators/ultimate_turbo_modal/templates/flavors/vanilla.rb

@@ -5,7 +5,7 @@
 # Set STYLES to a CSS string if you need additional inline styles.
 module UltimateTurboModal::Flavors
   class Vanilla < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog.utmr[open]) { overflow: hidden; }"
 
     MODAL_DIALOG_CLASSES = "modal-container"
     MODAL_INNER_CLASSES = "modal-inner"
@@ -20,6 +20,19 @@ module UltimateTurboModal::Flavors
     MODAL_CLOSE_SR_CLASSES = "sr-only"
     MODAL_CLOSE_ICON_CLASSES = "modal-close-icon"
 
+    # Confirm dialog constants
+    # Slots without a CONFIRM_* constant (dialog, inner) fall back to MODAL_*.
+    CONFIRM_CONTENT_CLASSES = "confirm-content"
+    CONFIRM_HEADER_CLASSES = "confirm-header"
+    CONFIRM_TITLE_CLASSES = "confirm-title"
+    CONFIRM_TITLE_H_CLASSES = "confirm-title-h"
+    CONFIRM_MAIN_CLASSES = "confirm-main"
+    CONFIRM_BODY_CLASSES = "confirm-body"
+    CONFIRM_FOOTER_CLASSES = "confirm-footer"
+    CONFIRM_ACTIONS_CLASSES = "confirm-actions"
+    CONFIRM_CANCEL_CLASSES = "confirm-cancel"
+    CONFIRM_ACCEPT_CLASSES = "confirm-accept"
+
     # Drawer constants
     DRAWER_DIALOG_CLASSES = "drawer-container"
     DRAWER_WRAPPER_CLASSES = "drawer-wrapper"

data/lib/generators/ultimate_turbo_modal/templates/ultimate_turbo_modal.rb

@@ -27,4 +27,19 @@ UltimateTurboModal.configure do |config|
   #   d.overlay = true
   #   d.size = :md
   # end
+
+  # Turbo Confirm support. Enable it by adding `<%= modal_confirm_template %>`
+  # to your layout; these are the dialog's defaults.
+  # config.confirm do |c|
+  #   c.enabled = true
+  #   c.title = "Are you sure?"
+  #   c.accept_label = "OK"
+  #   c.cancel_label = "Cancel"
+  #   c.close_button = false
+  #   c.header = true
+  #   c.header_divider = false
+  #   c.footer_divider = false
+  #   c.padding = true
+  #   c.overlay = true
+  # end
 end

data/lib/ultimate_turbo_modal/base.rb

@@ -4,6 +4,7 @@ class UltimateTurboModal::Base < Phlex::HTML
   prepend Phlex::DeferredRenderWithMainContent
 
   attr_accessor :request, :allowed_click_outside_selector, :content_div_data
+  CONFIRM_TEMPLATE_ID = "utmr-confirm-template"
   VALID_DRAWER_SIZES = %i[xs sm md lg xl 2xl full].freeze
   VALID_DRAWER_POSITIONS = %i[right left].freeze
 
@@ -13,6 +14,7 @@ class UltimateTurboModal::Base < Phlex::HTML
   # @param close_button_data_action [String] `data-action` attribute for the close button
   # @param close_button_sr_label [String] Close button label for screen readers
   # @param close_on_submit [Boolean] Whether to dismiss on a successful, non-redirecting form submission
+  # @param confirm [Boolean] Internal: render the Turbo Confirm dialog template. Use the `modal_confirm_template` view helper instead.
   # @param drawer_position [Symbol, false] Internal: drawer position (:right, :left) or false for standard modal. Use the `drawer()` view helper instead.
   # @param footer_divider [Boolean] Whether to show a divider between the main content and the footer
   # @param header [Boolean] Whether to show a modal header
@@ -30,6 +32,7 @@ class UltimateTurboModal::Base < Phlex::HTML
     close_button_data_action: "modal#hideModal",
     close_button_sr_label: "Close modal",
     close_on_submit: nil,
+    confirm: false,
     drawer_position: false,
     footer_divider: nil,
     header: nil,
@@ -38,14 +41,23 @@ class UltimateTurboModal::Base < Phlex::HTML
     padding: nil,
     size: nil,
     content_div_data: nil,
+    accept_label: nil,
+    cancel_label: nil,
     request: nil, title: nil
   )
     @drawer = drawer_position
+    @confirm = confirm
     @request = request
 
     raise ArgumentError, "Cannot render a drawer into the drawer-modal frame (drawers cannot be opened from inside another drawer or modal)" if drawer? && stacked?
 
-    if drawer?
+    if confirm?
+      cfg = UltimateTurboModal.configuration.confirm_config
+      @drawer_size = nil
+      @accept_label = accept_label || cfg.accept_label
+      @cancel_label = cancel_label || cfg.cancel_label
+      title ||= cfg.title
+    elsif drawer?
       cfg = UltimateTurboModal.configuration.drawer_config
       @drawer_size = self.class.validate_drawer_size!(size || cfg.size)
     else
@@ -90,7 +102,11 @@ class UltimateTurboModal::Base < Phlex::HTML
   end
 
   def view_template(&block)
-    if turbo_frame?
+    if confirm?
+      # Inert until the JS clones it, so it can live in the layout on every
+      # page without a dialog (or its <style> tag) ever being active.
+      template(id: CONFIRM_TEMPLATE_ID) { render_confirm }
+    elsif turbo_frame?
       turbo_frame_tag(turbo_frame_name) do
         drawer? ? render_drawer(&block) : render_modal(&block)
       end
@@ -103,12 +119,16 @@ class UltimateTurboModal::Base < Phlex::HTML
     stacked? ? "drawer-modal" : "modal"
   end
 
+  # Both return nil so `<%= m.title do %>` writes nothing to the ERB buffer.
+  # The assignment's own value is a Proc, and ERB would print it.
   def title(&block)
     @title_block = block
+    nil
   end
 
   def footer(&block)
     @footer = block
+    nil
   end
 
   class << self
@@ -136,13 +156,16 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def close_on_submit? = !!@close_on_submit
 
+  def confirm? = !!@confirm
+
   def title_block? = !!@title_block
 
   def title? = !!@title
 
   def header? = !!@header
 
-  def footer? = @footer.present?
+  # A confirm's footer holds its own buttons rather than a user block.
+  def footer? = @footer.present? || confirm?
 
   def header_divider? = !!@header_divider && (@title_block.present? || title?)
 
@@ -168,13 +191,22 @@ class UltimateTurboModal::Base < Phlex::HTML
     frame == "drawer-modal" || frame == "modal-inner-stacked"
   end
 
-  def dialog_id = stacked? ? "modal-container-stacked" : "modal-container"
+  def dialog_id = scoped_id("modal-container")
 
-  def inner_id = stacked? ? "modal-inner-stacked" : "modal-inner"
+  def inner_id = scoped_id("modal-inner")
 
   # Suffix inner ids so they don't collide with the drawer's ids when the
-  # stacked modal is rendered inside the drawer's DOM.
-  def scoped_id(name) = stacked? ? "#{name}-stacked" : name
+  # stacked modal is rendered inside the drawer's DOM, or with an open
+  # modal's ids when the confirm dialog is layered over it.
+  def scoped_id(name) = "#{name}#{id_suffix}"
+
+  def id_suffix
+    return "-confirm" if confirm?
+    # A layout renders for Turbo Frame requests too, so this has to be checked
+    # after confirm? -- otherwise a confirm template rendered during a stacked
+    # request would claim the stacked modal's ids.
+    stacked? ? "-stacked" : ""
+  end
 
   def drawer_position = @drawer || :right
 
@@ -252,11 +284,42 @@ class UltimateTurboModal::Base < Phlex::HTML
     raw(safe(str))
   end
 
+  # Confirm dialogs render through the modal's markup, so every slot falls back
+  # to its MODAL_* class unless the flavor defines a CONFIRM_* override.
   def classes_for(suffix)
+    if confirm?
+      override = confirm_classes_for(suffix)
+      return override unless override.nil?
+    end
+
     prefix = drawer? ? "DRAWER" : "MODAL"
     self.class.const_get("#{prefix}_#{suffix}")
   end
 
+  # CONFIRM_* constants are optional. A flavor file written before confirm
+  # support returns nil here, which means shared slots fall back to MODAL_* and
+  # the confirm-only slots (body, actions, buttons) render unstyled rather than
+  # raising. `warn_missing_confirm_classes` is what tells the developer why.
+  def confirm_classes_for(suffix)
+    const = :"CONFIRM_#{suffix}"
+    self.class.const_defined?(const) ? self.class.const_get(const) : nil
+  end
+
+  # An unstyled confirm dialog looks like a bug in the gem rather than a stale
+  # flavor file, so say which it is. Once per flavor class, in development only.
+  def warn_missing_confirm_classes
+    return unless defined?(Rails) && Rails.env.local?
+    return if self.class.const_defined?(:CONFIRM_ACTIONS_CLASSES)
+    return if self.class.instance_variable_get(:@utmr_confirm_classes_warned)
+
+    self.class.instance_variable_set(:@utmr_confirm_classes_warned, true)
+    Rails.logger&.warn(
+      "[UltimateTurboModal] #{self.class.name} defines no CONFIRM_* classes, so the " \
+      "confirm dialog will render unstyled. Run `rails g ultimate_turbo_modal:update` " \
+      "to refresh your flavor file."
+    )
+  end
+
   def custom_drawer_size?
     @drawer_size.present? && !VALID_DRAWER_SIZES.include?(@drawer_size.to_s.to_sym)
   end
@@ -265,23 +328,35 @@ class UltimateTurboModal::Base < Phlex::HTML
     data_attributes = {
       controller: "modal",
       modal_target: "container",
-      modal_advance_url_value: advance_url,
-      modal_allowed_click_outside_selector_value: allowed_click_outside_selector,
-      modal_close_on_submit_value: close_on_submit?.to_s,
-      action: "turbo:submit-end->modal#submitEnd cancel->modal#cancelEvent mousedown->modal#dialogMousedown click->modal#dialogClicked",
+      action: dialog_actions,
       padding: padding?.to_s,
       title: title?.to_s,
       header: header?.to_s,
       close_button: close_button?.to_s,
       header_divider: header_divider?.to_s,
-      footer_divider: footer_divider?.to_s
+      footer_divider: footer_divider?.to_s,
+      overlay: overlay?.to_s
     }
 
+    role = nil
+    aria_attributes = {labelledby: scoped_id("modal-title-h")}
+
+    if confirm?
+      # Everything the controller reads from those three values is driven by an
+      # action a confirm doesn't bind, so they would only ever mislead a reader.
+      data_attributes[:utmr_confirm] = ""
+      role = "alertdialog"
+      aria_attributes[:describedby] = scoped_id("modal-body")
+    else
+      data_attributes[:modal_advance_url_value] = advance_url
+      data_attributes[:modal_allowed_click_outside_selector_value] = allowed_click_outside_selector
+      data_attributes[:modal_close_on_submit_value] = close_on_submit?.to_s
+    end
+
     if drawer?
       data_attributes[:drawer] = drawer_position.to_s
       data_attributes[:drawer_size] = (@drawer_size.presence || "md").to_s
     end
-    data_attributes[:overlay] = overlay?.to_s
 
     if defined?(Rails) && Rails.env.local?
       data_attributes[:utmr_version] = UltimateTurboModal::VERSION
@@ -297,17 +372,29 @@ class UltimateTurboModal::Base < Phlex::HTML
     dialog(id: dialog_id,
       class: dialog_classes,
       style: inline_style,
-      aria: {
-        labelledby: scoped_id("modal-title-h")
-      },
+      role: role,
+      aria: aria_attributes,
       data: data_attributes, &block)
   end
 
+  # A confirm is a decision, so a stray click on the backdrop must not answer it
+  # for the user. Leaving the outside-click actions off is the whole of it --
+  # Escape and the Cancel button still dismiss.
+  def dialog_actions
+    return "cancel->modal#cancelEvent" if confirm?
+
+    ["turbo:submit-end->modal#submitEnd",
+      "cancel->modal#cancelEvent",
+      "mousedown->modal#dialogMousedown",
+      "click->modal#dialogClicked"].join(" ")
+  end
+
   ## Modal-specific elements
 
   def modal_inner(&block)
     maybe_turbo_frame(inner_id) do
-      div(id: inner_id, class: self.class::MODAL_INNER_CLASSES, &block)
+      div(id: inner_id, class: self.class::MODAL_INNER_CLASSES,
+        data: {modal_target: "transition"}, &block)
     end
   end
 
@@ -336,7 +423,8 @@ class UltimateTurboModal::Base < Phlex::HTML
   end
 
   def drawer_panel(&block)
-    div(id: "drawer-panel", class: self.class::DRAWER_PANEL_CLASSES, data: {modal_target: "content"}, &block)
+    div(id: "drawer-panel", class: self.class::DRAWER_PANEL_CLASSES,
+      data: {modal_target: "content transition"}, &block)
   end
 
   def drawer_content(&block)
@@ -354,6 +442,51 @@ class UltimateTurboModal::Base < Phlex::HTML
     end
   end
 
+  ## Confirm-specific elements
+
+  def render_confirm
+    warn_missing_confirm_classes
+    # Unlike the modal and drawer templates, the styles go *inside* the dialog:
+    # the JS clones this one node out of the <template>, and the scroll-lock
+    # rule has to come along with it and leave with it.
+    dialog_element do
+      styles
+      confirm_inner do
+        confirm_content do
+          render_header
+          confirm_main
+          confirm_footer
+        end
+      end
+    end
+  end
+
+  def confirm_inner(&block)
+    div(id: inner_id, class: classes_for("INNER_CLASSES"), data: {modal_target: "transition"}, &block)
+  end
+
+  def confirm_content(&block)
+    div(id: scoped_id("modal-content"), class: classes_for("CONTENT_CLASSES"), data: {modal_target: "content"}, &block)
+  end
+
+  # Left empty: the JavaScript fills it from `data-turbo-confirm`.
+  def confirm_main
+    render_main do
+      div(id: scoped_id("modal-body"), class: confirm_classes_for("BODY_CLASSES"))
+    end
+  end
+
+  def confirm_footer
+    div(id: scoped_id("modal-footer"), class: classes_for("FOOTER_CLASSES")) do
+      div(class: confirm_classes_for("ACTIONS_CLASSES")) do
+        button(type: "button", class: confirm_classes_for("CANCEL_CLASSES"),
+          data: {utmr_confirm_action: "cancel"}) { @cancel_label }
+        button(type: "button", class: confirm_classes_for("ACCEPT_CLASSES"),
+          data: {utmr_confirm_action: "accept"}) { @accept_label }
+      end
+    end
+  end
+
   ## Shared rendering
 
   def render_main(&block)
@@ -363,10 +496,20 @@ class UltimateTurboModal::Base < Phlex::HTML
   def render_header
     div(id: scoped_id("modal-header"), class: classes_for("HEADER_CLASSES")) do
       render_title
-      drawer? ? drawer_close : modal_close
+      render_header_close
     end
   end
 
+  # Modals and drawers always render the close button and let the flavor hide it
+  # through `data-close-button`. A confirm leaves it out of the markup entirely
+  # instead, which keeps it out of the tab order and the accessibility tree --
+  # it has its own Cancel button, so it is off by default.
+  def render_header_close
+    return if confirm? && !close_button?
+
+    drawer? ? drawer_close : modal_close
+  end
+
   def render_title
     div(id: scoped_id("modal-title"), class: classes_for("TITLE_CLASSES")) do
       if @title_block.present?

data/lib/ultimate_turbo_modal/configuration.rb

@@ -14,7 +14,7 @@ module UltimateTurboModal
     :allowed_click_outside_selector, :allowed_click_outside_selector=, to: :configuration
 
   class Configuration
-    attr_reader :flavor, :modal_config, :drawer_config
+    attr_reader :flavor, :modal_config, :drawer_config, :confirm_config
     attr_accessor :allowed_click_outside_selector
 
     def initialize
@@ -22,6 +22,7 @@ module UltimateTurboModal
       @allowed_click_outside_selector = []
       @modal_config = ModalConfig.new
       @drawer_config = DrawerConfig.new
+      @confirm_config = ConfirmConfig.new
     end
 
     def modal
@@ -34,6 +35,11 @@ module UltimateTurboModal
       @drawer_config
     end
 
+    def confirm
+      yield(@confirm_config) if block_given?
+      @confirm_config
+    end
+
     def flavor=(flavor)
       raise ArgumentError, "Value must be a symbol." unless flavor.is_a?(Symbol) || flavor.is_a?(String)
       @flavor = flavor.to_sym
@@ -87,6 +93,32 @@ module UltimateTurboModal
       end
     end
 
+    # Defaults for the Turbo Confirm dialog. Every value here is a fallback:
+    # anything supplied per-element through `data-turbo-confirm` wins.
+    class ConfirmConfig < BaseConfig
+      attr_accessor :title, :accept_label, :cancel_label
+      attr_reader :enabled
+
+      boolean_option :enabled
+
+      # `advance` and `close_on_submit` are left unset: a confirm never pushes a
+      # URL and holds no form, and the dialog binds neither behavior.
+      def initialize
+        @enabled = true
+        # A confirm has its own Cancel button, and dividers chop up what is
+        # only ever a line or two of text.
+        @close_button = false
+        @header = true
+        @header_divider = false
+        @footer_divider = false
+        @padding = true
+        @overlay = true
+        @title = "Are you sure?"
+        @accept_label = "OK"
+        @cancel_label = "Cancel"
+      end
+    end
+
     class DrawerConfig < BaseConfig
       attr_reader :size, :position
 

data/lib/ultimate_turbo_modal/helpers/view_helper.rb

@@ -12,5 +12,36 @@ module UltimateTurboModal::Helpers
       size = UltimateTurboModal::Base.validate_drawer_size!(size || cfg.size)
       modal(drawer_position: position, size: size, **options, &block)
     end
+
+    # Renders the inert <template> the Turbo Confirm dialog is cloned from.
+    # Place it once in your layout: its presence is what enables the feature.
+    # Renders nothing when `config.confirm.enabled` is false, which turns the
+    # feature off without touching the layout.
+    def modal_confirm_template(**options)
+      return unless UltimateTurboModal.configuration.confirm_config.enabled
+
+      render(UltimateTurboModal.confirm(request:, **options))
+    end
+
+    # Builds the `data` attributes for an element that should prompt before
+    # acting. The options are JSON-encoded into `data-turbo-confirm` because
+    # Turbo rewrites a link with `data-turbo-method` into a synthetic form and
+    # copies only a fixed set of attributes across -- sibling
+    # `data-turbo-confirm-*` attributes on a link would be dropped.
+    #
+    #   link_to "Delete", post_path(post), data: modal_confirm(
+    #     "This can't be undone.", title: "Delete post?", accept: "Delete",
+    #     variant: :danger, turbo_method: :delete)
+    #
+    # `native: true` opts this one confirmation back out to `window.confirm`.
+    # On a link that is the only way to say it, since Turbo drops sibling
+    # `data-turbo-confirm-native` along with everything else.
+    def modal_confirm(body = nil, title: nil, accept: nil, cancel: nil, variant: nil, native: nil, **data)
+      payload = {title: title, body: body, accept: accept, cancel: cancel,
+                 variant: variant, native: native&.to_s}.compact
+      raise ArgumentError, "modal_confirm requires a body or at least one option" if payload.empty?
+
+      {turbo_confirm: payload.to_json}.merge(data)
+    end
   end
 end

data/lib/ultimate_turbo_modal.rb

@@ -16,6 +16,10 @@ module UltimateTurboModal
     modal_class.new(**)
   end
 
+  def confirm(**)
+    modal_class.new(confirm: true, **)
+  end
+
   def modal_class
     "UltimateTurboModal::Flavors::#{flavor.to_s.classify}".constantize
   rescue NameError

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 3.3.0
+  version: 3.4.0
 platform: ruby
 authors:
 - Carl Mercier