Default loading template for flyovers.

Shows a DaisyUI skeleton loader while content loads.

Renders flyover chrome around content with optimistic slide animations.

Uses a JavaScript hook that creates a "ghost" copy of the flyover content and animates it out, providing smooth transitions even though LiveView removes the real element immediately.

Attributes

• id - Unique ID for the flyover (required)
• open - Controls visibility. Flyover shows when truthy.
• myself - The component's @myself for targeting events
• slide_from - Direction: :left, :right, :top, :bottom (default: :right)
• close_on_escape - Whether to close on escape key (default: true)
• close_on_backdrop - Whether to close on backdrop click (default: true)
• width - Width for left/right: :sm, :md, :lg, :xl, :full (default: :md)
• height - Height for top/bottom: :sm, :md, :lg, :xl, :full (default: :md)
• duration - Animation duration in ms (default: 200)

Example

<.flyover_chrome id="nav-flyover" open={@open} myself={@myself} slide_from={:left}>
  <nav class="p-4">
    <h2>Navigation</h2>
    <ul>...</ul>
  </nav>
</.flyover_chrome>

Attributes

• id (:string) (required) - Unique ID for the flyover.
• module (:atom) (required) - The component module (for logging).
• open (:any) (required) - Controls visibility (truthy = open).
• open_field (:atom) - The name of the open state field. Defaults to :open.
• slide_from (:atom) - Direction: :left, :right, :top, :bottom. Defaults to :right.
• async_assign (:atom) - Async assign to wait for before showing content. Defaults to nil.
• myself (:any) (required) - The component's @myself.
• close_on_escape (:boolean) - Defaults to true.
• close_on_backdrop (:boolean) - Defaults to true.
• width (:atom) - Defaults to :md.
• height (:atom) - Defaults to :md.
• duration (:integer) - Defaults to 200.

Slots

• inner_block (required)
• loading - Loading content shown during optimistic open.

A close button for flyover headers using DaisyUI button classes.

The button dispatches a close-panel event to trigger the slide animation, then pushes the "close" event to the server.

Example

<div class="flex justify-between p-4 border-b">
  <h2>Title</h2>
  <.flyover_close_button id={@__flyover_id__} myself={@myself} />
</div>

Attributes

• id (:string) (required) - The flyover ID (for targeting the close-panel event).
• myself (:any) (required)
• class (:string) - Defaults to "btn btn-sm btn-circle btn-ghost".

Renders flyover content with async_result wrapping if a form is specified.

This component handles the async loading state automatically:

• If form_field is specified, wraps content in <.async_result>
• Shows loading template while the form data loads
• Passes the unwrapped form to the render function

Attributes

• assigns (:map) (required) - The full assigns map.
• async_assign (:atom) (required) - The async assign to wrap with async_result (or nil).
• render (:any) (required) - Function (assigns) -> HEEx.
• loading (:any) (required) - Function (assigns) -> HEEx for loading state.