Command Palette

<!-- Simple URL string -->
<x-command-palette request="/api/search" />
 
<!-- Using a route name -->
<x-command-palette request="api.users" />
 
<!-- Using full route path -->
<x-command-palette :request="route('api.users')" />

<!-- Array with url, method, and params -->
<x-command-palette :request="[
    'url' => '/api/search',
    'method' => 'post',
    'params' => ['category' => 'users'],
]" />

<x-command-palette id="users"
                   request="/api/users"
                   select="label:name|value:id|description:email|image:avatar" />
 
<x-button x-on:click="$tsui.open.commandPalette('users')">
    Search Users
</x-button>

[
    { "name": "Active User", "id": 1 },
    { "name": "Inactive User", "id": 2, "disabled": true }
]

<!-- Preserves previous results when reopening (default: true) -->
<x-command-palette request="/api/search" />
 
<!-- Clears results every time the palette opens inline -->
<x-command-palette request="/api/search" :recycle="false" />

<!-- Available keys: search, empty, navigate, select, close -->
<x-command-palette request="/api/search"
                   :placeholders="[
                       'search' => 'Type to search...',
                       'empty' => 'Nothing found.',
                   ]" />

<x-command-palette id="search"
                   request="/api/users"
                   x-on:select="console($event.detail.label)" />
 
<x-button x-on:click="$tsui.open.commandPalette('search')">
    Open Command Palette
</x-button>

// ...
 
'command-palette' => [
    Components\CommandPalette\Component::class,
    /*
    |----------------------------------------------------------------------
    | Command Palette Settings
    |----------------------------------------------------------------------
    |
    | actionable: the callable class for handling item selection (e.g., App\Support\GlobalSearch::class).
    | request: the data source for the command palette.
    | select: the default field mapping of the results (e.g., 'label:name|value:id|description:email|image:avatar').
    | z-index: controls the default z-index.
    | blur: enables the background blur effect (Allowed: false, sm, md, lg, xl).
    | overflow: avoids hiding the overflow, allowing the scroll of the page.
    | shortcut: keyboard shortcut to toggle the palette (e.g., 'ctrl.k', 'ctrl.shift.p').
    | recycle: when true, preserves previous results when reopening the palette.
    | elements: when true, shows the keyboard hints in the footer.
    | scrollbar: when true, applies a custom minimal scrollbar to the results list.
    | centered: when true, centers the palette vertically on mobile with fully rounded corners.
    | overlay: when false, hides the dimmed background overlay rendered behind the palette.
    */
    [
        'actionable' => App\Actions\CommandPaletteAction::class, 
        'request' => null,
        'select' => null,
        'z-index' => 'z-50',
        'blur' => false,
        'overflow' => false,
        'shortcut' => 'ctrl.k',
        'recycle' => true,
        'elements' => true,
        'scrollbar' => true,
        'centered' => false,
        'overlay' => true,
    ],
],
 
// ...

use TallStackUi\Support\CommandPalette\Callback;
use TallStackUi\Support\CommandPalette\ItemSelected;
 
class CommandPaletteAction
{
    public function __invoke(ItemSelected $selected): Callback
    {
        return Callback::redirect("/users/{$selected->value}");
    }
}

// ItemSelected properties:
 
$selected->search;       // string  — the search term
$selected->label;        // mixed   — option label
$selected->value;        // mixed   — option value
$selected->description;  // ?string — optional description
$selected->image;        // ?string — optional image URL
$selected->icon;         // ?string — optional icon HTML
$selected->additional;   // array   — extra fields from the API

namespace App\Actions;
 
use TallStackUi\Support\CommandPalette\Callback;
use TallStackUi\Support\CommandPalette\ItemSelected;
 
class CommandPaletteAction
{
    public function __invoke(ItemSelected $selected): Callback
    {
        // Redirect to an internal page
        return Callback::redirect("/users/{$selected->value}");
 
        // Redirect to an external URL (opens in new tab)
        return Callback::redirect('https://example.com')->external();
 
        // Redirect using Livewire.navigate (SPA-style navigation)
        return Callback::redirect('/dashboard')->navigate();
 
        // Dispatch a browser event
        return Callback::event('user-selected');
 
        // Dispatch a browser event with parameters
        return Callback::event('user-selected')->with(['id' => $selected->value]);
    }
}

<!-- Inline lifecycle events -->
<x-command-palette id="search"
                   request="/api/search"
                   x-on:open="console.log('opened')"
                   x-on:close="console.log('closed')" />
 
<!-- Global lifecycle events (event name includes the id) -->
<div x-on:command-palette:search:select.window="console.log($event.detail)"
     x-on:command-palette:search:open.window="console.log('opened')"
     x-on:command-palette:search:close.window="console.log('closed')">
    <x-command-palette id="search" request="/api/search" />
</div>

<!-- Default: dimmed overlay rendered behind the palette -->
<x-command-palette id="default" :request="route('api.users')" />
 
<!-- Opt-out: palette floats with no background dimming -->
<x-command-palette id="floating" :request="route('api.users')" :overlay="false" />