Stimulus Overlay Helpers

This gem adds two view helpers corresponding to the npm package @csedl/hotwire-svelte-helpers, to a rails app.

There is a online example rails app.

Links

• How we are building a Rails App

Installation

add

gem 'stimulus-overlay-helpers'

to your Gemfile and run bundle install

Configuration

If you work with the helpers on this gem, you can setup a initializer for a custom close-button, like:

#=> config/initializers/stimulus_overlay_helpers.rb

StimulusDropdown.configure do |config|
  config.close_button_proc = ->(view) do
    view.content_tag(:span, 'X', class: 'close-button')
  end
end

Z-index issues / panel_at_place option

If the overlay should appear above all other elements, it should be rendered closer to the root level, because z-index is always relative to sibling elements.

By default, when the panel_at_place argument is not passed to the helper, the overlay is rendered into the :overlays_box content block. Therefore, this block must be yielded in the layout:

#overlays-box
  = yield :overlays_box

This aligns to the behaviour of the svelte overlays from @csedl/hotwire-svelte-helpers

Usage Examples

= dropdown('button-label-or-proc', class: 'fetch-from-server', src: optional_server_request_path) do
  'any content here ...'

= dropdown(->{inline_svg_tag("my-svg")}, class: 'fetch-from-server', src: optional_server_request_path) do
  'any content here ...'

= tooltip('tooltip-text-or-proc', class: 'primary-tooltip') do
    tooltip-content

License: MIT