vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.96 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),w=require("../utils.cjs"),x=(t,n,c,r)=>{const B=u.computed(()=>{const{r:e,g:o,b:a}=w.HUEtoRGB(t.hue);return`rgba(${e}, ${o}, ${a}, 1)`}),g=u.computed(()=>t.width),h=u.computed(()=>t.height),i=u.ref(0),d=u.ref(0),M=u.ref(0),$=u.ref(0),m=u.ref(!1),b=(e,o)=>{if(c.value){c.value.style.transform=`translate(${e}px, ${o}px)`;const a=e/g.value,v=1-o/h.value;r("update:sat",a),r("update:val",v),r("update:cursor",e,o)}},s=e=>{m.value&&(e.cancelable&&e.preventDefault(),requestAnimationFrame(()=>{let o=0,a=0;if(n.value){const v=n.value.getBoundingClientRect();e instanceof MouseEvent?(o=e.clientX-v.left,a=e.clientY-v.top):(o=e.touches[0].clientX-v.left,a=e.touches[0].clientY-v.top),b(o,a)}}))},f=()=>{m.value=!1,document.removeEventListener("mousemove",s),document.removeEventListener("touchmove",s)},L=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("touchmove",s),document.removeEventListener("touchend",f)},p=()=>{document.addEventListener("mouseup",f,{once:!0}),document.addEventListener("mousemove",s),document.addEventListener("touchend",f,{once:!0,passive:!1}),document.addEventListener("touchmove",s,{passive:!1})},E=()=>{if(n.value){const e=n.value.getBoundingClientRect();M.value=e.left,$.value=e.top}},P=()=>{c.value&&(t.x===0&&t.y===0||t.isPreset?(i.value=g.value*t.sat,d.value=h.value*(1-t.val)):(i.value=t.x,d.value=t.y),c.value.style.transform=`translate(${i.value}px, ${d.value}px)`)},l=e=>{e.cancelable&&e.preventDefault(),m.value=!0,E(),s(e),p()};return u.onMounted(()=>{n.value&&(n.value.addEventListener("mousedown",l),n.value.addEventListener("touchstart",l,{passive:!1,capture:!0}))}),u.onBeforeUnmount(()=>{n.value&&(n.value.removeEventListener("mousedown",l),n.value.removeEventListener("touchstart",l,{capture:!0})),L()}),{panelBgColor:B,setSizePoses:E,setCursor:P,unregisterListeners:L}};exports.usePanel=x;