fluid-dnd 2.0.2 → 2.1.0

package/README.md

@@ -11,23 +11,22 @@
 [![version](https://img.shields.io/npm/v/fluid-dnd)](https://www.npmjs.com/package/fluid-dnd)
 ![GitHub issues](https://img.shields.io/github/issues/carlosjorger/fluid-dnd)
 ![GitHub stars](https://img.shields.io/github/stars/carlosjorger/fluid-dnd)
-[![twitter](https://img.shields.io/twitter/follow/carlosjorgerc)](https://twitter.com/carlosjorgerc)
 [![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/carlosjorger/fluid-dnd/test_coverage)
 
 </div>
 
-Fluid DnD is a [**fluid**, **agnostic** and **versatil** drag and drop
-library for lists with support for Vue, react and Svelte](https://fluid-dnd.netlify.app/). It's a **lightweight** tool ~7 Kb (gzip) with no depenencies.
+Fluid DnD is a [**fluid**, **agnostic** and **versatile** drag and drop
+library for lists; with support for **Vue**, **React** and **Svelte**](https://fluid-dnd.netlify.app/). It's a **lightweight** tool ~8 Kb (gzip) with no depenencies.
 
-<img src="https://github.com/user-attachments/assets/b350f9a4-7dd7-40ca-ae3f-ecca166a9081" width="100%"/>
+<img src="https://github.com/user-attachments/assets/1b7ac5e3-48e9-43f9-a577-e78c6b9eacae" width="100%"/>
 
 ## 🧰 Features
 
 - ✅ **Fully customizable 🎨**.
 - ✅ **Zero dependencies 🪶**.
-- ✅ **Work with horizontal➡️and vertical list :arrow_down:**.
+- ✅ **Works with horizontal➡️and vertical list⬇️**.
 - ✅ **Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support**.
-- ✅ **Nice documentation 📑 and examples**.
+- ✅ **Clear documentation 📑 and examples**.
 - ✅ **Fully tested 🧪, typed and reliable**.
 
 ## ✨ Inspirations
@@ -54,8 +53,8 @@ library for lists with support for Vue, react and Svelte](https://fluid-dnd.netl
 3. **Documentation**
 
 - 📚 Check out all the [docs](https://fluid-dnd.netlify.app/).
-- 🛠️ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
-- 📘 See others examples [here](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/).
+- 🛠️ Edit this example [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
+- 📘 See other examples [here](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/).
 
 ## 📚 Libraries Support
 - **Vue** >=3.0.0
@@ -64,7 +63,7 @@ library for lists with support for Vue, react and Svelte](https://fluid-dnd.netl
 
 ## 🤝 Contributing
 
-If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
+If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our [CONTRIBUTING  GUIDELINES](./CONTRIBUTING.md) before submitting a pull request.
 
 ## 🔑 License
 

package/dist/{HandlerPublisher-C-jTncuG.cjs → HandlerPublisher-CsD6p60X.cjs}

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-DNmnvxhi.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;
+"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-DE3X7xW4.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;

package/dist/{HandlerPublisher-BYI2bw4n.js → HandlerPublisher-LAmM6gCQ.js}

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var e = (a, s, l) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[s] = l;
 var r = (a, s, l) => e(a, typeof s != "symbol" ? s + "" : s, l);
-import { a as h, t as n, G as t } from "./index-BQUYvZRn.js";
+import { a as h, t as n, G as t } from "./index-D_kOy-fH.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/core/index.d.ts

@@ -89,6 +89,10 @@ export interface Config<T> {
      * Map value when is passed from the current list to another.
      */
     mapFrom?: MapFrom<T>;
+    /**
+     * The delay before the touchmove event is fired.
+     */
+    delayBeforeTouchMoveEvent: number;
 }
 /**
  * onDrop event function.
@@ -156,5 +160,12 @@ export type CoreConfig<T> = {
     onInsertEvent: OnInsertEvent<T>;
     onGetLegth: OnGetLength;
     onGetValue: OnGetValue<T>;
+    /**
+     * Map value when is passed from the current list to another.
+     */
     mapFrom: MapFrom<T>;
+    /**
+     * The delay before the touchmove event is fired.
+     */
+    delayBeforeTouchMoveEvent: number;
 };

package/dist/core/useDraggable.js

@@ -16,7 +16,7 @@ var DraggingState;
     DraggingState[DraggingState["END_DRAGGING"] = 3] = "END_DRAGGING";
 })(DraggingState || (DraggingState = {}));
 export default function useDraggable(draggableElement, index, config, parent, handlerPublisher) {
-    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, } = config;
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent } = config;
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
         .join(" ");
@@ -29,7 +29,10 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     let delayTimeout;
     let initialTouch;
     const [setTransform, updateTransformState] = useTransform(draggableElement);
-    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass,] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, () => (draggingState = DraggingState.NOT_DRAGGING));
+    const endDraggingState = () => {
+        draggingState = DraggingState.NOT_DRAGGING;
+    };
+    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass,] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
     const setDraggable = () => {
         addClass(draggableElement, DRAGGABLE_CLASS);
     };
@@ -153,7 +156,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const handleMove = (event) => {
         clearTimeout(delayTimeout);
         const eventToDragMouse = convetEventToDragMouseTouchEvent(event);
-        if (isTouchEvent(event) && event.cancelable) {
+        if (isTouchEvent(event) && event.cancelable && draggingState == DraggingState.DRAGING) {
             event.preventDefault();
         }
         if ((isTouchEvent(event) && !event.cancelable)
@@ -167,7 +170,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         if (event == "touchmove") {
             delayTimeout = setTimeout(() => {
                 callback();
-            }, 150);
+            }, delayBeforeTouchMoveEvent);
         }
         else {
             callback();
@@ -183,6 +186,11 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         const value = config.onGetValue(index);
         return ({ index, element, value });
     };
+    const startTouchMoveEvent = (event) => {
+        droppableConfigurator.updateConfig(event);
+        toggleDroppableClass(droppableConfigurator.isOutside(event));
+        startDragging(event);
+    };
     const onmousedown = (moveEvent, onLeaveEvent) => {
         return (event) => {
             if (!cursorIsOnChildDraggable(event, draggableElement)) {
@@ -197,9 +205,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
                 data && onDragStart(data);
                 addTouchDeviceDelay(moveEvent, () => {
                     if (moveEvent == 'touchmove') {
-                        droppableConfigurator.updateConfig(event);
-                        toggleDroppableClass(droppableConfigurator.isOutside(event));
-                        startDragging(event);
+                        startTouchMoveEvent(event);
                     }
                 });
                 document.addEventListener(moveEvent, handleMove, {
@@ -233,6 +239,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
             removeOnScrollEvents(droppable);
         }
         parent.onscroll = null;
+        endDraggingState();
     };
     const removeOnScrollEvents = (droppable) => {
         droppable.onscroll = null;
@@ -269,7 +276,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     };
     const onDropDraggingEvent = (isOutsideAllDroppables) => {
         if (draggingState !== DraggingState.DRAGING && draggingState !== DraggingState.START_DRAGGING) {
-            draggingState = DraggingState.NOT_DRAGGING;
+            endDraggingState();
             return;
         }
         draggingState = DraggingState.END_DRAGGING;

package/dist/core/utils/config.js

@@ -35,6 +35,7 @@ export const getConfig = (listCondig, config) => {
         delayBeforeRemove: config?.delayBeforeRemove ?? 200,
         delayBeforeInsert: config?.delayBeforeInsert ?? 200,
         mapFrom: config?.mapFrom ?? defaultMapFrom,
+        delayBeforeTouchMoveEvent: config?.delayBeforeTouchMoveEvent ?? 150,
     };
 };
 export const MapConfig = (coreConfig, mapFrom) => {

package/dist/index-DE3X7xW4.cjs

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