Purpose: Controls modal dialog behavior including opening, closing, backdrop handling, and event management.

Features

• Two usage patterns: direct element control or target-based control
• Auto-show functionality
• Configurable backdrop behavior
• Custom event listeners
• Flowbite integration with lazy loading

Static Values

static values = {
  autoShow: false,           // Boolean - Auto show modal on connect
  placement: 'bottom-right', // String - Modal placement
  backdrop: 'dynamic',       // String - Backdrop behavior ('dynamic', 'static', or false)
  backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
  closable: false,          // Boolean - Allow closing via ESC/backdrop
  onHide: Object,           // Object - Callback for hide events
  onShow: Object,           // Object - Callback for show events
  onToggle: Object          // Object - Callback for toggle events
}

Targets

• modal: Modal elements to control

Actions

• show: Show the modal
• hide: Hide the modal
• toggle: Toggle modal visibility

Usage Examples

Basic Modal

<%= fx_modal(id: "basic-modal", data: { controller: "fx-modal" }) do %>
  <div class="p-6">
    <h2 class="text-lg font-semibold">Modal Title</h2>
    <p>Modal content goes here...</p>
  </div>
<% end %>

<%= fx_button(data: { action: "fx-modal#toggle", "fx-modal-id": "basic-modal" }) do %>
  Open Modal
<% end %>

Auto-Show Modal with Custom Backdrop

<%= fx_modal(
  id: "auto-modal",
  data: {
    controller: "fx-modal",
    "fx-modal-auto-show-value": true,
    "fx-modal-backdrop-value": "static"
  }
) do %>
  <div class="p-6">
    <h2>Welcome!</h2>
    <p>This modal opens automatically.</p>
  </div>
<% end %>

Multiple Modals with Target Control

<div data-controller="fx-modal">
  <%= fx_modal(id: "modal-1", data: { "fx-modal-target": "modal" }) do %>
    <p>First modal</p>
  <% end %>

  <%= fx_modal(id: "modal-2", data: { "fx-modal-target": "modal" }) do %>
    <p>Second modal</p>
  <% end %>

  <%= fx_button(data: { action: "fx-modal#show", "fx-modal-id": "modal-1" }) do %>
    Show Modal 1
  <% end %>
</div>

Event System

// Listen for custom events
document.addEventListener("showModal:my-modal", () => {
  // Modal will be shown
});

// Dispatch custom events
document.dispatchEvent(new CustomEvent("toggleModal:my-modal"));