Shadix.Components.Drawer (shadix v0.0.1)

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

Modelled on Shadix.Components.Sheet: show_drawer/1 and hide_drawer/1 are Phoenix.LiveView.JS command builders that toggle the overlay and content panel (with a slide-up transition) and dispatch shadix:drawer-open / shadix:drawer-close events. The ShadixDrawer hook (assets/ts/drawer.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 content is fixed to the BOTTOM edge of the viewport and slides up from below; a small grab-handle bar sits near the top for visual affordance.

v1 has no drag-to-dismiss

shadcn/ui's drawer uses vaul to support dragging the sheet down to dismiss it. This v1 deliberately does NOT implement drag gestures: it is a tap/Escape/overlay drawer. The grab handle is decorative.

Summary

Functions

drawer(assigns)

Renders a bottom drawer with a :trigger slot and arbitrary content.

drawer_close(assigns)

A close button for the drawer with :id. Closes the drawer via hide_drawer/1. Renders its inner_block as the button label (defaulting to a visually-hidden "Close" when empty).

drawer_description(assigns)

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

drawer_footer(assigns)

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

drawer_header(assigns)

Header region of a drawer; stacks title/description, centered by default.

drawer_title(assigns)

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

hide_drawer(id)

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

show_drawer(id)

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

Functions

drawer(assigns)

Renders a bottom drawer with a :trigger slot and arbitrary content.

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

Attributes

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

Slots

trigger (required)
inner_block (required)

drawer_close(assigns)

A close button for the drawer with :id. Closes the drawer via hide_drawer/1. Renders its inner_block as the button label (defaulting to a visually-hidden "Close" when empty).

Attributes

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

Slots

inner_block

drawer_description(assigns)

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

Attributes

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

Slots

inner_block (required)

drawer_footer(assigns)

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

Attributes

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

Slots

inner_block (required)

drawer_header(assigns)

Header region of a drawer; stacks title/description, centered by default.

Attributes

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

Slots

inner_block (required)

drawer_title(assigns)

Drawer title. :id is the drawer'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_drawer(id)

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

Hides the overlay and slides the content panel back down off the bottom edge, then dispatches shadix:drawer-close on the *-root element for the ShadixDrawer hook.

show_drawer(id)

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

Shows the overlay and slides the content panel up from the bottom edge, then dispatches shadix:drawer-open on the *-root element for the ShadixDrawer hook.