Shadix.Components.ContextMenu (shadix v0.0.1)

Copy Markdown View Source

A right-click context menu built on client-side JS commands, Floating UI, and a small LiveView hook.

Like the dropdown menu, this is a portal-free, fully client-driven menu, but it is opened by the contextmenu (right-click) event on the trigger area rather than a click, and it is positioned at the pointer rather than under an anchor.

The :trigger slot defines the right-clickable area. The content <div role="menu"> carries the ShadixContextMenu hook (assets/ts/context_menu.ts), which listens for contextmenu on the trigger, prevents the browser's native menu, and positions the content at the pointer using a @floating-ui/dom virtual element (computePosition + autoUpdate, right-start/flip/shift). The hook watches the content's visibility via a MutationObserver to manage keyboard navigation (arrows/Home/End/Enter/ Escape/Tab) and closes on outside pointerdown via the data-on-close JS (hide_menu/1).

Trigger and content ids are derived from the required :id so data-trigger and the JS targets line up stably.

Summary

Functions

context_menu(assigns)

Renders a context menu with a :trigger slot (the right-clickable area) and arbitrary menu items.

context_menu_item(assigns)

A selectable menu item.

context_menu_label(assigns)

A non-interactive group label within a context menu.

context_menu_separator(assigns)

A horizontal separator between context menu sections.

context_menu_shortcut(assigns)

A trailing keyboard-shortcut hint within a context menu item.

hide_menu(id)

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

show_menu(id)

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

Functions

context_menu(assigns)

Renders a context menu with a :trigger slot (the right-clickable area) and arbitrary menu items.

The trigger is wrapped in a <div data-context-trigger> whose contextmenu event is intercepted by the hook. The content <div role="menu"> carries the ShadixContextMenu hook and is positioned by Floating UI at open time.

Attributes

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

Slots

  • trigger (required)
  • inner_block (required)

context_menu_item(assigns)

A selectable menu item.

:id is the menu's id (not the item's). On click it runs the caller's :on_select JS and then closes the menu.

Attributes

  • id (:string) (required)
  • on_select (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

context_menu_label(assigns)

A non-interactive group label within a context menu.

Attributes

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

Slots

  • inner_block (required)

context_menu_separator(assigns)

A horizontal separator between context menu sections.

Attributes

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

context_menu_shortcut(assigns)

A trailing keyboard-shortcut hint within a context menu item.

Attributes

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

Slots

  • inner_block (required)

hide_menu(id)

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

Hides the content panel with a leave transition. Used by the hook's data-on-close (Escape / Tab / outside click) and by menu items on select.

show_menu(id)

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

Shows the content panel with an enter transition. The ShadixContextMenu hook calls this through data-on-open after positioning, but it is also exported for composition.