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]

When I instanciate the 'Chrome' component from 'vue-color' on chrome debuger I've got the following warning:
[Vue warn]: The computed property "fields" is already defined in data.

I need to add color as input like

![Image of Sample] (https://cloud.githubusercontent.com/assets/8116716/26331696/5050e086-3f20-11e7-81d6-ffc2defb6b55.gif)

After I focus the input field color picker should be show, Please help

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 :)

Hi, Thank you for great effort

~~I think we need to clear button to completely remove the color if not needed~~ it's very easy to make one .. Thank you so much

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.

I'm getting this error ...

vue.esm.js:610 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <ChromePicker>
       <ColorChooser> at components/ptemplate/ColorChooser.vue
         <ColorRow> at components/ptemplate/ColorRow.vue
           <VTabItem>
             <VTabsItems>
               <ThemeProvider>
                 <VTabs>
                   <Recipe> at components/ptemplate/Ptemplate.vue
                     <Pages/ptemplate/Id.vue> at pages/ptemplate/_id.vue
                       <Nuxt>
                         <VContent>
                           <VApp>
                             <Default> at layouts/default.vue
                               <Root>

Using this template ...

<template>
  <v-layout row wrap>
    <v-flex xs7>
      <v-text-field v-model="d_color" :hint="cblabel" persistent-hint prefix="#" @input="save()"/>
    </v-flex>
    <v-flex xs4>
      <div class="color-box" :style="{ backgroundColor: `#${d_color}` }" @click="showPicker=true"/>
    </v-flex>
    <div v-if="showPicker">
      <chrome-picker :value="colors" @input="updateValue"></chrome-picker>
    </div>
  </v-layout>
</template>

Initializing like this ...

<script>
const chrome = require('vue-color')
export default {
  components: {
    'chrome-picker': chrome
  },

I saw something about Nuxt (which I'm using) in another issue. Is this really the problem?

Thanks!

Hi, I'm Paul. First of all, I'd like to thank the creators of this plugin. It's really nice. But I'd like to point out that the lack of documentation makes it hard to understand the product's capabilities. I needed to expand the preset colors of the Sketch component and I had to go to the source code to check if there was a property I could use, and there was one indeed (:predefinedColors). This could be a drag for newcomers whom would wrongly assume that vue-color won't let them load their own predefined colors.

I offer myself to help adding this to the docs.

比如进入的是： #FFFFFF，

返回的变成了一个对象，不合理啊，数据都乱了啊

{ "hsl": { "h": 0, "s": 0.7699115044247787, "l": 0.2712, "a": 0 }, "hex": "#7A1010", "hex8": "#7A101000", "rgba": { "r": 122, "g": 16, "b": 16, "a": 0 }, "hsv": { "h": 0, "s": 0.87, "v": 0.48, "a": 0 }, "oldHue": 0, "source": "hsva", "a": 0 } 、、、、、、、、、、、、、、、、、 求解决方法 求解决方法 求解决方法 help help help

Colors like so:

data() {
    return {
        colors: {
            rgba: {
                r: 255,
                g: 0,
                b: 0,
                a: 1,
            }
        }
    };
},

Input like so:

<chrome-picker :value="colors" @input="updateColor" :disableFields="true"/>

Everything renders fine and the input event works etc... the only issue is the picker circle/slider have not adjusted to represent the initial colors value, however when I use a Hex string (i.e #F00) this does happen.

UPDATE

It actually only seems to not be working when I try to update this.colors like so:

const colors = node.fill.match(/\d+/g); // Standard rgba string

this.colors = {
    rgba: {
        r: +colors[0],
        g: +colors[1],
        b: +colors[2],
        a: +colors[3]
    }
};

I take it this is not reactive intentionally...?

Cheers.

My code..

...