picnic-yu / vue-color

:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more

vue-color

Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).

Live demo

Installation

NPM

$ npm install vue-color

CommonJS

var Photoshop = require('vue-color/src/Photoshop.vue');

new Vue({
  components: {
    'Photoshop': Photoshop
  }
})

ES6

import { Photoshop } from 'vue-color'

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

Browser globals

The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.

<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
  var Photoshop = VueColor.Photoshop
</script>

Local setup

npm install
npm run dev

Usage

var defaultProps = {
  hex: '#194d33',
  hsl: {
    h: 150,
    s: 0.5,
    l: 0.2,
    a: 1
  },
  hsv: {
    h: 150,
    s: 0.66,
    v: 0.30,
    a: 1
  },
  rgba: {
    r: 25,
    g: 77,
    b: 51,
    a: 1
  },
  a: 1
}

new Vue({
  el: '#app',
  components: {
    'material-picker': material,
    'compact-picker': compact,
    'swatches-picker': swatches,
    'slider-picker': slider,
    'sketch-picker': sketch,
    'chrome-picker': chrome,
    'photoshop-picker': photoshop
  },
  data: {
    colors: defaultProps
  }
})

<!-- suppose you have the data 'colors' in your component -->
<material-picker v-model="colors" @change-color="onChange"></material-picker>
<material-picker v-model="colors" @change-color="onChange"></material-picker>
<compact-picker v-model="colors" @change-color="onChange"></compact-picker>
<swatches-picker v-model="colors" @change-color="onChange"></swatches-picker>
<slider-picker v-model="colors" @change-color="onChange"></slider-picker>
<sketch-picker v-model="colors" @change-color="onChange"></sketch-picker>
<chrome-picker v-model="colors" @change-color="onChange"></chrome-picker>
<photoshop-picker v-model="colors" @change-color="onChange"></photoshop-picker>

// onChange method called when the event 'change-color' is emitted
onChange (val) {
  this.colors = val
}

TODO

-[] docs -[] more components

License

vue-color is licensed under The MIT License.