PineUiPhoenix.Components.Command (Pine UI v0.2.0)

Copy Markdown View Source

A searchable command palette.

A port of the Pines command — the ⌘K dialog for jumping around an application.

<.command id="palette" shortcut="k">
  <:group label="Navigation">
    <:item navigate={~p"/dashboard"} keywords="home overview">Dashboard</:item>
    <:item navigate={~p"/settings"}>Settings</:item>
  </:group>
  <:group label="Actions">
    <:item on_click="new-project" shortcut="N">New project</:item>
  </:group>
</.command>

Open it with ⌘K / Ctrl-K, or from anywhere:

<.button phx-click={JS.dispatch("pine:open", to: "#palette")}>Search</.button>

Filtering happens on the client

Items are rendered up front and filtered by Alpine as you type. That keeps the palette instant and works offline, but means it is only suitable for a bounded set — up to a few hundred entries. For searching a database, drive the list from the server with phx-change instead and leave filter={false}.

Summary

Overlays

command(assigns)

Renders a command palette.

Overlays

command(assigns)

Renders a command palette.

Accessibility

Implements the ARIA combobox pattern: the input owns a role="listbox" and points at the active option through aria-activedescendant, so a screen reader announces the highlighted item as the user arrows through. Focus stays in the input throughout, which is what makes type-ahead work.

Attributes

  • id (:string) (required)
  • placeholder (:string) - Defaults to "Type a command or search…".
  • empty_message (:string) - Defaults to "No results found.".
  • shortcut (:string) - Key that opens the palette with Cmd/Ctrl. Set to nil to disable the shortcut. Defaults to "k".
  • filter (:boolean) - Filter client-side as the user types. Turn off to drive the list from the server. Defaults to true.
  • open (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • group - Accepts attributes:
    • label (:string)
  • item - Accepts attributes:
    • navigate (:string)
    • patch (:string)
    • href (:string)
    • on_click (:any)
    • shortcut (:string) - Keyboard hint shown right-aligned.
    • keywords (:string) - Extra terms to match on, beyond the visible label.
  • footer