timothyasp / nova-color-field

Simple Laravel Nova Color Picker Field

Laravel Nova Color Field

Now works with Laravel Nova v4!

---

If you still are using Nova v1-v3, use v1.0.4 of this field.

Dead simple Laravel Nova Color field. Includes a color picker from the vue-color component.

Details Page

Index

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require timothyasp/nova-color-field

Usage

In your resource class, add the following to your fields method:

use Timothyasp\Color\Color;

....

Color::make("Field");

This will add the color picker to your resource, using vue-color's "slider" component by default. If you'd like to leverage another vue-color component, you can do so by calling that component's name as a method after Color::make():

use Timothyasp\Color\Color;

....

Color::make('Field')->compact()
// or
Color::make('Field')->slider()

and so on. You can use any one of: chrome, compact, grayscale, material, photoshop, sketch, slider, swatches, twitter.

Palette support for adding custom colors to some of the pickers is also available:

Color::make('Field')->compact()->palette(['#beaf00', '#DEADAF', '#000']);

Credits

• Timothy Asp
• Don Gilbert
• marvinrabe]

Built for QuizGriz - the #1 online trivia and quiz game site

License

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

nova-color-field's Issues

onClick appearance

hello!

I don't know if it's designed like this by default, but my colorpicker is always showing, is there a way to make it appear on click only ?

thank you :)

Allow empty values

Hi,

Would it be possible to have an empty value instead of "#ffffff" as the default? Users could always use the nova ->default() method on the field if they wanted to have a default.

My issue is that we have fields that are meant to be blank by default. Then only if a user enters a color, we then use that value. With the Nova 4 update, everything is hardcoded to white by default which causes issues 😅

[suggestion] Add the require instructions

To autoload field type Color you should put

use Timothyasp\Color\Color;

at the top of your Resource file in Nova.
Otherwise it will fire an error:

Class 'App\Nova\Color' not found

Cannot copy hex color into field in Nova 4

I've just updated to Nova 4 and want to keep using this project over Nova's own color field.

One issue I have though, is that I can no longer copy-paste colors into the field. As the gif below shows the field ignores the first copy paste (not populating at all). It accepts the next one but doesn't update the preview color. If I try to save the resource then just white (#ffffff) saves.

Empty value selects black from palette

If the field is initialised with (or edited to) an empty string, and I am using the compact component, for some reason the #000000 (eg the black) swatch appears to be selected?

Notice in this image all 3 color fields are empty, and yet for some reason the black swatch is selected:

Is this an issue with nova-color-field or the underlying vue-color component?

Help text is not displayed

When adding help text to the element in Nova, the help text is not displayed inside of the admin area.

e.g.:

Color::make(__('Colour'), 'colour')
    ->help(__('Help text here that should be shown.'))
    ->slider()

The text inside the help call is not shown on the forms.

RGBA value instead HEX for some cases

Thanks for this plugin. However is there any possibility for RGBA (mainly Alpha support) format string value? Thanks again.

Default Colors in compact

Hi,

I 've been trying to add a color field with a predefined set of colors (presets) as per https://github.com/xiaokaike/vue-color.

Is there any way we can achieve this?

Best,
Nick

Nova 4 Support: We get the following incompatible interface implementation error

Declaration of Timothyasp\Color\Color::compact() must be compatible with Laravel\Nova\Fields\Field::compact(bool $compact = true)

Placeholder Support?

Hi there,

Is there any placeholder support for this field? The out-of-the-box Nova ->placeholder() doesn't seem to be working.

Color::make('Color')->withMeta([
    'extraAttributes' => [
        'placeholder' => '#FFFFFF',
    ],
]),

Color::make('Color')->placeholder("#FFFFFF"),

Color::make('Color')->placeholder("Hello World"),

Getting errors when using

Does not seem to work for me, using laravel nova 1.0.6.

After installing and using the Color field I get these errors:

nova-api/scripts/color 500 (Internal Server Error)
nova-api/styles/color 500 (Internal Server Error)