stimulus-overlay-helpers 0.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c113cea5f91884717cb591c9686670435effb6499701309e81ea7adb468d6cf5
-  data.tar.gz: 769033738a88a02780092c3512f9e8a9a7a92eb4ce17f6e32ebcfb44d1cd016f
+  metadata.gz: 5011229ca32b328095ee8199121506da0aeda54afddde3e3f6bf07df8352f22e
+  data.tar.gz: 634dac393fccc55dd395b92f1173f0133448910cd33946cf4be66e1da858dc5b
 SHA512:
-  metadata.gz: 4ef640030a0bcc6b26cd06660a3c26ca4275a9ad3f4be129637d2b1daa07bf50a5f55ec17a0044209c8b9c87ce0bb203677204e6d5ec53c8bfecd925622d9555
-  data.tar.gz: d5e374ce4018c93b71daa7fa2bc439b3befbf46b7b76afcda5783d3038318a3844882caf207c012a8e045023c72b442f6471f64b53691e8d6619a0884249c40a
+  metadata.gz: e538d62c39cda1f269ec99366b0f42d6ab7ee30b79ae2a6306126fa267218e9916de0937ff4a65960e4147644c1901a99d4137f1d0712a1972be6ef599ddd555
+  data.tar.gz: 252cda43827e3659b3bd9b3c62d0695a3e0a3be324b2d530929c5a3fd5979168120ac077a366678e97879fad2bd8b64a2cbc97c1a0c0330bc6889465adc17328

data/README.md

@@ -32,6 +32,20 @@ StimulusDropdown.configure do |config|
 end
 ```
 
+**Z-index issues / `panel_at_place` option**
+
+If an overlay should appear above all other elements, it should be rendered close to the root level because `z-index` is always relative to the current stacking context.
+
+By default, unless `true` is passed to the helper’s `panel_at_place` argument, the overlay is rendered via `yield :overlays_box` in the layout:
+
+
+```haml
+#overlays-box
+  = yield :overlays_box
+```
+
+This matches the behavior of the [Svelte overlays from `@csedl/hotwire-svelte-helpers`](https://www.npmjs.com/package/@csedl/hotwire-svelte-helpers).
+
 ## Usage Examples
 
 ```haml

data/lib/stimulus_overlay_helpers/view_helpers.rb

@@ -2,11 +2,11 @@ module StimulusOverlayHelpers
   module ViewHelpers
     #== dropdown helper
     # @param [button_content] Proc or String for content of the button element
-    # @param [panel_at_place] true (default: false) => it would render the panel into content_for(:dropdown_panels) on sticky parts (left-menu / top-bar) panels should be at place for avoiding that the panel would scroll with the content
+    # @param [panel_at_place] true (default: false) => it would render the panel into content_for(:overlays_box) on sticky parts (left-menu / top-bar) panels should be at place for avoiding that the panel would scroll with the content
     # @block [panel_content] Panel Content as block
     # what it does:
     # * a) wraps the button_content in element like: %button{ data: { controller: 'dropdown', ... } } and renders it at place
-    # * b) wraps the panel_content in a corresponding element and renders it to the dropdown_panels-box (because of z-index-hierarchy)
+    # * b) wraps the panel_content in a corresponding element and renders it to the overlays_box (because of z-index-hierarchy)
     # * c) the stimulus controller always adds the class .dropdown-panel to the panel
     def dropdown(button_content, title = nil, options = {}, &panel_content)
       if title.is_a?(Hash)
@@ -26,7 +26,7 @@ module StimulusOverlayHelpers
 
       button_options = options.dup
       button_options[:class] = [options[:class], 'dropdown-button'].compact.join(' ')
-      button_options = button_options.merge(data: { controller: 'csedl-dropdown', panel_id: id })
+      button_options = button_options.merge(data: { controller: 'hotwire-svelte-helpers-dropdown', panel_id: id })
 
       button_content = capture(&button_content) if button_content.is_a?(Proc)
       btn = content_tag(:div, button_content, button_options)
@@ -57,11 +57,64 @@ module StimulusOverlayHelpers
       if panel_at_place
         btn + panel
       else
-        content_for(:dropdown_panels, panel)
+        content_for(:overlays_box, panel)
         btn
       end
     end
 
+    def modal(button_content, title = nil, options = {}, &panel_content)
+      if title.is_a?(Hash)
+        options = title.dup
+        title = nil
+      end
+
+      panel_at_place = options.delete(:panel_at_place)
+
+      id = "modal-overlay-#{SecureRandom.hex(4)}"
+
+      src = options.delete(:src)
+
+      # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      # create the Button
+      # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+      button_options = options.dup
+      button_options[:class] = [options[:class], 'modal-button'].compact.join(' ')
+      button_options = button_options.merge(data: { controller: 'hotwire-svelte-helpers-modal', panel_id: id })
+
+      button_content = capture(&button_content) if button_content.is_a?(Proc)
+      btn = content_tag(:div, button_content, button_options)
+
+      # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      # create the overlay
+      # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+      panel_options = options.dup
+      panel_options[:class] = [options[:class], 'modal-panel'].compact.join(' ')
+      panel_options['data-src'] = src if src
+      close_btn_proc = StimulusOverlayHelpers.close_button_proc
+
+      overlay = content_tag(:div, class: 'modal-overlay', style: 'display:none;', id: id) do
+        content_tag(:div, panel_options) do
+          safe_join([
+                      content_tag(:div, class: 'header') do
+                        concat content_tag(:div, title, class: 'title')
+                        concat content_tag(:div, class: 'buttons') { close_btn_proc.present? ? close_btn_proc.call(self) : content_tag(:span, 'X', class: 'close-button') }
+                      end,
+                      content_tag(:div, class: 'content') do
+                        capture(&panel_content) if block_given?
+                      end
+                    ])
+        end
+      end
+
+      if panel_at_place
+        btn + overlay
+      else
+        content_for(:overlays_box, overlay)
+        btn
+      end
+    end
 
     def tooltip(label, options = {}, &content)
 
@@ -86,7 +139,7 @@ module StimulusOverlayHelpers
       label_options = options.dup
       label_options[:id] = options.delete(:id)
       label_options[:class] = [options[:class], label_class].compact.join(' ')
-      label_options = label_options.merge(data: { controller: 'csedl-tooltip', panel_id: id, delay: delay })
+      label_options = label_options.merge(data: { controller: 'hotwire-svelte-helpers-tooltip', panel_id: id, delay: delay })
 
       label_element = if block_given? && cont.present?
                         content_tag(:span, label_options) do
@@ -118,14 +171,13 @@ module StimulusOverlayHelpers
       # return the result
       # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
-
       if !panel_element
         label_element
       elsif panel_at_place
         r = label_element
         r << panel_element
       else
-        content_for(:dropdown_panels) do
+        content_for(:overlays_box) do
           panel_element
         end
         label_element

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stimulus-overlay-helpers
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 1.1.0
 platform: ruby
 authors:
 - Christian Sedlmair
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-22 00:00:00.000000000 Z
+date: 2026-04-30 00:00:00.000000000 Z
 dependencies: []
 description:
 email: christian@sedlmair.ch