Fresh installation, following the instructions, starting with running:

$ npm install vue-color

Adding the following to my JS:

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

results in the following, when running $ npm run dev:

This dependency was not found:

* vue-color/src/Photoshop.vue in ./resources/assets/js/app.js

Alright, looking into the directory structure shows that Photoshop.vue now resides in vue-color/src/components/ so I'll try and reference that one, and this results in the following, when running $ npm run dev:

This dependency was not found:

* !!vue-style-loader!css-loader!../../../vue-loader/lib/style-rewriter?id=data-v-6d2f99f6!stylus-loader?paths[]=node_modules!../../../vue-loader/lib/selector?type=styles&index=0!./Photoshop.vue in ./~/vue-color/src/components/Photoshop.vue

@xiaokaike could you publish the version 2.0.7 ? I guess you have the permissions to publish.

Is the live demo being updated automatically ? I guess it needs to be updated as well, probably after publishing

The Arrows in the Chome-Component don't do anything.

Getting an error in the console, when we open the page, where we are using this color picker.

[Vue warn]: existing instance property "fields" will be overwritten by a computed property with the same name. 
(found in component <Chrome>)

I tried everything but still I get this Uncaught TypeError: Cannot read property 'a' of undefined(…)" error.

HTML code in add.vue file

<compact-picker :colors.sync="colors"></compact-picker>

JS code in add.vue file

import { Compact } from 'vue-color';

export default {
    data() {
        return {
            user_id: null,
            brands: { },
            colors: {
              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
            }
        }
    },

    components: {
        'compact-picker': Compact
    },
}

I think it will be awesome if we can customize presetColors.

Slider can't move when default hex color is #101010

I think the component should only $emit('input', { /* data */ }) instead of mutation attributes on this.value directly. The parent component should use v-model to set the value and pass it down as a prop again.

Currently vue is warning about this:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

This will lead to a bigger rewrite because the sub-components cannot use v-model.

Something like this:

<ed-in label="h" v-model="colors.hsl.h" @on-change="inputChange"></ed-in>

Probably has to look like this:

<template>
  <ed-in
    label="h"
    :value="colors.hsl.h"
    @input="handleHInput"
  />
</template>

<script>
export default {
  methods: {
    handleHInput (h) {
      const newValue = JSON.parse(JSON.stringify(this.value))
      newValue.hsl.h = h
      this.$emit('input', newValue)
    }
  }
}
</script>

Not sure if there is a simpler solution.

环境是
elementUI 1.1.2
vue 2.1.8

目前还没找到原因

It seems that I can not feed any custom swatches to the sketch colorpicker. that would be super useful :)

When setting the value "rgba(0, 128, 0, 0.57)" (so a string)

The value is parsed correctly to the tinyColor (inside _colorChange(data, oldHue))

but because data is still a string, var alpha = data && data.a; will be undefined and _colorChange is setting color.setAlpha(alpha || 1); :

expected behavior:

when setting "rgba(0, 128, 0, 0.57)" (string), it should work

current behavior:

it will be parsed correctly, but the alpha will be overwritten to 1 - we lose the alpha component

Given that the class names for the color picker styling have pretty generic terms (input for example), and that the style is not scoped, the classes conflict with existing classes when vue-color is used in a different project.

I like it being unscoped, because that makes it easy to override classes as needed. But I would suggest using a naming convention that prefixes each class with vue-color so that they will be unlikely to clash with existing classes in other projects.

If you would like, I could make the changes and submit a pull request.

There is no error but the picker is not working and not displaying correctly.

Any idea why?

Going back to 2.0.7 works good.

我想用在手机端，却发现点不动

<sketch-picker v-show="colorVisible" v-model="colors" @change-color="onChange"></sketch-picker>

  onChange(val){
       // e is undefined
      // can not get e  => e.stopPropagation()
  }

how can i to make stopPropagation

Live Demo link on readme file does not work.
Tried with Chrome 58 on Mac Sierra.

http://xiaokaike.github.io/vue-color/

I need disable dark colors in my colorpicker, i'm using the "Compact" colorpicker, How can i disable the dark colors?

The minimal opacity that I can set with the slider is 0.01. If I move slider to the left edge it jumps to the maximum (1.0).

Also when I try to enter 0 to the "A" field the value changes to "1".

var sectionModel = {
    id:'',
    icon:'',
    title :'',
    link:'',
    colors : {
        hex: '#ff00ff'
    }
};

Vue.component('color-picker', VueColor.Chrome);

sectionModel.colors.hex = `#ff0000`;

update colors.hex not trigger the ui's color changed of events
ui's color still is '#ff00ff'

Need to set default color easily.

hi,after read your readme but i still don't know how to use it in browser
can you show some usage ?

color.js:4 Uncaught TypeError: Cannot read property 'a' of undefined

I want to use hex only for props.

Is there a way to update the color externally?

I'm trying to import this library to my project, but gulp with browserify keeps complaining.

I have added this to my main.js file

Vue.use(require('vue-color/dist/vue-color.js'));

I want in my v-model to have raw final value like rgba(0,0,0,0.5)..by now is returning the object in my model and is weird. Have some configuration or adjusts can be made to work like this ? Thanks a lot. I love the picker.

Hi,

thanks for this library!

I'm having some problems importing only one picker

import ColorPicker from 'vue-color/src/components/Compact';

fails in my project (with webpack, and vue-loader installed) with this error:

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../vue-loader/lib/style-compiler/index?{"id":"data-v-ade7e162","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../../vue-loader/lib/selector?type=styles&index=0!./Compact.vue in ./~/vue-color/src/components/Compact.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../vue-loader/lib/style-compiler/index?{"id":"data-v-ade7e162","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../../vue-loader/lib/selector?type=styles&index=0!./Compact.vue

Importing with

import { Compact as ColorPicker } from 'vue-color';

works but it loads the entire library and not just the Compact picker

Thanks

I'm using this component for the first time and immediately I am getting this error thrown: Cannot read property 'a' of undefined

function _colorChange(data, oldHue) {
	  if (data.a && data.a > 1) {
	    data.a = 1;
	  }

	  data.a = data.a || 1;

	  var color;
	  if (data.hex) {
	    color = (0, _tinycolor2.default)(data.hex);
	    color.setAlpha(data.a);
	  } else {
	    color = (0, _tinycolor2.default)(data);
	  }
	  var hsl = color.toHsl();
	  var hsv = color.toHsv();
	  if (hsl.s === 0) {
	    hsl.h = data.h || oldHue || 0;
	    hsv.h = data.h || oldHue || 0;
	  }
	  return {
	    hsl: hsl,
	    hex: color.toHexString().toUpperCase(),
	    rgba: color.toRgb(),
	    hsv: hsv,
	    oldHue: data.h || oldHue || hsl.h,
	    source: data.source,
	    a: data.a
	  };
	}

Line 581 of the vue-color.js npm distribution. I receive this error when trying to utilize ES6 notation to directly import a component into my project as well as when I try to just use a script tag on my index.html

I tried opening the demo and got this

vendor.1923985f38dc72b4b53e.js:7 Uncaught ReferenceError: production is not defined
    at Object.<anonymous> (vendor.1923985f38dc72b4b53e.js:7)
    at Object.57 (vendor.1923985f38dc72b4b53e.js:8)
    at e (manifest.b962eebea6b1137aed41.js:1)
    at Object.<anonymous> (app.7c0385863aaaa3ba1568.js:1)
    at e (manifest.b962eebea6b1137aed41.js:1)
    at window.webpackJsonp (manifest.b962eebea6b1137aed41.js:1)
    at app.7c0385863aaaa3ba1568.js:1

Browser: Google Chrome 58.0.3029.96 (64-bit) on Windows 10

除了 HEX 格式，其他格式拖动透明度滑动条是有效的，但是想要的是拖动透明度后hex的值。

I got this error when trying to run npm run dist

> [email protected] dist /Users/tian/Kerja/git/btbldr/node_modules/vue-color
> webpack --progress --hide-modules --config  webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config  webpack.build.min.js

Hash: 4b712a995855341bcaf9  
Version: webpack 1.13.0
Time: 82ms
                  Asset     Size  Chunks             Chunk Names
    ./dist/vue-color.js  2.37 kB       0  [emitted]  vue-color
./dist/vue-color.js.map  2.73 kB       0  [emitted]  vue-color
Hash: e0e1d518934a14133eeb  
Version: webpack 1.13.0
Time: 89ms
                  Asset     Size  Chunks             Chunk Names
./dist/vue-color.min.js  2.24 kB       0  [emitted]  vue-color

ERROR in ./dist/vue-color.min.js from UglifyJs
Unexpected token: name (Compact) [./dist/vue-color.min.js:57,8]

Is there any solution for regular input as bootstrap-colorpicker?

Thanks for the lib!

Just for information, .container class conflicts with twitter-bootstrap's .container class. This could be fixed through css, but maybe you could just change it's name in future for something more specific, like .vue-color-container or something.

I'm just curious why you're using v-modelfor default properties instead of using v-bind instead? I would have thought that using v-model implies a two-way update to the value, but that's not the case here. We're using @change-color to effect a manual update to our model, right? Why did you make it this way? I need some help to understand your reasoning behind this as I find it a little confusing.

Hi,

I have found somes bugs and I've tried some trick to be able to solve these problems :

1 - hueSlider unable to move

When you select a color with a hsv.s = 0 (black to white) with the saturationPicker you can move the hueSlider

// inside the mixin's function _colorChange

let hexColor = color.toHexString().toUpperCase();

// handle hueSlider unable to move when the color is black or white (1)
if (hexColor == '#FFFFFF' || hexColor == '#000000') {
    hsl.h = data.h || oldHue || hsl.h;
    hsv.h = data.h || oldHue || hsl.h;
    //      given  or   old  or  new
}

2 - hueSlider doesn't give full spectrum

HueSlider on the right/top stop at 359 of hue instead of 360 (giving a #FF0004 instead of #FF0000).

And when i tried to change this, i added this to avoid moving to an 0 hue when you are at the end of the spectrum.

// inside the mixin's function _colorChange

let hexColor = color.toHexString().toUpperCase();

// when the color hue is red, handle red color rotation on hueSlider
// (avoid doing left to right when red color is modified) (2)
if (hsl.h == 0) {
    hsl.h = ((data.h || oldHue) > 180 ? 360 : 0) || hsl.h;
    hsv.h = ((data.h || oldHue) > 180 ? 360 : 0) || hsl.h;
}

3 - The #25 bug

The behaviors comes from 2 problem :

Percentage

Using a percentage with the saturationPicker provoke some problems with tinycolor when hsv.v and hsv.s are >= 1 because tinycolor will interpret that as 100% instead of 1%

It causes the vertical shift when hsv.v is >= 1 and an horizontal shift when hsv.s is >= 1
It won't happend every time, but more the saturationPicker is large more the bug will appear.

Using 0-1 ratio solve the problem :

// saturationPicker handleChange function
this.onChange({
    h      : this.colors.hsl.h,
    s      : left / containerWidth,
    v      : -(top / containerHeight) + 1,
    a      : this.colors.hsl.a,
    source : 'rgb'
});

pointerTop() {
    return (-(this.colors.hsv.v) + 1) * 100 + '%';
},
pointerLeft() {
    return this.colors.hsv.s * 100 + '%';
}

I think you should change every percentages to a ratio to avoid this problem in the futur.

And to make it more robust you could even use tinycolor.fromRatio(color) instead of tinycolor(color) when using ratio.

Horizontal Shift

This one is more tricky to find, it happends when the hsv.v is <= 10% and the result is that the hsv.s change following Tinycolor hsv.s value instead of cursor value.

// inside the mixin's function _colorChange
// i added oldColor as reference to the old this.colors as parameters of the function

let hexColor = color.toHexString().toUpperCase();
// when the color is nearly black, avoid getting position bug in the saturationPicker (3)
if (hsv.v <= 0.1) {
    hsv.s = data.s || oldColor.hsv.s || hsv.s;
    hsv.v = data.v || oldColor.hsv.v || hsv.v;
    //      given  or      old       or   new
}

4 - 5 Color Slider

Not sure if it's a bug but the last color of slider component (the 5 colors one) doesn't scale when it's selected (it does when the 1-4 are selected)

On the Sketch or Chrome picker when you change the alpha to be < 1 and then change the colour Alpha goes back to 1.

I hope I'm using vue-clor correctly, but my program produce TypeError: Cannot read property 'a' of undefined error.

This is detailed error.

vue.common.js:435 TypeError: Cannot read property 'a' of undefined
    at a (vue-color.min.js:1)
    at VueComponent.data (vue-color.min.js:1)
    at VueComponent.mergedDataFn (vue.common.js:960)
    at initData (vue.common.js:3170)
    at initState (vue.common.js:3121)
    at VueComponent.Vue._init (vue.common.js:3378)
    at new VueComponent (vue.common.js:3500)
    at createComponentInstanceForVnode (vue.common.js:1724)
    at init (vue.common.js:1734)
    at createComponent (vue.common.js:4174)
logError @ vue.common.js:435

And this is a vue component I wrote.

<style lang="stylus">
</style>
<template>
<div class="color-editor">
  <Chrome v-model="color"/>
</div>
</template>

<script>
import {Chrome} from "vue-color";
export default {
  components:{
    Chrome
  },
  data:function(){
    return {
      color:{
        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
      }
    }
  }
}
</script>

Am I using vue-color wrongly? Or just a bug?

When i set the default hex color is touching the left borders. The slider below the color picker is not sliding, but the opacity slider is working fine. It is also the case with all the colours, which are touching the left borders. Please have a look at the attached screenshots.

http://xiaokaike.github.io/vue-color/

设置rgba颜色透明度，拖动滑块无法将透明度设为0。

Hello,
Love this plugin!
But there is currently an issue with Vue 2.0 Compatibility.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "colors" (found in component: <swatches>)  

[Vue warn]: data-pick="{{pick}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.  

[Vue warn]: data-color="{{c}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.

Simply used in a Vue 2.0 component as follow:
<swatches :colors="color"></swatches>

First issue would be resolved by raising an event within the src/mixin/color.js lines 38 & 42.
Users would then need to subscribe to this using something like @pick="updateColor"

Second issue would be resolved by using :data-pick="pick" instead of data-pick="{{pick}}", line 2 of src/components/Swatches.vue.
I imagine there would be other issues in the other components, however I am only using swatches.

Third issue is similar to the Second issue, however located on line 6 of src/components/Swtaches.vue

I would make a pull request, or whatever, but I am hopeless with git :)

I want to input #B2B2B2, it will auto complete to BB22BB

Hello,
after using yarn add vue-color
and

import {Compact} from 'vue-color';
import Vue from 'vue';
Vue.component('v-color-picker', Compact);

I am receiving the follwoing webpack error

              ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* jquery

I tried importing it into a component - as opposed to registering it as a global component - and received the same issue.

I've searched the /node_modules/vue-color/, and the only references to jquery are in comments about functions. I checked tinycolor2 and material-colors and cannot find a reference for jquery.

I've looked through the package, and it is installing version 2.0.5.

Using laravel's default mix webpack config.

This is very baffling!

当手动输入颜色代码时，完全无法正常使用，能否考虑加上 debounce 属性，限制一下自动补全的的时间

Not sure if this is an issue but more of a question. Is there any way to disable the autocomplete on keyup of the hex value input for the chrome picker? It's almost more of an inconvenience.

Turns out it does