ultimate_turbo_modal 3.2.1 → 3.4.0

data/app/assets/stylesheets/ultimate_turbo_modal.css

@@ -0,0 +1,610 @@
+/* ========================================
+   All styles scoped to dialog.utmr to
+   prevent conflicts with end-user CSS.
+   ======================================== */
+
+dialog.utmr {
+  .hidden {
+    display: none;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ========================================
+     Dialog reset (shared modal + drawer)
+     ======================================== */
+
+  &.modal-container,
+  &.drawer-container {
+    position: fixed;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    max-width: 100vw;
+    max-height: 100dvh;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* ========================================
+     Modal styles
+     ======================================== */
+
+  /* Backdrop transitions */
+  &.modal-container::backdrop {
+    opacity: 0;
+    transition: opacity 300ms ease-out;
+  }
+  &.modal-container[data-overlay="true"]::backdrop {
+    background-color: rgba(17, 24, 39, 0.7);
+  }
+  &.modal-container[data-overlay="false"]::backdrop {
+    background-color: transparent;
+  }
+  &.modal-container[data-overlay="true"][data-entered]::backdrop {
+    opacity: 1;
+  }
+  &.modal-container[data-closing]::backdrop {
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
+  }
+
+  /* Modal enter/leave transitions */
+  &.modal-container:not([data-enter-ready]):not([data-entered]) .modal-inner {
+    visibility: hidden;
+  }
+
+  .modal-inner {
+    display: flex;
+    padding: 0.25rem;
+    padding-top: 10vh;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 100%;
+    opacity: 0;
+    translate: 0 1rem;
+    transition: opacity 300ms ease-out, translate 300ms ease-out, scale 300ms ease-out;
+
+    @media (min-width: 640px) {
+      padding: 1rem;
+      padding-bottom: 10vh;
+      align-items: center;
+      translate: none;
+      scale: 0.95;
+    }
+  }
+
+  &.modal-container[data-entered] .modal-inner {
+    opacity: 1;
+    translate: none;
+    scale: 1;
+  }
+
+  &.modal-container[data-closing] .modal-inner {
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
+  }
+
+  /* Modal conditional styling via data attributes */
+  &.modal-container {
+    &[data-header="false"] .modal-header {
+      position: absolute;
+    }
+
+    &[data-header-divider="true"] .modal-header {
+      border-bottom-width: 1px;
+    }
+
+    &[data-footer-divider="true"] .modal-footer {
+      border-top-width: 1px;
+    }
+
+    &[data-padding="true"] .modal-main {
+      padding: 1rem;
+      padding-top: 0.5rem;
+    }
+
+    .modal-main {
+      overflow-y: auto;
+      max-height: 75vh;
+    }
+
+    &[data-title="false"] .modal-title-h {
+      display: none;
+    }
+
+    &[data-close-button="false"] .modal-close {
+      display: none;
+    }
+  }
+
+  .modal-content {
+    overflow: hidden;
+    position: relative;
+    background-color: #ffffff;
+    transition-property: all;
+    text-align: left;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    max-height: 100vh;
+
+    @media (min-width: 640px) {
+      max-width: 48rem;
+    }
+  }
+
+  .modal-header {
+    display: flex;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  .modal-title {
+    line-height: 1.75rem;
+    font-weight: 600;
+    padding-left: 1rem;
+  }
+
+  .modal-footer {
+    display: flex;
+    padding: 1rem;
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .modal-close {
+    margin-right: 1rem;
+  }
+
+  .modal-close-button {
+    display: inline-flex;
+    padding: 0.375rem;
+    margin-left: auto;
+    background-color: transparent;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    align-items: center;
+    border-radius: 0.5rem;
+  }
+
+  .modal-close-icon {
+    width: 1.25rem;
+    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
+     ======================================== */
+
+  /* Drawer backdrop transitions */
+  &.drawer-container::backdrop {
+    background: transparent;
+    opacity: 0;
+    transition: opacity 300ms ease-out;
+  }
+  &.drawer-container[data-overlay="true"]::backdrop {
+    background-color: rgba(17, 24, 39, 0.7);
+  }
+  &.drawer-container[data-overlay="true"][data-entered]::backdrop {
+    opacity: 1;
+  }
+  &.drawer-container[data-closing]::backdrop {
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
+  }
+
+  /* Drawer sizing via data attributes */
+  &.drawer-container {
+    --utmr-gutter: 2.5rem;
+
+    @media (min-width: 640px) {
+      --utmr-gutter: 4rem;
+    }
+  }
+  &.drawer-container[data-drawer-size="xs"] { --utmr-w: 16rem; }
+  &.drawer-container[data-drawer-size="sm"] { --utmr-w: 20rem; }
+  &.drawer-container[data-drawer-size="md"],
+  &.drawer-container[data-drawer-size=""] { --utmr-w: 24rem; }
+  &.drawer-container[data-drawer-size="lg"] { --utmr-w: 28rem; }
+  &.drawer-container[data-drawer-size="xl"] { --utmr-w: 42rem; }
+  &.drawer-container[data-drawer-size="2xl"] { --utmr-w: 56rem; }
+  &.drawer-container[data-drawer-size="full"] { --utmr-w: 100vw; }
+
+  /* Drawer direction */
+  &.drawer-container[data-drawer="left"] { --utmr-hide: -100% 0; }
+  &.drawer-container[data-drawer="left"] .drawer-panel { left: 0; }
+  &.drawer-container[data-drawer="right"] { --utmr-hide: 100% 0; }
+  &.drawer-container[data-drawer="right"] .drawer-panel { right: 0; }
+
+  /* Drawer panel transitions */
+  .drawer-panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: min(var(--utmr-w), calc(100vw - var(--utmr-gutter)));
+    translate: var(--utmr-hide);
+    transition: translate 250ms ease-in-out;
+    will-change: translate;
+
+    @media (min-width: 640px) {
+      transition-duration: 400ms;
+    }
+  }
+  &.drawer-container:not([data-enter-ready]):not([data-entered]) .drawer-panel {
+    visibility: hidden;
+  }
+  &.drawer-container[data-entered] .drawer-panel {
+    translate: 0;
+  }
+  &.drawer-container[data-closing] .drawer-panel {
+    translate: var(--utmr-hide);
+  }
+
+  /* Drawer conditional styling via data attributes */
+  &.drawer-container {
+    &[data-header="false"] .drawer-header {
+      display: none;
+    }
+
+    &[data-header-divider="true"] .drawer-header {
+      padding-bottom: 1rem;
+      border-bottom-width: 1px;
+    }
+
+    &[data-footer-divider="true"] .drawer-footer {
+      border-top-width: 1px;
+    }
+
+    &[data-padding="true"] .drawer-main {
+      padding: 1rem;
+      padding-top: 0.5rem;
+    }
+
+    &[data-title="false"] .drawer-title-h {
+      display: none;
+    }
+
+    &[data-close-button="false"] .drawer-close {
+      display: none;
+    }
+  }
+
+  .drawer-wrapper {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .drawer-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #ffffff;
+    box-shadow:
+      0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  }
+  &.drawer-container[data-padding="true"] .drawer-content {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .drawer-header {
+    display: flex;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+
+    @media (min-width: 640px) {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  .drawer-title {
+    line-height: 1.75rem;
+    font-weight: 600;
+  }
+
+  .drawer-main {
+    position: relative;
+    flex: 1;
+    overflow-y: auto;
+  }
+  &.drawer-container[data-padding="true"] .drawer-main {
+    margin-top: 1.5rem;
+  }
+
+  .drawer-footer {
+    display: flex;
+    flex-shrink: 0;
+    padding: 1rem;
+
+    @media (min-width: 640px) {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  .drawer-close {
+    margin-left: 0.75rem;
+    display: flex;
+    height: 1.75rem;
+    align-items: center;
+  }
+
+  .drawer-close-button {
+    position: relative;
+    display: inline-flex;
+    padding: 0.375rem;
+    background-color: transparent;
+    border-radius: 0.375rem;
+    align-items: center;
+  }
+
+  .drawer-close-hit-area {
+    position: absolute;
+    inset: -0.625rem;
+  }
+
+  .drawer-close-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+/* ========================================
+   Dark / light mode (requires ancestor
+   context so must stay outside dialog.utmr)
+   ======================================== */
+
+.dark dialog.utmr {
+  &::backdrop {
+    background-color: rgba(17, 24, 39, 0.8);
+  }
+
+  .modal-header,
+  .modal-footer,
+  .drawer-header,
+  .drawer-footer {
+    border-color: #4B5563;
+  }
+
+  .modal-content,
+  .drawer-content {
+    background-color: #1F2937;
+    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,
+  .drawer-close-icon:hover {
+    background-color: #6B7280;
+    color: #ffffff;
+  }
+}
+
+:not(.dark) dialog.utmr {
+  .confirm-body {
+    color: #6B7280;
+  }
+
+  .confirm-header,
+  .confirm-footer {
+    border-color: #E5E7EB;
+  }
+
+  .modal-close-button,
+  .modal-close-icon,
+  .drawer-close-button,
+  .drawer-close-icon {
+    color: #9CA3AF;
+
+    &:hover {
+      color: #111827;
+      background-color: #E5E7EB;
+    }
+  }
+}

data/lib/generators/ultimate_turbo_modal/base.rb

@@ -86,6 +86,50 @@ module UltimateTurboModal
         end
       end
 
+      # The vanilla flavor needs a stylesheet; the other flavors are styled
+      # entirely by the classes defined in their flavor file.
+      def add_vanilla_stylesheet
+        layout_path = rails_root_join("app", "views", "layouts", "application.html.erb")
+        link_tag = "<%= stylesheet_link_tag \"#{package_name}\", \"data-turbo-track\": \"reload\" %>\n"
+
+        say "\nAttempting to add the vanilla stylesheet to #{layout_path}...", :yellow
+
+        unless File.exist?(layout_path)
+          say "❌ Layout file not found at #{layout_path}.", :red
+          say "   Please manually add the following line inside the <head> of your main layout:", :yellow
+          say "   #{link_tag.strip}\n", :cyan
+          return
+        end
+
+        file_content = File.read(layout_path)
+
+        if file_content.match?(/stylesheet_link_tag\s+["']#{Regexp.escape(package_name)}["']/)
+          say "⏩ Stylesheet tag already exists.", :blue
+          return
+        end
+
+        # Insert before the first existing stylesheet_link_tag. Where the two
+        # stylesheets collide at equal specificity the later one wins, so the
+        # defaults have to load first for the app's own styles to override them.
+        existing_tag = file_content.scan(/^.*stylesheet_link_tag.*\n/).first
+
+        if existing_tag
+          insert_into_file layout_path, "#{indentation_of(existing_tag)}#{link_tag}", before: existing_tag
+          say "✅ Added stylesheet tag to the layout.", :green
+        elsif file_content.match?(%r{</head>})
+          insert_into_file layout_path, "    #{link_tag}", before: %r{^\s*</head>}
+          say "✅ Added stylesheet tag before </head>.", :green
+        else
+          say "❌ Could not find a <head> section in #{layout_path}.", :red
+          say "   Please manually add the following line inside the <head> of your main layout:", :yellow
+          say "   #{link_tag.strip}\n", :cyan
+        end
+      end
+
+      def indentation_of(line)
+        line[/\A[ \t]*/]
+      end
+
       def uses_importmaps?
         File.exist?(rails_root_join("config", "importmap.rb"))
       end

data/lib/generators/ultimate_turbo_modal/install_generator.rb

@@ -108,6 +108,11 @@ module UltimateTurboModal
         end
       end
 
+      # Step 5: Add the stylesheet to the layout (vanilla flavor only)
+      def setup_stylesheet
+        add_vanilla_stylesheet if @framework == "vanilla"
+      end
+
       def copy_initializer_and_flavor
         say "\nCreating initializer for `#{@framework}` flavor...", :green
         copy_file "ultimate_turbo_modal.rb", "config/initializers/ultimate_turbo_modal.rb"
@@ -122,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 = ""