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

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

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