Download the PHP package rvxlab/filament-colorpicker without Composer

Filament Color Picker

Deprecated

As of Filament v2.10.45 there's a built-in colour picker. Because of that I decided to deprecate this package and encourage everyone to use the built-in colour picker instead. Thank you all for the support, bug reports and pull requests ❤️

Filament Color Picker is a package for Laravel Filament that wraps Vanilla Picker into a usable component.

Installation

You can install the package via composer:

Optionally you can publish the views:

Usage

Reference RVxLab\FilamentColorPicker\Forms\ColorPicker in the forms method of a resource and you're good to go!

All options below are analogous to the ones in the Vanilla Picker documentation.

Editor format

Default: EditorFormat::HEX()

Set the editor format of the color picker.

You may also pass the string values of the EditorFormat enum.

Popup placement

Default: PopupPosition::RIGHT()

The popup placement can be set using popupPosition:

You may also pass the string values of the PopupPosition enum.

You can also disable the popup entirely in which the popup just becomes part of the element itself:

Alpha

Default: true

The alpha channel can be enabled or disabled by using alpha:

An important thing to note is that the alpha setting also changes the validation.

Having the alpha channel enabled will validate the output as an 8-digit hex string, disabling will validate it as a 6-digit hex string.

Preview

Default: false

The color preview can be enabled or disabled by using preview:

Layout

Default: "default"

The layout can be changed by using layout:

Cancel button

Default: false

The cancel button can be enabled or disabled by using cancelButton:

Template

Default: null

The default template can be found in views/vendor/filament-colorpicker/template.blade.php after you publish the views.

To make changes, simply change this template and then pass a View object to the template method:

You can also pass an HTML string directly, which then gets fed to the options as is.

Debounce timeout

Default: 500

The debounce timeout in milliseconds, this option is only applicable when the popup has been disabled.

When the popup is enabled this option does nothing.

Nullable

Default: false

To make the color picker nullable you can call the nullable method:

Known issue

Because Vanilla Picker does not handle null values properly the default initial value of a null-ed picker will be #000000 or #00000000 depending on the alpha setting.

This goes away when the picker is updated or the form is saved.

Color swatch

To display a swatch on the table you can add the following column:

Copying

Note: this makes use of the clipboard API.

You can call the copyable method on the column:

When set, clicking on the swatch will cause the current color to be copied to the clipboard.

Set the copy message

Default: "Copied!"

You can change the copy message by using the copyMessage method:

Change the message timeout

Default: 2000

To change the length of time the message appears you can use the copyMessageShowTimeMs method:

Changelog

Please see CHANGELOG for more information on what has changed recently.

Upgrading to 1.x

The only breaking change is that this package now relies on filament/filament:^2.0, other than that there are no breaking changes.

If you published the JavaScript file in the past you can delete it, the file is now loaded through Filament directly

Contributing

For development this repository contains a Docker Compose file to provide all the tools needed, as well as a Makefile to run useful commands.

To make use of this, ensure you have Docker and Docker Compose installed.

To get started:

Additionally you can copy and modify docker-compose.override.yml.dist to add any additional changes needed for the workspace container.

Please see CONTRIBUTING for details.

Credits

• RVxLab
• All Contributors

License

The MIT License (MIT). Please see License File for more information.