UNPKG

colorspick

Version:

颜色选择器

github.com/YunZhonJun/colorspick

YunZhonJun/colorspick

51 lines (49 loc) • 23.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
(function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y.ColorsPick={},y.Vue))})(this,function(y,e){"use strict";const z=h=>{const r=document.createElement("textarea");r.setAttribute("readonly","readonly"),r.value=h,document.body.appendChild(r),r.select();const t=document.execCommand("copy");return document.body.removeChild(r),t};function U(){const h=[];for(let p=0;p<3;p++)h.push(Math.floor(128*Math.random()+128));const[r,t,i]=h;return`#${r.toString(16).length>1?r.toString(16):"0"+r.toString(16)}${t.toString(16).length>1?t.toString(16):"0"+t.toString(16)}${i.toString(16).length>1?i.toString(16):"0"+i.toString(16)}`}class q{constructor(r,t,i){this.colorArr=r,this.slideW=Number(t),this.iconS=Number(i),this.biLi=this.slideW/100,this.ofLeft=0,this.dwonWindowX=0,this.downColorX=0,this.downColorIndex=0,this.isMove=!1,this.evArr=[],this.startEvName=null,this.moveEvName=null,this.endEvName=null,this.init()}init(){this.colorArr.forEach(c=>{if(c.tiptoggle="hide",c.disabled=!1,c.zindexUp="",c.pos===0){const p=-this.iconS/2;c.x=p}else{const p=c.pos*this.biLi-this.iconS/2;c.x=p}});const[r,t,i]=this.pcOrMobileEv();this.startEvName=r,this.moveEvName=t,this.endEvName=i}rmSpliceUpColorIndex(r){const t=this.colorArr[r];this.colorArr.splice(r,1),this.colorArr.splice(this.downColorIndex,0,t),this.downColorIndex=r}sortPos(){const r=this.colorArr.length-1,t=this.colorArr[this.downColorIndex].pos;if(this.downColorIndex===0){const i=this.downColorIndex+1,c=this.colorArr[i].pos;t>c&&this.rmSpliceUpColorIndex(i)}else if(this.downColorIndex===r){const i=this.downColorIndex-1,c=this.colorArr[i].pos;t<c&&this.rmSpliceUpColorIndex(i)}else{const i=this.downColorIndex+1,c=this.downColorIndex-1,p=this.colorArr[c].pos,f=this.colorArr[i].pos,l=t-p,C=f-t;Math.min(l,C)===l?t<p&&this.rmSpliceUpColorIndex(c):t>f&&this.rmSpliceUpColorIndex(i)}}mouseover(r){if(this.isMove)return!1;this.colorArr[r].zindexUp="z-index-up",this.colorArr[r].tiptoggle="show"}mouseout(r){if(this.isMove)return!1;this.colorArr[r].zindexUp="",this.colorArr[r].tiptoggle="hide"}updataPos(r){r.forEach(t=>{const i=this.colorArr[t].pos*this.biLi-this.iconS/2;this.colorArr[t].x=i})}down(r,t){t.type==="touchstart"?(this.dwonWindowX=t.changedTouches[0].clientX,this.colorArr[this.downColorIndex].tiptoggle="hide",this.colorArr[r].tiptoggle="show"):this.dwonWindowX=t.x,this.ofLeft=t.target.getBoundingClientRect().left,this.colorArr[r].zindexUp="z-index-up",this.colorArr[r].disabled=!1,this.downColorX=this.colorArr[r].x,this.downColorIndex=r,this.evArr.push(i=>this.up(i)),document.addEventListener(this.endEvName,this.evArr[this.evArr.length-1]),this.evArr.push(i=>this.move(i)),document.addEventListener(this.moveEvName,this.evArr[this.evArr.length-1])}move(r){let t=0;if(t=this.startEvName==="touchstart"?r.changedTouches[0].clientX-this.dwonWindowX:r.x-this.dwonWindowX,this.isMove=!0,this.moveFinish(this.downColorIndex,t)===!1||this.isMove===!1)return!1;let c=this.downColorX+t;const p=this.slideW-this.iconS/2,f=-this.iconS/2;c>p?c=p:c<f&&(c=f),this.colorArr[this.downColorIndex].x=c;const l=Math.round(Math.abs((c+this.iconS/2)/this.biLi));this.colorArr[this.downColorIndex].pos=l,this.sortPos()}up(r){this.isMove===!0&&(this.colorArr[this.downColorIndex].disabled=!0,this.isMove=!1),this.evArr.forEach(t=>{document.removeEventListener(this.moveEvName,t),document.removeEventListener(this.endEvName,t)}),this.evArr=[],this.startEvName==="touchstart"?this.colorArr[this.downColorIndex].tiptoggle="show":this.colorArr[this.downColorIndex].tiptoggle="hide"}moveFinish(r,t){const i=this.colorArr[r].x>this.slideW-this.iconS/2,c=this.colorArr[r].x<-this.iconS/2;let p=null,f=t>0?"R":"L";return p=(f==="R"&&i===!1)===!0||(f==="L"&&c===!1)===!0,p}pcOrMobileEv(){return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)!==null?["touchstart","touchmove","touchend"]:["mousedown","mousemove","mouseup"]}}const ve="",X=(h,r)=>{const t=h.__vccOpts||h;for(const[i,c]of r)t[i]=c;return t},v=h=>(e.pushScopeId("data-v-537b9b8a"),h=h(),e.popScopeId(),h),j={key:0,class:"colors-pick flex"},G={class:"flex"},Z=["disabled","value"],Q=v(()=>e.createElementVNode("svg",{t:"1681639555524",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"6780",width:"200",height:"200"},[e.createElementVNode("path",{d:"M896 896V128H320V0h704v896h-128zM768 192h64v832H0V192h768zM128 896h576V320H128v576z",fill:"#4C89FB","p-id":"6781"})],-1)),J=["onClick"],K={key:1,class:"cp-gradc"},Y=v(()=>e.createElementVNode("svg",{t:"1681639555524",class:"icon icon-defalut hover active cue-po cp-gradc-copy",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"6780",width:"200",height:"200"},[e.createElementVNode("path",{d:"M896 896V128H320V0h704v896h-128zM768 192h64v832H0V192h768zM128 896h576V320H128v576z",fill:"#4C89FB","p-id":"6781"})],-1)),ee={class:"line-box"},te={class:"rotate-val"},oe={class:"cp-color-bar flex"},re={class:"cp-color-set flex"},ae=["onMouseover","onMousedown","onMouseenter","onTouchstart"],le=["disabled","value","onInput"],ne={class:"rotate-close-set flex"},ie=["value"],se=v(()=>e.createElementVNode("svg",{t:"1681721662679",class:"icon icon-defalut active hover cue-po",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"17550",width:"200",height:"200"},[e.createElementVNode("path",{d:"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z",fill:"#F55300","p-id":"17551"}),e.createElementVNode("path",{d:"M258.56 358.912l434.432 434.432a51.2 51.2 0 0 0 72.3968-72.3968L330.9568 286.5152A51.2 51.2 0 1 0 258.56 358.912z",fill:"#F9F9F9","p-id":"17552"}),e.createElementVNode("path",{d:"M258.56 712.192l434.432-434.432a51.2 51.2 0 0 1 72.448 72.3968l-434.4832 434.432A51.2 51.2 0 1 1 258.56 712.192z",fill:"#F9F9F9","p-id":"17553"})],-1)),ce={class:"set-color-bar flex"},de=["disabled","value","onInput"],he=v(()=>e.createElementVNode("svg",{t:"1681701231439",class:"icon icon-defalut",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"9826",width:"200",height:"200"},[e.createElementVNode("path",{d:"M627.2 972.8c19.456 19.456 51.2 25.6 76.8 12.8 45.056-19.456 83.456-38.4 121.856-70.656 19.456-19.456 32.256-44.544 25.6-76.8-6.656-38.4 0-83.456 19.456-121.856s57.344-64 96.256-76.8c25.6-6.656 44.544-32.256 51.2-57.344 6.656-45.056 6.656-96.256 0-140.8-6.656-25.6-25.6-51.2-51.2-57.856-38.4-12.8-76.8-38.4-96.256-76.8s-25.6-83.456-19.456-121.856c6.656-25.6-6.656-57.856-25.6-76.8-38.4-31.744-76.8-51.2-121.856-70.656-25.6-12.8-57.344-6.656-76.8 12.8C563.2 109.056 460.8 109.056 396.8 51.2c-19.456-19.456-51.2-25.6-76.8-12.8-44.544 18.944-83.456 38.4-121.856 70.656-25.6 19.456-32.256 45.056-25.6 76.8C192 268.8 140.8 358.4 57.856 384c-32.256 6.656-51.2 32.256-51.2 57.856C0 467.456 0 486.4 0 512s0 45.056 6.656 70.656c0 25.6 19.456 51.2 51.2 57.344 38.4 12.8 76.8 38.4 96.256 76.8s25.6 83.456 18.944 121.856c-6.656 25.6 6.656 57.344 25.6 76.8 38.4 32.256 76.8 51.2 121.856 70.656 25.6 12.8 57.856 6.656 76.8-12.8 63.488-64.512 165.888-64.512 229.888-0.512z",fill:"#919BF2","p-id":"9827"}),e.createElementVNode("path",{d:"M512 512m-147.456 0a147.456 147.456 0 1 0 294.912 0 147.456 147.456 0 1 0-294.912 0Z",fill:"#FFFFFF","p-id":"9828"})],-1)),pe=v(()=>e.createElementVNode("svg",{t:"1681701036913",class:"icon active icon-defalut",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"6896",width:"200",height:"200"},[e.createElementVNode("path",{d:"M512 0a89.043478 89.043478 0 0 1 89.043478 89.043478v44.521739H422.956522V89.043478a89.043478 89.043478 0 0 1 89.043478-89.043478zM155.826087 178.086957v756.869565a89.043478 89.043478 0 0 0 89.043478 89.043478h534.26087a89.043478 89.043478 0 0 0 89.043478-89.043478V178.086957z m222.608696 623.304347a44.521739 44.521739 0 0 1-89.043479 0V311.652174a44.521739 44.521739 0 0 1 89.043479 0z m178.086956 0a44.521739 44.521739 0 0 1-89.043478 0V311.652174a44.521739 44.521739 0 0 1 89.043478 0z m178.086957 0a44.521739 44.521739 0 0 1-89.043479 0V311.652174a44.521739 44.521739 0 0 1 89.043479 0z",fill:"#F55E55","p-id":"6897"}),e.createElementVNode("path",{d:"M66.782609 89.043478m44.521739 0l801.391304 0q44.521739 0 44.521739 44.521739l0 0q0 44.521739-44.521739 44.52174l-801.391304 0q-44.521739 0-44.521739-44.52174l0 0q0-44.521739 44.521739-44.521739Z",fill:"#F9BBB8","p-id":"6898"})],-1)),ge=v(()=>e.createElementVNode("svg",{t:"1681700429214",class:"icon icon-defalut",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"4388",width:"200",height:"200"},[e.createElementVNode("path",{d:"M512 42.666667C253.866667 42.666667 42.666667 253.866667 42.666667 512s211.2 469.333333 469.333333 469.333333 469.333333-211.2 469.333333-469.333333S770.133333 42.666667 512 42.666667z m213.333333 512h-170.666666v170.666666c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667v-170.666666h-170.666666c-23.466667 0-42.666667-19.2-42.666667-42.666667s19.2-42.666667 42.666667-42.666667h170.666666v-170.666666c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667v170.666666h170.666666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z",fill:"#80B8F8","p-id":"4389"})],-1)),ue=["onClick"],me=v(()=>e.createElementVNode("div",{class:"copy-success flex"},[e.createElementVNode("span",null,"复制成功"),e.createElementVNode("svg",{t:"1681647941254",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"8621",width:"200",height:"200"},[e.createElementVNode("path",{d:"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z",fill:"#67EBB2",opacity:".15","p-id":"8622"}),e.createElementVNode("path",{d:"M512 814.545455a302.545455 302.545455 0 0 1-213.934545-516.48 302.545455 302.545455 0 1 1 427.86909 427.86909A300.555636 300.555636 0 0 1 512 814.545455z m-124.148364-328.052364a36.072727 36.072727 0 0 0-25.6 61.486545l92.997819 93.730909a29.917091 29.917091 0 0 0 42.46109 0l165.853091-166.74909a29.928727 29.928727 0 0 0-40.226909-44.218182l-127.418182 104.808727a29.905455 29.905455 0 0 1-38.597818-0.488727l-45.905454-39.761455a36.002909 36.002909 0 0 0-23.563637-8.808727z",fill:"#20D76D","p-id":"8623"})])],-1)),_=X(Object.assign({name:"ColorsPick"},{props:{cpEvs:{type:String,default:"input"},gradResData:{default:"all",type:String},cpSwatSize:{default:"30px",type:String},cpSwatActive:{default:"love",type:String},cpSwatGap:{default:"5px",type:String},cpSwatWidth:{default:"150px",type:String},cpSwat:{default:!1,type:Boolean},swateColors:{default:["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF"],type:[Array,String,Object]},cpSwatColors:{default:["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF"],type:Array},gradColorNum:{default:99,type:Number},zIndex:{default:1,type:Number},cpSwatActiveIndex:{default:0,type:Number},gradColorRotate:{default:90,type:Number},gradDashColor:{default:"rgba(0,0,0,.4)",type:String},gradDashActiveColor:{default:"#fff",type:String},gradDashSize:{default:70,type:Number},gradDashLineHeight:{default:10,type:Number},gradRangeColor:{default:"#cbcbcb",type:String},gradIconSize:{default:15,type:Number},cpBorder:{default:"2px #f4f4f4",type:String},gradRangeWidth:{default:200,type:Number},gradRangeHeight:{default:"2px",type:String},height:{default:"200px",type:[String,Number]},width:{default:"200px",type:[String,Number]},modelValue:{type:[String,Array,Object],default:"#05b9e6"},cpType:{default:"onec",type:String,validator(h){return["onec","gradc","swate"].includes(h)}},copy:{default:!0,type:Boolean},color:{type:[String,Array],default:"#05b9e6"},round:{type:Boolean,default:!1},toastTime:{type:Number,default:1e3},disabled:{type:Boolean,default:!0},square:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(h,{emit:r}){const t=h;e.useCssVars(o=>({"014e0460":e.unref(F).dashSize,"73a7a4b4":e.unref(F).dashTop,"4578ab38":e.unref(F).gradLineDashHeight,"641088f6":t.gradIconSize+"px","55b3a1e7":t.gradRangeHeight,"03254ae7":t.gradRangeWidth+"px",d1b1f2ba:t.gradRangeColor,b78bb870:t.cpBorder,"7d84c3a3":e.unref(V),"77a3210f":g.value})),e.useAttrs();let i,c=null;const p=o=>{const s=o.type,n=o.target.value;(t.cpEvs==="change"&&s==="change"||t.cpEvs==="input"&&s==="input")&&(g.value=n,r("update:modelValue",g.value)),b.value=f.value},f=e.computed(()=>b.value=t.cpSwatColors.findIndex(o=>o.toLocaleLowerCase()===g.value.toLocaleLowerCase()));e.onMounted(()=>{t.cpType==="gradc"&&(i=new q(l.value,t.gradRangeWidth,t.gradIconSize),e.watch(l,x,{deep:!0}))});const l=e.ref([]),C=e.computed(()=>{let o="";return l.value.forEach((n,a)=>{a===l.value.length-1?o+=n.color+" "+n.pos+"% ":o+=n.color+" "+n.pos+"% ,"}),{"background-image":"-webkit-linear-gradient("+u.rotateDeg+"deg,"+o+")","background-image":"-moz-linear-gradient("+u.rotateDeg+"deg,"+o+")","background-image":"-o-linear-gradient("+u.rotateDeg+"deg,"+o+")","background-image":"linear-gradient("+u.rotateDeg+"deg,"+o+")",width:N.value.w,height:N.value.h}}),u=e.reactive({rotateDeg:Number(t.gradColorRotate),showOrHide:"hide"}),we=o=>{clearTimeout(c),u.rotateDeg=Number(o.target.value),u.showOrHide="show",x(),c=setTimeout(()=>{u.showOrHide="hide"},1e3)},x=()=>{let o="",s=[];const n=u.rotateDeg+"deg";l.value.forEach((a,d)=>{const m=a.color,k=a.pos;s.push({color:m,pos:k}),l.value.length-1===d?o+=m+" "+k+"% ":o+=m+" "+k+"%, "}),o=n+", "+o,t.gradResData==="gradinfo"?w.value=o:t.gradResData==="gradarr"?w.value=s:t.gradResData==="bgcss"?w.value=` background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); `:t.gradResData==="txtcss"?w.value=` background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; `:w.value={rotateDeg:n,colorArr:s,colorInfo:o,bgcss:` background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); `,txtcss:` background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; `,css:` .cp-color { /* 背景渐变 */ background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); /* 文字渐变 */ /* background-image: -webkit-linear-gradient(${o}); background-image: -moz-linear-gradient(${o}); background-image: -o-linear-gradient(${o}); background-image: linear-gradient(${o}); -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;*/ } `},r("update:modelValue",w.value)},E=e.ref(!0),I=(o,s)=>{const n=s.target.value;l.value[o].color=n},be=()=>{const o=l.value.length;if(o>=H.value)return;const s=o-1,n=l.value[s].pos;let a={color:U(),pos:100};if(o===2)l.value[1].pos=50,a.pos=100;else{const d=l.value[o-2].pos,k=Math.round((n-d)/2)+d;l.value[s].pos=k>=100?100:k}a.tiptoggle="hide",l.value.push(a),i.updataPos([o-1,o])},ye=()=>l.value.length>2===!0?(l.value.pop(),!0):!1,$=()=>E.value=!E.value,w=e.ref(),A=e.ref(),D=()=>{let o=null;if(t.cpType==="onec"?o=z(g.value):(w.value===void 0&&x(),typeof w.value=="object"?o=z(JSON.stringify(w.value)):o=z(w.value)),o===!0){A.value=!0;let s=1e3;/^\d+$/.test(t.toastTime)===!0&&(s=t.toastTime),setTimeout(()=>{A.value=!1},s)}},L=/^\d+(px|%|vw|vh|rem|em|pt|pc|in|Q|mm|cm|ex|cap|ch|c|lh|rlh|vi|vb|vmin|vmax)$/,T=/(?=.*\d)^\d+$/,F=e.computed(()=>{const o=t.gradDashSize+"px",s=t.gradDashLineHeight+"px",a=(Number(t.height.match(/\d+/g))-Number(t.gradDashSize)*2)/2+"px";return{dashSize:o,gradLineDashHeight:s,dashTop:a}}),H=e.computed(()=>/(?=.*\d)^([1-9][0-9]|[2-9]{1})$/.test(t.gradColorNum)?t.gradColorNum:99),ke=e.computed(()=>A.value===!0?"show":"hide"),S=e.computed(()=>/^(onec|gradc|swate)$/.test(t.cpType)?t.cpType:"onec"),g=e.ref(),b=e.ref(0),P=e.computed(()=>{let o=t.cpSwatActive;switch(o){case"border":o="active-border";break;case"yes":o="active-yes";break;case"love":o="active-love";break;case"goly":o="active-goly";break;case"square":o="active-square";break;case"circle":o="active-circle";break;default:o="active-love";break}return{swtActive:o}}),W=(o,s)=>{S.value==="swate"?o.disabled===!0&&(g.value=o.color,b.value=s):S.value==="onec"&&(g.value=o,b.value=s),r("update:modelValue",g.value)},R=[{color:"#6284FF",pos:0},{color:"#FF0000",pos:100}];if(S.value==="onec"){if(t.cpSwat===!0){const o=t.cpSwatColors.findIndex(s=>s===t.color);g.value=t.cpSwatColors[o],b.value=o}g.value=t.color,r("update:modelValue",g.value)}else if(S.value==="gradc"){if(Array.isArray(t.color))if(!t.color.some(n=>/^#[a-f\d]{6}$/ig.test(n)===!1)&&t.color.length>1){let n=[],a=[];t.color.length>t.gradColorNum===!0?a=t.color.slice(0,t.gradColorNum):a=t.color;const m=a.length-1;let k=100/m;a.forEach((B,M)=>{if(M===0)n.push({pos:0,color:B});else if(M===m)n.push({pos:100,color:B});else{let O=Math.round(M*k);n.push({pos:O>100?100:O,color:B})}}),l.value=n}else l.value=R;else l.value=R;x()}else{const o=[];t.swateColors.forEach(s=>{s instanceof Object?s.disabled===!0?l.value.push(s):o.unshift(s):l.value.push({disabled:!0,color:s})}),l.value=l.value.concat(o),b.value=t.cpSwatActiveIndex,g.value=l.value[b.value]&&l.value[b.value].color,r("update:modelValue",g.value)}const N=e.computed(()=>{const o=L.test(t.width),s=L.test(t.height),n=T.test(t.width),a=T.test(t.height);let d=0,m=0;return n===!0?d=t.width+"px":o===!0&&(t.cpType==="onec"&&t.width==="200px"?d="30px":d=t.width),a===!0?m=t.height+"px":s===!0&&(t.cpType==="onec"&&t.height==="200px"?m="30px":m=t.height),{w:d,h:m}}),V=e.computed(()=>t.square===!1&&t.round===!1?"3px":t.square===!0?"0":"50%");return(o,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(S)==="onec"?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",G,[e.createElementVNode("input",e.mergeProps({style:{width:e.unref(N).w,height:e.unref(N).h},disabled:!t.disabled,class:"set-color cue-po",type:"color"},o.$attrs,{value:g.value,onChange:p,onInput:p}),null,16,Z),t.copy?(e.openBlock(),e.createElementBlock("div",{key:0,class:"copy color-box active cue-po",onClick:D},[e.createElementVNode("div",null,e.toDisplayString(g.value),1),e.renderSlot(o.$slots,"copy",{},()=>[Q],!0)])):e.createCommentVNode("",!0)]),t.cpType!=="gradc"&&t.cpSwat?(e.openBlock(),e.createElementBlock("div",{key:0,class:"cp-swatches",style:e.normalizeStyle({width:t.cpSwatWidth,gap:t.cpSwatGap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.cpSwatColors,(n,a)=>(e.openBlock(),e.createElementBlock("div",{onClick:d=>W(n,a),class:e.normalizeClass([b.value===a?e.unref(P).swtActive:"","cue-po hover active"]),style:e.normalizeStyle({background:n,width:t.cpSwatSize,height:t.cpSwatSize,"border-radius":e.unref(V)}),key:a},null,14,J))),128))],4)):e.createCommentVNode("",!0)])):e.unref(S)==="gradc"?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:"show-demo",style:e.normalizeStyle(e.unref(C))},[t.copy?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:D},[e.renderSlot(o.$slots,"copy",{},()=>[Y],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["rotate-view",u.showOrHide])},[e.createElementVNode("div",ee,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(90,(n,a)=>e.createElementVNode("div",{style:e.normalizeStyle({transform:"rotate("+(a+1)*4+"deg)","background-color":u.rotateDeg>a*4?t.gradDashActiveColor:t.gradDashColor}),key:a},null,4)),64))]),e.createElementVNode("span",te,e.toDisplayString(u.rotateDeg)+"°",1)],2)],4),e.withDirectives(e.createElementVNode("div",oe,[e.createElementVNode("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(n,a)=>(e.openBlock(),e.createElementBlock("div",{key:a,class:e.normalizeClass(l.value[a].zindexUp),style:e.normalizeStyle({left:l.value[a].x+"px"}),onMouseover:d=>e.unref(i).mouseout(a),onMousedown:d=>e.unref(i).down(a,d),onMouseenter:d=>e.unref(i).mouseover(a),onTouchstart:d=>e.unref(i).down(a,d)},[e.createElementVNode("input",{disabled:t.disabled===!1?!0:l.value[a].disabled,type:"color",value:l.value[a].color,onInput:d=>I(a,d)},null,40,le),e.createElementVNode("span",{class:e.normalizeClass([l.value[a].tiptoggle,"color-tip-value"])},e.toDisplayString(l.value[a].pos)+"%",3)],46,ae))),128))]),e.createElementVNode("div",ne,[e.createElementVNode("input",{onInput:we,value:u.rotateDeg,style:e.normalizeStyle({width:t.gradRangeWidth-30+"px"}),type:"range",min:"0",max:"360",step:"1"},null,44,ie),e.createElementVNode("div",{onClick:$,style:e.normalizeStyle({width:t.gradIconSize+"px",height:t.gradIconSize+"px"})},[e.renderSlot(o.$slots,"grad-close-setting",{},()=>[se],!0)],4)])],512),[[e.vShow,!E.value]]),e.withDirectives(e.createElementVNode("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(n,a)=>(e.openBlock(),e.createElementBlock("input",{key:a,disabled:!t.disabled,class:"gradc-select hover cue-po",type:"color",value:l.value[a].color,onInput:d=>I(a,d)},null,40,de))),128)),e.createElementVNode("div",{onClick:$,style:e.normalizeStyle({width:t.gradIconSize+"px",height:t.gradIconSize+"px"}),class:"active hover cue-po"},[e.renderSlot(o.$slots,"grad-setting",{},()=>[he],!0)],4),e.createElementVNode("div",{style:e.normalizeStyle({width:t.gradIconSize+"px",height:t.gradIconSize+"px"}),onClick:ye,class:e.normalizeClass(l.value.length>2?"active hover cue-po":"disabled")},[e.renderSlot(o.$slots,"grad-del",{},()=>[pe],!0)],6),e.createElementVNode("div",{style:e.normalizeStyle({width:t.gradIconSize+"px",height:t.gradIconSize+"px"}),onClick:be,class:e.normalizeClass(l.value.length<e.unref(H)?"active hover cue-po":"disabled")},[e.renderSlot(o.$slots,"grad-add",{},()=>[ge],!0)],6)],512),[[e.vShow,E.value]])])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"cp-swatches",style:e.normalizeStyle({width:t.cpSwatWidth,gap:t.cpSwatGap})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(n,a)=>(e.openBlock(),e.createElementBlock("div",{onClick:d=>W(n,a),class:e.normalizeClass([[b.value===a?e.unref(P).swtActive:"",n.disabled===!0?"hover":"swat-disabled"],"cue-po active"]),style:e.normalizeStyle({background:n.color,width:t.cpSwatSize,height:t.cpSwatSize,"border-radius":e.unref(V)}),key:a},null,14,ue))),128))],4)),t.copy?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle({"z-index":t.zIndex}),class:e.normalizeClass(e.unref(ke))},[e.renderSlot(o.$slots,"copy-tip",{},()=>[me],!0)],6)):e.createCommentVNode("",!0)],64))}}),[["__scopeId","data-v-537b9b8a"]]),fe={install:h=>{h.component(_.name,_)}};y.ColorsPick=_,y.default=fe,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});