ultimate_turbo_modal 1.4.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d0ae24b41414e4d9419260f7de74789e488a6e0d0a961749e10c3f6ca70ecaf
-  data.tar.gz: ef606673fe357af79d46760a2c59252da8052fcd6fdbce56fdf264cd015fe460
+  metadata.gz: a3b7775a51eebbcb891533ad98c37aa6399017092a1ee4218c74e8d2e552880b
+  data.tar.gz: 8eb9ede61100f91d1e0f716e0cba3a477d224431b84d70bc36fb6e1d62132bfb
 SHA512:
-  metadata.gz: '08ded5bfa9b93dac612301c125c9acd95fae727856154c861971917f3751cd1e11d15f49c9a3b2c00c70ac468c0e19f92a5d69a59158c63d5a826c70322478b2'
-  data.tar.gz: 23641e005618db6c5b09cfe64fbc8dad905930ae38bf04cfefcff722d681fc8423c7d39cb70d1cccb6d11743ff4cc9aa8c94c7b13a96d4e82b488d7e0a8fe240
+  metadata.gz: ebba9d4ae554dbceed25f2064b58ccb44ccfe5a98f826d57d0c15ae7d491d4b81348b9de8b4191f7eb807358b48b62a376297096c1fece1c9ab56e3331e00a11
+  data.tar.gz: b1d72d8ceba435dc770e219536a2dfbdd1613809fb4a65f10c25c1fa22829f88ef38b6b7f10442d07f8162dd4fa59aa534d095d21d9a1564f9098609bc71d490

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.5.0] - 2023-11-28
+
+- Allow whitelisting out-of-modal CSS selectors to not dismiss modal when clicked
+
+## [1.4.1] - 2023-11-26
+
+- Make Tailwind transition smoother on pages with multiple z-index
+
 ## [1.4.0] - 2023-11-23
 
 - Added ability to specify custom `data-action` for the close button.

data/Gemfile.lock

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

data/README.md

@@ -26,6 +26,7 @@ It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It
 - Support for long, scrollable modals
 - Properly locks the background page when scrolling a long modal
 - Click outside the modal to dismiss
+- Option to whitelist CSS selectors that won't dismiss the modal when clicked outside the modal (ie: datepicker)
 - Keyboard control; ESC to dismiss
 - Automatic (or not) close button
 
@@ -70,6 +71,7 @@ UltimateTurboModal.configure do |config|
   config.header = true
   config.header_divider = true
   config.footer_divider = true
+  config.allowed_click_outside_selector = nil
 end
 ```
 
@@ -173,6 +175,11 @@ Whether to display a divider below the header.
 
 Whether to display a divider above the footer. The divider will not appear if no footer was specified.
 
+### `allowed_click_outside_selector`, default: `nil`
+
+A string of CSS selectors that can be clicked outside of the modal without dismissing the modal. Useful for elements
+such as datepickers.
+
 ### Example usage with options
 
 ```erb

data/lib/ultimate_turbo_modal/base.rb

@@ -2,37 +2,40 @@
 
 class UltimateTurboModal::Base < Phlex::HTML
   prepend Phlex::DeferredRenderWithMainContent
-  # @param padding [Boolean] Whether to add padding around the modal content
+  # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
+  # @param allowed_click_outside_selector [String] CSS selectors for elements that are allowed to be clicked outside of the modal without dismissing the modal
   # @param close_button [Boolean] Whether to show a close button
-  # @param close_button_sr_label [String] Close button label for screen readers
   # @param close_button_data_action [String] `data-action` attribute for the close button
-  # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
-  # @param header_divider [Boolean] Whether to show a divider between the header and the main content
+  # @param close_button_sr_label [String] Close button label for screen readers
   # @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 header_divider [Boolean] Whether to show a divider between the header and the main content
+  # @param padding [Boolean] Whether to add padding around the modal content
   # @param request [ActionDispatch::Request] The current Rails request object
+  # @param title [String] The title of the modal
   def initialize(
-    padding: UltimateTurboModal.configuration.padding,
+    advance: UltimateTurboModal.configuration.advance,
+    allowed_click_outside_selector: UltimateTurboModal.configuration.allowed_click_outside_selector,
     close_button: UltimateTurboModal.configuration.close_button,
-    close_button_sr_label: "Close modal",
     close_button_data_action: "modal#hideModal",
-    advance: UltimateTurboModal.configuration.advance,
+    close_button_sr_label: "Close modal",
+    footer_divider: UltimateTurboModal.configuration.footer_divider,
     header: UltimateTurboModal.configuration.header,
     header_divider: UltimateTurboModal.configuration.header_divider,
-    footer_divider: UltimateTurboModal.configuration.footer_divider,
-    title: nil, request: nil
+    padding: UltimateTurboModal.configuration.padding,
+    request: nil, title: nil
   )
-    @padding = padding
-    @close_button = close_button
-    @close_button_sr_label = close_button_sr_label
-    @close_button_data_action = close_button_data_action
     @advance = !!advance
     @advance_url = advance if advance.present? && advance.is_a?(String)
-    @title = title
+    @allowed_click_outside_selector = allowed_click_outside_selector
+    @close_button = close_button
+    @close_button_data_action = close_button_data_action
+    @close_button_sr_label = close_button_sr_label
+    @footer_divider = footer_divider
     @header = header
     @header_divider = header_divider
-    @footer_divider = footer_divider
+    @padding = padding
     @request = request
+    @title = title
 
     unless self.class.include?(Turbo::FramesHelper)
       self.class.include Turbo::FramesHelper
@@ -67,7 +70,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   private
 
-  attr_accessor :request
+  attr_accessor :request, :allowed_click_outside_selector
 
   def padding? = !!@padding
 
@@ -81,7 +84,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def footer? = @footer.present?
 
-  def header_divider? = !!@header_divider && (@title_block || title?)
+  def header_divider? = !!@header_divider && (@title_block.present? || title?)
 
   def footer_divider? = !!@footer_divider && footer?
 
@@ -135,6 +138,7 @@ class UltimateTurboModal::Base < Phlex::HTML
         controller: "modal",
         modal_target: "container",
         modal_advance_url_value: advance_url,
+        modal_allowed_click_outside_selector_value: allowed_click_outside_selector,
         action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
         transition_enter: "ease-out duration-100",
         transition_enter_start: "opacity-0",

data/lib/ultimate_turbo_modal/configuration.rb

@@ -11,10 +11,12 @@ module UltimateTurboModal
   end
 
   delegate :flavor, :flavor=, :close_button, :close_button=,
-    :advance, :advance=, :padding, :padding=, to: :configuration
+    :advance, :advance=, :padding, :padding=,
+    :allowed_click_outside_selector, :allowed_click_outside_selector=, to: :configuration
 
   class Configuration
     attr_reader :flavor, :close_button, :advance, :padding, :header, :header_divider, :footer_divider
+    attr_accessor :allowed_click_outside_selector
 
     def initialize
       @flavor = :tailwind
@@ -24,6 +26,7 @@ module UltimateTurboModal
       @header = true
       @header_divider = true
       @footer_divider = true
+      @allowed_click_outside_selector = []
     end
 
     def flavor=(flavor)

data/lib/ultimate_turbo_modal/flavors/tailwind.rb

@@ -2,9 +2,9 @@
 
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
-    DIV_DIALOG_CLASSES = "relative group"
-    DIV_OVERLAY_CLASSES = "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80 z-40"
-    DIV_OUTER_CLASSES = "fixed inset-0 z-50 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4"
+    DIV_DIALOG_CLASSES = "relative group z-50"
+    DIV_OVERLAY_CLASSES = "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80"
+    DIV_OUTER_CLASSES = "fixed inset-0 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4"
     DIV_INNER_CLASSES = "flex min-h-full items-center justify-center p-1 sm:p-4"
     DIV_CONTENT_CLASSES = "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"
     DIV_MAIN_CLASSES = "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2"

data/lib/ultimate_turbo_modal/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.5.0
 platform: ruby
 authors:
 - Carl Mercier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-24 00:00:00.000000000 Z
+date: 2023-11-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails