tnt-freskim-veliu/livewire-spotlight-search

Laravel Livewire 突出搜索组件

维护者

详细信息

github.com/tnt-freskim-veliu/livewire-spotlight-search

源代码

问题

安装: 16

依赖: 0

建议者: 0

安全: 0

星标: 2

关注者: 1

分支: 0

开放问题: 0

1.0.5 2022-06-12 15:46 UTC

Requires

  • php: ^7.4|^8.1

MIT 161175b34e626ccf60c65dcfff0fdf6f046e5783

  • Freskim Veliu <freskim.veliu.woop@gmail.com>

searchlivewirefreskim-veliulivewire-spotlight-search

This package is auto-updated.

Last update: 2024-09-04 16:24:37 UTC

README

此软件包允许您构建 Livewire 突出搜索。

安装

您可以通过 composer 安装此软件包

composer require tnt-freskim-veliu/livewire-spotlight-search

要求

此软件包在底层使用 livewire/livewire (https://laravel-livewire.com/)。

它还使用 TailwindCSS (https://tailwind.org.cn/) 进行基本样式，以及 Alpine JS (https://alpinejs.dev/) 进行响应性。

在使用此组件之前，请确保包含所有依赖项。

用法

为了使用此组件，首先您需要包含脚本指令：@livewireSpotlightSearchScript

然后您可以将组件放入：<livewire:spotlight-search />

之后，您需要发布配置文件

php artisan vendor:publish --tag=livewire-spotlight-search-config

在配置中，您需要填写可搜索键，其中包含实现 Searchable 合约的类。

例如，您可以声明一个 UserSearch 类来处理搜索。

return [
    'searchable' => 'App\SpotlightSearch\UserSearch'
];

每个类都必须包含以下方法，如示例所示

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
    }
}

搜索模式可以通过多种方式打开： Cmd+k Cmd+/ 或通过派发具有名称 open-spotlight 的浏览器事件。

请记住更改 tailwind.config.js 的内容部分，通过添加： ./vendor/tnt-freskim-veliu/resources/views/*.blade.php，以便 Tailwind 识别我们使用的类。

目前我们支持暗黑模式和亮模式，通过传递： :on-dark-mode="bool""

待办事项

  • 添加使用keyup和keydown在项目内导航的功能。
  • 添加创建突出搜索类的命令。

更新日志

有关最近更改的更多信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何安全相关的问题，请通过freskim.veliu@gmail.com 或使用问题跟踪器发送电子邮件。

鸣谢

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。