From ea970d4ed0c77e9534aec77ffecde5f9c2238473 Mon Sep 17 00:00:00 2001 From: Liu Xinran Date: Fri, 25 Aug 2017 17:34:45 +0800 Subject: [PATCH] release: 2.4.0 --- dist/vue-color.js | 426 ++++++++++++++++++------------------------ dist/vue-color.min.js | 2 +- package.json | 2 +- src/index.js | 2 +- 4 files changed, 190 insertions(+), 242 deletions(-) diff --git a/dist/vue-color.js b/dist/vue-color.js index e5e3f8d..5c91e25 100644 --- a/dist/vue-color.js +++ b/dist/vue-color.js @@ -925,7 +925,7 @@ var _color2 = _interopRequireDefault(_color); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var VueColor = { - version: '2.3.2', + version: '2.4.0', Compact: _Compact2.default, Material: _Material2.default, Slider: _Slider2.default, @@ -1033,7 +1033,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-compact {\n padding-top: 5px;\n padding-left: 5px;\n width: 240px;\n border-radius: 2px;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n background-color: #fff;\n}\n.vc-compact-colors {\n overflow: hidden;\n padding: 0;\n margin: 0;\n}\n.vc-compact-color-item {\n list-style: none;\n width: 15px;\n height: 15px;\n float: left;\n margin-right: 5px;\n margin-bottom: 5px;\n position: relative;\n cursor: pointer;\n}\n.vc-compact-color-item--white {\n box-shadow: inset 0 0 0 1px #ddd;\n}\n.vc-compact-color-item--white .vc-compact-dot {\n background: #000;\n}\n.vc-compact-dot {\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-radius: 50%;\n opacity: 1;\n background: #fff;\n}\n/* .vue-color__compact__fields\n display: flex;\n position: relative;\n padding-bottom: 6px;\n padding-right: 5px;\n position: relative;\n .vue-color__editable-input__input\n width: 70%;\n padding-left: 30%;\n background: none;\n font-size: 12px;\n color: #333;\n height: 16px;\n .vue-color__editable-input__label\n position: absolute;\n top: 3px;\n left: 0;\n line-height: 16px;\n text-transform: uppercase;\n font-size: 12px;\n color: #999;\n.vue-color__compact__pick-color\n position: absolute;\n top: 6px;\n left: 5px;\n height: 9px;\n width: 9px;\n.vue-color__compact__col-3\n flex: 1;\n.vue_color__compact__col-hex\n flex: 2;\n .vue-color__editable-input__input\n width: 80%;\n padding-left: 20%;\n .vue-color__editable-input__label\n display: none; */\n", ""]); +exports.push([module.i, "\n.vc-compact {\n padding-top: 5px;\n padding-left: 5px;\n width: 240px;\n border-radius: 2px;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n background-color: #fff;\n}\n.vc-compact-colors {\n overflow: hidden;\n padding: 0;\n margin: 0;\n}\n.vc-compact-color-item {\n list-style: none;\n width: 15px;\n height: 15px;\n float: left;\n margin-right: 5px;\n margin-bottom: 5px;\n position: relative;\n cursor: pointer;\n}\n.vc-compact-color-item--white {\n box-shadow: inset 0 0 0 1px #ddd;\n}\n.vc-compact-color-item--white .vc-compact-dot {\n background: #000;\n}\n.vc-compact-dot {\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-radius: 50%;\n opacity: 1;\n background: #fff;\n}\n", ""]); // exports @@ -1097,7 +1097,14 @@ var defaultColors = ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FC exports.default = { name: 'Compact', mixins: [_color2.default], - props: {}, + props: { + palette: { + type: Array, + default: function _default() { + return defaultColors; + } + } + }, components: { 'ed-in': _EditableInput2.default }, @@ -1106,37 +1113,12 @@ exports.default = { return this.colors.hex; } }, - data: function data() { - return { - defaultColors: defaultColors - }; - }, - methods: { handlerClick: function handlerClick(c) { this.colorChange({ hex: c, source: 'hex' }); - }, - onChange: function onChange(data) { - if (!data) { - return; - } - if (data.hex) { - this.isValidHex(data.hex) && this.colorChange({ - hex: data.hex, - source: 'hex' - }); - } else if (data.r || data.g || data.b) { - this.colorChange({ - r: data.r || this.colors.rgba.r, - g: data.g || this.colors.rgba.g, - b: data.b || this.colors.rgba.b, - a: data.a || this.colors.rgba.a, - source: 'rgba' - }); - } } } }; @@ -2397,29 +2379,26 @@ exports.default = { name: 'editableInput', props: { label: String, + desc: String, value: [String, Number], max: Number, + min: Number, arrowOffset: { type: Number, default: 1 } }, computed: { - val: function val() { - return this.value; - } - }, - filters: { - maxFilter: { - read: function read(val) { - if (this.max && val > this.max) { - return this.max; + val: { + get: function get() { + return this.value; + }, + set: function set(v) { + if (!(this.max === undefined) && +v > this.max) { + this.$refs.input.value = this.max; } else { - return val; + return v; } - }, - write: function write(val, oldVal) { - return val; } } }, @@ -2477,17 +2456,29 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel return _c('div', { staticClass: "vc-editable-input" }, [_c('input', { + directives: [{ + name: "model", + rawName: "v-model", + value: (_vm.val), + expression: "val" + }], + ref: "input", staticClass: "vc-input__input", domProps: { - "value": _vm.val + "value": (_vm.val) }, on: { "keydown": _vm.handleKeyDown, - "input": _vm.update + "input": [function($event) { + if ($event.target.composing) { return; } + _vm.val = $event.target.value + }, _vm.update] } }), _vm._v(" "), _c('span', { staticClass: "vc-input__label" - }, [_vm._v(_vm._s(_vm.label))])]) + }, [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('span', { + staticClass: "vc-input__desc" + }, [_vm._v(_vm._s(_vm.desc))])]) } var staticRenderFns = [] render._withStripped = true @@ -2510,7 +2501,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-compact" }, [_c('ul', { staticClass: "vc-compact-colors" - }, _vm._l((_vm.defaultColors), function(c) { + }, _vm._l((_vm.palette), function(c) { return _c('li', { key: c, staticClass: "vc-compact-color-item", @@ -3290,7 +3281,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-swatches {\n width: 320px;\n height: 240px;\n overflow-y: scroll;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n}\n.vc-swatches-box {\n padding: 16px 0 6px 16px;\n overflow: hidden;\n}\n.vc-swatches-color-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n}\n.vc-swatches-color-it {\n width: 40px;\n height: 24px;\n cursor: pointer;\n background: #880e4f;\n margin-bottom: 1px;\n overflow: hidden;\n -ms-border-radius: 2px 2px 0 0;\n -moz-border-radius: 2px 2px 0 0;\n -o-border-radius: 2px 2px 0 0;\n -webkit-border-radius: 2px 2px 0 0;\n border-radius: 2px 2px 0 0;\n}\n.vc-swatches-pick {\n fill: rgb(255, 255, 255);\n margin-left: 8px;\n display: block;\n}\n", ""]); +exports.push([module.i, "\n.vc-swatches {\n width: 320px;\n height: 240px;\n overflow-y: scroll;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n}\n.vc-swatches-box {\n padding: 16px 0 6px 16px;\n overflow: hidden;\n}\n.vc-swatches-color-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n}\n.vc-swatches-color-it {\n box-sizing: border-box;\n width: 40px;\n height: 24px;\n cursor: pointer;\n background: #880e4f;\n margin-bottom: 1px;\n overflow: hidden;\n -ms-border-radius: 2px 2px 0 0;\n -moz-border-radius: 2px 2px 0 0;\n -o-border-radius: 2px 2px 0 0;\n -webkit-border-radius: 2px 2px 0 0;\n border-radius: 2px 2px 0 0;\n}\n.vc-swatches-color--white {\n border: 1px solid #DDD;\n}\n.vc-swatches-pick {\n fill: rgb(255, 255, 255);\n margin-left: 8px;\n display: block;\n}\n.vc-swatches-color--white .vc-swatches-pick {\n fill: rgb(51, 51, 51);\n}\n", ""]); // exports @@ -3333,18 +3324,23 @@ var defaultColors = function () { exports.default = { name: 'Swatches', mixins: [_color2.default], + props: { + palette: { + type: Array, + default: function _default() { + return defaultColors; + } + } + }, computed: { pick: function pick() { return this.colors.hex; } }, - data: function data() { - return { - defaultColors: defaultColors - }; - }, - methods: { + equal: function equal(color) { + return color.toLowerCase() === this.colors.hex.toLowerCase(); + }, handlerClick: function handlerClick(c) { this.colorChange({ hex: c, @@ -3454,12 +3450,16 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel } }, [_c('div', { staticClass: "vc-swatches-box" - }, _vm._l((_vm.defaultColors), function(group) { + }, _vm._l((_vm.palette), function(group, $idx) { return _c('div', { + key: $idx, staticClass: "vc-swatches-color-group" }, _vm._l((group), function(c) { return _c('div', { - staticClass: "vc-swatches-color-it", + key: c, + class: ['vc-swatches-color-it', { + 'vc-swatches-color--white': c === '#FFFFFF' + }], style: ({ background: c }), @@ -3475,8 +3475,8 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel directives: [{ name: "show", rawName: "v-show", - value: (c == _vm.pick), - expression: "c == pick" + value: (_vm.equal(c)), + expression: "equal(c)" }], staticClass: "vc-swatches-pick" }, [_c('svg', { @@ -3596,7 +3596,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-photoshop {\n background: #DCDCDC;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);\n box-sizing: initial;\n width: 513px;\n font-family: Roboto;\n}\n.vc-ps-head {\n background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);\n border-bottom: 1px solid #B1B1B1;\n box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);\n height: 23px;\n line-height: 24px;\n border-radius: 4px 4px 0 0;\n font-size: 13px;\n color: #4D4D4D;\n text-align: center;\n}\n.vc-ps-body {\n padding: 15px;\n display: flex;\n}\n.vc-ps-saturation-wrap {\n width: 256px;\n height: 256px;\n position: relative;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n overflow: hidden;\n}\n.vc-ps-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-ps-hue-wrap {\n position: relative;\n height: 256px;\n width: 19px;\n margin-left: 10px;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n}\n.vc-ps-hue-pointer {\n position: relative;\n}\n.vc-ps-hue-pointer--left,\n.vc-ps-hue-pointer--right {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 5px 0 5px 8px;\n border-color: transparent transparent transparent #555;\n}\n.vc-ps-hue-pointer--left:after,\n.vc-ps-hue-pointer--right:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent transparent transparent #fff;\n position: absolute;\n top: 1px;\n left: 1px;\n transform: translate(-8px, -5px);\n}\n.vc-ps-hue-pointer--left {\n transform: translate(-13px, -4px);\n}\n.vc-ps-hue-pointer--right {\n transform: translate(20px, -4px) rotate(180deg);\n}\n.vc-ps-controls {\n width: 180px;\n margin-left: 10px;\n display: flex;\n}\n.vc-ps-actions {\n margin-left: 20px;\n flex: 1;\n}\n.vc-ps-ac-btn {\n cursor: pointer;\n background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);\n border: 1px solid #878787;\n border-radius: 2px;\n height: 20px;\n box-shadow: 0 1px 0 0 #EAEAEA;\n font-size: 14px;\n color: #000;\n line-height: 20px;\n text-align: center;\n margin-bottom: 10px;\n}\n.vc-ps-previews {\n width: 60px;\n}\n.vc-ps-previews__swatches {\n border: 1px solid #B3B3B3;\n border-bottom: 1px solid #F0F0F0;\n margin-bottom: 2px;\n margin-top: 1px;\n}\n.vc-ps-previews__pr-color {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n}\n.vc-ps-previews__label {\n font-size: 14px;\n color: #000;\n text-align: center;\n}\n.vc-ps-fields {\n padding-top: 5px;\n padding-bottom: 9px;\n width: 80px;\n position: relative;\n}\n.vc-ps-fields .vc-input__input {\n margin-left: 40%;\n width: 40%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 5px;\n font-size: 13px;\n padding-left: 3px;\n margin-right: 10px;\n}\n.vc-ps-fields .vc-input__label {\n top: 0;\n left: 0;\n width: 34px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n position: absolute;\n}\n.vc-ps-fields__divider {\n height: 5px;\n}\n.vc-ps-fields__hex .vc-input__input {\n margin-left: 20%;\n width: 80%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 6px;\n font-size: 13px;\n padding-left: 3px;\n}\n.vc-ps-fields__hex .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n width: 14px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n}\n", ""]); +exports.push([module.i, "\n.vc-photoshop {\n background: #DCDCDC;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);\n box-sizing: initial;\n width: 513px;\n font-family: Roboto;\n}\n.vc-ps-head {\n background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);\n border-bottom: 1px solid #B1B1B1;\n box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);\n height: 23px;\n line-height: 24px;\n border-radius: 4px 4px 0 0;\n font-size: 13px;\n color: #4D4D4D;\n text-align: center;\n}\n.vc-ps-body {\n padding: 15px;\n display: flex;\n}\n.vc-ps-saturation-wrap {\n width: 256px;\n height: 256px;\n position: relative;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n overflow: hidden;\n}\n.vc-ps-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-ps-hue-wrap {\n position: relative;\n height: 256px;\n width: 19px;\n margin-left: 10px;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n}\n.vc-ps-hue-pointer {\n position: relative;\n}\n.vc-ps-hue-pointer--left,\n.vc-ps-hue-pointer--right {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 5px 0 5px 8px;\n border-color: transparent transparent transparent #555;\n}\n.vc-ps-hue-pointer--left:after,\n.vc-ps-hue-pointer--right:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent transparent transparent #fff;\n position: absolute;\n top: 1px;\n left: 1px;\n transform: translate(-8px, -5px);\n}\n.vc-ps-hue-pointer--left {\n transform: translate(-13px, -4px);\n}\n.vc-ps-hue-pointer--right {\n transform: translate(20px, -4px) rotate(180deg);\n}\n.vc-ps-controls {\n width: 180px;\n margin-left: 10px;\n display: flex;\n}\n.vc-ps-actions {\n margin-left: 20px;\n flex: 1;\n}\n.vc-ps-ac-btn {\n cursor: pointer;\n background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);\n border: 1px solid #878787;\n border-radius: 2px;\n height: 20px;\n box-shadow: 0 1px 0 0 #EAEAEA;\n font-size: 14px;\n color: #000;\n line-height: 20px;\n text-align: center;\n margin-bottom: 10px;\n}\n.vc-ps-previews {\n width: 60px;\n}\n.vc-ps-previews__swatches {\n border: 1px solid #B3B3B3;\n border-bottom: 1px solid #F0F0F0;\n margin-bottom: 2px;\n margin-top: 1px;\n}\n.vc-ps-previews__pr-color {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n}\n.vc-ps-previews__label {\n font-size: 14px;\n color: #000;\n text-align: center;\n}\n.vc-ps-fields {\n padding-top: 5px;\n padding-bottom: 9px;\n width: 80px;\n position: relative;\n}\n.vc-ps-fields .vc-input__input {\n margin-left: 40%;\n width: 40%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 5px;\n font-size: 13px;\n padding-left: 3px;\n margin-right: 10px;\n}\n.vc-ps-fields .vc-input__label, .vc-ps-fields .vc-input__desc {\n top: 0;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n position: absolute;\n}\n.vc-ps-fields .vc-input__label {\n left: 0;\n width: 34px;\n}\n.vc-ps-fields .vc-input__desc {\n right: 0;\n width: 0;\n}\n.vc-ps-fields__divider {\n height: 5px;\n}\n.vc-ps-fields__hex .vc-input__input {\n margin-left: 20%;\n width: 80%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 6px;\n font-size: 13px;\n padding-left: 3px;\n}\n.vc-ps-fields__hex .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n width: 14px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n}\n", ""]); // exports @@ -3654,6 +3654,21 @@ exports.default = { currentColor: '#FFF' }; }, + + computed: { + hsv: function hsv() { + var hsv = this.colors.hsv; + return { + h: hsv.h.toFixed(), + s: (hsv.s * 100).toFixed(), + v: (hsv.v * 100).toFixed() + }; + }, + hex: function hex() { + var hex = this.colors.hex; + return hex && hex.replace('#', ''); + } + }, created: function created() { this.currentColor = this.colors.hex; }, @@ -3679,8 +3694,21 @@ exports.default = { a: data.a || this.colors.rgba.a, source: 'rgba' }); + } else if (data.h || data.s || data.v) { + this.colorChange({ + h: data.h || this.colors.hsv.h, + s: data.s / 100 || this.colors.hsv.s, + v: data.v / 100 || this.colors.hsv.v, + source: 'hsv' + }); } }, + clickCurrentColor: function clickCurrentColor() { + this.colorChange({ + hex: this.currentColor, + source: 'hex' + }); + }, handleAccept: function handleAccept() { this.$emit('ok'); }, @@ -4498,7 +4526,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-checkerboard {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n", ""]); +exports.push([module.i, "\n.vc-checkerboard {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-size: contain;\n}\n", ""]); // exports @@ -4535,7 +4563,9 @@ exports.default = { }, computed: { bgStyle: function bgStyle() { - return 'url(' + getCheckboard(this.white, this.grey, this.size) + ') center left'; + return { + 'background-image': 'url(' + getCheckboard(this.white, this.grey, this.size) + ')' + }; } } }; @@ -4581,9 +4611,7 @@ function getCheckboard(c1, c2, size) { var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; return _c('div', { staticClass: "vc-checkerboard", - style: ({ - background: _vm.bgStyle - }) + style: (_vm.bgStyle) }) } var staticRenderFns = [] @@ -4704,7 +4732,10 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-ps-previews__pr-color", style: ({ background: _vm.currentColor - }) + }), + on: { + "click": _vm.clickCurrentColor + } })]), _vm._v(" "), _c('div', { staticClass: "vc-ps-previews__label" }, [_vm._v("current")])]), _vm._v(" "), _c('div', { @@ -4723,106 +4754,69 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-ps-fields" }, [_c('ed-in', { attrs: { - "label": "h" + "label": "h", + "desc": "°", + "value": _vm.hsv.h }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsv.h), - callback: function($$v) { - _vm.colors.hsv.h = $$v - }, - expression: "colors.hsv.h" } }), _vm._v(" "), _c('ed-in', { attrs: { - "label": "s" + "label": "s", + "desc": "%", + "value": _vm.hsv.s, + "max": 100 }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsv.s), - callback: function($$v) { - _vm.colors.hsv.s = $$v - }, - expression: "colors.hsv.s" } }), _vm._v(" "), _c('ed-in', { attrs: { - "label": "v" + "label": "v", + "desc": "%", + "value": _vm.hsv.v, + "max": 100 }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsv.v), - callback: function($$v) { - _vm.colors.hsv.v = $$v - }, - expression: "colors.hsv.v" } }), _vm._v(" "), _c('div', { staticClass: "vc-ps-fields__divider" }), _vm._v(" "), _c('ed-in', { attrs: { - "label": "r" + "label": "r", + "value": _vm.colors.rgba.r }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.r), - callback: function($$v) { - _vm.colors.rgba.r = $$v - }, - expression: "colors.rgba.r" } }), _vm._v(" "), _c('ed-in', { attrs: { - "label": "g" + "label": "g", + "value": _vm.colors.rgba.g }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.g), - callback: function($$v) { - _vm.colors.rgba.g = $$v - }, - expression: "colors.rgba.g" } }), _vm._v(" "), _c('ed-in', { attrs: { - "label": "b" + "label": "b", + "value": _vm.colors.rgba.b }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.b), - callback: function($$v) { - _vm.colors.rgba.b = $$v - }, - expression: "colors.rgba.b" } }), _vm._v(" "), _c('div', { staticClass: "vc-ps-fields__divider" }), _vm._v(" "), _c('ed-in', { staticClass: "vc-ps-fields__hex", attrs: { - "label": "#" + "label": "#", + "value": _vm.hex }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hex), - callback: function($$v) { - _vm.colors.hex = $$v - }, - expression: "colors.hex" } })], 1)])])])]) } @@ -4927,7 +4921,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-sketch {\n position: relative;\n width: 200px;\n padding: 10px 10px 0;\n box-sizing: initial;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n}\n.vc-sketch-saturation-wrap {\n width: 100%;\n padding-bottom: 75%;\n position: relative;\n overflow: hidden;\n}\n.vc-sketch-controls {\n display: flex;\n}\n.vc-sketch-sliders {\n padding: 4px 0;\n flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n position: relative;\n height: 10px;\n}\n.vc-sketch-alpha-wrap {\n position: relative;\n height: 10px;\n margin-top: 4px;\n overflow: hidden;\n}\n.vc-sketch-color-wrap {\n width: 24px;\n height: 24px;\n position: relative;\n margin-top: 4px;\n margin-left: 4px;\n border-radius: 3px;\n}\n.vc-sketch-active-color {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 2px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);\n z-index: 2;\n}\n.vc-sketch-field {\n display: flex;\n padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n width: 80%;\n padding: 4px 10% 3px;\n border: none;\n box-shadow: inset 0 0 0 1px #ccc;\n font-size: 11px;\n}\n.vc-sketch-field .vc-input__label {\n display: block;\n text-align: center;\n font-size: 11px;\n color: #222;\n padding-top: 3px;\n padding-bottom: 4px;\n text-transform: capitalize;\n}\n.vc-sketch-field--single {\n flex: 1;\n padding-left: 6px;\n}\n.vc-sketch-field--double {\n flex: 2;\n}\n.vc-sketch-presets {\n margin-right: -10px;\n margin-left: -10px;\n padding-left: 10px;\n padding-top: 10px;\n border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n border-radius: 3px;\n overflow: hidden;\n position: relative;\n display: inline-block;\n margin: 0 10px 10px 0;\n vertical-align: top;\n cursor: pointer;\n width: 16px;\n height: 16px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);\n}\n", ""]); +exports.push([module.i, "\n.vc-sketch {\n position: relative;\n width: 200px;\n padding: 10px 10px 0;\n box-sizing: initial;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n}\n.vc-sketch-saturation-wrap {\n width: 100%;\n padding-bottom: 75%;\n position: relative;\n overflow: hidden;\n}\n.vc-sketch-controls {\n display: flex;\n}\n.vc-sketch-sliders {\n padding: 4px 0;\n flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n position: relative;\n height: 10px;\n}\n.vc-sketch-alpha-wrap {\n position: relative;\n height: 10px;\n margin-top: 4px;\n overflow: hidden;\n}\n.vc-sketch-color-wrap {\n width: 24px;\n height: 24px;\n position: relative;\n margin-top: 4px;\n margin-left: 4px;\n border-radius: 3px;\n}\n.vc-sketch-active-color {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 2px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);\n z-index: 2;\n}\n.vc-sketch-color-wrap .vc-checkerboard {\n background-size: auto;\n}\n.vc-sketch-field {\n display: flex;\n padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n width: 80%;\n padding: 4px 10% 3px;\n border: none;\n box-shadow: inset 0 0 0 1px #ccc;\n font-size: 11px;\n}\n.vc-sketch-field .vc-input__label {\n display: block;\n text-align: center;\n font-size: 11px;\n color: #222;\n padding-top: 3px;\n padding-bottom: 4px;\n text-transform: capitalize;\n}\n.vc-sketch-field--single {\n flex: 1;\n padding-left: 6px;\n}\n.vc-sketch-field--double {\n flex: 2;\n}\n.vc-sketch-presets {\n margin-right: -10px;\n margin-left: -10px;\n padding-left: 10px;\n padding-top: 10px;\n border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n border-radius: 3px;\n overflow: hidden;\n position: relative;\n display: inline-block;\n margin: 0 10px 10px 0;\n vertical-align: top;\n cursor: pointer;\n width: 16px;\n height: 16px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);\n}\n", ""]); // exports @@ -4963,6 +4957,10 @@ var _Alpha = __webpack_require__(7); var _Alpha2 = _interopRequireDefault(_Alpha); +var _Checkboard = __webpack_require__(8); + +var _Checkboard2 = _interopRequireDefault(_Checkboard); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var presetColors = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']; @@ -4974,15 +4972,21 @@ exports.default = { saturation: _Saturation2.default, hue: _Hue2.default, alpha: _Alpha2.default, - 'ed-in': _EditableInput2.default + 'ed-in': _EditableInput2.default, + checkboard: _Checkboard2.default }, - data: function data() { - return { - presetColors: presetColors - }; + props: { + presetColors: { + type: Array, + default: function _default() { + return presetColors; + } + } }, - computed: { + hex: function hex() { + return this.colors.hex.replace('#', ''); + }, activeColor: function activeColor() { var rgba = this.colors.rgba; return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')'; @@ -5078,94 +5082,65 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel style: ({ background: _vm.activeColor }) - })])]), _vm._v(" "), _c('div', { + }), _vm._v(" "), _c('checkboard')], 1)]), _vm._v(" "), _c('div', { staticClass: "vc-sketch-field" }, [_c('div', { staticClass: "vc-sketch-field--double" }, [_c('ed-in', { attrs: { - "label": "hex" + "label": "hex", + "value": _vm.hex }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hex), - callback: function($$v) { - _vm.colors.hex = $$v - }, - expression: "colors.hex" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-sketch-field--single" }, [_c('ed-in', { attrs: { - "label": "r" + "label": "r", + "value": _vm.colors.rgba.r }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.r), - callback: function($$v) { - _vm.colors.rgba.r = $$v - }, - expression: "colors.rgba.r" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-sketch-field--single" }, [_c('ed-in', { attrs: { - "label": "g" + "label": "g", + "value": _vm.colors.rgba.g }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.g), - callback: function($$v) { - _vm.colors.rgba.g = $$v - }, - expression: "colors.rgba.g" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-sketch-field--single" }, [_c('ed-in', { attrs: { - "label": "b" + "label": "b", + "value": _vm.colors.rgba.b }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.b), - callback: function($$v) { - _vm.colors.rgba.b = $$v - }, - expression: "colors.rgba.b" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-sketch-field--single" }, [_c('ed-in', { attrs: { "label": "a", + "value": _vm.colors.a, "arrow-offset": 0.01, "max": 1 }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.a), - callback: function($$v) { - _vm.colors.a = $$v - }, - expression: "colors.a" } })], 1)]), _vm._v(" "), _c('div', { staticClass: "vc-sketch-presets" }, _vm._l((_vm.presetColors), function(c) { return _c('div', { + key: c, staticClass: "vc-sketch-presets-color", style: ({ background: c @@ -5279,7 +5254,7 @@ exports = module.exports = __webpack_require__(0)(false); // module -exports.push([module.i, "\n.vc-chrome {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);\n box-sizing: initial;\n width: 225px;\n font-family: Menlo;\n background-color: #fff;\n}\n.vc-chrome-controls {\n display: flex;\n}\n.vc-chrome-color-wrap {\n width: 32px;\n}\n.vc-chrome-active-color {\n margin-top: 6px;\n width: 16px;\n height: 16px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n}\n.vc-chrome-sliders {\n flex: 1;\n}\n.vc-chrome-fields-wrap {\n display: flex;\n padding-top: 16px;\n}\n.vc-chrome-fields {\n display: flex;\n margin-left: -6px;\n flex: 1;\n}\n.vc-chrome-field {\n padding-left: 6px;\n width: 100%;\n}\n.vc-chrome-toggle-btn {\n width: 32px;\n text-align: right;\n position: relative;\n}\n.vc-chrome-toggle-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n z-index: 2;\n}\n.vc-chrome-toggle-icon-highlight {\n position: absolute;\n width: 24px;\n height: 28px;\n background: #eee;\n border-radius: 4px;\n top: 10px;\n left: 12px;\n}\n.vc-chrome-hue-wrap {\n position: relative;\n height: 10px;\n margin-bottom: 8px;\n}\n.vc-chrome-alpha-wrap {\n position: relative;\n height: 10px;\n}\n.vc-chrome-hue-wrap .vc-hue {\n border-radius: 2px;\n}\n.vc-chrome-alpha-wrap .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {\n width: 12px;\n height: 12px;\n border-radius: 6px;\n transform: translate(-6px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-chrome-body {\n padding: 16px 16px 12px;\n background-color: #fff;\n}\n.vc-chrome-saturation-wrap {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n}\n.vc-chrome-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-chrome-fields .vc-input__input {\n font-size: 11px;\n color: #333;\n width: 100%;\n border-radius: 2px;\n border: none;\n box-shadow: inset 0 0 0 1px #dadada;\n height: 21px;\n text-align: center;\n}\n.vc-chrome-fields .vc-input__label {\n text-transform: uppercase;\n font-size: 11px;\n line-height: 11px;\n color: #969696;\n text-align: center;\n display: block;\n margin-top: 12px;\n}\n", ""]); +exports.push([module.i, "\n.vc-chrome {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);\n box-sizing: initial;\n width: 225px;\n font-family: Menlo;\n background-color: #fff;\n}\n.vc-chrome-controls {\n display: flex;\n}\n.vc-chrome-color-wrap {\n position: relative;\n width: 36px;\n}\n.vc-chrome-active-color {\n position: relative;\n width: 30px;\n height: 30px;\n border-radius: 15px;\n overflow: hidden;\n z-index: 1;\n}\n.vc-chrome-color-wrap .vc-checkerboard {\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background-size: auto;\n}\n.vc-chrome-sliders {\n flex: 1;\n}\n.vc-chrome-fields-wrap {\n display: flex;\n padding-top: 16px;\n}\n.vc-chrome-fields {\n display: flex;\n margin-left: -6px;\n flex: 1;\n}\n.vc-chrome-field {\n padding-left: 6px;\n width: 100%;\n}\n.vc-chrome-toggle-btn {\n width: 32px;\n text-align: right;\n position: relative;\n}\n.vc-chrome-toggle-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n z-index: 2;\n}\n.vc-chrome-toggle-icon-highlight {\n position: absolute;\n width: 24px;\n height: 28px;\n background: #eee;\n border-radius: 4px;\n top: 10px;\n left: 12px;\n}\n.vc-chrome-hue-wrap {\n position: relative;\n height: 10px;\n margin-bottom: 8px;\n}\n.vc-chrome-alpha-wrap {\n position: relative;\n height: 10px;\n}\n.vc-chrome-hue-wrap .vc-hue {\n border-radius: 2px;\n}\n.vc-chrome-alpha-wrap .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {\n width: 12px;\n height: 12px;\n border-radius: 6px;\n transform: translate(-6px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-chrome-body {\n padding: 16px 16px 12px;\n background-color: #fff;\n}\n.vc-chrome-saturation-wrap {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n}\n.vc-chrome-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-chrome-fields .vc-input__input {\n font-size: 11px;\n color: #333;\n width: 100%;\n border-radius: 2px;\n border: none;\n box-shadow: inset 0 0 0 1px #dadada;\n height: 21px;\n text-align: center;\n}\n.vc-chrome-fields .vc-input__label {\n text-transform: uppercase;\n font-size: 11px;\n line-height: 11px;\n color: #969696;\n text-align: center;\n display: block;\n margin-top: 12px;\n}\n", ""]); // exports @@ -5315,6 +5290,10 @@ var _Alpha = __webpack_require__(7); var _Alpha2 = _interopRequireDefault(_Alpha); +var _Checkboard = __webpack_require__(8); + +var _Checkboard2 = _interopRequireDefault(_Checkboard); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } exports.default = { @@ -5325,7 +5304,8 @@ exports.default = { saturation: _Saturation2.default, hue: _Hue2.default, alpha: _Alpha2.default, - 'ed-in': _EditableInput2.default + 'ed-in': _EditableInput2.default, + checkboard: _Checkboard2.default }, data: function data() { return { @@ -5336,6 +5316,18 @@ exports.default = { }, computed: { + hsl: function hsl() { + var _colors$hsl = this.colors.hsl, + h = _colors$hsl.h, + s = _colors$hsl.s, + l = _colors$hsl.l; + + return { + h: h.toFixed(), + s: (s * 100).toFixed() + '%', + l: (l * 100).toFixed() + '%' + }; + }, activeColor: function activeColor() { var rgba = this.colors.rgba; return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')'; @@ -5368,6 +5360,16 @@ exports.default = { a: data.a || this.colors.rgba.a, source: 'rgba' }); + } else if (data.h || data.s || data.l) { + var s = data.s ? data.s.replace('%', '') / 100 : this.colors.hsl.s; + var l = data.l ? data.l.replace('%', '') / 100 : this.colors.hsl.l; + + this.colorChange({ + h: data.h || this.colors.hsl.h, + s: s, + l: l, + source: 'hsl' + }); } }, toggleViews: function toggleViews() { @@ -5418,7 +5420,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel style: ({ background: _vm.activeColor }) - })]), _vm._v(" "), _c('div', { + }), _vm._v(" "), _c('checkboard')], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-sliders" }, [_c('div', { staticClass: "vc-chrome-hue-wrap" @@ -5460,17 +5462,11 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "hex" + "label": "hex", + "value": _vm.colors.hex }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hex), - callback: function($$v) { - _vm.colors.hex = $$v - }, - expression: "colors.hex" } })], 1)]), _vm._v(" "), _c('div', { directives: [{ @@ -5484,67 +5480,43 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "r" + "label": "r", + "value": _vm.colors.rgba.r }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.r), - callback: function($$v) { - _vm.colors.rgba.r = $$v - }, - expression: "colors.rgba.r" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "g" + "label": "g", + "value": _vm.colors.rgba.g }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.g), - callback: function($$v) { - _vm.colors.rgba.g = $$v - }, - expression: "colors.rgba.g" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "b" + "label": "b", + "value": _vm.colors.rgba.b }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.rgba.b), - callback: function($$v) { - _vm.colors.rgba.b = $$v - }, - expression: "colors.rgba.b" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { "label": "a", + "value": _vm.colors.a, "arrow-offset": 0.01, "max": 1 }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.a), - callback: function($$v) { - _vm.colors.a = $$v - }, - expression: "colors.a" } })], 1)]), _vm._v(" "), _c('div', { directives: [{ @@ -5558,67 +5530,43 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "h" + "label": "h", + "value": _vm.hsl.h }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsl.h), - callback: function($$v) { - _vm.colors.hsl.h = $$v - }, - expression: "colors.hsl.h" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "s" + "label": "s", + "value": _vm.hsl.s }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsl.s), - callback: function($$v) { - _vm.colors.hsl.s = $$v - }, - expression: "colors.hsl.s" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { - "label": "l" + "label": "l", + "value": _vm.hsl.l }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.hsl.l), - callback: function($$v) { - _vm.colors.hsl.l = $$v - }, - expression: "colors.hsl.l" } })], 1), _vm._v(" "), _c('div', { staticClass: "vc-chrome-field" }, [_c('ed-in', { attrs: { "label": "a", + "value": _vm.colors.a, "arrow-offset": 0.01, "max": 1 }, on: { "change": _vm.inputChange - }, - model: { - value: (_vm.colors.a), - callback: function($$v) { - _vm.colors.a = $$v - }, - expression: "colors.a" } })], 1)]), _vm._v(" "), _c('div', { staticClass: "vc-chrome-toggle-btn", diff --git a/dist/vue-color.min.js b/dist/vue-color.min.js index 649b3ed..fb5ec60 100644 --- a/dist/vue-color.min.js +++ b/dist/vue-color.min.js @@ -1 +1 @@ -!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.VueColor=n():e.VueColor=n()}(this,function(){return function(e){function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var t={};return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=9)}([function(e,n){function t(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var a=o(r);return[t].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([a]).join("\n")}return[t].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var o=t(n,e);return n[2]?"@media "+n[2]+"{"+o+"}":o}).join("")},n.i=function(e,t){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;rt.parts.length&&(o.parts.length=t.parts.length)}else{for(var i=[],r=0;r0?(0,a.default)(e.hex):(0,a.default)(e))||void 0!==t._a&&null!==t._a||t.setAlpha(o||1);var r=t.toHsl(),i=t.toHsv();return 0===r.s&&(i.h=r.h=e.h||e.hsl&&e.hsl.h||n||0),i.v<.0164&&(i.h=e.h||e.hsv&&e.hsv.h||0,i.s=e.s||e.hsv&&e.hsv.s||0),r.l<.01&&(r.h=e.h||e.hsl&&e.hsl.h||0,r.s=e.s||e.hsl&&e.hsl.s||0),{hsl:r,hex:t.toHexString().toUpperCase(),rgba:t.toRgb(),hsv:i,oldHue:e.h||n||r.h,source:e.source,a:e.a||t.getAlpha()}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(15),a=function(e){return e&&e.__esModule?e:{default:e}}(r);n.default={props:["value"],data:function(){return{val:o(this.value)}},computed:{colors:{get:function(){return this.val},set:function(e){this.val=e,this.$emit("input",e)}}},watch:{value:function(e){this.val=o(e)}},methods:{colorChange:function(e,n){this.oldHue=this.colors.hsl.h,this.colors=o(e,n||this.oldHue)},isValidHex:function(e){return(0,a.default)(e).isValid()},simpleCheckForValidColor:function(e){for(var n=["r","g","b","a","h","s","l","v"],t=0,o=0,r=0;r.5?c/(2-a-i):c/(a+i),a){case e:o=(n-t)/c+(n1&&(t-=1),t<1/6?e+6*(n-e)*t:t<.5?n:t<2/3?e+(n-e)*(2/3-t)*6:e}var r,a,i;if(e=E(e,360),n=E(n,100),t=E(t,100),0===n)r=a=i=t;else{var s=t<.5?t*(1+n):t+n-t*n,c=2*t-s;r=o(c,s,e+1/3),a=o(c,s,e),i=o(c,s,e-1/3)}return{r:255*r,g:255*a,b:255*i}}function u(e,n,t){e=E(e,255),n=E(n,255),t=E(t,255);var o,r,a=q(e,n,t),i=X(e,n,t),s=a,c=a-i;if(r=0===a?0:c/a,a==i)o=0;else{switch(a){case e:o=(n-t)/c+(n>1)+720)%360;--n;)o.h=(o.h+r)%360,i.push(a(o));return i}function S(e,n){n=n||6;for(var t=a(e).toHsv(),o=t.h,r=t.s,i=t.v,s=[],c=1/n;n--;)s.push(a({h:o,s:r,v:i})),i=(i+c)%1;return s}function A(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function E(e,n){R(e)&&(e="100%");var t=H(e);return e=X(n,q(0,parseFloat(e))),t&&(e=parseInt(e*n,10)/100),r.abs(e-n)<1e-6?1:e%n/parseFloat(n)}function O(e){return X(1,q(0,e))}function j(e){return parseInt(e,16)}function R(e){return"string"==typeof e&&-1!=e.indexOf(".")&&1===parseFloat(e)}function H(e){return"string"==typeof e&&-1!=e.indexOf("%")}function L(e){return 1==e.length?"0"+e:""+e}function D(e){return e<=1&&(e=100*e+"%"),e}function B(e){return r.round(255*parseFloat(e)).toString(16)}function P(e){return j(e)/255}function z(e){return!!K.CSS_UNIT.exec(e)}function $(e){e=e.replace(T,"").replace(I,"").toLowerCase();var n=!1;if(W[e])e=W[e],n=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};var t;return(t=K.rgb.exec(e))?{r:t[1],g:t[2],b:t[3]}:(t=K.rgba.exec(e))?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=K.hsl.exec(e))?{h:t[1],s:t[2],l:t[3]}:(t=K.hsla.exec(e))?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=K.hsv.exec(e))?{h:t[1],s:t[2],v:t[3]}:(t=K.hsva.exec(e))?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=K.hex8.exec(e))?{r:j(t[1]),g:j(t[2]),b:j(t[3]),a:P(t[4]),format:n?"name":"hex8"}:(t=K.hex6.exec(e))?{r:j(t[1]),g:j(t[2]),b:j(t[3]),format:n?"name":"hex"}:(t=K.hex4.exec(e))?{r:j(t[1]+""+t[1]),g:j(t[2]+""+t[2]),b:j(t[3]+""+t[3]),a:P(t[4]+""+t[4]),format:n?"name":"hex8"}:!!(t=K.hex3.exec(e))&&{r:j(t[1]+""+t[1]),g:j(t[2]+""+t[2]),b:j(t[3]+""+t[3]),format:n?"name":"hex"}}function N(e){var n,t;return e=e||{level:"AA",size:"small"},n=(e.level||"AA").toUpperCase(),t=(e.size||"small").toLowerCase(),"AA"!==n&&"AAA"!==n&&(n="AA"),"small"!==t&&"large"!==t&&(t="small"),{level:n,size:t}}var T=/^\s+/,I=/\s+$/,U=0,V=r.round,X=r.min,q=r.max,G=r.random;a.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,n,t,o,a,i,s=this.toRgb();return e=s.r/255,n=s.g/255,t=s.b/255,o=e<=.03928?e/12.92:r.pow((e+.055)/1.055,2.4),a=n<=.03928?n/12.92:r.pow((n+.055)/1.055,2.4),i=t<=.03928?t/12.92:r.pow((t+.055)/1.055,2.4),.2126*o+.7152*a+.0722*i},setAlpha:function(e){return this._a=A(e),this._roundA=V(100*this._a)/100,this},toHsv:function(){var e=u(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=u(this._r,this._g,this._b),n=V(360*e.h),t=V(100*e.s),o=V(100*e.v);return 1==this._a?"hsv("+n+", "+t+"%, "+o+"%)":"hsva("+n+", "+t+"%, "+o+"%, "+this._roundA+")"},toHsl:function(){var e=c(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=c(this._r,this._g,this._b),n=V(360*e.h),t=V(100*e.s),o=V(100*e.l);return 1==this._a?"hsl("+n+", "+t+"%, "+o+"%)":"hsla("+n+", "+t+"%, "+o+"%, "+this._roundA+")"},toHex:function(e){return f(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return h(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:V(this._r),g:V(this._g),b:V(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+V(this._r)+", "+V(this._g)+", "+V(this._b)+")":"rgba("+V(this._r)+", "+V(this._g)+", "+V(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:V(100*E(this._r,255))+"%",g:V(100*E(this._g,255))+"%",b:V(100*E(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+V(100*E(this._r,255))+"%, "+V(100*E(this._g,255))+"%, "+V(100*E(this._b,255))+"%)":"rgba("+V(100*E(this._r,255))+"%, "+V(100*E(this._g,255))+"%, "+V(100*E(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(Y[f(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var n="#"+p(this._r,this._g,this._b,this._a),t=n,o=this._gradientType?"GradientType = 1, ":"";if(e){var r=a(e);t="#"+p(r._r,r._g,r._b,r._a)}return"progid:DXImageTransform.Microsoft.gradient("+o+"startColorstr="+n+",endColorstr="+t+")"},toString:function(e){var n=!!e;e=e||this._format;var t=!1,o=this._a<1&&this._a>=0;return n||!o||"hex"!==e&&"hex6"!==e&&"hex3"!==e&&"hex4"!==e&&"hex8"!==e&&"name"!==e?("rgb"===e&&(t=this.toRgbString()),"prgb"===e&&(t=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(t=this.toHexString()),"hex3"===e&&(t=this.toHexString(!0)),"hex4"===e&&(t=this.toHex8String(!0)),"hex8"===e&&(t=this.toHex8String()),"name"===e&&(t=this.toName()),"hsl"===e&&(t=this.toHslString()),"hsv"===e&&(t=this.toHsvString()),t||this.toHexString()):"name"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return a(this.toString())},_applyModification:function(e,n){var t=e.apply(null,[this].concat([].slice.call(n)));return this._r=t._r,this._g=t._g,this._b=t._b,this.setAlpha(t._a),this},lighten:function(){return this._applyModification(x,arguments)},brighten:function(){return this._applyModification(m,arguments)},darken:function(){return this._applyModification(_,arguments)},desaturate:function(){return this._applyModification(v,arguments)},saturate:function(){return this._applyModification(g,arguments)},greyscale:function(){return this._applyModification(b,arguments)},spin:function(){return this._applyModification(w,arguments)},_applyCombination:function(e,n){return e.apply(null,[this].concat([].slice.call(n)))},analogous:function(){return this._applyCombination(F,arguments)},complement:function(){return this._applyCombination(C,arguments)},monochromatic:function(){return this._applyCombination(S,arguments)},splitcomplement:function(){return this._applyCombination(M,arguments)},triad:function(){return this._applyCombination(y,arguments)},tetrad:function(){return this._applyCombination(k,arguments)}},a.fromRatio=function(e,n){if("object"==typeof e){var t={};for(var o in e)e.hasOwnProperty(o)&&(t[o]="a"===o?e[o]:D(e[o]));e=t}return a(e,n)},a.equals=function(e,n){return!(!e||!n)&&a(e).toRgbString()==a(n).toRgbString()},a.random=function(){return a.fromRatio({r:G(),g:G(),b:G()})},a.mix=function(e,n,t){t=0===t?0:t||50;var o=a(e).toRgb(),r=a(n).toRgb(),i=t/100;return a({r:(r.r-o.r)*i+o.r,g:(r.g-o.g)*i+o.g,b:(r.b-o.b)*i+o.b,a:(r.a-o.a)*i+o.a})},a.readability=function(e,n){var t=a(e),o=a(n);return(r.max(t.getLuminance(),o.getLuminance())+.05)/(r.min(t.getLuminance(),o.getLuminance())+.05)},a.isReadable=function(e,n,t){var o,r,i=a.readability(e,n);switch(r=!1,o=N(t),o.level+o.size){case"AAsmall":case"AAAlarge":r=i>=4.5;break;case"AAlarge":r=i>=3;break;case"AAAsmall":r=i>=7}return r},a.mostReadable=function(e,n,t){var o,r,i,s,c=null,l=0;t=t||{},r=t.includeFallbackColors,i=t.level,s=t.size;for(var u=0;ul&&(l=o,c=a(n[u]));return a.isReadable(e,c,{level:i,size:s})||!r?c:(t.includeFallbackColors=!1,a.mostReadable(e,["#fff","#000"],t))};var W=a.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},Y=a.hexNames=function(e){var n={};for(var t in e)e.hasOwnProperty(t)&&(n[e[t]]=t);return n}(W),K=function(){var e="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",n="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?",t="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?";return{CSS_UNIT:new RegExp(e),rgb:new RegExp("rgb"+n),rgba:new RegExp("rgba"+t),hsl:new RegExp("hsl"+n),hsla:new RegExp("hsla"+t),hsv:new RegExp("hsv"+n),hsva:new RegExp("hsva"+t),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();void 0!==e&&e.exports?e.exports=a:void 0!==(o=function(){return a}.call(n,t,n,e))&&(e.exports=o)}(Math)},function(e,n,t){var o=t(17);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("213df510",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-editable-input {\n position: relative;\n}\n.vc-input__input {\n padding: 0;\n border: 0;\n outline: none;\n}\n.vc-input__label {\n text-transform: capitalize;\n}\n",""])},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default={name:"editableInput",props:{label:String,value:[String,Number],max:Number,arrowOffset:{type:Number,default:1}},computed:{val:function(){return this.value}},filters:{maxFilter:{read:function(e){return this.max&&e>this.max?this.max:e},write:function(e,n){return e}}},methods:{update:function(e){this.handleChange(e.target.value)},handleChange:function(e){var n={};n[this.label]=e,void 0===n.hex&&void 0===n["#"]?this.$emit("change",n):e.length>5&&this.$emit("change",n)},handleBlur:function(e){console.log(e)},handleKeyDown:function(e){var n=this.val,t=Number(n);if(t){var o=this.arrowOffset||1;38===e.keyCode&&(n=t+o,this.handleChange(n),e.preventDefault()),40===e.keyCode&&(n=t-o,this.handleChange(n),e.preventDefault())}},handleDrag:function(e){console.log(e)},handleMouseDown:function(e){console.log(e)}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-editable-input"},[t("input",{staticClass:"vc-input__input",domProps:{value:e.val},on:{keydown:e.handleKeyDown,input:e.update}}),e._v(" "),t("span",{staticClass:"vc-input__label"},[e._v(e._s(e.label))])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-compact"},[t("ul",{staticClass:"vc-compact-colors"},e._l(e.defaultColors,function(n){return t("li",{key:n,staticClass:"vc-compact-color-item",class:{"vc-compact-color-item--white":"#FFFFFF"===n},style:{background:n},on:{click:function(t){e.handlerClick(n)}}},[t("div",{directives:[{name:"show",rawName:"v-show",value:n===e.pick,expression:"c === pick"}],staticClass:"vc-compact-dot"})])}))])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(22)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(24),a=t.n(r),i=t(25),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Material.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Material.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(23);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("73af3dba",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,'\n.vc-material {\n width: 98px;\n height: 98px;\n padding: 16px;\n font-family: "Roboto";\n position: relative;\n border-radius: 2px;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n background-color: #fff;\n}\n.vc-material .vc-input__input {\n width: 100%;\n margin-top: 12px;\n font-size: 15px;\n color: #333;\n height: 30px;\n}\n.vc-material .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 11px;\n color: #999;\n text-transform: capitalize;\n}\n.vc-material-hex {\n border-bottom-width: 2px;\n border-bottom-style: solid;\n}\n.vc-material-split {\n display: flex;\n margin-right: -10px;\n padding-top: 11px;\n}\n.vc-material-third {\n flex: 1;\n padding-right: 10px;\n}\n',""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(4),a=o(r),i=t(3),s=o(i);n.default={name:"Material",mixins:[s.default],components:{"ed-in":a.default},methods:{onChange:function(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-material"},[t("ed-in",{staticClass:"vc-material-hex",style:{borderColor:e.colors.hex},attrs:{label:"hex"},on:{change:e.onChange},model:{value:e.colors.hex,callback:function(n){e.colors.hex=n},expression:"colors.hex"}}),e._v(" "),t("div",{staticClass:"vc-material-split"},[t("div",{staticClass:"vc-material-third"},[t("ed-in",{attrs:{label:"r"},on:{change:e.onChange},model:{value:e.colors.rgba.r,callback:function(n){e.colors.rgba.r=n},expression:"colors.rgba.r"}})],1),e._v(" "),t("div",{staticClass:"vc-material-third"},[t("ed-in",{attrs:{label:"g"},on:{change:e.onChange},model:{value:e.colors.rgba.g,callback:function(n){e.colors.rgba.g=n},expression:"colors.rgba.g"}})],1),e._v(" "),t("div",{staticClass:"vc-material-third"},[t("ed-in",{attrs:{label:"b"},on:{change:e.onChange},model:{value:e.colors.rgba.b,callback:function(n){e.colors.rgba.b=n},expression:"colors.rgba.b"}})],1)])],1)},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(27)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(29),a=t.n(r),i=t(34),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Slider.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Slider.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(28);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("66d0b52e",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-slider {\n position: relative;\n width: 410px;\n}\n.vc-slider-hue-warp {\n height: 12px;\n position: relative;\n}\n.vc-slider-hue-warp .vc-hue-picker {\n width: 14px;\n height: 14px;\n border-radius: 6px;\n transform: translate(-7px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-slider-swatches {\n display: flex;\n margin-top: 20px;\n}\n.vc-slider-swatch {\n margin-right: 1px;\n flex: 1;\n width: 20%;\n}\n.vc-slider-swatch:first-child {\n margin-right: 1px;\n}\n.vc-slider-swatch:first-child .vc-slider-swatch-picker {\n border-radius: 2px 0px 0px 2px;\n}\n.vc-slider-swatch:last-child {\n margin-right: 0;\n}\n.vc-slider-swatch:last-child .vc-slider-swatch-picker {\n border-radius: 0px 2px 2px 0px;\n}\n.vc-slider-swatch-picker {\n cursor: pointer;\n height: 12px;\n}\n.vc-slider-swatch-picker--active {\n transform: scaleY(1.8);\n border-radius: 3.6px/2px;\n}\n",""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),a=o(r),i=t(5),s=o(i);n.default={name:"Slider",mixins:[a.default],props:{direction:String},components:{hue:s.default},computed:{activeOffset:function(){return Math.round(100*this.colors.hsl.s)/100==.5?Math.round(100*this.colors.hsl.l)/100:0}},data:function(){return{swatches:[".80",".65",".50",".35",".20"]}},methods:{hueChange:function(e){this.colorChange(e)},handleSwClick:function(e,n){this.colorChange({h:this.colors.hsl.h,s:.5,l:n,source:"hsl"})}}}},function(e,n,t){var o=t(31);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("aa885cb8",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-hue {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border-radius: 2px;\n}\n.vc-hue--horizontal {\n background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue--vertical {\n background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue-container {\n cursor: pointer;\n margin: 0 2px;\n position: relative;\n height: 100%;\n}\n.vc-hue-pointer {\n z-index: 2;\n position: absolute;\n}\n.vc-hue-picker {\n cursor: pointer;\n margin-top: 1px;\n width: 4px;\n border-radius: 1px;\n height: 8px;\n box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n background: #fff;\n transform: translateX(-2px) ;\n}\n",""])},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default={name:"Hue",props:{value:Object,direction:{type:String,default:"horizontal"}},data:function(){return{oldHue:0,pullDirection:""}},computed:{colors:function(){var e=this.value.hsl.h;return 0!==e&&e-this.oldHue>0&&(this.pullDirection="right"),0!==e&&e-this.oldHue<0&&(this.pullDirection="left"),this.oldHue=e,this.value},directionClass:function(){return{"vc-hue--horizontal":"horizontal"===this.direction,"vc-hue--vertical":"vertical"===this.direction}},pointerTop:function(){return"vertical"===this.direction?0===this.colors.hsl.h&&"right"===this.pullDirection?0:-100*this.colors.hsl.h/360+100+"%":0},pointerLeft:function(){return"vertical"===this.direction?0:0===this.colors.hsl.h&&"right"===this.pullDirection?"100%":100*this.colors.hsl.h/360+"%"}},methods:{handleChange:function(e,n){!n&&e.preventDefault();var t,o,r=this.$refs.container,a=r.clientWidth,i=r.clientHeight,s=r.getBoundingClientRect().left+window.pageXOffset,c=r.getBoundingClientRect().top+window.pageYOffset,l=e.pageX||(e.touches?e.touches[0].pageX:0),u=e.pageY||(e.touches?e.touches[0].pageY:0),d=l-s,f=u-c;"vertical"===this.direction?(f<0?t=360:f>i?t=0:(o=-100*f/i+100,t=360*o/100),this.colors.hsl.h!==t&&this.$emit("change",{h:t,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"})):(d<0?t=0:d>a?t=360:(o=100*d/a,t=360*o/100),this.colors.hsl.h!==t&&this.$emit("change",{h:t,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"}))},handleMouseDown:function(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(e){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:["vc-hue",e.directionClass]},[t("div",{ref:"container",staticClass:"vc-hue-container",on:{mousedown:e.handleMouseDown,touchmove:e.handleChange,touchstart:e.handleChange}},[t("div",{staticClass:"vc-hue-pointer",style:{top:e.pointerTop,left:e.pointerLeft}},[t("div",{staticClass:"vc-hue-picker"})])])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-slider"},[t("div",{staticClass:"vc-slider-hue-warp"},[t("hue",{on:{change:e.hueChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-slider-swatches"},e._l(e.swatches,function(n,o){return t("div",{staticClass:"vc-slider-swatch",attrs:{"data-index":o},on:{click:function(t){e.handleSwClick(o,n)}}},[t("div",{staticClass:"vc-slider-swatch-picker",class:{"vc-slider-swatch-picker--active":n==e.activeOffset},style:{background:"hsl("+e.colors.hsl.h+", 50%, "+100*n+"%)"}})])}))])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(36)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(38),a=t.n(r),i=t(40),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Swatches.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Swatches.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(37);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("5b122313",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-swatches {\n width: 320px;\n height: 240px;\n overflow-y: scroll;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n}\n.vc-swatches-box {\n padding: 16px 0 6px 16px;\n overflow: hidden;\n}\n.vc-swatches-color-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n}\n.vc-swatches-color-it {\n width: 40px;\n height: 24px;\n cursor: pointer;\n background: #880e4f;\n margin-bottom: 1px;\n overflow: hidden;\n -ms-border-radius: 2px 2px 0 0;\n -moz-border-radius: 2px 2px 0 0;\n -o-border-radius: 2px 2px 0 0;\n -webkit-border-radius: 2px 2px 0 0;\n border-radius: 2px 2px 0 0;\n}\n.vc-swatches-pick {\n fill: rgb(255, 255, 255);\n margin-left: 8px;\n display: block;\n}\n",""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(39),a=o(r),i=t(3),s=o(i),c=["red","pink","purple","deepPurple","indigo","blue","lightBlue","cyan","teal","green","lightGreen","lime","yellow","amber","orange","deepOrange","brown","blueGrey"],l=["900","700","500","300","100"],u=function(){var e=[];return c.forEach(function(n){var t=[];l.forEach(function(e){t.push(a.default[n][e].toUpperCase())}),e.push(t)}),e}();n.default={name:"Swatches",mixins:[s.default],computed:{pick:function(){return this.colors.hex}},data:function(){return{defaultColors:u}},methods:{handlerClick:function(e){this.colorChange({hex:e,source:"hex"})}}}},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),t.d(n,"red",function(){return o}),t.d(n,"pink",function(){return r}),t.d(n,"purple",function(){return a}),t.d(n,"deepPurple",function(){return i}),t.d(n,"indigo",function(){return s}),t.d(n,"blue",function(){return c}),t.d(n,"lightBlue",function(){return l}),t.d(n,"cyan",function(){return u}),t.d(n,"teal",function(){return d}),t.d(n,"green",function(){return f}),t.d(n,"lightGreen",function(){return h}),t.d(n,"lime",function(){return p}),t.d(n,"yellow",function(){return v}),t.d(n,"amber",function(){return g}),t.d(n,"orange",function(){return b}),t.d(n,"deepOrange",function(){return x}),t.d(n,"brown",function(){return m}),t.d(n,"grey",function(){return _}),t.d(n,"blueGrey",function(){return w}),t.d(n,"darkText",function(){return C}),t.d(n,"lightText",function(){return y}),t.d(n,"darkIcons",function(){return k}),t.d(n,"lightIcons",function(){return M}),t.d(n,"white",function(){return F}),t.d(n,"black",function(){return S});var o={50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},r={50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},a={50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},i={50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},s={50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},c={50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},l={50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},u={50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},d={50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},f={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},h={50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},p={50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},v={50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},g={50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},b={50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},x={50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},m={50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},_={50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},w={50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},C={primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},y={primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},k={active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},M={active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},F="#ffffff",S="#000000";n.default={red:o,pink:r,purple:a,deepPurple:i,indigo:s,blue:c,lightBlue:l,cyan:u,teal:d,green:f,lightGreen:h,lime:p,yellow:v,amber:g,orange:b,deepOrange:x,brown:m,grey:_,blueGrey:w,darkText:C,lightText:y,darkIcons:k,lightIcons:M,white:F,black:S}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-swatches",attrs:{"data-pick":e.pick}},[t("div",{staticClass:"vc-swatches-box"},e._l(e.defaultColors,function(n){return t("div",{staticClass:"vc-swatches-color-group"},e._l(n,function(n){return t("div",{staticClass:"vc-swatches-color-it",style:{background:n},attrs:{"data-color":n},on:{click:function(t){e.handlerClick(n)}}},[t("div",{directives:[{name:"show",rawName:"v-show",value:n==e.pick,expression:"c == pick"}],staticClass:"vc-swatches-pick"},[t("svg",{staticStyle:{width:"24px",height:"24px"},attrs:{viewBox:"0 0 24 24"}},[t("path",{attrs:{d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"}})])])])}))}))])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(42)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(44),a=t.n(r),i=t(59),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Photoshop.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Photoshop.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(43);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("54de37c0",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,'\n.vc-photoshop {\n background: #DCDCDC;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);\n box-sizing: initial;\n width: 513px;\n font-family: Roboto;\n}\n.vc-ps-head {\n background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);\n border-bottom: 1px solid #B1B1B1;\n box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);\n height: 23px;\n line-height: 24px;\n border-radius: 4px 4px 0 0;\n font-size: 13px;\n color: #4D4D4D;\n text-align: center;\n}\n.vc-ps-body {\n padding: 15px;\n display: flex;\n}\n.vc-ps-saturation-wrap {\n width: 256px;\n height: 256px;\n position: relative;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n overflow: hidden;\n}\n.vc-ps-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-ps-hue-wrap {\n position: relative;\n height: 256px;\n width: 19px;\n margin-left: 10px;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n}\n.vc-ps-hue-pointer {\n position: relative;\n}\n.vc-ps-hue-pointer--left,\n.vc-ps-hue-pointer--right {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 5px 0 5px 8px;\n border-color: transparent transparent transparent #555;\n}\n.vc-ps-hue-pointer--left:after,\n.vc-ps-hue-pointer--right:after {\n content: "";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent transparent transparent #fff;\n position: absolute;\n top: 1px;\n left: 1px;\n transform: translate(-8px, -5px);\n}\n.vc-ps-hue-pointer--left {\n transform: translate(-13px, -4px);\n}\n.vc-ps-hue-pointer--right {\n transform: translate(20px, -4px) rotate(180deg);\n}\n.vc-ps-controls {\n width: 180px;\n margin-left: 10px;\n display: flex;\n}\n.vc-ps-actions {\n margin-left: 20px;\n flex: 1;\n}\n.vc-ps-ac-btn {\n cursor: pointer;\n background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);\n border: 1px solid #878787;\n border-radius: 2px;\n height: 20px;\n box-shadow: 0 1px 0 0 #EAEAEA;\n font-size: 14px;\n color: #000;\n line-height: 20px;\n text-align: center;\n margin-bottom: 10px;\n}\n.vc-ps-previews {\n width: 60px;\n}\n.vc-ps-previews__swatches {\n border: 1px solid #B3B3B3;\n border-bottom: 1px solid #F0F0F0;\n margin-bottom: 2px;\n margin-top: 1px;\n}\n.vc-ps-previews__pr-color {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n}\n.vc-ps-previews__label {\n font-size: 14px;\n color: #000;\n text-align: center;\n}\n.vc-ps-fields {\n padding-top: 5px;\n padding-bottom: 9px;\n width: 80px;\n position: relative;\n}\n.vc-ps-fields .vc-input__input {\n margin-left: 40%;\n width: 40%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 5px;\n font-size: 13px;\n padding-left: 3px;\n margin-right: 10px;\n}\n.vc-ps-fields .vc-input__label {\n top: 0;\n left: 0;\n width: 34px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n position: absolute;\n}\n.vc-ps-fields__divider {\n height: 5px;\n}\n.vc-ps-fields__hex .vc-input__input {\n margin-left: 20%;\n width: 80%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 6px;\n font-size: 13px;\n padding-left: 3px;\n}\n.vc-ps-fields__hex .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n width: 14px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n}\n',""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),a=o(r),i=t(4),s=o(i),c=t(6),l=o(c),u=t(5),d=o(u),f=t(7),h=o(f);n.default={name:"Photoshop",mixins:[a.default],props:{head:{type:String,default:"Color Picker"}},components:{saturation:l.default,hue:d.default,alpha:h.default,"ed-in":s.default},data:function(){return{currentColor:"#FFF"}},created:function(){this.currentColor=this.colors.hex},methods:{childChange:function(e){this.colorChange(e)},inputChange:function(e){e&&(e["#"]?this.isValidHex(e["#"])&&this.colorChange({hex:e["#"],source:"hex"}):(e.r||e.g||e.b||e.a)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))},handleAccept:function(){this.$emit("ok")},handleCancel:function(){this.$emit("cancel")}}}},function(e,n,t){var o=t(46);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("e4784a76",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-saturation,\n.vc-saturation--white,\n.vc-saturation--black {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.vc-saturation--white {\n background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n}\n.vc-saturation--black {\n background: linear-gradient(to top, #000, rgba(0,0,0,0));\n}\n.vc-saturation-pointer {\n cursor: pointer;\n position: absolute;\n}\n.vc-saturation-circle {\n cursor: head;\n width: 4px;\n height: 4px;\n box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);\n border-radius: 50%;\n transform: translate(-2px, -2px);\n}\n",""])},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=t(48),r=function(e){return e&&e.__esModule?e:{default:e}}(o);n.default={name:"Saturation",props:{value:Object},computed:{colors:function(){return this.value},bgColor:function(){return"hsl("+this.colors.hsv.h+", 100%, 50%)"},pointerTop:function(){return-100*this.colors.hsv.v+1+100+"%"},pointerLeft:function(){return 100*this.colors.hsv.s+"%"}},methods:{throttle:(0,r.default)(function(e,n){e(n)},20,{leading:!0,trailing:!1}),handleChange:function(e,n){!n&&e.preventDefault();var t=this.$refs.container,o=t.clientWidth,r=t.clientHeight,a=t.getBoundingClientRect().left+window.pageXOffset,i=t.getBoundingClientRect().top+window.pageYOffset,s=e.pageX||(e.touches?e.touches[0].pageX:0),c=e.pageY||(e.touches?e.touches[0].pageY:0),l=s-a,u=c-i;l<0?l=0:l>o?l=o:u<0?u=0:u>r&&(u=r);var d=l/o,f=-u/r+1;f=f>0?f:0,f=f>1?1:f,this.throttle(this.onChange,{h:this.colors.hsv.h,s:d,v:f,a:this.colors.hsv.a,source:"hsva"})},onChange:function(e){this.$emit("change",e)},handleMouseDown:function(e){window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(e){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,n,t){(function(n){function t(e,n,t){function o(n){var t=v,o=g;return v=g=void 0,k=n,x=e.apply(o,t)}function a(e){return k=e,m=setTimeout(u,n),M?o(e):x}function i(e){var t=e-_,o=e-k,r=n-t;return F?C(r,b-o):r}function l(e){var t=e-_,o=e-k;return void 0===_||t>=n||t<0||F&&o>=b}function u(){var e=y();if(l(e))return d(e);m=setTimeout(u,i(e))}function d(e){return m=void 0,S&&v?o(e):(v=g=void 0,x)}function f(){void 0!==m&&clearTimeout(m),k=0,v=_=g=m=void 0}function h(){return void 0===m?x:d(y())}function p(){var e=y(),t=l(e);if(v=arguments,g=this,_=e,t){if(void 0===m)return a(_);if(F)return m=setTimeout(u,n),o(_)}return void 0===m&&(m=setTimeout(u,n)),x}var v,g,b,x,m,_,k=0,M=!1,F=!1,S=!0;if("function"!=typeof e)throw new TypeError(c);return n=s(n)||0,r(t)&&(M=!!t.leading,F="maxWait"in t,b=F?w(s(t.maxWait)||0,n):b,S="trailing"in t?!!t.trailing:S),p.cancel=f,p.flush=h,p}function o(e,n,o){var a=!0,i=!0;if("function"!=typeof e)throw new TypeError(c);return r(o)&&(a="leading"in o?!!o.leading:a,i="trailing"in o?!!o.trailing:i),t(e,n,{leading:a,maxWait:n,trailing:i})}function r(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function a(e){return!!e&&"object"==typeof e}function i(e){return"symbol"==typeof e||a(e)&&_.call(e)==u}function s(e){if("number"==typeof e)return e;if(i(e))return l;if(r(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=r(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(d,"");var t=h.test(e);return t||p.test(e)?v(e.slice(2),t?2:8):f.test(e)?l:+e}var c="Expected a function",l=NaN,u="[object Symbol]",d=/^\s+|\s+$/g,f=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,p=/^0o[0-7]+$/i,v=parseInt,g="object"==typeof n&&n&&n.Object===Object&&n,b="object"==typeof self&&self&&self.Object===Object&&self,x=g||b||Function("return this")(),m=Object.prototype,_=m.toString,w=Math.max,C=Math.min,y=function(){return x.Date.now()};e.exports=o}).call(n,t(49))},function(e,n){var t;t=function(){return this}();try{t=t||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(t=window)}e.exports=t},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{ref:"container",staticClass:"vc-saturation",style:{background:e.bgColor},on:{mousedown:e.handleMouseDown}},[t("div",{staticClass:"vc-saturation--white"}),e._v(" "),t("div",{staticClass:"vc-saturation--black"}),e._v(" "),t("div",{staticClass:"vc-saturation-pointer",style:{top:e.pointerTop,left:e.pointerLeft}},[t("div",{staticClass:"vc-saturation-circle"})])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){var o=t(52);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("4e0b210b",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-alpha {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n.vc-alpha-checkboard-wrap {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n overflow: hidden;\n}\n.vc-alpha-gradient {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n.vc-alpha-container {\n cursor: pointer;\n position: relative;\n z-index: 2;\n height: 100%;\n margin: 0 3px;\n}\n.vc-alpha-pointer {\n z-index: 2;\n position: absolute;\n}\n.vc-alpha-picker {\n cursor: pointer;\n width: 4px;\n border-radius: 1px;\n height: 8px;\n box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n background: #fff;\n margin-top: 1px;\n transform: translateX(-2px);\n}\n",""])},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=t(8),r=function(e){return e&&e.__esModule?e:{default:e}}(o);n.default={name:"Alpha",props:{value:Object,onChange:Function},components:{checkboard:r.default},computed:{colors:function(){return this.value},gradientColor:function(){var e=this.colors.rgba,n=[e.r,e.g,e.b].join(",");return"linear-gradient(to right, rgba("+n+", 0) 0%, rgba("+n+", 1) 100%)"}},methods:{handleChange:function(e,n){!n&&e.preventDefault();var t,o=this.$refs.container,r=o.clientWidth,a=o.getBoundingClientRect().left+window.pageXOffset,i=e.pageX||(e.touches?e.touches[0].pageX:0),s=i-a;t=s<0?0:s>r?1:Math.round(100*s/r)/100,this.colors.a!==t&&this.$emit("change",{h:this.colors.hsl.h,s:this.colors.hsl.s,l:this.colors.hsl.l,a:t,source:"rgba"})},handleMouseDown:function(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,n,t){var o=t(55);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("7a6164b0",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-checkerboard {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n",""])},function(e,n,t){"use strict";function o(e,n,t){if("undefined"==typeof document)return null;var o=document.createElement("canvas");o.width=o.height=2*t;var r=o.getContext("2d");return r?(r.fillStyle=e,r.fillRect(0,0,o.width,o.height),r.fillStyle=n,r.fillRect(0,0,t,t),r.translate(t,t),r.fillRect(0,0,t,t),o.toDataURL()):null}function r(e,n,t){var r=e+","+n+","+t;if(a[r])return a[r];var i=o(e,n,t);return a[r]=i,i}Object.defineProperty(n,"__esModule",{value:!0});var a={};n.default={name:"Checkboard",props:{size:{type:[Number,String],default:8},white:{type:String,default:"#fff"},grey:{type:String,default:"#e6e6e6"}},computed:{bgStyle:function(){return"url("+r(this.white,this.grey,this.size)+") center left"}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{staticClass:"vc-checkerboard",style:{background:e.bgStyle}})},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-alpha"},[t("div",{staticClass:"vc-alpha-checkboard-wrap"},[t("checkboard")],1),e._v(" "),t("div",{staticClass:"vc-alpha-gradient",style:{background:e.gradientColor}}),e._v(" "),t("div",{ref:"container",staticClass:"vc-alpha-container",on:{mousedown:e.handleMouseDown,touchmove:e.handleChange,touchstart:e.handleChange}},[t("div",{staticClass:"vc-alpha-pointer",style:{left:100*e.colors.a+"%"}},[t("div",{staticClass:"vc-alpha-picker"})])])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-photoshop"},[t("div",{staticClass:"vc-ps-head"},[e._v(e._s(e.head))]),e._v(" "),t("div",{staticClass:"vc-ps-body"},[t("div",{staticClass:"vc-ps-saturation-wrap"},[t("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-ps-hue-wrap"},[t("hue",{attrs:{direction:"vertical"},on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}},[t("div",{staticClass:"vc-ps-hue-pointer"},[t("i",{staticClass:"vc-ps-hue-pointer--left"}),t("i",{staticClass:"vc-ps-hue-pointer--right"})])])],1),e._v(" "),t("div",{staticClass:"vc-ps-controls"},[t("div",{staticClass:"vc-ps-previews"},[t("div",{staticClass:"vc-ps-previews__label"},[e._v("new")]),e._v(" "),t("div",{staticClass:"vc-ps-previews__swatches"},[t("div",{staticClass:"vc-ps-previews__pr-color",style:{background:e.colors.hex}}),e._v(" "),t("div",{staticClass:"vc-ps-previews__pr-color",style:{background:e.currentColor}})]),e._v(" "),t("div",{staticClass:"vc-ps-previews__label"},[e._v("current")])]),e._v(" "),t("div",{staticClass:"vc-ps-actions"},[t("div",{staticClass:"vc-ps-ac-btn",on:{click:e.handleAccept}},[e._v("OK")]),e._v(" "),t("div",{staticClass:"vc-ps-ac-btn",on:{click:e.handleCancel}},[e._v("Cancel")]),e._v(" "),t("div",{staticClass:"vc-ps-fields"},[t("ed-in",{attrs:{label:"h"},on:{change:e.inputChange},model:{value:e.colors.hsv.h,callback:function(n){e.colors.hsv.h=n},expression:"colors.hsv.h"}}),e._v(" "),t("ed-in",{attrs:{label:"s"},on:{change:e.inputChange},model:{value:e.colors.hsv.s,callback:function(n){e.colors.hsv.s=n},expression:"colors.hsv.s"}}),e._v(" "),t("ed-in",{attrs:{label:"v"},on:{change:e.inputChange},model:{value:e.colors.hsv.v,callback:function(n){e.colors.hsv.v=n},expression:"colors.hsv.v"}}),e._v(" "),t("div",{staticClass:"vc-ps-fields__divider"}),e._v(" "),t("ed-in",{attrs:{label:"r"},on:{change:e.inputChange},model:{value:e.colors.rgba.r,callback:function(n){e.colors.rgba.r=n},expression:"colors.rgba.r"}}),e._v(" "),t("ed-in",{attrs:{label:"g"},on:{change:e.inputChange},model:{value:e.colors.rgba.g,callback:function(n){e.colors.rgba.g=n},expression:"colors.rgba.g"}}),e._v(" "),t("ed-in",{attrs:{label:"b"},on:{change:e.inputChange},model:{value:e.colors.rgba.b,callback:function(n){e.colors.rgba.b=n},expression:"colors.rgba.b"}}),e._v(" "),t("div",{staticClass:"vc-ps-fields__divider"}),e._v(" "),t("ed-in",{staticClass:"vc-ps-fields__hex",attrs:{label:"#"},on:{change:e.inputChange},model:{value:e.colors.hex,callback:function(n){e.colors.hex=n},expression:"colors.hex"}})],1)])])])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(61)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(63),a=t.n(r),i=t(64),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Sketch.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Sketch.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(62);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("7172a0fb",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-sketch {\n position: relative;\n width: 200px;\n padding: 10px 10px 0;\n box-sizing: initial;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n}\n.vc-sketch-saturation-wrap {\n width: 100%;\n padding-bottom: 75%;\n position: relative;\n overflow: hidden;\n}\n.vc-sketch-controls {\n display: flex;\n}\n.vc-sketch-sliders {\n padding: 4px 0;\n flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n position: relative;\n height: 10px;\n}\n.vc-sketch-alpha-wrap {\n position: relative;\n height: 10px;\n margin-top: 4px;\n overflow: hidden;\n}\n.vc-sketch-color-wrap {\n width: 24px;\n height: 24px;\n position: relative;\n margin-top: 4px;\n margin-left: 4px;\n border-radius: 3px;\n}\n.vc-sketch-active-color {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 2px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);\n z-index: 2;\n}\n.vc-sketch-field {\n display: flex;\n padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n width: 80%;\n padding: 4px 10% 3px;\n border: none;\n box-shadow: inset 0 0 0 1px #ccc;\n font-size: 11px;\n}\n.vc-sketch-field .vc-input__label {\n display: block;\n text-align: center;\n font-size: 11px;\n color: #222;\n padding-top: 3px;\n padding-bottom: 4px;\n text-transform: capitalize;\n}\n.vc-sketch-field--single {\n flex: 1;\n padding-left: 6px;\n}\n.vc-sketch-field--double {\n flex: 2;\n}\n.vc-sketch-presets {\n margin-right: -10px;\n margin-left: -10px;\n padding-left: 10px;\n padding-top: 10px;\n border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n border-radius: 3px;\n overflow: hidden;\n position: relative;\n display: inline-block;\n margin: 0 10px 10px 0;\n vertical-align: top;\n cursor: pointer;\n width: 16px;\n height: 16px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);\n}\n",""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),a=o(r),i=t(4),s=o(i),c=t(6),l=o(c),u=t(5),d=o(u),f=t(7),h=o(f),p=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"];n.default={name:"Sketch",mixins:[a.default],components:{saturation:l.default,hue:d.default,alpha:h.default,"ed-in":s.default},data:function(){return{presetColors:p}},computed:{activeColor:function(){var e=this.colors.rgba;return"rgba("+[e.r,e.g,e.b,e.a].join(",")+")"}},methods:{handlePreset:function(e){this.colorChange({hex:e,source:"hex"})},childChange:function(e){this.colorChange(e)},inputChange:function(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b||e.a)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-sketch"},[t("div",{staticClass:"vc-sketch-saturation-wrap"},[t("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-controls"},[t("div",{staticClass:"vc-sketch-sliders"},[t("div",{staticClass:"vc-sketch-hue-wrap"},[t("hue",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-alpha-wrap"},[t("alpha",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1)]),e._v(" "),t("div",{staticClass:"vc-sketch-color-wrap"},[t("div",{staticClass:"vc-sketch-active-color",style:{background:e.activeColor}})])]),e._v(" "),t("div",{staticClass:"vc-sketch-field"},[t("div",{staticClass:"vc-sketch-field--double"},[t("ed-in",{attrs:{label:"hex"},on:{change:e.inputChange},model:{value:e.colors.hex,callback:function(n){e.colors.hex=n},expression:"colors.hex"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-field--single"},[t("ed-in",{attrs:{label:"r"},on:{change:e.inputChange},model:{value:e.colors.rgba.r,callback:function(n){e.colors.rgba.r=n},expression:"colors.rgba.r"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-field--single"},[t("ed-in",{attrs:{label:"g"},on:{change:e.inputChange},model:{value:e.colors.rgba.g,callback:function(n){e.colors.rgba.g=n},expression:"colors.rgba.g"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-field--single"},[t("ed-in",{attrs:{label:"b"},on:{change:e.inputChange},model:{value:e.colors.rgba.b,callback:function(n){e.colors.rgba.b=n},expression:"colors.rgba.b"}})],1),e._v(" "),t("div",{staticClass:"vc-sketch-field--single"},[t("ed-in",{attrs:{label:"a","arrow-offset":.01,max:1},on:{change:e.inputChange},model:{value:e.colors.a,callback:function(n){e.colors.a=n},expression:"colors.a"}})],1)]),e._v(" "),t("div",{staticClass:"vc-sketch-presets"},e._l(e.presetColors,function(n){return t("div",{staticClass:"vc-sketch-presets-color",style:{background:n},on:{click:function(t){e.handlePreset(n)}}})}))])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a},function(e,n,t){"use strict";function o(e){s||t(66)}Object.defineProperty(n,"__esModule",{value:!0});var r=t(68),a=t.n(r),i=t(69),s=!1,c=t(2),l=o,u=c(a.a,i.a,l,null,null);u.options.__file="src/components/Chrome.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Chrome.vue: functional components are not supported with templates, they should use render functions."),n.default=u.exports},function(e,n,t){var o=t(67);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);t(1)("c3407806",o,!1)},function(e,n,t){n=e.exports=t(0)(!1),n.push([e.i,"\n.vc-chrome {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);\n box-sizing: initial;\n width: 225px;\n font-family: Menlo;\n background-color: #fff;\n}\n.vc-chrome-controls {\n display: flex;\n}\n.vc-chrome-color-wrap {\n width: 32px;\n}\n.vc-chrome-active-color {\n margin-top: 6px;\n width: 16px;\n height: 16px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n}\n.vc-chrome-sliders {\n flex: 1;\n}\n.vc-chrome-fields-wrap {\n display: flex;\n padding-top: 16px;\n}\n.vc-chrome-fields {\n display: flex;\n margin-left: -6px;\n flex: 1;\n}\n.vc-chrome-field {\n padding-left: 6px;\n width: 100%;\n}\n.vc-chrome-toggle-btn {\n width: 32px;\n text-align: right;\n position: relative;\n}\n.vc-chrome-toggle-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n z-index: 2;\n}\n.vc-chrome-toggle-icon-highlight {\n position: absolute;\n width: 24px;\n height: 28px;\n background: #eee;\n border-radius: 4px;\n top: 10px;\n left: 12px;\n}\n.vc-chrome-hue-wrap {\n position: relative;\n height: 10px;\n margin-bottom: 8px;\n}\n.vc-chrome-alpha-wrap {\n position: relative;\n height: 10px;\n}\n.vc-chrome-hue-wrap .vc-hue {\n border-radius: 2px;\n}\n.vc-chrome-alpha-wrap .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {\n width: 12px;\n height: 12px;\n border-radius: 6px;\n transform: translate(-6px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-chrome-body {\n padding: 16px 16px 12px;\n background-color: #fff;\n}\n.vc-chrome-saturation-wrap {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n}\n.vc-chrome-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-chrome-fields .vc-input__input {\n font-size: 11px;\n color: #333;\n width: 100%;\n border-radius: 2px;\n border: none;\n box-shadow: inset 0 0 0 1px #dadada;\n height: 21px;\n text-align: center;\n}\n.vc-chrome-fields .vc-input__label {\n text-transform: uppercase;\n font-size: 11px;\n line-height: 11px;\n color: #969696;\n text-align: center;\n display: block;\n margin-top: 12px;\n}\n",""])},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),a=o(r),i=t(4),s=o(i),c=t(6),l=o(c),u=t(5),d=o(u),f=t(7),h=o(f);n.default={name:"Chrome",mixins:[a.default],props:{},components:{saturation:l.default,hue:d.default,alpha:h.default,"ed-in":s.default},data:function(){return{fields:["hex","rgba","hsla"],fieldsIndex:0,highlight:!1}},computed:{activeColor:function(){var e=this.colors.rgba;return"rgba("+[e.r,e.g,e.b,e.a].join(",")+")"}},methods:{handlePreset:function(e){this.colorChange({hex:e,source:"hex"})},childChange:function(e){this.colorChange(e)},inputChange:function(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b||e.a)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))},toggleViews:function(){if(this.fieldsIndex>=2)return void(this.fieldsIndex=0);this.fieldsIndex++},showHighlight:function(){this.highlight=!0},hideHighlight:function(){this.highlight=!1}}}},function(e,n,t){"use strict";var o=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"vc-chrome"},[t("div",{staticClass:"vc-chrome-saturation-wrap"},[t("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-body"},[t("div",{staticClass:"vc-chrome-controls"},[t("div",{staticClass:"vc-chrome-color-wrap"},[t("div",{staticClass:"vc-chrome-active-color",style:{background:e.activeColor}})]),e._v(" "),t("div",{staticClass:"vc-chrome-sliders"},[t("div",{staticClass:"vc-chrome-hue-wrap"},[t("hue",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-alpha-wrap"},[t("alpha",{on:{change:e.childChange},model:{value:e.colors,callback:function(n){e.colors=n},expression:"colors"}})],1)])]),e._v(" "),t("div",{staticClass:"vc-chrome-fields-wrap"},[t("div",{directives:[{name:"show",rawName:"v-show",value:0===e.fieldsIndex,expression:"fieldsIndex === 0"}],staticClass:"vc-chrome-fields"},[t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"hex"},on:{change:e.inputChange},model:{value:e.colors.hex,callback:function(n){e.colors.hex=n},expression:"colors.hex"}})],1)]),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:1===e.fieldsIndex,expression:"fieldsIndex === 1"}],staticClass:"vc-chrome-fields"},[t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"r"},on:{change:e.inputChange},model:{value:e.colors.rgba.r,callback:function(n){e.colors.rgba.r=n},expression:"colors.rgba.r"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"g"},on:{change:e.inputChange},model:{value:e.colors.rgba.g,callback:function(n){e.colors.rgba.g=n},expression:"colors.rgba.g"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"b"},on:{change:e.inputChange},model:{value:e.colors.rgba.b,callback:function(n){e.colors.rgba.b=n},expression:"colors.rgba.b"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"a","arrow-offset":.01,max:1},on:{change:e.inputChange},model:{value:e.colors.a,callback:function(n){e.colors.a=n},expression:"colors.a"}})],1)]),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:2===e.fieldsIndex,expression:"fieldsIndex === 2"}],staticClass:"vc-chrome-fields"},[t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"h"},on:{change:e.inputChange},model:{value:e.colors.hsl.h,callback:function(n){e.colors.hsl.h=n},expression:"colors.hsl.h"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"s"},on:{change:e.inputChange},model:{value:e.colors.hsl.s,callback:function(n){e.colors.hsl.s=n},expression:"colors.hsl.s"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"l"},on:{change:e.inputChange},model:{value:e.colors.hsl.l,callback:function(n){e.colors.hsl.l=n},expression:"colors.hsl.l"}})],1),e._v(" "),t("div",{staticClass:"vc-chrome-field"},[t("ed-in",{attrs:{label:"a","arrow-offset":.01,max:1},on:{change:e.inputChange},model:{value:e.colors.a,callback:function(n){e.colors.a=n},expression:"colors.a"}})],1)]),e._v(" "),t("div",{staticClass:"vc-chrome-toggle-btn",on:{click:e.toggleViews}},[t("div",{staticClass:"vc-chrome-toggle-icon"},[t("svg",{staticStyle:{width:"24px",height:"24px"},attrs:{viewBox:"0 0 24 24"},on:{mouseover:e.showHighlight,mouseenter:e.showHighlight,mouseout:e.hideHighlight}},[t("path",{attrs:{fill:"#333",d:"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"}})])]),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:e.highlight,expression:"highlight"}],staticClass:"vc-chrome-toggle-icon-highlight"})])])])])},r=[];o._withStripped=!0;var a={render:o,staticRenderFns:r};n.a=a}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueColor=t():e.VueColor=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;on.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o0?(0,i.default)(e.hex):(0,i.default)(e))||void 0!==n._a&&null!==n._a||n.setAlpha(r||1);var o=n.toHsl(),a=n.toHsv();return 0===o.s&&(a.h=o.h=e.h||e.hsl&&e.hsl.h||t||0),a.v<.0164&&(a.h=e.h||e.hsv&&e.hsv.h||0,a.s=e.s||e.hsv&&e.hsv.s||0),o.l<.01&&(o.h=e.h||e.hsl&&e.hsl.h||0,o.s=e.s||e.hsl&&e.hsl.s||0),{hsl:o,hex:n.toHexString().toUpperCase(),rgba:n.toRgb(),hsv:a,oldHue:e.h||t||o.h,source:e.source,a:e.a||n.getAlpha()}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(15),i=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default={props:["value"],data:function(){return{val:r(this.value)}},computed:{colors:{get:function(){return this.val},set:function(e){this.val=e,this.$emit("input",e)}}},watch:{value:function(e){this.val=r(e)}},methods:{colorChange:function(e,t){this.oldHue=this.colors.hsl.h,this.colors=r(e,t||this.oldHue)},isValidHex:function(e){return(0,i.default)(e).isValid()},simpleCheckForValidColor:function(e){for(var t=["r","g","b","a","h","s","l","v"],n=0,r=0,o=0;o.5?c/(2-i-a):c/(i+a),i){case e:r=(t-n)/c+(t1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}var o,i,a;if(e=E(e,360),t=E(t,100),n=E(n,100),0===t)o=i=a=n;else{var s=n<.5?n*(1+t):n+t-n*t,c=2*n-s;o=r(c,s,e+1/3),i=r(c,s,e),a=r(c,s,e-1/3)}return{r:255*o,g:255*i,b:255*a}}function u(e,t,n){e=E(e,255),t=E(t,255),n=E(n,255);var r,o,i=X(e,t,n),a=V(e,t,n),s=i,c=i-a;if(o=0===i?0:c/i,i==a)r=0;else{switch(i){case e:r=(t-n)/c+(t>1)+720)%360;--t;)r.h=(r.h+o)%360,a.push(i(r));return a}function A(e,t){t=t||6;for(var n=i(e).toHsv(),r=n.h,o=n.s,a=n.v,s=[],c=1/t;t--;)s.push(i({h:r,s:o,v:a})),a=(a+c)%1;return s}function S(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function E(e,t){R(e)&&(e="100%");var n=L(e);return e=V(t,X(0,parseFloat(e))),n&&(e=parseInt(e*t,10)/100),o.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function O(e){return V(1,X(0,e))}function j(e){return parseInt(e,16)}function R(e){return"string"==typeof e&&-1!=e.indexOf(".")&&1===parseFloat(e)}function L(e){return"string"==typeof e&&-1!=e.indexOf("%")}function D(e){return 1==e.length?"0"+e:""+e}function H(e){return e<=1&&(e=100*e+"%"),e}function B(e){return o.round(255*parseFloat(e)).toString(16)}function P(e){return j(e)/255}function z(e){return!!K.CSS_UNIT.exec(e)}function $(e){e=e.replace(T,"").replace(I,"").toLowerCase();var t=!1;if(W[e])e=W[e],t=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};var n;return(n=K.rgb.exec(e))?{r:n[1],g:n[2],b:n[3]}:(n=K.rgba.exec(e))?{r:n[1],g:n[2],b:n[3],a:n[4]}:(n=K.hsl.exec(e))?{h:n[1],s:n[2],l:n[3]}:(n=K.hsla.exec(e))?{h:n[1],s:n[2],l:n[3],a:n[4]}:(n=K.hsv.exec(e))?{h:n[1],s:n[2],v:n[3]}:(n=K.hsva.exec(e))?{h:n[1],s:n[2],v:n[3],a:n[4]}:(n=K.hex8.exec(e))?{r:j(n[1]),g:j(n[2]),b:j(n[3]),a:P(n[4]),format:t?"name":"hex8"}:(n=K.hex6.exec(e))?{r:j(n[1]),g:j(n[2]),b:j(n[3]),format:t?"name":"hex"}:(n=K.hex4.exec(e))?{r:j(n[1]+""+n[1]),g:j(n[2]+""+n[2]),b:j(n[3]+""+n[3]),a:P(n[4]+""+n[4]),format:t?"name":"hex8"}:!!(n=K.hex3.exec(e))&&{r:j(n[1]+""+n[1]),g:j(n[2]+""+n[2]),b:j(n[3]+""+n[3]),format:t?"name":"hex"}}function N(e){var t,n;return e=e||{level:"AA",size:"small"},t=(e.level||"AA").toUpperCase(),n=(e.size||"small").toLowerCase(),"AA"!==t&&"AAA"!==t&&(t="AA"),"small"!==n&&"large"!==n&&(n="small"),{level:t,size:n}}var T=/^\s+/,I=/\s+$/,U=0,q=o.round,V=o.min,X=o.max,G=o.random;i.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,n,r,i,a,s=this.toRgb();return e=s.r/255,t=s.g/255,n=s.b/255,r=e<=.03928?e/12.92:o.pow((e+.055)/1.055,2.4),i=t<=.03928?t/12.92:o.pow((t+.055)/1.055,2.4),a=n<=.03928?n/12.92:o.pow((n+.055)/1.055,2.4),.2126*r+.7152*i+.0722*a},setAlpha:function(e){return this._a=S(e),this._roundA=q(100*this._a)/100,this},toHsv:function(){var e=u(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=u(this._r,this._g,this._b),t=q(360*e.h),n=q(100*e.s),r=q(100*e.v);return 1==this._a?"hsv("+t+", "+n+"%, "+r+"%)":"hsva("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHsl:function(){var e=c(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=c(this._r,this._g,this._b),t=q(360*e.h),n=q(100*e.s),r=q(100*e.l);return 1==this._a?"hsl("+t+", "+n+"%, "+r+"%)":"hsla("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHex:function(e){return h(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return f(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:q(this._r),g:q(this._g),b:q(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+q(this._r)+", "+q(this._g)+", "+q(this._b)+")":"rgba("+q(this._r)+", "+q(this._g)+", "+q(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:q(100*E(this._r,255))+"%",g:q(100*E(this._g,255))+"%",b:q(100*E(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+q(100*E(this._r,255))+"%, "+q(100*E(this._g,255))+"%, "+q(100*E(this._b,255))+"%)":"rgba("+q(100*E(this._r,255))+"%, "+q(100*E(this._g,255))+"%, "+q(100*E(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(Y[h(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+p(this._r,this._g,this._b,this._a),n=t,r=this._gradientType?"GradientType = 1, ":"";if(e){var o=i(e);n="#"+p(o._r,o._g,o._b,o._a)}return"progid:DXImageTransform.Microsoft.gradient("+r+"startColorstr="+t+",endColorstr="+n+")"},toString:function(e){var t=!!e;e=e||this._format;var n=!1,r=this._a<1&&this._a>=0;return t||!r||"hex"!==e&&"hex6"!==e&&"hex3"!==e&&"hex4"!==e&&"hex8"!==e&&"name"!==e?("rgb"===e&&(n=this.toRgbString()),"prgb"===e&&(n=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(n=this.toHexString()),"hex3"===e&&(n=this.toHexString(!0)),"hex4"===e&&(n=this.toHex8String(!0)),"hex8"===e&&(n=this.toHex8String()),"name"===e&&(n=this.toName()),"hsl"===e&&(n=this.toHslString()),"hsv"===e&&(n=this.toHsvString()),n||this.toHexString()):"name"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return i(this.toString())},_applyModification:function(e,t){var n=e.apply(null,[this].concat([].slice.call(t)));return this._r=n._r,this._g=n._g,this._b=n._b,this.setAlpha(n._a),this},lighten:function(){return this._applyModification(x,arguments)},brighten:function(){return this._applyModification(m,arguments)},darken:function(){return this._applyModification(_,arguments)},desaturate:function(){return this._applyModification(v,arguments)},saturate:function(){return this._applyModification(g,arguments)},greyscale:function(){return this._applyModification(b,arguments)},spin:function(){return this._applyModification(w,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(M,arguments)},complement:function(){return this._applyCombination(C,arguments)},monochromatic:function(){return this._applyCombination(A,arguments)},splitcomplement:function(){return this._applyCombination(F,arguments)},triad:function(){return this._applyCombination(y,arguments)},tetrad:function(){return this._applyCombination(k,arguments)}},i.fromRatio=function(e,t){if("object"==typeof e){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]="a"===r?e[r]:H(e[r]));e=n}return i(e,t)},i.equals=function(e,t){return!(!e||!t)&&i(e).toRgbString()==i(t).toRgbString()},i.random=function(){return i.fromRatio({r:G(),g:G(),b:G()})},i.mix=function(e,t,n){n=0===n?0:n||50;var r=i(e).toRgb(),o=i(t).toRgb(),a=n/100;return i({r:(o.r-r.r)*a+r.r,g:(o.g-r.g)*a+r.g,b:(o.b-r.b)*a+r.b,a:(o.a-r.a)*a+r.a})},i.readability=function(e,t){var n=i(e),r=i(t);return(o.max(n.getLuminance(),r.getLuminance())+.05)/(o.min(n.getLuminance(),r.getLuminance())+.05)},i.isReadable=function(e,t,n){var r,o,a=i.readability(e,t);switch(o=!1,r=N(n),r.level+r.size){case"AAsmall":case"AAAlarge":o=a>=4.5;break;case"AAlarge":o=a>=3;break;case"AAAsmall":o=a>=7}return o},i.mostReadable=function(e,t,n){var r,o,a,s,c=null,l=0;n=n||{},o=n.includeFallbackColors,a=n.level,s=n.size;for(var u=0;ul&&(l=r,c=i(t[u]));return i.isReadable(e,c,{level:a,size:s})||!o?c:(n.includeFallbackColors=!1,i.mostReadable(e,["#fff","#000"],n))};var W=i.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},Y=i.hexNames=function(e){var t={};for(var n in e)e.hasOwnProperty(n)&&(t[e[n]]=n);return t}(W),K=function(){var e="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",t="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?",n="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?";return{CSS_UNIT:new RegExp(e),rgb:new RegExp("rgb"+t),rgba:new RegExp("rgba"+n),hsl:new RegExp("hsl"+t),hsla:new RegExp("hsla"+n),hsv:new RegExp("hsv"+t),hsva:new RegExp("hsva"+n),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();void 0!==e&&e.exports?e.exports=i:void 0!==(r=function(){return i}.call(t,n,t,e))&&(e.exports=r)}(Math)},function(e,t,n){var r=n(17);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("213df510",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-editable-input {\n position: relative;\n}\n.vc-input__input {\n padding: 0;\n border: 0;\n outline: none;\n}\n.vc-input__label {\n text-transform: capitalize;\n}\n",""])},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"editableInput",props:{label:String,desc:String,value:[String,Number],max:Number,min:Number,arrowOffset:{type:Number,default:1}},computed:{val:{get:function(){return this.value},set:function(e){if(!(void 0!==this.max&&+e>this.max))return e;this.$refs.input.value=this.max}}},methods:{update:function(e){this.handleChange(e.target.value)},handleChange:function(e){var t={};t[this.label]=e,void 0===t.hex&&void 0===t["#"]?this.$emit("change",t):e.length>5&&this.$emit("change",t)},handleBlur:function(e){console.log(e)},handleKeyDown:function(e){var t=this.val,n=Number(t);if(n){var r=this.arrowOffset||1;38===e.keyCode&&(t=n+r,this.handleChange(t),e.preventDefault()),40===e.keyCode&&(t=n-r,this.handleChange(t),e.preventDefault())}},handleDrag:function(e){console.log(e)},handleMouseDown:function(e){console.log(e)}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-editable-input"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.val,expression:"val"}],ref:"input",staticClass:"vc-input__input",domProps:{value:e.val},on:{keydown:e.handleKeyDown,input:[function(t){t.target.composing||(e.val=t.target.value)},e.update]}}),e._v(" "),n("span",{staticClass:"vc-input__label"},[e._v(e._s(e.label))]),e._v(" "),n("span",{staticClass:"vc-input__desc"},[e._v(e._s(e.desc))])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-compact"},[n("ul",{staticClass:"vc-compact-colors"},e._l(e.palette,function(t){return n("li",{key:t,staticClass:"vc-compact-color-item",class:{"vc-compact-color-item--white":"#FFFFFF"===t},style:{background:t},on:{click:function(n){e.handlerClick(t)}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t===e.pick,expression:"c === pick"}],staticClass:"vc-compact-dot"})])}))])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(22)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(24),i=n.n(o),a=n(25),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Material.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Material.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(23);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("73af3dba",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,'\n.vc-material {\n width: 98px;\n height: 98px;\n padding: 16px;\n font-family: "Roboto";\n position: relative;\n border-radius: 2px;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n background-color: #fff;\n}\n.vc-material .vc-input__input {\n width: 100%;\n margin-top: 12px;\n font-size: 15px;\n color: #333;\n height: 30px;\n}\n.vc-material .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 11px;\n color: #999;\n text-transform: capitalize;\n}\n.vc-material-hex {\n border-bottom-width: 2px;\n border-bottom-style: solid;\n}\n.vc-material-split {\n display: flex;\n margin-right: -10px;\n padding-top: 11px;\n}\n.vc-material-third {\n flex: 1;\n padding-right: 10px;\n}\n',""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(4),i=r(o),a=n(3),s=r(a);t.default={name:"Material",mixins:[s.default],components:{"ed-in":i.default},methods:{onChange:function(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-material"},[n("ed-in",{staticClass:"vc-material-hex",style:{borderColor:e.colors.hex},attrs:{label:"hex"},on:{change:e.onChange},model:{value:e.colors.hex,callback:function(t){e.colors.hex=t},expression:"colors.hex"}}),e._v(" "),n("div",{staticClass:"vc-material-split"},[n("div",{staticClass:"vc-material-third"},[n("ed-in",{attrs:{label:"r"},on:{change:e.onChange},model:{value:e.colors.rgba.r,callback:function(t){e.colors.rgba.r=t},expression:"colors.rgba.r"}})],1),e._v(" "),n("div",{staticClass:"vc-material-third"},[n("ed-in",{attrs:{label:"g"},on:{change:e.onChange},model:{value:e.colors.rgba.g,callback:function(t){e.colors.rgba.g=t},expression:"colors.rgba.g"}})],1),e._v(" "),n("div",{staticClass:"vc-material-third"},[n("ed-in",{attrs:{label:"b"},on:{change:e.onChange},model:{value:e.colors.rgba.b,callback:function(t){e.colors.rgba.b=t},expression:"colors.rgba.b"}})],1)])],1)},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(27)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(29),i=n.n(o),a=n(34),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Slider.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Slider.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(28);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("66d0b52e",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-slider {\n position: relative;\n width: 410px;\n}\n.vc-slider-hue-warp {\n height: 12px;\n position: relative;\n}\n.vc-slider-hue-warp .vc-hue-picker {\n width: 14px;\n height: 14px;\n border-radius: 6px;\n transform: translate(-7px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-slider-swatches {\n display: flex;\n margin-top: 20px;\n}\n.vc-slider-swatch {\n margin-right: 1px;\n flex: 1;\n width: 20%;\n}\n.vc-slider-swatch:first-child {\n margin-right: 1px;\n}\n.vc-slider-swatch:first-child .vc-slider-swatch-picker {\n border-radius: 2px 0px 0px 2px;\n}\n.vc-slider-swatch:last-child {\n margin-right: 0;\n}\n.vc-slider-swatch:last-child .vc-slider-swatch-picker {\n border-radius: 0px 2px 2px 0px;\n}\n.vc-slider-swatch-picker {\n cursor: pointer;\n height: 12px;\n}\n.vc-slider-swatch-picker--active {\n transform: scaleY(1.8);\n border-radius: 3.6px/2px;\n}\n",""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(5),s=r(a);t.default={name:"Slider",mixins:[i.default],props:{direction:String},components:{hue:s.default},computed:{activeOffset:function(){return Math.round(100*this.colors.hsl.s)/100==.5?Math.round(100*this.colors.hsl.l)/100:0}},data:function(){return{swatches:[".80",".65",".50",".35",".20"]}},methods:{hueChange:function(e){this.colorChange(e)},handleSwClick:function(e,t){this.colorChange({h:this.colors.hsl.h,s:.5,l:t,source:"hsl"})}}}},function(e,t,n){var r=n(31);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("aa885cb8",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-hue {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border-radius: 2px;\n}\n.vc-hue--horizontal {\n background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue--vertical {\n background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue-container {\n cursor: pointer;\n margin: 0 2px;\n position: relative;\n height: 100%;\n}\n.vc-hue-pointer {\n z-index: 2;\n position: absolute;\n}\n.vc-hue-picker {\n cursor: pointer;\n margin-top: 1px;\n width: 4px;\n border-radius: 1px;\n height: 8px;\n box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n background: #fff;\n transform: translateX(-2px) ;\n}\n",""])},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"Hue",props:{value:Object,direction:{type:String,default:"horizontal"}},data:function(){return{oldHue:0,pullDirection:""}},computed:{colors:function(){var e=this.value.hsl.h;return 0!==e&&e-this.oldHue>0&&(this.pullDirection="right"),0!==e&&e-this.oldHue<0&&(this.pullDirection="left"),this.oldHue=e,this.value},directionClass:function(){return{"vc-hue--horizontal":"horizontal"===this.direction,"vc-hue--vertical":"vertical"===this.direction}},pointerTop:function(){return"vertical"===this.direction?0===this.colors.hsl.h&&"right"===this.pullDirection?0:-100*this.colors.hsl.h/360+100+"%":0},pointerLeft:function(){return"vertical"===this.direction?0:0===this.colors.hsl.h&&"right"===this.pullDirection?"100%":100*this.colors.hsl.h/360+"%"}},methods:{handleChange:function(e,t){!t&&e.preventDefault();var n,r,o=this.$refs.container,i=o.clientWidth,a=o.clientHeight,s=o.getBoundingClientRect().left+window.pageXOffset,c=o.getBoundingClientRect().top+window.pageYOffset,l=e.pageX||(e.touches?e.touches[0].pageX:0),u=e.pageY||(e.touches?e.touches[0].pageY:0),d=l-s,h=u-c;"vertical"===this.direction?(h<0?n=360:h>a?n=0:(r=-100*h/a+100,n=360*r/100),this.colors.hsl.h!==n&&this.$emit("change",{h:n,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"})):(d<0?n=0:d>i?n=360:(r=100*d/i,n=360*r/100),this.colors.hsl.h!==n&&this.$emit("change",{h:n,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"}))},handleMouseDown:function(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(e){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:["vc-hue",e.directionClass]},[n("div",{ref:"container",staticClass:"vc-hue-container",on:{mousedown:e.handleMouseDown,touchmove:e.handleChange,touchstart:e.handleChange}},[n("div",{staticClass:"vc-hue-pointer",style:{top:e.pointerTop,left:e.pointerLeft}},[n("div",{staticClass:"vc-hue-picker"})])])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-slider"},[n("div",{staticClass:"vc-slider-hue-warp"},[n("hue",{on:{change:e.hueChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-slider-swatches"},e._l(e.swatches,function(t,r){return n("div",{staticClass:"vc-slider-swatch",attrs:{"data-index":r},on:{click:function(n){e.handleSwClick(r,t)}}},[n("div",{staticClass:"vc-slider-swatch-picker",class:{"vc-slider-swatch-picker--active":t==e.activeOffset},style:{background:"hsl("+e.colors.hsl.h+", 50%, "+100*t+"%)"}})])}))])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(36)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(38),i=n.n(o),a=n(40),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Swatches.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Swatches.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(37);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("5b122313",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-swatches {\n width: 320px;\n height: 240px;\n overflow-y: scroll;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n}\n.vc-swatches-box {\n padding: 16px 0 6px 16px;\n overflow: hidden;\n}\n.vc-swatches-color-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n}\n.vc-swatches-color-it {\n box-sizing: border-box;\n width: 40px;\n height: 24px;\n cursor: pointer;\n background: #880e4f;\n margin-bottom: 1px;\n overflow: hidden;\n -ms-border-radius: 2px 2px 0 0;\n -moz-border-radius: 2px 2px 0 0;\n -o-border-radius: 2px 2px 0 0;\n -webkit-border-radius: 2px 2px 0 0;\n border-radius: 2px 2px 0 0;\n}\n.vc-swatches-color--white {\n border: 1px solid #DDD;\n}\n.vc-swatches-pick {\n fill: rgb(255, 255, 255);\n margin-left: 8px;\n display: block;\n}\n.vc-swatches-color--white .vc-swatches-pick {\n fill: rgb(51, 51, 51);\n}\n",""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(39),i=r(o),a=n(3),s=r(a),c=["red","pink","purple","deepPurple","indigo","blue","lightBlue","cyan","teal","green","lightGreen","lime","yellow","amber","orange","deepOrange","brown","blueGrey"],l=["900","700","500","300","100"],u=function(){var e=[];return c.forEach(function(t){var n=[];l.forEach(function(e){n.push(i.default[t][e].toUpperCase())}),e.push(n)}),e}();t.default={name:"Swatches",mixins:[s.default],props:{palette:{type:Array,default:function(){return u}}},computed:{pick:function(){return this.colors.hex}},methods:{equal:function(e){return e.toLowerCase()===this.colors.hex.toLowerCase()},handlerClick:function(e){this.colorChange({hex:e,source:"hex"})}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"red",function(){return r}),n.d(t,"pink",function(){return o}),n.d(t,"purple",function(){return i}),n.d(t,"deepPurple",function(){return a}),n.d(t,"indigo",function(){return s}),n.d(t,"blue",function(){return c}),n.d(t,"lightBlue",function(){return l}),n.d(t,"cyan",function(){return u}),n.d(t,"teal",function(){return d}),n.d(t,"green",function(){return h}),n.d(t,"lightGreen",function(){return f}),n.d(t,"lime",function(){return p}),n.d(t,"yellow",function(){return v}),n.d(t,"amber",function(){return g}),n.d(t,"orange",function(){return b}),n.d(t,"deepOrange",function(){return x}),n.d(t,"brown",function(){return m}),n.d(t,"grey",function(){return _}),n.d(t,"blueGrey",function(){return w}),n.d(t,"darkText",function(){return C}),n.d(t,"lightText",function(){return y}),n.d(t,"darkIcons",function(){return k}),n.d(t,"lightIcons",function(){return F}),n.d(t,"white",function(){return M}),n.d(t,"black",function(){return A});var r={50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},o={50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},i={50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},a={50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},s={50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},c={50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},l={50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},u={50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},d={50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},h={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},f={50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},p={50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},v={50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},g={50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},b={50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},x={50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},m={50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},_={50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},w={50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},C={primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},y={primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},k={active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},F={active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},M="#ffffff",A="#000000";t.default={red:r,pink:o,purple:i,deepPurple:a,indigo:s,blue:c,lightBlue:l,cyan:u,teal:d,green:h,lightGreen:f,lime:p,yellow:v,amber:g,orange:b,deepOrange:x,brown:m,grey:_,blueGrey:w,darkText:C,lightText:y,darkIcons:k,lightIcons:F,white:M,black:A}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-swatches",attrs:{"data-pick":e.pick}},[n("div",{staticClass:"vc-swatches-box"},e._l(e.palette,function(t,r){return n("div",{key:r,staticClass:"vc-swatches-color-group"},e._l(t,function(t){return n("div",{key:t,class:["vc-swatches-color-it",{"vc-swatches-color--white":"#FFFFFF"===t}],style:{background:t},attrs:{"data-color":t},on:{click:function(n){e.handlerClick(t)}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.equal(t),expression:"equal(c)"}],staticClass:"vc-swatches-pick"},[n("svg",{staticStyle:{width:"24px",height:"24px"},attrs:{viewBox:"0 0 24 24"}},[n("path",{attrs:{d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"}})])])])}))}))])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(42)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(44),i=n.n(o),a=n(59),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Photoshop.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Photoshop.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(43);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("54de37c0",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,'\n.vc-photoshop {\n background: #DCDCDC;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);\n box-sizing: initial;\n width: 513px;\n font-family: Roboto;\n}\n.vc-ps-head {\n background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);\n border-bottom: 1px solid #B1B1B1;\n box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);\n height: 23px;\n line-height: 24px;\n border-radius: 4px 4px 0 0;\n font-size: 13px;\n color: #4D4D4D;\n text-align: center;\n}\n.vc-ps-body {\n padding: 15px;\n display: flex;\n}\n.vc-ps-saturation-wrap {\n width: 256px;\n height: 256px;\n position: relative;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n overflow: hidden;\n}\n.vc-ps-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-ps-hue-wrap {\n position: relative;\n height: 256px;\n width: 19px;\n margin-left: 10px;\n border: 2px solid #B3B3B3;\n border-bottom: 2px solid #F0F0F0;\n}\n.vc-ps-hue-pointer {\n position: relative;\n}\n.vc-ps-hue-pointer--left,\n.vc-ps-hue-pointer--right {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 5px 0 5px 8px;\n border-color: transparent transparent transparent #555;\n}\n.vc-ps-hue-pointer--left:after,\n.vc-ps-hue-pointer--right:after {\n content: "";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent transparent transparent #fff;\n position: absolute;\n top: 1px;\n left: 1px;\n transform: translate(-8px, -5px);\n}\n.vc-ps-hue-pointer--left {\n transform: translate(-13px, -4px);\n}\n.vc-ps-hue-pointer--right {\n transform: translate(20px, -4px) rotate(180deg);\n}\n.vc-ps-controls {\n width: 180px;\n margin-left: 10px;\n display: flex;\n}\n.vc-ps-actions {\n margin-left: 20px;\n flex: 1;\n}\n.vc-ps-ac-btn {\n cursor: pointer;\n background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);\n border: 1px solid #878787;\n border-radius: 2px;\n height: 20px;\n box-shadow: 0 1px 0 0 #EAEAEA;\n font-size: 14px;\n color: #000;\n line-height: 20px;\n text-align: center;\n margin-bottom: 10px;\n}\n.vc-ps-previews {\n width: 60px;\n}\n.vc-ps-previews__swatches {\n border: 1px solid #B3B3B3;\n border-bottom: 1px solid #F0F0F0;\n margin-bottom: 2px;\n margin-top: 1px;\n}\n.vc-ps-previews__pr-color {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n}\n.vc-ps-previews__label {\n font-size: 14px;\n color: #000;\n text-align: center;\n}\n.vc-ps-fields {\n padding-top: 5px;\n padding-bottom: 9px;\n width: 80px;\n position: relative;\n}\n.vc-ps-fields .vc-input__input {\n margin-left: 40%;\n width: 40%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 5px;\n font-size: 13px;\n padding-left: 3px;\n margin-right: 10px;\n}\n.vc-ps-fields .vc-input__label, .vc-ps-fields .vc-input__desc {\n top: 0;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n position: absolute;\n}\n.vc-ps-fields .vc-input__label {\n left: 0;\n width: 34px;\n}\n.vc-ps-fields .vc-input__desc {\n right: 0;\n width: 0;\n}\n.vc-ps-fields__divider {\n height: 5px;\n}\n.vc-ps-fields__hex .vc-input__input {\n margin-left: 20%;\n width: 80%;\n height: 18px;\n border: 1px solid #888888;\n box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n margin-bottom: 6px;\n font-size: 13px;\n padding-left: 3px;\n}\n.vc-ps-fields__hex .vc-input__label {\n position: absolute;\n top: 0;\n left: 0;\n width: 14px;\n text-transform: uppercase;\n font-size: 13px;\n height: 18px;\n line-height: 22px;\n}\n',""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),c=n(6),l=r(c),u=n(5),d=r(u),h=n(7),f=r(h);t.default={name:"Photoshop",mixins:[i.default],props:{head:{type:String,default:"Color Picker"}},components:{saturation:l.default,hue:d.default,alpha:f.default,"ed-in":s.default},data:function(){return{currentColor:"#FFF"}},computed:{hsv:function(){var e=this.colors.hsv;return{h:e.h.toFixed(),s:(100*e.s).toFixed(),v:(100*e.v).toFixed()}},hex:function(){var e=this.colors.hex;return e&&e.replace("#","")}},created:function(){this.currentColor=this.colors.hex},methods:{childChange:function(e){this.colorChange(e)},inputChange:function(e){e&&(e["#"]?this.isValidHex(e["#"])&&this.colorChange({hex:e["#"],source:"hex"}):e.r||e.g||e.b||e.a?this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}):(e.h||e.s||e.v)&&this.colorChange({h:e.h||this.colors.hsv.h,s:e.s/100||this.colors.hsv.s,v:e.v/100||this.colors.hsv.v,source:"hsv"}))},clickCurrentColor:function(){this.colorChange({hex:this.currentColor,source:"hex"})},handleAccept:function(){this.$emit("ok")},handleCancel:function(){this.$emit("cancel")}}}},function(e,t,n){var r=n(46);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("e4784a76",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-saturation,\n.vc-saturation--white,\n.vc-saturation--black {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.vc-saturation--white {\n background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n}\n.vc-saturation--black {\n background: linear-gradient(to top, #000, rgba(0,0,0,0));\n}\n.vc-saturation-pointer {\n cursor: pointer;\n position: absolute;\n}\n.vc-saturation-circle {\n cursor: head;\n width: 4px;\n height: 4px;\n box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);\n border-radius: 50%;\n transform: translate(-2px, -2px);\n}\n",""])},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(48),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default={name:"Saturation",props:{value:Object},computed:{colors:function(){return this.value},bgColor:function(){return"hsl("+this.colors.hsv.h+", 100%, 50%)"},pointerTop:function(){return-100*this.colors.hsv.v+1+100+"%"},pointerLeft:function(){return 100*this.colors.hsv.s+"%"}},methods:{throttle:(0,o.default)(function(e,t){e(t)},20,{leading:!0,trailing:!1}),handleChange:function(e,t){!t&&e.preventDefault();var n=this.$refs.container,r=n.clientWidth,o=n.clientHeight,i=n.getBoundingClientRect().left+window.pageXOffset,a=n.getBoundingClientRect().top+window.pageYOffset,s=e.pageX||(e.touches?e.touches[0].pageX:0),c=e.pageY||(e.touches?e.touches[0].pageY:0),l=s-i,u=c-a;l<0?l=0:l>r?l=r:u<0?u=0:u>o&&(u=o);var d=l/r,h=-u/o+1;h=h>0?h:0,h=h>1?1:h,this.throttle(this.onChange,{h:this.colors.hsv.h,s:d,v:h,a:this.colors.hsv.a,source:"hsva"})},onChange:function(e){this.$emit("change",e)},handleMouseDown:function(e){window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(e){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,t,n){(function(t){function n(e,t,n){function r(t){var n=v,r=g;return v=g=void 0,k=t,x=e.apply(r,n)}function i(e){return k=e,m=setTimeout(u,t),F?r(e):x}function a(e){var n=e-_,r=e-k,o=t-n;return M?C(o,b-r):o}function l(e){var n=e-_,r=e-k;return void 0===_||n>=t||n<0||M&&r>=b}function u(){var e=y();if(l(e))return d(e);m=setTimeout(u,a(e))}function d(e){return m=void 0,A&&v?r(e):(v=g=void 0,x)}function h(){void 0!==m&&clearTimeout(m),k=0,v=_=g=m=void 0}function f(){return void 0===m?x:d(y())}function p(){var e=y(),n=l(e);if(v=arguments,g=this,_=e,n){if(void 0===m)return i(_);if(M)return m=setTimeout(u,t),r(_)}return void 0===m&&(m=setTimeout(u,t)),x}var v,g,b,x,m,_,k=0,F=!1,M=!1,A=!0;if("function"!=typeof e)throw new TypeError(c);return t=s(t)||0,o(n)&&(F=!!n.leading,M="maxWait"in n,b=M?w(s(n.maxWait)||0,t):b,A="trailing"in n?!!n.trailing:A),p.cancel=h,p.flush=f,p}function r(e,t,r){var i=!0,a=!0;if("function"!=typeof e)throw new TypeError(c);return o(r)&&(i="leading"in r?!!r.leading:i,a="trailing"in r?!!r.trailing:a),n(e,t,{leading:i,maxWait:t,trailing:a})}function o(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function i(e){return!!e&&"object"==typeof e}function a(e){return"symbol"==typeof e||i(e)&&_.call(e)==u}function s(e){if("number"==typeof e)return e;if(a(e))return l;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(d,"");var n=f.test(e);return n||p.test(e)?v(e.slice(2),n?2:8):h.test(e)?l:+e}var c="Expected a function",l=NaN,u="[object Symbol]",d=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,f=/^0b[01]+$/i,p=/^0o[0-7]+$/i,v=parseInt,g="object"==typeof t&&t&&t.Object===Object&&t,b="object"==typeof self&&self&&self.Object===Object&&self,x=g||b||Function("return this")(),m=Object.prototype,_=m.toString,w=Math.max,C=Math.min,y=function(){return x.Date.now()};e.exports=r}).call(t,n(49))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"container",staticClass:"vc-saturation",style:{background:e.bgColor},on:{mousedown:e.handleMouseDown}},[n("div",{staticClass:"vc-saturation--white"}),e._v(" "),n("div",{staticClass:"vc-saturation--black"}),e._v(" "),n("div",{staticClass:"vc-saturation-pointer",style:{top:e.pointerTop,left:e.pointerLeft}},[n("div",{staticClass:"vc-saturation-circle"})])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){var r=n(52);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("4e0b210b",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-alpha {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n.vc-alpha-checkboard-wrap {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n overflow: hidden;\n}\n.vc-alpha-gradient {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n.vc-alpha-container {\n cursor: pointer;\n position: relative;\n z-index: 2;\n height: 100%;\n margin: 0 3px;\n}\n.vc-alpha-pointer {\n z-index: 2;\n position: absolute;\n}\n.vc-alpha-picker {\n cursor: pointer;\n width: 4px;\n border-radius: 1px;\n height: 8px;\n box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n background: #fff;\n margin-top: 1px;\n transform: translateX(-2px);\n}\n",""])},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(8),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default={name:"Alpha",props:{value:Object,onChange:Function},components:{checkboard:o.default},computed:{colors:function(){return this.value},gradientColor:function(){var e=this.colors.rgba,t=[e.r,e.g,e.b].join(",");return"linear-gradient(to right, rgba("+t+", 0) 0%, rgba("+t+", 1) 100%)"}},methods:{handleChange:function(e,t){!t&&e.preventDefault();var n,r=this.$refs.container,o=r.clientWidth,i=r.getBoundingClientRect().left+window.pageXOffset,a=e.pageX||(e.touches?e.touches[0].pageX:0),s=a-i;n=s<0?0:s>o?1:Math.round(100*s/o)/100,this.colors.a!==n&&this.$emit("change",{h:this.colors.hsl.h,s:this.colors.hsl.s,l:this.colors.hsl.l,a:n,source:"rgba"})},handleMouseDown:function(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp:function(){this.unbindEventListeners()},unbindEventListeners:function(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}}},function(e,t,n){var r=n(55);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("7a6164b0",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-checkerboard {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-size: contain;\n}\n",""])},function(e,t,n){"use strict";function r(e,t,n){if("undefined"==typeof document)return null;var r=document.createElement("canvas");r.width=r.height=2*n;var o=r.getContext("2d");return o?(o.fillStyle=e,o.fillRect(0,0,r.width,r.height),o.fillStyle=t,o.fillRect(0,0,n,n),o.translate(n,n),o.fillRect(0,0,n,n),r.toDataURL()):null}function o(e,t,n){var o=e+","+t+","+n;if(i[o])return i[o];var a=r(e,t,n);return i[o]=a,a}Object.defineProperty(t,"__esModule",{value:!0});var i={};t.default={name:"Checkboard",props:{size:{type:[Number,String],default:8},white:{type:String,default:"#fff"},grey:{type:String,default:"#e6e6e6"}},computed:{bgStyle:function(){return{"background-image":"url("+o(this.white,this.grey,this.size)+")"}}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"vc-checkerboard",style:e.bgStyle})},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-alpha"},[n("div",{staticClass:"vc-alpha-checkboard-wrap"},[n("checkboard")],1),e._v(" "),n("div",{staticClass:"vc-alpha-gradient",style:{background:e.gradientColor}}),e._v(" "),n("div",{ref:"container",staticClass:"vc-alpha-container",on:{mousedown:e.handleMouseDown,touchmove:e.handleChange,touchstart:e.handleChange}},[n("div",{staticClass:"vc-alpha-pointer",style:{left:100*e.colors.a+"%"}},[n("div",{staticClass:"vc-alpha-picker"})])])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-photoshop"},[n("div",{staticClass:"vc-ps-head"},[e._v(e._s(e.head))]),e._v(" "),n("div",{staticClass:"vc-ps-body"},[n("div",{staticClass:"vc-ps-saturation-wrap"},[n("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-ps-hue-wrap"},[n("hue",{attrs:{direction:"vertical"},on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}},[n("div",{staticClass:"vc-ps-hue-pointer"},[n("i",{staticClass:"vc-ps-hue-pointer--left"}),n("i",{staticClass:"vc-ps-hue-pointer--right"})])])],1),e._v(" "),n("div",{staticClass:"vc-ps-controls"},[n("div",{staticClass:"vc-ps-previews"},[n("div",{staticClass:"vc-ps-previews__label"},[e._v("new")]),e._v(" "),n("div",{staticClass:"vc-ps-previews__swatches"},[n("div",{staticClass:"vc-ps-previews__pr-color",style:{background:e.colors.hex}}),e._v(" "),n("div",{staticClass:"vc-ps-previews__pr-color",style:{background:e.currentColor},on:{click:e.clickCurrentColor}})]),e._v(" "),n("div",{staticClass:"vc-ps-previews__label"},[e._v("current")])]),e._v(" "),n("div",{staticClass:"vc-ps-actions"},[n("div",{staticClass:"vc-ps-ac-btn",on:{click:e.handleAccept}},[e._v("OK")]),e._v(" "),n("div",{staticClass:"vc-ps-ac-btn",on:{click:e.handleCancel}},[e._v("Cancel")]),e._v(" "),n("div",{staticClass:"vc-ps-fields"},[n("ed-in",{attrs:{label:"h",desc:"°",value:e.hsv.h},on:{change:e.inputChange}}),e._v(" "),n("ed-in",{attrs:{label:"s",desc:"%",value:e.hsv.s,max:100},on:{change:e.inputChange}}),e._v(" "),n("ed-in",{attrs:{label:"v",desc:"%",value:e.hsv.v,max:100},on:{change:e.inputChange}}),e._v(" "),n("div",{staticClass:"vc-ps-fields__divider"}),e._v(" "),n("ed-in",{attrs:{label:"r",value:e.colors.rgba.r},on:{change:e.inputChange}}),e._v(" "),n("ed-in",{attrs:{label:"g",value:e.colors.rgba.g},on:{change:e.inputChange}}),e._v(" "),n("ed-in",{attrs:{label:"b",value:e.colors.rgba.b},on:{change:e.inputChange}}),e._v(" "),n("div",{staticClass:"vc-ps-fields__divider"}),e._v(" "),n("ed-in",{staticClass:"vc-ps-fields__hex",attrs:{label:"#",value:e.hex},on:{change:e.inputChange}})],1)])])])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(61)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(63),i=n.n(o),a=n(64),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Sketch.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Sketch.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(62);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("7172a0fb",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-sketch {\n position: relative;\n width: 200px;\n padding: 10px 10px 0;\n box-sizing: initial;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n}\n.vc-sketch-saturation-wrap {\n width: 100%;\n padding-bottom: 75%;\n position: relative;\n overflow: hidden;\n}\n.vc-sketch-controls {\n display: flex;\n}\n.vc-sketch-sliders {\n padding: 4px 0;\n flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n position: relative;\n height: 10px;\n}\n.vc-sketch-alpha-wrap {\n position: relative;\n height: 10px;\n margin-top: 4px;\n overflow: hidden;\n}\n.vc-sketch-color-wrap {\n width: 24px;\n height: 24px;\n position: relative;\n margin-top: 4px;\n margin-left: 4px;\n border-radius: 3px;\n}\n.vc-sketch-active-color {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 2px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);\n z-index: 2;\n}\n.vc-sketch-color-wrap .vc-checkerboard {\n background-size: auto;\n}\n.vc-sketch-field {\n display: flex;\n padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n width: 80%;\n padding: 4px 10% 3px;\n border: none;\n box-shadow: inset 0 0 0 1px #ccc;\n font-size: 11px;\n}\n.vc-sketch-field .vc-input__label {\n display: block;\n text-align: center;\n font-size: 11px;\n color: #222;\n padding-top: 3px;\n padding-bottom: 4px;\n text-transform: capitalize;\n}\n.vc-sketch-field--single {\n flex: 1;\n padding-left: 6px;\n}\n.vc-sketch-field--double {\n flex: 2;\n}\n.vc-sketch-presets {\n margin-right: -10px;\n margin-left: -10px;\n padding-left: 10px;\n padding-top: 10px;\n border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n border-radius: 3px;\n overflow: hidden;\n position: relative;\n display: inline-block;\n margin: 0 10px 10px 0;\n vertical-align: top;\n cursor: pointer;\n width: 16px;\n height: 16px;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);\n}\n",""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),c=n(6),l=r(c),u=n(5),d=r(u),h=n(7),f=r(h),p=n(8),v=r(p),g=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"];t.default={name:"Sketch",mixins:[i.default],components:{saturation:l.default,hue:d.default,alpha:f.default,"ed-in":s.default,checkboard:v.default},props:{presetColors:{type:Array,default:function(){return g}}},computed:{hex:function(){return this.colors.hex.replace("#","")},activeColor:function(){var e=this.colors.rgba;return"rgba("+[e.r,e.g,e.b,e.a].join(",")+")"}},methods:{handlePreset:function(e){this.colorChange({hex:e,source:"hex"})},childChange:function(e){this.colorChange(e)},inputChange:function(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b||e.a)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-sketch"},[n("div",{staticClass:"vc-sketch-saturation-wrap"},[n("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-controls"},[n("div",{staticClass:"vc-sketch-sliders"},[n("div",{staticClass:"vc-sketch-hue-wrap"},[n("hue",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-alpha-wrap"},[n("alpha",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1)]),e._v(" "),n("div",{staticClass:"vc-sketch-color-wrap"},[n("div",{staticClass:"vc-sketch-active-color",style:{background:e.activeColor}}),e._v(" "),n("checkboard")],1)]),e._v(" "),n("div",{staticClass:"vc-sketch-field"},[n("div",{staticClass:"vc-sketch-field--double"},[n("ed-in",{attrs:{label:"hex",value:e.hex},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-field--single"},[n("ed-in",{attrs:{label:"r",value:e.colors.rgba.r},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-field--single"},[n("ed-in",{attrs:{label:"g",value:e.colors.rgba.g},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-field--single"},[n("ed-in",{attrs:{label:"b",value:e.colors.rgba.b},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-sketch-field--single"},[n("ed-in",{attrs:{label:"a",value:e.colors.a,"arrow-offset":.01,max:1},on:{change:e.inputChange}})],1)]),e._v(" "),n("div",{staticClass:"vc-sketch-presets"},e._l(e.presetColors,function(t){return n("div",{key:t,staticClass:"vc-sketch-presets-color",style:{background:t},on:{click:function(n){e.handlePreset(t)}}})}))])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";function r(e){s||n(66)}Object.defineProperty(t,"__esModule",{value:!0});var o=n(68),i=n.n(o),a=n(69),s=!1,c=n(2),l=r,u=c(i.a,a.a,l,null,null);u.options.__file="src/components/Chrome.vue",u.esModule&&Object.keys(u.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] Chrome.vue: functional components are not supported with templates, they should use render functions."),t.default=u.exports},function(e,t,n){var r=n(67);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("c3407806",r,!1)},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,"\n.vc-chrome {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);\n box-sizing: initial;\n width: 225px;\n font-family: Menlo;\n background-color: #fff;\n}\n.vc-chrome-controls {\n display: flex;\n}\n.vc-chrome-color-wrap {\n position: relative;\n width: 36px;\n}\n.vc-chrome-active-color {\n position: relative;\n width: 30px;\n height: 30px;\n border-radius: 15px;\n overflow: hidden;\n z-index: 1;\n}\n.vc-chrome-color-wrap .vc-checkerboard {\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background-size: auto;\n}\n.vc-chrome-sliders {\n flex: 1;\n}\n.vc-chrome-fields-wrap {\n display: flex;\n padding-top: 16px;\n}\n.vc-chrome-fields {\n display: flex;\n margin-left: -6px;\n flex: 1;\n}\n.vc-chrome-field {\n padding-left: 6px;\n width: 100%;\n}\n.vc-chrome-toggle-btn {\n width: 32px;\n text-align: right;\n position: relative;\n}\n.vc-chrome-toggle-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n z-index: 2;\n}\n.vc-chrome-toggle-icon-highlight {\n position: absolute;\n width: 24px;\n height: 28px;\n background: #eee;\n border-radius: 4px;\n top: 10px;\n left: 12px;\n}\n.vc-chrome-hue-wrap {\n position: relative;\n height: 10px;\n margin-bottom: 8px;\n}\n.vc-chrome-alpha-wrap {\n position: relative;\n height: 10px;\n}\n.vc-chrome-hue-wrap .vc-hue {\n border-radius: 2px;\n}\n.vc-chrome-alpha-wrap .vc-alpha-gradient {\n border-radius: 2px;\n}\n.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {\n width: 12px;\n height: 12px;\n border-radius: 6px;\n transform: translate(-6px, -2px);\n background-color: rgb(248, 248, 248);\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-chrome-body {\n padding: 16px 16px 12px;\n background-color: #fff;\n}\n.vc-chrome-saturation-wrap {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n}\n.vc-chrome-saturation-wrap .vc-saturation-circle {\n width: 12px;\n height: 12px;\n}\n.vc-chrome-fields .vc-input__input {\n font-size: 11px;\n color: #333;\n width: 100%;\n border-radius: 2px;\n border: none;\n box-shadow: inset 0 0 0 1px #dadada;\n height: 21px;\n text-align: center;\n}\n.vc-chrome-fields .vc-input__label {\n text-transform: uppercase;\n font-size: 11px;\n line-height: 11px;\n color: #969696;\n text-align: center;\n display: block;\n margin-top: 12px;\n}\n",""])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),c=n(6),l=r(c),u=n(5),d=r(u),h=n(7),f=r(h),p=n(8),v=r(p);t.default={name:"Chrome",mixins:[i.default],props:{},components:{saturation:l.default,hue:d.default,alpha:f.default,"ed-in":s.default,checkboard:v.default},data:function(){return{fields:["hex","rgba","hsla"],fieldsIndex:0,highlight:!1}},computed:{hsl:function(){var e=this.colors.hsl,t=e.h,n=e.s,r=e.l;return{h:t.toFixed(),s:(100*n).toFixed()+"%",l:(100*r).toFixed()+"%"}},activeColor:function(){var e=this.colors.rgba;return"rgba("+[e.r,e.g,e.b,e.a].join(",")+")"}},methods:{handlePreset:function(e){this.colorChange({hex:e,source:"hex"})},childChange:function(e){this.colorChange(e)},inputChange:function(e){if(e)if(e.hex)this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"});else if(e.r||e.g||e.b||e.a)this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"});else if(e.h||e.s||e.l){var t=e.s?e.s.replace("%","")/100:this.colors.hsl.s,n=e.l?e.l.replace("%","")/100:this.colors.hsl.l;this.colorChange({h:e.h||this.colors.hsl.h,s:t,l:n,source:"hsl"})}},toggleViews:function(){if(this.fieldsIndex>=2)return void(this.fieldsIndex=0);this.fieldsIndex++},showHighlight:function(){this.highlight=!0},hideHighlight:function(){this.highlight=!1}}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vc-chrome"},[n("div",{staticClass:"vc-chrome-saturation-wrap"},[n("saturation",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-body"},[n("div",{staticClass:"vc-chrome-controls"},[n("div",{staticClass:"vc-chrome-color-wrap"},[n("div",{staticClass:"vc-chrome-active-color",style:{background:e.activeColor}}),e._v(" "),n("checkboard")],1),e._v(" "),n("div",{staticClass:"vc-chrome-sliders"},[n("div",{staticClass:"vc-chrome-hue-wrap"},[n("hue",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-alpha-wrap"},[n("alpha",{on:{change:e.childChange},model:{value:e.colors,callback:function(t){e.colors=t},expression:"colors"}})],1)])]),e._v(" "),n("div",{staticClass:"vc-chrome-fields-wrap"},[n("div",{directives:[{name:"show",rawName:"v-show",value:0===e.fieldsIndex,expression:"fieldsIndex === 0"}],staticClass:"vc-chrome-fields"},[n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"hex",value:e.colors.hex},on:{change:e.inputChange}})],1)]),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:1===e.fieldsIndex,expression:"fieldsIndex === 1"}],staticClass:"vc-chrome-fields"},[n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"r",value:e.colors.rgba.r},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"g",value:e.colors.rgba.g},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"b",value:e.colors.rgba.b},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"a",value:e.colors.a,"arrow-offset":.01,max:1},on:{change:e.inputChange}})],1)]),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:2===e.fieldsIndex,expression:"fieldsIndex === 2"}],staticClass:"vc-chrome-fields"},[n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"h",value:e.hsl.h},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"s",value:e.hsl.s},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"l",value:e.hsl.l},on:{change:e.inputChange}})],1),e._v(" "),n("div",{staticClass:"vc-chrome-field"},[n("ed-in",{attrs:{label:"a",value:e.colors.a,"arrow-offset":.01,max:1},on:{change:e.inputChange}})],1)]),e._v(" "),n("div",{staticClass:"vc-chrome-toggle-btn",on:{click:e.toggleViews}},[n("div",{staticClass:"vc-chrome-toggle-icon"},[n("svg",{staticStyle:{width:"24px",height:"24px"},attrs:{viewBox:"0 0 24 24"},on:{mouseover:e.showHighlight,mouseenter:e.showHighlight,mouseout:e.hideHighlight}},[n("path",{attrs:{fill:"#333",d:"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"}})])]),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.highlight,expression:"highlight"}],staticClass:"vc-chrome-toggle-icon-highlight"})])])])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i}])}); \ No newline at end of file diff --git a/package.json b/package.json index 6264bde..a3dc543 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-color", - "version": "2.3.2", + "version": "2.4.0", "description": "Color of Vue Components", "keywords": [ "color", diff --git a/src/index.js b/src/index.js index d7744bb..68d8abd 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ import Saturation from './components/common/Saturation.vue' import ColorMixin from './mixin/color.js' const VueColor = { - version: '2.3.2', + version: '2.4.0', Compact, Material, Slider,