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 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:

#overlays-box
  = yield :overlays_box

This matches the behavior 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