fluid-dnd 1.0.0-beta.0

package/dist/fluid-dnd.umd.cjs

@@ -0,0 +1 @@
+(function(Y,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(Y=typeof globalThis<"u"?globalThis:Y||self,C(Y.FluidDnd={}))})(this,function(Y){"use strict";var En=Object.defineProperty;var Cn=(Y,C,N)=>C in Y?En(Y,C,{enumerable:!0,configurable:!0,writable:!0,value:N}):Y[C]=N;var tt=(Y,C,N)=>Cn(Y,typeof C!="symbol"?C+"":C,N);const C="horizontal",N="vertical",J="draggable",$t="droppable",xt="handler-class",Gt="dragging",Wt="dragging-handler-class",Xt="dropping",Jt="grabbing",pe="grab",Kt="disable-transition",he=(t,e)=>{const n=c=>t.removeAtEvent(c),s=(c,l)=>t.insertEvent(c,l),o=()=>t.getLength(),i=c=>t.getValue(c);return{direction:(e==null?void 0:e.direction)??N,handlerSelector:(e==null?void 0:e.handlerSelector)??J,draggingClass:(e==null?void 0:e.draggingClass)??"dragging",droppableClass:(e==null?void 0:e.droppableClass)??"droppable-hover",isDraggable:(e==null?void 0:e.isDraggable)??(()=>!0),onDragStart:(e==null?void 0:e.onDragStart)??(()=>{}),onDragEnd:(e==null?void 0:e.onDragEnd)??(()=>{}),droppableGroup:e==null?void 0:e.droppableGroup,onRemoveAtEvent:n,onInsertEvent:s,onGetLegth:o,onGetValue:i,animationDuration:(e==null?void 0:e.animationDuration)??150,removingClass:(e==null?void 0:e.removingClass)??"removing",insertingFromClass:(e==null?void 0:e.insertingFromClass)??"from-inserting",delayBeforeRemove:(e==null?void 0:e.delayBeforeRemove)??200,delayBeforeInsert:(e==null?void 0:e.delayBeforeInsert)??200}},et=(t,e)=>t.classList.contains(e),St=(t,e,n=!1)=>{t.classList.toggle(e,n)},nt=(t,e)=>{t.classList.add(e)},Dt=(t,e)=>{t.classList.remove(e)},me=(t,e)=>bt(e).every(n=>et(t,n)),ut=t=>t?`.${bt(t).join(".")}`:"",Se=(t,e)=>{if(!e)return;const n=bt(e);t.classList.add(...n)},bt=t=>t?t.split(" ").filter(e=>e):[],De=()=>{const{scrollX:t,scrollY:e}=window;return{scrollX:t,scrollY:e}},Yt=t=>!t||t.trim().length==0||t=="normal"?0:parseFloat(t),be=t=>t?parseInt(t):-1,ve=t=>{const e=getComputedStyle(t),n=new DOMMatrixReadOnly(e.transform);return{x:n.m41,y:n.m42}},Qt=(t,e)=>t.x1>e.x1?Qt(e,t):t.x2<e.x1?0:t.x2>=e.x2?t.x2-t.x1:t.x2-e.x1,ft=(t,e)=>!Te(t,e),Te=(t,e)=>{const n=wt(t),s=wt(e),o=Ut(n,s,N),i=Ut(n,s,C);return o>=Math.min(n.height,s.height)/2&&i>=Math.min(n.width,s.width)/2},Ut=(t,e,n)=>{const{before:s,distance:o}=B(n);return Qt({x1:t[s],x2:t[s]+t[o]},{x1:e[s],x2:e[s]+e[o]})},O=(t,e)=>t?Yt(getComputedStyle(t)[e]):0,te=t=>{const{scrollLeft:e,scrollTop:n}=t;return{scrollLeft:e,scrollTop:n}},wt=t=>t.getBoundingClientRect(),B=t=>{const e=t==C;return{beforeMargin:e?"marginLeft":"marginTop",afterMargin:e?"marginRight":"marginBottom",borderBeforeWidth:e?"borderLeftWidth":"borderTopWidth",before:e?"left":"top",after:e?"right":"down",gap:e?"columnGap":"rowGap",distance:e?"width":"height",axis:e?"x":"y",offset:e?"offsetX":"offsetY",scroll:e?"scrollX":"scrollY",scrollElement:e?"scrollLeft":"scrollTop",page:e?"pageX":"pageY",inner:e?"innerWidth":"innerHeight",offsetElement:e?"offsetLeft":"offsetTop",scrollDistance:e?"scrollWidth":"scrollHeight",clientDistance:e?"clientWidth":"clientHeight",paddingBefore:e?"paddingLeft":"paddingTop",getRect:wt}},Bt=(t,e)=>ye(t,e),ee=t=>[...t.children].filter(n=>et(n,J)),ye=(t,e)=>{const n=[...e.children].filter(o=>et(o,J)&&!o.isEqualNode(t)).toReversed(),s=[...e.children].findLastIndex(o=>o.isEqualNode(t));return[n,s,e]},Ee=t=>{let e=t.parentElement;for(;e;){if(window.getComputedStyle(e).position==="fixed")return e;e=e.parentElement}return null},ne=(t,e)=>{const{before:n,borderBeforeWidth:s}=B(e),o=Ee(t);return o?wt(o)[n]+O(o,s):0},It=t=>window.TouchEvent&&t instanceof TouchEvent,at=t=>t instanceof HTMLElement,se=t=>t instanceof MouseEvent,Ce=["onmouseup","onmousedown","onmousemove"],Ae=(t,e,n)=>{t&&(t.style.height=`${e}px`,t.style.width=`${n}px`)},vt=(t,e,n)=>{!t||!at(t)||(n==0&&e==0?t.style.transform="":t.style.transform=`translate(${n}px,${e}px)`)},xe=(t,e,n)=>{t[e]=s=>{if(s.defaultPrevented)return;const o=Ht(s);n(o)}},Vt=(t,e,n)=>{n&&(we(e)?t[e]=n:xe(t,e,n))},we=t=>Ce.includes(t),Be=t=>{const{target:e}=t;return{clientX:0,clientY:0,pageX:0,pageY:0,screenX:0,screenY:0,target:e,offsetX:0,offsetY:0}},Re=(t,e)=>{const n=(s,o)=>Oe(e,window,o,s);if(se(t)){const{offsetX:s,offsetY:o}=t;return[s,o]}else{const s=t.target;return[n(s,C),n(s,N)]}},Ht=t=>{const e=Le(t);if(!e)return Be(t);const[n,s]=Re(t,e),{clientX:o,clientY:i,pageX:c,pageY:l,screenX:f,screenY:p,target:h}=e;return{clientX:o,clientY:i,pageX:c,pageY:l,screenX:f,screenY:p,target:h,offsetX:n,offsetY:s}},Le=t=>{if(It(t))return t.touches[0]??t.changedTouches[0];if(se(t))return t},Oe=(t,e,n,s)=>{const{page:o,scroll:i,before:c,borderBeforeWidth:l,getRect:f}=B(n),p=f(s);return t[o]-e[i]-p[c]-O(s,l)},Rt=(t,e,n="ease-out",s="transform")=>{at(t)&&(t.style.transitionDuration=`${e}ms`,t.style.transitionTimingFunction=`${n}`,t.style.transitionProperty=`${s}`)},oe=(t,e,n)=>{!t||!at(t)||(t[e]=()=>{n()})},Me=t=>{var e=t.querySelector("style");if(!e){var n=document.createElement("style");return t.appendChild(n),n}return e},Pe=(t,e)=>{const n=/\.-?[_a-zA-Z0-9-*\s<>():]+/g,[s]=e.match(n)||[];for(const o of t.cssRules){const[i]=o.cssText.match(n)||[];if(s===i)return!0}return!1},Ne=(t,e)=>{e.forEach(n=>{Fe(t,n)})},Fe=(t,e)=>{var s;var n=Me(t);n.sheet&&(Pe(n.sheet,e)||(s=n.sheet)==null||s.insertRule(e,n.sheet.cssRules.length))},re=(t,e={})=>{for(const n of Object.keys(e)){const s=e[n];s!=null&&$e(t,`--${n}`,s)}},$e=(t,e,n)=>t&&t.style.setProperty(e,n),Ge=(t,e,n)=>{n!=0&&(e==="vertical"?t.scrollBy(0,n):t.scrollBy(n,0))},We=(t,e,n)=>{const{scrollDistance:s,clientDistance:o,scrollElement:i}=B(t);return n[i]/(e[s]-e[o])},Xe=t=>{let e={offsetX:0,offsetY:0},n={top:0,left:0},s={x:0,y:0};const o=f=>{t.style.transform=`translate( ${f.x}px, ${f.y}px)`},i=f=>{t.style.top=`${f.top}px`,t.style.left=`${f.left}px`};return[(f,p,h,v)=>{const R=D=>{const{beforeMargin:b,borderBeforeWidth:L,before:$,offset:I,scroll:V,page:H,inner:G,distance:rt,axis:z,getRect:F}=B(D),Q=h[H],j=window[V],k=window[G],_=F(f)[rt],Z=O(f,L),q=O(f,b),W=Q-e[I],st=ne(f,D);if(W>=j-_/2&&W<=j+k){const pt=W-n[$]-Z-q-j-st;return P(D),pt}return s[z]},P=D=>{if(f&&et(f,Gt)&&D===v){const{before:b,distance:L,axis:$,getRect:I}=B(v),V=I(f)[L],H=I(p),G=n[b]-H[b]+s[$],z=H[L]-V,F=G/z,Q=V/z,j=.1,k=.2,_=.8;let Z=0;const q=ft(f,p);!q&&F<k&&F>-Q?Z=F/k-1:!q&&F>_&&F<1+Q&&(Z=1/(1-_)*(F-_));const W=j*V*Z;Ge(p,v,W)}},S=D=>{const{axis:b}=B(D);s[b]=R(D),o(s)};S(C),S(N)},(f,p)=>{const[h,v,R,P]=Ve(f,p,t);n={top:h,left:v},i(n),e={offsetX:R,offsetY:P}}]},Lt=(t,e,n)=>{const{borderBeforeWidth:s,before:o,getRect:i}=B(t);return i(e)[o]-i(n)[o]-O(n,s)},Ye=(t,e)=>{let{offsetX:n,offsetY:s,target:o}=t,i=Ie(o,e);const c=o;return c&&i&&!c.isSameNode(i)&&(n+=Lt(C,c,i),s+=Lt(N,c,i)),i&&e!=o&&(n+=Lt(C,i,e),s+=Lt(N,i,e)),[n,s]},Ie=(t,e)=>{const n=t==null?void 0:t.closest(`.${xt}`);return n&&n.isSameNode(e)?t:n},ie=(t,e,n,s)=>{const{offset:o,beforeMargin:i,page:c,borderBeforeWidth:l,scroll:f}=B(t),p=ne(n,t);return e[c]-s[o]-O(n,i)-O(n,l)-window[f]-p},Ve=(t,e,n)=>{const[s,o]=Ye(t,n);return[ie(N,t,e,{offsetX:s,offsetY:o}),ie(C,t,e,{offsetX:s,offsetY:o}),s,o]},ce="startDrag",Ot="drag",_t="startDrop",He="drop",dt="temp-child",ae="cubic-bezier(0.2, 0, 0, 1)",_e=t=>t===He||t===_t,qt=t=>!t||t.length==0?0:Yt(t.replace("px","")),qe=(t,e)=>{const n=getComputedStyle(t)[e];if(n.match("%")){const o=Yt(n.replace("%","")),{width:i}=t.getBoundingClientRect();return i*(o/100)}return qt(n)},zt=(t,e)=>{if(!(t instanceof Element))return[0,!1];const n=qe(t,e),s=getComputedStyle(t).display,o=n>0||s==="flex";return[n,o]},ze=t=>{const{top:e,left:n}=getComputedStyle(t);return[qt(e),qt(n)]},je=(t,e)=>{const{gap:n}=B(e),[s,o]=zt(t,n);return o?s:0};function Tt(t,e,n,s,o=t.previousElementSibling,i=t.nextElementSibling){let{height:c,width:l}=ke(n,t,o,i);return ft(t,s)&&e==Ot&&(c=0,l=0),{height:c,width:l}}const ke=(t,e,n,s)=>{const{afterMargin:o,beforeMargin:i,distance:c,gap:l,getRect:f}=B(t),p=O(e,o),h=O(e,i),v=O(s,i),[R,P]=zt(e.parentElement,l),S=f(e)[c];if(P)return le(S,h,p,R,0,t);const[D,b,L]=Ze(n,v,p,h,o);return le(S,b,D,0,L,t)},Ze=(t,e,n,s,o)=>{const i=Math.max(e,n);let c=s,l=e;if(t){const f=O(t,o);c=Math.max(f,s),l=Math.max(l,f)}return[i,c,l]},le=(t,e,n,s,o,i)=>Je(i,t+e+n+s-o),Je=(t,e)=>t==C?{width:e,height:0}:{width:0,height:e},ue=(t,e)=>{const{borderBeforeWidth:n,paddingBefore:s,axis:o,getRect:i}=B(t),c=O(e,n),l=O(e,s),f=i(e)[o];return c+l+f},Ke=(t,e)=>{const[n,s]=ze(e),o=ue(N,t);return[ue(C,t)-s,o-n]};function Qe(t,e,n,s,o,i,c,l,f){let p=0,h=0;const v=!!(n<0&&f);if(n===s&&!v)return fe({height:p,width:h},t,o,c,v);const[R,P,S,D]=en(e,n,s,f);if(v){const[st,it]=Ke(l,f);p+=it,h+=st}const{scrollElement:b,beforeMargin:L,afterMargin:$,distance:I,gap:V}=B(t),[H,G]=zt(l,V),[rt,z,F]=sn(L,$,R,P==null?void 0:P.previousElementSibling,D,G,v),[Q,j,k]=nn(L,$,I,S,H,G),_=tn(j,Q,k,z,rt,H),Z=v?l[b]:Ue(b,l,i),W=(D?_-F:F-_)-Z;return t===N?p+=W:t===C&&(h+=W),fe({height:p,width:h},t,o,c,v)}const Ue=(t,e,n)=>{const s=e[t],o=n[t];return s-o},tn=(t,e,n,s,o,i)=>{const c=Math.max(e,o);return Math.max(n,s)+t+c+i},en=(t,e,n,s)=>{const o=e<n,[i,c]=[e,n].toSorted((h,v)=>h-v),l=t[e]??s,f=t[n];let p=o?t.slice(i+1,c+1):t.slice(i,c);return i<0&&s&&(p=t.slice(i+1,c)),[l,f,p,o]},nn=(t,e,n,s,o,i)=>{if(s.length==0)return[0,0,0];const c=O(s[0],t);let l=0,f=-c;for(const[p,h]of s.entries()){const v=h.getBoundingClientRect()[n],R=O(h,t);i&&(l+=R),i&&p>0?l+=o:l=Math.max(l,R),f+=l+v,l=O(h,e)}return[c,f,l]},fe=(t,e,n,s,o)=>{const{scroll:i,distance:c}=B(e),l=window[i],f=n[i],p=o?0:f-2*l+s[i];return t[c]+=p,t},sn=(t,e,n,s,o,i,c)=>{const l=o?n.previousElementSibling:s;return on(t,e,l,n,i,c)},on=(t,e,n,s,o,i)=>{if(o)return[0,0,0];const c=O(i?null:n,e),l=O(s,t);let f=Math.max(c,l);return[c,l,f]},jt=(t,e,n)=>{const s=new MutationObserver(o=>{o.forEach(i=>{t(s,i)})});return s.observe(e,n),s},rn="startDrag",de="cubic-bezier(0.2, 0, 0, 1)",cn=(t,e,n)=>{let s=Tt(e,rn,n,t);const o=je(t,n),{distance:i}=B(n);s[i]-=o;const[c,l]=an(n,e);return s[l]=c,s},an=(t,e)=>{const n=t==C?N:C,{distance:s,getRect:o}=B(n);return[o(e)[s],s]},gt=(t,e,n)=>{Ae(t,e,n),t.style.minWidth=`${n}px`},ln=(t,e,n)=>s=>{e.contains(t)&&(gt(t,n.height,n.width),s.disconnect())},un=(t,e)=>{if(!e)return;const{droppable:n,config:s,scroll:o}=t,{direction:i}=s,c=We(s.direction,n,o)>.99,{scrollDistance:l,clientDistance:f,scrollElement:p}=B(i);c&&(n[p]=n[l]-n[f])},ge=(t,e,n,s)=>{if(!n)return;const{droppable:o,config:i}=n,{direction:c,animationDuration:l}=i;if(un(n,e),o.querySelector(`.${dt}`)||!t)return;var f=t.tagName=="LI"?"DIV":t.tagName,p=document.createElement(f);nt(p,dt),gt(p,0,0);const h=cn(o,t,c);return Rt(p,l,de,"width, min-width, height"),[p,h,o]},kt=(t,e,n,s,o)=>{const i=ge(t,n,s);if(!i)return;const[c,l,f]=i;e.isSameNode(f)&&gt(c,l.height,l.width),jt(ln(c,f,l),f,{childList:!0,subtree:!0}),f.appendChild(c)},fn=(t,e,n)=>{const s=ge(t,e,n);if(!s)return;const[o,i,c]=s;c.appendChild(o),dn(o,i)},dn=(t,e)=>requestAnimationFrame(()=>{gt(t,e.height,e.width),requestAnimationFrame(()=>{Rt(t,0,de,"width, min-width, height")})}),gn=(t,e,n,s,o=!0)=>{if(n){var i=document.querySelectorAll(`${ut(n)} > .${dt}`);i.forEach(c=>{const l=c.parentElement;if(l!=null&&l.isSameNode(e)||!o&&(l!=null&&l.isSameNode(t)))return;gt(c,0,0),setTimeout(()=>{var p;(p=c.parentNode)==null||p.removeChild(c)},s)})}},yt=(t,e,n=!1)=>{var s=t.querySelectorAll(`.${dt}`);s.forEach(o=>{n?(gt(o,0,0),setTimeout(()=>{t.contains(o)&&t.removeChild(o)},e)):t.removeChild(o)})},pn=50;function hn(t,e,n,s,o,i){let c=e;const{direction:l,handlerSelector:f,onRemoveAtEvent:p,animationDuration:h,delayBeforeInsert:v,draggingClass:R}=t,P=(r,u,d,m,A)=>{if(!m)return;const{droppable:T,config:y}=m,x=Tt(r,u,y.direction,T);_e(u)?G(r,u,x,d,m,A):L(r,u,x,m)},S=(r,u,d,m,A)=>{const T=Tt(u,"insert",t.direction,d),{onInsertEvent:y}=t,x=ee(d);for(const[M,w]of x.entries())et(w,J)&&M>=r&&H(w,T);A(),setTimeout(()=>{y(r,m),yt(n,0,!0),mn(r,d,t),st(u),q(u,n)},v)},D=(r,u,d,m)=>{if(!d||!d.droppable||!d.config)return;const{droppable:A,config:T}=d;let[y]=Bt(u,A);y=[u,...y].toReversed();const x=Tt(u,"remove",T.direction,A);for(const[M,w]of y.entries())M>=r&&(V(w,x),setTimeout(()=>{m(w)},h))},b=r=>{yt(n,h,!0),setTimeout(()=>{st(r),q(r,n)},h)},L=(r,u,d,m)=>{const{config:A,droppable:T}=m,[y]=Bt(r,T),x=ft(r,T);y.length==0&&I(d,1,A.direction,y);for(const[M,w]of y.entries()){if(!et(w,J))continue;const X=$(A.direction,r,w,d);if(!x&&X)d=X;else if(!x)continue;const U=y.length-M;I(d,U,A.direction,y),u===ce?V(w,d):u===Ot&&H(w,d)}},$=(r,u,d,m)=>{const{before:A,distance:T,axis:y,getRect:x}=B(r),M=x(u),w=x(d),X=M[A],U=w[A],ht=w[T],Et=U+ht/2,Ct=ve(d)[y],lt=Et-Ct;return X>lt?{height:0,width:0}:m},I=(r,u,d,m)=>{const A=m.filter(y=>et(y,J)).length,{distance:T}=B(d);r[T]==0?c=Math.max(c,u):c=Math.min(c,u-1),c=Math.min(c,A)},V=(r,u)=>{const{width:d,height:m}=u;vt(r,m,d)},H=(r,u)=>{const{width:d,height:m}=u;vt(r,m,d),Rt(r,h,ae)},G=(r,u,d,m,A,T)=>{const{droppable:y,scroll:x,config:M}=A,[w,X]=Bt(r,y),U=w.toReversed(),ht=X===-1?U.length:X;U.splice(ht,0,r);const[Et,Ct,lt]=rt(r,X,U,y);d=Tt(r,u,M.direction,n,Et,Ct);const Zt=De(),Mt=Qe(M.direction,U,X,lt,Zt,x,m,y,r);w.length==0&&z(void 0,d,r,Mt);for(const[Pt,Nt]of w.toReversed().entries()){let Ft=d;lt-1>=Pt&&(Ft={height:0,width:0}),u===_t&&!et(Nt,dt)&&z(Nt,Ft,r,Mt)}F(lt,r,M,y,T)},rt=(r,u,d,m)=>{const T=ft(r,m)?u:c,y=()=>u<T?[T,T+1]:u>T?[T-1,T]:[T-1,T+1],[x,M]=y(),w=d[x]??null,X=d[M]??null;return[w,X,T]},z=(r,u,d,m)=>{vt(r,u.height,u.width),vt(d,m.height,m.width)},F=(r,u,d,m,A)=>{const{onInsertEvent:T,onDragEnd:y}=d;nt(u,Xt),k(u,n,m,()=>{if(Dt(u,Xt),A!=null){const x=p(A);x!=null&&(T(r,x),y({value:x,index:r})),j(u),Q()}})},Q=()=>{if(s){var r=document.querySelectorAll(`${ut(s)} > .${J}`);for(const u of r)W(u)}},j=r=>{setTimeout(()=>{Dt(r,R)},pn)},k=(r,u,d,m)=>{setTimeout(()=>{m&&m(),_(u,d),Z(d),st(r),q(r,u),q(r,d)},h)},_=(r,u)=>{r.isSameNode(u)?yt(r,h):(yt(r,h,!0),yt(u,h))},Z=r=>{if(n.isSameNode(r))return;var[u]=n.querySelectorAll(`.${dt}`);if(!u)return;const{distance:d}=B(l);at(u)&&(u.style[d]="0px")},q=(r,u)=>{const[d]=Bt(r,u);for(const m of[...d,r])W(m)},W=r=>{at(r)&&(r.style.transition="",r.style.transform="")},st=r=>{i(),pt(r,!1),r.style.transform="",r.style.transition="",r.style.top="",r.style.left="",re(r,{fixedHeight:"",fixedWidth:""})},it=(r,u)=>{const d=u.querySelector(f);St(document.body,Jt,r),St(d||u,Wt,r)},pt=(r,u)=>{St(r,Gt,u),it(u,r),o.toggleGrabClass(!u)};return[P,D,S,b,pt]}const mn=(t,e,n)=>{const{insertingFromClass:s,animationDuration:o}=n,i=jt(()=>{const l=ee(e)[t];nt(l,s),nt(l,Kt),setTimeout(()=>{Dt(l,Kt),Dt(l,s),i.disconnect()},o)},e,{childList:!0})},K=class K{static addConfig(e,n){const s=K.configs.filter(i=>!i.droppable.isSameNode(e)),o=te(e);s.push({droppable:e,config:n,scroll:o}),K.configs=s}static updateScrolls(e,n){for(const s of K.configs){const{droppable:o}=s;(n&&me(o,n)||o.isSameNode(e))&&(s.scroll=te(o))}}static getConfig(e){return K.configs.find(({droppable:s})=>s.isSameNode(e))}};tt(K,"configs",[]),tt(K,"removeObsoleteConfigs",()=>{const e=K.configs.filter(({droppable:n})=>document.contains(n));K.configs=e});let ot=K;class Sn{constructor(e,n,s,o,i){tt(this,"initial");tt(this,"current");tt(this,"parent");tt(this,"draggableElement");tt(this,"groupClass");tt(this,"dragEvent");tt(this,"changeDroppable");this.parent=s,this.draggableElement=e,this.groupClass=n,this.dragEvent=o,this.initial=s?ot.getConfig(s):void 0,this.changeDroppable=i}getDraggableAncestor(e,n,s){return document.elementsFromPoint(e,n).filter(o=>!o.isSameNode(s))}getElementBelow(e,n,s=!0){const o=c=>{const[l]=c.getDraggableAncestor(n.clientX,n.clientY,e);return l};let i=null;return s?(e.hidden=!0,i=o(this),e.hidden=!1):i=o(this),i}getCurrent(e,n,s=!0){const o=this.getElementBelow(e,n,s);return!this.groupClass||!o?void 0:o.closest(ut(this.groupClass))}isOutsideOfAllDroppables(e){return(this.groupClass?Array.from(document.querySelectorAll(ut(this.groupClass))):[this.parent]).every(s=>ft(e,s))}isNotInsideAnotherDroppable(e,n){return!ft(e,n)||this.isOutsideOfAllDroppables(e)}onScrollEvent(){this.dragEvent()}setOnScroll(e){oe(e,"onscroll",()=>{this.onScrollEvent()})}getCurrentConfig(e){var o;const n=this.draggableElement;if(this.current&&this.isNotInsideAnotherDroppable(n,(o=this.current)==null?void 0:o.droppable))return this.current;const s=this.getCurrent(n,e);return s?(at(s)&&!s.onscroll&&this.setOnScroll(s),ot.getConfig(s)):ot.getConfig(this.parent)}updateConfig(e){const n=this.current;this.current=this.getCurrentConfig(e),this.changeDroppable(this.current,n)}isOutside(e,n=!0){const s=this.draggableElement;return!this.getCurrent(s,e,n)}}function Dn(t,e,n,s,o){const{handlerSelector:i,isDraggable:c,droppableGroup:l,animationDuration:f,delayBeforeRemove:p,draggingClass:h,removingClass:v,onRemoveAtEvent:R,droppableClass:P,onDragStart:S}=n,D=bt(l).map(a=>`droppable-group-${a}`).join(" ");let b=0,L={scrollX:0,scrollY:0},$={pageX:0,pageY:0},I;const[V,H]=Xe(t),[G,rt,z,F,Q]=hn(n,e,s,D,o,()=>b=0),j=()=>{nt(t,J)},k=a=>{nt(a,xt),o.addSubscriber(a)},_=()=>{if(c(t)){const a=t.querySelector(i);k(a||t)}},Z=()=>{Ne(document.body,[`.${J}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,`.${xt}{pointer-events:auto!important;}`,`.${pe}{cursor:grab;}`,".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",".droppable{box-sizing:border-box!important;}",`.${Gt}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,`.${Wt}{pointer-events:none!important;}`,`.${Xt}{pointer-events:none!important;}`,`.${Jt}{cursor:grabbing;}`,".disable-transition{transition:none!important;}"]),_(),j()},q=a=>{const g=a==null?void 0:a.querySelector(`.${xt}`),E=g==null?void 0:g.parentElement;return g&&E&&et(E,$t)&&!E.isSameNode(s)?null:g},W=a=>{const g=q(a)??a;g&&c(a)&&(Vt(g,"onmousedown",M("mousemove","mouseup")),Vt(g,"ontouchstart",M("touchmove","touchend")),st(g)),a!=null&&a.isSameNode(g)||Vt(a,"onmousedown",w),nt(s,$t)},st=a=>{const g=a.querySelectorAll("img");Array.from(g).forEach(E=>{E.onmousedown=()=>!1})},it=()=>{if($.pageX==0&&$.pageY==0||!r.current)return;const{droppable:a,config:g}=r.current;V(t,a,$,g.direction),G(t,Ot,L,r.current)},pt=(a,g)=>{g&&b==2&&!(a!=null&&a.droppable.isSameNode(g.droppable))&&G(t,Ot,L,g)},r=new Sn(t,D,s,it,pt),u=a=>{if(!r.current)return;const g=D?Array.from(document.querySelectorAll(ut(D))):[s];for(const E of g)E.classList.toggle(P,!a&&E.isSameNode(r.current.droppable))},d=a=>{r.updateConfig(a);const g=r.isOutside(a);u(g),b===1?ht(a):b===2&&(m(g),Ct(a))},m=(a=!0)=>{if(!r.current)return;const{droppable:g}=r.current;gn(g,s,D,f,a),!a&&kt(t,s,b==1,r.current)},A=a=>{if(It(a)&&a.cancelable)a.preventDefault();else if(It(a))return;const g=Ht(a);d(g)},T=(a,g)=>{a=="touchmove"?I=setTimeout(()=>{g()},200):g()},y=(a,g)=>{const{clientX:E,clientY:mt}=a,ct=document.elementFromPoint(E,mt),At=ct==null?void 0:ct.closest(`.${J}`);return ct&&g&&At&&!g.isSameNode(At)},x=a=>{const g=n.onGetValue(e);return{index:e,element:a,value:g}},M=(a,g)=>E=>{if(y(E,t))return;ot.updateScrolls(s,D);const{scrollX:mt,scrollY:ct}=window;if(L={scrollX:mt,scrollY:ct},b===0){b=1;const At=x(t);At&&S(At),T(a,()=>{a=="touchmove"&&(r.updateConfig(E),u(r.isOutside(E)),ht(E)),document.addEventListener(a,A,{passive:!1})}),lt(s),document.addEventListener(g,X(a),{once:!0})}},w=a=>r.updateConfig(a),X=a=>g=>{u(!0);const E=Ht(g);clearTimeout(I),Mt(r.isOutside(E,!1)),document.removeEventListener(a,A),r.updateConfig(E);const mt=r.getCurrentConfig(E);if(mt){const{droppable:ct}=mt;U(ct)}s.onscroll=null},U=a=>{if(a.onscroll=null,!D)return;const g=Array.from(document.querySelectorAll(ut(D)));for(const E of g)at(E)&&(E.onscroll=null)},ht=a=>{kt(t,s,b==1,r.current),Et(),G(t,ce,L,r.current),Nt(t),H(a,t)},Et=()=>{b=2},Ct=a=>{const{pageX:g,pageY:E}=a;$={pageX:g,pageY:E},it()},lt=a=>oe(a,"onscroll",Zt),Zt=()=>it(),Mt=a=>{if(b!==2){b=0;return}b=3,Pt(t),G(t,_t,L,a?r.initial:r.current,e)},Pt=a=>{Rt(a,f,ae),vt(a,0,0)},Nt=a=>{const{height:g,width:E}=a.getBoundingClientRect();re(a,{fixedHeight:`${g}px`,fixedWidth:`${E}px`}),Q(a,!0),St(a,h,!0),a.style.transition=""},Ft=a=>{if(!r.initial)return;const g=r.initial;a==e&&(nt(t,v),setTimeout(()=>{R(e),Dt(t,v),kt(t,s,b==1,r.initial),rt(a,t,g,E=>{Pt(E),F(t)})},p))},yn=(a,g)=>{(a===e||a===n.onGetLegth()&&e===a-1)&&z(a,t,s,g,()=>{fn(t,b==1,r.initial)})};return Z(),W(t),[Ft,yn]}const bn=(t,e)=>{t&&Se(e,t)};function vn(t,e,n,s="index"){const o=s;let i=[],c=[];const{droppableGroup:l}=t;if(!n)return[i,c];const f=bt(l).map(p=>`droppable-group-${p}`).join(" ");bn(f,n);for(const p of n.children){const h=p.getAttribute(o),v=be(h),R=p;if(R&&v>=0){const[P,S]=Dn(R,v,t,n,e);i.push(P),c.push(S)}}return[i,c]}function Tn(t,e,n,s="index"){let o=[],i=[];const c=he(t,n),l=S=>{for(const D of o)D(S)},f=(S,D)=>{if(c.onGetLegth()===0)t.insertToListEmpty(c,S,D);else for(const L of i)L(S,D)},p=S=>{const[D,b]=vn(c,e,S,s);o=D,i=b},h=S=>{jt(()=>{p(S)},S,{childList:!0})},v=S=>{nt(S,$t)},R=S=>{ot.addConfig(S,c)};return[l,f,S=>{S&&(v(S),R(S),h(S),p(S),ot.removeObsoleteConfigs())}]}Y.dragAndDrop=Tn,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { DragEndEventData, DragStartEventData, Direction } from "./core";
+import dragAndDrop from "./core/dragAndDrop";
+export type { DragStartEventData, DragEndEventData, Direction };
+export { dragAndDrop };

package/dist/svelte/index.d.ts

@@ -0,0 +1,2 @@
+import useDragAndDrop from "./useDragAndDrop";
+export { useDragAndDrop };

package/dist/svelte/useDragAndDrop.d.ts

@@ -0,0 +1,4 @@
+import { Config } from "../core";
+export default function useDragAndDrop<T>(items: T[], config?: Config<T>): readonly [(parent: HTMLElement) => {
+    destroy(): void;
+}, (index: number, value: T) => void, (index: number) => void];

package/dist/svelte/utils/SvelteListCondig.d.ts

@@ -0,0 +1,13 @@
+import { CoreConfig } from "../../core";
+import { ListCondig } from "../../core";
+export declare class SvelteListCondig<T> implements ListCondig<T> {
+    private items;
+    private parent;
+    constructor(items: T[]);
+    setParent(parent: HTMLElement | undefined): void;
+    removeAtEvent(index: number): T | undefined;
+    insertEvent(index: number, value: T): void;
+    getLength(): number;
+    getValue(index: number): T;
+    insertToListEmpty(config: CoreConfig<T>, index: number, value: T): void;
+}

package/dist/vue/index.d.ts

@@ -0,0 +1,2 @@
+import useDragAndDrop from "./useDragAndDrop";
+export { useDragAndDrop };

package/dist/vue/useDragAndDrop.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from "vue";
+import { Config } from "../core";
+export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config<T>): readonly [Ref<HTMLElement | undefined, HTMLElement | undefined>, (index: number, value: T) => void, (index: number) => void];

package/dist/vue/utils/DropMethods.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from "vue";
+export declare const removeAtEventOnList: <T>(list: Ref<T[]>, index: number) => T | undefined;
+export declare const onInsertEventOnList: <T>(list: Ref<T[]>, index: number, value: T) => void;
+export declare const getLength: <T>(list: Ref<T[]>) => number;
+export declare const getValue: <T>(list: Ref<T[]>, index: number) => T;

package/dist/vue/utils/VueListCondig.d.ts

@@ -0,0 +1,13 @@
+import { CoreConfig } from "../../core";
+import { ListCondig } from "../../core";
+import { Ref } from "vue";
+export declare class VueListCondig<T> implements ListCondig<T> {
+    private items;
+    private parent;
+    constructor(items: Ref<T[]>, parent: Ref<HTMLElement | undefined>);
+    removeAtEvent(index: number): T | undefined;
+    insertEvent(index: number, value: T): void;
+    getLength(): number;
+    getValue(index: number): T;
+    insertToListEmpty(config: CoreConfig<T>, index: number, value: T): void;
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "fluid-dnd",
+  "version": "1.0.0-beta.0",
+  "description": "An agnostic drag and drop library to sort all kind of lists. With current support for vue 3 and svelte",
+  "type": "module",
+  "homepage": "https://vue-fluid-dnd.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/carlosjorger/vue-fluid-dnd.git"
+  },
+  "files": [
+    "dist",
+    "src/components/"
+  ],
+  "main": "./dist/fluid-dnd.umd.cjs",
+  "module": "./dist/fluid-dnd.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fluid-dnd.js",
+      "require": "./dist/fluid-dnd.umd.cjs"
+    },
+    "./vue": {
+      "require": {
+        "types": "./vue/index.d.cts",
+        "default": "./vue/index.cjs"
+      },
+      "import": {
+        "types": "./vue/index.d.ts",
+        "default": "./vue/index.mjs"
+      }
+    },
+    "./svelte": {
+      "require": {
+        "types": "./svelte/index.d.cts",
+        "default": "./svelte/index.cjs"
+      },
+      "import": {
+        "types": "./svelte/index.d.ts",
+        "default": "./svelte/index.mjs"
+      }
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs",
+    "component",
+    "dnd",
+    "library",
+    "drag",
+    "drop",
+    "dragging",
+    "drag&drop",
+    "drag-n-drop",
+    "draggable",
+    "droppable",
+    "sortable",
+    "lightweight",
+    "dependency-free",
+    "fluid-dnd"
+  ],
+  "author": {
+    "name": "Carlos Jorge Rodriguez",
+    "email": "rodriguezcuelloc@gmail.com"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": ">=3.4.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.43.0",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.2",
+    "vue-tsc": "^2.2.8",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "cd my-test-examples && vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "test": "vitest"
+  }
+}