README

已弃用

从 Filament v2.10.45 版本开始，内置了颜色选择器。因此，我决定弃用此包，并鼓励大家使用 内置的颜色选择器。感谢大家的支持、错误报告和拉取请求 ❤️

Filament Color Picker 是一个用于 Laravel Filament 的包，它将 Vanilla Picker 封装成一个可用的组件。

安装

您可以通过 composer 安装此包

composer require rvxlab/filament-colorpicker

可选地，您可以发布视图

php artisan vendor:publish --tag=filament-colorpicker-views

使用方法

在资源的 forms 方法中引用 RVxLab\FilamentColorPicker\Forms\ColorPicker 即可。

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color'),
        ]);
}

以下所有选项都与 Vanilla Picker 文档 中的选项相对应。

编辑器格式

默认值： EditorFormat::HEX()

设置颜色选择器的编辑器格式。

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->editorFormat(\RVxLab\FilamentColorPicker\Enum\EditorFormat::HSL()),
        ]);
}

您也可以传递 EditorFormat 枚举的字符串值。

弹出位置

默认值： PopupPosition::RIGHT()

可以使用 popupPosition 设置弹出位置。

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->popupPosition(\RVxLab\FilamentColorPicker\Enum\PopupPosition::BOTTOM()),
        ]);
}

您也可以传递 PopupPosition 枚举的字符串值。

您还可以完全禁用弹出，此时弹出将变成元素的一部分

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->disablePopup(),
        ]);
}

Alpha

默认：true

可以通过 alpha 启用或禁用 alpha 通道

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->alpha(false),
        ]);
}

需要注意的一个重要事项是，alpha 设置也会改变验证。

启用 alpha 通道将验证输出为 8 位十六进制字符串，禁用则验证为 6 位十六进制字符串。

预览

默认：false

可以通过 preview 启用或禁用颜色预览

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->preview(),
        ]);
}

布局

默认： "default"

可以使用 layout 更改布局

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->layout('my-layout'),
        ]);
}

取消按钮

默认：false

可以通过 cancelButton 启用或禁用取消按钮

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->cancelButton(true),
        ]);
}

模板

默认：null

发布视图后，默认模板可在 views/vendor/filament-colorpicker/template.blade.php 中找到。

要修改，只需更改此模板，然后将其作为 View 对象传递给 template 方法。

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->template(view('filament-colorpicker::template')),
        ]);
}

您还可以直接传递一个HTML字符串，然后将其原样传递给选项。

防抖超时

默认值：500

防抖超时（毫秒），此选项仅在弹出窗口被禁用时适用。

当弹出窗口启用时，此选项不执行任何操作。

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->debounceTimeout(1000),
        ]);
}

可空

默认：false

要使颜色选择器可空，您可以调用nullable方法

public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->nullable(),
        ]);
}

已知问题

由于Vanilla Picker没有正确处理空值，取消选择后的颜色选择器的默认初始值将为#000000或#00000000，具体取决于alpha设置。

更新选择器或保存表单后，此问题将消失。

颜色样本

要在表中显示颜色样本，您可以添加以下列

public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color'),
        ]);
}

复制

注意：这使用了剪贴板API。

您可以在列上调用copyable方法

public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable(),
        ]);
}

当设置时，点击颜色样本将导致当前颜色被复制到剪贴板。

设置复制消息

默认值："已复制！"

您可以使用copyMessage方法更改复制消息

public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable()
                ->copyMessage('Color copied to clipboard!'),
        ]);
}

更改消息超时

默认值：2000

要更改消息显示的持续时间，您可以使用copyMessageShowTimeMs方法

public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable()
                ->copyMessageShowTimeMs(500),
        ]);
}

变更日志

请参阅CHANGELOG获取有关最近更改的更多信息。

升级到1.x

唯一的破坏性更改是，此包现在依赖于filament/filament:^2.0，除此之外没有其他破坏性更改。

如果您过去发布了JavaScript文件，您可以将其删除，该文件现在通过Filament直接加载

贡献

对于开发，此存储库包含一个Docker Compose文件，提供所有所需的工具，以及一个Makefile来运行有用的命令。

要使用此功能，请确保您已安装Docker和Docker Compose。

要开始

make dcbuild # Build the Docker image
make start # Run the container
make composer cmd=install

此外，您还可以复制并修改docker-compose.override.yml.dist以添加对工作区容器所需的任何其他更改。

请参阅CONTRIBUTING获取详细信息。

致谢

• RVxLab
• 所有贡献者

许可证

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