Zipify-colorpicker NPM

Zipify ColorPicker

Vue 2.0 Zipify Color Picker component

intro

Installation

NPM

$ npm install zipify-colorpicker

Yarn

$ yarn add zipify-colorpicker

CommonJS

const { ZipifyColorPicker } = require('zipify-colorpicker');

new Vue({
  components: {
    ZipifyColorPicker
  }
})

ES6

import { ZipifyColorPicker } from 'zipify-colorpicker'

new Vue({
  components: {
    ZipifyColorPicker
  }
})

Browser globals

The dist folder contains zipify-colorpicker.js and zipify-colorpicker.min.js with all components exported in the window.ZipifyColorPicker object. These bundles are also available on NPM/Yarn packages.

<script src="path/to/vue.js"></script>
<script src="path/to/zipify-colorpicker.min.js"></script>
<script>
  const { ZipifyColorPicker } = window.ZipifyColorPicker
</script>

Local setup

npm install
npm run dev

Usage

var color = '#0f0';      //hex3
// or
var color = '#0f08';     //hex4
// or
var color = '#00ff00';   //hex6
// or
var color = '#00ff0088'; //hex8
// or
var color = 'rgba(0, 255, 0)'; //rgb
// or
var color = 'rgba(0, 255, 0, 0.53)'; //rgba, alpha - 0-1
// or
var color = 'rgba(0, 255, 0, 53)'; //rgba, alpha - 0-100
// or
var color = 'rgba(0, 255, 0, 53%)'; //rgba, alpha - 0-100%
// or
var color = 'red'; //color names
// or
var color = 'hsl(39, 100%, 50%)'; //hsl, s and l in %
// or
var color = 'hsl(39, 1, 0.5)'; //hsl, s and l - 0-1
// or
var color = 'hsla(39, 100%, 50%, 50%)'; //hsl,  s, l and alpha in %
// or
var color = 'hsla(39, 1, 0.5, 0.5)'; //hsl,  s, l and alpha - 0-1
// or
var color = 'hsv(39, 100%, 50%)'; //hsv, s and v in %
// or
var color = 'hsv(39, 1, 0.5)'; //hsv, s and v - 0-1
// or
var color = 'hsva(39, 100%, 50%, 50%)'; //hsva,  s, v and alpha in %
// or
var color = 'hsva(39, 1, 0.5, 0.5)'; //hsva,  s, v and alpha - 0-1

new Vue({
  el: '#app',
  components: {
    ZipifyColorPicker,
  },
  data () {
    return {
      color,
      paletteKey,
      presetColors,
      favoriteColors,
      type,
      maxPaletteColors,
      maxFavoriteColors,
      durationEnter,
      durationLeave,
      placement,
      isOverTop
    }
  }
})

<!-- suppose you have the data 'color' in your component -->
<ZipifyColorPicker
  v-model="color"
  :palette-key="paletteKey"
  :type="rgba"
  :preset-colors="presetColors"
  :max-palette-colors="7"
  :favorite-colors="favoriteColors"
  :max-favorite-colors="14"
  :duration-enter="150"
  :duration-leave="100"
  :placement="bottom-end"
  :is-over-top="isOverTop"
  @input="updateValue"
  @changeFavoriteColors="updateFavoriteColors"
>
  <template #activator="{ toggle, open }">
    <input type="text" v-model.lazy="color">
    <button type="button" :disabled="disabled" :style="bgc" class="zpc-color-preview" @click="toggle($event.target)" />
  </template>
</ZipifyColorPicker>

In some cases you can give the component a predefined palette with the property presetColors by simply passing it an array with the color values as strings in any css compatible format or you can set property paletteKey(localStorage key) and the palette will set from localStorage and you can limit the number of colors in showing palette.