@cyhnkckali/vue3-color-picker
Version:
A color picker component library
2 lines (1 loc) • 47.6 kB
JavaScript
(function(X,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(X=typeof globalThis<"u"?globalThis:X||self,e(X.Vue3ColorPicker={},X.Vue))})(this,(function(X,e){"use strict";const Ie={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},Se=e.defineComponent({__name:"ColorInputMenu",props:{iconClass:{default:"",type:String},inputType:{default:"RGB",type:String}},emits:["onChangeInputName"],setup(a,{emit:u}){const c=a,r=e.ref(c.inputType),s=["CMYK","HSL","HSV","RGB"],d=u,g=()=>{const f=s.findIndex(o=>o==r.value),C=s[f+1]?s[f+1]:s[0];r.value=C,d("onChangeInputName",C)};return(f,C)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:"cp-btn",onClick:g},[e.createTextVNode(e.toDisplayString(r.value)+" ",1),a.iconClass?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClass)},null,2)):(e.openBlock(),e.createElementBlock("svg",Ie,[...C[0]||(C[0]=[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={class:"ck-cp-menu"},Te={class:"ck-cp-controller-bar",style:{display:"flex","justify-content":"end",position:"relative","flex-grow":"1"}},De={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},He={key:1,width:"16",height:"16",viewBox:"-12 -4 32 32",xmlns:"http://www.w3.org/2000/svg"},Re={key:1,width:"15",height:"28",viewBox:"0 -3 36 36",xmlns:"http://www.w3.org/2000/svg"},Pe={key:0,class:"ck-cp-linear-angle-container"},Oe={class:"ck-gradient-set-label",style:{"margin-top":"0"}},Xe=["value"],Ye={key:1,class:"ck-cp-linear-angle-container"},Ue={class:"ck-gradient-set-label",style:{"margin-top":"0"}},Ge=["value"],ze={class:"ck-gradient-set-label"},Ae=["value"],Fe=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(a,{emit:u}){const c=a,r=e.ref(!1),s=u,d=(o,p)=>{switch(p){case"angle":s("update:angle",parseInt(o.target.value)),s("onInput");break;case"percentageX":s("update:percentageX",parseInt(o.target.value)),s("onInput");break;case"percentageY":s("update:percentageY",parseInt(o.target.value)),s("onInput");break}},g=o=>{s("onChangeInputType",o)},f=()=>{s("onChangeMode",c.gradientType=="linear"?"radial":"linear")},C=()=>{s("onPickerChangeMode",c.mode=="gradient"?"solid":"gradient")};return(o,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",Le,[e.createElementVNode("div",Te,[a.showPickerMode?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cp-btn",onClick:C,style:{"margin-bottom":"var(--margin-top)"}},[e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(a.local.gradient?a.local.gradient:"Gradient"),513),[[e.vShow,a.mode=="gradient"]]),e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(a.local.solid?a.local.solid:"Solid"),513),[[e.vShow,a.mode=="solid"]]),a.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",De,[...p[4]||(p[4]=[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.createCommentVNode("",!0),a.mode=="gradient"?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"cp-btn",style:{"margin-bottom":"var(--margin-top)"},onClick:f},[e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(a.local.linear?a.local.linear:"Linear"),513),[[e.vShow,a.gradientType=="linear"]]),e.withDirectives(e.createElementVNode("span",null,e.toDisplayString(a.local.radial?a.local.radial:"Radial"),513),[[e.vShow,a.gradientType=="radial"]]),a.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",He,[...p[5]||(p[5]=[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.createCommentVNode("",!0),a.showInputMenu?(e.openBlock(),e.createBlock(Se,{key:2,style:{"margin-bottom":"var(--margin-top)"},iconClass:a.iconClasses.arrowDown,inputType:a.inputType,onOnChangeInputName:g},null,8,["iconClass","inputType"])):e.createCommentVNode("",!0),a.mode=="gradient"?(e.openBlock(),e.createElementBlock("button",{key:3,type:"button",class:"cp-btn",style:{"margin-bottom":"var(--margin-top)"},onClick:p[0]||(p[0]=h=>r.value=!r.value)},[a.iconClasses.ruler?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.ruler)},null,2)):(e.openBlock(),e.createElementBlock("svg",Re,[...p[6]||(p[6]=[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)])]))])):e.createCommentVNode("",!0)])]),a.mode=="gradient"?e.withDirectives((e.openBlock(),e.createElementBlock("div",Pe,[e.createElementVNode("div",null,[e.createElementVNode("p",Oe,[e.createTextVNode(e.toDisplayString(a.local.angle?a.local.angle:"Angle")+" ",1),e.createElementVNode("span",null,e.toDisplayString(a.angle)+"°",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"360",value:a.angle,onInput:p[1]||(p[1]=h=>d(h,"angle"))},null,40,Xe)])],512)),[[e.vShow,a.gradientType=="linear"&&r.value]]):e.createCommentVNode("",!0),a.mode=="gradient"&&r.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",Ye,[e.createElementVNode("div",null,[e.createElementVNode("p",Ue,[e.createTextVNode(e.toDisplayString(a.local.positionX?a.local.positionX:"Position X")+" ",1),e.createElementVNode("span",null,e.toDisplayString(a.percentageX)+"%",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"100",value:a.percentageX,onInput:p[2]||(p[2]=h=>d(h,"percentageX"))},null,40,Ge)]),e.createElementVNode("div",null,[e.createElementVNode("p",ze,[e.createTextVNode(e.toDisplayString(a.local.positionY?a.local.positionY:"Position Y")+" ",1),e.createElementVNode("span",null,e.toDisplayString(a.percentageY)+"%",1)]),e.createElementVNode("input",{type:"range",min:"0",max:"100",value:a.percentageY,onInput:p[3]||(p[3]=h=>d(h,"percentageY"))},null,40,Ae)])],512)),[[e.vShow,a.gradientType=="radial"]]):e.createCommentVNode("",!0)],64))}}),We=300,qe=e.defineComponent({__name:"GradientBar",emits:["onAddColor","onMouseDown"],setup(a,{emit:u}){const c=e.inject("gradientBar"),r=u,s=f=>{f.preventDefault()};let d=0;const g=f=>{f.preventDefault();const C=new Date().getTime(),o=C-d;o<We&&o>0&&r("onAddColor",f),d=C};return(f,C)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient-bar",onMousedown:C[1]||(C[1]=o=>f.$emit("onMouseDown",o)),onTouchstart:C[2]||(C[2]=o=>f.$emit("onMouseDown",o)),onDragstart:s},[e.createElementVNode("div",{ref_key:"gradientBar",ref:c,class:"gradient-container",onDblclick:C[0]||(C[0]=o=>f.$emit("onAddColor",o)),onTouchstart:e.withModifiers(g,["self"])},null,544)],32))}}),je=e.defineComponent({__name:"PickerWrap",emits:["onEventStart"],setup(a){const u=e.inject("canvas"),c=e.inject("pickerWrap"),r=e.inject("pickerPointer"),s=d=>{d.preventDefault()};return(d,g)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerWrap",ref:c,class:"cp-picker-wrap",onMousedown:g[0]||(g[0]=f=>d.$emit("onEventStart",f)),onTouchstart:g[1]||(g[1]=f=>{f.preventDefault(),d.$emit("onEventStart",f)}),onDragstart:s},[e.createElementVNode("canvas",{ref_key:"canvas",ref:u,class:"colour-area"},null,512),g[2]||(g[2]=e.createElementVNode("div",{class:"colour-area-mask"},null,-1)),e.createElementVNode("div",{ref_key:"pickerPointer",ref:r,class:"colour-area-point-circle"},null,512)],544))}}),Ze={class:"picker-hue"},Ke=["value"],Je=e.defineComponent({__name:"PickerHue",props:{modelValue:{default:0,type:Number}},emits:["update:modelValue","onInput","onChange"],setup(a,{emit:u}){const c=u,r=s=>{c("update:modelValue",parseFloat(s.target.value)),c("onInput",s)};return(s,d)=>(e.openBlock(),e.createElementBlock("div",Ze,[e.createElementVNode("input",{value:a.modelValue,class:"picker-hue-range-slider",type:"range",min:"0",max:"360",step:"0.1",onInput:r,onChange:d[0]||(d[0]=g=>s.$emit("onChange",g))},null,40,Ke)]))}}),Qe={class:"opacity-bar"},_e=["value"],et=e.defineComponent({__name:"OpacityBar",props:{modelValue:{default:0,type:Number}},emits:["update:modelValue","onInput"],setup(a,{emit:u}){const c=e.inject("opacitySlider"),r=u,s=d=>{r("update:modelValue",parseInt(d.target.value)),r("onInput",d)};return(d,g)=>(e.openBlock(),e.createElementBlock("div",Qe,[e.createElementVNode("input",{ref_key:"opacitySlider",ref:c,value:a.modelValue,class:"opacity_slider",type:"range",min:"0",max:"100",onInput:s},null,40,_e)]))}}),tt={class:"ck-cp-input-content"},nt={class:"ck-cp-input-label"},lt=["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(a,{emit:u}){const c=a,r=u,s=e.ref(c.modelValue);e.watch(()=>c.modelValue,(o,p)=>{o!==p&&(s.value=o)},{immediate:!0});const d=o=>{const p=x=>{s.value=x,r("update:modelValue",x)},h=o.target.value;if(!h)return p(c.modelValue);if(parseInt(h)>c.max)return p(c.max);r("update:modelValue",parseInt(h))},g=o=>{s.value=o.target.value},f=o=>{if(["KeyE","Equal","Equal","Backslash","Slash","NumpadDecimal","NumpadAdd"].includes(o.code))return o.preventDefault();o.code==="Enter"&&d(o)},C=d;return(o,p)=>(e.openBlock(),e.createElementBlock("div",tt,[e.createElementVNode("span",nt,e.toDisplayString(a.label),1),e.createElementVNode("input",{type:"number",min:a.min,max:a.max,value:s.value,onInput:g,onKeydown:f,onFocusout:p[0]||(p[0]=(...h)=>e.unref(C)&&e.unref(C)(...h))},null,40,lt)]))}}),at={class:"ck-cp-input-content color-hex"},ot=["value"],rt=e.defineComponent({__name:"InputHex",props:{modelValue:{}},emits:["update:modelValue"],setup(a,{emit:u}){const c=a,r=u,s=e.ref(""),d=o=>{const p=o.target.value;s.value=p,s.value=`#${p.replace(/#/g,"")}`},g=o=>{const p=o.target.value;if(p===c.modelValue)return;if(!/^#[0-9a-fA-F]+$/.test(p)){s.value=c.modelValue;return}let h=p.replace(/#/g,"");switch(h.length){case 0:h=c.modelValue.replace("#","");break;case 1:case 2:h=h.repeat(3);break;case 4:case 5:h=h.slice(0,3);break;case 3:case 6:break;default:h=h.slice(0,6)}s.value=`#${h.toUpperCase()}`,r("update:modelValue",s.value)},f=o=>{o.code==="Enter"&&g(o)},C=g;return e.watch(()=>c.modelValue,(o,p)=>{o!==p&&(s.value=o)},{immediate:!0}),(o,p)=>(e.openBlock(),e.createElementBlock("div",at,[p[1]||(p[1]=e.createElementVNode("span",{class:"ck-cp-input-label"},"HEX",-1)),e.createElementVNode("input",{type:"text",value:s.value,onInput:d,onKeydown:f,onFocusout:p[0]||(p[0]=(...h)=>e.unref(C)&&e.unref(C)(...h))},null,40,ot)]))}}),st=a=>{const u=/^rgb\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)\)$/i;if(!u.test(a))return null;const c=u.exec(a);if(!c)return null;const r=parseInt(c[1].trim(),10),s=parseInt(c[2].trim(),10),d=parseInt(c[3].trim(),10);return{r,g:s,b:d}},ct=a=>{const u=/^rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*),(\s*[\d.]+\s*)\)$/i;if(!u.test(a))return null;const c=u.exec(a);if(!c)return null;const r=parseInt(c[1].trim(),10),s=parseInt(c[2].trim(),10),d=parseInt(c[3].trim(),10),g=parseFloat(c[4].trim());return{r,g:s,b:d,a:g}},it=a=>{const u=/^#?([a-f\d]{8})$/i;if(!u.test(a))return null;const c=u.exec(a);if(!c)return null;const r=c[1],s=r.substring(6,8),d=parseInt(r.substring(0,2),16),g=parseInt(r.substring(2,4),16),f=parseInt(r.substring(4,6),16),C=parseInt(s,16)/255;return{r:d,g,b:f,a:C}},dt=(a,u,c,r)=>{function s(o){const p=o.toString(16);return p.length===1?"0"+p:p}const d=s(Math.round(a)),g=s(Math.round(u)),f=s(Math.round(c)),C=s(Math.round(r*255));return`#${d}${g}${f}${C}`},ee=a=>{try{let u=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(d,g,f,C)=>"#"+g+g+f+f+C+C).substring(1).match(/.{2}/g)?.map(d=>parseInt(d,16)),c=u?.[0],r=u?.[1],s=u?.[2];return Number.isNaN(c)||Number.isNaN(r)||Number.isNaN(s)||c===void 0||r===void 0||s===void 0?null:{r:c,g:r,b:s}}catch{return null}},A=(a,u,c)=>{a=a/255,u=u/255,c=c/255;const r=Math.max(a,u,c),s=Math.min(a,u,c);let d;return r===a?d=(u-c)/(r-s):r===u?d=2+(c-a)/(r-s):d=4+(a-u)/(r-s),d*=60,d<0&&(d+=360),Number.isNaN(d)&&(d=0),d},ut=(a,u,c)=>{u=u/100,c=c/100;let r,s,d,g=[];return r=(1-Math.abs(2*c-1))*u,s=r*(1-Math.abs(a/60%2-1)),d=c-r/2,a>=0&&a<60&&(g=[r,s,0]),a>=60&&a<120&&(g=[s,r,0]),a>=120&&a<180&&(g=[0,r,s]),a>=180&&a<240&&(g=[0,s,r]),a>=240&&a<300&&(g=[s,0,r]),a>=300&&a<=360&&(g=[r,0,s]),g.map(f=>Math.round(255*(f+d)))},ie=(a,u,c)=>"#"+(16777216+(c|u<<8|a<<16)).toString(16).slice(1),he=(a,u,c)=>{let r=ut(a,u,c);return{rgb:r,hexA:ie(r[0],r[1],r[2])}},ke=(a,u,c)=>{const r=a/255,s=u/255,d=c/255,g=Math.max(r,s,d),f=Math.min(r,s,d),C=(g+f)/2;if(g===f)return{h:0,s:0,l:C};const o=g-f,p=C<.5?o/(g+f):o/(2-g-f);let h;switch(g){case r:h=(s-d)/o;break;case s:h=2+(d-r)/o;break;default:h=4+(r-s)/o;break}return h*=60,h<0&&(h+=360),{h,s:p,l:C}},Ce=(a,u,c)=>{a=a%360/360,u=Math.min(1,Math.max(0,u)),c=Math.min(1,Math.max(0,c));let r,s,d;if(u===0)r=s=d=c;else{const g=(o,p,h)=>(h<0&&(h+=1),h>1&&(h-=1),h<.16666666666666666?o+(p-o)*6*h:h<.5?p:h<.6666666666666666?o+(p-o)*(.6666666666666666-h)*6:o),f=c<.5?c*(1+u):c+u-c*u,C=2*c-f;r=g(C,f,a+1/3),s=g(C,f,a),d=g(C,f,a-1/3)}return r=Math.round(r*255),s=Math.round(s*255),d=Math.round(d*255),{r,g:s,b:d}},mt=(a,u,c)=>{let r=0,s=0,d=0;const g=a/60,f=c*u,C=f*(1-Math.abs(g%2-1)),o=c-f;switch(Math.floor(g)%6){case 0:r=f,s=C,d=0;break;case 1:r=C,s=f,d=0;break;case 2:r=0,s=f,d=C;break;case 3:r=0,s=C,d=f;break;case 4:r=C,s=0,d=f;break;case 5:r=f,s=0,d=C;break}return{r:Math.round((r+o)*255),g:Math.round((s+o)*255),b:Math.round((d+o)*255)}},pt=(a,u,c)=>{a/=255,u/=255,c/=255;const r=Math.max(a,u,c),s=Math.min(a,u,c);let d,g,f=r;const C=r-s;if(r!==0)g=C/r;else return{h:0,s:0,v:0};return C===0?d=0:r===a?d=60*((u-c)/C%6):r===u?d=60*((c-a)/C+2):d=60*((a-u)/C+4),d<0&&(d+=360),{h:Math.round(d),s:Math.round(g*100)/100,v:Math.round(f*100)/100}},gt=(a,u,c)=>{const r=(2-u)*c/2,s=r&&r<1?u*c/(r<.5?r*2:2-r*2):u;return{h:a,s,l:r}},ft=(a,u,c,r)=>{const s=Math.round(255*(1-a)*(1-r)),d=Math.round(255*(1-u)*(1-r)),g=Math.round(255*(1-c)*(1-r));return{r:Math.min(255,Math.max(0,s)),g:Math.min(255,Math.max(0,d)),b:Math.min(255,Math.max(0,g))}},ht=(a,u,c)=>{a=a/255,u=u/255,c=c/255;const r=1-Math.max(a,u,c),s=(1-a-r)/(1-r),d=(1-u-r)/(1-r),g=(1-c-r)/(1-r);return{c:isNaN(s)?0:s,m:isNaN(d)?0:d,y:isNaN(g)?0:g,k:isNaN(r)?0:r}},kt={class:"ck-cp-local-color-conatiner"},Ct={class:"ck-cp-color-list-label"},bt={style:{display:"flex","align-items":"center"}},yt={key:1,width:"32",height:"14",viewBox:"5 -5 32 32",xmlns:"http://www.w3.org/2000/svg"},wt={key:1,width:"18",height:"18",viewBox:"-2 -2 30 30",xmlns:"http://www.w3.org/2000/svg"},Vt={class:"ck-cp-color-list"},Bt=["onClick"],Et={key:1,width:"25",height:"25",viewBox:"2 2 20 20",xmlns:"http://www.w3.org/2000/svg"},Nt=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(a,{emit:u}){const c=a,r=u,s=e.ref([]),d=e.computed(()=>s.value.some(o=>o.selected==!0)),g=()=>{if(!s.value.find(p=>p.color===c.hexVal)){const p=s.value.find(h=>h.selected==!0);if(p)p.color=c.hexVal;else{s.value.length===c.colorListCount&&s.value.pop();let h=c.hexVal;s.value.unshift({color:h,selected:!1})}localStorage.setItem("ck-cp-local-color-list",JSON.stringify(s.value.map(h=>h.color)))}},f=()=>{s.value=s.value.filter(o=>o.selected==!1),localStorage.setItem("ck-cp-local-color-list",JSON.stringify(s.value.map(o=>o.color)))},C=o=>{s.value.forEach(p=>{p.color===o?p.selected=!p.selected:p.selected=!1}),r("color-item-click",o)};return e.onBeforeMount(()=>{let o=localStorage.getItem("ck-cp-local-color-list");if(o){let p=JSON.parse(o);s.value=p.map(h=>({color:h,selected:!1}))}}),(o,p)=>(e.openBlock(),e.createElementBlock("div",kt,[e.createElementVNode("div",Ct,[e.createElementVNode("div",bt,[e.createTextVNode(e.toDisplayString(a.title?a.title:"Color Palette")+" ",1),a.iconClasses.arrowDown?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.arrowDown)},null,2)):(e.openBlock(),e.createElementBlock("svg",yt,[...p[0]||(p[0]=[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)])]))]),d.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cp-main-btn",onClick:f,style:{width:"17.33px",height:"17.33px"}},[a.iconClasses.delete?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.delete)},null,2)):(e.openBlock(),e.createElementBlock("svg",wt,[...p[1]||(p[1]=[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)])]))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",Vt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,h=>(e.openBlock(),e.createElementBlock("div",{key:`color-${h.color}`,class:e.normalizeClass(["ck-cp-color-item",h.selected?"ck-select":""]),style:e.normalizeStyle({backgroundColor:h.color}),onClick:x=>C(h.color)},null,14,Bt))),128)),e.createElementVNode("button",{type:"button",class:"cp-btn-save-color",onClick:g},[a.iconClasses.save?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.save)},null,2)):(e.openBlock(),e.createElementBlock("svg",Et,[...p[2]||(p[2]=[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)])]))])])]))}}),vt=["cp-theme"],Mt={key:0,style:{display:"flex","align-items":"center",gap:"8px","margin-top":"calc(var(--margin-top) * 1.35)",padding:"var(--padding)"}},xt={key:1,width:"20",height:"20",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},$t={style:{display:"flex","align-items":"center",gap:"8px","margin-top":"calc(var(--margin-top) * 1.35)",padding:"var(--padding)"}},It={key:1,version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"3 2 28 28"},St={style:{"flex-grow":"1",display:"flex","flex-direction":"column",gap:"calc(var(--margin-top) * 1.85)"}},Lt={id:"ck-cp-target-background"},Tt={key:1,class:"ck-cp-input-container"},Dt={key:3,class:"ck-cp-buttons"},Ht=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","onChange","onSave","onCancel"],setup(a,{emit:u}){const c=a,r=e.ref(null),s=u,d=e.ref(c.mode),g=e.ref(c.modelValue),f=e.ref(c.modelValue),C=t=>{g.value=t,s("onChange",t),c.showButtons||(f.value=t,s("update:modelValue",t))},o=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}]),p=e.ref(!1),h=e.ref(c.gradientMode),x=e.reactive({angle:90,percentageX:50,percentageY:50}),R=e.ref(""),N=e.ref(c.inputType),J=e.ref(!1),be=e.ref(),te=e.ref(),Y=e.ref(),S=e.ref(),E=e.ref(),$=e.reactive({h:0,s:0,l:0}),M=e.reactive({h:0,s:0,v:0}),v=e.reactive({c:0,m:0,y:0,k:0});e.provide("gradientBar",te),e.provide("canvas",Y),e.provide("pickerWrap",S),e.provide("pickerPointer",E),e.provide("opacitySlider",be);let F=0,W=0,ye=0,we=0,q=0,j=0,D=null,Q=null,de=0;const Rt=t=>{if(!S.value||!E.value)return;const n="TouchEvent"in window&&t instanceof TouchEvent,{clientX:l,clientY:i}=n?t.touches[0]:t;q=S.value.offsetHeight-E.value.offsetHeight,j=S.value.offsetWidth-E.value.offsetWidth,ye=l-t.target.getBoundingClientRect().left,we=i-t.target.getBoundingClientRect().top,F=ye-E.value.offsetWidth/2,W=we-E.value.offsetHeight/2,E.value.style.left=`${F}px`,E.value.style.top=`${W}px`,ue(!1),K(),n?(window.addEventListener("touchmove",ne),window.addEventListener("touchend",le)):(window.addEventListener("mousemove",ne),window.addEventListener("mouseup",le))},ne=t=>{t.preventDefault();const n="TouchEvent"in window&&t instanceof TouchEvent,{clientX:l,clientY:i}=n?t.touches[0]:t,m=S.value.getBoundingClientRect(),k=l-m.left-E.value.offsetWidth/2,b=i-m.top-E.value.offsetHeight/2;k>=0&&k<=j?(F=k,E.value.style.left=`${k}px`):0>k?(F=0,E.value.style.left="0px"):k>j&&(F=j,E.value.style.left=`${j}px`),b>=0&&b<=q?(W=b,E.value.style.top=`${b}px`):0>b?(W=0,E.value.style.top="0px"):b>q&&(W=q,E.value.style.top=`${q}px`),ue(!1),K()},le=t=>{"TouchEvent"in window&&t instanceof TouchEvent?(window.removeEventListener("touchmove",ne),window.removeEventListener("touchend",le)):(window.removeEventListener("mousemove",ne),window.removeEventListener("mouseup",le))},ue=t=>{if(!t){let n=Pt();const l=Ce(P.value,n.s,n.l);if(l){if(J.value){let i=o.value.find(m=>m.select==!0);i&&(i.r=l.r,i.g=l.g,i.b=l.b)}T(),I()}}},P=e.ref(0),me=async t=>{const{rgb:n}=he(P.value,100,50);Ne(n),setTimeout(()=>{ue(t),K()},0)},Pt=()=>{let t={s:0,l:0},n=S.value.offsetWidth-E.value.offsetWidth,l=S.value.offsetHeight-E.value.offsetHeight,i=parseInt(E.value.style.left),k=1-parseInt(E.value.style.top)/l,b=i/n;return t.l=k/2*(2-b),t.s=k*b/(1-Math.abs(2*t.l-1)),Number.isNaN(t.s)&&(t.s=t.l),t.l=t.l>1?1:t.l,t.s=t.s>1?1:t.s,t},Ot=t=>{const n=o.value.find(V=>V.select==!0);if(!n||!S.value||!E.value)return null;const{l,s:i}=ke(n.r,n.g,n.b);let m=l,k=i;Number.isNaN(k)&&(k=m);const b=t?.rightLine??S.value.offsetWidth-E.value.offsetWidth,B=t?.bottomLine??S.value.offsetHeight-E.value.offsetHeight;if(b<=0||B<=0)return null;const[y,w]=2*m-1<0?[b*2*k/(1+k),B*(1-m*(1+k))]:[-b*2*(m-1)*k/(m+k-m*k),B*(m-1)*(k-1)];return{x:y,y:w}},U=()=>{if(!S.value||!E.value)return;const t=S.value.offsetWidth-E.value.offsetWidth,n=S.value.offsetHeight-E.value.offsetHeight;if(t<=0||n<=0){de<5&&D===null&&(de+=1,D=requestAnimationFrame(()=>{D=null,U()}));return}de=0,D!==null&&(cancelAnimationFrame(D),D=null);const l=Ot({rightLine:t,bottomLine:n});if(!l)return;const i=Math.min(Math.max(l.x,0),t),m=Math.min(Math.max(l.y,0),n);E.value.style.left=`${i}px`,E.value.style.top=`${m}px`,F=i,W=m,j=t,q=n},Xt=()=>{const t=o.value.find(n=>n.select==!0);t&&(t.hue=P.value)},Z=e.ref(100),Yt=t=>{if(c.showAlpha){const n=t.target,l=o.value.find(i=>i.select==!0);l&&(l.a=parseInt(n.value),I())}},Ut=t=>{const n=r.value?.querySelector(".gradient-handle-content")?.getBoundingClientRect();return t===0?"0px":t===100&&n?`${(te.value?.offsetWidth||0)-(n.width||0)}px`:`${(te.value?.offsetWidth||0)*(t/100)-(n?.width||0)/2}px`};let G=null,z=null;const Gt=t=>{const l=t.target.offsetParent;if(l?.id?.includes("clr-gb-")){const i=l.id.replace("clr-gb-","");z=l;const m=o.value.find(b=>b.select==!0);if(m&&m.id!=i){r.value?.querySelector(".gradient-handle.select")?.classList.remove("select"),l.classList.add("select");const B=o.value.findIndex(y=>y.select==!0);for(let y=0;y<o.value.length;y++){const w=o.value[y];if(w.id==i){B!=-1&&(o.value[B].select=!1),o.value[y].select=!0,Z.value=w.a,O(w.r,w.g,w.b,w.hue,!0),T(),K();break}}}"TouchEvent"in window&&t instanceof TouchEvent?(window.addEventListener("touchmove",oe),window.addEventListener("touchend",ae)):(window.addEventListener("mousemove",oe),window.addEventListener("mouseup",ae))}},ae=t=>{"TouchEvent"in window&&t instanceof TouchEvent?(window.removeEventListener("touchmove",oe),window.removeEventListener("touchend",ae)):(window.removeEventListener("mousemove",oe),window.removeEventListener("mouseup",ae))},oe=t=>{t.preventDefault();const l="TouchEvent"in window&&t instanceof TouchEvent?t.touches[0].clientX:t.clientX,i=r.value?.querySelector(".gradient-handle-content")?.getBoundingClientRect(),m=G?.getBoundingClientRect(),k=m?.width-i?.width;let b=l-(m?.left||0)-(i?.width||0)/2;if(b<0?b=0:b>k&&(b=k),z){z.style.left=`${b}px`;const B=parseFloat((b/(m?.width-i?.width)*100).toFixed(0)),y=o.value.find(w=>w.id==z?.id.replace("clr-gb-",""));y&&(y.percent=B),I()}},zt=t=>{const n="TouchEvent"in window&&t instanceof TouchEvent,l=G?.getBoundingClientRect();let i;n?i=Math.round((t.touches[0].clientX-(l?.left||0))/(l?.width||1)*100):i=Math.round((t.clientX-(l?.left||0))/(l?.width||1)*100);const m=o.value.findIndex(y=>y.select==!0),k=o.value[m],b={id:Date.now(),r:k.r,g:k.g,b:k.b,a:k.a,percent:i,hue:k.hue,select:!0};o.value[m].select=!1,r.value?.querySelector(".gradient-handle.select")?.classList.remove("select"),o.value=[...o.value,b],Ee(b),z=r.value?.querySelector(`#clr-gb-${b.id}`),I()},Ve=t=>{if(t.r==0&&t.g==0&&t.b==0)return!0;if(t.r==255&&t.g==255&&t.b==255)return!0;{const n=Y.value.getContext("2d",{willReadFrequently:!0}),l=Y.value.width,i=Y.value.height,m=n.getImageData(0,0,l,i).data,k=t.r,b=t.g,B=t.b;for(let y=0;y<i;y++)for(let w=0;w<l;w++){const V=(y*l+w)*4,H=m[V],Kt=m[V+1],Jt=m[V+2];if(H===k&&Kt===b&&Jt===B)return!0}return!1}},O=(t,n,l,i,m)=>{setTimeout(()=>{Ve({r:t,g:n,b:l})||(P.value=i,me(m)),U()},0)},Be=()=>{o.value.forEach(n=>Ee(n)),At();const t=o.value[0];P.value=t.hue,me(!0),U(),T(),I()},Ee=t=>{if(d.value=="gradient"){let n=document.createElement("div");n.id=`clr-gb-${t.id}`,n.classList.add("gradient-handle"),n.style.left=Ut(t.percent);let l=document.createElement("div");l.classList.add("gradient-handle-content"),t.select==!0&&n.classList.add("select"),n.appendChild(l),G&&G.appendChild(n)}},Ne=t=>{const n=Y.value.getContext("2d",{willReadFrequently:!0}),l=Y.value.width,i=Y.value.height;n.fillStyle=`rgb(${t[0]},${t[1]},${t[2]})`,n.fillRect(0,0,l,i);let m=n.createLinearGradient(0,0,l-12,0);m.addColorStop(0,"rgb(255,255,255)"),m.addColorStop(1,"rgba(255,255,255,0)"),n.fillStyle=m,n.fillRect(0,0,l,i);let k=n.createLinearGradient(0,0,0,i);k.addColorStop(0,"rgba(0,0,0,0)"),k.addColorStop(1,"rgb(0,0,0)"),n.fillStyle=k,n.fillRect(0,0,l,i)},T=()=>{if(c.showAlpha){let t=o.value.find(n=>n.select==!0);t&&(be.value.style.background=` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${t.r}, ${t.g}, ${t.b}, 100) 97%)`)}},I=()=>{if(d.value=="gradient"){o.value.sort((i,m)=>i.percent-m.percent);let t="linear-gradient(90deg, ",n;if(h.value=="linear"){n=`linear-gradient(${x.angle}deg, `;for(let i=0;i<o.value.length;i++){const{r:m,g:k,b,a:B,percent:y}=o.value[i];o.value.length-1==i?(t=t+`rgba(${m},${k},${b},${B/100}) ${y}%)`,n=n+`rgba(${m},${k},${b},${B/100}) ${y}%)`):(t=t+`rgba(${m},${k},${b},${B/100}) ${y}%, `,n=n+`rgba(${m},${k},${b},${B/100}) ${y}%, `)}}else{n=`radial-gradient(circle at ${x.percentageX}% ${x.percentageY}%, `;for(let i=0;i<o.value.length;i++){const{r:m,g:k,b,a:B,percent:y}=o.value[i];o.value.length-1==i?(t=t+`rgba(${m},${k},${b},${B/100}) ${y}%)`,n=n+`rgba(${m},${k},${b},${B/100}) ${y}%)`):(t=t+`rgba(${m},${k},${b},${B/100}) ${y}%, `,n=n+`rgba(${m},${k},${b},${B/100}) ${y}%, `)}}te.value.style.backgroundImage=t;let l=r.value?.querySelector("#ck-cp-target-background");l&&(l.style.backgroundImage=n,J.value&&C(l.style.backgroundImage))}else{const{r:t,g:n,b:l,a:i}=o.value[0];let m="";switch(c.type){case"HEX8":m=dt(t,n,l,i/100);break;case"RGBA":m=`rgba(${t},${n},${l},${i/100})`;break;case"RGB":m=`rgb(${t},${n},${l})`;break;case"HEX":m=ie(t,n,l);break}J.value&&C(m)}},At=()=>{o.value.forEach(t=>{t.hue=A(t.r,t.g,t.b)})},Ft=t=>{h.value=t,I()},ve=()=>{if(o.value.length>2){const t=o.value.findIndex(n=>n.select==!0);if(t!==-1){const n=o.value[t].id;o.value.splice(t,1),r.value?.querySelector(`#clr-gb-${n}`)?.remove();const i=o.value[0];i&&(i.select=!0,z=r.value?.querySelector(`#clr-gb-${i.id}`),z?.classList.add("select"),O(i.r,i.g,i.b,i.hue,!1),K(),I())}}},pe=()=>{const t=r.value?.querySelector("#cp-btn-eyedropper");t?.classList.add("active"),new EyeDropper().open().then(l=>{const{sRGBHex:i}=l,m=o.value.find(b=>b.select==!0),k=ee(i);if(k){const b=A(k.r,k.g,k.b);if(m&&(m.hue=b,m.r=k.r,m.g=k.g,m.b=k.b),!Ve(k)){P.value=b;const{rgb:B}=he(b,100,50);Ne(B)}U(),K(),T(),I(),t?.classList.remove("active")}}).catch(()=>{t?.classList.remove("active")})},re=(t,n)=>{if(n!="a"){const l=o.value.find(i=>i.select==!0);if(l){const i=A(l.r,l.g,l.b);l.hue=i,O(l.r,l.g,l.b,l.hue,!0),I(),T()}}else Z.value=t,I(),T()},ge=()=>{const t=o.value.find(n=>n.select==!0);if(t&&!Number.isNaN($.h)&&!Number.isNaN($.s)&&!Number.isNaN($.l)){const{r:n,g:l,b:i}=Ce($.h,$.s/100,$.l/100);t.hue=$.h,t.r=n,t.g=l,t.b=i,O(t.r,t.g,t.b,t.hue,!0),I(),T()}},fe=()=>{const t=o.value.find(n=>n.select==!0);if(t&&!Number.isNaN(M.h)&&!Number.isNaN(M.s)&&!Number.isNaN(M.v)){const{r:n,g:l,b:i}=mt(M.h,M.s/100,M.v/100),{h:m}=gt(M.h,M.s/100,M.v/100);t.hue=m,t.r=n,t.g=l,t.b=i,O(t.r,t.g,t.b,t.hue,!0),I(),T()}},se=()=>{const t=o.value.find(n=>n.select==!0);if(t&&!Number.isNaN(v.c)&&!Number.isNaN(v.m)&&!Number.isNaN(v.y)&&!Number.isNaN(v.k)){const{r:n,g:l,b:i}=ft(v.c/100,v.m/100,v.y/100,v.k/100),m=A(n,l,i);t.hue=m,t.r=n,t.g=l,t.b=i,O(t.r,t.g,t.b,t.hue,!0),I(),T()}},Wt=()=>{if(R.value){const t=ee(R.value);if(t){const n=A(t.r,t.g,t.b),l=o.value.find(i=>i.select==!0);l&&(l.r=t.r,l.g=t.g,l.b=t.b,l.hue=n,O(t.r,t.g,t.b,l.hue,!0),I(),T(),_(N.value))}}},K=()=>{const t=o.value.find(n=>n.select==!0);t&&(R.value=ie(t.r,t.g,t.b).toUpperCase()),_(N.value)},qt=t=>{R.value=t;let n=ee(R.value);if(n){const l=A(n.r,n.g,n.b),i=o.value.find(m=>m.select==!0);i&&(i.r=n.r,i.g=n.g,i.b=n.b,i.hue=l,O(n.r,n.g,n.b,i.hue,!0),I(),T())}};window.EyeDropper&&(p.value=!0);const jt=(t="")=>{if(d.value=="gradient"){let n=t?t.includes("linear-gradient")?"linear":"radial":c.gradientMode,l=[];if(h.value=n,n=="linear"){let i=/^linear-gradient\((.*)\)$/,m=t.replace(";","").trim().match(i),k=/,\s*(?![^()]*\))/;if(t.includes("deg")||(x.angle=180),m){let b=m[1].split(k);for(let B=0;B<b.length;B++){const y=b[B];let w={id:B,r:0,g:0,b:0,a:100,percent:100,hue:0,select:!1};if(y.includes("deg"))x.angle=parseInt(y.replace("deg",""));else if(y.includes("rgba")){let V=y.trim().replace(/rgba|\(|\)|%/g,"").replace(/,/g," ").split(" ");V=V.filter(H=>H.trim()!==""),w.r=parseInt(V[0]),w.g=parseInt(V[1]),w.b=parseInt(V[2]),w.a=parseFloat(V[3])*100,w.percent=parseInt(V[4]),l.push(w)}else if(y.includes("rgb")){let V=y.trim().replace(/rgb|\(|\)|%/g,"").replace(/,/g," ").split(" ");V=V.filter(H=>H.trim()!==""),w.r=parseInt(V[0]),w.g=parseInt(V[1]),w.b=parseInt(V[2]),w.percent=parseInt(V[3]),l.push(w)}}}}else{let i=/^radial-gradient\((.*)\)$/,m=t.replace(";","").trim().match(i),k=/,\s*(?![^()]*\))/;if(m){let b=m[1].split(k);for(let B=0;B<b.length;B++){const y=b[B];let w={id:B,r:0,g:0,b:0,a:100,percent:100,hue:0,select:!1};if(y.includes("circle at")){let V=y.replace("circle at ","").replace(" ","").replace(/%/g," ").trim().split(" ");x.percentageX=parseInt(V[0]),x.percentageY=parseInt(V[1])}else if(y.includes("rgba")){let V=y.replace(/rgba|\(|\)|%/g,"").replace(/,/g," ").split(" ");V=V.filter(H=>H.trim()!==""),w.r=parseInt(V[0]),w.g=parseInt(V[1]),w.b=parseInt(V[2]),w.a=parseFloat(V[3])*100,w.percent=parseInt(V[4]),l.push(w)}else if(y.includes("rgb")){let V=y.replace(/rgb|\(|\)|%/g,"").replace(/,/g," ").split(" ");V=V.filter(H=>H.trim()!==""),w.r=parseInt(V[0]),w.g=parseInt(V[1]),w.b=parseInt(V[2]),w.percent=parseInt(V[3]),l.push(w)}}}}l.length>1&&(o.value=l,o.value[0].select=!0,Z.value=o.value[0].a)}else if(t){let n={r:0,g:0,b:0,a:0};if(t.includes("#"))if(t.length>=8)n=it(t);else{let l=ee(t);l?(n.a=1,n.r=l.r,n.g=l.g,n.b=l.b):n=null}else if(t.includes("rgb"))if(t.includes("rgba"))n=ct(t);else{let l=st(t);l?(n.a=1,n.r=l.r,n.g=l.g,n.b=l.b):n=null}n&&(o.value[0].r=n.r,o.value[0].b=n.b,o.value[0].g=n.g,o.value[0].a=parseInt((n.a*100).toFixed(0)),Z.value=o.value[0].a,o.value[0].hue=0)}},_=t=>{const n=o.value.find(l=>l.select==!0);if(n){switch(t){case"RGB":break;case"HSL":{const{h:l,s:i,l:m}=ke(n.r,n.g,n.b);$.h=Math.round(l),$.s=Math.round(i*100),$.l=Math.round(m*100);break}case"HSV":{const{h:l,s:i,v:m}=pt(n.r,n.g,n.b);M.h=Math.round(l),M.s=Math.round(i*100),M.v=Math.round(m*100);break}case"CMYK":{const{c:l,m:i,y:m,k}=ht(n.r,n.g,n.b);v.c=Math.round(l*100),v.m=Math.round(i*100),v.y=Math.round(m*100),v.k=Math.round(k*100)}break}N.value=t}},Zt=t=>{d.value=t,setTimeout(()=>{d.value=="gradient"&&(G=r.value?.querySelector(".gradient-bar")),ce(c.modelValue),_(N.value)},0)},ce=t=>{t&&jt(t),Be()},Me=()=>{f.value=g.value,s("update:modelValue",f.value),s("onSave",f.value)},xe=()=>{o.value.forEach(t=>{G?.querySelector(`#clr-gb-${t.id}`)?.remove()})},$e=()=>{g.value=f.value,xe(),ce(g.value),s("onCancel",g.value)};return e.watch(()=>c.modelValue,(t,n)=>{t!==n&&t!==f.value&&(xe(),ce(t),U())}),(t=>{t&&(t.includes("linear-gradient")||t.includes("radial-gradient")?d.value="gradient":d.value="solid")})(c.modelValue),e.onMounted(()=>{e.nextTick(()=>{d.value=="gradient"&&(G=r.value?.querySelector(".gradient-bar")),typeof ResizeObserver<"u"&&S.value&&(Q?.disconnect(),Q=new ResizeObserver(()=>{U()}),Q.observe(S.value)),ce(c.modelValue),_(N.value),J.value=!0,U()})}),e.onBeforeUnmount(()=>{D!==null&&(cancelAnimationFrame(D),D=null),Q?.disconnect(),Q=null}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["ck-cp-container",a.disabled?"ck-cp-disabled ":""]),ref_key:"pickerTemplateRef",ref:r,"cp-theme":a.theme},[e.createVNode(Fe,{angle:x.angle,"onUpdate:angle":n[0]||(n[0]=l=>x.angle=l),percentageX:x.percentageX,"onUpdate:percentageX":n[1]||(n[1]=l=>x.percentageX=l),percentageY:x.percentageY,"onUpdate:percentageY":n[2]||(n[2]=l=>x.percentageY=l),local:a.local,iconClasses:a.iconClasses,inputType:N.value,mode:d.value,showInputMenu:a.showInputMenu,gradientType:h.value,showPickerMode:a.showPickerMode,onOnChangeMode:Ft,onOnInput:I,onOnClickEyeDropper:pe,onOnDeleteColor:ve,onOnChangeInputType:_,onOnPickerChangeMode:Zt},null,8,["angle","percentageX","percentageY","local","iconClasses","inputType","mode","showInputMenu","gradientType","showPickerMode"]),e.createVNode(je,{onOnEventStart:Rt}),d.value=="gradient"?(e.openBlock(),e.createElementBlock("div",Mt,[e.createElementVNode("button",{type:"button",class:"cp-main-btn",onClick:ve},[a.iconClasses.delete?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.delete)},null,2)):(e.openBlock(),e.createElementBlock("svg",xt,[...n[25]||(n[25]=[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)])]))]),e.createVNode(qe,{onOnAddColor:zt,onOnMouseDown:Gt})])):e.createCommentVNode("",!0),e.createElementVNode("div",$t,[p.value&&a.showEyeDrop?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",id:"cp-btn-eyedropper",class:"cp-main-btn",onClick:pe},[a.iconClasses.eyeDroper?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(a.iconClasses.eyeDroper)},null,2)):(e.openBlock(),e.createElementBlock("svg",It,[...n[26]||(n[26]=[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"},null,-1),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"},null,-1)])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",St,[e.createVNode(Je,{modelValue:P.value,"onUpdate:modelValue":n[3]||(n[3]=l=>P.value=l),showEyeDrop:a.showEyeDrop,isEyeDropperUsing:p.value,onOnInput:n[4]||(n[4]=l=>me(!1)),onOnChange:Xt,onOnClickEyeDropper:pe},null,8,["modelValue","showEyeDrop","isEyeDropperUsing"]),a.showAlpha?(e.openBlock(),e.createBlock(et,{key:0,modelValue:Z.value,"onUpdate:modelValue":n[5]||(n[5]=l=>Z.value=l),onOnInput:Yt},null,8,["modelValue"])):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",Lt,null,512),[[e.vShow,!1]]),J.value&&a.showInputSet?(e.openBlock(),e.createElementBlock("div",Tt,[N.value!=="CMYK"?(e.openBlock(),e.createBlock(rt,{key:0,modelValue:R.value,"onUpdate:modelValue":[n[6]||(n[6]=l=>R.value=l),Wt]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:1,label:"R",min:0,max:255,modelValue:o.value.find(l=>l.select==!0).r,"onUpdate:modelValue":[n[7]||(n[7]=l=>o.value.find(i=>i.select==!0).r=l),n[8]||(n[8]=l=>re(l,"r"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:2,label:"G",min:0,max:255,modelValue:o.value.find(l=>l.select==!0).g,"onUpdate:modelValue":[n[9]||(n[9]=l=>o.value.find(i=>i.select==!0).g=l),n[10]||(n[10]=l=>re(l,"g"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="RGB"?(e.openBlock(),e.createBlock(L,{key:3,label:"B",min:0,max:255,modelValue:o.value.find(l=>l.select==!0).b,"onUpdate:modelValue":[n[11]||(n[11]=l=>o.value.find(i=>i.select==!0).b=l),n[12]||(n[12]=l=>re(l,"b"))]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:4,label:"H",min:0,max:360,modelValue:$.h,"onUpdate:modelValue":[n[13]||(n[13]=l=>$.h=l),ge]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:5,label:"S",min:0,max:100,modelValue:$.s,"onUpdate:modelValue":[n[14]||(n[14]=l=>$.s=l),ge]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSL"?(e.openBlock(),e.createBlock(L,{key:6,label:"L",min:0,max:100,modelValue:$.l,"onUpdate:modelValue":[n[15]||(n[15]=l=>$.l=l),ge]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:7,label:"H",min:0,max:360,modelValue:M.h,"onUpdate:modelValue":[n[16]||(n[16]=l=>M.h=l),fe]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:8,label:"S",min:0,max:100,modelValue:M.s,"onUpdate:modelValue":[n[17]||(n[17]=l=>M.s=l),fe]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="HSV"?(e.openBlock(),e.createBlock(L,{key:9,label:"V",min:0,max:100,modelValue:M.v,"onUpdate:modelValue":[n[18]||(n[18]=l=>M.v=l),fe]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:10,label:"C",min:0,max:100,modelValue:v.c,"onUpdate:modelValue":[n[19]||(n[19]=l=>v.c=l),se]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:11,label:"M",min:0,max:100,modelValue:v.m,"onUpdate:modelValue":[n[20]||(n[20]=l=>v.m=l),se]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:12,label:"Y",min:0,max:100,modelValue:v.y,"onUpdate:modelValue":[n[21]||(n[21]=l=>v.y=l),se]},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value=="CMYK"?(e.openBlock(),e.createBlock(L,{key:13,label:"K",min:0,max:100,modelValue:v.k,"onUpdate:modelValue":[n[22]||(n[22]=l=>v.k=l),se]},null,8,["modelValue"])):e.createCommentVNode("",!0),a.showAlpha?(e.openBlock(),e.createBlock(L,{key:14,label:"A",min:0,max:100,style:{"margin-right":"2px"},modelValue:o.value.find(l=>l.select==!0).a,"onUpdate:modelValue":[n[23]||(n[23]=l=>o.value.find(i=>i.select==!0).a=l),n[24]||(n[24]=l=>re(l,"a"))]},null,8,["modelValue"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),a.showColorList?(e.openBlock(),e.createBlock(Nt,{key:2,"color-list-count":a.colorListCount,"hex-val":R.value,onColorItemClick:qt,iconClasses:a.iconClasses,title:a.local.colorPalette},null,8,["color-list-count","hex-val","iconClasses","title"])):e.createCommentVNode("",!0),a.showButtons?(e.openBlock(),e.createElementBlock("div",Dt,[e.renderSlot(t.$slots,"buttons",{save:Me,cancel:$e},()=>[e.createElementVNode("button",{class:"ck-cp-buttons__button ck-cp-buttons__button--save",type:"button",onClick:Me},e.toDisplayString(a.local.btnSaveLabel),1),e.createElementVNode("button",{class:"ck-cp-buttons__button ck-cp-buttons__button--cancel",type:"button",onClick:$e},e.toDisplayString(a.local.btnCancelLabel),1)])])):e.createCommentVNode("",!0)],10,vt))}});X.Vue3ColorPicker=Ht,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})}));