Class: Daisy::Actions::ModalComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/actions/modal_component.rb

Overview

Note:

Register the loco-modal Stimulus controller (see the Install guide) to drive the dialog from JavaScript. It is attached to the <dialog> automatically but stays inert until registered, so basic modals keep working without it. The controller adds loco-modal#open and loco-modal#close actions and dispatches bubbling loco-modal:open / loco-modal:close events. Because the native <dialog> close event does not bubble, loco-modal:close fires for every close — the Escape key, the backdrop, a <form method="dialog"> submit, or the close action.

The Modal component renders a modal dialog that can be opened and closed. It provides a structured way to display content that requires user attention or interaction, such as forms, confirmations, or detailed information.

Note that the modal uses the HTML <dialog> element and its native methods (showModal() and close()). This provides better accessibility and keyboard navigation compared to div-based modals.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(title = nil, **kws, &block) ⇒ ModalComponent

Creates a new instance of the ModalComponent.

Parameters:

  • title (String) (defaults to: nil) —

    The title of the modal. Used in both the modal header and the default trigger button.

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • title (String) —

    The title of the modal. You can also pass this as the first argument.

  • closable (Boolean) —

    If true (default), shows a close icon in the top-right corner.

  • dialog_id (String) —

    A custom ID for the dialog element. If not provided, a unique ID will be generated.

  • trigger (Boolean) —

    When true (default) and no custom activator or button slot is given, a default button (labeled with the title) is rendered to open the modal. Pass false to render only the <dialog> with no built-in trigger — a "Global Modal" that you place once and open from elsewhere (a link, another component, or JavaScript).

  • turbo_frame_id (String) —

    Renders an empty <turbo-frame> with this id inside the modal and wires the loco-modal controller to open the dialog when that frame loads (and clear it on close). Combine with trigger: false for the Hotwire "Global Modal" pattern: place one modal in your layout and point data-turbo-frame links at this id to stream remote content into it. Requires the registered controller.



176
177
178
179
180
181
182
183
184
 
# File 'app/components/daisy/actions/modal_component.rb', line 176

def initialize(title = nil, **kws, &block)
  super

  @dialog_id = config_option(:dialog_id, SecureRandom.uuid)
  @closable = config_option(:closable, true)
  @trigger = config_option(:trigger, true)
  @turbo_frame_id = config_option(:turbo_frame_id, nil)
  @simple_title = config_option(:title, title)
end

Instance Attribute Details

#closable ⇒ Boolean (readonly) Also known as: closable?

Returns Whether or not this dialog can be closed.

Returns:

  • (Boolean) —

    Whether or not this dialog can be closed.



127
128
129
 
# File 'app/components/daisy/actions/modal_component.rb', line 127

def closable
  @closable
end

#dialog_id ⇒ String (readonly)

Returns The unique ID for the <dialog> element.

Returns:

  • (String) —

    The unique ID for the <dialog> element.



140
141
142
 
# File 'app/components/daisy/actions/modal_component.rb', line 140

def dialog_id
  @dialog_id
end

#simple_title ⇒ String (readonly)

Returns Accessor for the title string passed via the component config.

Returns:

  • (String) —

    Accessor for the title string passed via the component config.



144
145
146
 
# File 'app/components/daisy/actions/modal_component.rb', line 144

def simple_title
  @simple_title
end

#trigger ⇒ Boolean (readonly) Also known as: trigger?

Returns Whether or not a built-in trigger is rendered. When false, only the <dialog> is rendered (a "Global Modal").

Returns:

  • (Boolean) —

    Whether or not a built-in trigger is rendered. When false, only the <dialog> is rendered (a "Global Modal").



132
133
134
 
# File 'app/components/daisy/actions/modal_component.rb', line 132

def trigger
  @trigger
end

#turbo_frame_id ⇒ String? (readonly)

Returns The id for the <turbo-frame> rendered inside the modal (the Turbo Frame "Global Modal" pattern), or nil when unused.

Returns:

  • (String, nil) —

    The id for the <turbo-frame> rendered inside the modal (the Turbo Frame "Global Modal" pattern), or nil when unused.



137
138
139
 
# File 'app/components/daisy/actions/modal_component.rb', line 137

def turbo_frame_id
  @turbo_frame_id
end

Instance Method Details

#before_render ⇒ Object

Sets up the component with various CSS classes and HTML attributes.



189
190
191
192
193
194
195
196
197
198
 
# File 'app/components/daisy/actions/modal_component.rb', line 189

def before_render
  setup_activator_or_button
  setup_component
  setup_backdrop
  setup_box
  setup_turbo_frame
  setup_close_icon
  setup_title
  setup_actions
end