color-gradient-picker-vue3 - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

dist/color-gradient-picker-vue3.umd.js

@@ -1,1 +0,1 @@
-(function(t,b){typeof exports=="object"&&typeof module!="undefined"?module.exports=b(require("vue")):typeof define=="function"&&define.amd?define(["vue"],b):(t=typeof globalThis!="undefined"?globalThis:t||self,t["color-gradient-picker-vue3"]=b(t.Vue))})(this,function(t){"use strict";var Xe=Object.defineProperty,Te=Object.defineProperties;var Le=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var ze=Object.prototype.hasOwnProperty,Ye=Object.prototype.propertyIsEnumerable;var z=(t,b,E)=>b in t?Xe(t,b,{enumerable:!0,configurable:!0,writable:!0,value:E}):t[b]=E,C=(t,b)=>{for(var E in b||(b={}))ze.call(b,E)&&z(t,E,b[E]);if(L)for(var E of L(b))Ye.call(b,E)&&z(t,E,b[E]);return t},y=(t,b)=>Te(t,Le(b));function b({red:o,green:n,blue:e,alpha:r}){let i,s,a,l=0,g;const p=o/255,d=n/255,u=e/255,c=Math.max(p,d,u),f=c-Math.min(p,d,u),h=m=>(c-m)/6/f+1/2;return f===0?(l=0,g=0):(g=f/c,i=h(p),s=h(d),a=h(u),p===c?l=a-s:d===c?l=1/3+i-a:u===c&&(l=2/3+s-i),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(l*360),saturation:Math.round(g*100),value:Math.round(c*100)}}function E(o){let n=1;const e=o/60;let r=n*(1-Math.abs(e%2-1));const i=0,s=255;let a=0,l=0,g=0;return n=(n+i)*s|0,r=(r+i)*s|0,e>=0&&e<1&&(a=n|0,l=r|0,g=i|0),e>=1&&e<2&&(a=r|0,l=n|0,g=i|0),e>=2&&e<3&&(a=i|0,l=n|0,g=r|0),e>=3&&e<4&&(a=i|0,l=r|0,g=n|0),e>=4&&e<5&&(a=r|0,l=i|0,g=n|0),e>=5&&e<=6&&(a=n|0,l=i|0,g=r|0),{red:a,green:l,blue:g}}function w(o){return typeof o=="number"&&Number.isNaN(o)===!1&&o>=0&&o<=255}function N(o,n,e,r){if(w(o)&&w(n)&&w(e)){const i={red:o|0,green:n|0,blue:e|0,alpha:r|0};return w(r)===!0&&(i.alpha=r|0),i}}function G(o,n,e){e/=100;let i=n/100*e;const s=o/60;let a=i*(1-Math.abs(s%2-1)),l=e-i;const g=255,p=0;return i=(i+l)*g|0,a=(a+l)*g|0,l=l*g|0,s>=1&&s<2?N(a,i,l,p):s>=2&&s<3?N(l,i,a,p):s>=3&&s<4?N(l,a,i,p):s>=4&&s<5?N(a,l,i,p):s>=5&&s<=6?N(i,l,a,p):N(i,a,l,p)}function H(o,n,e,r,i){o>r&&(o=r),n>e&&(n=e),o<0&&(o=0),n<0&&(n=0);const s=100-n*100/e|0,a=o*100/r|0;return y(C({},G(i,a,s)),{saturation:a,value:s})}function R(o,n,e,r){let i=360*o/n|0;return i=i<0?0:i>360?360:i,y(C({},G(i,e,r)),{hue:i})}function I(o,n){return o=Number((o/n).toFixed(2)),o>1?1:o<0?0:o}function F(o,n,e){let r=o.toString(16),i=n.toString(16),s=e.toString(16);return o<16&&(r=`0${r}`),n<16&&(i=`0${i}`),e<16&&(s=`0${s}`),r+i+s}const Y=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function O(o){if(Y.test(o)){if(o[0]==="#"&&(o=o.slice(1,o.length)),o.length<6)return;const e=parseInt(o.substring(0,2),16)||0,r=parseInt(o.substring(2,4),16)||0,i=parseInt(o.substring(4,6),16)||0,s=parseInt(o.substring(6,10),16)/255||0,a=N(e,r,i,s),l=a&&b(C({},a));return C(C({},a),l)}return!1}function M(o,n){const e=o*100/n;return e<0?0:e>100?100:e}function U(o,n,e,r){return Math.atan2(o-e,n-r)*(180/Math.PI)*-1+180}function k(o,n){return!o&&o!==0?n:o}function D(o,n,e,r){return`rgba(${o}, ${n}, ${e}, ${r})`}function $(o,n,e){let r="";const i=o.slice();return i.sort((s,a)=>s.left-a.left),n==="linear"?r=`linear-gradient(${e}deg,`:r="radial-gradient(",i.forEach((s,a)=>{r+=`rgba(${s.red}, ${s.green}, ${s.blue}, ${s.alpha}) ${s.left}%`,a!==i.length-1&&(r+=",")}),r+=")",r}function V(o,n,e){return function(i){let s=o(i);function a(l){s=n(l,s)||s}window.addEventListener("mousemove",a),window.addEventListener("mouseup",l=>{window.removeEventListener("mousemove",a),e&&e(l,s)},{once:!0})}}const j={class:"picking-area-overlay1"},v={class:"picking-area-overlay2"},W=t.defineComponent({name:"Picker"}),q=t.defineComponent(y(C({},W),{props:{red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,height:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.saturation*r.width/100|0)-6),s=t.computed(()=>(r.height-n.value*r.height/100|0)-6),a=t.computed(()=>({backgroundColor:`rgb(${n.red}, ${n.green}, ${n.blue})`,left:`${i.value}px`,top:`${s.value}px`})),l=t.computed(()=>{const{red:c,green:f,blue:h}=E(n.hue);return{backgroundColor:`rgb(${c}, ${f}, ${h})`}}),g=c=>{const f=e==null?void 0:e.value;if(!f)return;const{x:h,y:m}=f.getBoundingClientRect(),_=c.pageX,P=c.pageY,x=_-h,B=P-m,Ae=H(x,B,r.height,r.width,n.hue);return n.updateColor(Ae,"onStartChange"),{startX:_,startY:P,positionX:x,positionY:B}},p=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const P=c.pageX-f,x=c.pageY-h;m+=P,_+=x;const B=H(m,_,r.height,r.width,n.hue);return{positions:{positionX:m,positionY:_,startX:c.pageX,startY:c.pageY},color:B}},d=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const{positions:P,color:x}=p(c,{startX:f,startY:h,positionX:m,positionY:_});return n.updateColor(x,"onChange"),P},u=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const{positions:P,color:x}=p(c,{startX:f,startY:h,positionX:m,positionY:_});return n.updateColor(x,"onEndChange"),P};return t.onMounted(()=>{const c=e==null?void 0:e.value;c&&(r.width=c.clientWidth,r.height=c.clientHeight),r.mouseEvents=V(g,d,u)}),(c,f)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"pickerAreaRef",ref:e,class:"picking-area",style:t.normalizeStyle(t.unref(l)),onMousedown:f[0]||(f[0]=(...h)=>r.mouseEvents&&r.mouseEvents(...h))},[t.createElementVNode("div",j,[t.createElementVNode("div",v,[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(a))},null,4)])])],36))}})),J={class:"preview-area"},K=t.defineComponent({name:"PickerPreView"}),Q=t.defineComponent(y(C({},K),{props:{isGradient:{type:Boolean,default:!1},red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},gradientDegree:{default:0},gradientType:{default:""}},setup(o){const n=o,e=t.computed(()=>{let r="";return n.isGradient?(r=$(n.points,n.gradientType,n.gradientDegree),{background:r}):(r=D(n.red,n.green,n.blue,n.alpha),{backgroundColor:r})});return(r,i)=>(t.openBlock(),t.createElementBlock("div",J,[t.createElementVNode("div",{class:"preview-box",style:t.normalizeStyle(t.unref(e))},null,4)]))}})),Z=t.defineComponent({name:"Hue"}),ee=t.defineComponent(y(C({},Z),{props:{hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.hue*r.width/360|0)-6),s=t.computed(()=>({left:`${i.value}px`})),a=d=>{const u=d.currentTarget.getBoundingClientRect().x,c=d.pageX,f=c-u,h=R(f,r.width,n.saturation,n.value);return n.updateColor(h,"onStartChange"),{startX:c,positionX:f}},l=(d,{startX:u,positionX:c})=>{const f=d.pageX-u;c+=f;const h=c>r.width?r.width:c<=0?0:c,m=R(h,r.width,n.saturation,n.value);return{positions:{positionX:c,startX:d.pageX},color:m}},g=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return n.updateColor(h,"onChange"),f},p=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return n.updateColor(h,"onEndChange"),f};return t.onMounted(()=>{e.value&&(r.width=e.value.clientWidth),r.mouseEvents=V(a,g,p)}),(d,u)=>(t.openBlock(),t.createElementBlock("div",{class:"hue",onMousedown:u[0]||(u[0]=(...c)=>r.mouseEvents&&r.mouseEvents(...c))},[t.createElementVNode("div",{ref_key:"hueRef",ref:e,class:"hue-area"},[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(s))},null,4)],512)],32))}})),te={class:"alpha-area"},ne=t.defineComponent({name:"alpha"}),oe=t.defineComponent(y(C({},ne),{props:{red:Number,green:Number,blue:Number,alpha:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.alpha*r.width|0)-6),s=t.computed(()=>({left:`${i.value}px`})),a=t.computed(()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${n.red}, ${n.green}, ${n.blue}))`})),l=u=>{const c=u.currentTarget.getBoundingClientRect().x,f=u.pageX,h=f-c;return n.updateColor({alpha:I(h,r.width)},"onStartChange"),{startX:f,positionX:h}},g=(u,{startX:c,positionX:f})=>{const h=u.pageX-c;f+=h;const m=I(f,r.width);return{positions:{positionX:f,startX:u.pageX},alpha:m}},p=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return n.updateColor({alpha:m},"onChange"),h},d=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return n.updateColor({alpha:m},"onEndChange"),h};return t.onMounted(()=>{const u=e.value;u&&(r.width=u.clientWidth),r.mouseEvents=V(l,p,d)}),(u,c)=>(t.openBlock(),t.createElementBlock("div",{class:"alpha",onMousedown:c[0]||(c[0]=(...f)=>r.mouseEvents&&r.mouseEvents(...f))},[t.createElementVNode("div",{class:"gradient",style:t.normalizeStyle(t.unref(a))},null,4),t.createElementVNode("div",te,[t.createElementVNode("div",{ref_key:"alphaMaskRef",ref:e,class:"alpha-mask"},[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(s))},null,4)],512)])],32))}})),re=t.defineComponent({name:"GradientPoint"}),ae=t.defineComponent(y(C({},re),{props:{point:Object,activePointIndex:Number,index:Number,width:Number,positions:Object,changeActivePointIndex:Function,updateGradientLeft:Function,removePoint:Function},setup(o){const n=o,e=t.reactive({mouseEvents:()=>!1}),r=t.computed(()=>n.activePointIndex===n.index?" active":""),i=t.computed(()=>({left:`${n.point.left*(n.width/100)-6}px`})),s=p=>{n.changeActivePointIndex(n.index);const d=p.pageX,u=p.pageY,c=d-n.positions.x;return n.updateGradientLeft(n.point.left,n.index,"onStartChange"),{startX:d,startY:u,offsetX:c}},a=(p,{startX:d,offsetX:u})=>{const c=p.pageX-d;u+=c;const f=M(u,n.width);return{positions:{offsetX:u,startX:p.pageX},left:f}},l=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return n.updateGradientLeft(f,n.index,"onChange"),c},g=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return n.updateGradientLeft(f,n.index,"onEndChange"),c};return t.onMounted(()=>{e.mouseEvents=V(s,l,g)}),(p,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`picker-pointer${t.unref(r)}`),style:t.normalizeStyle(t.unref(i)),onMousedown:d[0]||(d[0]=(...u)=>e.mouseEvents&&e.mouseEvents(...u)),onDblclick:d[1]||(d[1]=()=>n.removePoint(o.index)),onClick:d[2]||(d[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("span",{class:t.normalizeClass(`child-point${t.unref(r)}`)},null,2)],38))}})),le=t.defineComponent({name:"GradientPoints"}),ie=t.defineComponent(y(C({},le),{props:{points:Array,activePointIndex:Number,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,positions:{x:0,y:0}}),i=t.computed(()=>({background:$(n.points,"linear",90)})),s=a=>{const l=M(a.pageX-r.positions.x,r.width);n.addPoint(l)};return t.onMounted(()=>{const a=e.value;if(a){r.width=a.clientWidth;const l=a.getBoundingClientRect();r.positions={x:l.x,y:l.y}}}),(a,l)=>(t.openBlock(),t.createElementBlock("div",{class:"gradient",style:t.normalizeStyle(t.unref(i)),onClick:s},[t.createElementVNode("div",{ref_key:"pointsContainerRef",ref:e,class:"gradient-slider-container"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.points,(g,p)=>(t.openBlock(),t.createBlock(ae,{key:p,"active-point-index":n.activePointIndex,index:p,point:g,width:r.width,positions:r.positions,"change-active-point-index":n.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"remove-point":n.removePoint},null,8,["active-point-index","index","point","width","positions","change-active-point-index","update-gradient-left","remove-point"]))),128))],512)],4))}})),ce={class:"picker-area"},se={class:"preview"},de={class:"color-hue-alpha"},ue=t.defineComponent({name:"ColorPicker"}),A=t.defineComponent(y(C({},ue),{props:{isGradient:Boolean,red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function,points:Array,degree:Number,type:String,activePointIndex:Number,changeGradientControl:Function,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){return(n,e)=>(t.openBlock(),t.createElementBlock("div",ce,[t.createVNode(q,{red:o.red,green:o.green,blue:o.blue,hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["red","green","blue","hue","saturation","value","update-color"]),o.isGradient?(t.openBlock(),t.createBlock(ie,{key:0,type:o.type,degree:o.degree,points:o.points,"active-point-index":o.activePointIndex,"change-active-point-index":o.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"add-point":o.addPoint,"remove-point":o.removePoint},null,8,["type","degree","points","active-point-index","change-active-point-index","update-gradient-left","add-point","remove-point"])):t.createCommentVNode("",!0),t.createElementVNode("div",se,[t.createVNode(Q,{red:o.red,green:o.green,blue:o.blue,alpha:o.alpha,"is-gradient":o.isGradient,points:o.points,"gradient-degree":o.degree,"gradient-type":o.type},null,8,["red","green","blue","alpha","is-gradient","points","gradient-degree","gradient-type"]),t.createElementVNode("div",de,[t.createVNode(ee,{hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["hue","saturation","value","update-color"]),t.createVNode(oe,{alpha:o.alpha,red:o.red,green:o.green,blue:o.blue,"update-color":o.updateColor},null,8,["alpha","red","green","blue","update-color"])])])]))}})),pe={class:"input-container"},ge={class:"label"},fe=t.defineComponent({name:"Input"}),he=t.defineComponent(y(C({},fe),{props:{value:{default:""},label:{default:""},type:{default:"text"},classes:{default:""},onFocus:{type:Function,default:()=>{}},onBlur:{type:Function,default:()=>{}}},emits:["input","update:value"],setup(o,{emit:n}){const e=o,r=t.computed({get:()=>~~e.value,set:s=>n("update:value",s)}),i=s=>{n("input",s)};return(s,a)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`input-field ${e.classes}`)},[t.createElementVNode("div",pe,[t.withDirectives(t.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=l=>t.isRef(r)?r.value=l:null),class:t.normalizeClass(`${e.type}-input input`),onFocus:a[1]||(a[1]=(...l)=>e.onFocus&&e.onFocus(...l)),onBlur:a[2]||(a[2]=(...l)=>e.onBlur&&e.onBlur(...l)),onInput:i},null,34),[[t.vModelText,t.unref(r)]])]),t.createElementVNode("div",ge,t.toDisplayString(o.label),1)],2))}})),Oe="",X=((o,n)=>{const e=o.__vccOpts||o;for(const[r,i]of n)e[r]=i;return e})(he,[["__scopeId","data-v-b140d166"]]),me=t.defineComponent({name:"Preview"}),Ce=t.defineComponent(y(C({},me),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:null,updateColor:{type:Function,default:o=>!1}},setup(o){const n=o,e=t.reactive({hexValue:F(n.red,n.green,n.blue)}),r=t.computed(()=>F(n.red,n.green,n.blue)),i=()=>{r.value.length===6&&(e.hexValue=r.value)},s=a=>{const l=O(a.target.value);l&&n.updateColor(l)};return t.watch(()=>[n.red,n.green,n.blue],()=>i()),(a,l)=>(t.openBlock(),t.createBlock(X,{value:e.hexValue,label:"hex",classes:"hex",onInput:s},null,8,["value"]))}})),be=t.defineComponent({name:"RGBItem"}),S=t.defineComponent(y(C({},be),{props:{value:null,type:{default:"text"},label:{default:""},onChange:{type:Function,default:o=>!1}},setup(o){const n=o,e=t.getCurrentInstance(),r=t.reactive({inputValue:n.value||0,inProgress:!1}),i=()=>{n.value!==+r.inputValue&&r.inputValue!==""&&(r.inputValue=n.value)},s=l=>{var p;const g=+l.target.value;if(Number.isNaN(g)||g<0||g>255){r.inputValue=n.value,(p=e==null?void 0:e.proxy)==null||p.$forceUpdate();return}r.inputValue=l.target.value,n.onChange(g)},a=()=>{r.inputValue||(r.inputValue=n.value),r.inProgress=!1};return t.watch(()=>n.value,()=>i()),(l,g)=>(t.openBlock(),t.createElementBlock("div",null,[t.createVNode(X,{value:r.inputValue,type:n.type,label:n.label,"on-focus":()=>r.inProgress=!0,"on-blur":a,"in-progress":r.inProgress,classes:"rgb",onInput:s},null,8,["value","type","label","on-focus","in-progress"])]))}})),ye=t.defineComponent({name:"RGB"}),ke=t.defineComponent(y(C({},ye),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:()=>!1}},setup(o){const n=o,e=(r,i)=>{if(r==="alpha"){n.updateColor({alpha:i/100});return}const s=b({red:n.red,green:n.green,blue:n.blue,[r]:i});n.updateColor(y(C({},s),{[r]:i}))};return(r,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(S,{value:n.red,type:"number",label:"R","on-change":s=>e("red",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.green,type:"number",label:"G","on-change":s=>e("green",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.blue,type:"number",label:"B","on-change":s=>e("blue",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.alpha*100,type:"number",label:"Alpha","on-change":s=>e("alpha",s)},null,8,["value","on-change"])],64))}})),_e={class:"color-preview-area"},xe={class:"input-group"},Ee=t.defineComponent({name:"Preview"}),T=t.defineComponent(y(C({},Ee),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:o=>!1}},setup(o){const n=o;return(e,r)=>(t.openBlock(),t.createElementBlock("div",_e,[t.createElementVNode("div",xe,[t.createVNode(Ce,{red:n.red,green:n.green,blue:n.blue,"update-color":n.updateColor},null,8,["red","green","blue","update-color"]),t.createVNode(ke,{red:n.red,green:n.green,blue:n.blue,alpha:n.alpha,"update-color":n.updateColor},null,8,["red","green","blue","alpha","update-color"])])]))}})),Pe=t.defineComponent({name:"Solid"}),Ne=t.defineComponent(y(C({},Pe),{props:{red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},hue:{default:0},saturation:{default:0},value:{default:0},onStartChange:{default:()=>{}},onChange:{default:()=>{}},onEndChange:{default:()=>{}}},setup(o){const n=o,e=t.reactive({colorRed:n.red,colorGreen:n.green,colorBlue:n.blue,colorAlpha:n.alpha,colorHue:0,colorSaturation:100,colorValue:100,actions:{onStartChange:n.onStartChange,onChange:n.onChange,onEndChange:n.onEndChange}}),r=t.computed(()=>n.hue===void 0||n.saturation===void 0||n.value===void 0?b({red:n.red,green:n.green,blue:n.blue}):{hue:n.hue,saturation:n.saturation,value:n.value}),i=t.computed(()=>({red:n.red,green:n.green,blue:n.blue,alpha:n.alpha}));t.watch(()=>r.value,a=>{const{hue:l,saturation:g,value:p}=a;e.colorHue=l,e.colorSaturation=g,e.colorValue=p}),t.watch(()=>i.value,a=>{const{red:l,green:g,blue:p,alpha:d}=a;e.colorRed=l,e.colorGreen=g,e.colorBlue=p,e.colorAlpha=d});const s=({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c},f="onChange")=>{a=k(a,e.colorRed),l=k(l,e.colorGreen),g=k(g,e.colorBlue),p=k(p,e.colorAlpha),d=k(d,e.colorHue),u=k(u,e.colorSaturation),c=k(c,e.colorValue),e.colorRed=a,e.colorGreen=l,e.colorBlue=g,e.colorAlpha=p,e.colorHue=d,e.colorSaturation=u,e.colorValue=c;const h=e.actions[f];h&&h({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c,style:D(a,l,g,p)})};return t.onMounted(()=>{const{hue:a,saturation:l,value:g}=b({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=a,e.colorSaturation=l,e.colorValue=g}),(a,l)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(A,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":s,"is-gradient":!1},null,8,["red","green","blue","alpha","hue","saturation","value"]),t.createVNode(T,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":s},null,8,["red","green","blue","alpha"])],64))}})),$e={class:"gradient-controls"},Be={class:"gradient-type"},Ve={key:0,class:"gradient-degrees-options"},we=[t.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)],Se={class:"gradient-degree-value"},Ge=t.defineComponent({name:"GradientControls"}),He=t.defineComponent(y(C({},Ge),{props:{type:String,degree:Number,changeGradientControl:{type:Function,default:()=>!1}},setup(o){const n=o,e=t.reactive({disableClick:!1,mouseEvents:()=>!1}),r=t.computed(()=>({transform:`rotate(${n.degree}deg)`})),i=g=>{const d=g.target.getBoundingClientRect(),u=~~(8-window.pageYOffset)+d.top,c=~~(8-window.pageXOffset)+d.left;return{centerY:u,centerX:c}},s=(g,{centerX:p,centerY:d})=>{e.disableClick=!0;const u=U(g.clientX,g.clientY,p,d);n.changeGradientControl({degree:~~u})},a=g=>{const p=g.target.classList;p.contains("gradient-degrees")||p.contains("icon-rotate")||(e.disableClick=!1)},l=()=>{if(e.disableClick){e.disableClick=!1;return}let g=(n.degree||0)+45;g>=360&&(g=0),n.changeGradientControl({degree:~~g})};return t.onMounted(()=>{e.mouseEvents=V(i,s,a)}),(g,p)=>(t.openBlock(),t.createElementBlock("div",$e,[t.createElementVNode("div",Be,[t.createElementVNode("div",{class:t.normalizeClass(`gradient-type-item liner-gradient ${n.type==="linear"?"active":""}`),onClick:p[0]||(p[0]=()=>n.changeGradientControl({type:"linear"}))},null,2),t.createElementVNode("div",{class:t.normalizeClass(`gradient-type-item radial-gradient ${n.type==="radial"?"active":""}`),onClick:p[1]||(p[1]=()=>n.changeGradientControl({type:"radial"}))},null,2)]),n.type==="linear"?(t.openBlock(),t.createElementBlock("div",Ve,[t.createElementVNode("div",{class:"gradient-degrees",onMousedown:p[2]||(p[2]=(...d)=>e.mouseEvents&&e.mouseEvents(...d)),onClick:l},[t.createElementVNode("div",{class:"gradient-degree-center",style:t.normalizeStyle(t.unref(r))},we,4)],32),t.createElementVNode("div",Se,[t.createElementVNode("p",null,t.toDisplayString(n.degree)+"°",1)])])):t.createCommentVNode("",!0)]))}})),Re=t.defineComponent({name:"Gradient"}),Ie=t.defineComponent(y(C({},Re),{props:{type:{default:"linear"},degree:{default:0},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},onStartChange:{default:null},onChange:{default:null},onEndChange:{default:null}},setup(o){const n=o,e=t.reactive({activePointIndex:0,gradientPoints:n.points,activePoint:n.points[0],colorRed:n.points[0].red,colorGreen:n.points[0].green,colorBlue:n.points[0].blue,colorAlpha:n.points[0].alpha,colorHue:0,colorSaturation:100,colorValue:100,gradientType:n.type,gradientDegree:n.degree,actions:{onStartChange:n.onStartChange,onChange:n.onChange,onEndChange:n.onEndChange}}),r=(d=e.activePointIndex)=>{e.gradientPoints.length<=2||(e.gradientPoints.splice(d,1),d>0&&(e.activePointIndex=d-1),n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)}))},i=d=>{(d.keyCode===46||d.keyCode===8)&&r(e.activePointIndex)},s=d=>{e.activePointIndex=d,e.activePoint=e.gradientPoints[d];const{red:u,green:c,blue:f,alpha:h}=e.activePoint;e.colorRed=u,e.colorGreen=c,e.colorBlue=f,e.colorAlpha=h;const{hue:m,saturation:_,value:P}=b({red:u,green:c,blue:f});e.colorHue=m,e.colorSaturation=_,e.colorValue=P},a=({type:d,degree:u})=>{d=k(d,e.gradientType),u=k(u,e.gradientDegree),e.gradientType=d,e.gradientDegree=u,n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})},l=({red:d,green:u,blue:c,alpha:f,hue:h,saturation:m,value:_},P="onChange")=>{d=k(d,e.colorRed),u=k(u,e.colorGreen),c=k(c,e.colorBlue),f=k(f,e.colorAlpha),h=k(h,e.colorHue),m=k(m,e.colorSaturation),_=k(_,e.colorValue);const x=e.gradientPoints.slice();x[e.activePointIndex]=y(C({},x[e.activePointIndex]),{red:d,green:u,blue:c,alpha:f}),e.colorRed=d,e.colorGreen=u,e.colorBlue=c,e.colorAlpha=f,e.colorHue=h,e.colorSaturation=m,e.colorValue=_,e.gradientPoints=x;const B=e.actions[P];B&&B({points:x,type:e.gradientType,degree:e.gradientDegree,style:$(x,e.gradientType,e.gradientDegree)})},g=(d,u,c="onChange")=>{e.gradientPoints[u].left=d;const f=e.actions[c];f&&f({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})},p=d=>{e.gradientPoints.push(y(C({},e.gradientPoints[e.activePointIndex]),{left:d})),e.activePointIndex=e.gradientPoints.length-1,n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})};return t.onMounted(()=>{const{hue:d,saturation:u,value:c}=b({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=d,e.colorSaturation=u,e.colorValue=c,document.addEventListener("keyup",i)}),t.onBeforeUnmount(()=>{document.removeEventListener("keyup",i)}),(d,u)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(He,{type:e.gradientType,degree:e.gradientDegree,"change-gradient-control":a},null,8,["type","degree"]),t.createVNode(A,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":l,"is-gradient":!0,type:e.gradientType,degree:e.gradientDegree,points:e.gradientPoints,"active-point-index":e.activePointIndex,"change-gradient-control":a,"change-active-point-index":s,"update-gradient-left":g,"add-point":p,"remove-point":r},null,8,["red","green","blue","alpha","hue","saturation","value","type","degree","points","active-point-index"]),t.createVNode(T,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":l},null,8,["red","green","blue","alpha"])],64))}})),Fe={class:"ui-color-picker"},Me=t.defineComponent({name:"ColorPicker"}),De=t.defineComponent(y(C({},Me),{props:{isGradient:{type:Boolean,default:!1},color:{default:()=>({red:255,green:0,blue:0,alpha:1,hue:0,saturation:100,value:100})},gradient:{default:()=>({type:"linear",degree:0,points:[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]})},onChange:{default:()=>!1},onStartChange:{default:()=>!1},onEndChange:{default:()=>!1}},setup(o){const n=o;return(e,r)=>(t.openBlock(),t.createElementBlock("div",Fe,[n.isGradient?(t.openBlock(),t.createBlock(Ie,{key:0,points:n.gradient.points,type:n.gradient.type,degree:n.gradient.degree,"on-change":n.onChange,"on-start-change":n.onStartChange,"on-end-change":n.onEndChange},null,8,["points","type","degree","on-change","on-start-change","on-end-change"])):(t.openBlock(),t.createBlock(Ne,{key:1,red:n.color.red,green:n.color.green,blue:n.color.blue,alpha:n.color.alpha,hue:n.color.hue,saturation:n.color.saturation,value:n.color.value,"on-change":n.onChange,"on-start-change":n.onStartChange,"on-end-change":n.onEndChange},null,8,["red","green","blue","alpha","hue","saturation","value","on-change","on-start-change","on-end-change"]))]))}})),ve="";return De});
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";function t(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function r(e,r,n,o){if(t(e)&&t(r)&&t(n)){const a={red:0|e,green:0|r,blue:0|n,alpha:0|o};return!0===t(o)&&(a.alpha=0|o),a}}function n(e,t,n,o){let a=t/100*(n/=100);const i=e/60;let l=a*(1-Math.abs(i%2-1)),c=n-a;return a=255*(a+c)|0,l=255*(l+c)|0,c=255*c|0,i>=1&&i<2?r(l,a,c,o):i>=2&&i<3?r(c,a,l,o):i>=3&&i<4?r(c,l,a,o):i>=4&&i<5?r(l,c,a,o):i>=5&&i<=6?r(a,c,l,o):r(a,l,c,o)}function o(e,t,r,o,a,i){e>o&&(e=o),t>r&&(t=r),e<0&&(e=0),t<0&&(t=0);const l=100-100*t/r|0,c=100*e/o|0;return __spreadProps(__spreadValues({},n(a,c,l,i)),{saturation:c,value:l})}function a(e,t,r,o,a){let i=360*e/t|0;return i=i<0?0:i>360?360:i,__spreadProps(__spreadValues({},n(i,r,o,a)),{saturation:r,hue:i})}function i(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function l(e,t,r){let n=e.toString(16),o=t.toString(16),a=r.toString(16);return e<16&&(n=`0${n}`),t<16&&(o=`0${o}`),r<16&&(a=`0${a}`),n+o+a}const c=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function s(e){if(c.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return!1;const t=r(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,8),16)/255||0),n=t&&function({red:e,green:t,blue:r}){let n,o,a,i,l=0;const c=e/255,s=t/255,u=r/255,p=Math.max(c,s,u),d=p-Math.min(c,s,u),f=e=>(p-e)/6/d+.5;return 0===d?(l=0,i=0):(i=d/p,n=f(c),o=f(s),a=f(u),c===p?l=a-o:s===p?l=1/3+n-a:u===p&&(l=2/3+o-n),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(360*l),saturation:Math.round(100*i),value:Math.round(100*p)}}(__spreadValues({},t));return __spreadValues(__spreadValues({},t),n)}return!1}function u(e,t){const r=100*e/t;return r<0?0:r>100?100:r}function p(e,t,r,n){return`rgba(${e}, ${t}, ${r}, ${n})`}function d(e,t,r){let n="";const o=e.slice();return o.sort(((e,t)=>e.left-t.left)),n="linear"===t?`linear-gradient(${r}deg,`:"radial-gradient(",o.forEach(((e,t)=>{n+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==o.length-1&&(n+=",")})),n+=")",n}function f(e,t,r){return function(n){let o=e(n);function a(e){o=t(e,o)||o}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),r&&r(e,o)}),{once:!0})}}const v={class:"picker-area-overlay1 wh-full"},b={class:"picker-area-overlay2 wh-full rounded-8px"},y=e.defineComponent({name:"AreaPicker"}),m=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r},h=m(e.defineComponent(__spreadProps(__spreadValues({},y),{setup(t){const r=e.ref(null),n=e.ref(null),a=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{const{width:e=0,height:t=0}=n.value||{},r=((a.saturation||0)*e/100|0)-6,o=(t-(a.value||0)*t/100|0)-6;return{backgroundColor:`rgb(${a.red}, ${a.green}, ${a.blue})`,left:`${r}px`,top:`${o}px`}})),c=e.computed((()=>{const{red:e=255,green:t=0,blue:r=0}=function(e){let t=1;const r=e/60;let n=t*(1-Math.abs(r%2-1)),o=0,a=0,i=0;return t=255*(t+0)|0,n=255*(n+0)|0,r>=0&&r<1&&(o=0|t,a=0|n,i=0),r>=1&&r<2&&(o=0|n,a=0|t,i=0),r>=2&&r<3&&(o=0,a=0|t,i=0|n),r>=3&&r<4&&(o=0,a=0|n,i=0|t),r>=4&&r<5&&(o=0|n,a=0,i=0|t),r>=5&&r<=6&&(o=0|t,a=0,i=0|n),{red:o,green:a,blue:i}}(a.hue)||{};return{backgroundColor:`rgb(${e}, ${t}, ${r})`}})),s=(e,{startX:t,startY:r,positionX:i,positionY:l})=>{const c=e.pageX-t,s=e.pageY-r,{width:u=0,height:p=0}=n.value||{},d=o(i+=c,l+=s,p,u,a.hue,a.alpha);return{positions:{positionX:i,positionY:l,startX:e.pageX,startY:e.pageY},color:d}},u=f((e=>{if(!n.value)return;const{x:t,y:r}=n.value,{width:l=0,height:c=0}=n.value||{},s=e.pageX,u=e.pageY,p=s-t,d=u-r,f=o(p,d,c,l,a.hue,a.alpha);return i(f),{startX:s,startY:u,positionX:p,positionY:d}}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}));return e.watchEffect((()=>{var e;const t=r.value;t&&!(null==(e=n.value)?void 0:e.width)&&(n.value=t.getBoundingClientRect()||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:r,class:"picker-area w-full mb-16px relative rounded-8px",style:e.normalizeStyle(e.unref(c)),onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",v,[e.createElementVNode("div",b,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)])])],36))}})),[["__scopeId","data-v-0eb61073"]]),g={class:"preview-area mr-8px"},_=e.defineComponent({name:"AreaPreview"}),j=e.defineComponent(__spreadProps(__spreadValues({},_),{setup(t){const r=e.inject("colorPickerState"),n=e.computed((()=>{let e="";return e=r.isGradient?d(r.points,r.type,r.degree):p(r.red,r.green,r.blue,r.alpha),{background:e}}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"border-box w-36px h-36px rounded-8px border-width-1px border-solid border-[#ebedf5]",style:e.normalizeStyle(e.unref(n))},null,4)]))}})),x=e.defineComponent({name:"AreaHue"}),w=m(e.defineComponent(__spreadProps(__spreadValues({},x),{setup(t){const r=e.ref(null),n=e.ref(null),o=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{var e;const t=(null==(e=n.value)?void 0:e.width)||0;return(o.hue||0)*(t-14)/360|0})),c=e.computed((()=>({left:`${l.value}px`}))),s=(e,{startX:t,positionX:r})=>{var i;const l=e.pageX-t,c=(null==(i=n.value)?void 0:i.width)||0,s=a((r+=l)>c?c:r<=0?0:r,c,o.saturation,o.value,o.alpha);return{positions:{positionX:r,startX:e.pageX},color:s}},u=f((e=>{var t,r;const l=(null==(t=n.value)?void 0:t.x)||0,c=e.pageX,s=c-l,u=a(s,(null==(r=n.value)?void 0:r.width)||0,o.saturation,o.value,o.alpha);return i(u),{startX:c,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}));return e.watchEffect((()=>{var e,t;r.value&&!(null==(e=n.value)?void 0:e.width)&&(n.value=(null==(t=r.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px mb-8px bg-[red] cursor-pointer",onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",{ref_key:"hueRef",ref:r,class:"hue-area relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(c))},null,4)],512)],32))}})),[["__scopeId","data-v-61cbbc2c"]]),k={class:"alpha-area wh-full rounded-10px"},P=e.defineComponent({name:"AreaAlpha"}),C=m(e.defineComponent(__spreadProps(__spreadValues({},P),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),l=e.computed((()=>{var e;const t=(null==(e=a.value)?void 0:e.width)||0;return r.alpha*(t-14)|0})),c=e.computed((()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${r.red}, ${r.green}, ${r.blue}))`}))),s=e.computed((()=>({left:`${l.value}px`}))),u=(e,{startX:t,positionX:r})=>{var n;const o=i(r+=e.pageX-t,(null==(n=a.value)?void 0:n.width)||0);return{positions:{positionX:r,startX:e.pageX},alpha:o}},p=f((e=>{var t,r;const o=(null==(t=a.value)?void 0:t.x)||0,l=e.pageX,c=(null==(r=a.value)?void 0:r.width)||0;let s=l-o;return n({alpha:i(s,c)},"alpha"),{startX:l,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}));return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px h-14px cursor-pointer",onMousedown:r[0]||(r[0]=(...t)=>e.unref(p)&&e.unref(p)(...t))},[e.createElementVNode("div",{class:"absolute left-0 right-0 top-0 bottom-0",style:e.normalizeStyle(e.unref(c))},null,4),e.createElementVNode("div",k,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"wh-full relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(s))},null,4)],512)])],32))}})),[["__scopeId","data-v-60f3c3c1"]]);const V="object"==typeof global&&global&&global.Object===Object&&global;var O="object"==typeof self&&self&&self.Object===Object&&self;const X=V||O||Function("return this")();const B=X.Symbol;var E=Object.prototype,S=E.hasOwnProperty,A=E.toString,N=B?B.toStringTag:void 0;var I=Object.prototype.toString;var $="[object Null]",z="[object Undefined]",M=B?B.toStringTag:void 0;function U(e){return null==e?void 0===e?z:$:M&&M in Object(e)?function(e){var t=S.call(e,N),r=e[N];try{e[N]=void 0;var n=!0}catch(a){}var o=A.call(e);return n&&(t?e[N]=r:delete e[N]),o}(e):function(e){return I.call(e)}(e)}function D(e){return null!=e&&"object"==typeof e}const F=Array.isArray;function G(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R="[object AsyncFunction]",Y="[object Function]",T="[object GeneratorFunction]",L="[object Proxy]";function q(e){if(!G(e))return!1;var t=U(e);return t==Y||t==T||t==R||t==L}const W=X["__core-js_shared__"];var H,J=(H=/[^.]+$/.exec(W&&W.keys&&W.keys.IE_PROTO||""))?"Symbol(src)_1."+H:"";var K=Function.prototype.toString;function Q(e){if(null!=e){try{return K.call(e)}catch(t){}try{return e+""}catch(t){}}return""}var Z=/^\[object .+?Constructor\]$/,ee=Function.prototype,te=Object.prototype,re=ee.toString,ne=te.hasOwnProperty,oe=RegExp("^"+re.call(ne).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function ae(e){return!(!G(e)||(t=e,J&&J in t))&&(q(e)?oe:Z).test(Q(e));var t}function ie(e,t){var r=function(e,t){return null==e?void 0:e[t]}(e,t);return ae(r)?r:void 0}const le=ie(X,"WeakMap");var ce=Object.create;const se=function(){function e(){}return function(t){if(!G(t))return{};if(ce)return ce(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();const ue=function(){try{var e=ie(Object,"defineProperty");return e({},"",{}),e}catch(t){}}();var pe=9007199254740991,de=/^(?:0|[1-9]\d*)$/;function fe(e,t){var r=typeof e;return!!(t=null==t?pe:t)&&("number"==r||"symbol"!=r&&de.test(e))&&e>-1&&e%1==0&&e<t}function ve(e,t,r){"__proto__"==t&&ue?ue(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function be(e,t){return e===t||e!=e&&t!=t}var ye=Object.prototype.hasOwnProperty;function me(e,t,r){var n=e[t];ye.call(e,t)&&be(n,r)&&(void 0!==r||t in e)||ve(e,t,r)}function he(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var l=t[a],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),o?ve(r,l,c):me(r,l,c)}return r}var ge=9007199254740991;function _e(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=ge}function je(e){return null!=e&&_e(e.length)&&!q(e)}var xe=Object.prototype;function we(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||xe)}function ke(e){return D(e)&&"[object Arguments]"==U(e)}var Pe=Object.prototype,Ce=Pe.hasOwnProperty,Ve=Pe.propertyIsEnumerable,Oe=ke(function(){return arguments}())?ke:function(e){return D(e)&&Ce.call(e,"callee")&&!Ve.call(e,"callee")};const Xe=Oe;var Be="object"==typeof exports&&exports&&!exports.nodeType&&exports,Ee=Be&&"object"==typeof module&&module&&!module.nodeType&&module,Se=Ee&&Ee.exports===Be?X.Buffer:void 0;const Ae=(Se?Se.isBuffer:void 0)||function(){return!1};var Ne={};function Ie(e){return function(t){return e(t)}}Ne["[object Float32Array]"]=Ne["[object Float64Array]"]=Ne["[object Int8Array]"]=Ne["[object Int16Array]"]=Ne["[object Int32Array]"]=Ne["[object Uint8Array]"]=Ne["[object Uint8ClampedArray]"]=Ne["[object Uint16Array]"]=Ne["[object Uint32Array]"]=!0,Ne["[object Arguments]"]=Ne["[object Array]"]=Ne["[object ArrayBuffer]"]=Ne["[object Boolean]"]=Ne["[object DataView]"]=Ne["[object Date]"]=Ne["[object Error]"]=Ne["[object Function]"]=Ne["[object Map]"]=Ne["[object Number]"]=Ne["[object Object]"]=Ne["[object RegExp]"]=Ne["[object Set]"]=Ne["[object String]"]=Ne["[object WeakMap]"]=!1;var $e="object"==typeof exports&&exports&&!exports.nodeType&&exports,ze=$e&&"object"==typeof module&&module&&!module.nodeType&&module,Me=ze&&ze.exports===$e&&V.process;const Ue=function(){try{var e=ze&&ze.require&&ze.require("util").types;return e||Me&&Me.binding&&Me.binding("util")}catch(t){}}();var De=Ue&&Ue.isTypedArray;const Fe=De?Ie(De):function(e){return D(e)&&_e(e.length)&&!!Ne[U(e)]};var Ge=Object.prototype.hasOwnProperty;function Re(e,t){var r=F(e),n=!r&&Xe(e),o=!r&&!n&&Ae(e),a=!r&&!n&&!o&&Fe(e),i=r||n||o||a,l=i?function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}(e.length,String):[],c=l.length;for(var s in e)!t&&!Ge.call(e,s)||i&&("length"==s||o&&("offset"==s||"parent"==s)||a&&("buffer"==s||"byteLength"==s||"byteOffset"==s)||fe(s,c))||l.push(s);return l}function Ye(e,t){return function(r){return e(t(r))}}const Te=Ye(Object.keys,Object);var Le=Object.prototype.hasOwnProperty;function qe(e){return je(e)?Re(e):function(e){if(!we(e))return Te(e);var t=[];for(var r in Object(e))Le.call(e,r)&&"constructor"!=r&&t.push(r);return t}(e)}var We=Object.prototype.hasOwnProperty;function He(e){if(!G(e))return function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}(e);var t=we(e),r=[];for(var n in e)("constructor"!=n||!t&&We.call(e,n))&&r.push(n);return r}function Je(e){return je(e)?Re(e,!0):He(e)}const Ke=ie(Object,"create");var Qe=Object.prototype.hasOwnProperty;var Ze=Object.prototype.hasOwnProperty;function et(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function tt(e,t){for(var r=e.length;r--;)if(be(e[r][0],t))return r;return-1}et.prototype.clear=function(){this.__data__=Ke?Ke(null):{},this.size=0},et.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},et.prototype.get=function(e){var t=this.__data__;if(Ke){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return Qe.call(t,e)?t[e]:void 0},et.prototype.has=function(e){var t=this.__data__;return Ke?void 0!==t[e]:Ze.call(t,e)},et.prototype.set=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=Ke&&void 0===t?"__lodash_hash_undefined__":t,this};var rt=Array.prototype.splice;function nt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}nt.prototype.clear=function(){this.__data__=[],this.size=0},nt.prototype.delete=function(e){var t=this.__data__,r=tt(t,e);return!(r<0)&&(r==t.length-1?t.pop():rt.call(t,r,1),--this.size,!0)},nt.prototype.get=function(e){var t=this.__data__,r=tt(t,e);return r<0?void 0:t[r][1]},nt.prototype.has=function(e){return tt(this.__data__,e)>-1},nt.prototype.set=function(e,t){var r=this.__data__,n=tt(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};const ot=ie(X,"Map");function at(e,t){var r,n,o=e.__data__;return("string"==(n=typeof(r=t))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof t?"string":"hash"]:o.map}function it(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function lt(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e}it.prototype.clear=function(){this.size=0,this.__data__={hash:new et,map:new(ot||nt),string:new et}},it.prototype.delete=function(e){var t=at(this,e).delete(e);return this.size-=t?1:0,t},it.prototype.get=function(e){return at(this,e).get(e)},it.prototype.has=function(e){return at(this,e).has(e)},it.prototype.set=function(e,t){var r=at(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};const ct=Ye(Object.getPrototypeOf,Object);function st(e){var t=this.__data__=new nt(e);this.size=t.size}st.prototype.clear=function(){this.__data__=new nt,this.size=0},st.prototype.delete=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r},st.prototype.get=function(e){return this.__data__.get(e)},st.prototype.has=function(e){return this.__data__.has(e)},st.prototype.set=function(e,t){var r=this.__data__;if(r instanceof nt){var n=r.__data__;if(!ot||n.length<199)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new it(n)}return r.set(e,t),this.size=r.size,this};var ut="object"==typeof exports&&exports&&!exports.nodeType&&exports,pt=ut&&"object"==typeof module&&module&&!module.nodeType&&module,dt=pt&&pt.exports===ut?X.Buffer:void 0,ft=dt?dt.allocUnsafe:void 0;function vt(){return[]}var bt=Object.prototype.propertyIsEnumerable,yt=Object.getOwnPropertySymbols;const mt=yt?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a}(yt(e),(function(t){return bt.call(e,t)})))}:vt;const ht=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)lt(t,mt(e)),e=ct(e);return t}:vt;function gt(e,t,r){var n=t(e);return F(e)?n:lt(n,r(e))}function _t(e){return gt(e,qe,mt)}function jt(e){return gt(e,Je,ht)}const xt=ie(X,"DataView");const wt=ie(X,"Promise");const kt=ie(X,"Set");var Pt="[object Map]",Ct="[object Promise]",Vt="[object Set]",Ot="[object WeakMap]",Xt="[object DataView]",Bt=Q(xt),Et=Q(ot),St=Q(wt),At=Q(kt),Nt=Q(le),It=U;(xt&&It(new xt(new ArrayBuffer(1)))!=Xt||ot&&It(new ot)!=Pt||wt&&It(wt.resolve())!=Ct||kt&&It(new kt)!=Vt||le&&It(new le)!=Ot)&&(It=function(e){var t=U(e),r="[object Object]"==t?e.constructor:void 0,n=r?Q(r):"";if(n)switch(n){case Bt:return Xt;case Et:return Pt;case St:return Ct;case At:return Vt;case Nt:return Ot}return t});const $t=It;var zt=Object.prototype.hasOwnProperty;const Mt=X.Uint8Array;function Ut(e){var t=new e.constructor(e.byteLength);return new Mt(t).set(new Mt(e)),t}var Dt=/\w*$/;var Ft=B?B.prototype:void 0,Gt=Ft?Ft.valueOf:void 0;var Rt="[object Boolean]",Yt="[object Date]",Tt="[object Map]",Lt="[object Number]",qt="[object RegExp]",Wt="[object Set]",Ht="[object String]",Jt="[object Symbol]",Kt="[object ArrayBuffer]",Qt="[object DataView]",Zt="[object Float32Array]",er="[object Float64Array]",tr="[object Int8Array]",rr="[object Int16Array]",nr="[object Int32Array]",or="[object Uint8Array]",ar="[object Uint8ClampedArray]",ir="[object Uint16Array]",lr="[object Uint32Array]";function cr(e,t,r){var n,o,a,i=e.constructor;switch(t){case Kt:return Ut(e);case Rt:case Yt:return new i(+e);case Qt:return function(e,t){var r=t?Ut(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}(e,r);case Zt:case er:case tr:case rr:case nr:case or:case ar:case ir:case lr:return function(e,t){var r=t?Ut(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}(e,r);case Tt:return new i;case Lt:case Ht:return new i(e);case qt:return(a=new(o=e).constructor(o.source,Dt.exec(o))).lastIndex=o.lastIndex,a;case Wt:return new i;case Jt:return n=e,Gt?Object(Gt.call(n)):{}}}var sr=Ue&&Ue.isMap;const ur=sr?Ie(sr):function(e){return D(e)&&"[object Map]"==$t(e)};var pr=Ue&&Ue.isSet;const dr=pr?Ie(pr):function(e){return D(e)&&"[object Set]"==$t(e)};var fr=1,vr=2,br=4,yr="[object Arguments]",mr="[object Function]",hr="[object GeneratorFunction]",gr="[object Object]",_r={};function jr(e,t,r,n,o,a){var i,l=t&fr,c=t&vr,s=t&br;if(r&&(i=o?r(e,n,o,a):r(e)),void 0!==i)return i;if(!G(e))return e;var u=F(e);if(u){if(i=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&zt.call(e,"index")&&(r.index=e.index,r.input=e.input),r}(e),!l)return function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}(e,i)}else{var p=$t(e),d=p==mr||p==hr;if(Ae(e))return function(e,t){if(t)return e.slice();var r=e.length,n=ft?ft(r):new e.constructor(r);return e.copy(n),n}(e,l);if(p==gr||p==yr||d&&!o){if(i=c||d?{}:function(e){return"function"!=typeof e.constructor||we(e)?{}:se(ct(e))}(e),!l)return c?function(e,t){return he(e,ht(e),t)}(e,function(e,t){return e&&he(t,Je(t),e)}(i,e)):function(e,t){return he(e,mt(e),t)}(e,function(e,t){return e&&he(t,qe(t),e)}(i,e))}else{if(!_r[p])return o?e:{};i=cr(e,p,l)}}a||(a=new st);var f=a.get(e);if(f)return f;a.set(e,i),dr(e)?e.forEach((function(n){i.add(jr(n,t,r,n,e,a))})):ur(e)&&e.forEach((function(n,o){i.set(o,jr(n,t,r,o,e,a))}));var v=u?void 0:(s?c?jt:_t:c?Je:qe)(e);return function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););}(v||e,(function(n,o){v&&(n=e[o=n]),me(i,o,jr(n,t,r,o,e,a))})),i}_r[yr]=_r["[object Array]"]=_r["[object ArrayBuffer]"]=_r["[object DataView]"]=_r["[object Boolean]"]=_r["[object Date]"]=_r["[object Float32Array]"]=_r["[object Float64Array]"]=_r["[object Int8Array]"]=_r["[object Int16Array]"]=_r["[object Int32Array]"]=_r["[object Map]"]=_r["[object Number]"]=_r[gr]=_r["[object RegExp]"]=_r["[object Set]"]=_r["[object String]"]=_r["[object Symbol]"]=_r["[object Uint8Array]"]=_r["[object Uint8ClampedArray]"]=_r["[object Uint16Array]"]=_r["[object Uint32Array]"]=!0,_r["[object Error]"]=_r[mr]=_r["[object WeakMap]"]=!1;function xr(e){return jr(e,5)}const wr=["onDblclick"],kr=e.defineComponent({name:"AreaGradientPoint"}),Pr=e.defineComponent(__spreadProps(__spreadValues({},kr),{props:{index:{type:Number,required:!0},point:{type:Object,required:!0},width:{type:Number,default:0},positions:{type:Object}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>n.activePointIndex===r.index?" active":"")),i=e.computed((()=>({left:r.point.left*((r.width-14)/100)+"px"}))),l=e=>{n.points[r.index].left=e,o({type:n.type},"type")},c=(e,{startX:t,offsetX:n})=>{const o=u(n+=e.pageX-t,r.width);return{positions:{offsetX:n,startX:e.pageX},left:o}},s=f((e=>{const t=e.pageX,o=e.pageY,a=t-(r.positions.x||0);return n.activePointIndex=r.index,{startX:t,startY:o,offsetX:a}}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n})),p=()=>{let e=xr(n.points);if(e.length<=2)return;const t=r.index;e=null==e?void 0:e.filter((e=>e.id!==r.point.id)),n.activePointIndex=0===t?1:t-1,o({points:e},"points")};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(a)}`),style:e.normalizeStyle(e.unref(i)),onMousedown:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(s)&&e.unref(s)(...t)),["stop"])),onDblclick:e.withModifiers(p,["stop"]),onClick:o[1]||(o[1]=e.withModifiers((()=>e.unref(n).activePointIndex=r.index),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(a)}`)},null,2)],46,wr))}}));let Cr;const Vr=new Uint8Array(16);function Or(){if(!Cr&&(Cr="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Cr))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Cr(Vr)}const Xr=[];for(let bn=0;bn<256;++bn)Xr.push((bn+256).toString(16).slice(1));const Br={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Er(e,t,r){if(Br.randomUUID&&!t&&!e)return Br.randomUUID();const n=(e=e||{}).random||(e.rng||Or)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return Xr[e[t+0]]+Xr[e[t+1]]+Xr[e[t+2]]+Xr[e[t+3]]+"-"+Xr[e[t+4]]+Xr[e[t+5]]+"-"+Xr[e[t+6]]+Xr[e[t+7]]+"-"+Xr[e[t+8]]+Xr[e[t+9]]+"-"+Xr[e[t+10]]+Xr[e[t+11]]+Xr[e[t+12]]+Xr[e[t+13]]+Xr[e[t+14]]+Xr[e[t+15]]}(n)}const Sr=e.defineComponent({name:"AreaGradientPoints"}),Ar=e.defineComponent(__spreadProps(__spreadValues({},Sr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),i=e.computed((()=>({background:d(r.points,"linear",90)}))),l=e=>{const{x:t=0,width:o=0}=a.value||{},i=u(e.pageX-t,o),{red:l,green:c,blue:s,alpha:p}=r,d=xr(r.points),f={id:Er(),red:l,green:c,blue:s,alpha:p,left:i};null==d||d.push(f),r.activePointIndex=d.findIndex((e=>e.id===f.id)),n({points:d},"points")};return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient border-box w-full h-14px relative cursor-pointer rounded-10px mb-8px",style:e.normalizeStyle(e.unref(i)),onClick:l},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:o,class:"wh-full relative"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).points,((t,r)=>{var n;return e.openBlock(),e.createBlock(Pr,{key:t.id,index:r,point:t,positions:e.unref(a),width:null==(n=e.unref(a))?void 0:n.width},null,8,["index","point","positions","width"])})),128))],512)],4))}})),Nr={class:"flex flex-col px-16px"},Ir={class:"flex pb-16px"},$r={class:"flex flex-col flex-1"},zr=e.defineComponent({name:"Area"}),Mr=e.defineComponent(__spreadProps(__spreadValues({},zr),{setup(t){const r=e.inject("colorPickerState");return(t,n)=>(e.openBlock(),e.createElementBlock("div",Nr,[e.createVNode(h),e.unref(r).isGradient?(e.openBlock(),e.createBlock(Ar,{key:0})):e.createCommentVNode("",!0),e.createElementVNode("div",Ir,[e.createVNode(j),e.createElementVNode("div",$r,[e.createVNode(w),e.createVNode(C)])])]))}})),Ur={class:"flex items-center relative w-full rounded-6px text-[#28314d]"},Dr=["maxlength","type"],Fr={class:"text-12px lining-15px font-bold mt-6px mb-0 text-[#1f2667]"},Gr=e.defineComponent({name:"Input"}),Rr=m(e.defineComponent(__spreadProps(__spreadValues({},Gr),{props:{value:{default:""},label:{default:""},classes:{default:""},maxLen:{default:"3"},type:{default:"text"}},emits:["input","blur","focus","update:value"],setup(t,{emit:r}){const n=t,o=e.computed({get:()=>n.value,set:e=>{r("update:value",e)}}),a=e=>{r("input",e)},i=()=>{r("blur")},l=()=>{r("focus")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-shrink-0 items-center flex-col",n.classes])},[e.createElementVNode("div",Ur,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=t=>e.isRef(o)?o.value=t:null),class:"w-full outline-0 text-[#1f2667] text-center font-bold text-12px",maxlength:t.maxLen,type:n.type,onFocus:l,onBlur:i,onInput:a},null,40,Dr),[[e.vModelDynamic,e.unref(o),void 0,{trim:!0}]])]),e.createElementVNode("div",Fr,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-6124313e"]]),Yr=e.defineComponent({name:"PreviewHex"}),Tr=e.defineComponent(__spreadProps(__spreadValues({},Yr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>l(r.red,r.green,r.blue))),a=e=>{let t=e.target.value;if(!t&&0!==t)return;const r=s(t);r&&n(r)};return(t,r)=>(e.openBlock(),e.createBlock(Rr,{value:e.unref(o),label:"Hex","max-len":"7",classes:"hex mr-8px",onInput:a},null,8,["value"]))}})),Lr=e.defineComponent({name:"PreviewRGBItem"}),qr=e.defineComponent(__spreadProps(__spreadValues({},Lr),{props:{type:{default:"text"},label:{default:""}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>{let e=0;switch(r.label){case"R":e=n.red;break;case"G":e=n.green;break;case"B":e=n.blue;break;case"A":e=~~(100*n.alpha)}return e})),i=t=>{let a=+t.target.value;switch(a<=0?a=0:a>255?a=255:"A"===r.label&&a>100&&(a=100),r.label){case"R":n.red=a;break;case"G":n.green=a;break;case"B":n.blue=a;case"A":n.alpha=a/100}e.nextTick((()=>{const e=s(l(n.red,n.green,n.blue));"A"===r.label?e.alpha=o(e):o(e)}))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(Rr,{value:e.unref(a),label:r.label,type:r.type,classes:"A"!==r.label?"mr-8px":"",onInput:i},null,8,["value","label","type","classes"])]))}})),Wr=e.defineComponent({name:"PreviewRGB"}),Hr=e.defineComponent(__spreadProps(__spreadValues({},Wr),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(qr,{type:"number",label:"R"}),e.createVNode(qr,{type:"number",label:"G"}),e.createVNode(qr,{type:"number",label:"B"}),e.createVNode(qr,{type:"number",label:"A"})],64))})),Jr={class:"color-preview-area mb-8px px-16px"},Kr={class:"w-full flex justify-between"},Qr=e.defineComponent({name:"Preview"}),Zr=e.defineComponent(__spreadProps(__spreadValues({},Qr),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",Jr,[e.createElementVNode("div",Kr,[e.createVNode(Tr),e.createVNode(Hr)])]))})),en=e.defineComponent({name:"Solid"}),tn=e.defineComponent(__spreadProps(__spreadValues({},en),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Mr),e.createVNode(Zr)],64))})),rn={class:"gradient-controls border-box flex justify-between items-center w-full mb-8px px-16px"},nn={class:"flex flex-1"},on={key:0,class:"relative mr-24px"},an=[(t=>(e.pushScopeId("data-v-14668158"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)))],ln={class:"gradient-degree-value flex justify-center items-center"},cn=e.defineComponent({name:"GradientControls"}),sn=m(e.defineComponent(__spreadProps(__spreadValues({},cn),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>r.type)),a=e.computed((()=>r.degree)),i=e=>{n({type:e},"type")},l=e.ref(!0),c=()=>{if(l.value)return void(l.value=!1);let e=(r.degree||0)+45;e>=360&&(e=0),n({degree:~~e},"degree")},s=e.computed((()=>({transform:`rotate(${r.degree}deg)`}))),u=f((e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}}),((e,{centerX:t,centerY:r})=>{l.value=!0;const o=function(e,t,r,n){return Math.atan2(e-r,t-n)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n({degree:~~o},"degree")}),(e=>{const t=e.target.classList;l.value=!1,!t.contains("gradient-degrees")&&t.contains("icon-rotate")}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",rn,[e.createElementVNode("div",nn,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===e.unref(o)?"active":"")),onClick:r[0]||(r[0]=e=>i("linear"))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===e.unref(o)?"active":"")),onClick:r[1]||(r[1]=e=>i("radial"))},null,2)]),"linear"===e.unref(o)?(e.openBlock(),e.createElementBlock("div",on,[e.createElementVNode("div",{class:"gradient-degrees cursor-pointer flex justify-center items-center",onMousedown:r[2]||(r[2]=(...t)=>e.unref(u)&&e.unref(u)(...t)),onClick:c},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(s))},an,4)],32),e.createElementVNode("div",ln,[e.createElementVNode("p",null,e.toDisplayString(e.unref(a))+"°",1)])])):e.createCommentVNode("",!0)]))}})),[["__scopeId","data-v-14668158"]]),un=e.defineComponent({name:"Gradient"}),pn=e.defineComponent(__spreadProps(__spreadValues({},un),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(sn),e.createVNode(Mr),e.createVNode(Zr)],64))})),dn={class:"picker-color-ui border-box m-8px bg-[#fff] flex flex-col slelect-none"},fn={class:"btns flex justify-end items-center select-none"},vn=e.defineComponent({name:"ColorPicker"});return e.defineComponent(__spreadProps(__spreadValues({},vn),{props:{isGradient:{type:Boolean,default:!1},color:{type:Object,default:()=>({red:255,green:0,blue:0,alpha:1})},gradient:{type:Object,default:()=>({type:"linear",degree:0,points:[{id:Er(),left:0,red:0,green:0,blue:0,alpha:1},{id:Er(),left:100,red:255,green:0,blue:0,alpha:1}]})},cancelText:{type:String,default:"Cancel"},cancelColor:{type:String,default:"#333"},cancelBg:{type:String,default:"#fff"},confirmText:{type:String,default:"Confirm"},confirmColor:{type:String,defualt:"#333"},confirmBg:{type:String,defualt:"#fff"}},emits:["change"],setup(t,{expose:r,emit:n}){var o,a,i,l,c,s,u,f,v,b;const y=t,m=e.reactive({isGradient:y.isGradient,red:y.isGradient?null==(o=y.gradient)?void 0:o.points[1].red:null==(a=y.color)?void 0:a.red,green:y.isGradient?null==(i=y.gradient)?void 0:i.points[1].green:null==(l=y.color)?void 0:l.green,blue:y.isGradient?null==(c=y.gradient)?void 0:c.points[1].blue:null==(s=y.color)?void 0:s.blue,alpha:y.isGradient?null==(u=y.gradient)?void 0:u.points[0].alpha:null==(f=y.color)?void 0:f.alpha,hue:0,saturation:100,value:100,style:"",type:"linear",degree:0,activePointIndex:1,activePoint:xr(null==(v=y.gradient)?void 0:v.points[0]),points:xr(null==(b=y.gradient)?void 0:b.points)});const h=e=>{e&&"function"==typeof e&&e()},g=e=>{const{isGradient:t,style:r,type:o,degree:a,points:i,red:l,green:c,blue:s,alpha:u,hue:p}=m;n("change",t?{style:r,gradient:{type:o,degree:a,points:i}}:{style:r,color:{red:l,green:c,blue:s,hue:p,alpha:u}}),e&&"function"==typeof e&&e()};return e.provide("colorPickerState",m),e.provide("updateColor",(({red:e,green:t,blue:r,alpha:n,hue:o,saturation:a,value:i,points:l,type:c,degree:s},u)=>{const f={red:e,green:t,blue:r,alpha:n,hue:o,saturation:a,value:i,points:l,type:c,degree:s};y.isGradient?function(e,t){const{red:r=0,green:n=0,blue:o=0,alpha:a,hue:i,saturation:l,value:c,points:s,type:u,degree:p}=e;t?m[t]=e[t]:(m.red=r,m.green=n,m.blue=o,s&&(m.points=s),u&&(m.type=u),p&&(m.degree=p),a&&(m.alpha=a),l&&(m.saturation=l),c&&(m.value=c),i&&(m.hue=i));m.style=d(m.points,m.type,m.degree)}(f,u):function(e,t){const{red:r=0,green:n=0,blue:o=0,alpha:a,hue:i,saturation:l,value:c}=e;t?m[t]=e[t]:(m.red=r,m.green=n,m.blue=o,a&&(m.alpha=a),l&&(m.saturation=l),c&&(m.value=c),i&&(m.hue=i));m.style=p(m.red,m.green,m.blue,m.alpha)}(f,u)})),r({onClose:h,onConfirm:g}),(t,r)=>(e.openBlock(),e.createElementBlock("div",dn,[y.isGradient?(e.openBlock(),e.createBlock(pn,{key:0})):(e.openBlock(),e.createBlock(tn,{key:1})),e.createElementVNode("div",fn,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.cancelColor,backgroundColor:y.cancelBg}),onClick:h},e.toDisplayString(y.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.confirmColor,backgroundColor:y.confirmBg}),onClick:g},e.toDisplayString(y.confirmText),5)])]))}}))}));

index.d.ts

@@ -6,7 +6,8 @@ /*
  * @LastEditors: June
- * @LastEditTime: 2023-04-26 12:11:46
+ * @LastEditTime: 2023-10-03 22:41:21
  */
+export * from './types/index';
 declare module 'color-gradient-picker-vue3' {
-    const content: any;
-    export default content;
+  const content: any;
+  export default content;
 }

package.json

 {
-    "name": "color-gradient-picker-vue3",
-    "version": "1.1.2",
-    "type": "module",
-    "author": "June",
-    "description": "Color and gradient picker for vue3.js",
-    "keywords": [
-        "vue",
-        "vue.js",
-        "vue3",
-        "color-picker",
-        "picker",
-        "gradient"
-    ],
-    "tags": [
-        "vue",
-        "vue.js",
-        "vue3",
-        "color-picker",
-        "gradient"
-    ],
-    "files": [
-        "dist",
-        "lib",
-        "index.d.ts"
-    ],
-    "main": "./dist/color-gradient-picker-vue3.umd.js",
-    "module": "./dist/color-gradient-picker-vue3.es.js",
-    "exports": {
-        ".": {
-            "require": "./dist/color-gradient-picker-vue3.umd.js",
-            "import": "./dist/color-gradient-picker-vue3.es.js"
-        },
-        "./dist/style.css": "./dist/style.css"
+  "name": "color-gradient-picker-vue3",
+  "version": "2.0.0",
+  "type": "module",
+  "author": "June",
+  "description": "Color and gradient picker for vue3.js",
+  "keywords": [
+    "vue",
+    "vue.js",
+    "vue3",
+    "color-picker",
+    "picker",
+    "gradient"
+  ],
+  "tags": [
+    "vue",
+    "vue.js",
+    "vue3",
+    "color-picker",
+    "gradient"
+  ],
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "main": "./dist/color-gradient-picker-vue3.umd.js",
+  "module": "./dist/color-gradient-picker-vue3.es.js",
+  "exports": {
+    ".": {
+      "require": "./dist/color-gradient-picker-vue3.umd.js",
+      "import": "./dist/color-gradient-picker-vue3.es.js"
     },
-    "scripts": {
-        "dev": "vite",
-        "build": "vue-tsc && vite build",
-        "preview": "vite preview",
-        "eslint": "eslint --ext .ts,.tsx,.jsx,.js,.vue --ignore-path .gitignore --fix src",
-        "prettier": "prettier --write ."
-    },
-    "config": {
-        "commitizen": {
-            "path": "node_modules/cz-conventional-changelog"
-        }
-    },
-    "license": "MIT",
-    "homepage": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git#readme",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git.git"
-    },
-    "bugs": {
-        "url": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git/issues"
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "eslint": "eslint --ext .ts,.tsx,.jsx,.js,.vue --ignore-path .gitignore --fix src",
+    "prettier": "prettier --write ."
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
     }
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git/issues"
+  },
+  "devDependencies": {
+    "rollup-plugin-visualizer": "^5.9.2",
+    "unocss": "^0.56.5",
+    "unplugin-auto-import": "^0.16.4"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "uuid": "^9.0.1"
+  }
 }

README.md

@@ -23,3 +23,3 @@ <!--
 
-```html
+````html
 <template>
@@ -30,5 +30,6 @@ <!-- 纯色 -->
             :color="color"
-            :on-start-change="(color) => onChange(color, 'start')"
-            :on-change="(color) => onChange(color, 'change')"
-            :on-end-change="(color) => onChange(color, 'end')"
+            cancel-text="cancel"
+            cancel-color="red"
+            @on-change="onChange"
+            @on-cancel="onCancel"
         />
@@ -41,5 +42,4 @@ </div>
             :is-gradient="true"
-            :on-start-change="(color) => onChange(color, 'start')"
-            :on-change="(color) => onChange(color, 'change')"
-            :on-end-change="(color) => onChange(color, 'end')"
+            @on-change="onChange"
+            @on-cancel="onCancel"
         />
@@ -49,45 +49,2 @@ </div>
 
-<script setup>
-    import { ref } from 'vue';
-    import ColorPicker from 'color-gradient-picker-vue3';
-    import 'color-gradient-picker-vue3/dist/style.css';
-
-    const color = ref({
-        red: 255,
-        green: 0,
-        blue: 0,
-        alpha: 1,
-    });
-
-    const onChange = (attrs, name) => {
-        color.value = { ...attrs };
-    };
-</script>
-```
-
-#### ts Demo
-
-```html
-<template>
-    <!-- 纯色 -->
-    <div>
-        <ColorPicker
-            :color="color"
-            :on-start-change="(color: Iattrs) => onChange(color, 'start')"
-            :on-change="(color: Iattrs) => onChange(color, 'change')"
-            :on-end-change="(color: Iattrs) => onChange(color, 'end')"
-        />
-    </div>
-
-    <!-- 渐变 -->
-    <div>
-        <ColorPicker
-            :is-gradient="true"
-            :on-start-change="(color) => onChange(color, 'start')"
-            :on-change="(color) => onChange(color, 'change')"
-            :on-end-change="(color) => onChange(color, 'end')"
-        />
-    </div>
-</template>
-
 <script lang="ts" setup>
@@ -98,18 +55,4 @@ import { ref } from 'vue';
     import 'color-gradient-picker-vue3/dist/style.css';
-    interface IPoitItem {
-        alpha?: number | string;
-        blue?: number | string;
-        green?: number | string;
-        left?: number | string;
-        red?: number | string;
-    }
 
-    interface Iattrs {
-        degree: number;
-        points: [IPoitItem];
-        style: string;
-        type: string;
-    }
-
-    const color: Ref<IPoitItem | Iattrs> = ref({
+    const color = ref({
         red: 255,
@@ -121,7 +64,4 @@ green: 0,
 
-    const onChange = (attrs: Iattrs, name: string) => {
-        color.value = { ...attrs };
-    };
-</script>
-```
+    const onCancel = () => {
+        console.log('取消');
 
@@ -142,8 +82,8 @@ #### 启动 lib
 pnpm dev
-```
+````
 
 #### Todo
 
--   [x] 支持 monorepo
+- [x] 支持 monorepo
 
--   [ ] fix to typescript
+- [ ] fix to typescript

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125810

increased by58.88%

Lines of code

2475

increased by78.19%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

3

increased byInfinity%

Number of lines in readme file

83

decreased by-41.96%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedlodash-es@^4.17.21

• + Addeduuid@^9.0.1

• + Addedlodash-es@4.17.21(transitive)

• + Addeduuid@9.0.1(transitive)