README

A beautiful color picking field for Laravel Nova. Uses vue-swatches.

Screenshots

Installation

You can install the package into a Laravel application that uses Nova via composer:

composer require ynacorp/nova-swatches 

Usage

Just use the Swatches field in your Nova resource:

namespace App\Nova; use Yna\NovaSwatches\Swatches; class Article extends Resource { // ... public function fields(Request $request) { return [ // ... Swatches::make('Color'), // ... ]; } }

Customization

Presets

vue-swatches provides a few color presets out of the box.

 public function fields(Request $request) { return [ // ... // material-basic is a basic collection of material colors. Swatches::make('Color')->colors('material-basic'), // ... ]; }

Try switching between material-basic, text-basic, text-advanced, material-light and material-dark.

If you're not satisfied with the presets, keep customizing as shown below.

Palettes

You can also provide an array of colors for the user to pick from.

 public function fields(Request $request) { return [ // ... // material-basic is a basic collection of material colors. Swatches::make('Color')->colors(['#ffffff', '#000']), // ... ]; }

Anything else...

vue-swatches is extremely customizable, you can pass an array of props directly to it:

 public function fields(Request $request) { return [ // ... Swatches::make('Color') ->withProps([ 'colors' => ["#4ae2c4", "#4fccff", "#41c84d"], 'show-fallback' => true, 'fallback-type' => 'input', 'popover-to' => 'left', // More options at https://saintplay.github.io/vue-swatches/api/props.html ]), // ... ]; }

Check out vue-swatches' props section for more options.

Configuration

While the Swatches component can be configured fluently, you can also set the defaults by publishing the package's config:

php artisan vendor:publish --tag=config --provider=Yna\\NovaSwatches\\FieldServiceProvider 

Now edit file at the config/nova/swatches.php to customize the preferred defaults for your project:

<?php return [ /**  * Props to pass to the vue-swatches component.  *  * See https://saintplay.github.io/vue-swatches/api/props.html  */ 'props' => [ 'colors' => 'basic', // Preset // 'colors' => 'material-basic', // Preset // 'colors' => ['#ffffff', '#000'], // Array // 'show-fallback' => true, // 'fallback-input-type' => 'input', // Or "color" ] ];

Contribution

We'd be glad to accept any contributions to Nova Swatches.