Shadix.Components.Dialog (shadix v0.0.1)

Copy Markdown View Source

A modal dialog built on client-side JS commands and a small LiveView hook.

Unlike the React/Radix original, this is a portal-free, fully client-driven dialog: show_dialog/1 and hide_dialog/1 are Phoenix.LiveView.JS command builders that toggle the overlay and content panel (with transitions) and dispatch shadix:dialog-open / shadix:dialog-close events. The ShadixDialog hook (assets/ts/dialog.ts) listens for those events to lock body scroll and manage focus. Escape and overlay-click both close via phx-window-keydown / phx-click. Focus is trapped with Phoenix's built-in <.focus_wrap>.

The trigger and content live side by side under a *-root wrapper carrying the hook; ids are derived from the required :id so titles/descriptions wire up to aria-labelledby / aria-describedby stably.

Summary

Functions

dialog(assigns)

Renders a modal dialog with a :trigger slot and arbitrary content.

dialog_description(assigns)

Dialog description. :id is the dialog's id; renders with "#{id}-description".

dialog_footer(assigns)

Footer region of a dialog; right-aligns actions on larger screens.

dialog_header(assigns)

Header region of a dialog; stacks title/description with sensible spacing.

dialog_title(assigns)

Dialog title. :id is the dialog's id; the title renders with "#{id}-title" so it matches the content panel's aria-labelledby.

hide_dialog(id)

Returns the Phoenix.LiveView.JS command that closes the dialog with id.

show_dialog(id)

Returns the Phoenix.LiveView.JS command that opens the dialog with id.

Functions

dialog(assigns)

Renders a modal dialog with a :trigger slot and arbitrary content.

The trigger is wrapped in a display: contents span wired to show_dialog/1, so the caller's own button/element shows the dialog without extra markup.

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.

Slots

  • trigger (required)
  • inner_block (required)

dialog_description(assigns)

Dialog description. :id is the dialog's id; renders with "#{id}-description".

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

dialog_footer(assigns)

Footer region of a dialog; right-aligns actions on larger screens.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

dialog_header(assigns)

Header region of a dialog; stacks title/description with sensible spacing.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

dialog_title(assigns)

Dialog title. :id is the dialog's id; the title renders with "#{id}-title" so it matches the content panel's aria-labelledby.

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

hide_dialog(id)

Returns the Phoenix.LiveView.JS command that closes the dialog with id.

Hides the overlay and content panel with leave transitions and dispatches shadix:dialog-close on the *-root element for the ShadixDialog hook.

show_dialog(id)

Returns the Phoenix.LiveView.JS command that opens the dialog with id.

Shows the overlay and content panel with enter transitions and dispatches shadix:dialog-open on the *-root element for the ShadixDialog hook.