jiku-ui/lib/color-picker.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function r(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=e,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(o,n,function(e){return t[e]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=69)}({0:function(t,e,r){"use strict";function o(t,e,r,o,n,i,a,s){var l,h="function"==typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=r,h._compiled=!0),o&&(h.functional=!0),i&&(h._scopeId="data-v-"+i),a?(l=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=l):n&&(l=s?function(){n.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:n),l)if(h.functional){h._injectStyles=l;var u=h.render;h.render=function(t,e){return l.call(e),u(t,e)}}else{var c=h.beforeCreate;h.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:h}}r.d(e,"a",(function(){return o}))},11:function(t,e){t.exports=require("jiku-ui/lib/input")},12:function(t,e){t.exports=require("jiku-ui/lib/utils/clickoutside")},19:function(t,e){t.exports=require("jiku-ui/lib/button")},4:function(t,e){t.exports=require("jiku-ui/lib/mixins/emitter")},5:function(t,e){t.exports=require("jiku-ui/lib/utils/vue-popper")},6:function(t,e){t.exports=require("jiku-ui/lib/mixins/locale")},69:function(t,e,r){"use strict";r.r(e);var o=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:t.hide,expression:"hide"}],class:["hn-color-picker",t.colorDisabled?"is-disabled":"",t.colorSize?"hn-color-picker--"+t.colorSize:""]},[t.colorDisabled?r("div",{staticClass:"hn-color-picker__mask"}):t._e(),r("div",{staticClass:"hn-color-picker__trigger",on:{click:t.handleTrigger}},[r("span",{staticClass:"hn-color-picker__color",class:{"is-alpha":t.showAlpha}},[r("span",{staticClass:"hn-color-picker__color-inner",style:{backgroundColor:t.displayedColor}}),t.value||t.showPanelColor?t._e():r("span",{staticClass:"hn-color-picker__empty hn-icon-close"})]),r("span",{directives:[{name:"show",rawName:"v-show",value:t.value||t.showPanelColor,expression:"value || showPanelColor"}],staticClass:"hn-color-picker__icon hn-icon-arrow-down"})]),r("picker-dropdown",{ref:"dropdown",class:["hn-color-picker__panel",t.popperClass||""],attrs:{color:t.color,"show-alpha":t.showAlpha,predefine:t.predefine},on:{pick:t.confirmValue,clear:t.clearValue},model:{value:t.showPicker,callback:function(e){t.showPicker=e},expression:"showPicker"}})],1)};o._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,r){return[t,e*r/((t=(2-e)*r)<1?t:2-t)||0,t/2]},a=function(t,e){var r;"string"==typeof(r=t)&&-1!==r.indexOf(".")&&1===parseFloat(r)&&(t="100%");var o=function(t){return"string"==typeof t&&-1!==t.indexOf("%")}(t);return t=Math.min(e,Math.max(0,parseFloat(t))),o&&(t=parseInt(t*e,10)/100),Math.abs(t-e)<1e-6?1:t%e/parseFloat(e)},s={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},l={A:10,B:11,C:12,D:13,E:14,F:15},h=function(t){return 2===t.length?16*(l[t[0].toUpperCase()]||+t[0])+(l[t[1].toUpperCase()]||+t[1]):l[t[1].toUpperCase()]||+t[1]},u=function(t,e,r){t=a(t,255),e=a(e,255),r=a(r,255);var o,n=Math.max(t,e,r),i=Math.min(t,e,r),s=void 0,l=n,h=n-i;if(o=0===n?0:h/n,n===i)s=0;else{switch(n){case t:s=(e-r)/h+(e<r?6:0);break;case e:s=(r-t)/h+2;break;case r:s=(t-e)/h+4}s/=6}return{h:360*s,s:100*o,v:100*l}},c=function(t,e,r){t=6*a(t,360),e=a(e,100),r=a(r,100);var o=Math.floor(t),n=t-o,i=r*(1-e),s=r*(1-n*e),l=r*(1-(1-n)*e),h=o%6,u=[r,s,i,i,l,r][h],c=[l,r,r,s,i,i][h],f=[i,i,l,r,r,s][h];return{r:Math.round(255*u),g:Math.round(255*c),b:Math.round(255*f)}},f=function(){function t(e){for(var r 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(r)&&(this[r]=e[r]);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 r in t)t.hasOwnProperty(r)&&this.set(r,t[r])},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 r=function(t,r,o){e._hue=Math.max(0,Math.min(360,t)),e._saturation=Math.max(0,Math.min(100,r)),e._value=Math.max(0,Math.min(100,o)),e.doOnChange()};if(-1!==t.indexOf("hsl")){var o=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===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),o.length>=3){var n=function(t,e,r){r/=100;var o=e/=100,n=Math.max(r,.01);return e*=(r*=2)<=1?r:2-r,o*=n<=1?n:2-n,{h:t,s:100*(0===r?2*o/(n+o):2*e/(r+e)),v:100*((r+e)/2)}}(o[0],o[1],o[2]);r(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&&r(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 s=u(a[0],a[1],a[2]);r(s.h,s.s,s.v)}}else if(-1!==t.indexOf("#")){var l=t.replace("#","").trim();if(!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(l))return;var c=void 0,f=void 0,p=void 0;3===l.length?(c=h(l[0]+l[0]),f=h(l[1]+l[1]),p=h(l[2]+l[2])):6!==l.length&&8!==l.length||(c=h(l.substring(0,2)),f=h(l.substring(2,4)),p=h(l.substring(4,6))),8===l.length?this._alpha=Math.floor(h(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=u(c,f,p);r(d.h,d.s,d.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,r=this._value,o=this._alpha,n=this.format;if(this.enableAlpha)switch(n){case"hsl":var a=i(t,e/100,r/100);this.value="hsla("+t+", "+Math.round(100*a[1])+"%, "+Math.round(100*a[2])+"%, "+o/100+")";break;case"hsv":this.value="hsva("+t+", "+Math.round(e)+"%, "+Math.round(r)+"%, "+o/100+")";break;default:var l=c(t,e,r),h=l.r,u=l.g,f=l.b;this.value="rgba("+h+", "+u+", "+f+", "+o/100+")"}else switch(n){case"hsl":var p=i(t,e/100,r/100);this.value="hsl("+t+", "+Math.round(100*p[1])+"%, "+Math.round(100*p[2])+"%)";break;case"hsv":this.value="hsv("+t+", "+Math.round(e)+"%, "+Math.round(r)+"%)";break;case"rgb":var d=c(t,e,r),v=d.r,m=d.g,g=d.b;this.value="rgb("+v+", "+m+", "+g+")";break;default:this.value=function(t){var e=t.r,r=t.g,o=t.b,n=function(t){t=Math.min(Math.round(t),255);var e=Math.floor(t/16),r=t%16;return""+(s[e]||e)+(s[r]||r)};return isNaN(e)||isNaN(r)||isNaN(o)?"":"#"+n(e)+n(r)+n(o)}(c(t,e,r))}},t}(),p=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("transition",{attrs:{name:"hn-zoom-in-top"},on:{"after-leave":t.doDestroy}},[r("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopper,expression:"showPopper"}],staticClass:"hn-color-dropdown"},[r("div",{staticClass:"hn-color-dropdown__main-wrapper"},[r("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:t.color,vertical:""}}),r("sv-panel",{ref:"sl",attrs:{color:t.color}})],1),t.showAlpha?r("alpha-slider",{ref:"alpha",attrs:{color:t.color}}):t._e(),t.predefine?r("predefine",{attrs:{color:t.color,colors:t.predefine}}):t._e(),r("div",{staticClass:"hn-color-dropdown__btns"},[r("span",{staticClass:"hn-color-dropdown__value"},[r("hn-input",{attrs:{"validate-event":!1,size:"mini"},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),r("hn-button",{staticClass:"hn-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(e){return t.$emit("clear")}}},[t._v("\n        "+t._s(t.t("hn.colorpicker.clear"))+"\n      ")]),r("hn-button",{staticClass:"hn-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:t.confirmValue}},[t._v("\n        "+t._s(t.t("hn.colorpicker.confirm"))+"\n      ")])],1)],1)])};p._withStripped=!0;var d=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"hn-color-svpanel",style:{backgroundColor:this.background}},[e("div",{staticClass:"hn-color-svpanel__white"}),e("div",{staticClass:"hn-color-svpanel__black"}),e("div",{staticClass:"hn-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[e("div")])])};d._withStripped=!0;var v=r(7),m=r.n(v),g=!1,b=function(t,e){if(!m.a.prototype.$isServer){var r=function(t){e.drag&&e.drag(t)},o=function t(o){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",t),document.onselectstart=null,document.ondragstart=null,g=!1,e.end&&e.end(o)};t.addEventListener("mousedown",(function(t){g||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",r),document.addEventListener("mouseup",o),g=!0,e.start&&e.start(t))}))}},_={name:"hn-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"),r=this.$el,o=r.clientWidth,n=r.clientHeight;this.cursorLeft=t*o/100,this.cursorTop=(100-e)*n/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(t){var e=this.$el.getBoundingClientRect(),r=t.clientX-e.left,o=t.clientY-e.top;r=Math.max(0,r),r=Math.min(r,e.width),o=Math.max(0,o),o=Math.min(o,e.height),this.cursorLeft=r,this.cursorTop=o,this.color.set({saturation:r/e.width*100,value:100-o/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%)"}}},C=r(0),w=Object(C.a)(_,d,[],!1,null,null,null);w.options.__file="packages/color-picker/src/components/sv-panel.vue";var k=w.exports,y=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"hn-color-hue-slider",class:{"is-vertical":this.vertical}},[e("div",{ref:"bar",staticClass:"hn-color-hue-slider__bar",on:{click:this.handleClick}}),e("div",{ref:"thumb",staticClass:"hn-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])};y._withStripped=!0;var x={name:"hn-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(),r=this.$refs.thumb,o=void 0;if(this.vertical){var n=t.clientY-e.top;n=Math.min(n,e.height-r.offsetHeight/2),n=Math.max(r.offsetHeight/2,n),o=Math.round((n-r.offsetHeight/2)/(e.height-r.offsetHeight)*360)}else{var i=t.clientX-e.left;i=Math.min(i,e.width-r.offsetWidth/2),i=Math.max(r.offsetWidth/2,i),o=Math.round((i-r.offsetWidth/2)/(e.width-r.offsetWidth)*360)}this.color.set("hue",o)},getThumbLeft:function(){if(this.vertical)return 0;var t=this.$el,e=this.color.get("hue");if(!t)return 0;var r=this.$refs.thumb;return Math.round(e*(t.offsetWidth-r.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var t=this.$el,e=this.color.get("hue");if(!t)return 0;var r=this.$refs.thumb;return Math.round(e*(t.offsetHeight-r.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var t=this,e=this.$refs,r=e.bar,o=e.thumb,n={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};b(r,n),b(o,n),this.update()}},M=Object(C.a)(x,y,[],!1,null,null,null);M.options.__file="packages/color-picker/src/components/hue-slider.vue";var $=M.exports,S=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"hn-color-alpha-slider",class:{"is-vertical":this.vertical}},[e("div",{ref:"bar",staticClass:"hn-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),e("div",{ref:"thumb",staticClass:"hn-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])};S._withStripped=!0;var P={name:"hn-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(),r=this.$refs.thumb;if(this.vertical){var o=t.clientY-e.top;o=Math.max(r.offsetHeight/2,o),o=Math.min(o,e.height-r.offsetHeight/2),this.color.set("alpha",Math.round((o-r.offsetHeight/2)/(e.height-r.offsetHeight)*100))}else{var n=t.clientX-e.left;n=Math.max(r.offsetWidth/2,n),n=Math.min(n,e.width-r.offsetWidth/2),this.color.set("alpha",Math.round((n-r.offsetWidth/2)/(e.width-r.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var t=this.$el,e=this.color._alpha;if(!t)return 0;var r=this.$refs.thumb;return Math.round(e*(t.offsetWidth-r.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var t=this.$el,e=this.color._alpha;if(!t)return 0;var r=this.$refs.thumb;return Math.round(e*(t.offsetHeight-r.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var t=this.color.toRgb(),e=t.r,r=t.g,o=t.b;return"linear-gradient(to right, rgba("+e+", "+r+", "+o+", 0) 0%, rgba("+e+", "+r+", "+o+", 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,r=e.bar,o=e.thumb,n={drag:function(e){t.handleDrag(e)},end:function(e){t.handleDrag(e)}};b(r,n),b(o,n),this.update()}},T=Object(C.a)(P,S,[],!1,null,null,null);T.options.__file="packages/color-picker/src/components/alpha-slider.vue";var O=T.exports,E=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"hn-color-predefine"},[r("div",{staticClass:"hn-color-predefine__colors"},t._l(t.rgbaColors,(function(e,o){return r("div",{key:t.colors[o],staticClass:"hn-color-predefine__color-selector",class:{selected:e.selected,"is-alpha":e._alpha<100},on:{click:function(e){return t.handleSelect(o)}}},[r("div",{style:{"background-color":e.value}})])})),0)])};E._withStripped=!0;var F={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 r=new f;return r.enableAlpha=!0,r.format="rgba",r.fromString(t),r.selected=r.value===e.value,r}))}},watch:{"$parent.currentColor":function(t){var e=new f;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)}}},A=Object(C.a)(F,E,[],!1,null,null,null);A.options.__file="packages/color-picker/src/components/predefine.vue";var H=A.exports,I=r(5),D=r.n(I),L=r(6),j=r.n(L),R=r(11),q=r.n(R),z=r(19),B=r.n(z),W={name:"hn-color-picker-dropdown",mixins:[D.a,j.a],components:{SvPanel:k,HueSlider:$,AlphaSlider:O,HnInput:q.a,HnButton:B.a,Predefine:H},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var t=this.$parent;return t.value||t.showPanelColor?t.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},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,r=t.sl,o=t.hue,n=t.alpha;r&&r.update(),o&&o.update(),n&&n.update()}))},currentColor:{immediate:!0,handler:function(t){this.customInput=t}}}},N=Object(C.a)(W,p,[],!1,null,null,null);N.options.__file="packages/color-picker/src/components/picker-dropdown.vue";var V=N.exports,U=r(12),X=r.n(U),Y=r(4),G={name:"HnColorPicker",mixins:[r.n(Y).a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{hnForm:{default:""},hnFormItem:{default:""}},directives:{Clickoutside:X.a},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_hnFormItemSize:function(){return(this.hnFormItem||{}).hnFormItemSize},colorSize:function(){return this.size||this._hnFormItemSize||(this.$HEINER||{}).size},colorDisabled:function(){return this.disabled||(this.hnForm||{}).disabled}},watch:{value:function(t){t?t&&t!==this.color.value&&this.color.fromString(t):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(t){if(this.showPicker){var e=new f({enableAlpha:this.showAlpha,format:this.colorFormat});e.fromString(this.value),t!==this.displayedRgb(e,this.showAlpha)&&this.$emit("active-change",t)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var t=this.color.value;this.$emit("input",t),this.$emit("change",t),this.dispatch("HnFormItem","hn.form.change",t),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("HnFormItem","hn.form.change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var t=this;this.$nextTick((function(e){t.value?t.color.fromString(t.value):t.showPanelColor=!1}))},displayedRgb:function(t,e){if(!(t instanceof f))throw Error("color should be instance of Color Class");var r=t.toRgb(),o=r.r,n=r.g,i=r.b;return e?"rgba("+o+", "+n+", "+i+", "+t.get("alpha")/100+")":"rgb("+o+", "+n+", "+i+")"}},mounted:function(){var t=this.value;t&&this.color.fromString(t),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new f({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:V}},J=Object(C.a)(G,o,[],!1,null,null,null);J.options.__file="packages/color-picker/src/main.vue";var K=J.exports;K.install=function(t){t.component(K.name,K)};e.default=K},7:function(t,e){t.exports=require("vue")}}).default;