Shadix.Components.Sheet (shadix v0.0.1)

Copy Markdown View Source

A side panel ("sheet") built on client-side JS commands and a small LiveView hook.

Modelled on Shadix.Components.Dialog: show_sheet/1 and hide_sheet/1 are Phoenix.LiveView.JS command builders that toggle the overlay and content panel (with side-aware slide transitions) and dispatch shadix:sheet-open / shadix:sheet-close events. The ShadixSheet hook (assets/ts/sheet.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>.

Unlike the dialog, the content is NOT centered: it is fixed to the chosen :side (one of top, right, bottom, left) and slides in from that edge. Side-based classes and enter/leave transitions are computed from the @sides map.

Summary

Functions

hide_sheet(id, side \\ "right")

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

sheet(assigns)

Renders a side panel with a :trigger slot and arbitrary content.

sheet_close(assigns)

A close button for the sheet with :id. Renders the X icon and closes the sheet via hide_sheet/1.

sheet_description(assigns)

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

sheet_footer(assigns)

Footer region of a sheet; pushed to the bottom of the panel.

sheet_header(assigns)

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

sheet_title(assigns)

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

show_sheet(id, side \\ "right")

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

Functions

hide_sheet(id, side \\ "right")

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

Hides the overlay and content panel with side-aware leave transitions and dispatches shadix:sheet-close on the *-root element for the ShadixSheet hook.

sheet(assigns)

Renders a side panel with a :trigger slot and arbitrary content.

The trigger is wrapped in a display: contents span wired to show_sheet/1, so the caller's own button/element shows the sheet without extra markup. The :side attribute controls which edge the panel is fixed to and slides from.

Attributes

  • id (:string) (required)
  • side (:string) - Defaults to "right". Must be one of "top", "right", "bottom", or "left".
  • class (:string) - Defaults to nil.

Slots

  • trigger (required)
  • inner_block (required)

sheet_close(assigns)

A close button for the sheet with :id. Renders the X icon and closes the sheet via hide_sheet/1.

Attributes

  • id (:string) (required)
  • side (:string) - Defaults to "right". Must be one of "top", "right", "bottom", or "left".
  • class (:string) - Defaults to nil.

sheet_description(assigns)

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

Attributes

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

Slots

  • inner_block (required)

sheet_footer(assigns)

Footer region of a sheet; pushed to the bottom of the panel.

Attributes

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

Slots

  • inner_block (required)

sheet_header(assigns)

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

Attributes

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

Slots

  • inner_block (required)

sheet_title(assigns)

Sheet title. :id is the sheet'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)

show_sheet(id, side \\ "right")

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

Shows the overlay and content panel with side-aware enter transitions and dispatches shadix:sheet-open on the *-root element for the ShadixSheet hook.