vue3-colorpicker/index.umd.js

A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.

(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("tinycolor2"),require("gradient-parser"),require("@popperjs/core"),require("vue-types"),require("@aesoper/normal-utils"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","tinycolor2","gradient-parser","@popperjs/core","vue-types","@aesoper/normal-utils","lodash-es"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.BeeComponents={},w.Vue,w.core,w.tinycolor,w.gradientParser,w.core$1,w.propTypes,w.normalUtils,w.lodashEs))})(this,function(w,e,m,V,te,he,f,O,F){"use strict";var Tt=Object.defineProperty;var xt=(w,e,m)=>e in w?Tt(w,e,{enumerable:!0,configurable:!0,writable:!0,value:m}):w[e]=m;var P=(w,e,m)=>(xt(w,typeof e!="symbol"?e+"":e,m),m);const eo="",v=t=>Math.round(t*100)/100;class N{constructor(o){P(this,"instance");P(this,"alphaValue",0);P(this,"redValue",0);P(this,"greenValue",0);P(this,"blueValue",0);P(this,"hueValue",0);P(this,"saturationValue",0);P(this,"brightnessValue",0);P(this,"hslSaturationValue",0);P(this,"lightnessValue",0);P(this,"initAlpha",()=>{const o=this.instance.getAlpha();this.alphaValue=Math.min(1,o)*100});P(this,"initLightness",()=>{const{s:o,l:n}=this.instance.toHsl();this.hslSaturationValue=v(o),this.lightnessValue=v(n)});P(this,"initRgb",()=>{const{r:o,g:n,b:a}=this.instance.toRgb();this.redValue=v(o),this.greenValue=v(n),this.blueValue=v(a)});P(this,"initHsb",()=>{const{h:o,s:n,v:a}=this.instance.toHsv();this.hueValue=Math.min(360,Math.ceil(o)),this.saturationValue=v(n),this.brightnessValue=v(a)});P(this,"toHexString",()=>this.instance.toHexString());P(this,"toRgbString",()=>this.instance.toRgbString());this.instance=V(o),this.initRgb(),this.initHsb(),this.initLightness(),this.initAlpha()}toString(o){return this.instance.toString(o)}get hex(){return this.instance.toHex()}set hex(o){this.instance=V(o),this.initHsb(),this.initRgb(),this.initAlpha(),this.initLightness()}set hue(o){this.saturation===0&&this.brightness===0&&(this.saturationValue=1,this.brightnessValue=1),this.instance=V({h:v(o),s:this.saturation,v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.hueValue=v(o)}get hue(){return this.hueValue}set saturation(o){this.instance=V({h:this.hue,s:v(o),v:this.brightness,a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.saturationValue=v(o)}get saturation(){return this.saturationValue}set brightness(o){this.instance=V({h:this.hue,s:this.saturation,v:v(o),a:this.alphaValue/100}),this.initRgb(),this.initLightness(),this.brightnessValue=v(o)}get brightness(){return this.brightnessValue}set lightness(o){this.instance=V({h:this.hue,s:this.hslSaturationValue,l:v(o),a:this.alphaValue/100}),this.initRgb(),this.initHsb(),this.lightnessValue=v(o)}get lightness(){return this.lightnessValue}set red(o){const n=this.instance.toRgb();this.instance=V({...n,r:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.redValue=v(o)}get red(){return this.redValue}set green(o){const n=this.instance.toRgb();this.instance=V({...n,g:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.greenValue=v(o)}get green(){return this.greenValue}set blue(o){const n=this.instance.toRgb();this.instance=V({...n,b:v(o),a:this.alphaValue/100}),this.initHsb(),this.initLightness(),this.blueValue=v(o)}get blue(){return this.blueValue}set alpha(o){this.instance.setAlpha(o/100),this.alphaValue=o}get alpha(){return this.alphaValue}get RGB(){return[this.red,this.green,this.blue,parseFloat((this.alpha/100).toFixed(2))]}get HSB(){return[this.hue,this.saturation,this.brightness,parseFloat((this.alpha/100).toFixed(2))]}get HSL(){return[this.hue,this.hslSaturationValue,this.lightness,parseFloat((this.alpha/100).toFixed(2))]}}function oe(t,o,n,a){return`rgba(${[t,o,n,a/100].join(",")})`}const q=(t,o,n)=>o<n?t<o?o:t>n?n:t:t<n?n:t>o?o:t,G="color-history",X=8,to="",z=(t,o)=>{const n=t.__vccOpts||t;for(const[a,c]of o)n[a]=c;return n},ge=e.defineComponent({name:"Alpha",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const s=e.reactive({red:c.red,green:c.green,blue:c.blue,alpha:c.alpha});e.watch(()=>t.color,g=>{g&&(c=g,F.merge(s,{red:g.red,green:g.green,blue:g.blue,alpha:g.alpha}))},{deep:!0});const r=e.computed(()=>{const g=oe(s.red,s.green,s.blue,0),h=oe(s.red,s.green,s.blue,100);return{background:`linear-gradient(to right, ${g} , ${h})`}}),l=()=>{if(n.value&&a.value){const g=s.alpha/100,h=n.value.getBoundingClientRect(),y=a.value.offsetWidth;return Math.round(g*(h.width-y)+y/2)}return 0},d=e.computed(()=>({left:l()+"px",top:0})),B=g=>{g.target!==n.value&&p(g)},p=g=>{if(g.stopPropagation(),n.value&&a.value){const h=n.value.getBoundingClientRect(),y=a.value.offsetWidth;let b=g.clientX-h.left;b=Math.max(y/2,b),b=Math.min(b,h.width-y/2);const u=Math.round((b-y/2)/(h.width-y)*100);c.alpha=u,s.alpha=u,o("change",u)}};return m.tryOnMounted(()=>{const g={drag:h=>{p(h)},end:h=>{p(h)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,g)}),{barElement:n,cursorElement:a,getCursorStyle:d,getBackgroundStyle:r,onClickSider:B}}}),ue=[(t=>(e.pushScopeId("data-v-18925ba6"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-alpha-slider__bar-handle"},null,-1))];function pe(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-alpha-slider","transparent",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-alpha-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-alpha-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},ue,6)],4)],2)}const Y=z(ge,[["render",pe],["__scopeId","data-v-18925ba6"]]),ao="",Ce=[["#fcc02e","#f67c01","#e64a19","#d81b43","#8e24aa","#512da7","#1f87e8","#008781","#05a045"],["#fed835","#fb8c00","#f5511e","#eb1d4e","#9c28b1","#5d35b0","#2097f3","#029688","#4cb050"],["#ffeb3c","#ffa727","#fe5722","#eb4165","#aa47bc","#673bb7","#42a5f6","#26a59a","#83c683"],["#fff176","#ffb74e","#ff8a66","#f1627e","#b968c7","#7986cc","#64b5f6","#80cbc4","#a5d6a7"],["#fff59c","#ffcc80","#ffab91","#fb879e","#cf93d9","#9ea8db","#90caf8","#b2dfdc","#c8e6ca"],["transparent","#ffffff","#dedede","#a9a9a9","#4b4b4b","#353535","#212121","#000000","advance"]],fe=e.defineComponent({name:"Palette",emits:["change"],setup(t,{emit:o}){return{palettes:Ce,computedBgStyle:c=>c==="transparent"?c:c==="advance"?{}:{background:V(c).toRgbString()},onColorChange:c=>{o("change",c)}}}}),me={class:"vc-compact"},be=["onClick"];function _e(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.palettes,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:"vc-compact__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r,(d,B)=>(e.openBlock(),e.createElementBlock("div",{key:B,class:"vc-compact__color-cube--wrap",onClick:p=>t.onColorChange(d)},[e.createElementVNode("div",{class:e.normalizeClass(["vc-compact__color_cube",{advance:d==="advance",transparent:d==="transparent"}]),style:e.normalizeStyle(t.computedBgStyle(d))},null,6)],8,be))),128))]))),128))])}const ne=z(fe,[["render",_e],["__scopeId","data-v-b969fd48"]]),ro="",ke=e.defineComponent({name:"Board",props:{color:f.instanceOf(N),round:f.bool.def(!1),hide:f.bool.def(!0)},emits:["change"],setup(t,{emit:o}){var _,C,$;const n=e.getCurrentInstance(),a={h:((_=t.color)==null?void 0:_.hue)||0,s:1,v:1},c=new N(a).toHexString(),s=e.reactive({hueColor:c,saturation:((C=t.color)==null?void 0:C.saturation)||0,brightness:(($=t.color)==null?void 0:$.brightness)||0}),r=e.ref(0),l=e.ref(0),d=e.ref(),B=e.computed(()=>({top:r.value+"px",left:l.value+"px"})),p=()=>{if(n){const S=n.vnode.el;l.value=s.saturation*(S==null?void 0:S.clientWidth),r.value=(1-s.brightness)*(S==null?void 0:S.clientHeight)}};let g=!1;const h=S=>{g=!0,u(S)},y=S=>{g&&u(S)},b=()=>{g=!1},u=S=>{if(n){const I=n.vnode.el,H=I==null?void 0:I.getBoundingClientRect();let R=S.clientX-H.left,L=S.clientY-H.top;R=q(R,0,H.width),L=q(L,0,H.height);const K=R/H.width,D=q(-(L/H.height)+1,0,1);l.value=R,r.value=L,s.saturation=K,s.brightness=D,o("change",K,D)}};return m.tryOnMounted(()=>{n&&n.vnode.el&&d.value&&e.nextTick(()=>{p()})}),m.whenever(()=>t.color,S=>{F.merge(s,{hueColor:new N({h:S.hue,s:1,v:1}).toHexString(),saturation:S.saturation,brightness:S.brightness}),p()},{deep:!0}),{state:s,cursorElement:d,getCursorStyle:B,onClickBoard:h,onDrag:y,onDragEnd:b}}}),j=t=>(e.pushScopeId("data-v-7f0cdcdf"),t=t(),e.popScopeId(),t),ye=j(()=>e.createElementVNode("div",{class:"vc-saturation__white"},null,-1)),Se=j(()=>e.createElementVNode("div",{class:"vc-saturation__black"},null,-1)),Be=[j(()=>e.createElementVNode("div",null,null,-1))];function $e(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{ref:"boardElement",class:e.normalizeClass(["vc-saturation",{"vc-saturation__chrome":t.round,"vc-saturation__hidden":t.hide}]),style:e.normalizeStyle({backgroundColor:t.state.hueColor}),onMousedown:o[0]||(o[0]=(...r)=>t.onClickBoard&&t.onClickBoard(...r)),onMousemove:o[1]||(o[1]=(...r)=>t.onDrag&&t.onDrag(...r)),onMouseup:o[2]||(o[2]=(...r)=>t.onDragEnd&&t.onDragEnd(...r))},[ye,Se,e.createElementVNode("div",{class:"vc-saturation__cursor",ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},Be,4)],38)}const U=z(ke,[["render",$e],["__scopeId","data-v-7f0cdcdf"]]),so="",Ve=e.defineComponent({name:"Hue",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const s=e.reactive({hue:c.hue||0});e.watch(()=>t.color,p=>{p&&(c=p,F.merge(s,{hue:c.hue}))},{deep:!0});const r=()=>{if(n.value&&a.value){const p=n.value.getBoundingClientRect(),g=a.value.offsetWidth;return s.hue===360?p.width-g/2:s.hue%360*(p.width-g)/360+g/2}return 0},l=e.computed(()=>({left:r()+"px",top:0})),d=p=>{p.target!==n.value&&B(p)},B=p=>{if(p.stopPropagation(),n.value&&a.value){const g=n.value.getBoundingClientRect(),h=a.value.offsetWidth;let y=p.clientX-g.left;y=Math.min(y,g.width-h/2),y=Math.max(h/2,y);const b=Math.round((y-h/2)/(g.width-h)*360);c.hue=b,s.hue=b,o("change",b)}};return m.tryOnMounted(()=>{const p={drag:g=>{B(g)},end:g=>{B(g)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,p)}),{barElement:n,cursorElement:a,getCursorStyle:l,onClickSider:d}}}),Ee=[(t=>(e.pushScopeId("data-v-e1a08576"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-hue-slider__bar-handle"},null,-1))];function Ne(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-hue-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-hue-slider__bar",onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-hue-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},Ee,6)],512)],2)}const Z=z(Ve,[["render",Ne],["__scopeId","data-v-e1a08576"]]),ho="",we=e.defineComponent({name:"Lightness",props:{color:f.instanceOf(N),size:f.oneOf(["small","default"]).def("default")},emits:["change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(null);let c=t.color||new N;const[s,r,l]=c.HSL,d=e.reactive({hue:s,saturation:r,lightness:l});e.watch(()=>t.color,b=>{if(b){c=b;const[u,_,C]=c.HSL;F.merge(d,{hue:u,saturation:_,lightness:C})}},{deep:!0});const B=e.computed(()=>{const b=V({h:d.hue,s:d.saturation,l:.8}).toPercentageRgbString(),u=V({h:d.hue,s:d.saturation,l:.6}).toPercentageRgbString(),_=V({h:d.hue,s:d.saturation,l:.4}).toPercentageRgbString(),C=V({h:d.hue,s:d.saturation,l:.2}).toPercentageRgbString();return{background:[`linear-gradient(to right, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-webkit-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-moz-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`,`-ms-linear-gradient(left, rgb(255, 255, 255), ${b}, ${u}, ${_}, ${C}, rgb(0, 0, 0))`]}}),p=()=>{if(n.value&&a.value){const b=d.lightness,u=n.value.getBoundingClientRect(),_=a.value.offsetWidth;return(1-b)*(u.width-_)+_/2}return 0},g=e.computed(()=>({left:p()+"px",top:0})),h=b=>{b.target!==n.value&&y(b)},y=b=>{if(b.stopPropagation(),n.value&&a.value){const u=n.value.getBoundingClientRect(),_=a.value.offsetWidth;let C=b.clientX-u.left;C=Math.max(_/2,C),C=Math.min(C,u.width-_/2);const $=1-(C-_/2)/(u.width-_);c.lightness=$,o("change",$)}};return m.tryOnMounted(()=>{const b={drag:u=>{y(u)},end:u=>{y(u)}};n.value&&a.value&&O.DOMUtils.triggerDragEvent(n.value,b)}),{barElement:n,cursorElement:a,getCursorStyle:g,getBackgroundStyle:B,onClickSider:h}}}),ve=[(t=>(e.pushScopeId("data-v-94a50a9e"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"vc-lightness-slider__bar-handle"},null,-1))];function He(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-lightness-slider",{"small-slider":t.size==="small"}])},[e.createElementVNode("div",{ref:"barElement",class:"vc-lightness-slider__bar",style:e.normalizeStyle(t.getBackgroundStyle),onClick:o[0]||(o[0]=(...r)=>t.onClickSider&&t.onClickSider(...r))},[e.createElementVNode("div",{class:e.normalizeClass(["vc-lightness-slider__bar-pointer",{"small-bar":t.size==="small"}]),ref:"cursorElement",style:e.normalizeStyle(t.getCursorStyle)},ve,6)],4)],2)}const ae=z(we,[["render",He],["__scopeId","data-v-94a50a9e"]]),po="",Re=e.defineComponent({name:"History",props:{colors:f.arrayOf(String).def(()=>[]),round:f.bool.def(!1)},emits:["change"],setup(t,{emit:o}){return{onColorSelect:a=>{o("change",a)}}}}),Ae={key:0,class:"vc-colorPicker__record"},Pe={class:"color-list"},Me=["onClick"];function ze(t,o,n,a,c,s){return t.colors&&t.colors.length>0?(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Pe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.colors,(r,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:e.normalizeClass(["color-item","transparent",{"color-item__round":t.round}]),onClick:d=>t.onColorSelect(r)},[e.createElementVNode("div",{class:"color-item__display",style:e.normalizeStyle({backgroundColor:r})},null,4)],10,Me))),128))])])):e.createCommentVNode("",!0)}const J=z(Re,[["render",ze],["__scopeId","data-v-0f657238"]]),Co="",Ie=e.defineComponent({name:"Display",props:{color:f.instanceOf(N),disableAlpha:f.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){var y,b,u,_;const{copy:n,copied:a,isSupported:c}=m.useClipboard(),s=e.ref("hex"),r=e.reactive({color:t.color,hex:(y=t.color)==null?void 0:y.hex,alpha:Math.round(((b=t.color)==null?void 0:b.alpha)||100),rgba:(u=t.color)==null?void 0:u.RGB,previewBgColor:(_=t.color)==null?void 0:_.toRgbString()}),l=e.computed(()=>({background:r.previewBgColor})),d=()=>{s.value=s.value==="rgba"?"hex":"rgba"},B=m.useDebounceFn(C=>{if(!C.target.value)return;let $=parseInt(C.target.value.replace("%",""));$>100&&(C.target.value="100",$=100),$<0&&(C.target.value="0",$=0),isNaN($)&&(C.target.value="100",$=100),!isNaN($)&&r.color&&(r.color.alpha=$),o("change",r.color)},300),p=m.useDebounceFn((C,$)=>{if(r.color){if(s.value==="hex"){const S=C.target.value.replace("#","");V(S).isValid()?[3,4].includes(S.length)&&(r.color.hex=S):r.color.hex="000000",o("change",r.color)}else if(s.value==="rgba"&&$===3&&C.target.value.toString()==="0."&&r.rgba){r.rgba[$]=C.target.value;const[S,I,H,R]=r.rgba;r.color.hex=V({r:S,g:I,b:H}).toHex(),r.color.alpha=Math.round(R*100),o("change",r.color)}}},100),g=m.useDebounceFn((C,$)=>{if(C.target.value){if(s.value==="hex"){const S=C.target.value.replace("#","");V(S).isValid()&&r.color&&[6,8].includes(S.length)&&(r.color.hex=S)}else if($!==void 0&&r.rgba&&r.color){if(C.target.value<0&&(C.target.value=0),$===3&&((C.target.value>1||isNaN(C.target.value))&&(C.target.value=1),C.target.value.toString()==="0."))return;$<3&&C.target.value>255&&(C.target.value=255),r.rgba[$]=C.target.value;const[S,I,H,R]=r.rgba;r.color.hex=V({r:S,g:I,b:H}).toHex(),r.color.alpha=Math.round(R*100)}o("change",r.color)}},300),h=()=>{if(c&&r.color){const C=s.value==="hex"?r.color.toString(r.color.alpha===100?"hex6":"hex8"):r.color.toRgbString();n(C||"")}};return m.whenever(()=>t.color,C=>{C&&(r.color=C,r.alpha=Math.round(r.color.alpha),r.hex=r.color.hex,r.rgba=r.color.RGB)},{deep:!0}),m.whenever(()=>r.color,()=>{r.color&&(r.previewBgColor=r.color.toRgbString())},{deep:!0}),{state:r,getBgColorStyle:l,inputType:s,copied:a,onInputTypeChange:d,onAlphaBlur:B,onInputChange:g,onBlurChange:p,onCopyColorStr:h}}}),De={class:"vc-display"},Le={class:"vc-current-color vc-transparent"},Ke={key:0,class:"copy-text"},Oe={key:0,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},We={class:"vc-color-input"},Fe={key:0,class:"vc-alpha-input"},qe=["value"],Ge={key:1,style:{display:"flex",flex:"1",gap:"4px",height:"100%"}},Xe=["value","onInput","onBlur"];function Ye(t,o,n,a,c,s){return e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("div",Le,[e.createElementVNode("div",{class:"color-cube",style:e.normalizeStyle(t.getBgColorStyle),onClick:o[0]||(o[0]=(...r)=>t.onCopyColorStr&&t.onCopyColorStr(...r))},[t.copied?(e.openBlock(),e.createElementBlock("span",Ke,"Copied!")):e.createCommentVNode("",!0)],4)]),t.inputType==="hex"?(e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("div",We,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[1]||(o[1]=r=>t.state.hex=r),maxlength:"8",onInput:o[2]||(o[2]=(...r)=>t.onInputChange&&t.onInputChange(...r)),onBlur:o[3]||(o[3]=(...r)=>t.onBlurChange&&t.onBlurChange(...r))},null,544),[[e.vModelText,t.state.hex]])]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("input",{class:"vc-alpha-input__inner",value:t.state.alpha,onInput:o[4]||(o[4]=(...r)=>t.onAlphaBlur&&t.onAlphaBlur(...r))},null,40,qe),e.createTextVNode("% ")]))])):t.state.rgba?(e.openBlock(),e.createElementBlock("div",Ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.state.rgba,(r,l)=>(e.openBlock(),e.createElementBlock("div",{class:"vc-color-input",key:l},[e.createElementVNode("input",{value:r,onInput:d=>t.onInputChange(d,l),onBlur:d=>t.onBlurChange(d,l)},null,40,Xe)]))),128))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"vc-input-toggle",onClick:o[5]||(o[5]=(...r)=>t.onInputTypeChange&&t.onInputTypeChange(...r))},e.toDisplayString(t.inputType),1)])}const Q=z(Ie,[["render",Ye],["__scopeId","data-v-7334ac20"]]),fo="",je=e.defineComponent({name:"FkColorPicker",components:{Display:Q,Alpha:Y,Palette:ne,Board:U,Hue:Z,Lightness:ae,History:J},props:{color:f.instanceOf(N),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1)},emits:["update:color","change","advanceChange"],setup(t,{emit:o}){const n=t.color||new N,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),c=e.ref(!1),s=e.computed(()=>({background:a.rgb})),r=()=>{c.value=!1,o("advanceChange",!1)},l=m.useLocalStorage(G,[],{}),d=m.useDebounceFn(()=>{if(t.disableHistory)return;const u=a.color.toRgbString();if(l.value=l.value.filter(_=>!V.equals(_,u)),!l.value.includes(u)){for(;l.value.length>X;)l.value.pop();l.value.unshift(u)}},500),B=u=>{u==="advance"?(c.value=!0,o("advanceChange",!0)):(a.color.hex=u,o("advanceChange",!1))},p=u=>{a.color.alpha=u},g=u=>{a.color.hue=u},h=(u,_)=>{a.color.saturation=u,a.color.brightness=_},y=u=>{a.color.lightness=u},b=u=>{const C=u.target.value.replace("#","");V(C).isValid()&&(a.color.hex=C)};return m.whenever(()=>t.color,u=>{u&&(a.color=u)},{deep:!0}),m.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),d(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,advancePanelShow:c,onBack:r,onCompactChange:B,onAlphaChange:p,onHueChange:g,onBoardChange:h,onLightChange:y,onInputChange:b,previewStyle:s,historyColors:l}}}),Ue=t=>(e.pushScopeId("data-v-48e3c224"),t=t(),e.popScopeId(),t),Ze={class:"vc-fk-colorPicker"},Je={class:"vc-fk-colorPicker__inner"},Qe={class:"vc-fk-colorPicker__header"},Te=[Ue(()=>e.createElementVNode("div",{class:"back"},null,-1))];function xe(t,o,n,a,c,s){const r=e.resolveComponent("Palette"),l=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),B=e.resolveComponent("Lightness"),p=e.resolveComponent("Alpha"),g=e.resolveComponent("Display"),h=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",Ze,[e.createElementVNode("div",Je,[e.createElementVNode("div",Qe,[t.advancePanelShow?(e.openBlock(),e.createElementBlock("span",{key:0,style:{cursor:"pointer"},onClick:o[0]||(o[0]=(...y)=>t.onBack&&t.onBack(...y))},Te)):e.createCommentVNode("",!0)]),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?(e.openBlock(),e.createBlock(l,{key:1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:2,color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B,{key:3,color:t.state.color,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:4,color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(g,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const re=z(je,[["render",xe],["__scopeId","data-v-48e3c224"]]),bo="",et=e.defineComponent({name:"ChromeColorPicker",components:{Display:Q,Alpha:Y,Board:U,Hue:Z,History:J},props:{color:f.instanceOf(N),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1)},emits:["update:color","change"],setup(t,{emit:o}){const n=t.color||new N,a=e.reactive({color:n,hex:n.toHexString(),rgb:n.toRgbString()}),c=e.computed(()=>({background:a.rgb})),s=m.useLocalStorage(G,[],{}),r=m.useDebounceFn(()=>{if(t.disableHistory)return;const h=a.color.toRgbString();if(s.value=s.value.filter(y=>!V.equals(y,h)),!s.value.includes(h)){for(;s.value.length>X;)s.value.pop();s.value.unshift(h)}},500),l=h=>{a.color.alpha=h},d=h=>{a.color.hue=h},B=h=>{h.hex!==void 0&&(a.color.hex=h.hex),h.alpha!==void 0&&(a.color.alpha=h.alpha)},p=(h,y)=>{a.color.saturation=h,a.color.brightness=y},g=h=>{h!=="advance"&&(a.color.hex=h)};return m.whenever(()=>t.color,h=>{h&&(a.color=h)},{deep:!0}),m.whenever(()=>a.color,()=>{a.hex=a.color.hex,a.rgb=a.color.toRgbString(),r(),o("update:color",a.color),o("change",a.color)},{deep:!0}),{state:a,previewStyle:c,historyColors:s,onAlphaChange:l,onHueChange:d,onBoardChange:p,onInputChange:B,onCompactChange:g}}}),tt={class:"vc-chrome-colorPicker"},ot={class:"vc-chrome-colorPicker-body"},nt={class:"chrome-controls"},at={class:"chrome-sliders"};function rt(t,o,n,a,c,s){const r=e.resolveComponent("Board"),l=e.resolveComponent("Hue"),d=e.resolveComponent("Alpha"),B=e.resolveComponent("Display"),p=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",tt,[e.createVNode(r,{round:!0,hide:!1,color:t.state.color,onChange:t.onBoardChange},null,8,["color","onChange"]),e.createElementVNode("div",ot,[e.createElementVNode("div",nt,[e.createElementVNode("div",at,[e.createVNode(l,{size:"small",color:t.state.color,onChange:t.onHueChange},null,8,["color","onChange"]),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(d,{key:0,size:"small",color:t.state.color,onChange:t.onAlphaChange},null,8,["color","onChange"]))])]),e.createVNode(B,{color:t.state.color,"disable-alpha":t.disableAlpha},null,8,["color","disable-alpha"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:0,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])])}const le=z(et,[["render",rt],["__scopeId","data-v-2611d66c"]]),T="Vue3ColorPickerProvider",lt=(t,o)=>{const n=t.getBoundingClientRect(),a=n.left+n.width/2,c=n.top+n.height/2,s=Math.abs(a-o.clientX),r=Math.abs(c-o.clientY),l=Math.sqrt(Math.pow(s,2)+Math.pow(r,2)),d=r/l,B=Math.acos(d);let p=Math.floor(180/(Math.PI/B));return o.clientX>a&&o.clientY>c&&(p=180-p),o.clientX==a&&o.clientY>c&&(p=180),o.clientX>a&&o.clientY==c&&(p=90),o.clientX<a&&o.clientY>c&&(p=180+p),o.clientX<a&&o.clientY==c&&(p=270),o.clientX<a&&o.clientY<c&&(p=360-p),p};let x=!1;const st=(t,o)=>{const n=function(c){var s;(s=o.drag)==null||s.call(o,c)},a=function(c){var s;document.removeEventListener("mousemove",n,!1),document.removeEventListener("mouseup",a,!1),document.onselectstart=null,document.ondragstart=null,x=!1,(s=o.end)==null||s.call(o,c)};t&&t.addEventListener("mousedown",c=>{var s;x||(document.onselectstart=()=>!1,document.ondragstart=()=>!1,document.addEventListener("mousemove",n,!1),document.addEventListener("mouseup",a,!1),x=!0,(s=o.start)==null||s.call(o,c))})},_o="",it={angle:{type:Number,default:0},size:{type:Number,default:16,validator:t=>t>=16},borderWidth:{type:Number,default:1,validator:t=>t>=1},borderColor:{type:String,default:"#666"}},ct=e.defineComponent({name:"Angle",props:it,emits:["update:angle","change"],setup(t,{emit:o}){const n=e.ref(null),a=e.ref(0);e.watch(()=>t.angle,l=>{a.value=l});const c=()=>{let l=Number(a.value);isNaN(l)||(l=l>360||l<0?t.angle:l,a.value=l===360?0:l,o("update:angle",a.value),o("change",a.value))},s=e.computed(()=>({width:t.size+"px",height:t.size+"px",borderWidth:t.borderWidth+"px",borderColor:t.borderColor,transform:`rotate(${a.value}deg)`})),r=l=>{n.value&&(a.value=lt(n.value,l)%360,c())};return e.onMounted(()=>{const l={drag:d=>{r(d)},end:d=>{r(d)}};n.value&&st(n.value,l)}),()=>e.createVNode("div",{class:"bee-angle"},[e.createVNode("div",{class:"bee-angle__round",ref:n,style:s.value},null)])}}),ko="",dt=e.defineComponent({name:"GradientColorPicker",components:{Angle:ct,Display:Q,Alpha:Y,Palette:ne,Board:U,Hue:Z,Lightness:ae,History:J},props:{startColor:f.instanceOf(N).isRequired,endColor:f.instanceOf(N).isRequired,startColorStop:f.number.def(0),endColorStop:f.number.def(100),angle:f.number.def(0),type:f.oneOf(["linear","radial"]).def("linear"),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),disableAlpha:f.bool.def(!1),pickerType:f.oneOf(["fk","chrome"]).def("fk")},emits:["update:startColor","update:endColor","update:angle","update:startColorStop","update:endColorStop","startColorChange","endColorChange","advanceChange","angleChange","startColorStopChange","endColorStopChange","typeChange"],setup(t,{emit:o}){const n=e.reactive({startActive:!0,startColor:t.startColor,endColor:t.endColor,startColorStop:t.startColorStop,endColorStop:t.endColorStop,angle:t.angle,type:t.type,startColorRgba:t.startColor.toRgbString(),endColorRgba:t.endColor.toRgbString()}),a=e.inject(T),c=e.ref(t.pickerType==="chrome"),s=e.ref(),r=e.ref(),l=e.ref();e.watch(()=>[t.startColor,t.endColor,t.angle],i=>{n.startColor=i[0],n.endColor=i[1],n.angle=i[2]}),e.watch(()=>t.type,i=>{n.type=i});const d=e.computed({get:()=>n.startActive?n.startColor:n.endColor,set:i=>{if(n.startActive){n.startColor=i;return}n.endColor=i}}),B=e.computed(()=>{if(l.value&&s.value){const i=n.startColorStop/100,k=l.value.getBoundingClientRect(),E=s.value.offsetWidth;return Math.round(i*(k.width-E)+E/2)}return 0}),p=e.computed(()=>{if(l.value&&r.value){const i=n.endColorStop/100,k=l.value.getBoundingClientRect(),E=r.value.offsetWidth;return Math.round(i*(k.width-E)+E/2)}return 0}),g=e.computed(()=>{let i=`background: linear-gradient(${n.angle}deg, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`;return n.type==="radial"&&(i=`background: radial-gradient(circle, ${n.startColorRgba} ${n.startColorStop}%, ${n.endColorRgba} ${n.endColorStop}%)`),i}),h=i=>{var k;if(n.startActive=!0,l.value&&s.value){const E=(k=l.value)==null?void 0:k.getBoundingClientRect();let A=i.clientX-E.left;A=Math.max(s.value.offsetWidth/2,A),A=Math.min(A,E.width-s.value.offsetWidth/2),n.startColorStop=Math.round((A-s.value.offsetWidth/2)/(E.width-s.value.offsetWidth)*100),o("update:startColorStop",n.startColorStop),o("startColorStopChange",n.startColorStop)}},y=i=>{var k;if(n.startActive=!1,l.value&&r.value){const E=(k=l.value)==null?void 0:k.getBoundingClientRect();let A=i.clientX-E.left;A=Math.max(r.value.offsetWidth/2,A),A=Math.min(A,E.width-r.value.offsetWidth/2),n.endColorStop=Math.round((A-r.value.offsetWidth/2)/(E.width-r.value.offsetWidth)*100),o("update:endColorStop",n.endColorStop),o("endColorStopChange",n.endColorStop)}},b=i=>{const k=i.target,E=parseInt(k.value.replace("°",""));isNaN(E)||(n.angle=E%360),o("update:angle",n.angle),o("angleChange",n.angle)},u=i=>{n.angle=i,o("update:angle",n.angle),o("angleChange",n.angle)},_=i=>{i==="advance"?(c.value=!0,o("advanceChange",!0)):(d.value.hex=i,o("advanceChange",!1)),R()},C=i=>{d.value.alpha=i,R()},$=i=>{d.value.hue=i,R()},S=(i,k)=>{d.value.saturation=i,d.value.brightness=k,R()},I=i=>{d.value.lightness=i,R()},H=()=>{R()},R=()=>{n.startActive?(o("update:startColor",n.startColor),o("startColorChange",n.startColor)):(o("update:endColor",n.endColor),o("endColorChange",n.endColor))},L=()=>{c.value=!1,o("advanceChange",!1)},K=()=>{n.type=n.type==="linear"?"radial":"linear",o("typeChange",n.type)},D=m.useLocalStorage(G,[],{}),ee=m.useDebounceFn(()=>{if(t.disableHistory)return;const i=d.value.toRgbString();if(D.value=D.value.filter(k=>!V.equals(k,i)),!D.value.includes(i)){for(;D.value.length>X;)D.value.pop();D.value.unshift(i)}},500);return m.tryOnMounted(()=>{r.value&&s.value&&(O.DOMUtils.triggerDragEvent(r.value,{drag:i=>{y(i)},end:i=>{y(i)}}),O.DOMUtils.triggerDragEvent(s.value,{drag:i=>{h(i)},end:i=>{h(i)}}))}),m.whenever(()=>n.startColor,i=>{n.startColorRgba=i.toRgbString()},{deep:!0}),m.whenever(()=>n.endColor,i=>{n.endColorRgba=i.toRgbString()},{deep:!0}),m.whenever(()=>d.value,()=>{ee()},{deep:!0}),{startGradientRef:s,stopGradientRef:r,colorRangeRef:l,state:n,currentColor:d,getStartColorLeft:B,getEndColorLeft:p,gradientBg:g,advancePanelShow:c,onDegreeBlur:b,onCompactChange:_,onAlphaChange:C,onHueChange:$,onBoardChange:S,onLightChange:I,historyColors:D,onBack:L,onDegreeChange:u,onDisplayChange:H,onTypeChange:K,lang:a==null?void 0:a.lang}}}),se=t=>(e.pushScopeId("data-v-c4d6d6ea"),t=t(),e.popScopeId(),t),ht={class:"vc-gradient-picker"},gt={class:"vc-gradient-picker__header"},ut={class:"vc-gradient__types"},pt={class:"vc-gradient-wrap__types"},Ct={class:"vc-picker-degree-input vc-degree-input"},ft={class:"vc-degree-input__control"},mt=["value"],bt={class:"vc-degree-input__panel"},_t={class:"vc-degree-input__disk"},kt={class:"vc-gradient-picker__body"},yt={class:"vc-color-range",ref:"colorRangeRef"},St={class:"vc-color-range__container"},Bt={class:"vc-gradient__stop__container"},$t=["title"],Vt=[se(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))],Et=["title"],Nt=[se(()=>e.createElementVNode("span",{class:"vc-gradient__stop--inner"},null,-1))];function wt(t,o,n,a,c,s){var b,u;const r=e.resolveComponent("Angle"),l=e.resolveComponent("Board"),d=e.resolveComponent("Hue"),B=e.resolveComponent("Palette"),p=e.resolveComponent("Lightness"),g=e.resolveComponent("Alpha"),h=e.resolveComponent("Display"),y=e.resolveComponent("History");return e.openBlock(),e.createElementBlock("div",ht,[e.createElementVNode("div",gt,[e.createElementVNode("div",null,[e.withDirectives(e.createElementVNode("div",{class:"back",style:{cursor:"pointer"},onClick:o[0]||(o[0]=(..._)=>t.onBack&&t.onBack(..._))},null,512),[[e.vShow,t.pickerType==="fk"&&t.advancePanelShow]])]),e.createElementVNode("div",ut,[e.createElementVNode("div",pt,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["linear","radial"],_=>e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__type",{active:t.state.type===_}]),key:_,onClick:o[1]||(o[1]=(...C)=>t.onTypeChange&&t.onTypeChange(...C))},e.toDisplayString(t.lang?t.lang[_]:_),3)),64))]),e.withDirectives(e.createElementVNode("div",Ct,[e.createElementVNode("div",ft,[e.createElementVNode("input",{value:t.state.angle,onBlur:o[2]||(o[2]=(..._)=>t.onDegreeBlur&&t.onDegreeBlur(..._))},null,40,mt),e.createTextVNode("deg ")]),e.createElementVNode("div",bt,[e.createElementVNode("div",_t,[e.createVNode(r,{angle:t.state.angle,"onUpdate:angle":o[3]||(o[3]=_=>t.state.angle=_),size:40,onChange:t.onDegreeChange},null,8,["angle","onChange"])])])],512),[[e.vShow,t.state.type==="linear"]])])]),e.createElementVNode("div",kt,[e.createElementVNode("div",yt,[e.createElementVNode("div",St,[e.createElementVNode("div",{class:"vc-background",style:e.normalizeStyle(t.gradientBg)},null,4),e.createElementVNode("div",Bt,[e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":t.state.startActive}]),ref:"startGradientRef",title:(b=t.lang)==null?void 0:b.start,style:e.normalizeStyle({left:t.getStartColorLeft+"px",backgroundColor:t.state.startColorRgba})},Vt,14,$t),e.createElementVNode("div",{class:e.normalizeClass(["vc-gradient__stop",{"vc-gradient__stop--current":!t.state.startActive}]),ref:"stopGradientRef",title:(u=t.lang)==null?void 0:u.end,style:e.normalizeStyle({left:t.getEndColorLeft+"px",backgroundColor:t.state.endColorRgba})},Nt,14,Et)])])],512)]),t.advancePanelShow?(e.openBlock(),e.createBlock(l,{key:0,color:t.currentColor,onChange:t.onBoardChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?(e.openBlock(),e.createBlock(d,{key:1,color:t.currentColor,onChange:t.onHueChange},null,8,["color","onChange"])):e.createCommentVNode("",!0),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B,{key:2,onChange:t.onCompactChange},null,8,["onChange"])),t.advancePanelShow?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(p,{key:3,color:t.currentColor,onChange:t.onLightChange},null,8,["color","onChange"])),t.disableAlpha?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(g,{key:4,color:t.currentColor,onChange:t.onAlphaChange},null,8,["color","onChange"])),e.createVNode(h,{color:t.currentColor,"disable-alpha":t.disableAlpha,onChange:t.onDisplayChange},null,8,["color","disable-alpha","onChange"]),t.disableHistory?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:5,round:t.roundHistory,colors:t.historyColors,onChange:t.onCompactChange},null,8,["round","colors","onChange"]))])}const ie=z(dt,[["render",wt],["__scopeId","data-v-c4d6d6ea"]]),Bo="",vt=e.defineComponent({name:"WrapContainer",props:{theme:f.oneOf(["white","black"]).def("white"),showTab:f.bool.def(!1),activeKey:f.oneOf(["pure","gradient"]).def("pure")},emits:["update:activeKey","change"],setup(t,{emit:o}){const n=e.reactive({activeKey:t.activeKey}),a=e.inject(T),c=s=>{n.activeKey=s,o("update:activeKey",s),o("change",s)};return m.whenever(()=>t.activeKey,s=>{n.activeKey=s}),{state:n,onActiveKeyChange:c,lang:a==null?void 0:a.lang}}}),Ht={class:"vc-colorpicker--container"},Rt={key:0,class:"vc-colorpicker--tabs"},At={class:"vc-colorpicker--tabs__inner"},Pt={class:"vc-btn__content"},Mt={class:"vc-btn__content"};function zt(t,o,n,a,c,s){var r,l;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vc-colorpicker",t.theme])},[e.createElementVNode("div",Ht,[t.showTab?(e.openBlock(),e.createElementBlock("div",Rt,[e.createElementVNode("div",At,[e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="pure"}]),onClick:o[0]||(o[0]=d=>t.onActiveKeyChange("pure"))},[e.createElementVNode("button",null,[e.createElementVNode("div",Pt,e.toDisplayString((r=t.lang)==null?void 0:r.pure),1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["vc-colorpicker--tabs__btn",{"vc-btn-active":t.state.activeKey==="gradient"}]),onClick:o[1]||(o[1]=d=>t.onActiveKeyChange("gradient"))},[e.createElementVNode("button",null,[e.createElementVNode("div",Mt,e.toDisplayString((l=t.lang)==null?void 0:l.gradient),1)])],2),e.createElementVNode("div",{class:"vc-colorpicker--tabs__bg",style:e.normalizeStyle({width:"50%",left:`calc(${t.state.activeKey==="gradient"?50:0}%)`})},null,4)])])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)])],2)}const It=z(vt,[["render",zt],["__scopeId","data-v-0492277d"]]),Dt={En:{start:"Start",end:"End",pure:"Pure",gradient:"Gradient",linear:"linear",radial:"radial"},"ZH-cn":{start:"开始",end:"结束",pure:"纯色",gradient:"渐变",linear:"线性",radial:"径向"}},Eo="",Lt={isWidget:f.bool.def(!1),pickerType:f.oneOf(["fk","chrome"]).def("fk"),shape:f.oneOf(["circle","square"]).def("square"),pureColor:{type:[String,Object],default:"#000000"},gradientColor:f.string.def("linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"),format:{type:String,default:"rgb"},disableAlpha:f.bool.def(!1),disableHistory:f.bool.def(!1),roundHistory:f.bool.def(!1),useType:f.oneOf(["pure","gradient","both"]).def("pure"),activeKey:f.oneOf(["pure","gradient"]).def("pure"),lang:{type:String,default:"ZH-cn"},zIndex:f.number.def(9999),pickerContainer:{type:[String,HTMLElement],default:"body"},debounce:f.number.def(100),theme:f.oneOf(["white","black"]).def("white"),blurClose:f.bool.def(!1),defaultPopup:f.bool.def(!1)},Kt=e.defineComponent({name:"ColorPicker",components:{FkColorPicker:re,ChromeColorPicker:le,GradientColorPicker:ie,WrapContainer:It},inheritAttrs:!1,props:Lt,emits:["update:pureColor","pureColorChange","update:gradientColor","gradientColorChange","update:activeKey","activeKeyChange"],setup(t,{emit:o}){e.provide(T,{lang:e.computed(()=>Dt[t.lang||"ZH-cn"])});const n=!!e.useSlots().extra,a=e.reactive({pureColor:t.pureColor||"",activeKey:t.useType==="gradient"?"gradient":t.activeKey,isAdvanceMode:!1}),c=new N("#000"),s=new N("#000"),r=new N(a.pureColor),l=e.reactive({startColor:c,endColor:s,startColorStop:0,endColorStop:100,angle:0,type:"linear",gradientColor:t.gradientColor}),d=e.ref(r),B=e.ref(t.defaultPopup),p=e.ref(null),g=e.ref(null);let h=null;const y=e.computed(()=>({background:a.activeKey!=="gradient"?V(a.pureColor).toRgbString():l.gradientColor})),b=e.computed(()=>a.activeKey==="gradient"?ie.name:t.pickerType==="fk"?re.name:le.name),u=i=>{a.isAdvanceMode=i},_=e.computed(()=>{const i={disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,pickerType:t.pickerType};return a.activeKey==="gradient"?{...i,startColor:l.startColor,endColor:l.endColor,angle:l.angle,type:l.type,startColorStop:l.startColorStop,endColorStop:l.endColorStop,onStartColorChange:k=>{l.startColor=k,H()},onEndColorChange:k=>{l.endColor=k,H()},onStartColorStopChange:k=>{l.startColorStop=k,H()},onEndColorStopChange:k=>{l.endColorStop=k,H()},onAngleChange:k=>{l.angle=k,H()},onTypeChange:k=>{l.type=k,H()},onAdvanceChange:u}:{...i,disableAlpha:t.disableAlpha,disableHistory:t.disableHistory,roundHistory:t.roundHistory,color:d.value,onChange:K,onAdvanceChange:u}}),C=()=>{B.value=!0,h?h.update():L()},$=()=>{B.value=!1},S=m.useDebounceFn(()=>{!t.isWidget&&t.blurClose&&$()},100);m.onClickOutside(g,()=>{$()});const I=()=>{var i,k,E,A;try{const[M]=te.parse(l.gradientColor);if(M&&M.type.includes("gradient")&&M.colorStops.length>=2){const ce=M.colorStops[0],de=M.colorStops[1];l.startColorStop=Number((i=ce.length)==null?void 0:i.value)||0,l.endColorStop=Number((k=de.length)==null?void 0:k.value)||0,M.type==="linear-gradient"&&((E=M.orientation)==null?void 0:E.type)==="angular"&&(l.angle=Number((A=M.orientation)==null?void 0:A.value)||0),l.type=M.type.split("-")[0];const[Gt,Xt,Yt,jt]=ce.value,[Ut,Zt,Jt,Qt]=de.value;l.startColor=new N({r:Number(Gt),g:Number(Xt),b:Number(Yt),a:Number(jt)}),l.endColor=new N({r:Number(Ut),g:Number(Zt),b:Number(Jt),a:Number(Qt)})}}catch(M){console.log(`[Parse Color]: ${M}`)}},H=m.useDebounceFn(()=>{const i=R();try{l.gradientColor=te.stringify(i),o("update:gradientColor",l.gradientColor),o("gradientColorChange",l.gradientColor)}catch(k){console.log(k)}},t.debounce),R=()=>{const i=[],k=l.startColor.RGB.map(M=>M.toString()),E=l.endColor.RGB.map(M=>M.toString()),A=[{type:"rgba",value:[k[0],k[1],k[2],k[3]],length:{value:l.startColorStop+"",type:"%"}},{type:"rgba",value:[E[0],E[1],E[2],E[3]],length:{value:l.endColorStop+"",type:"%"}}];return l.type==="linear"?i.push({type:"linear-gradient",orientation:{type:"angular",value:l.angle+""},colorStops:A}):l.type==="radial"&&i.push({type:"radial-gradient",orientation:[{type:"shape",value:"circle"}],colorStops:A}),i},L=()=>{p.value&&g.value&&(h=he.createPopper(p.value,g.value,{placement:"auto",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{allowedAutoPlacements:["top","bottom","left","right"],rootBoundary:"viewport"}}]}))},K=i=>{d.value=i,a.pureColor=i.toString(t.format),D()},D=m.useDebounceFn(()=>{o("update:pureColor",a.pureColor),o("pureColorChange",a.pureColor)},t.debounce),ee=i=>{a.activeKey=i,o("update:activeKey",i),o("activeKeyChange",i)};return m.tryOnMounted(()=>{I(),h||L()}),m.whenever(()=>t.gradientColor,i=>{i!=l.gradientColor&&(l.gradientColor=i)}),m.whenever(()=>l.gradientColor,()=>{I()}),m.whenever(()=>t.activeKey,i=>{a.activeKey=i}),m.whenever(()=>t.useType,i=>{a.activeKey!=="gradient"&&i==="gradient"?a.activeKey="gradient":a.activeKey="pure"}),m.whenever(()=>t.pureColor,i=>{V.equals(i,a.pureColor)||(a.pureColor=i,d.value=new N(i))},{deep:!0}),{colorCubeRef:p,pickerRef:g,showPicker:B,colorInstance:d,getBgColorStyle:y,getComponentName:b,getBindArgs:_,state:a,hasExtra:n,onColorChange:K,onShowPicker:C,onActiveKeyChange:ee,onAutoClose:S}}}),Ot={key:0,class:"vc-color-extra"},Wt={key:0,class:"vc-color-extra"};function Ft(t,o,n,a,c,s){const r=e.resolveComponent("WrapContainer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[t.isWidget?(e.openBlock(),e.createBlock(r,{key:0,"active-key":t.state.activeKey,"onUpdate:activeKey":o[0]||(o[0]=l=>t.state.activeKey=l),"show-tab":t.useType==="both",style:e.normalizeStyle({zIndex:t.zIndex}),theme:t.theme,onChange:t.onActiveKeyChange},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16)),t.hasExtra?(e.openBlock(),e.createElementBlock("div",Ot,[e.renderSlot(t.$slots,"extra",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3},8,["active-key","show-tab","style","theme","onChange"])):e.createCommentVNode("",!0),t.isWidget?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",{class:e.normalizeClass(["vc-color-wrap transparent",{round:t.shape==="circle"}]),ref:"colorCubeRef"},[e.createElementVNode("div",{class:"current-color",style:e.normalizeStyle(t.getBgColorStyle),onClick:o[1]||(o[1]=(...l)=>t.onShowPicker&&t.onShowPicker(...l))},null,4)],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.pickerContainer},[e.withDirectives(e.createElementVNode("div",{ref:"pickerRef",style:e.normalizeStyle({zIndex:t.zIndex}),onMouseleave:o[3]||(o[3]=(...l)=>t.onAutoClose&&t.onAutoClose(...l))},[t.showPicker?(e.openBlock(),e.createBlock(r,{key:0,"show-tab":t.useType==="both"&&!t.state.isAdvanceMode,theme:t.theme,"active-key":t.state.activeKey,"onUpdate:activeKey":o[2]||(o[2]=l=>t.state.activeKey=l),onChange:t.onActiveKeyChange},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.getComponentName),e.mergeProps({key:t.getComponentName},t.getBindArgs),null,16)),t.hasExtra?(e.openBlock(),e.createElementBlock("div",Wt,[e.renderSlot(t.$slots,"extra",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3},8,["show-tab","theme","active-key","onChange"])):e.createCommentVNode("",!0)],36),[[e.vShow,t.showPicker]])],8,["to"]))],64))],64)}const W=z(Kt,[["render",Ft],["__scopeId","data-v-354ca836"]]),qt={install:t=>{t.component(W.name,W),t.component("Vue3"+W.name,W)}};w.ColorPicker=W,w.default=qt,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});