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

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

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