Vue Swatches 2 is out! Make sure to check the migration guide!

VueSwatches

v1.0.4

Help the user picking beautiful colors!

Setup
Getting Started
Examples
Simple
Using a Preset
Using a Custom Trigger
Custom Colors
Nested Colors
Inline Mode
Inline + Custom UI
Using Exceptions
Fallback Input
Fallback Input + ColorPicker
Presets
Basic
Text
Material Colors
API
Props
Events
Slots

Getting started

Installation

via npm

npm install vue-swatches --save

via yarn

yarn add vue-swatches

via CDN

<link rel="stylesheet" href="https://unpkg.com/vue-swatches@1/dist/vue-swatches.min.css">
<script src="https://unpkg.com/vue-swatches@1"></script>

Basic usage

<!-- Vue component -->
<template>
  <div>
    <swatches v-model="color" />
  </div>
</template>

<script>
  import Swatches from 'vue-swatches'

  // Import the styles too, globally
  import "vue-swatches/dist/vue-swatches.min.css"

  export default {
    components: { Swatches }, // window.VueSwatches.default - from CDN
    data () {
      return {
        color: '#1CA085'
      }
    }
  }
</script>

Examples

Simple


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches v-model="color" popover-to="left"></swatches>
  </div>
</div>

Using a Preset

Vue Swatches has a bunch of presets ready to use. Make sure to check it out!


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches v-model="color" colors="text-advanced" popover-to="left"></swatches>
  </div>
</div>

Using a Custom Trigger

You can use your custom trigger. Useful to show buttons, icons, custom inputs!


<div class="form__field">
  <div class="form__input">
    <swatches v-model="color">
      <input slot="trigger" :value="color" class="form__input__element" readonly>
    </swatches>
  </div>
</div>

Custom Colors

Remember to use always 6-digits hexadecimal colors.

If you want to provide a transparent/no-color option you can use a empty string ('').


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches
      v-model="color"

      :colors="colors"

      row-length="6"
      shapes="circles"
      show-border
      popover-to="left"
    ></swatches>
  </div>
</div>

import Swatches from 'vue-swatches'

export default {
  components: {
    Swatches
  },
  data () {
    return {
      color: '#F64272',
      colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
    }
  }
}

Nested Colors

You can use your own colors in a nested arrays.


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches v-model="color" :colors="colors" row-length="5" popover-to="left"></swatches>
  </div>
</div>

import Swatches from 'vue-swatches'

export default {
  components: {
    Swatches
  },
  data () {
    return {
      color: '#b9f5f1',
      colors: [
        ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5' ],
        ['#8b5aff', '#a27bff', '#b99cff', '#d0bdff', '#e8deff' ],
        ['#51e5db', '#74ebe3', '#96f0ea', '#b9f5f1', '#dcfaf8' ],
        ['#ffa51a', '#ffb748', '#ffc976', '#ffdba3', '#ffedd1' ]
      ]
    }
  }
}

Inline Mode

Inline Mode hides the trigger and show all the swatches right away! Useful for Advanced UI


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
    <swatches v-model="color" inline></swatches>
  </div>
</div>

Inline + Custom UI


<div class="form__field">
  <div class="form__label">
    <button @click="$modal.show('my-custom-ui')">Please choose a color</button>
    <modal name="my-custom-ui" :adaptive="true" height="192">
      <div class="custom-ui-class">
        <swatches v-model="color" inline></swatches>
      </div>
    </modal>
  </div>
</div>

Using Exceptions

You can hide or disable colors, using exceptions and exception-mode


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches
      v-model="color"
      colors="text-basic"

      :exceptions="exceptions"
      exception-mode="disabled"

      row-length="4"
      show-border
      popover-to="left"
    ></swatches>
  </div>
</div>

import Swatches from 'vue-swatches'

export default {
  components: {
    Swatches
  },
  data () {
    return {
      color: '#FFCC00',
      exceptions: ['#FFFFFF', '#000000']
    }
  }
}

Fallback Input

If your user wants to use its own color you can use a fallback input and customizing it with fallback-input-class, fallback-ok-class and 'fallback-ok-text'


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches
      v-model="color"

      show-fallback

      popover-to="left"
    ></swatches>
  </div>
</div>

Fallback Input + ColorPicker

You can set the fallback input type to color and get a visual color picker interface


<div class="form__field">
  <div class="form__label">
    <strong>Please choose a color:</strong>
  </div>
  <div class="form__input">
    <swatches
      v-model="color"

      show-fallback
      fallback-input-type="color"

      popover-to="left"
    ></swatches>
  </div>
</div>

Presets

Basic

Basic Colors (basic)

A basic collection of colors for general purposes.

Text

Basic Colors for Text (text-basic)

A basic collection of colors for styling text.

This preset also sets showBorder

Advanced Colors for Text (text-advanced)

A complete collection of colors for styling text. This preset uses nested colors.
Inspired by Google Docs

This preset also sets borderRadius, rowLength, swatchSize and spacingSize

Material Colors

Basic Material Colors (material-basic)

A basic collection of material colors.

Light Material Colors (material-light)

A basic collection of light material colors. Useful to show dark text inside.

Dark Material Colors (material-dark).

A basic collection of dark material colors. Useful to show light text inside.

Props

Name	Type	Default	Examples	Description
background-color	`String`	`'#ffffff'`	`'#ffffff'` `'#cccccc'`	Sets the background color.
close-on-select	`Boolean`	`true`	`true` `false`	Hides the popover after select a color.
colors	`Array`, `Object` or `String`	`'basic'`	`'material-light'` `'text-advanced'`	The colors that will be shown in the swatches. You should always use 6-digits hex colors. Use an `Array` for custom colors or custom nested colors. Use an `String` for preset names. Use an `Object` for preset Objects.
exceptions	`Array`	`[]`	`['#ffffff', '#000000']` `['#f102a3', '#1b22ee', '#fc2343']`	Colors that will be excluded. You should always use 6-digits hex colors. Use an `Array` for custom colors or custom nested colors. Use a `String` for preset names. Use an `Object` for preset Objects.
exception-mode	`String`	`'disabled'`	`'disabled'` `'hidden'`	The behaviour of the exceptions. Use `'disabled'` or `'hidden'` Use `'disabled'` to disable the exceptions. User won't be able to pick the color. Use `'hidden'` to hide the exceptions. User won't be able to see the color.
disabled	`Boolean`	`false`	`true` `false`	Set it to `'true'` to disable the swatch. It won't be possible to pick another color.
fallbackInputClass	`Array`, `Object` or `String`	`null`	`'primary'` `'is-primary'` `'is-info'`	Sets the class for the fallback input
fallbackOkClass	`Array`, `Object` or `String`	`null`	`'primary'` `'is-primary'` `'is-info'`	Sets the class for the fallback button
fallbackOkText	`String`	`'Ok'`	`'Select'` `'Save'` `'OK'`	Sets the text for the fallback button
fallbackInputType	`String`	`'text'`	`'text'` `'color'`	Sets the input type for the fallback input Use `'text'` or `'color'`
inline	`Boolean`	`false`	`true` `false`	Wheter the swatches should be shown in a popover or not (inline). Use Inline to hide the trigger and show the swatches right away. Use Popover to show the swatches in a Popover after clicking the trigger.
max-height	`Number` or `String`	`300`	`'300'` `400` `'600'`	The maximum height for the popover. This don't affect inline mode.
shapes	`String`	`'squares'`	`'squares'` `'circles'`	The shape that will be used for the swatches and the trigger. Use `'circles'` or `'squares'`
popover-to	`String`	`'right'`	`'right'` `'left'`	Set the position of the popover. Use `'right'` or `'left'` This don't affect inline mode.
row-length	`Number` or `String`	`4`	`10` `6` `'8'`	The number of swatches to show in a row. This don't affect inline mode.
show-border	`Boolean`	`false`	`true` `false`	Whether the swatches should be showing borders or not. Useful for making lighter colors more noticeable.
show-fallback	`Boolean`	`false`	`true` `false`	Shows an input to change the color from there as well. Useful for custom color codes.
swatch-size	`Number` or `String`	`42`	`30` `'24'` `'36'`	Sets the swatches size.
swatch-style	`Object` or `Array`	`{}`	`{ width: '32px', height: '32px' }` `{ borderRadius: '10px' }` `{ padding: '16px 12px' }`	Sets the inline style for every swatch
trigger-style	`Object` or `Array`	`{}`	`{ width: '32px', height: '32px' }` `{ borderRadius: '10px' }` `{ padding: '16px 12px' }`	Sets the inline style for the trigger
wrapper-style	`Object` or `Array`	`{}`	`{ paddingLeft: '32px' }` `{ backgroundColor: '#ccc' }` `{ paddingRight: '12px' }`	Sets the inline style for the wrapper
value	`String`	`null`	`'#1b22ee'` `''` `'#fc2343'`	Sets the selected color. Use `''` for transparent/no-color.

Events

Name	Payload	Description
@input	`value`	Emitted after when `this.value` changes
@open		Emitted when the popover is opened.
@close	`value`	Emitted when the popover is closed.

Slots

Name	Description
trigger	Use to replace the trigger. Useful for showing custom icons, buttons or inputs.