vexip-ui/lib/components/color-picker/color-palette.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const r=require("vue"),L=require("@vexip-ui/config"),x=require("@vexip-ui/hooks"),o=require("@vexip-ui/utils"),N=r.defineComponent({name:"ColorPalette",props:{hue:{type:Number,default:0,validator:e=>e>=0&&e<=360},value:{type:Number,default:1,validator:e=>e>=0&&e<=1},saturation:{type:Number,default:0,validator:e=>e>=0&&e<=1}},emits:["edit-start","edit-end","change"],setup(e,{emit:v}){const a=r.ref((1-e.value)*100),u=r.ref(e.saturation*100);let c=a.value,d=u.value,b,w,y,m;const{target:i}=x.useModifier({passive:!1,onKeyDown:(t,n)=>{if(n.up||n.down||n.left||n.right){t.preventDefault();const f=t.ctrlKey?10:t.altKey?.5:2,g=n.up||n.left?-1:1,s=f*g;n.up||n.down?a.value+=s:u.value+=s,l(),c=a.value,d=u.value,h()}}}),{moving:C}=x.useMoving({target:i,onStart:(t,n)=>{if(!i.value||n.button>0)return!1;const f=i.value.getBoundingClientRect(),{top:g,left:s,width:M,height:q}=f;b=M,w=q,a.value=(y=t.clientY-g)/q*100,u.value=(m=t.clientX-s)/M*100,l(),v("edit-start");let p=!1;Math.abs(a.value-c)>=.01&&(c=a.value,p=!0),Math.abs(u.value-d)>=.01&&(d=u.value,p=!0),p&&h()},onMove:t=>{a.value=(y+t.deltaY)/w*100,u.value=(m+t.deltaX)/b*100,l(),h()},onEnd:()=>{v("edit-end")}});r.watch(()=>e.value,t=>{a.value=(1-t)*100,l()},{immediate:!0}),r.watch(()=>e.saturation,t=>{u.value=t*100,l()},{immediate:!0});function l(){a.value=o.toFixed(o.boundRange(a.value,0,100),3),u.value=o.toFixed(o.boundRange(u.value,0,100),3)}function h(){v("change",{h:e.hue,s:u.value/100,v:o.toFixed(1-a.value/100,3)})}return{nh:L.useNameHelper("color-picker"),currentTop:a,currentLeft:u,editing:C,wrapper:i}}});module.exports=N;
//# sourceMappingURL=color-palette.vue2.cjs.map