Wire Elements Spotlight

repository·2.0·Indexed 21 days ago

https://github.com/wire-elements/spotlight

A Livewire component for Laravel applications that provides a macOS Spotlight or Alfred-like command palette interface. It allows users to quickly search and execute commands, supports custom command creation via the make:spotlight Artisan command, and features dependency resolution with searchable results.

Tokens
3.9K
Snippets
18
Records
22
Agent score
75%

What's inside wire-elements-spotlight

  1. How command dependencies work

    2.0

    Commands can require user input through dependencies. This is handled by defining a dependencies() method that returns a SpotlightCommandDependencies collection.

    Defining Dependencies

    Use SpotlightCommandDependencies::collection() and SpotlightCommandDependency::make() to register dependencies. You can set placeholders and specify if a dependency is a standard input using setType(SpotlightCommandDependency::INPUT).

    Implementing Search for Dependencies

    For every dependency registered, Spotlight looks for a method named search{dependency-name} on your command class. This method must return a collection of SpotlightSearchResult objects.

    SpotlightSearchResult structure:

    • Identifier (ID)
    • Name
    • Description

    Scoped Dependency Searching

    Dependency search methods have access to previously resolved dependencies. For example, if team is the first dependency and foobar is the second, searchFoobar($query, Team $team) can use the $team object to scope its search.

    use LivewireUI\Spotlight\Spotlight;
    use LivewireUI\Spotlight\SpotlightCommand;
    use LivewireUI\Spotlight\SpotlightCommandDependencies;
    use LivewireUI\Spotlight\SpotlightCommandDependency;
    use LivewireUI\Spotlight\SpotlightSearchResult;
    
    class CreateUser extends SpotlightCommand
    {
        public function dependencies(): ?SpotlightCommandDependencies
        {
            return SpotlightCommandDependencies::collection()
                ->add(SpotlightCommandDependency::make('team')->setPlaceholder('For which team?'))
                ->add(SpotlightCommandDependency::make('foobar')->setType(SpotlightCommandDependency::INPUT));
        }
    
        public function searchTeam($query)
        {
            return Team::where('name', 'like', "%$query%")
                ->get()
                ->map(fn($team) => new SpotlightSearchResult($team->id, $team->name, "Create user for {$team->name}"));
        }
    
        public function searchFoobar($query, Team $team)
        {
            // $team is available here because it was defined earlier in the dependencies list
        }
    
        public function execute(Spotlight $spotlight, Team $team, string $foobar): void
        {
            // ...
        }
    }
  2. Add the Spotlight Livewire directive

    2.0

    After installation, add the Spotlight Livewire component directive to your main layout file (usually app.blade.php) to make the UI available.

    <html>
    <body>
    <!-- content -->
    
    @livewire('livewire-ui-spotlight')
    </body>
    </html>
  3. Translate Spotlight placeholders

    2.0

    To translate or change the default search placeholder, publish the translation files:

    php artisan vendor:publish --tag=livewire-ui-spotlight-translations

    After publishing, you can modify the placeholder key in the returned array:

    return [
        'placeholder' => 'What do you want to do?',
    ];
  4. Bundle Spotlight Javascript manually

    2.0

    If you set 'include_js' => false in your configuration to bundle the required Javascript yourself, follow these steps:

    1. Install fuse.js via npm:
      npm install --save fuse.js
    2. Add the following requirement to your script bundler (e.g., Webpack or Vite):
      require('vendor/wire-elements/spotlight/resources/js/spotlight');
    npm install --save fuse.js
  5. Register Spotlight commands

    2.0

    Commands must be registered to be discoverable. You can register them in two ways:

    1. Via Configuration

    Add the command class to the commands array in config/livewire-ui-spotlight.php:

    return [
        'commands' => [
            \App\SpotlightCommands\CreateUser::class
        ]
    ];

    2. Via Service Provider

    Use the Spotlight facade in your AppServiceProvider:

    use \App\SpotlightCommands\CreateUser;
    use LivewireUI\Spotlight\Spotlight;
    
    public function boot()
    {
        Spotlight::registerCommand(CreateUser::class);
        
        // Conditional registration
        Spotlight::registerCommandIf(true, CreateUser::class);
        Spotlight::registerCommandUnless(false, CreateUser::class);
    }
    Spotlight::registerCommand(CreateUser::class);
  6. Create a Spotlight command

    2.0

    Commands are classes that extend LivewireUI\Spotlight\SpotlightCommand. You can use the Artisan command to scaffold a new one:

    php artisan make:spotlight <command-name>

    Each command requires a $name and $description. The execute method is called when the command is selected. You can type-hint dependencies (including LivewireUI\Spotlight\Spotlight to access Livewire helpers) and they will be resolved by Laravel's container.

    use LivewireUI\
    Spotlight\Spotlight;\nuse LivewireUI\Spotlight\SpotlightCommand;\nuse Illuminate
    \Contracts\Auth\StatefulGuard;\n\nclass Logout extends SpotlightCommand\n{\n    protected string $name = 'Logout';\n\n    protected string $description = 'Logout out of your account';\n\n    public function execute(Spotlight $spotlight, StatefulGuard $guard): void\n    {\n        $guard->logout();\n        $spotlight->redirect('/');\n    }\n}
    use LivewireUI\Spotlight\SpotlightCommand;
    
    class Logout extends SpotlightCommand
    {
        protected string $name = 'Logout';
    
        protected string $description = 'Logout out of your account';
    
        public function execute(Spotlight $spotlight): void
        {
            $spotlight->redirect('/');
        }
    }
  7. How to open Spotlight

    2.0

    Spotlight can be opened using default keyboard shortcuts or programmatically.

    Default Shortcuts

    • CTRL + K or CMD + K
    • CTRL + / or CMD + /

    Programmatic Toggling

    You can trigger the spotlight toggle from a Livewire component or via Alpine.js.

    From Livewire (v2):

    $this->dispatchBrowserEvent('toggle-spotlight');

    From Livewire (v3):

    $this->dispatch('toggle-spotlight');

    From Alpine.js:

    <button @click="$dispatch('toggle-spotlight')">Toggle Spotlight</button>
    // Livewire v3
    $this->dispatch('toggle-spotlight');
  8. Configure Spotlight via the config file

    2.0

    Customize Spotlight settings by publishing the configuration file. This allows you to define keyboard shortcuts, register commands, and manage asset inclusion (CSS/JS).

    To publish the configuration file, run:

    php artisan vendor:publish --tag=livewire-ui-spotlight-config
  9. How Spotlight searches command dependencies

    2.0

    Spotlight supports searching through command dependencies. If a command has dependencies, Spotlight can call a dynamically constructed method on the command to resolve them based on a query.

    When searchDependency is triggered, Spotlight looks for a method named search {DependencyName} (in camelCase) on the command. For example, if a dependency is named User, it looks for searchUser.

    This method is expected to return a collection of SpotlightSearchResult objects, which are then mapped to the UI to show matching results for that specific dependency.

  10. How Spotlight executes commands

    2.0

    When a user selects a command in the UI, Spotlight calls the execute method on the corresponding command instance. The execute method receives the following parameters:

    1. spotlight: The current Spotlight Livewire component instance.
    2. Any additional dependencies passed during the execution call.

    This allows commands to interact with the Spotlight interface or access resolved dependencies during runtime.