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

VueSwatches

v1.0.4

Help the user picking beautiful colors!

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

Please choose a color:
<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!

Please choose a color:
<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 ('').

Please choose a color:
<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.

Please choose a color:
<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

Please choose a color: 
<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

Please choose a color:
<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'

Please choose a color:
<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

Please choose a color:
<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

NameTypeDefaultExamplesDescription
background-colorString'#ffffff'
  • '#ffffff'
  • '#cccccc'
Sets the background color.
close-on-selectBooleantrue
  • true
  • false
Hides the popover after select a color.
colorsArray, 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.
exceptionsArray[]
  • ['#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-modeString'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.
disabledBooleanfalse
  • true
  • false
Set it to 'true' to disable the swatch. It won't be possible to pick another color.
fallbackInputClassArray, Object or Stringnull
  • 'primary'
  • 'is-primary'
  • 'is-info'
Sets the class for the fallback input
fallbackOkClassArray, Object or Stringnull
  • 'primary'
  • 'is-primary'
  • 'is-info'
Sets the class for the fallback button
fallbackOkTextString'Ok'
  • 'Select'
  • 'Save'
  • 'OK'
Sets the text for the fallback button
fallbackInputTypeString'text'
  • 'text'
  • 'color'
Sets the input type for the fallback input Use 'text' or 'color'
inlineBooleanfalse
  • 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-heightNumber or String300
  • '300'
  • 400
  • '600'
The maximum height for the popover.
This don't affect inline mode.
shapesString'squares'
  • 'squares'
  • 'circles'
The shape that will be used for the swatches and the trigger. Use 'circles' or 'squares'
popover-toString'right'
  • 'right'
  • 'left'
Set the position of the popover. Use 'right' or 'left'
This don't affect inline mode.
row-lengthNumber or String4
  • 10
  • 6
  • '8'
The number of swatches to show in a row.
This don't affect inline mode.
show-borderBooleanfalse
  • true
  • false
Whether the swatches should be showing borders or not.
Useful for making lighter colors more noticeable.
show-fallbackBooleanfalse
  • true
  • false
Shows an input to change the color from there as well.
Useful for custom color codes.
swatch-sizeNumber or String42
  • 30
  • '24'
  • '36'
Sets the swatches size.
swatch-styleObject or Array{}
  • { width: '32px', height: '32px' }
  • { borderRadius: '10px' }
  • { padding: '16px 12px' }
Sets the inline style for every swatch
trigger-styleObject or Array{}
  • { width: '32px', height: '32px' }
  • { borderRadius: '10px' }
  • { padding: '16px 12px' }
Sets the inline style for the trigger
wrapper-styleObject or Array{}
  • { paddingLeft: '32px' }
  • { backgroundColor: '#ccc' }
  • { paddingRight: '12px' }
Sets the inline style for the wrapper
valueStringnull
  • '#1b22ee'
  • ''
  • '#fc2343'
Sets the selected color. Use `''` for transparent/no-color.

Events

NamePayloadDescription
@inputvalueEmitted after when this.value changes
@openEmitted when the popover is opened.
@closevalueEmitted when the popover is closed.

Slots

NameDescription
triggerUse to replace the trigger.
Useful for showing custom icons, buttons or inputs.

Created by Diego Jara