Skip to content

Commit

Permalink
Merge pull request #58 from nerdyglasses/master
Browse files Browse the repository at this point in the history 
Making vue-color work with v-model.
  • Loading branch information
@xiaokaike
xiaokaike committed May 10, 2017
2 parents f51ffbe + da8de13 commit 35f2a48
Show file tree
Hide file tree
Showing 5 changed files with 6,227 additions and 39 deletions.
21 changes: 7 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,20 +99,13 @@ new Vue({

```html
<!-- suppose you have the data 'colors' in your component -->
<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>
```

```javascript
// onChange method called when the event 'change-color' is emitted
onChange (val) {
this.colors = val
}
<material-picker v-model="colors" />
<compact-picker v-model="colors" />
<swatches-picker v-model="colors" />
<slider-picker v-model="colors" />
<sketch-picker v-model="colors" />
<chrome-picker v-model="colors" />
<photoshop-picker v-model="colors" />
```

## TODO
Expand Down
42 changes: 21 additions & 21 deletions dist/vue-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -625,7 +625,7 @@ return /******/ (function(modules) { // webpackBootstrap
},
set: function set(newVal) {
this.val = newVal;
this.$emit('change-color', newVal);
this.$emit('input', newVal);
}
}
},
Expand Down Expand Up @@ -1900,9 +1900,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-10", __vue_options__)
hotAPI.createRecord("data-v-12", __vue_options__)
} else {
hotAPI.reload("data-v-10", __vue_options__)
hotAPI.reload("data-v-12", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] EditableInput.vue: functional components are not supported and should be defined in plain js files using render functions.")}
Expand All @@ -1926,8 +1926,8 @@ return /******/ (function(modules) { // webpackBootstrap
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-10!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./EditableInput.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-10!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./EditableInput.vue");
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-12!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./EditableInput.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-12!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./EditableInput.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
Expand Down Expand Up @@ -2062,7 +2062,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-10", module.exports)
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-12", module.exports)
}
}

Expand Down Expand Up @@ -3183,9 +3183,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-12", __vue_options__)
hotAPI.createRecord("data-v-10", __vue_options__)
} else {
hotAPI.reload("data-v-12", __vue_options__)
hotAPI.reload("data-v-10", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] Saturation.vue: functional components are not supported and should be defined in plain js files using render functions.")}
Expand All @@ -3209,8 +3209,8 @@ return /******/ (function(modules) { // webpackBootstrap
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-12!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Saturation.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-12!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Saturation.vue");
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-10!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Saturation.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-10!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Saturation.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
Expand Down Expand Up @@ -3805,7 +3805,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-12", module.exports)
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-10", module.exports)
}
}

Expand Down Expand Up @@ -3844,9 +3844,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-8", __vue_options__)
hotAPI.createRecord("data-v-7", __vue_options__)
} else {
hotAPI.reload("data-v-8", __vue_options__)
hotAPI.reload("data-v-7", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] Alpha.vue: functional components are not supported and should be defined in plain js files using render functions.")}
Expand All @@ -3870,8 +3870,8 @@ return /******/ (function(modules) { // webpackBootstrap
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-8!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Alpha.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-8!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Alpha.vue");
module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-7!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Alpha.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-7!../../../node_modules/stylus-loader/index.js!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Alpha.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
Expand Down Expand Up @@ -4180,7 +4180,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-8", module.exports)
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-7", module.exports)
}
}

Expand Down Expand Up @@ -4747,9 +4747,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-7", __vue_options__)
hotAPI.createRecord("data-v-8", __vue_options__)
} else {
hotAPI.reload("data-v-7", __vue_options__)
hotAPI.reload("data-v-8", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] Chrome.vue: functional components are not supported and should be defined in plain js files using render functions.")}
Expand All @@ -4773,8 +4773,8 @@ return /******/ (function(modules) { // webpackBootstrap
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-7!../../node_modules/stylus-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Chrome.vue", function() {
var newContent = require("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-7!../../node_modules/stylus-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Chrome.vue");
module.hot.accept("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-8!../../node_modules/stylus-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Chrome.vue", function() {
var newContent = require("!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-8!../../node_modules/stylus-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Chrome.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
Expand Down Expand Up @@ -5169,7 +5169,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-7", module.exports)
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-8", module.exports)
}
}

Expand Down
6 changes: 3 additions & 3 deletions dist/vue-color.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/mixin/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default {
},
set (newVal) {
this.val = newVal
this.$emit('change-color', newVal)
this.$emit('input', newVal)
}
}
},
Expand Down
Loading

0 comments on commit 35f2a48

Please sign in to comment.