@neodrag/vue/dist/min/index.js

Vue library to add dragging to your apps 😉

var e={dragStart:!0},t={delay:0,distance:3};function n(n,c={}){let u,f,{bounds:g,axis:h="both",gpuAcceleration:p=!0,legacyTranslate:m=!1,transform:y,applyUserSelectHack:w=!0,disabled:b=!1,ignoreMultitouch:v=!1,recomputeBounds:x=e,grid:E,threshold:S=t,position:A,cancel:C,handle:D,defaultClass:M="neodrag",defaultClassDragging:N="neodrag-dragging",defaultClassDragged:B="neodrag-dragged",defaultPosition:R={x:0,y:0},onDragStart:$,onDrag:X,onDragEnd:Y}=c,k=!1,q=!1,H=0,P=!1,T=!1,L=0,W=0,z=0,I=0,U=0,j=0,{x:F,y:G}=A?{x:A?.x??0,y:A?.y??0}:R;oe(F,G);let J,K,O,Q,V,Z="",_=!!A;x={...e,...x},S={...t,...S??{}};let ee=new Set;function te(e){k&&!q&&T&&P&&V&&(q=!0,function(e){ae("neodrag:start",$,e)}(e),re.add(N),w&&(Z=ne.userSelect,ne.userSelect="none"))}const ne=document.body.style,re=n.classList;function oe(e=L,t=W){if(!y){if(m){let r=`${+e}px, ${+t}px`;return s(n,"transform",p?`translate3d(${r}, 0)`:`translate(${r})`)}return s(n,"translate",`${+e}px ${+t}px`)}const r=y({offsetX:e,offsetY:t,rootNode:n});o(r)&&s(n,"transform",r)}function ae(e,t,r){const o=function(e){return{offsetX:L,offsetY:W,rootNode:n,currentNode:V,event:e}}(r);n.dispatchEvent(new CustomEvent(e,{detail:o})),t?.(o)}const ie=addEventListener,de=new AbortController,se={signal:de.signal,capture:!1};function le(){let e=n.offsetWidth/K.width;return isNaN(e)&&(e=1),e}return s(n,"touch-action","none"),ie("pointerdown",(e=>{if(b)return;if(2===e.button)return;if(ee.add(e.pointerId),v&&ee.size>1)return e.preventDefault();if(x.dragStart&&(J=d(g,n)),o(D)&&o(C)&&D===C)throw new Error("`handle` selector can't be same as `cancel` selector");if(re.add(M),O=function(e,t){if(!e)return[t];if(l(e))return[e];if(Array.isArray(e))return e;const n=t.querySelectorAll(e);if(null===n)throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");return Array.from(n.values())}(D,n),Q=function(e,t){if(!e)return[];if(l(e))return[e];if(Array.isArray(e))return e;const n=t.querySelectorAll(e);if(null===n)throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");return Array.from(n.values())}(C,n),u=/(both|x)/.test(h),f=/(both|y)/.test(h),i(Q,O))throw new Error("Element being dragged can't be a child of the element on which `cancel` is applied");const t=e.composedPath()[0];if(!O.some((e=>e.contains(t)||e.shadowRoot?.contains(t)))||i(Q,[t]))return;V=1===O.length?n:O.find((e=>e.contains(t))),k=!0,H=Date.now(),S.delay||(P=!0),K=n.getBoundingClientRect();const{clientX:r,clientY:a}=e,s=le();u&&(z=r-F/s),f&&(I=a-G/s),J&&(U=r-K.left,j=a-K.top)}),se),ie("pointermove",(e=>{if(!k||v&&ee.size>1)return;if(!q){if(!P){Date.now()-H>=S.delay&&(P=!0,te(e))}if(!T){const t=e.clientX-z,n=e.clientY-I;Math.sqrt(t**2+n**2)>=S.distance&&(T=!0,te(e))}if(!q)return}x.drag&&(J=d(g,n)),e.preventDefault(),K=n.getBoundingClientRect();let t=e.clientX,o=e.clientY;const i=le();if(J){const e={left:J.left+U,top:J.top+j,right:J.right+U-K.width,bottom:J.bottom+j-K.height};t=r(t,e.left,e.right),o=r(o,e.top,e.bottom)}if(Array.isArray(E)){let[e,n]=E;if(isNaN(+e)||e<0)throw new Error("1st argument of `grid` must be a valid positive number");if(isNaN(+n)||n<0)throw new Error("2nd argument of `grid` must be a valid positive number");let r=t-z,d=o-I;[r,d]=a([e/i,n/i],r,d),t=z+r,o=I+d}u&&(L=Math.round((t-z)*i)),f&&(W=Math.round((o-I)*i)),F=L,G=W,ae("neodrag",X,e),oe()}),se),ie("pointerup",(e=>{(ee.delete(e.pointerId),k)&&(q&&(ie("click",(e=>e.stopPropagation()),{once:!0,signal:de.signal,capture:!0}),x.dragEnd&&(J=d(g,n)),re.remove(N),re.add(B),w&&(ne.userSelect=Z),ae("neodrag:end",Y,e),u&&(z=L),f&&(I=W)),k=!1,q=!1,P=!1,T=!1)}),se),{destroy:()=>de.abort(),update:n=>{h=n.axis||"both",b=n.disabled??!1,v=n.ignoreMultitouch??!1,D=n.handle,g=n.bounds,x=n.recomputeBounds??e,C=n.cancel,w=n.applyUserSelectHack??!0,E=n.grid,p=n.gpuAcceleration??!0,m=n.legacyTranslate??!1,y=n.transform,S={...t,...n.threshold??{}};const r=re.contains(B);re.remove(M,B),M=n.defaultClass??"neodrag",N=n.defaultClassDragging??"neodrag-dragging",B=n.defaultClassDragged??"neodrag-dragged",re.add(M),r&&re.add(B),_&&(F=L=n.position?.x??L,G=W=n.position?.y??W,oe())}}}var r=(e,t,n)=>Math.min(Math.max(e,t),n),o=e=>"string"==typeof e,a=([e,t],n,r)=>{const o=(e,t)=>0===t?0:Math.ceil(e/t)*t;return[o(n,e),o(r,t)]};var i=(e,t)=>e.some((e=>t.some((t=>e.contains(t)))));function d(e,t){if(void 0===e)return;if(l(e))return e.getBoundingClientRect();if("object"==typeof e){const{top:t=0,left:n=0,right:r=0,bottom:o=0}=e;return{top:t,right:window.innerWidth-r,bottom:window.innerHeight-o,left:n}}if("parent"===e)return t.parentNode.getBoundingClientRect();const n=document.querySelector(e);if(null===n)throw new Error("The selector provided for bound doesn't exists in the document.");return n.getBoundingClientRect()}var s=(e,t,n)=>e.style.setProperty(t,n),l=e=>e instanceof HTMLElement,c=new WeakMap,u={mounted:(e,{value:t={}})=>!c.has(e)&&c.set(e,n(e,t)),updated:(e,{value:t={}})=>c.get(e).update(t),unmounted:e=>{c.get(e).destroy(),c.delete(e)}};export{u as vDraggable};