UNPKG

@cyhnkckali/vue3-color-picker

Version:

A color picker component library

cyhnkckali.github.io/vue3-color-picker/

cyhnkckali/vue3-color-picker

2 lines (1 loc) • 47.8 kB
1
2
(function(Y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(Y=typeof globalThis<"u"?globalThis:Y||self,e(Y.Vue3ColorPicker={},Y.Vue))})(this,function(Y,e){"use strict";const Ee={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},xe=[e.createElementVNode("path",{d:"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"},null,-1)],$e=e.defineComponent({__name:"ColorInputMenu",props:{iconClass:{default:"",type:String},inputType:{default:"RGB",type:String}},emits:["onChangeInputName"],setup(o,{emit:m}){const c=o,s=e.ref(c.inputType),r=["CMYK","HSL","HSV","RGB"],d=m,f=()=>{const h=r.findIndex(a=>a==s.value),k=r[h+1]?r[h+1]:r[0];s.value=k,d("onChangeInputName",k)};return(h,k)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:"cp-btn",onClick:f},[e.createTextVNode(e.toDisplayString(s.value)+" ",1),o.iconClass?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClass)},null,2)):(e.openBlock(),e.createElementBlock("svg",Ee,xe))]))}}),ve={class:"ck-cp-menu"},Me={class:"ck-cp-controller-bar",style:{display:"flex","justify-content":"end",position:"relative","flex-grow":"1"}},Ie={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},Se=[e.createElementVNode("path",{d:"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"},null,-1)],Le={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},Te=[e.createElementVNode("path",{d:"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"},null,-1)],De={key:1,width:"15",height:"28",viewBox:"0 -3 36 36",xmlns:"http://www.w3.org/2000/svg"},He=[e.createStaticVNode('<path d="M29.333 9.667h-8c-0.547 0-1-0.453-1-1s0.453-1 1-1h8c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M8 9.667h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M13.333 14.333c-3.12 0-5.667-2.547-5.667-5.667s2.547-5.667 5.667-5.667c3.12 0 5.667 2.547 5.667 5.667s-2.547 5.667-5.667 5.667zM13.333 5c-2.027 0-3.667 1.64-3.667 3.667s1.64 3.667 3.667 3.667c2.027 0 3.667-1.64 3.667-3.667s-1.64-3.667-3.667-3.667z"></path><path d="M29.333 24.333h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M10.667 24.333h-8c-0.547 0-1-0.453-1-1s0.453-1 1-1h8c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path><path d="M18.667 29c-3.12 0-5.667-2.547-5.667-5.667s2.547-5.667 5.667-5.667c3.12 0 5.667 2.547 5.667 5.667s-2.547 5.667-5.667 5.667zM18.667 19.667c-2.027 0-3.667 1.64-3.667 3.667s1.64 3.667 3.667 3.667c2.027 0 3.667-1.64 3.667-3.667s-1.64-3.667-3.667-3.667z"></path>',6)],Re={key:0,class:"ck-cp-linear-angle-container"},Pe={class:"ck-gradient-set-label",style:{"margin-top":"0"}},Xe=["value"],Oe={key:1,class:"ck-cp-linear-angle-container"},Ye={class:"ck-gradient-set-label",style:{"margin-top":"0"}},Ue=["value"],Ge={class:"ck-gradient-set-label"},ze=["value"],Ae=e.defineComponent({__name:"PickerMenu",props:{mode:{default:"gradient",type:String},inputType:{default:"RGB",type:String},gradientType:{default:"linear",type:String},showInputMenu:{default:!0,type:Boolean},showPickerMode:{default:!0,type:Boolean},angle:{default:90,type:Number},percentageX:{default:50,type:Number},percentageY:{default:50,type:Number},local:{default:{},type:Object},iconClasses:{default:{ruler:"",eyeDroper:"",arrowDown:"",save:"",delete:""},type:Object}},emits:["onPickerChangeMode","onChangeMode","onChangeInputType","onDeleteColor","onClickEyeDropper","update:angle","update:percentageX","update:percentageY","onInput"],setup(o,{emit:m}){const c=o,s=e.ref(!1),r=m,d=(a,g)=>{switch(g){case"angle":r("update:angle",parseInt(a.target.value)),r("onInput");break;case"percentageX":r("update:percentageX",parseInt(a.target.value)),r("onInput");break;case"percentageY":r("update:percentageY",parseInt(a.target.value)),r("onInput");break}},f=a=>{r("onChangeInputType",a)},h=()=>{r("onChangeMode",c.gradientType=="linear"?"radial":"linear")},k=()=>{r("onPickerChangeMode",c.mode=="gradient"?"solid":"gradient")};return(a,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",ve,[e.createElementVNode("div",Me,[o.showPickerMode?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cp-btn",onClick:k,style:{"margin-bottom":"var(--margin-top)"}},[e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(o.local.gradient?o.local.gradient:"Gradient"),513),[[e.vShow,o.mode=="gradient"]]),e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(o.local.solid?o.local.solid:"Solid"),513),[[e.vShow,o.mode=="solid"]]),o.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",Ie,Se))])):e.createCommentVNode("",!0),o.mode=="gradient"?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"cp-btn",style:{"margin-bottom":"var(--margin-top)"},onClick:h},[e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(o.local.linear?o.local.linear:"Linear"),513),[[e.vShow,o.gradientType=="linear"]]),e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(o.local.radial?o.local.radial:"Radial"),513),[[e.vShow,o.gradientType=="radial"]]),o.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",Le,Te))])):e.createCommentVNode("",!0),o.showInputMenu?(e.openBlock(),e.createBlock($e,{key:2,style:{"margin-bottom":"var(--margin-top)"},iconClass:o.iconClasses.arrowDown,inputType:o.inputType,onOnChangeInputName:f},null,8,["iconClass","inputType"])):e.createCommentVNode("",!0),o.mode=="gradient"?(e.openBlock(),e.createElementBlock("button",{key:3,type:"button",class:"cp-btn",style:{"margin-bottom":"var(--margin-top)"},onClick:g[0]||(g[0]=C=>s.value=!s.value)},[o.iconClasses.ruler?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.ruler)},null,2)):(e.openBlock(),e.createElementBlock("svg",De,He))])):e.createCommentVNode("",!0)])]),o.mode=="gradient"?e.withDirectives((e.openBlock(),e.createElementBlock("div",Re,[e.createElementVNode("div",null,[e.createElementVNode("p",Pe,[e.createTextVNode(e.toDisplayString(o.local.angle?o.local.angle:"Angle")+" ",1),e.createElementVNode("span",null,e.toDisplayString(o.angle)+"°",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"360",value:o.angle,onInput:g[1]||(g[1]=C=>d(C,"angle"))},null,40,Xe)])],512)),[[e.vShow,o.gradientType=="linear"&&s.value]]):e.createCommentVNode("",!0),o.mode=="gradient"&&s.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("div",null,[e.createElementVNode("p",Ye,[e.createTextVNode(e.toDisplayString(o.local.positionX?o.local.positionX:"Position X")+" ",1),e.createElementVNode("span",null,e.toDisplayString(o.percentageX)+"%",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"100",value:o.percentageX,onInput:g[2]||(g[2]=C=>d(C,"percentageX"))},null,40,Ue)]),e.createElementVNode("div",null,[e.createElementVNode("p",Ge,[e.createTextVNode(e.toDisplayString(o.local.positionY?o.local.positionY:"Position Y")+" ",1),e.createElementVNode("span",null,e.toDisplayString(o.percentageY)+"%",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"100",value:o.percentageY,onInput:g[3]||(g[3]=C=>d(C,"percentageY"))},null,40,ze)])],512)),[[e.vShow,o.gradientType=="radial"]]):e.createCommentVNode("",!0)],64))}}),Fe=["onTouchstart"],We=300,je=e.defineComponent({__name:"GradientBar",emits:["onAddColor","onMouseDown"],setup(o,{emit:m}){const c=e.inject("gradientBar"),s=m,r=h=>{h.preventDefault()};let d=0;const f=h=>{h.preventDefault();const k=new Date().getTime(),a=k-d;a<We&&a>0&&s("onAddColor",h),d=k};return(h,k)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient-bar",onMousedown:k[1]||(k[1]=a=>h.$emit("onMouseDown",a)),onTouchstart:k[2]||(k[2]=a=>h.$emit("onMouseDown",a)),onDragstart:r},[e.createElementVNode("div",{ref_key:"gradientBar",ref:c,class:"gradient-container",onDblclick:k[0]||(k[0]=a=>h.$emit("onAddColor",a)),onTouchstart:e.withModifiers(f,["self"])},null,40,Fe)],32))}}),qe=e.createElementVNode("div",{class:"colour-area-mask"},null,-1),Ze=e.defineComponent({__name:"PickerWrap",emits:["onEventStart"],setup(o){const m=e.inject("canvas"),c=e.inject("pickerWrap"),s=e.inject("pickerPointer"),r=d=>{d.preventDefault()};return(d,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerWrap",ref:c,class:"cp-picker-wrap",onMousedown:f[0]||(f[0]=h=>d.$emit("onEventStart",h)),onTouchstart:f[1]||(f[1]=h=>{h.preventDefault(),d.$emit("onEventStart",h)}),onDragstart:r},[e.createElementVNode("canvas",{ref_key:"canvas",ref:m,class:"colour-area"},null,512),qe,e.createElementVNode("div",{ref_key:"pickerPointer",ref:s,class:"colour-area-point-circle"},null,512)],544))}}),Ke={class:"picker-hue"},Je=["value"],Qe=e.defineComponent({__name:"PickerHue",props:{modelValue:{default:0,type:Number}},emits:["update:modelValue","onInput","onChange"],setup(o,{emit:m}){const c=m,s=r=>{c("update:modelValue",parseFloat(r.target.value)),c("onInput",r)};return(r,d)=>(e.openBlock(),e.createElementBlock("div",Ke,[e.createElementVNode("input",{value:o.modelValue,class:"picker-hue-range-slider",type:"range",min:"0",max:"360",step:"0.1",onInput:s,onChange:d[0]||(d[0]=f=>r.$emit("onChange",f))},null,40,Je)]))}}),_e={class:"opacity-bar"},et=["value"],tt=e.defineComponent({__name:"OpacityBar",props:{modelValue:{default:0,type:Number}},emits:["update:modelValue","onInput"],setup(o,{emit:m}){const c=e.inject("opacitySlider"),s=m,r=d=>{s("update:modelValue",parseInt(d.target.value)),s("onInput",d)};return(d,f)=>(e.openBlock(),e.createElementBlock("div",_e,[e.createElementVNode("input",{ref_key:"opacitySlider",ref:c,value:o.modelValue,class:"opacity_slider",type:"range",min:"0",max:"100",onInput:r},null,40,et)]))}}),lt={class:"ck-cp-input-content"},nt={class:"ck-cp-input-label"},ot=["min","max","value"],L=e.defineComponent({__name:"InputNumber",props:{label:{default:"",type:String},modelValue:{default:0,type:Number},min:{default:0,type:Number},max:{default:100,type:Number}},emits:["update:modelValue"],setup(o,{emit:m}){const c=o,s=m,r=e.ref(c.modelValue);e.watch(()=>c.modelValue,(a,g)=>{a!==g&&(r.value=a)},{immediate:!0});const d=a=>{const g=M=>{r.value=M,s("update:modelValue",M)},C=a.target.value;if(!C)return g(c.modelValue);if(parseInt(C)>c.max)return g(c.max);s("update:modelValue",parseInt(C))},f=a=>{r.value=a.target.value},h=a=>{if(["KeyE","Equal","Equal","Backslash","Slash","NumpadDecimal","NumpadAdd"].includes(a.code))return a.preventDefault();a.code==="Enter"&&d(a)},k=d;return(a,g)=>(e.openBlock(),e.createElementBlock("div",lt,[e.createElementVNode("span",nt,e.toDisplayString(o.label),1),e.createElementVNode("input",{type:"number",min:o.min,max:o.max,value:r.value,onInput:f,onKeydown:h,onFocusout:g[0]||(g[0]=(...C)=>e.unref(k)&&e.unref(k)(...C))},null,40,ot)]))}}),at={class:"ck-cp-input-content color-hex"},st=e.createElementVNode("span",{class:"ck-cp-input-label"},"HEX",-1),rt=["value"],ct=e.defineComponent({__name:"InputHex",props:{modelValue:{}},emits:["update:modelValue"],setup(o,{emit:m}){const c=o,s=m,r=e.ref(""),d=a=>{const g=a.target.value;r.value=g,r.value=`#${g.replace(/#/g,"")}`},f=a=>{const g=a.target.value;if(g===c.modelValue)return;if(!/^#[0-9a-fA-F]+$/.test(g)){r.value=c.modelValue;return}let C=g.replace(/#/g,"");switch(C.length){case 0:C=c.modelValue.replace("#","");break;case 1:case 2:C=C.repeat(3);break;case 4:case 5:C=C.slice(0,3);break;case 3:case 6:break;default:C=C.slice(0,6)}r.value=`#${C.toUpperCase()}`,s("update:modelValue",r.value)},h=a=>{a.code==="Enter"&&f(a)},k=f;return e.watch(()=>c.modelValue,(a,g)=>{a!==g&&(r.value=a)},{immediate:!0}),(a,g)=>(e.openBlock(),e.createElementBlock("div",at,[st,e.createElementVNode("input",{type:"text",value:r.value,onInput:d,onKeydown:h,onFocusout:g[0]||(g[0]=(...C)=>e.unref(k)&&e.unref(k)(...C))},null,40,rt)]))}}),it=o=>{const m=/^rgb\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)\)$/i;if(!m.test(o))return null;const c=m.exec(o);if(!c)return null;const s=parseInt(c[1].trim(),10),r=parseInt(c[2].trim(),10),d=parseInt(c[3].trim(),10);return{r:s,g:r,b:d}},dt=o=>{const m=/^rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*),(\s*[\d.]+\s*)\)$/i;if(!m.test(o))return null;const c=m.exec(o);if(!c)return null;const s=parseInt(c[1].trim(),10),r=parseInt(c[2].trim(),10),d=parseInt(c[3].trim(),10),f=parseFloat(c[4].trim());return{r:s,g:r,b:d,a:f}},ut=o=>{const m=/^#?([a-f\d]{8})$/i;if(!m.test(o))return null;const c=m.exec(o);if(!c)return null;const s=c[1],r=s.substring(6,8),d=parseInt(s.substring(0,2),16),f=parseInt(s.substring(2,4),16),h=parseInt(s.substring(4,6),16),k=parseInt(r,16)/255;return{r:d,g:f,b:h,a:k}},pt=(o,m,c,s)=>{function r(a){const g=a.toString(16);return g.length===1?"0"+g:g}const d=r(Math.round(o)),f=r(Math.round(m)),h=r(Math.round(c)),k=r(Math.round(s*255));return`#${d}${f}${h}${k}`},Q=o=>{var m;try{let c=(m=o.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(f,h,k,a)=>"#"+h+h+k+k+a+a).substring(1).match(/.{2}/g))==null?void 0:m.map(f=>parseInt(f,16)),s=c==null?void 0:c[0],r=c==null?void 0:c[1],d=c==null?void 0:c[2];return Number.isNaN(s)||Number.isNaN(r)||Number.isNaN(d)||s===void 0||r===void 0||d===void 0?null:{r:s,g:r,b:d}}catch{return null}},G=(o,m,c)=>{o=o/255,m=m/255,c=c/255;const s=Math.max(o,m,c),r=Math.min(o,m,c);let d;return s===o?d=(m-c)/(s-r):s===m?d=2+(c-o)/(s-r):d=4+(o-m)/(s-r),d*=60,d<0&&(d+=360),Number.isNaN(d)&&(d=0),d},mt=(o,m,c)=>{m=m/100,c=c/100;let s,r,d,f=[];return s=(1-Math.abs(2*c-1))*m,r=s*(1-Math.abs(o/60%2-1)),d=c-s/2,o>=0&&o<60&&(f=[s,r,0]),o>=60&&o<120&&(f=[r,s,0]),o>=120&&o<180&&(f=[0,s,r]),o>=180&&o<240&&(f=[0,r,s]),o>=240&&o<300&&(f=[r,0,s]),o>=300&&o<=360&&(f=[s,0,r]),f.map(h=>Math.round(255*(h+d)))},re=(o,m,c)=>"#"+(16777216+(c|m<<8|o<<16)).toString(16).slice(1),me=(o,m,c)=>{let s=mt(o,m,c);return{rgb:s,hexA:re(s[0],s[1],s[2])}},ge=(o,m,c)=>{let s,r,d,f,h,k,a=0,g=[];for(g[0]=o/255,g[1]=m/255,g[2]=c/255,s=g[0],r=g[0],k=0,d=0;d<g.length-1;d++)g[d+1]<=s&&(s=g[d+1]),g[d+1]>=r&&(r=g[d+1],k=d+1);return k===0&&(a=(g[1]-g[2])/(r-s)),k===1&&(a=2+(g[2]-g[0])/(r-s)),k===2&&(a=4+(g[0]-g[1])/(r-s)),isNaN(a)&&(a=0),a=a*60,a<0&&(a=a+360),f=(s+r)/2,s===r?h=0:f<.5?h=(r-s)/(r+s):h=(r-s)/(2-r-s),h=h,{h:a,s:h,l:f}},he=(o,m,c)=>{o=o%360/360,m=Math.min(1,Math.max(0,m)),c=Math.min(1,Math.max(0,c));let s,r,d;if(m===0)s=r=d=c;else{const f=(a,g,C)=>(C<0&&(C+=1),C>1&&(C-=1),C<.16666666666666666?a+(g-a)*6*C:C<.5?g:C<.6666666666666666?a+(g-a)*(.6666666666666666-C)*6:a),h=c<.5?c*(1+m):c+m-c*m,k=2*c-h;s=f(k,h,o+1/3),r=f(k,h,o),d=f(k,h,o-1/3)}return s=Math.round(s*255),r=Math.round(r*255),d=Math.round(d*255),{r:s,g:r,b:d}},gt=(o,m,c)=>{let s=0,r=0,d=0;const f=o/60,h=c*m,k=h*(1-Math.abs(f%2-1)),a=c-h;switch(Math.floor(f)%6){case 0:s=h,r=k,d=0;break;case 1:s=k,r=h,d=0;break;case 2:s=0,r=h,d=k;break;case 3:s=0,r=k,d=h;break;case 4:s=k,r=0,d=h;break;case 5:s=h,r=0,d=k;break}return{r:Math.round((s+a)*255),g:Math.round((r+a)*255),b:Math.round((d+a)*255)}},ht=(o,m,c)=>{o/=255,m/=255,c/=255;const s=Math.max(o,m,c),r=Math.min(o,m,c);let d,f,h=s;const k=s-r;if(s!==0)f=k/s;else return{h:0,s:0,v:0};return k===0?d=0:s===o?d=60*((m-c)/k%6):s===m?d=60*((c-o)/k+2):d=60*((o-m)/k+4),d<0&&(d+=360),{h:Math.round(d),s:Math.round(f*100)/100,v:Math.round(h*100)/100}},ft=(o,m,c)=>{const s=(2-m)*c/2,r=s&&s<1?m*c/(s<.5?s*2:2-s*2):m;return{h:o,s:r,l:s}},kt=(o,m,c,s)=>{const r=Math.round(255*(1-o)*(1-s)),d=Math.round(255*(1-m)*(1-s)),f=Math.round(255*(1-c)*(1-s));return{r:Math.min(255,Math.max(0,r)),g:Math.min(255,Math.max(0,d)),b:Math.min(255,Math.max(0,f))}},yt=(o,m,c)=>{o=o/255,m=m/255,c=c/255;const s=1-Math.max(o,m,c),r=(1-o-s)/(1-s),d=(1-m-s)/(1-s),f=(1-c-s)/(1-s);return{c:isNaN(r)?0:r,m:isNaN(d)?0:d,y:isNaN(f)?0:f,k:isNaN(s)?0:s}},Ct={class:"ck-cp-local-color-conatiner"},bt={class:"ck-cp-color-list-label"},wt={style:{display:"flex","align-items":"center"}},Vt={key:1,width:"32",height:"14",viewBox:"5 -5 32 32",xmlns:"http://www.w3.org/2000/svg"},Bt=[e.createElementVNode("path",{d:"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"},null,-1)],Nt={key:1,width:"18",height:"18",viewBox:"-2 -2 30 30",xmlns:"http://www.w3.org/2000/svg"},Et=[e.createStaticVNode('<path d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"></path><path d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"></path><path d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"></path><path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"></path><path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"></path>',5)],xt={class:"ck-cp-color-list"},$t=["onClick"],vt={key:1,width:"25",height:"25",viewBox:"2 2 20 20",xmlns:"http://www.w3.org/2000/svg"},Mt=[e.createElementVNode("path",{d:"M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"},null,-1),e.createElementVNode("path",{d:"M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z"},null,-1)],It=e.defineComponent({__name:"HistoryColorList",props:{colorListCount:{default:10,type:Number},hexVal:{default:"",type:String},title:{default:"",type:String},iconClasses:{default:{ruler:"",eyeDroper:"",arrowDown:"",save:"",delete:""},type:Object}},emits:["color-item-click"],setup(o,{emit:m}){const c=o,s=m,r=e.ref([]),d=e.computed(()=>r.value.some(a=>a.selected==!0)),f=()=>{if(!r.value.find(g=>g.color===c.hexVal)){const g=r.value.find(C=>C.selected==!0);if(g)g.color=c.hexVal;else{r.value.length===c.colorListCount&&r.value.pop();let C=c.hexVal;r.value.unshift({color:C,selected:!1})}localStorage.setItem("ck-cp-local-color-list",JSON.stringify(r.value.map(C=>C.color)))}},h=()=>{r.value=r.value.filter(a=>a.selected==!1),localStorage.setItem("ck-cp-local-color-list",JSON.stringify(r.value.map(a=>a.color)))},k=a=>{r.value.forEach(g=>{g.color===a?g.selected=!g.selected:g.selected=!1}),s("color-item-click",a)};return e.onBeforeMount(()=>{let a=localStorage.getItem("ck-cp-local-color-list");if(a){let g=JSON.parse(a);r.value=g.map(C=>({color:C,selected:!1}))}}),(a,g)=>(e.openBlock(),e.createElementBlock("div",Ct,[e.createElementVNode("div",bt,[e.createElementVNode("div",wt,[e.createTextVNode(e.toDisplayString(o.title?o.title:"Color Palette")+" ",1),o.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",Vt,Bt))]),d.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cp-main-btn",onClick:h,style:{width:"17.33px",height:"17.33px"}},[o.iconClasses.delete?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.delete)},null,2)):(e.openBlock(),e.createElementBlock("svg",Nt,Et))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",xt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,C=>(e.openBlock(),e.createElementBlock("div",{key:`color-${C.color}`,class:e.normalizeClass(["ck-cp-color-item",C.selected?"ck-select":""]),style:e.normalizeStyle({backgroundColor:C.color}),onClick:M=>k(C.color)},null,14,$t))),128)),e.createElementVNode("button",{type:"button",class:"cp-btn-save-color",onClick:f},[o.iconClasses.save?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.save)},null,2)):(e.openBlock(),e.createElementBlock("svg",vt,Mt))])])]))}}),St=["cp-theme"],Lt={key:0,style:{display:"flex","align-items":"center",gap:"8px","margin-top":"calc(var(--margin-top) * 1.35)",padding:"var(--padding)"}},Tt={key:1,width:"20",height:"20",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},Dt=[e.createStaticVNode('<path d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"></path><path d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"></path><path d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"></path><path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"></path><path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"></path>',5)],Ht={style:{display:"flex","align-items":"center",gap:"8px","margin-top":"calc(var(--margin-top) * 1.35)",padding:"var(--padding)"}},Rt=e.createElementVNode("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"3 2 28 28"},[e.createElementVNode("path",{d:"M27.014 2.891l-0.058-0.058c-1.106-1.11-2.911-1.11-4.022 0l-2.515 2.515-0.072-0.072c-0.603-0.603-1.584-0.603-2.216 0.024-0.599 0.603-0.599 1.584 0 2.187l0.072 0.072-8.034 8.039c-1.135 1.13-1.878 2.617-2.1 4.2l-1.217 1.453c-0.483 0.483-0.483 1.265 0 1.743 0.241 0.246 0.565 0.367 0.883 0.367 0.304 0 0.608-0.111 0.826-0.338l1.487-1.241c1.584-0.227 3.071-0.97 4.205-2.1l8.034-8.039 0.072 0.072c0.299 0.299 0.69 0.449 1.086 0.449 0.401 0 0.811-0.159 1.13-0.478 0.29-0.29 0.449-0.676 0.449-1.091s-0.159-0.801-0.449-1.096l-0.072-0.068 2.515-2.515c1.106-1.11 1.106-2.916-0.005-4.027zM13.568 18.997c-1.014 1.014-2.356 1.671-3.78 1.844-0.092 0.014-0.179 0.048-0.251 0.111l-1.622 1.361c-0.106 0.106-0.275 0.106-0.381 0-0.101-0.106-0.101-0.275 0.029-0.41l1.337-1.593c0.058-0.072 0.097-0.159 0.106-0.251 0.174-1.424 0.83-2.766 1.844-3.78l8.039-8.034 2.718 2.718-8.039 8.034z"}),e.createElementVNode("path",{d:"M5.804 24.979c-0.275 0.328-1.651 2.023-1.651 2.998 0 1.115 0.908 2.023 2.018 2.023 1.115 0 2.023-0.908 2.023-2.023 0-0.975-1.376-2.67-1.651-2.998-0.183-0.222-0.555-0.222-0.739 0z"})],-1),Pt={style:{"flex-grow":"1",display:"flex","flex-direction":"column",gap:"calc(var(--margin-top) * 1.85)"}},Xt={id:"ck-cp-target-background"},Ot={key:1,class:"ck-cp-input-container"},Yt={key:3,class:"ck-cp-buttons"},Ut=e.defineComponent({__name:"Vue3ColorPicker",props:{modelValue:{default:"",type:String},mode:{default:"gradient",type:String},type:{default:"HEX8",type:String},inputType:{default:"RGB",type:String},theme:{default:"light",type:String},colorListCount:{default:15,type:Number},showColorList:{default:!0,type:Boolean},showEyeDrop:{default:!0,type:Boolean},showPickerMode:{default:!0,type:Boolean},showAlpha:{default:!0,type:Boolean},showInputMenu:{default:!0,type:Boolean},showInputSet:{default:!0,type:Boolean},disabled:{default:!1,type:Boolean},gradientMode:{default:"linear",type:String},local:{default:{angle:"",positionX:"",positionY:"",solid:"",gradient:"",linear:"",radial:"",colorPalette:"",btnSaveLabel:"Save",btnCancelLabel:"Cancel"},type:Object},iconClasses:{default:{linear:"",radial:"",ruler:"",eyeDroper:"",inputMenu:"",save:"",delete:""},type:Object},showButtons:{type:Boolean,default:!1}},emits:["update:modelValue","onSave","onCancel"],setup(o,{emit:m}){const c=o,s=e.ref(null),r=m,d=e.ref(c.mode),f=e.ref(c.modelValue),h=e.ref(c.modelValue),k=l=>{f.value=l,c.showButtons||(h.value=l,r("update:modelValue",l))},a=e.ref([{id:1,r:68,g:71,b:119,a:100,percent:0,hue:0,select:!0},{id:2,r:0,g:0,b:255,a:100,percent:100,hue:0,select:!1}]),g=e.ref(!1),C=e.ref(c.gradientMode),M=e.reactive({angle:90,percentageX:50,percentageY:50}),P=e.ref(""),E=e.ref(c.inputType),F=e.ref(!1),fe=e.ref(),_=e.ref(),U=e.ref(),R=e.ref(),N=e.ref(),I=e.reactive({h:0,s:0,l:0}),$=e.reactive({h:0,s:0,v:0}),x=e.reactive({c:0,m:0,y:0,k:0});e.provide("gradientBar",_),e.provide("canvas",U),e.provide("pickerWrap",R),e.provide("pickerPointer",N),e.provide("opacitySlider",fe);let W=0,j=0,ke=0,ye=0,q=0,Z=0;const Gt=l=>{if(!R.value||!N.value)return;const t="TouchEvent"in window&&l instanceof TouchEvent,{clientX:n,clientY:i}=t?l.touches[0]:l;q=R.value.offsetHeight-N.value.offsetHeight,Z=R.value.offsetWidth-N.value.offsetWidth,ke=n-l.target.getBoundingClientRect().left,ye=i-l.target.getBoundingClientRect().top,W=ke-N.value.offsetWidth/2,j=ye-N.value.offsetHeight/2,N.value.style.left=`${W}px`,N.value.style.top=`${j}px`,ce(!1),A(),t?(window.addEventListener("touchmove",ee),window.addEventListener("touchend",te)):(window.addEventListener("mousemove",ee),window.addEventListener("mouseup",te))},ee=l=>{l.preventDefault();const t="TouchEvent"in window&&l instanceof TouchEvent,{clientX:n,clientY:i}=t?l.touches[0]:l,u=R.value.getBoundingClientRect(),p=n-u.left-N.value.offsetWidth/2,y=i-u.top-N.value.offsetHeight/2;p>=0&&p<=Z?(W=p,N.value.style.left=`${p}px`):0>p?(W=0,N.value.style.left="0px"):p>Z&&(W=Z,N.value.style.left=`${Z}px`),y>=0&&y<=q?(j=y,N.value.style.top=`${y}px`):0>y?(j=0,N.value.style.top="0px"):y>q&&(j=q,N.value.style.top=`${q}px`),ce(!1),A()},te=l=>{"TouchEvent"in window&&l instanceof TouchEvent?(window.removeEventListener("touchmove",ee),window.removeEventListener("touchend",te)):(window.removeEventListener("mousemove",ee),window.removeEventListener("mouseup",te))},ce=l=>{if(!l){let t=zt();const n=he(X.value,t.s,t.l);if(n){if(F.value){let i=a.value.find(u=>u.select==!0);i&&(i.r=n.r,i.g=n.g,i.b=n.b)}H(),S()}}},X=e.ref(0),ie=async l=>{const{rgb:t}=me(X.value,100,50);Ve(t),setTimeout(()=>{ce(l),A()},0)},zt=()=>{let l={s:0,l:0},t=R.value.offsetWidth-N.value.offsetWidth,n=R.value.offsetHeight-N.value.offsetHeight,i=parseInt(N.value.style.left),p=1-parseInt(N.value.style.top)/n,y=i/t;return l.l=p/2*(2-y),l.s=p*y/(1-Math.abs(2*l.l-1)),Number.isNaN(l.s)&&(l.s=l.l),l.l=l.l>1?1:l.l,l.s=l.s>1?1:l.s,l},K=()=>{const l=a.value.find(t=>t.select==!0);if(l){const{l:t,s:n}=ge(l.r,l.g,l.b);let i=t,u=n;Number.isNaN(u)&&(u=i);let p={x:0,y:0},y=R.value.offsetWidth-N.value.offsetWidth,B=R.value.offsetHeight-N.value.offsetHeight;const[V,b]=2*i-1<0?[y*2*u/(1+u),B*(1-i*(1+u))]:[-y*2*(i-1)*u/(i+u-i*u),B*(i-1)*(u-1)];return p.x=V,p.y=b,p}else return null},At=()=>{const l=a.value.find(t=>t.select==!0);l&&(l.hue=X.value)},z=e.ref(100),Ft=l=>{if(c.showAlpha){const t=l.target,n=a.value.find(i=>i.select==!0);n&&(n.a=parseInt(t.value),S())}},Wt=l=>{var n,i,u,p;const t=(i=(n=s.value)==null?void 0:n.querySelector(".gradient-handle-content"))==null?void 0:i.getBoundingClientRect();return l===0?"0px":l===100&&t?`${(((u=_.value)==null?void 0:u.offsetWidth)||0)-(t.width||0)}px`:`${(((p=_.value)==null?void 0:p.offsetWidth)||0)*(l/100)-((t==null?void 0:t.width)||0)/2}px`};let T=null,D=null;const jt=l=>{var i,u;const n=l.target.offsetParent;if((i=n==null?void 0:n.id)!=null&&i.includes("clr-gb-")){const p=n.id.replace("clr-gb-","");D=n;const y=a.value.find(V=>V.select==!0);if(y&&y.id!=p){const V=(u=s.value)==null?void 0:u.querySelector(".gradient-handle.select");V==null||V.classList.remove("select"),n.classList.add("select");const b=a.value.findIndex(w=>w.select==!0);for(let w=0;w<a.value.length;w++){const v=a.value[w];if(v.id==p){b!=-1&&(a.value[b].select=!1),a.value[w].select=!0,z.value=v.a,O(v.r,v.g,v.b,v.hue,!0),H(),A();break}}}"TouchEvent"in window&&l instanceof TouchEvent?(window.addEventListener("touchmove",ne),window.addEventListener("touchend",le)):(window.addEventListener("mousemove",ne),window.addEventListener("mouseup",le))}},le=l=>{"TouchEvent"in window&&l instanceof TouchEvent?(window.removeEventListener("touchmove",ne),window.removeEventListener("touchend",le)):(window.removeEventListener("mousemove",ne),window.removeEventListener("mouseup",le))},ne=l=>{var B,V;l.preventDefault();const n="TouchEvent"in window&&l instanceof TouchEvent?l.touches[0].clientX:l.clientX,i=(V=(B=s.value)==null?void 0:B.querySelector(".gradient-handle-content"))==null?void 0:V.getBoundingClientRect(),u=T==null?void 0:T.getBoundingClientRect(),p=(u==null?void 0:u.width)-(i==null?void 0:i.width);let y=n-((u==null?void 0:u.left)||0)-((i==null?void 0:i.width)||0)/2;if(y<0?y=0:y>p&&(y=p),D){D.style.left=`${y}px`;const b=parseFloat((y/((u==null?void 0:u.width)-(i==null?void 0:i.width))*100).toFixed(0)),w=a.value.find(v=>v.id==(D==null?void 0:D.id.replace("clr-gb-","")));w&&(w.percent=b),S()}},qt=l=>{var V,b;const t="TouchEvent"in window&&l instanceof TouchEvent,n=T==null?void 0:T.getBoundingClientRect();let i;t?i=Math.round((l.touches[0].clientX-((n==null?void 0:n.left)||0))/((n==null?void 0:n.width)||1)*100):i=Math.round((l.clientX-((n==null?void 0:n.left)||0))/((n==null?void 0:n.width)||1)*100);const u=a.value.findIndex(w=>w.select==!0),p=a.value[u],y={id:Date.now(),r:p.r,g:p.g,b:p.b,a:p.a,percent:i,hue:p.hue,select:!0};a.value[u].select=!1;const B=(V=s.value)==null?void 0:V.querySelector(".gradient-handle.select");B==null||B.classList.remove("select"),a.value=[...a.value,y],we(y),D=(b=s.value)==null?void 0:b.querySelector(`#clr-gb-${y.id}`),S()},Ce=l=>{if(l.r==0&&l.g==0&&l.b==0)return!0;if(l.r==255&&l.g==255&&l.b==255)return!0;{const t=U.value.getContext("2d",{willReadFrequently:!0}),n=U.value.width,i=U.value.height,u=t.getImageData(0,0,n,i).data,p=l.r,y=l.g,B=l.b;for(let V=0;V<i;V++)for(let b=0;b<n;b++){const w=(V*n+b)*4,v=u[w],nl=u[w+1],ol=u[w+2];if(v===p&&nl===y&&ol===B)return!0}return!1}},O=(l,t,n,i,u)=>{setTimeout(()=>{if(Ce({r:l,g:t,b:n})){let p=K();p&&(N.value.style.left=`${p.x}px`,N.value.style.top=`${p.y}px`)}else{let p=K();p&&(N.value.style.left=`${p.x}px`,N.value.style.top=`${p.y}px`),X.value=i,ie(u)}},0)},be=()=>{a.value.forEach(n=>we(n)),Zt();const l=a.value[0];X.value=l.hue,ie(!0);let t=K();t&&(N.value.style.left=`${t.x}px`,N.value.style.top=`${t.y}px`),H(),S()},we=l=>{if(d.value=="gradient"){let t=document.createElement("div");t.id=`clr-gb-${l.id}`,t.classList.add("gradient-handle"),t.style.left=Wt(l.percent);let n=document.createElement("div");n.classList.add("gradient-handle-content"),l.select==!0&&t.classList.add("select"),t.appendChild(n),T&&T.appendChild(t)}},Ve=l=>{const t=U.value.getContext("2d",{willReadFrequently:!0}),n=U.value.width,i=U.value.height;t.fillStyle=`rgb(${l[0]},${l[1]},${l[2]})`,t.fillRect(0,0,n,i);let u=t.createLinearGradient(0,0,n-12,0);u.addColorStop(0,"rgb(255,255,255)"),u.addColorStop(1,"rgba(255,255,255,0)"),t.fillStyle=u,t.fillRect(0,0,n,i);let p=t.createLinearGradient(0,0,0,i);p.addColorStop(0,"rgba(0,0,0,0)"),p.addColorStop(1,"rgb(0,0,0)"),t.fillStyle=p,t.fillRect(0,0,n,i)},H=()=>{if(c.showAlpha){let l=a.value.find(t=>t.select==!0);l&&(fe.value.style.background=` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${l.r}, ${l.g}, ${l.b}, 100) 97%)`)}},S=()=>{var l;if(d.value=="gradient"){a.value.sort((u,p)=>u.percent-p.percent);let t="linear-gradient(90deg, ",n;if(C.value=="linear"){n=`linear-gradient(${M.angle}deg, `;for(let u=0;u<a.value.length;u++){const{r:p,g:y,b:B,a:V,percent:b}=a.value[u];a.value.length-1==u?(t=t+`rgba(${p},${y},${B},${V/100}) ${b}%)`,n=n+`rgba(${p},${y},${B},${V/100}) ${b}%)`):(t=t+`rgba(${p},${y},${B},${V/100}) ${b}%, `,n=n+`rgba(${p},${y},${B},${V/100}) ${b}%, `)}}else{n=`radial-gradient(circle at ${M.percentageX}% ${M.percentageY}%, `;for(let u=0;u<a.value.length;u++){const{r:p,g:y,b:B,a:V,percent:b}=a.value[u];a.value.length-1==u?(t=t+`rgba(${p},${y},${B},${V/100}) ${b}%)`,n=n+`rgba(${p},${y},${B},${V/100}) ${b}%)`):(t=t+`rgba(${p},${y},${B},${V/100}) ${b}%, `,n=n+`rgba(${p},${y},${B},${V/100}) ${b}%, `)}}_.value.style.backgroundImage=t;let i=(l=s.value)==null?void 0:l.querySelector("#ck-cp-target-background");i&&(i.style.backgroundImage=n,F.value&&k(i.style.backgroundImage))}else{const{r:t,g:n,b:i,a:u}=a.value[0];let p="";switch(c.type){case"HEX8":p=pt(t,n,i,u/100);break;case"RGBA":p=`rgba(${t},${n},${i},${u/100})`;break;case"RGB":p=`rgb(${t},${n},${i})`;break;case"HEX":p=re(t,n,i);break}F.value&&k(p)}},Zt=()=>{a.value.forEach(l=>{l.hue=G(l.r,l.g,l.b)})},Kt=l=>{C.value=l,S()},Be=()=>{var l,t;if(a.value.length>2){const n=a.value.findIndex(i=>i.select==!0);if(n!==-1){const i=a.value[n].id;a.value.splice(n,1);const u=(l=s.value)==null?void 0:l.querySelector(`#clr-gb-${i}`);u==null||u.remove();const p=a.value[0];p&&(p.select=!0,D=(t=s.value)==null?void 0:t.querySelector(`#clr-gb-${p.id}`),D==null||D.classList.add("select"),O(p.r,p.g,p.b,p.hue,!1),A(),S())}}},de=()=>{var n;const l=(n=s.value)==null?void 0:n.querySelector("#cp-btn-eyedropper");l==null||l.classList.add("active"),new EyeDropper().open().then(i=>{const{sRGBHex:u}=i,p=a.value.find(B=>B.select==!0),y=Q(u);if(y){const B=G(y.r,y.g,y.b);if(p&&(p.hue=B,p.r=y.r,p.g=y.g,p.b=y.b),Ce(y)){const V=K();V&&(N.value.style.left=`${V.x}px`,N.value.style.top=`${V.y}px`)}else{X.value=B;const{rgb:V}=me(B,100,50);Ve(V);const b=K();b&&(N.value.style.left=`${b.x}px`,N.value.style.top=`${b.y}px`)}A(),H(),S(),l==null||l.classList.remove("active")}}).catch(()=>{l==null||l.classList.remove("active")})},oe=(l,t)=>{if(t!="a"){const n=a.value.find(i=>i.select==!0);if(n){const i=G(n.r,n.g,n.b);n.hue=i,O(n.r,n.g,n.b,n.hue,!0),S(),H()}}else z.value=l,S(),H()},ue=()=>{const l=a.value.find(t=>t.select==!0);if(l&&!Number.isNaN(I.h)&&!Number.isNaN(I.s)&&!Number.isNaN(I.l)){const{r:t,g:n,b:i}=he(I.h,I.s/100,I.l/100);l.hue=I.h,l.r=t,l.g=n,l.b=i,O(l.r,l.g,l.b,l.hue,!0),S(),H()}},pe=()=>{const l=a.value.find(t=>t.select==!0);if(l&&!Number.isNaN($.h)&&!Number.isNaN($.s)&&!Number.isNaN($.v)){const{r:t,g:n,b:i}=gt($.h,$.s/100,$.v/100),{h:u}=ft($.h,$.s/100,$.v/100);l.hue=u,l.r=t,l.g=n,l.b=i,O(l.r,l.g,l.b,l.hue,!0),S(),H()}},ae=()=>{const l=a.value.find(t=>t.select==!0);if(l&&!Number.isNaN(x.c)&&!Number.isNaN(x.m)&&!Number.isNaN(x.y)&&!Number.isNaN(x.k)){const{r:t,g:n,b:i}=kt(x.c/100,x.m/100,x.y/100,x.k/100),u=G(t,n,i);l.hue=u,l.r=t,l.g=n,l.b=i,O(l.r,l.g,l.b,l.hue,!0),S(),H()}},Jt=()=>{if(P.value){const l=Q(P.value);if(l){const t=G(l.r,l.g,l.b),n=a.value.find(i=>i.select==!0);n&&(n.r=l.r,n.g=l.g,n.b=l.b,n.hue=t,O(l.r,l.g,l.b,n.hue,!0),S(),H(),J(E.value))}}},A=()=>{const l=a.value.find(t=>t.select==!0);l&&(P.value=re(l.r,l.g,l.b).toUpperCase()),J(E.value)},Qt=l=>{P.value=l;let t=Q(P.value);if(t){const n=G(t.r,t.g,t.b),i=a.value.find(u=>u.select==!0);i&&(i.r=t.r,i.g=t.g,i.b=t.b,i.hue=n,O(t.r,t.g,t.b,i.hue,!0),S(),H())}};window.EyeDropper&&(g.value=!0);const _t=(l="")=>{if(d.value=="gradient"){let t=l?l.includes("linear-gradient")?"linear":"radial":c.gradientMode,n=[];if(C.value=t,t=="linear"){let i=/^linear-gradient\((.*)\)$/,u=l.replace(";","").trim().match(i),p=/,\s*(?![^()]*\))/;if(l.includes("deg")||(M.angle=180),u){let y=u[1].split(p);for(let B=0;B<y.length;B++){const V=y[B];let b={id:B,r:0,g:0,b:0,a:100,percent:100,hue:0,select:!1};if(V.includes("deg"))M.angle=parseInt(V.replace("deg",""));else if(V.includes("rgba")){let w=V.trim().replace(/rgba|\(|\)|%/g,"").replace(/,/g," ").split(" ");w=w.filter(v=>v.trim()!==""),b.r=parseInt(w[0]),b.g=parseInt(w[1]),b.b=parseInt(w[2]),b.a=parseFloat(w[3])*100,b.percent=parseInt(w[4]),n.push(b)}else if(V.includes("rgb")){let w=V.trim().replace(/rgb|\(|\)|%/g,"").replace(/,/g," ").split(" ");w=w.filter(v=>v.trim()!==""),b.r=parseInt(w[0]),b.g=parseInt(w[1]),b.b=parseInt(w[2]),b.percent=parseInt(w[3]),n.push(b)}}}}else{let i=/^radial-gradient\((.*)\)$/,u=l.replace(";","").trim().match(i),p=/,\s*(?![^()]*\))/;if(u){let y=u[1].split(p);for(let B=0;B<y.length;B++){const V=y[B];let b={id:B,r:0,g:0,b:0,a:100,percent:100,hue:0,select:!1};if(V.includes("circle at")){let w=V.replace("circle at ","").replace(" ","").replace(/%/g," ").trim().split(" ");M.percentageX=parseInt(w[0]),M.percentageY=parseInt(w[1])}else if(V.includes("rgba")){let w=V.replace(/rgba|\(|\)|%/g,"").replace(/,/g," ").split(" ");w=w.filter(v=>v.trim()!==""),b.r=parseInt(w[0]),b.g=parseInt(w[1]),b.b=parseInt(w[2]),b.a=parseFloat(w[3])*100,b.percent=parseInt(w[4]),n.push(b)}else if(V.includes("rgb")){let w=V.replace(/rgb|\(|\)|%/g,"").replace(/,/g," ").split(" ");w=w.filter(v=>v.trim()!==""),b.r=parseInt(w[0]),b.g=parseInt(w[1]),b.b=parseInt(w[2]),b.percent=parseInt(w[3]),n.push(b)}}}}n.length>1&&(a.value=n,a.value[0].select=!0,z.value=a.value[0].a)}else if(l){let t={r:0,g:0,b:0,a:0};if(l.includes("#"))if(l.length>=8)t=ut(l);else{let n=Q(l);n?(t.a=1,t.r=n.r,t.g=n.g,t.b=n.b):t=null}else if(l.includes("rgb"))if(l.includes("rgba"))t=dt(l);else{let n=it(l);n?(t.a=1,t.r=n.r,t.g=n.g,t.b=n.b):t=null}t&&(a.value[0].r=t.r,a.value[0].b=t.b,a.value[0].g=t.g,a.value[0].a=parseInt((t.a*100).toFixed(0)),z.value=a.value[0].a,a.value[0].hue=0)}},J=l=>{const t=a.value.find(n=>n.select==!0);if(t){switch(l){case"RGB":break;case"HSL":{const{h:n,s:i,l:u}=ge(t.r,t.g,t.b);I.h=Math.round(n),I.s=Math.round(i*100),I.l=Math.round(u*100);break}case"HSV":{const{h:n,s:i,v:u}=ht(t.r,t.g,t.b);$.h=Math.round(n),$.s=Math.round(i*100),$.v=Math.round(u*100);break}case"CMYK":{const{c:n,m:i,y:u,k:p}=yt(t.r,t.g,t.b);x.c=Math.round(n*100),x.m=Math.round(i*100),x.y=Math.round(u*100),x.k=Math.round(p*100)}break}E.value=l}},el=l=>{d.value=l,setTimeout(()=>{var t;d.value=="gradient"&&(T=(t=s.value)==null?void 0:t.querySelector(".gradient-bar")),se(c.modelValue),J(E.value)},0)},se=l=>{l&&_t(l),be()},tl=()=>{h.value=f.value,r("update:modelValue",h.value),r("onSave",h.value)},Ne=()=>{a.value.forEach(l=>{const t=T==null?void 0:T.querySelector(`#clr-gb-${l.id}`);t==null||t.remove()})},ll=()=>{f.value=h.value,Ne(),se(f.value),r("onCancel",f.value)};return e.watch(()=>c.modelValue,(l,t)=>{l!==t&&l!==h.value&&(Ne(),se(l))}),e.onMounted(()=>{var l;d.value=="gradient"&&(T=(l=s.value)==null?void 0:l.querySelector(".gradient-bar")),se(c.modelValue),J(E.value),F.value=!0}),(l,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["ck-cp-container",o.disabled?"ck-cp-disabled ":""]),ref_key:"pickerTemplateRef",ref:s,"cp-theme":o.theme},[e.createVNode(Ae,{angle:M.angle,"onUpdate:angle":t[0]||(t[0]=n=>M.angle=n),percentageX:M.percentageX,"onUpdate:percentageX":t[1]||(t[1]=n=>M.percentageX=n),percentageY:M.percentageY,"onUpdate:percentageY":t[2]||(t[2]=n=>M.percentageY=n),local:o.local,iconClasses:o.iconClasses,inputType:E.value,mode:d.value,showInputMenu:o.showInputMenu,gradientType:C.value,showPickerMode:o.showPickerMode,onOnChangeMode:Kt,onOnInput:S,onOnClickEyeDropper:de,onOnDeleteColor:Be,onOnChangeInputType:J,onOnPickerChangeMode:el},null,8,["angle","percentageX","percentageY","local","iconClasses","inputType","mode","showInputMenu","gradientType","showPickerMode"]),e.createVNode(Ze,{onOnEventStart:Gt}),d.value=="gradient"?(e.openBlock(),e.createElementBlock("div",Lt,[e.createElementVNode("button",{type:"button",class:"cp-main-btn",onClick:Be},[o.iconClasses.delete?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.delete)},null,2)):(e.openBlock(),e.createElementBlock("svg",Tt,Dt))]),e.createVNode(je,{onOnAddColor:qt,onOnMouseDown:jt})])):e.createCommentVNode("",!0),e.createElementVNode("div",Ht,[g.value&&o.showEyeDrop?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",id:"cp-btn-eyedropper",class:"cp-main-btn",onClick:de},[o.iconClasses.eyeDroper?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(o.iconClasses.eyeDroper)},null,2)):e.createCommentVNode("",!0),Rt])):e.createCommentVNode("",!0),e.createElementVNode("div",Pt,[e.createVNode(Qe,{modelValue:X.value,"onUpdate:modelValue":t[3]||(t[3]=n=>X.value=n),showEyeDrop:o.showEyeDrop,isEyeDropperUsing:g.value,onOnInput:t[4]||(t[4]=n=>ie(!1)),onOnChange:At,onOnClickEyeDropper:de},null,8,["modelValue","showEyeDrop","isEyeDropperUsing"]),o.showAlpha?(e.openBlock(),e.createBlock(tt,{key:0,modelValue:z.value,"onUpdate:modelValue":t[5]||(t[5]=n=>z.value=n),onOnInput:Ft},null,8,["modelValue"])):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",Xt,null,512),[[e.vShow,!1]]),F.value&&o.showInputSet?(e.openBlock(),e.createElementBlock("div",Ot,[E.value!=="CMYK"?(e.openBlock(),e.createBlock(ct,{key:0,modelValue:P.value,"onUpdate:modelValue":[t[6]||(t[6]=n=>P.value=n),Jt]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:1,label:"R",min:0,max:255,modelValue:a.value.find(n=>n.select==!0).r,"onUpdate:modelValue":[t[7]||(t[7]=n=>a.value.find(i=>i.select==!0).r=n),t[8]||(t[8]=n=>oe(n,"r"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:2,label:"G",min:0,max:255,modelValue:a.value.find(n=>n.select==!0).g,"onUpdate:modelValue":[t[9]||(t[9]=n=>a.value.find(i=>i.select==!0).g=n),t[10]||(t[10]=n=>oe(n,"g"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:3,label:"B",min:0,max:255,modelValue:a.value.find(n=>n.select==!0).b,"onUpdate:modelValue":[t[11]||(t[11]=n=>a.value.find(i=>i.select==!0).b=n),t[12]||(t[12]=n=>oe(n,"b"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:4,label:"H",min:0,max:360,modelValue:I.h,"onUpdate:modelValue":[t[13]||(t[13]=n=>I.h=n),ue]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:5,label:"S",min:0,max:100,modelValue:I.s,"onUpdate:modelValue":[t[14]||(t[14]=n=>I.s=n),ue]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:6,label:"L",min:0,max:100,modelValue:I.l,"onUpdate:modelValue":[t[15]||(t[15]=n=>I.l=n),ue]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:7,label:"H",min:0,max:360,modelValue:$.h,"onUpdate:modelValue":[t[16]||(t[16]=n=>$.h=n),pe]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:8,label:"S",min:0,max:100,modelValue:$.s,"onUpdate:modelValue":[t[17]||(t[17]=n=>$.s=n),pe]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:9,label:"V",min:0,max:100,modelValue:$.v,"onUpdate:modelValue":[t[18]||(t[18]=n=>$.v=n),pe]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:10,label:"C",min:0,max:100,modelValue:x.c,"onUpdate:modelValue":[t[19]||(t[19]=n=>x.c=n),ae]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:11,label:"M",min:0,max:100,modelValue:x.m,"onUpdate:modelValue":[t[20]||(t[20]=n=>x.m=n),ae]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:12,label:"Y",min:0,max:100,modelValue:x.y,"onUpdate:modelValue":[t[21]||(t[21]=n=>x.y=n),ae]},null,8,["modelValue"])):e.createCommentVNode("",!0),E.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:13,label:"K",min:0,max:100,modelValue:x.k,"onUpdate:modelValue":[t[22]||(t[22]=n=>x.k=n),ae]},null,8,["modelValue"])):e.createCommentVNode("",!0),o.showAlpha?(e.openBlock(),e.createBlock(L,{key:14,label:"A",min:0,max:100,style:{"margin-right":"2px"},modelValue:a.value.find(n=>n.select==!0).a,"onUpdate:modelValue":[t[23]||(t[23]=n=>a.value.find(i=>i.select==!0).a=n),t[24]||(t[24]=n=>oe(n,"a"))]},null,8,["modelValue"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),o.showColorList?(e.openBlock(),e.createBlock(It,{key:2,"color-list-count":o.colorListCount,"hex-val":P.value,onColorItemClick:Qt,iconClasses:o.iconClasses,title:o.local.colorPalette},null,8,["color-list-count","hex-val","iconClasses","title"])):e.createCommentVNode("",!0),o.showButtons?(e.openBlock(),e.createElementBlock("div",Yt,[e.createElementVNode("button",{class:"ck-cp-buttons__button ck-cp-buttons__button--save",type:"button",onClick:tl},e.toDisplayString(o.local.btnSaveLabel),1),e.createElementVNode("button",{class:"ck-cp-buttons__button ck-cp-buttons__button--cancel",type:"button",onClick:ll},e.toDisplayString(o.local.btnCancelLabel),1)])):e.createCommentVNode("",!0)],10,St))}});Y.Vue3ColorPicker=Ut,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});