PhiaUi.Components.CommandPalette (phia_ui v0.1.17)

Command palette (Cmd+K) overlay component.

Reuses the existing PhiaCommand hook from priv/templates/js/hooks/command.js. The hook manages show/hide by toggling the hidden class on the root element, filters items by the search input value, and highlights items via keyboard.

Markup contract (required by PhiaCommand hook)

Root element: phx-hook="PhiaCommand" + role="dialog" — starts hidden via hidden class
[data-command-backdrop] — clicking this closes the palette
[data-command-input] + role="combobox" — the search input
[data-command-list] — the results list container
[data-command-item] — individual items (must have id for aria-activedescendant)

Four components

command_palette/1 — the root dialog overlay
command_palette_group/1 — groups items under a heading
command_palette_item/1 — a single command item
command_palette_empty/1 — empty state shown when no results match

Summary

Functions

command_palette(assigns)

Renders the command palette overlay dialog.

command_palette_empty(assigns)

Renders an empty state inside the command palette when no results match.

command_palette_group(assigns)

Renders a labeled group of command palette items.

command_palette_item(assigns)

Renders a single command item inside a command palette.

Functions

command_palette(assigns)

Renders the command palette overlay dialog.

Open programmatically by dispatching the custom event or setting the hook trigger. The hook registers keyboard shortcuts (Cmd+K / Ctrl+K) and Escape to close.

Attributes

id (:string) (required) - Required for phx-hook and aria-activedescendant.
placeholder (:string) - Defaults to "Search...".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required) - groups/items/empty state.

command_palette_empty(assigns)

Renders an empty state inside the command palette when no results match.

Attributes

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

Slots

inner_block - Custom empty state content.

command_palette_group(assigns)

Renders a labeled group of command palette items.

Attributes

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

Slots

inner_block (required)

command_palette_item(assigns)

Renders a single command item inside a command palette.

Attributes

id (:string) (required) - Required for aria-activedescendant targeting.
on_select (:string) - phx-click event name. Defaults to nil.
value (:any) - phx-value-value sent with on_select. Defaults to nil.
disabled (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

icon - Optional leading icon.
inner_block (required) - Label text.