PhoenixDuskmoon.Component.Fun.SpotlightSearch (PhoenixDuskmoon v7.2.1)

View Source

Spotlight search component with modal interface and suggestions.

Examples

<.dm_fun_spotlight_search id="global-search" phx-target={@myself}>
  <:suggestion icon="search" label="Search users" action="navigate_users" />
  <:suggestion icon="file" label="Search documents" action="navigate_docs" />
  <:suggestion icon="settings" label="Search settings" action="navigate_settings" />
</.dm_fun_spotlight_search>

<.dm_fun_spotlight_search
  id="quick-search"
  placeholder="Quick search..."
  shortcut="cmd+k"
  phx-target={@myself}
/>

Attributes

  • id - Component ID (required)
  • placeholder - Input placeholder text (default: "Search...")
  • shortcut - Keyboard shortcut to open (default: "cmd+k")
  • open - Whether the modal is open
  • loading - Show loading state
  • class - Additional CSS classes
  • phx-target - LiveView target for events

Slots

  • :suggestion - Search suggestions with icon, label, and optional action

Summary

Functions

dm_fun_spotlight_search(assigns)

Attributes

  • id (:string) (required)
  • placeholder (:string) - Defaults to "Search...".
  • shortcut (:string) - Defaults to "cmd+k".
  • open (:boolean) - Defaults to false.
  • loading (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • phx_target (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • suggestion - Accepts attributes:
    • icon (:string)
    • label (:string) (required)
    • action (:string)
    • description (:string)