element-gui/lib/color-picker.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function o(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=t,o.c=e,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="/dist/",o(o.s=62)}({0:function(t,e,o){"use strict";function r(t,e,o,r,n,i,a,l){var s,h="function"==typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=o,h._compiled=!0),r&&(h.functional=!0),i&&(h._scopeId="data-v-"+i),a?(s=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},h._ssrRegister=s):n&&(s=l?function(){n.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:n),s)if(h.functional){h._injectStyles=s;var u=h.render;h.render=function(t,e){return s.call(e),u(t,e)}}else{var c=h.beforeCreate;h.beforeCreate=c?[].concat(c,s):[s]}return{exports:t,options:h}}o.d(e,"a",(function(){return r}))},10:function(t,e){t.exports=require("element-gui/lib/input")},11:function(t,e){t.exports=require("element-gui/lib/utils/clickoutside")},21:function(t,e){t.exports=require("element-gui/lib/button")},4:function(t,e){t.exports=require("element-gui/lib/mixins/emitter")},5:function(t,e){t.exports=require("element-gui/lib/utils/vue-popper")},62:function(t,e,o){"use strict";o.r(e);var r=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],ref:"triggerRef",class:["el-color-picker",t.colorDisabled?"is-disabled":"",t.readonly?"is-readonly":"",t.colorSize?"el-color-picker--"+t.colorSize:""],attrs:{tabindex:t.colorDisabled?-1:t.tabindex},on:{focus:t.handleFocus,blur:t.handleBlur,keydown:t.handleKeyDown}},[t.colorDisabled||t.readonly?o("div",{staticClass:"el-color-picker__mask"}):t._e(),o("div",{staticClass:"el-color-picker__trigger",on:{click:t.handleTrigger}},[o("span",{staticClass:"el-color-picker__color",class:{"is-alpha":t.showAlpha}},[o("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():o("span",{staticClass:"el-color-picker__empty el-icon-close"})]),o("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down",style:{color:t.displayedColor}})]),t.colorDisabled||t.readonly?t._e():o("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel el-popper",t.popperClass||""],attrs:{"visible-arrow":t._visibleArrow,"arrow-offset":10,clearable:t.clearable,color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clearValue:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)};r._withStripped=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};var i=function(t,e,o){return[t,e*o/((t=(2-e)*o)<1?t:2-t)||0,t/2]},a=function(t,e){var o;"string"==typeof(o=t)&&-1!==o.indexOf(".")&&1===parseFloat(o)&&(t="100%");var r=function(t){return"string"==typeof t&&-1!==t.indexOf("%")}(t);return t=Math.min(e,Math.max(0,parseFloat(t))),r&&(t=parseInt(t*e,10)/100),Math.abs(t-e)<1e-6?1:t%e/parseFloat(e)},l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},s={A:10,B:11,C:12,D:13,E:14,F:15},h=function(t){return 2===t.length?16*(s[t[0].toUpperCase()]||+t[0])+(s[t[1].toUpperCase()]||+t[1]):s[t[1].toUpperCase()]||+t[1]},u=function(t,e,o){t=a(t,255),e=a(e,255),o=a(o,255);var r,n=Math.max(t,e,o),i=Math.min(t,e,o),l=void 0,s=n,h=n-i;if(r=0===n?0:h/n,n===i)l=0;else{switch(n){case t:l=(e-o)/h+(e<o?6:0);break;case e:l=(o-t)/h+2;break;case o:l=(t-e)/h+4}l/=6}return{h:360*l,s:100*r,v:100*s}},c=function(t,e,o){t=6*a(t,360),e=a(e,100),o=a(o,100);var r=Math.floor(t),n=t-r,i=o*(1-e),l=o*(1-n*e),s=o*(1-(1-n)*e),h=r%6,u=[o,l,i,i,s,o][h],c=[s,o,o,l,i,i][h],d=[i,i,s,o,o,l][h];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*d)}},d=function(){function t(e){for(var o in function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",e=e||{})e.hasOwnProperty(o)&&(this[o]=e[o]);this.doOnChange()}return t.prototype.set=function(t,e){if(1!==arguments.length||"object"!==(void 0===t?"undefined":n(t)))this["_"+t]=e,this.doOnChange();else for(var o in t)t.hasOwnProperty(o)&&this.set(o,t[o])},t.prototype.get=function(t){return this["_"+t]},t.prototype.toRgb=function(){return c(this._hue,this._saturation,this._value)},t.prototype.fromString=function(t){var e=this;if(!t)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var o=function(t,o,r){e._hue=Math.max(0,Math.min(360,t)),e._saturation=Math.max(0,Math.min(100,o)),e._value=Math.max(0,Math.min(100,r)),e.doOnChange()};if(-1!==t.indexOf("hsl")){var r=t.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter((function(t){return""!==t})).map((function(t,e){return e>2?parseFloat(t):parseInt(t,10)}));if(4===r.length?this._alpha=Math.floor(100*parseFloat(r[3])):3===r.length&&(this._alpha=100),r.length>=3){var n=function(t,e,o){o/=100;var r=e/=100,n=Math.max(o,.01);return e*=(o*=2)<=1?o:2-o,r*=n<=1?n:2-n,{h:t,s:100*(0===o?2*r/(n+r):2*e/(o+e)),v:100*((o+e)/2)}}(r[0],r[1],r[2]);o(n.h,n.s,n.v)}}else if(-1!==t.indexOf("hsv")){var i=t.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter((function(t){return""!==t})).map((function(t,e){return e>2?parseFloat(t):parseInt(t,10)}));4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),i.length>=3&&o(i[0],i[1],i[2])}else if(-1!==t.indexOf("rgb")){var a=t.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter((function(t){return""!==t})).map((function(t,e){return e>2?parseFloat(t):parseInt(t,10)}));if(4===a.length?this._alpha=Math.floor(100*parseFloat(a[3])):3===a.length&&(this._alpha=100),a.length>=3){var l=u(a[0],a[1],a[2]);o(l.h,l.s,l.v)}}else if(-1!==t.indexOf("#")){var s=t.replace("#","").trim();if(!/^((?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8})$/.test(s))return;var c=void 0,d=void 0,f=void 0;3===s.length?(c=h(s[0]+s[0]),d=h(s[1]+s[1]),f=h(s[2]+s[2])):6!==s.length&&8!==s.length||(c=h(s.substring(0,2)),d=h(s.substring(2,4)),f=h(s.substring(4,6))),8===s.length?this._alpha=Math.floor(h(s.substring(6))/255*100):3!==s.length&&6!==s.length||(this._alpha=100);var p=u(c,d,f);o(p.h,p.s,p.v)}},t.prototype.compare=function(t){return Math.abs(t._hue-this._hue)<2&&Math.abs(t._saturation-this._saturation)<1&&Math.abs(t._value-this._value)<1&&Math.abs(t._alpha-this._alpha)<1},t.prototype.doOnChange=function(){var t=this._hue,e=this._saturation,o=this._value,r=this._alpha,n=this.format;if(this.enableAlpha)switch(n){case"hsl":var a=i(t,e/100,o/100);this.value="hsla("+t+", "+Math.round(100*a[1])+"%, "+Math.round(100*a[2])+"%, "+r/100+")";break;case"hsv":this.value="hsva("+t+", "+Math.round(e)+"%, "+Math.round(o)+"%, "+r/100+")";break;default:var s=c(t,e,o),h=s.r,u=s.g,d=s.b;this.value="rgba("+h+", "+u+", "+d+", "+r/100+")"}else switch(n){case"hsl":var f=i(t,e/100,o/100);this.value="hsl("+t+", "+Math.round(100*f[1])+"%, "+Math.round(100*f[2])+"%)";break;case"hsv":this.value="hsv("+t+", "+Math.round(e)+"%, "+Math.round(o)+"%)";break;case"rgb":var p=c(t,e,o),m=p.r,v=p.g,g=p.b;this.value="rgb("+m+", "+v+", "+g+")";break;default:this.value=function(t){var e=t.r,o=t.g,r=t.b,n=function(t){t=Math.min(Math.round(t),255);var e=Math.floor(t/16),o=t%16;return""+(l[e]||e)+(l[o]||o)};return isNaN(e)||isNaN(o)||isNaN(r)?"":"#"+n(e)+n(o)+n(r)}(c(t,e,o))}},t}(),f=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":t.doDestroy}},[o("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown",attrs:{tabindex:-1},on:{keydown:t.handleKeyDown}},[o("div",{staticClass:"el-color-dropdown__main-wrapper"},[o("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),o("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?o("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?o("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),o("div",{staticClass:"el-color-dropdown__btns"},[o("span",{staticClass:"el-color-dropdown__value"},[o("el-input",{ref:"inputRef",attrs:{"validate-event":!1,size:t.realSize},on:{blur:t.handleConfirm},nativeOn:{keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.handleConfirm(e)}},model:{value:t.customInput,callback:function(e){t.customInput=e},expression:"customInput"}})],1),t.clearable?o("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:t.realSize,type:"text"},on:{keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.$emit("clearValue")},click:function(e){return t.$emit("clearValue")}}},[t._v("\n        "+t._s(t.t("el.colorpicker.clear"))+"\n      ")]):t._e(),o("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:t.realSize},on:{click:t.confirmValue,keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.confirmValue(e)}}},[t._v("\n        "+t._s(t.t("el.colorpicker.confirm"))+"\n      ")])],1)],1)])};f._withStripped=!0;var p=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[e("div",{staticClass:"el-color-svpanel__white"}),e("div",{staticClass:"el-color-svpanel__black"}),e("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[e("div")])])};p._withStripped=!0;var m=o(8),v=o.n(m),g=!1,b=function(t,e){if(!v.a.prototype.$isServer){var o=function(t){e.drag&&e.drag(t)},r=function t(r){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",t),document.onselectstart=null,document.ondragstart=null,g=!1,e.end&&e.end(r)};t.addEventListener("mousedown",(function(t){g||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",o),document.addEventListener("mouseup",r),g=!0,e.start&&e.start(t))}))}},_={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var t=this.color.get("saturation"),e=this.color.get("value"),o=this.$el,r=o.clientWidth,n=o.clientHeight;this.cursorLeft=t*r/100,this.cursorTop=(100-e)*n/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(t){var e=this.$el.getBoundingClientRect(),o=t.clientX-e.left,r=t.clientY-e.top;o=Math.max(0,o),o=Math.min(o,e.width),r=Math.max(0,r),r=Math.min(r,e.height),this.cursorLeft=o,this.cursorTop=r,this.color.set({saturation:o/e.width*100,value:100-r/e.height*100})}},mounted:function(){var t=this;b(this.$el,{drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}},y=o(0),w=Object(y.a)(_,p,[],!1,null,null,null).exports,C=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[e("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),e("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])};C._withStripped=!0;var k={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(t){var e=this.$refs.thumb;t.target!==e&&this.handleDrag(t)},handleDrag:function(t){var e=this.$el.getBoundingClientRect(),o=this.$refs.thumb,r=void 0;if(this.vertical){var n=t.clientY-e.top;n=Math.min(n,e.height-o.offsetHeight/2),n=Math.max(o.offsetHeight/2,n),r=Math.round((n-o.offsetHeight/2)/(e.height-o.offsetHeight)*360)}else{var i=t.clientX-e.left;i=Math.min(i,e.width-o.offsetWidth/2),i=Math.max(o.offsetWidth/2,i),r=Math.round((i-o.offsetWidth/2)/(e.width-o.offsetWidth)*360)}this.color.set("hue",r)},getThumbLeft:function(){if(this.vertical)return 0;var t=this.$el,e=this.color.get("hue");if(!t)return 0;var o=this.$refs.thumb;return Math.round(e*(t.offsetWidth-o.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var t=this.$el,e=this.color.get("hue");if(!t)return 0;var o=this.$refs.thumb;return Math.round(e*(t.offsetHeight-o.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,o=e.bar,r=e.thumb,n={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};b(o,n),b(r,n),this.update()}},$=Object(y.a)(k,C,[],!1,null,null,null).exports,x=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[e("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),e("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])};x._withStripped=!0;var M={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(t){var e=this.$refs.thumb;t.target!==e&&this.handleDrag(t)},handleDrag:function(t){var e=this.$el.getBoundingClientRect(),o=this.$refs.thumb;if(this.vertical){var r=t.clientY-e.top;r=Math.max(o.offsetHeight/2,r),r=Math.min(r,e.height-o.offsetHeight/2),this.color.set("alpha",Math.round((r-o.offsetHeight/2)/(e.height-o.offsetHeight)*100))}else{var n=t.clientX-e.left;n=Math.max(o.offsetWidth/2,n),n=Math.min(n,e.width-o.offsetWidth/2),this.color.set("alpha",Math.round((n-o.offsetWidth/2)/(e.width-o.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var t=this.$el,e=this.color._alpha;if(!t)return 0;var o=this.$refs.thumb;return Math.round(e*(t.offsetWidth-o.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var t=this.$el,e=this.color._alpha;if(!t)return 0;var o=this.$refs.thumb;return Math.round(e*(t.offsetHeight-o.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var t=this.color.toRgb(),e=t.r,o=t.g,r=t.b;return"linear-gradient(to right, rgba("+e+", "+o+", "+r+", 0) 0%, rgba("+e+", "+o+", "+r+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var t=this,e=this.$refs,o=e.bar,r=e.thumb,n={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};b(o,n),b(r,n),this.update()}},S=Object(y.a)(M,x,[],!1,null,null,null).exports,E=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{staticClass:"el-color-predefine"},[o("div",{staticClass:"el-color-predefine__colors"},t._l(t.rgbaColors,(function(e,r){return o("div",{key:t.colors[r],staticClass:"el-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){return t.handleSelect(r)}}},[o("div",{style:{"background-color":e.value}})])})),0)])};E._withStripped=!0;var T={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(t){this.color.fromString(this.colors[t])},parseColors:function(t,e){return t.map((function(t){var o=new d;return o.enableAlpha=!0,o.format="rgba",o.fromString(t),o.selected=o.value===e.value,o}))}},watch:{"$parent.currentColor":function(t){var e=new d;e.fromString(t),this.rgbaColors.forEach((function(t){t.selected=e.compare(t)}))},colors:function(t){this.rgbaColors=this.parseColors(t,this.color)},color:function(t){this.rgbaColors=this.parseColors(this.colors,t)}}},P=Object(y.a)(T,E,[],!1,null,null,null).exports,F=o(5),O=o.n(F),D=o(7),A=o.n(D),B=o(10),L=o.n(B),I=o(21),z=o.n(I),R={name:"el-color-picker-dropdown",mixins:[O.a,A.a],components:{SvPanel:w,HueSlider:$,AlphaSlider:S,ElInput:L.a,ElButton:z.a,Predefine:P},inject:["appendToBody","realSize","placement"],props:{color:{required:!0},showAlpha:Boolean,clearable:{type:Boolean,default:!0},predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var t=this.$parent;return t.value||t.showPanelColor?t.color.value:""},elementContent:function(){return this.$ELEMENT&&this.$ELEMENT.content&&document.getElementById(this.$ELEMENT.content)||document.body}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)},handleKeyDown:function(t){switch(t.keyCode){case 27:this.$parent.hide()}}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(t){var e=this;!0===t&&this.$nextTick((function(){var t=e.$refs,o=t.sl,r=t.hue,n=t.alpha;e.appendToBody&&((document.fullscreenElement||window.fullScreen)&&document.fullscreenElement?document.fullscreenElement.appendChild(e.$el):e.elementContent.appendChild(e.$el));o&&o.update(),r&&r.update(),n&&n.update()}))},currentColor:{immediate:!0,handler:function(t){this.customInput=t}},customInput:{immediate:!0,handler:function(t){this.$parent.color.value=t}}}},j=Object(y.a)(R,f,[],!1,null,null,null).exports,N=o(11),V=o.n(N),H=o(4),q={name:"ElColorPicker",mixins:[o.n(H).a],props:{value:String,showAlpha:Boolean,colorFormat:String,readonly:Boolean,disabled:Boolean,size:String,popperClass:String,placement:{type:String,default:"bottom"},predefine:Array,clearable:Boolean,appendToBody:{type:Boolean,default:!0},tabindex:{type:String,default:"0"},visibleArrow:{type:Boolean,default:!1}},provide:function(){return{appendToBody:this.appendToBody,placement:this.placement,realSize:this.colorSize}},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:V.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled},_visibleArrow:function(){return this.visibleArrow||(this.$ELEMENT||{}).visibleArrow}},watch:{showPicker:function(t){this.readonly||this.colorDisabled||this.$emit("visible-change",t)},value:function(t){t?t&&t!==this.color.value&&this.color.fromString(t):this.showPanelColor=!1},color:{deep:!0,handler:function(t){this.showPanelColor=!!t.value}},colorFormat:{deep:!0,handler:function(){this.color=this.createColor()}},displayedColor:function(t){if(this.showPicker){var e=new d({enableAlpha:this.showAlpha,format:this.colorFormat});e.fromString(this.value),t!==this.displayedRgb(e,this.showAlpha)&&this.$emit("active-change",t)}}},methods:{createColor:function(){return new d({enableAlpha:this.showAlpha,format:this.colorFormat})},handleTrigger:function(){this.colorDisabled||this.readonly||(this.showPicker=!this.showPicker)},handleFocus:function(){this.colorDisabled||this.readonly||(this.$emit("focus"),this.isFocus=!0)},handleBlur:function(){this.colorDisabled||this.readonly||(this.$emit("blur"),this.isFocus=!1)},handleKeyDown:function(t){switch(t.keyCode){case 13:this.show(),t.stopPropagation();break;case 27:this.hide(),t.stopPropagation()}},confirmValue:function(){if(!this.readonly&&!this.colorDisabled){var t=this.color.value;this.$emit("input",t),this.$emit("change",t),this.dispatch("ElFormItem","el.form.change",t),this.showPicker=!1}},clearValue:function(){this.$emit("input",null),this.$emit("change",null),this.$emit("clear",this.value),null!==this.value&&this.dispatch("ElFormItem","el.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},show:function(){this.showPicker=!0},focus:function(){this.$refs.triggerRef.focus(),this.isFocus=!0},blur:function(){this.$refs.triggerRef.blur(),this.isFocus=!1},resetColor:function(){var t=this;this.$nextTick((function(e){t.value?t.color.fromString(t.value):(t.color.value="",t.showPanelColor=!1)}))},displayedRgb:function(t,e){if(!(t instanceof d))throw Error("color should be instance of Color Class");var o=t.toRgb(),r=o.r,n=o.g,i=o.b;return e?"rgba("+r+", "+n+", "+i+", "+t.get("alpha")/100+")":"rgb("+r+", "+n+", "+i+")"}},mounted:function(){var t=this.value;t&&this.color.fromString(t),this.readonly||this.colorDisabled||(this.popperElm=this.$refs.dropdown.$el)},data:function(){return{color:this.createColor(),showPicker:!1,showPanelColor:!1,isFocus:!1}},components:{PickerDropdown:j}},W=Object(y.a)(q,r,[],!1,null,null,null).exports;W.install=function(t){t.component(W.name,W)};e.default=W},7:function(t,e){t.exports=require("element-gui/lib/mixins/locale")},8:function(t,e){t.exports=require("vue")}});