Wire Elements Spotlight

https://github.com/wire-elements/spotlight
Admin
Wire Elements Spotlight is a Livewire component that provides Spotlight/Alfred-like command palette...
Tokens:7,451
Snippets:58
Trust Score:7.2
License:MIT
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Wire Elements Spotlight via Composer

Source: https://context7.com/wire-elements/spotlight/llms.txt

Install the Wire Elements Spotlight package using Composer. This command fetches and installs the necessary files for the package.

```bash
composer require wire-elements/spotlight
```

--------------------------------

### Define Command Dependencies for Spotlight (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This example demonstrates how to define dependencies for a Spotlight command in PHP. The `dependencies` method returns a collection of `SpotlightCommandDependency` objects, allowing you to specify required inputs and their placeholders. It also shows how to implement `search` methods for resolving these dependencies.

```php
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;
use LivewireUI\Spotlight\SpotlightCommandDependencies;
use LivewireUI\Spotlight\SpotlightCommandDependency;
use LivewireUI\Spotlight\SpotlightSearchResult;

class CreateUser extends SpotlightCommand
{
    protected string $name = 'Create user';

    protected string $description = 'Create new team user';

    public function dependencies(): ?SpotlightCommandDependencies
    {
        return SpotlightCommandDependencies::collection()
            ->add(SpotlightCommandDependency::make('team')->setPlaceholder('For which team do you want to create a user?'))
            ->add(SpotlightCommandDependency::make('foobar')->setPlaceholder('Search for second dependency')
            );
    }

    public function searchFoobar($query, Team $team)
    {
        // Given Foobar is the second dependency it will have access to any resolved depedencies defined earlier. In this case we can access the Team which was chosen.
    }

    public function searchTeam($query)
    {
        return Team::where('name', 'like', "%query%")
            ->get()
            ->map(function(Team $team) {
                return new SpotlightSearchResult(
                    $team->id,
                    $team->name,
                    sprintf('Create user for %s', $team->name)
                );
            });
    }

    public function execute(Spotlight $spotlight, Team $team, string $name)
    {
        $spotlight->emit('openModal', 'user-create', ['team' => $team->id, 'name' => $name]);
    }
}
```

--------------------------------

### Toggle Spotlight from Alpine.js Markup

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This example shows how to trigger the 'toggle-spotlight' browser event directly from your HTML markup using Alpine.js's `$dispatch` helper. This allows for interactive elements to control the Spotlight visibility.

```html
<button @click="$dispatch('toggle-spotlight')">Toggle Spotlight</button>
```

--------------------------------

### Custom Spotlight Placeholder Translation

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

An example of a custom translation for the Spotlight placeholder. This file allows you to change the default text shown in the search input field.

```php
<?php

return [
    'placeholder' => 'What do you want to do?',
];

```

--------------------------------

### Bundle Spotlight JavaScript Manually

Source: https://context7.com/wire-elements/spotlight/llms.txt

Disable the automatic injection of Spotlight's JavaScript and bundle it manually with your application's assets. This is useful for optimizing asset loading or integrating with custom build processes. Ensure `fuse.js` is installed if required.

```bash
npm install fuse.js
```

```php
// config/livewire-ui-spotlight.php
return [
    'include_js' => false,
    // ...
];
```

```javascript
// resources/js/app.js
require('vendor/wire-elements/spotlight/resources/js/spotlight');
```

--------------------------------

### Implement Spotlight Command Execution with Dependencies

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code demonstrates how to implement the `execute` method for a Spotlight command. It shows how to inject dependencies like `StatefulGuard` and `Spotlight` to perform actions such as logging out the user and redirecting.

```php
use Illuminate\Contracts\Auth\StatefulGuard;
use LivewireUI\Spotlight\Spotlight;
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, StatefulGuard $guard): void
    {
        $guard->logout();
        $spotlight->redirect('/');
    }
}
```

--------------------------------

### Create a Basic Spotlight Command (PHP)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Define a custom command for Wire Elements Spotlight. This PHP class specifies the command's name, description, optional synonyms, and the `execute` method containing the action to perform when the command is selected.

```php
// app/Spotlight/NavigateToSettings.php
<?php

namespace App\Spotlight;

use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;

class NavigateToSettings extends SpotlightCommand
{
    protected string $name = 'Settings';

    protected string $description = 'Go to application settings';

    // Optional: add search synonyms for better discoverability
    protected array $synonyms = [
        'preferences',
        'configuration',
        'options',
    ];

    public function execute(Spotlight $spotlight): void
    {
        $spotlight->redirect('/settings');
    }
}
```

--------------------------------

### Create a Basic Spotlight Command

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code defines a basic Spotlight command by extending `LivewireUISpotlightSpotlightCommand`. It sets the `$name` and `$description` properties, which are displayed when searching through commands in Spotlight.

```php
use LivewireUISpotlightSpotlightCommand;

class Logout extends SpotlightCommand
{
    protected string $name = 'Logout';

    protected string $description = 'Logout out of your account';

}
```

--------------------------------

### Create Commands with Searchable Dependencies (PHP)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Defines a Spotlight command that requires user input via searchable dependencies like 'team', 'role', and 'email'. Dependencies are resolved sequentially, and subsequent dependencies can access previously selected values. The 'execute' method dispatches a modal event with the collected data.

```php
<?php

namespace App\Spotlight;

use App\Models\Team;
use App\Models\Role;
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;
use LivewireUI\Spotlight\SpotlightCommandDependencies;
use LivewireUI\Spotlight\SpotlightCommandDependency;
use LivewireUI\Spotlight\SpotlightSearchResult;

class CreateUserForTeam extends SpotlightCommand
{
    protected string $name = 'Create User';

    protected string $description = 'Create a new user for a team';

    public function dependencies(): ?SpotlightCommandDependencies
    {
        return SpotlightCommandDependencies::collection()
            ->add(
                SpotlightCommandDependency::make('team')
                    ->setPlaceholder('Select a team...')
            )
            ->add(
                SpotlightCommandDependency::make('role')
                    ->setPlaceholder('Select a role for this user...')
            )
            ->add(
                // INPUT type for free-text entry instead of searchable list
                SpotlightCommandDependency::make('email')
                    ->setPlaceholder('Enter user email address...')
                    ->setType(SpotlightCommandDependency::INPUT)
            );
    }

    // Search method for 'team' dependency
    public function searchTeam(string $query)
    {
        return Team::where('name', 'like', "%{$query}%")
            ->limit(10)
            ->get()
            ->map(function (Team $team) {
                return new SpotlightSearchResult(
                    $team->id,
                    $team->name,
                    sprintf('Team with %d members', $team->users_count)
                );
            });
    }

    // Search method for 'role' dependency - has access to resolved 'team'
    public function searchRole(string $query, Team $team)
    {
        // Scoped search: only show roles available for selected team
        return $team->availableRoles()
            ->where('name', 'like', "%{$query}%")
            ->get()
            ->map(function (Role $role) {
                return new SpotlightSearchResult(
                    $role->id,
                    $role->name,
                    $role->description
                );
            });
    }

    // Execute receives all resolved dependencies
    public function execute(Spotlight $spotlight, Team $team, Role $role, string $email): void
    {
        // Emit event to open a modal with pre-filled data
        $spotlight->dispatch('openModal', 'create-user-modal', [
            'team_id' => $team->id,
            'role_id' => $role->id,
            'email' => $email,
        ]);
    }
}

```

--------------------------------

### Create Spotlight Command Dependency Collection (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code snippet illustrates how to create a collection of dependencies for a Spotlight command using `SpotlightCommandDependencies::collection()`. It demonstrates adding individual dependencies with placeholders and types using the `add` and `setType` methods.

```php
SpotlightCommandDependencies::collection()
    ->add(SpotlightCommandDependency::make('team')->setPlaceholder('For which team do you want to create a user?'))
    ->add(SpotlightCommandDependency::make('foobar')->setPlaceholder('Input from user')->setType(SpotlightCommandDependency::INPUT));
```

--------------------------------

### Publish and Configure Spotlight

Source: https://context7.com/wire-elements/spotlight/llms.txt

Publish the configuration file for Wire Elements Spotlight to customize settings like keyboard shortcuts, command registration, and asset inclusion. This command makes the configuration file available for modification.

```bash
php artisan vendor:publish --tag=livewire-ui-spotlight-config
```

--------------------------------

### Register Commands in Service Provider (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Register commands programmatically within a service provider using the `Spotlight::registerCommand()` method. This allows for more dynamic registration, including conditional registration using `registerCommandIf()` and `registerCommandUnless()`.

```php
use \App\SpotlightCommands\CreateUser;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Spotlight::registerCommand(CreateUser::class);

        // You can also register commands conditionally
        Spotlight::registerCommandIf(true, CreateUser::class);
        Spotlight::registerCommandUnless(false, CreateUser::class);
    }

}

```

--------------------------------

### Register Commands in Config File (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Register custom commands by adding their class names to the 'commands' array in the `livewire-ui-spotlight.php` configuration file. This is a straightforward way to make commands available in Spotlight.

```php
<?php

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

```

--------------------------------

### PHP Spotlight Command: Search and View User

Source: https://context7.com/wire-elements/spotlight/llms.txt

This PHP code defines a Spotlight command to search for users, optionally filtering by department. It includes methods for defining dependencies, searching departments and users, executing the command by redirecting to a user profile, and controlling command visibility based on user permissions.

```php
<?php

namespace App\Spotlight;

use App\Models\User;
use App\Models\Department;
use Illuminate\Http\Request;
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;
use LivewireUI\Spotlight\SpotlightCommandDependencies;
use LivewireUI\Spotlight\SpotlightCommandDependency;
use LivewireUI\Spotlight\SpotlightSearchResult;

class SearchAndViewUser extends SpotlightCommand
{
    protected string $name = 'Find User';

    protected string $description = 'Search and view user profile';

    protected array $synonyms = [
        'search user',
        'lookup employee',
        'find person',
        'user profile',
    ];

    public function dependencies(): ?SpotlightCommandDependencies
    {
        return SpotlightCommandDependencies::collection()
            ->add(
                SpotlightCommandDependency::make('department')
                    ->setPlaceholder('Filter by department (optional, press Enter to skip)...')
            )
            ->add(
                SpotlightCommandDependency::make('user')
                    ->setPlaceholder('Search for a user by name or email...')
            );
    }

    public function searchDepartment(string $query)
    {
        return Department::where('name', 'like', "%{$query}%")
            ->orderBy('name')
            ->limit(5)
            ->get()
            ->map(fn (Department $dept) => new SpotlightSearchResult(
                $dept->id,
                $dept->name,
                sprintf('%d employees', $dept->users_count)
            ));
    }

    public function searchUser(string $query, ?Department $department = null)
    {
        $usersQuery = User::query()
            ->where(function ($q) use ($query) {
                $q->where('name', 'like', "%{$query}%")
                  ->orWhere('email', 'like', "%{$query}%");
            });

        if ($department) {
            $usersQuery->where('department_id', $department->id);
        }

        return $usersQuery
            ->limit(10)
            ->get()
            ->map(fn (User $user) => new SpotlightSearchResult(
                id: $user->id,
                name: $user->name,
                description: $user->email,
                synonyms: [$user->employee_id, $user->phone]
            ));
    }

    public function execute(Spotlight $spotlight, User $user, ?Department $department = null): void
    {
        $spotlight->redirectRoute('users.show', ['user' => $user->id]);
    }

    public function shouldBeShown(Request $request): bool
    {
        return $request->user()?->can('viewAny', User::class) ?? false;
    }
}

```

--------------------------------

### Create Spotlight Search Results

Source: https://context7.com/wire-elements/spotlight/llms.txt

Generate search results for Spotlight, which can include optional synonyms for fuzzy matching. Each result requires a unique ID, a display name, and an optional description. Synonyms enhance the searchability by allowing users to find results using related terms.

```php
<?php

use LivewireUI\Spotlight\SpotlightSearchResult;

// Basic search result
$result = new SpotlightSearchResult(
    id: $user->id,           // Unique identifier
    name: $user->name,       // Display name
    description: $user->email // Secondary text
);

// Search result with synonyms for better matching
$result = new SpotlightSearchResult(
    id: $product->id,
    name: $product->name,
    description: $product->category,
    synonyms: [
        $product->sku,
        $product->brand,
        ...$product->tags->pluck('name')->toArray(),
    ]
);
```

--------------------------------

### Register Commands Conditionally in Service Provider (PHP)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Shows how to register Spotlight commands within the `AppServiceProvider` using `registerCommandIf` and `registerCommandUnless` methods. This allows commands to be registered based on environment conditions or other boolean expressions.

```php
<?php

namespace App\Providers;

use App\Spotlight\AdminDashboard;
use App\Spotlight\DevTools;
use LivewireUI\Spotlight\Spotlight;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        // Always register
        Spotlight::registerCommand(AdminDashboard::class);

        // Register only if condition is true
        Spotlight::registerCommandIf(
            app()->environment('local'),
            DevTools::class
        );

        // Register unless condition is true
        Spotlight::registerCommandUnless(
            app()->isProduction(),
            \App\Spotlight\DebugMode::class
        );
    }
}

```

--------------------------------

### Control Command Visibility with `shouldBeShown` (PHP)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Demonstrates how to conditionally display a Spotlight command by implementing the `shouldBeShown` method within the command class. This method checks user permissions via the `Request` object to determine visibility.

```php
<?php

namespace App\Spotlight;

use Illuminate\Http\Request;
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;

class AdminDashboard extends SpotlightCommand
{
    protected string $name = 'Admin Dashboard';

    protected string $description = 'Access the admin control panel';

    public function execute(Spotlight $spotlight): void
    {
        $spotlight->redirect('/admin');
    }

    // Only show to users with admin permission
    public function shouldBeShown(Request $request): bool
    {
        return $request->user()?->can('access-admin-dashboard') ?? false;
    }
}

```

--------------------------------

### Search for Spotlight Command Dependency (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code shows how to implement a search method for a Spotlight command dependency. The `searchTeam` method takes a query and returns a collection of `SpotlightSearchResult` objects, which are used to populate the search results for the 'team' dependency.

```php
public function searchTeam($query)
{
    return Team::where('name', 'like', "%query%")
        ->get()
        ->map(function(Team $team) {
            return new SpotlightSearchResult(
                $team->id,
                $team->name,
                sprintf('Create license for %s', $team->name)
            );
        });
}
```

--------------------------------

### Define Spotlight Command Dependency Types

Source: https://context7.com/wire-elements/spotlight/llms.txt

Define dependencies for Spotlight commands, allowing them to be either searchable dropdowns or free-text input fields. The `SEARCH` type (default) provides a dropdown for selecting from a list, while the `INPUT` type allows for direct text entry.

```php
<?php

use LivewireUI\Spotlight\SpotlightCommandDependency;

// SEARCH type (default): Shows searchable dropdown
$teamDependency = SpotlightCommandDependency::make('team')
    ->setPlaceholder('Search for a team...')
    ->setType(SpotlightCommandDependency::SEARCH);

// INPUT type: Free-text input field
$nameDependency = SpotlightCommandDependency::make('name')
    ->setPlaceholder('Enter the new project name...')
    ->setType(SpotlightCommandDependency::INPUT);
```

--------------------------------

### Define Search Synonyms for Spotlight Commands (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This snippet shows how to add synonyms to a Spotlight command using a `$synonyms` array in PHP. Synonyms allow users to find the command using alternative search terms. This is useful for commands with multiple functionalities or common alternative names.

```php
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;

class ViewBillingSettings extends SpotlightCommand
{
    protected string $name = 'View Billing Settings';

    protected string $description = 'Update your billing settings';

    protected array $synonyms = [
        'subscription',
        'credit card',
        'payment',
    ];

    public function execute(Spotlight $spotlight): void
    {
        $spotlight->redirect('/settings/billing');
    }
}
```

--------------------------------

### Implement Conditional Command Display (PHP)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Control the visibility of a Spotlight command by implementing the `shouldBeShown` method within the command class. This method can contain logic, such as checking user permissions, to determine if the command should be displayed to the user. Dependencies can be type-hinted and will be resolved from the container.

```php
use Illuminate\Http\Request;
use LivewireUI\Spotlight\Spotlight;
use LivewireUI\Spotlight\SpotlightCommand;

class CreateUser extends SpotlightCommand
{
    protected string $name = 'Create user';

    protected string $description = 'Create new team user';

    public function execute(Spotlight $spotlight)
    {
        $spotlight->emit('openModal', 'user-create');
    }

    public function shouldBeShown(Request $request): bool
    {
        return $request->user()->can('create user');
    }
}

```

--------------------------------

### Default Spotlight Configuration

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

The default configuration array for Wire Elements Spotlight. It allows setting custom shortcuts, registering commands, and controlling the inclusion of CSS and JavaScript assets.

```php
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Shortcuts
    |--------------------------------------------------------------------------
    |
    | Define which shortcuts will activate Spotlight CTRL / CMD + key
    | The default is CTRL/CMD + K or CTRL/CMD + /
    |
    */

    'shortcuts' => [
        'k',
        'slash',
    ],

    /*
    |--------------------------------------------------------------------------
    | Commands
    |--------------------------------------------------------------------------
    |
    | Define which commands you want to make available in Spotlight.
    | Alternatively, you can also register commands in your AppServiceProvider
    | with the Spotlight::registerCommand(Logout::class); method.
    |
    */

    'commands' => [
        \LivewireUI\Spotlight\Commands\Logout::class
    ],

    /*
    |--------------------------------------------------------------------------
    | Include CSS
    |--------------------------------------------------------------------------
    |
    | Spotlight uses TailwindCSS, if you don't use TailwindCSS you will need
    | to set this parameter to true. This includes the modern-normalize css.
    |
    */
    'include_css' => false,

    /*
    |--------------------------------------------------------------------------
    | Include JS
    |--------------------------------------------------------------------------
    |
    | Spotlight will inject the required Javascript in your blade template.
    | If you want to bundle the required Javascript you can set this to false
    | run `npm install --save fuse.js` and add `require('vendor/wire-elements/spotlight/resources/js/spotlight');`
    | to your script bundler like webpack.
    |
    */
    'include_js' => true,
];

```

--------------------------------

### Generate a New Spotlight Command (Artisan)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Use the provided Artisan command to generate the boilerplate code for a new Wire Elements Spotlight command. This command creates a new PHP class that extends `SpotlightCommand`.

```bash
php artisan make:spotlight NavigateToSettings
```

--------------------------------

### Configure Spotlight Settings (PHP)

Source: https://context7.com/wire-elements/spotlight/llms.txt

Customize Wire Elements Spotlight's behavior by editing the published configuration file. You can set keyboard shortcuts, register custom commands, and control CSS/JS inclusion.

```php
// config/livewire-ui-spotlight.php
<?php

return [
    // Keyboard shortcuts: CTRL/CMD + key
    'shortcuts' => [
        'k',      // CTRL/CMD + K
        'slash',  // CTRL/CMD + /
    ],

    // Register commands globally
    'commands' => [
        \App\Spotlight\SearchUsers::class,
        \App\Spotlight\NavigateToSettings::class,
        \LivewireUI\Spotlight\Commands\Logout::class,
    ],

    // Enable if not using TailwindCSS
    'include_css' => false,

    // Set to false if bundling JS yourself
    'include_js' => true,

    // Show all commands before user types anything
    'show_results_without_input' => false,
];
```

--------------------------------

### Include Alpine.js CDN for Livewire v2

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This script tag includes the Alpine.js CDN, which is a requirement for Spotlight when using Livewire version 2. Ensure this is included in your HTML to enable Alpine.js functionality.

```html
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Dispatch Event to Toggle Spotlight (Livewire v3)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code snippet shows how to toggle the Spotlight input bar from a Livewire component using the `dispatch` helper for Livewire v3. This provides a consistent way to control Spotlight programmatically.

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

--------------------------------

### Publish Spotlight Translations

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Publishes the translation file for Wire Elements Spotlight. This allows you to modify default strings, such as the placeholder text displayed in the search input.

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

--------------------------------

### Publish Spotlight Views

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Publishes the view files for Wire Elements Spotlight. This enables customization of the Spotlight UI by allowing you to modify the Blade templates.

```shell
php artisan vendor:publish --tag=livewire-ui-spotlight-views
```

--------------------------------

### Toggle Spotlight Programmatically

Source: https://context7.com/wire-elements/spotlight/llms.txt

Control the visibility of the Spotlight UI from Livewire components, Alpine.js, or vanilla JavaScript by dispatching a custom event. This allows for dynamic opening and closing of the Spotlight interface based on user interactions or application logic.

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class SearchButton extends Component
{
    public function openSpotlight(): void
    {
        $this->dispatch('toggle-spotlight');
    }

    public function render()
    {
        return view('livewire.search-button');
    }
}
```

```html
<!-- Using Alpine.js dispatch -->
<button
    @click="$dispatch('toggle-spotlight')"
    class="btn btn-primary"
>
    Search Commands (Cmd+K)
</button>

<!-- Using wire:click -->
<button wire:click="openSpotlight">
    Open Spotlight
</button>

<!-- Using vanilla JavaScript -->
<button onclick="window.dispatchEvent(new CustomEvent('toggle-spotlight'))">
    Toggle Spotlight
</button>
```

--------------------------------

### Add Livewire Directive for Spotlight

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

Include the Livewire directive `@livewire('livewire-ui-spotlight')` in your HTML layout to render the Spotlight component. This makes the Spotlight input bar available on your pages.

```html
<html>
<body>
<!-- content -->

@livewire('livewire-ui-spotlight')
</body>
</html>
```

--------------------------------

### Dispatch Browser Event to Toggle Spotlight (Livewire v2)

Source: https://github.com/wire-elements/spotlight/blob/2.0/README.md

This PHP code snippet demonstrates how to toggle the Spotlight input bar from a Livewire component using `dispatchBrowserEvent` for Livewire v2. This is useful for programmatically opening or closing Spotlight.

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

--------------------------------

### Add Livewire Directive to Layout

Source: https://context7.com/wire-elements/spotlight/llms.txt

Include the Livewire directive in your application's main layout file to enable Livewire functionality and the spotlight component. Ensure `@livewireStyles` and `@livewireScripts` are present.

```html
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
    <!-- If not using TailwindCSS, enable include_css in config -->
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewire('livewire-ui-spotlight')
    @livewireScripts
</body>
</html>
```

--------------------------------

### Customize Spotlight Translations

Source: https://context7.com/wire-elements/spotlight/llms.txt

Publish and modify the translation files to customize placeholder text and other language-specific strings within the Spotlight interface. This allows for localization and branding adjustments.

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

```php
// resources/lang/vendor/livewire-ui-spotlight/en/spotlight.php
<?php

return [
    'placeholder' => 'Search commands, navigate, or take action...', 
];
```
Tokens:
Raw