ultimate_turbo_modal 1.1.2 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af46e6d6c899d0fcf8054272b157d5e0f286e183e9c0b15c4e3b883df629d4f4
-  data.tar.gz: 91a99b9b60ea2892b2c030027d073218b4d751dd155a0bb84420bc6e60db628e
+  metadata.gz: 59ea5183cc13d4e04e3a9a63fad2f4c56d4656393b50af6888ffcc452ca47ee4
+  data.tar.gz: d36e383ba4dfd1affd9ebea7ed3c550773273ccf80b0cdcf9464cd892b083390
 SHA512:
-  metadata.gz: ccff10a4c4fee7a554c58632d9850507be533877333b0b8caadf2966fbc5244719f828fdb4507674668129c6bfebee1e7cb3e7a7fae5fc1b8238eae8fb5ea637
-  data.tar.gz: d636a2425ce101e4339cec01573e6a29aea861f36328bf4e6a8cd3513ccfe9a5979b4fa424fa69320a809ff94f80f4e28d3f39bbc7f6f6d6426217191fe9ea4c
+  metadata.gz: 0031bd558642b4f32643ce8a987e8dfa65cf9e2990590e21fd23926417f532619ac9498b69f86a98d10c7e5be04228015f216e0d222b15216b0afb91677beef2
+  data.tar.gz: 40b4e14d106a398016d88daa5dcfa0f77bc5432ba302d148f30597060a1f2b7559c8e3873866ebe4afbaba6f831b42c4182c19479bf222ba552fc2a3f4e357de

data/.rubocop.yml

@@ -1,3 +1,6 @@
+AllCops:
+  TargetRubyVersion: 3.2
+
 require:
   - standard
 inherit_gem:

data/CHANGELOG.md

@@ -1,4 +1,17 @@
-## [1.1.2] - 2023-11-01
+## [1.2.1] - 2023-11-11
+
+- Fix footer divider not showing
+
+## [1.2.0] - 2023-11-05
+
+- Dark mode support
+- Added header divider (configurable)
+- Added footer section with divider (configurable)
+- Tailwind flavor now uses data attributes to style elements
+- Updated look and feel
+- Simplified code a bit
+
+## [1.1.3] - 2023-11-01
 
 - Added configuration block
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ultimate_turbo_modal (1.1.2)
+    ultimate_turbo_modal (1.2.1)
       phlex-rails (>= 1.0, < 2.0)
       rails (>= 7)
       stimulus-rails

data/README.md

@@ -67,19 +67,22 @@ UltimateTurboModal.configure do |config|
   config.padding = true
   config.advance = true
   config.close_button = true
+  config.header = true
+  config.header_divider = true
+  config.footer_divider = true
 end
 ```
 
 5. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
 
-```js
+```javascript
 import setupUltimateTurboModal from "ultimate_turbo_modal";
 setupUltimateTurboModal(application);
 ```
 
 6. If using the Tailwind flavor, add the following to `tailwind.config.js`:
 
-```
+```javascript
 // For npm/yarn
 const { getUltimateTurboModalPath } = require('ultimate_turbo_modal/gemPath');
 
@@ -94,16 +97,17 @@ const { getUltimateTurboModalPath } = require('ultimate_turbo_modal/gemPath');
 
 and then in the `content` section, add `getUltimateTurboModalPath()` as follow:
 
-```
-  content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/javascript/**/*.js',
-    './app/views/**/*.{erb,haml,html,slim,rb}',
-    getUltimateTurboModalPath()
+```javascript
+content: [
+ './public/*.html',
+ './app/helpers/**/*.rb',
+ './app/javascript/**/*.js',
+ './app/views/**/*.{erb,haml,html,slim,rb}',
+ getUltimateTurboModalPath()
+]
 ```
 
-7. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
+1. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
 
  
  
@@ -153,6 +157,23 @@ When opening the modal, the URL in the URL bar will change to the URL of the vie
 
 If a URL is specified as a String, the browser history will advance, and the URL shown in the URL bad will be replaced by the URL specified.
 
+### `title`, default: `nil`
+
+Title to display in the modal header.
+
+### `header`, default: `true`
+
+Whether to display a modal header.
+
+### `header_divider`, default: `true`
+
+Whether to display a divider below the header.
+
+### `footer_divider`, default: `true`
+
+Whether to display a divider above the footer. The divider will not appear if no footer was specified.
+
+
 
 ### Example usage with options
 
@@ -182,7 +203,7 @@ In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to yo
 
 And the following code to `application.js`:
 
-```js
+```javascript
 addEventListener("turbo:before-frame-render", (event) => {
   event.detail.render = (currentElement, newElement) => {
     Idiomorph.morph(currentElement, newElement, {
@@ -192,6 +213,11 @@ addEventListener("turbo:before-frame-render", (event) => {
 })
 ```
 
+&nbsp;
+&nbsp;
+## Thanks
+
+Thanks to [@joeldrapper](https://github.com/KonnorRogers) and [@konnorrogers](https://github.com/KonnorRogers) for all the help!
 
 &nbsp;
 &nbsp;

data/lib/phlex/deferred_render_with_main_content.rb

@@ -0,0 +1,8 @@
+module Phlex
+  module DeferredRenderWithMainContent
+    def template(&)
+      output = capture(&)
+      super { unsafe_raw(output) }
+    end
+  end
+end

data/lib/ultimate_turbo_modal/base.rb

@@ -1,19 +1,29 @@
 class UltimateTurboModal::Base < Phlex::HTML
+  prepend Phlex::DeferredRenderWithMainContent
   # @param padding [Boolean] Whether to add padding around the modal content
   # @param close_button [Boolean] Whether to show a close button.
   # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
-  # @param advance_url [String] Override the URL to use when advancing the history
+  # @param header_divider [Boolean] Whether to show a divider between the header and the main content
+  # @param footer_divider [Boolean] Whether to show a divider between the main content and the footer
+  # @param title [String] The title of the modal
   # @param request [ActionDispatch::Request] The current Rails request object
   def initialize(
     padding: UltimateTurboModal.configuration.padding,
     close_button: UltimateTurboModal.configuration.close_button,
     advance: UltimateTurboModal.configuration.advance,
-    request: nil
+    header: UltimateTurboModal.configuration.header,
+    header_divider: UltimateTurboModal.configuration.header_divider,
+    footer_divider: UltimateTurboModal.configuration.footer_divider,
+    title: nil, request: nil
   )
     @padding = padding
     @close_button = close_button
     @advance = !!advance
     @advance_url = advance if advance.present? && advance.is_a?(String)
+    @title = title
+    @header = header
+    @header_divider = header_divider
+    @footer_divider = footer_divider
     @request = request
 
     unless self.class.include?(Turbo::FramesHelper)
@@ -25,55 +35,53 @@ class UltimateTurboModal::Base < Phlex::HTML
     end
   end
 
-  def template(&)
+  def template(&block)
     if turbo_frame?
-      turbo_frame_tag("modal") { modal(&) }
+      turbo_frame_tag("modal") do
+        modal(&block)
+      end
     elsif turbo_stream?
       Turbo::StreamsHelper.turbo_stream_action_tag("update", target: "modal") do
-        template { modal(&) }
+        modal(&block)
       end
     else
-      modal(&)
+      render block
     end
   end
 
+  def footer(&block)
+    @footer = block
+  end
+
   private
 
-  attr_accessor :request
+  attr_accessor :request, :title
 
-  def padding?
-    !!@padding
-  end
+  def padding? = !!@padding
 
-  def advance?
-    !!@advance
-  end
+  def close_button? = !!@close_button
 
-  def close_button?
-    !!@close_button
-  end
+  def title? = !!@title
 
-  def turbo_stream?
-    !!request&.format&.turbo_stream?
-  end
+  def header? = !!@header
 
-  def turbo_frame?
-    !!request&.headers&.key?("Turbo-Frame")
-  end
+  def footer? = @footer.present?
 
-  def turbo?
-    turbo_stream? || turbo_frame?
-  end
+  def header_divider? = !!@header_divider && title?
 
-  def advance_url
-    return nil unless advance?
-    @advance_url || request.original_url
-  end
+  def footer_divider? = !!@footer_divider && footer?
 
-  def include_if_defined(mod_str)
-    if defined?(mod.constantize) && !self.class.included_modules.include?(mod.constantize)
-      self.class.include mod.constantize
-    end
+  def turbo_stream? = !!request&.format&.turbo_stream?
+
+  def turbo_frame? = !!request&.headers&.key?("Turbo-Frame")
+
+  def turbo? = turbo_stream? || turbo_frame?
+
+  def advance? = !!@advance && !!@advance_url
+
+  def advance_url
+    return nil unless !!@advance
+    @advance_url || request&.original_url
   end
 
   def respond_to_missing?(method, include_private = false)

data/lib/ultimate_turbo_modal/configuration.rb

@@ -12,27 +12,30 @@ module UltimateTurboModal
     :advance, :advance=, :padding, :padding=, to: :configuration
 
   class Configuration
-    attr_reader :flavor, :close_button, :advance, :padding
+    attr_reader :flavor, :close_button, :advance, :padding, :header, :header_divider, :footer_divider
 
     def initialize
       @flavor = :tailwind
       @close_button = true
       @advance = true
       @padding = true
+      @header = true
+      @header_divider = true
+      @footer_divider = true
     end
 
     def flavor=(flavor)
-      raise ArgumentError.new("Flavor must be a symbol.") unless flavor.is_a?(Symbol) || flavor.is_a?(String)
+      raise ArgumentError.new("Value must be a symbol.") unless flavor.is_a?(Symbol) || flavor.is_a?(String)
       @flavor = flavor.to_sym
     end
 
     def close_button=(close_button)
-      raise ArgumentError.new("Close button must be a boolean.") unless [true, false].include?(close_button)
+      raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(close_button)
       @close_button = close_button
     end
 
     def advance=(advance)
-      raise ArgumentError.new("Advance must be a boolean.") unless [true, false].include?(advance)
+      raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(advance)
       @advance = advance
     end
 
@@ -40,9 +43,24 @@ module UltimateTurboModal
       if [true, false].include?(padding) || padding.is_a?(String)
         @padding = padding
       else
-        raise ArgumentError.new("Padding must be a boolean or a String.")
+        raise ArgumentError.new("Value must be a boolean or a String.")
       end
     end
+
+    def header=(header)
+      raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(header)
+      @header = header
+    end
+
+    def header_divider=(header_divider)
+      raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(header_divider)
+      @header_divider = header_divider
+    end
+
+    def footer_divider=(footer_divider)
+      raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(footer_divider)
+      @footer_divider = footer_divider
+    end
   end
 end
 

data/lib/ultimate_turbo_modal/flavors/tailwind.rb

@@ -1,27 +1,33 @@
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
+
     private
 
     def modal(&)
+      outer_divs do
+        div_content do
+          div_header
+          div_main(&)
+          div_footer if footer?
+        end
+      end
+    end
+
+    def outer_divs(&)
       div_dialog do
         div_overlay
         div_outer do
-          div_inner do
-            div_border do
-              button_close if close_button?
-              yield
-            end
-          end
+          div_inner(&)
         end
       end
     end
 
     def div_dialog(&)
       div(id: "modal-container",
-        class: "relative z-10",
+        class: "relative group",
         role: "dialog",
         aria: {
-          labeled_by: "modal-title",
+          labeled_by: "modal-title-h",
           modal: true
         },
         data: {
@@ -29,71 +35,91 @@ module UltimateTurboModal::Flavors
           modal_target: "container",
           modal_advance_url_value: advance_url,
           action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
-          transition_enter: "ease-out duration-300",
+          transition_enter: "ease-out duration-100",
           transition_enter_start: "opacity-0",
           transition_enter_end: "opacity-100",
-          transition_leave: "ease-in duration-200",
+          transition_leave: "ease-in duration-50",
           transition_leave_start: "opacity-100",
-          transition_leave_end: "opacity-0"
+          transition_leave_end: "opacity-0",
+          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
         }, &)
     end
 
-    def div_overlay(&)
+    def div_overlay
       div(id: "modal-overlay",
-        class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity",
-        data: {
-          modal_target: "overlay",
-          action: "click->modal#outsideModalClicked"
-        })
+        class: "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80 z-40")
     end
 
     def div_outer(&)
       div(id: "modal-outer",
-        class: "fixed inset-0 z-10 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4",
-        data: {
-          modal_target: "modal"
-        }, &)
+        class: "fixed inset-0 z-50 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4", &)
     end
 
     def div_inner(&)
       div(id: "modal-inner",
-        class: "flex min-h-full items-center justify-center p-1 sm:p-4",
-        data: {
-          modal_target: "innerModal"
-        }, &)
+        class: "flex min-h-full items-center justify-center p-1 sm:p-4", &)
+    end
+
+    def div_content(&)
+      div(id: "modal-content",
+        class: "relative transform overflow-hidden rounded-lg bg-white text-left shadow transition-all
+                sm:my-8 sm:max-w-3xl dark:bg-gray-800 dark:text-white",
+        data: {modal_target: "content"}, &)
+    end
+
+    def div_main(&)
+      div(id: "modal-main", class: "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2", &)
     end
 
-    def div_border(&)
-      klass = "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-3xl"
-      klass = "#{klass} p-2 sm:p-4 md:p-6" if @padding == true
-      klass = "#{klass} #{@padding}" if @padding.is_a?(String)
-      div(id: "modal-border", class: klass, &)
+    def div_header(&)
+      div(id: "modal-header", class: "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute") do
+        div_title
+        button_close
+      end
     end
 
-    def button_close(&)
-      div(class: "absolute top-3 right-3") do
-        button(type: "button",
-          aria: {label: "close"},
-          class: "ml-auto inline-flex items-center rounded bg-transparent p-1 text-sm text-gray-400 bg-white bg-opacity-20 hover:bg-gray-100 hover:bg-opacity-70 hover:text-gray-900",
-          data: {
-            action: "modal#hideModal"
-          }) { icon_close }
+    def div_title
+      div(id: "modal-title", class: "pl-4") do
+        h3(id: "modal-title-h", class: "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white") { @title }
       end
     end
 
+    def div_footer
+      div(id: "modal-footer", class: "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]:border-t") do
+        render @footer
+      end
+    end
+
+    def button_close
+      div(id: "modal-close", class: "mr-4") do
+        close_button_tag do
+          icon_close
+          span(class: "sr-only") { "Close modal" }
+        end
+      end
+    end
+
+    def close_button_tag(&)
+      button(type: "button",
+        aria: {label: "close"},
+        class: "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",
+        data: {
+          action: "modal#hideModal"
+        }, &)
+    end
+
     def icon_close
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewbox: "0 0 24 24",
-        stroke_width: "1.5",
-        stroke: "currentColor",
-        class: "w-5 h-5"
-      ) do |s|
+      svg(class: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20") do |s|
         s.path(
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          d: "M6 18L18 6M6 6l12 12"
+          fill_rule: "evenodd",
+          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+          clip_rule: "evenodd"
         )
       end
     end

data/lib/ultimate_turbo_modal/flavors/vanilla.rb

@@ -1,17 +1,23 @@
 module UltimateTurboModal::Flavors
   class Vanilla < UltimateTurboModal::Base
+
     private
 
     def modal(&)
+      outer_divs do
+        div_content do
+          div_header
+          div_main(&)
+          div_footer if footer?
+        end
+      end
+    end
+
+    def outer_divs(&)
       div_dialog do
         div_overlay
-        div_outer_container do
-          div_inner_container do
-            div_border do
-              button_close if close_button?
-              yield
-            end
-          end
+        div_outer do
+          div_inner(&)
         end
       end
     end
@@ -21,7 +27,7 @@ module UltimateTurboModal::Flavors
         class: "modal-container",
         role: "dialog",
         aria: {
-          labeled_by: "modal-title",
+          labeled_by: "modal-title-h",
           modal: true
         },
         data: {
@@ -29,69 +35,84 @@ module UltimateTurboModal::Flavors
           modal_target: "container",
           modal_advance_url_value: advance_url,
           action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
-          transition_enter: "ease-out duration-300",
+          transition_enter: "ease-out duration-100",
           transition_enter_start: "opacity-0",
           transition_enter_end: "opacity-100",
-          transition_leave: "ease-in duration-200",
+          transition_leave: "ease-in duration-50",
           transition_leave_start: "opacity-100",
-          transition_leave_end: "opacity-0"
+          transition_leave_end: "opacity-0",
+          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
         }, &)
     end
 
-    def div_overlay(&)
-      div(id: "modal-overlay",
-        class: "modal-overlay",
-        data: {
-          modal_target: "overlay",
-          action: "click->modal#outsideModalClicked"
-        })
+    def div_overlay
+      div(id: "modal-overlay", class: "modal-overlay")
     end
 
-    def div_outer_container(&)
-      div(id: "modal-outer",
-        class: "modal-outer",
-        data: {
-          modal_target: "modal"
-        }, &)
+    def div_outer(&)
+      div(id: "modal-outer", class: "modal-outer", &)
     end
 
-    def div_inner_container(&)
-      div(id: "modal-inner",
-        class: "modal-inner",
-        data: {
-          modal_target: "innerModal"
-        }, &)
+    def div_inner(&)
+      div(id: "modal-inner", class: "modal-inner", &)
+    end
+
+    def div_content(&)
+      div(id: "modal-content", class: "modal-content", data: {modal_target: "content"}, &)
+    end
+
+    def div_main(&)
+      div(id: "modal-main", class: "modal-main", &)
     end
 
-    def div_border(&)
-      klass = "modal-border"
-      klass = "#{klass} modal-padding" if @padding == true
-      klass = "#{klass} #{@padding}" if @padding.is_a?(String)
-      div(id: "modal-border", class: klass, &)
+    def div_header(&)
+      div(id: "modal-header", class: "modal-header") do
+        div_title
+        button_close
+      end
     end
 
-    def button_close(&)
-      div(class: "modal-close") do
-        button(type: "button",
-          aria: {label: "close"},
-          data: {
-            action: "modal#hideModal"
-          }) { icon_close }
+    def div_title
+      div(id: "modal-title", class: "modal-title") do
+        h3(id: "modal-title-h", class: "modal-title-h") { @title }
       end
     end
 
+    def div_footer
+      div(id: "modal-footer", class: "modal-footer") do
+        render @footer
+      end
+    end
+
+    def button_close
+      div(id: "modal-close", class: "modal-close") do
+        close_button_tag do
+          icon_close
+          span(class: "sr-only") { "Close modal" }
+        end
+      end
+    end
+
+    def close_button_tag(&)
+      button(type: "button",
+        aria: {label: "close"},
+        class: "modal-close-button",
+        data: {
+          action: "modal#hideModal"
+        }, &)
+    end
+
     def icon_close
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewbox: "0 0 24 24",
-        stroke_width: "1.5",
-        stroke: "currentColor",
-      ) do |s|
+      svg(class: "modal-close-icon", fill: "currentColor", viewBox: "0 0 20 20") do |s|
         s.path(
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          d: "M6 18L18 6M6 6l12 12"
+          fill_rule: "evenodd",
+          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+          clip_rule: "evenodd"
         )
       end
     end

data/lib/ultimate_turbo_modal/helpers/view_helper.rb

@@ -1,9 +1,7 @@
 module UltimateTurboModal::Helpers
   module ViewHelper
-    def modal(**)
-      render UltimateTurboModal.new(request:, **) do
-        yield
-      end
+    def modal(**, &)
+      render(UltimateTurboModal.new(request:, **), &)
     end
   end
 end

data/lib/ultimate_turbo_modal/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module UltimateTurboModal
-  VERSION = "1.1.2"
+  VERSION = "1.2.1"
 end

data/lib/ultimate_turbo_modal.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative "ultimate_turbo_modal/version"
+require "phlex/deferred_render_with_main_content"
 require "ultimate_turbo_modal/configuration"
 require "ultimate_turbo_modal/railtie"
 require "ultimate_turbo_modal/base"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 1.1.2
+  version: 1.2.1
 platform: ruby
 authors:
 - Carl Mercier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-02 00:00:00.000000000 Z
+date: 2023-11-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails
@@ -90,6 +90,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- lib/phlex/deferred_render_with_main_content.rb
 - lib/ultimate_turbo_modal.rb
 - lib/ultimate_turbo_modal/base.rb
 - lib/ultimate_turbo_modal/configuration.rb