This package allows you to build a Livewire spotlight search.
You can install the package via composer:
composer require tnt-freskim-veliu/livewire-spotlight-searchThis package uses livewire/livewire (https://laravel-livewire.com/) under the hood.
It also uses TailwindCSS (https://tailwindcss.com/) for base styling, and Alpine JS (https://alpinejs.dev/) for reactivity.
Please make sure you include all of them dependencies before using this component.
In order to use this component, first you have to include script directive:
@livewireSpotlightSearchScript
and then you can put the component: <livewire:spotlight-search />
after you have to publish config file:
php artisan vendor:publish --tag=livewire-spotlight-search-configin the config you have to fill searchable key with classes that implements Searchable contract.
Example you can declare the UserSearch class that will handle the search.
return [
'searchable' => 'App\SpotlightSearch\UserSearch'
];Each class must include these methods like in example:
class UserSearch implements Searchable
{
public function search(string $query): array
{
return User::query()
->where('name', 'LIKE', "%$query%")
->take(25)
->get()
->toArray();
}
public function group()
{
return "Users";
}
public function onSelect($id, Component $component)
{
//handle logic when the item is clicked
}
}The search modal can be open in many ways:
Cmd+k
Cmd+/ or by dispatching a browser event with name open-spotlight.
Please don't forget to change tailwind.config.js content part, by adding:
./vendor/tnt-freskim-veliu/resources/views/*.blade.php, so tailwind will recognise the classes that we use.
Currently we support the dark mode and light mode by passing:
:on-dark-mode="bool""
- Add functionality to navigate inside items with keyup and keydown.
- Add command that will create spotlight search classes
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] or use the issue tracker.
The MIT License (MIT). Please see License File for more information.