Nova Swatches

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.