vue-fluid-dnd - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

dist/composables/index.d.ts

@@ -27,11 +27,19 @@ import { DraggableElement } from "index";
     /**
-     * A function that returns whether a given element of the list is draggable
+     * The CSS class that is setted when a element is removed.
      */
+    removingClass?: string;
+    /**
+     * Delay time before removing an element in milisecond.
+     */
+    delayBeforeRemove?: number;
+    /**
+     * A function that returns whether a given element of the list is draggable.
+     */
     isDraggable?: (element: HTMLElement) => boolean;
     /**
-     * Name of the group of the share droppables
+     * Name of the group of the share droppables.
      */
     droppableGroup?: string;
     /**
-     * The duration of the animations in milisecond
+     * The duration of the animations in milisecond.
      */
@@ -61,2 +69,10 @@ animationDuration?: number;
     /**
+     * The CSS class that is setted when a element is removed.
+     */
+    removingClass: string;
+    /**
+     * Delay time before removing an element in milisecond.
+     */
+    delayBeforeRemove: number;
+    /**
      * A function that returns whether a given element of the list is draggable
@@ -63,0 +79,0 @@ */

dist/composables/useDragAndDrop.d.ts

@@ -9,6 +9,7 @@ import { Ref } from "vue";
  * @param config - Configuration of drag and drop tool.
- * @returns The reference of the parent element.
+ * @returns The reference of the parent element and function to remove an element.
  */
 export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config): {
     parent: Ref<HTMLElement | undefined>;
+    removeAt: (index: number) => void;
 };

dist/composables/useDraggable.d.ts

 import { CoreConfig } from ".";
-export default function useDraggable<T>(child: HTMLElement | undefined, index: number, config: CoreConfig<T>, parent: HTMLElement): void;
+export default function useDraggable<T>(child: HTMLElement | undefined, index: number, config: CoreConfig<T>, parent: HTMLElement): {
+    removeAtFromElement: (targetIndex: number) => void;
+};

dist/utils/events/emitEvents.d.ts

@@ -14,4 +14,6 @@ import { Ref } from "vue";
     emitEventToSiblings: (draggedElement: HTMLElement, event: DragAndDropEvent, initialWindowScroll: WindowScroll, droppableConfig: DroppableConfig<T> | undefined, positionOnSourceDroppable?: number) => void;
+    emitRemoveEventToSiblings: (targetIndex: number, draggedElement: HTMLElement, droppableConfig: DroppableConfig<T>, onFinishRemoveEvent: (element: HTMLElement) => void) => void;
+    emitFinishRemoveEventToSiblings: (draggedElement: HTMLElement) => void;
     toggleDraggingClass: (element: Element, force: boolean) => void;
 };
 export {};

dist/utils/index.d.ts

@@ -7,3 +7,3 @@ export declare const START_DRAG_EVENT = "startDrag";
 export type DropEvent = typeof DROP_EVENT | typeof START_DROP_EVENT;
-export type DragAndDropEvent = DraggingEvent | DropEvent;
+export type DragAndDropEvent = DraggingEvent | DropEvent | "remove";
 export declare const IsDropEvent: (event: DragAndDropEvent) => event is DropEvent;
@@ -10,0 +10,0 @@ export declare enum DraggingState {

dist/utils/observer.d.ts

@@ -1,1 +0,1 @@
-export declare const observeMutation: (callback: (observer: MutationObserver) => void, element: Element, options?: MutationObserverInit) => void;
+export declare const observeMutation: (callback: (observer: MutationObserver, mutation: MutationRecord) => void, element: Element, options?: MutationObserverInit) => void;

dist/utils/SetStyles.d.ts

 import { DragMouseTouchEvent } from "../../index";
 type onTouchEvent = "ontouchstart" | "ontouchmove" | "ontouchend";
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
-type onMouseEvent = typeof onMouseEvents[number];
+type onMouseEvent = (typeof onMouseEvents)[number];
 type TouchEventType = "touchstart" | "touchmove" | "touchend";
 declare const mouseEvents: readonly ["mouseup", "mousedown", "mousemove"];
-type MouseEventType = typeof mouseEvents[number];
+type MouseEventType = (typeof mouseEvents)[number];
 type DragEventCallback = (event: DragMouseTouchEvent) => void;
@@ -9,0 +9,0 @@ export declare const fixSizeStyle: (element: HTMLElement | undefined | null) => void;

dist/vue-fluid-dnd.js

@@ -1,6 +0,6 @@
-var Ht = Object.defineProperty;
-var Ft = (t, e, n) => e in t ? Ht(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var mt = (t, e, n) => (Ft(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { ref as O, watch as st } from "vue";
-const qt = (t, e) => {
+var Zt = Object.defineProperty;
+var Jt = (t, e, n) => e in t ? Zt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var bt = (t, e, n) => (Jt(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { ref as $, watch as ct } from "vue";
+const Kt = (t, e) => {
   const n = t.value;
@@ -11,5 +11,5 @@ if (n.length <= 0)
   return o;
-}, jt = (t, e, n) => {
+}, Qt = (t, e, n) => {
   t.value.splice(e, 0, n);
-}, kt = (t) => {
+}, te = (t) => {
   if (t) {
@@ -20,6 +20,6 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, Ut = () => {
+}, ee = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, ut = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Zt = (t) => t ? parseInt(t) : -1, zt = (t) => {
+}, mt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), ne = (t) => t ? parseInt(t) : -1, Ht = (t) => {
   const e = getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
@@ -30,8 +30,8 @@ return {
   };
-}, Xt = (t, e) => t.x1 > e.x1 ? Xt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, K = (t, e) => !Jt(t, e), Jt = (t, e) => {
-  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = Rt(n, o, "vertical"), r = Rt(n, o, "horizontal");
+}, Ft = (t, e) => t.x1 > e.x1 ? Ft(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, et = (t, e) => !oe(t, e), oe = (t, e) => {
+  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = Lt(n, o, "vertical"), r = Lt(n, o, "horizontal");
   return s >= Math.min(n.height, o.height) / 2 && r >= Math.min(n.width, o.width) / 2;
-}, Rt = (t, e, n) => {
-  const { before: o, distance: s } = A(n);
-  return Xt(
+}, Lt = (t, e, n) => {
+  const { before: o, distance: s } = x(n);
+  return Ft(
     {
@@ -46,6 +46,6 @@ x1: t[o],
   );
-}, ft = (t, e) => t ? ut(getComputedStyle(t)[e]) : 0, G = (t, e) => t ? ut(getComputedStyle(t)[e]) : 0, Ct = (t) => {
+}, ht = (t, e) => t ? mt(getComputedStyle(t)[e]) : 0, O = (t, e) => t ? mt(getComputedStyle(t)[e]) : 0, Nt = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: e, scrollTop: n };
-}, A = (t) => t == "horizontal" ? {
+}, x = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -84,3 +84,3 @@ afterMargin: "marginRight",
   clientDistance: "clientHeight"
-}, Dt = (t, e) => Kt(t, e), Kt = (t, e) => {
+}, ft = (t, e) => se(t, e), se = (t, e) => {
   const n = [...e.children].filter(
@@ -96,14 +96,14 @@ (s) => !s.isEqualNode(t) && s.classList.contains("draggable")
   };
-}, Tt = (t) => window.TouchEvent && t instanceof TouchEvent, Q = (t) => t instanceof HTMLElement, Qt = ["onmouseup", "onmousedown", "onmousemove"], ot = (t, e, n) => {
-  !t || !Q(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, te = (t, e, n) => {
+}, Rt = (t) => window.TouchEvent && t instanceof TouchEvent, nt = (t) => t instanceof HTMLElement, re = ["onmouseup", "onmousedown", "onmousemove"], it = (t, e, n) => {
+  !t || !nt(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
+}, ie = (t, e, n) => {
   t[e] = (o) => {
     if (o.defaultPrevented)
       return;
-    const s = bt(o);
+    const s = At(o);
     n(s);
   };
-}, Gt = (t, e, n) => {
-  n && (ee(e) ? t[e] = n : te(t, e, n));
-}, ee = (t) => Qt.includes(t), ne = (t) => {
+}, Bt = (t, e, n) => {
+  n && (ce(e) ? t[e] = n : ie(t, e, n));
+}, ce = (t) => re.includes(t), ae = (t) => {
   const { target: e } = t;
@@ -121,4 +121,4 @@ return {
   };
-}, oe = (t, e) => {
-  const n = (o, s) => re(e, window, s, o);
+}, le = (t, e) => {
+  const n = (o, s) => fe(e, window, s, o);
   if (t instanceof MouseEvent) {
@@ -134,7 +134,7 @@ const { offsetX: o, offsetY: s } = t;
   }
-}, bt = (t) => {
-  const e = se(t);
+}, At = (t) => {
+  const e = ue(t);
   if (!e)
-    return ne(t);
-  const { offsetX: n, offsetY: o } = oe(t, e), { clientX: s, clientY: r, pageX: l, pageY: i, screenX: f, screenY: p, target: g } = e;
+    return ae(t);
+  const { offsetX: n, offsetY: o } = le(t, e), { clientX: s, clientY: r, pageX: l, pageY: c, screenX: u, screenY: D, target: S } = e;
   return {
@@ -144,24 +144,24 @@ clientX: s,
     pageX: l,
-    pageY: i,
-    screenX: f,
-    screenY: p,
-    target: g,
+    pageY: c,
+    screenX: u,
+    screenY: D,
+    target: S,
     offsetX: n,
     offsetY: o
   };
-}, se = (t) => {
-  if (Tt(t))
+}, ue = (t) => {
+  if (Rt(t))
     return t.touches[0];
   if (t instanceof MouseEvent)
     return t;
-}, re = (t, e, n, o) => {
-  const { page: s, scroll: r, before: l, borderBeforeWidth: i } = A(n), f = o.getBoundingClientRect();
-  return t[s] - e[r] - f[l] - ft(o, i);
-}, xt = (t, e, n = "ease-out", o = "transform") => {
-  Q(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${o}`);
-}, Wt = (t, e, n) => {
-  !t || !Q(t) || (t[e] = () => {
+}, fe = (t, e, n, o) => {
+  const { page: s, scroll: r, before: l, borderBeforeWidth: c } = x(n), u = o.getBoundingClientRect();
+  return t[s] - e[r] - u[l] - ht(o, c);
+}, Ct = (t, e, n = "ease-out", o = "transform") => {
+  nt(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${o}`);
+}, qt = (t, e, n) => {
+  !t || !nt(t) || (t[e] = () => {
     n();
   });
-}, ie = (t) => {
+}, ge = (t) => {
   var e = t.querySelector("style");
@@ -173,3 +173,3 @@ if (!e) {
   return e;
-}, ce = (t, e) => {
+}, de = (t, e) => {
   const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [o] = e.match(n) || [];
@@ -182,99 +182,99 @@ for (const s of t.cssRules) {
   return !1;
-}, ae = (t, e) => {
+}, pe = (t, e) => {
   e.forEach((n) => {
-    le(t, n);
+    ve(t, n);
   });
-}, le = (t, e) => {
+}, ve = (t, e) => {
   var o;
-  var n = ie(t);
-  n.sheet && (ce(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
-}, ue = (t, e, n) => {
+  var n = ge(t);
+  n.sheet && (de(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
+}, me = (t, e, n) => {
   n != 0 && (e === "vertical" ? t.scrollBy(0, n) : t.scrollBy(n, 0));
-}, fe = (t, e, n) => {
-  const { scrollDistance: o, clientDistance: s, scrollElement: r } = A(t);
+}, he = (t, e, n) => {
+  const { scrollDistance: o, clientDistance: s, scrollElement: r } = x(t);
   return n[r] / (e[o] - e[s]);
-}, ge = "handler-class", de = (t, e) => {
-  const n = O({ offsetX: 0, offsetY: 0 }), o = O({ top: 0, left: 0 }), s = O({ x: 0, y: 0 });
-  st(
+}, De = "handler-class", Se = (t, e) => {
+  const n = $({ offsetX: 0, offsetY: 0 }), o = $({ top: 0, left: 0 }), s = $({ x: 0, y: 0 });
+  ct(
     s,
-    (i) => {
-      const f = t.value;
-      f && (f.style.transform = `translate( ${i.x}px, ${i.y}px)`);
+    (c) => {
+      const u = t.value;
+      u && (u.style.transform = `translate( ${c.x}px, ${c.y}px)`);
     },
     { deep: !0 }
-  ), st(
+  ), ct(
     o,
-    (i) => {
-      const f = t.value;
-      f && (f.style.top = `${i.top}px`, f.style.left = `${i.left}px`);
+    (c) => {
+      const u = t.value;
+      u && (u.style.top = `${c.top}px`, u.style.left = `${c.left}px`);
     },
     { deep: !0 }
   );
-  function r(i, f, p, g) {
-    const d = (m) => {
+  function r(c, u, D, S) {
+    const b = (g) => {
       const {
-        beforeMargin: D,
-        borderBeforeWidth: y,
-        before: w,
-        offset: M,
-        scroll: P,
-        page: V,
-        inner: j,
-        distance: W,
-        axis: N
-      } = A(m), Y = p.value[V], z = window[P], F = window[j], H = i.getBoundingClientRect()[W], L = ft(i, y), c = G(i, D), a = Y - n.value[M];
-      if (a >= z - H / 2 && a <= z + F) {
-        const S = a - o.value[w] - L - c - z;
-        return E(m), S;
+        beforeMargin: m,
+        borderBeforeWidth: T,
+        before: M,
+        offset: C,
+        scroll: _,
+        page: q,
+        inner: U,
+        distance: X,
+        axis: L
+      } = x(g), W = D.value[q], P = window[_], j = window[U], V = c.getBoundingClientRect()[X], Y = ht(c, T), H = O(c, m), F = W - n.value[C];
+      if (F >= P - V / 2 && F <= P + j) {
+        const i = F - o.value[M] - Y - H - P;
+        return y(g), i;
       }
-      return s.value[N];
-    }, E = (m) => {
-      if (i && i.classList.contains(e) && m === g) {
-        const { before: D, distance: y, axis: w } = A(g), M = i.getBoundingClientRect()[y], P = f.getBoundingClientRect(), V = o.value[D] - P[D] + s.value[w], W = P[y] - M, N = V / W, Y = M / W, z = 0.1, F = 0.2, H = 0.8;
-        let L = 0;
-        const c = K(i, f);
-        !c && N < F && N > -Y ? L = N / F - 1 : !c && N > H && N < 1 + Y && (L = 1 / (1 - H) * (N - H));
-        const a = z * M * L;
-        ue(f, g, a);
+      return s.value[L];
+    }, y = (g) => {
+      if (c && c.classList.contains(e) && g === S) {
+        const { before: m, distance: T, axis: M } = x(S), C = c.getBoundingClientRect()[T], _ = u.getBoundingClientRect(), q = o.value[m] - _[m] + s.value[M], X = _[T] - C, L = q / X, W = C / X, P = 0.1, j = 0.2, V = 0.8;
+        let Y = 0;
+        const H = et(c, u);
+        !H && L < j && L > -W ? Y = L / j - 1 : !H && L > V && L < 1 + W && (Y = 1 / (1 - V) * (L - V));
+        const F = P * C * Y;
+        me(u, S, F);
       }
-    }, h = (m) => {
-      const { axis: D } = A(m);
-      s.value[D] = d(m);
+    }, p = (g) => {
+      const { axis: m } = x(g);
+      s.value[m] = b(g);
     };
-    h("horizontal"), h("vertical");
+    p("horizontal"), p("vertical");
   }
   return {
     setTransform: r,
-    updateTransformState: (i, f) => {
-      const { offsetX: p, offsetY: g, top: d, left: E } = ve(
-        i,
-        f,
+    updateTransformState: (c, u) => {
+      const { offsetX: D, offsetY: S, top: b, left: y } = be(
+        c,
+        u,
         t.value
       );
       o.value = {
-        top: d,
-        left: E
-      }, n.value = { offsetX: p, offsetY: g };
+        top: b,
+        left: y
+      }, n.value = { offsetX: D, offsetY: S };
     }
   };
-}, Mt = (t, e, n) => {
-  const { borderBeforeWidth: o, before: s } = A(t);
-  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - ft(n, o);
-}, pe = (t, e) => {
-  let { offsetX: n, offsetY: o, target: s } = t, r = he(s, e);
-  return e && r && e != s && (n += Mt("horizontal", r, e), o += Mt("vertical", r, e)), { offsetX: n, offsetY: o };
-}, he = (t, e) => {
-  const n = t == null ? void 0 : t.closest(`.${ge}`);
+}, Ot = (t, e, n) => {
+  const { borderBeforeWidth: o, before: s } = x(t);
+  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - ht(n, o);
+}, Te = (t, e) => {
+  let { offsetX: n, offsetY: o, target: s } = t, r = Ee(s, e);
+  return e && r && e != s && (n += Ot("horizontal", r, e), o += Ot("vertical", r, e)), { offsetX: n, offsetY: o };
+}, Ee = (t, e) => {
+  const n = t == null ? void 0 : t.closest(`.${De}`);
   return n && e && n.isSameNode(e) ? t : n;
-}, Nt = (t, e, n, o) => {
-  const { offset: s, beforeMargin: r, page: l, borderBeforeWidth: i, scroll: f } = A(t);
-  return e[l] - o[s] - G(n, r) - ft(n, i) - window[f];
-}, ve = (t, e, n) => {
-  const { offsetX: o, offsetY: s } = pe(t, n);
+}, wt = (t, e, n, o) => {
+  const { offset: s, beforeMargin: r, page: l, borderBeforeWidth: c, scroll: u } = x(t);
+  return e[l] - o[s] - O(n, r) - ht(n, c) - window[u];
+}, be = (t, e, n) => {
+  const { offsetX: o, offsetY: s } = Te(t, n);
   return {
-    top: Nt("vertical", t, e, {
+    top: wt("vertical", t, e, {
       offsetX: o,
       offsetY: s
     }),
-    left: Nt("horizontal", t, e, {
+    left: wt("horizontal", t, e, {
       offsetX: o,
@@ -286,12 +286,12 @@ offsetY: s
   };
-}, me = "drag", De = "startDrop", Se = "drop", Te = (t) => t === Se || t === De;
+}, ye = "drag", Re = "startDrop", Ae = "drop", xe = (t) => t === Ae || t === Re;
 var I = /* @__PURE__ */ ((t) => (t[t.NOT_DRAGGING = 0] = "NOT_DRAGGING", t[t.START_DRAGGING = 1] = "START_DRAGGING", t[t.DRAGING = 2] = "DRAGING", t[t.END_DRAGGING = 3] = "END_DRAGGING", t))(I || {});
-const Et = (t) => !t || t.length == 0 ? 0 : ut(t.replace("px", "")), be = (t, e) => {
+const xt = (t) => !t || t.length == 0 ? 0 : mt(t.replace("px", "")), Ce = (t, e) => {
   const n = getComputedStyle(t)[e];
   if (n.match("%")) {
-    const s = ut(n.replace("%", "")), { width: r } = t.getBoundingClientRect();
+    const s = mt(n.replace("%", "")), { width: r } = t.getBoundingClientRect();
     return r * (s / 100);
   }
-  return Et(n);
-}, At = (t, e) => {
+  return xt(n);
+}, Gt = (t, e) => {
   if (!(t instanceof Element))
@@ -302,3 +302,3 @@ return {
     };
-  const n = be(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
+  const n = Ce(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
   return {
@@ -308,14 +308,14 @@ gap: n,
   };
-}, Ee = (t) => {
+}, Ge = (t) => {
   const { top: e, left: n } = getComputedStyle(t);
   return {
-    top: Et(e),
-    left: Et(n)
+    top: xt(e),
+    left: xt(n)
   };
-}, ye = (t, e) => {
-  const { gap: n } = A(e), { gap: o, hasGaps: s } = At(t, n);
+}, Me = (t, e) => {
+  const { gap: n } = x(e), { gap: o, hasGaps: s } = Gt(t, n);
   return s ? o : 0;
 };
-function yt(t, e, n, o, s = t.previousElementSibling, r = t.nextElementSibling) {
-  let { height: l, width: i } = xe(
+function dt(t, e, n, o, s = t.previousElementSibling, r = t.nextElementSibling) {
+  let { height: l, width: c } = Le(
     n,
@@ -326,5 +326,5 @@ t,
   );
-  return K(t, o) && e == me && (l = 0, i = 0), { height: l, width: i };
+  return et(t, o) && e == ye && (l = 0, c = 0), { height: l, width: c };
 }
-function xe(t, e, n, o) {
+function Le(t, e, n, o) {
   const {
@@ -334,30 +334,30 @@ afterMargin: s,
     distance: l,
-    gap: i
-  } = A(t), f = G(e, s), p = G(e, r), g = G(o, r), { gap: d, hasGaps: E } = At(
+    gap: c
+  } = x(t), u = O(e, s), D = O(e, r), S = O(o, r), { gap: b, hasGaps: y } = Gt(
     e.parentElement,
-    i
-  ), h = e.getBoundingClientRect()[l];
-  if (E)
-    return Lt(h, p, f, d, 0, t);
-  const { afterSpace: m, beforeScace: D, rest: y } = Ae(
+    c
+  ), p = e.getBoundingClientRect()[l];
+  if (y)
+    return _t(p, D, u, b, 0, t);
+  const { afterSpace: g, beforeScace: m, rest: T } = Ne(
     n,
-    g,
-    f,
-    p,
+    S,
+    u,
+    D,
     s
   );
-  return Lt(h, D, m, 0, y, t);
+  return _t(p, m, g, 0, T, t);
 }
-const Ae = (t, e, n, o, s) => {
+const Ne = (t, e, n, o, s) => {
   const r = Math.max(e, n);
-  let l = o, i = e;
+  let l = o, c = e;
   if (t) {
-    const f = G(
+    const u = O(
       t,
       s
     );
-    l = Math.max(f, o), i = Math.max(i, f);
+    l = Math.max(u, o), c = Math.max(c, u);
   }
-  return { afterSpace: r, beforeScace: l, rest: i };
-}, Lt = (t, e, n, o, s, r) => Re(r, t + e + n + o - s), Re = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, Ce = (t, e) => {
+  return { afterSpace: r, beforeScace: l, rest: c };
+}, _t = (t, e, n, o, s, r) => Be(r, t + e + n + o - s), Be = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, Oe = (t, e) => {
   const n = e.parentElement, o = e.previousElementSibling;
@@ -369,99 +369,99 @@ if (!n)
     afterMargin: r
-  } = A("vertical"), { beforeMargin: l } = A("horizontal"), i = G(
+  } = x("vertical"), { beforeMargin: l } = x("horizontal"), c = O(
     e,
     s
-  ), f = G(
+  ), u = O(
     o,
     r
-  ), p = G(
+  ), D = O(
     t,
     s
-  ), g = G(
+  ), S = O(
     e,
     l
-  ), d = G(
+  ), b = O(
     t,
     l
-  ), { top: E, left: h } = Ee(e), { top: m, left: D } = t.getBoundingClientRect(), { x: y, y: w } = zt(t), M = p - Math.max(i - f, 0), P = d - Math.max(
-    g - d,
+  ), { top: y, left: p } = Ge(e), { top: g, left: m } = t.getBoundingClientRect(), { x: T, y: M } = Ht(t), C = D - Math.max(c - u, 0), _ = b - Math.max(
+    S - b,
     0
   );
   return {
-    y: m - w - (E + i) - M,
-    x: D - y - (h + g) - P
+    y: g - M - (y + c) - C,
+    x: m - T - (p + S) - _
   };
 };
-function Ge(t, e, n, o, s, r, l, i, f) {
-  let p = 0, g = 0, d = !1;
+function we(t, e, n, o, s, r, l, c, u) {
+  let D = 0, S = 0, b = !1;
   if (n === o)
-    return Bt(
-      { height: p, width: g },
+    return $t(
+      { height: D, width: S },
       t,
       s,
       l,
-      d
+      b
     );
-  if (n < 0 && f) {
-    d = !0;
-    const [R] = e, { x: b, y: x } = Ce(R, f);
-    p += x, g += b;
+  if (n < 0 && u) {
+    b = !0;
+    const [f] = e, { x: d, y: v } = Oe(f, u);
+    D += v, S += d;
   }
-  const { sourceElement: E, targetElement: h, siblingsBetween: m, isDraggedFoward: D } = Le(e, n, o, f), {
-    scrollElement: y,
-    beforeMargin: w,
-    afterMargin: M,
-    distance: P,
-    gap: V
-  } = A(t), { gap: j, hasGaps: W } = At(i, V), {
-    beforeMargin: N,
-    afterMargin: Y,
-    spaceBeforeDraggedElement: z
-  } = Oe(
-    w,
+  const { sourceElement: y, targetElement: p, siblingsBetween: g, isDraggedFoward: m } = Ie(e, n, o, u), {
+    scrollElement: T,
+    beforeMargin: M,
+    afterMargin: C,
+    distance: _,
+    gap: q
+  } = x(t), { gap: U, hasGaps: X } = Gt(c, q), {
+    beforeMargin: L,
+    afterMargin: W,
+    spaceBeforeDraggedElement: P
+  } = Ve(
     M,
-    E,
-    h == null ? void 0 : h.previousElementSibling,
-    D,
-    W
-  ), { beforeSpace: F, space: H, afterSpace: L } = Be(
-    w,
+    C,
+    y,
+    p == null ? void 0 : p.previousElementSibling,
+    m,
+    X
+  ), { beforeSpace: j, space: V, afterSpace: Y } = Pe(
     M,
-    P,
-    m,
+    C,
+    _,
+    g,
+    U,
+    X
+  ), H = $e(
+    V,
     j,
-    W
-  ), c = Ne(
-    H,
-    F,
+    Y,
     L,
-    N,
-    Y,
-    j
-  ), a = d ? 0 : Me(y, i, r), S = (D ? c - z : z - c) - a;
-  return t === "vertical" ? p += S : t === "horizontal" && (g += S), Bt(
-    { height: p, width: g },
+    W,
+    U
+  ), F = b ? 0 : _e(T, c, r), i = (m ? H - P : P - H) - F;
+  return t === "vertical" ? D += i : t === "horizontal" && (S += i), $t(
+    { height: D, width: S },
     t,
     s,
     l,
-    d
+    b
   );
 }
-const Me = (t, e, n) => {
+const _e = (t, e, n) => {
   const o = e[t], s = n[t];
   return o - s;
-}, Ne = (t, e, n, o, s, r) => {
+}, $e = (t, e, n, o, s, r) => {
   const l = Math.max(e, s);
   return Math.max(n, o) + t + l + r;
-}, Le = (t, e, n, o) => {
+}, Ie = (t, e, n, o) => {
   const s = e < n, [r, l] = [e, n].toSorted(
-    (g, d) => g - d
-  ), i = t[e] ?? o, f = t[n];
-  let p = s ? t.slice(r + 1, l + 1) : t.slice(r, l);
-  return r < 0 && o && (p = t.slice(r + 1, l)), {
-    sourceElement: i,
-    targetElement: f,
-    siblingsBetween: p,
+    (S, b) => S - b
+  ), c = t[e] ?? o, u = t[n];
+  let D = s ? t.slice(r + 1, l + 1) : t.slice(r, l);
+  return r < 0 && o && (D = t.slice(r + 1, l)), {
+    sourceElement: c,
+    targetElement: u,
+    siblingsBetween: D,
     isDraggedFoward: s
   };
-}, Be = (t, e, n, o, s, r) => {
+}, Pe = (t, e, n, o, s, r) => {
   if (o.length == 0)
@@ -473,15 +473,15 @@ return {
     };
-  const l = G(o[0], t);
-  let i = 0, f = -l;
-  for (const [p, g] of o.entries()) {
-    const d = g.getBoundingClientRect()[n], E = G(g, t);
-    r && (i += E), r && p > 0 ? i += s : i = Math.max(i, E), f += i + d, i = G(g, e);
+  const l = O(o[0], t);
+  let c = 0, u = -l;
+  for (const [D, S] of o.entries()) {
+    const b = S.getBoundingClientRect()[n], y = O(S, t);
+    r && (c += y), r && D > 0 ? c += s : c = Math.max(c, y), u += c + b, c = O(S, e);
   }
-  return { beforeSpace: l, space: f, afterSpace: i };
-}, Bt = (t, e, n, o, s) => {
-  const { scroll: r, distance: l } = A(e), i = window[r], f = n[r], p = s ? 0 : f - 2 * i + o[r];
-  return t[l] += p, t;
-}, Oe = (t, e, n, o, s, r) => {
+  return { beforeSpace: l, space: u, afterSpace: c };
+}, $t = (t, e, n, o, s) => {
+  const { scroll: r, distance: l } = x(e), c = window[r], u = n[r], D = s ? 0 : u - 2 * c + o[r];
+  return t[l] += D, t;
+}, Ve = (t, e, n, o, s, r) => {
   const l = s ? n.previousElementSibling : o;
-  return we(
+  return ze(
     t,
@@ -493,3 +493,3 @@ e,
   );
-}, we = (t, e, n, o, s) => {
+}, ze = (t, e, n, o, s) => {
   if (s)
@@ -501,16 +501,16 @@ return {
     };
-  const r = G(
+  const r = O(
     n,
     e
-  ), l = G(o, t);
-  let i = Math.max(r, l);
+  ), l = O(o, t);
+  let c = Math.max(r, l);
   return {
     afterMargin: r,
     beforeMargin: l,
-    spaceBeforeDraggedElement: i
+    spaceBeforeDraggedElement: c
   };
-}, Yt = (t, e, n) => {
+}, jt = (t, e, n) => {
   const o = new MutationObserver((s) => {
-    s.forEach(() => {
-      t(o);
+    s.forEach((r) => {
+      t(o, r);
     });
@@ -520,32 +520,32 @@ });
 };
-function _e(t, e) {
-  return gt(e).every(
+function Xe(t, e) {
+  return Dt(e).every(
     (n) => t.classList.contains(n)
   );
 }
-function at(t) {
-  return t ? `.${gt(t).join(".")}` : "";
+function pt(t) {
+  return t ? `.${Dt(t).join(".")}` : "";
 }
-function $e(t, e) {
+function We(t, e) {
   if (!e)
     return;
-  const n = gt(e);
+  const n = Dt(e);
   t.classList.add(...n);
 }
-function gt(t) {
+function Dt(t) {
   return t ? t.split(" ").filter((e) => e) : [];
 }
-const lt = "temp-child", Ie = "startDrag", Pe = "cubic-bezier(0.2, 0, 0, 1)", Ve = (t, e, n) => {
-  let o = yt(
+const vt = "temp-child", Ye = "startDrag", He = "cubic-bezier(0.2, 0, 0, 1)", Fe = (t, e, n) => {
+  let o = dt(
     e,
-    Ie,
+    Ye,
     n,
     t
   );
-  const s = ye(t, n), { distance: r } = A(n);
+  const s = Me(t, n), { distance: r } = x(n);
   o[r] -= s;
-  const { large: l, largeDistance: i } = ze(n, e);
-  return o[i] = l, o;
-}, ze = (t, e) => {
-  const n = t == "horizontal" ? "vertical" : "horizontal", { distance: o } = A(n);
+  const { large: l, largeDistance: c } = qe(n, e);
+  return o[c] = l, o;
+}, qe = (t, e) => {
+  const n = t == "horizontal" ? "vertical" : "horizontal", { distance: o } = x(n);
   return {
@@ -555,27 +555,27 @@ large: e.getBoundingClientRect()[o],
   };
-}, rt = (t, e, n) => {
+}, at = (t, e, n) => {
   t.style.height = `${e}px`, t.style.width = `${n}px`, t.style.minWidth = `${n}px`;
-}, Xe = (t, e, n) => (o) => {
-  e.contains(t) && (rt(t, n.height, n.width), o.disconnect());
-}, We = (t, e) => {
+}, je = (t, e, n) => (o) => {
+  e.contains(t) && (at(t, n.height, n.width), o.disconnect());
+}, ke = (t, e) => {
   if (e != I.START_DRAGGING)
     return;
-  const { droppable: n, config: o, droppableScroll: s } = t, { direction: r } = o, l = fe(o.direction, n, s) > 0.99, { scrollDistance: i, clientDistance: f, scrollElement: p } = A(r);
-  l && (n[p] = n[i] - n[f]);
-}, Ot = (t, e, n, o) => {
+  const { droppable: n, config: o, droppableScroll: s } = t, { direction: r } = o, l = he(o.direction, n, s) > 0.99, { scrollDistance: c, clientDistance: u, scrollElement: D } = x(r);
+  l && (n[D] = n[c] - n[u]);
+}, It = (t, e, n, o) => {
   if (!o)
     return;
-  const { droppable: s, config: r } = o, { direction: l, animationDuration: i } = r;
-  if (We(o, n), s.querySelector(`.${lt}`) || !t)
+  const { droppable: s, config: r } = o, { direction: l, animationDuration: c } = r;
+  if (ke(o, n), s.querySelector(`.${vt}`) || !t)
     return;
-  var f = document.createElement(t.tagName);
-  f.classList.add(lt), rt(f, 0, 0);
-  const p = Ve(s, t, l);
-  xt(
-    f,
-    i,
-    Pe,
+  var u = document.createElement(t.tagName);
+  u.classList.add(vt), at(u, 0, 0);
+  const D = Fe(s, t, l);
+  Ct(
+    u,
+    c,
+    He,
     "width, min-width, height"
-  ), e.isSameNode(s) && rt(f, p.height, p.width), Yt(
-    Xe(f, s, p),
+  ), e.isSameNode(s) && at(u, D.height, D.width), jt(
+    je(u, s, D),
     s,
@@ -586,7 +586,7 @@ {
     }
-  ), s.appendChild(f);
-}, Ye = (t, e, n, o) => {
+  ), s.appendChild(u);
+}, Ue = (t, e, n, o) => {
   if (n) {
     var s = document.querySelectorAll(
-      `${at(n)}.${lt}`
+      `${pt(n)}.${vt}`
     );
@@ -597,186 +597,216 @@ s.forEach((r) => {
         return;
-      rt(r, 0, 0), setTimeout(() => {
-        var f;
-        (f = r.parentNode) == null || f.removeChild(r);
+      at(r, 0, 0), setTimeout(() => {
+        var u;
+        (u = r.parentNode) == null || u.removeChild(r);
       }, o);
     });
   }
-}, St = (t, e, n = !1) => {
-  var o = t.querySelectorAll(`.${lt}`);
+}, yt = (t, e, n = !1) => {
+  var o = t.querySelectorAll(`.${vt}`);
   o.forEach((s) => {
-    n ? (rt(s, 0, 0), setTimeout(() => {
+    n ? (at(s, 0, 0), setTimeout(() => {
       t.removeChild(s);
     }, e)) : t.removeChild(s);
   });
-}, wt = "dragging-handler-class", He = "draggable", _t = "temp-child", Fe = "startDrop", qe = "drag", je = "startDrag", $t = "dropping", ke = "cubic-bezier(0.2, 0, 0, 1)";
-function Ue(t, e, n, o, s, r) {
-  const l = O(s), {
-    direction: i,
-    handlerSelector: f,
-    onRemoveAtEvent: p,
-    animationDuration: g,
-    draggingClass: d
-  } = t, E = (c, a, v, S, R) => {
-    if (!S)
+}, Pt = "dragging-handler-class", Ze = "draggable", Vt = "temp-child", Je = "startDrop", Ke = "drag", Qe = "startDrag", zt = "dropping", tn = "cubic-bezier(0.2, 0, 0, 1)";
+function en(t, e, n, o, s, r) {
+  const l = $(s), {
+    direction: c,
+    handlerSelector: u,
+    onRemoveAtEvent: D,
+    animationDuration: S,
+    draggingClass: b
+  } = t, y = (i, f, d, v, A) => {
+    if (!v)
       return;
-    const { droppable: b, config: x } = S, B = yt(
-      c,
-      a,
-      x.direction,
-      b
+    const { droppable: E, config: R } = v, B = dt(
+      i,
+      f,
+      R.direction,
+      E
     );
-    Te(a) ? M(
-      c,
-      a,
+    xe(f) ? q(
+      i,
+      f,
       B,
+      d,
       v,
-      S,
-      R
-    ) : h(
-      c,
-      a,
+      A
+    ) : m(
+      i,
+      f,
       B,
-      S
+      v
     );
-  }, h = (c, a, v, S) => {
-    const { config: R, droppable: b } = S, { siblings: x } = Dt(c, b), B = K(c, b);
-    for (const [_, $] of x.entries()) {
-      if (!$.classList.contains(He))
+  };
+  function p(i, f, d, v) {
+    if (!d || !d.droppable || !d.config)
+      return;
+    const { droppable: A, config: E } = d;
+    let { siblings: R } = ft(f, A);
+    R = [f, ...R].toReversed();
+    const B = dt(
+      f,
+      "remove",
+      E.direction,
+      A
+    );
+    for (const [w, N] of R.entries())
+      w >= i && (C(N, B), setTimeout(() => {
+        v(N);
+      }, S));
+  }
+  function g(i) {
+    W(i, r, r);
+  }
+  const m = (i, f, d, v) => {
+    const { config: A, droppable: E } = v, { siblings: R } = ft(i, E), B = et(i, E);
+    for (const [w, N] of R.entries()) {
+      if (!N.classList.contains(Ze))
         continue;
-      const X = m(
-        R.direction,
-        c,
-        $,
-        v
+      const z = T(
+        A.direction,
+        i,
+        N,
+        d
       );
-      if (!B && X)
-        v = X;
+      if (!B && z)
+        d = z;
       else if (!B)
         continue;
-      const k = x.length - _;
-      D(
-        v,
-        k,
-        R.direction,
-        x
-      ), a === je ? y($, v) : a === qe && w($, v);
+      const Z = R.length - w;
+      M(
+        d,
+        Z,
+        A.direction,
+        R
+      ), f === Qe ? C(N, d) : f === Ke && _(N, d);
     }
-  }, m = (c, a, v, S) => {
-    const { before: R, distance: b, axis: x } = A(c), B = a.getBoundingClientRect(), _ = v.getBoundingClientRect(), $ = B[R], X = _[R], k = _[b], tt = X + k / 2;
-    if (v.getAnimations().length !== 0)
+  }, T = (i, f, d, v) => {
+    const { before: A, distance: E, axis: R } = x(i), B = f.getBoundingClientRect(), w = d.getBoundingClientRect(), N = B[A], z = w[A], Z = w[E], ot = z + Z / 2;
+    if (d.getAnimations().length !== 0)
       return;
-    const U = zt(v)[x], et = tt - U;
-    return $ > et ? { height: 0, width: 0 } : S;
-  }, D = (c, a, v, S) => {
-    const R = S.filter(
-      (x) => x.classList.contains("draggable")
-    ).length, { distance: b } = A(v);
-    c[b] == 0 ? l.value = Math.max(l.value, a) : l.value = Math.min(l.value, a - 1), l.value = Math.min(l.value, R);
-  }, y = (c, a) => {
-    const { width: v, height: S } = a;
-    ot(c, S, v);
-  }, w = (c, a) => {
-    const { width: v, height: S } = a;
-    ot(c, S, v), xt(c, g, ke);
-  }, M = (c, a, v, S, R, b) => {
-    const { droppable: x, droppableScroll: B, config: _ } = R, { siblings: $, positionOnDroppable: X } = Dt(
-      c,
-      x
-    ), k = $.toReversed();
-    k.splice(X, 0, c);
-    const { previousElement: tt, nextElement: it, targetIndex: U } = P(
-      c,
-      X,
-      k,
-      x
+    const K = Ht(d)[R], st = ot - K;
+    return N > st ? { height: 0, width: 0 } : v;
+  }, M = (i, f, d, v) => {
+    const A = v.filter(
+      (R) => R.classList.contains("draggable")
+    ).length, { distance: E } = x(d);
+    i[E] == 0 ? l.value = Math.max(l.value, f) : l.value = Math.min(l.value, f - 1), l.value = Math.min(l.value, A);
+  }, C = (i, f) => {
+    const { width: d, height: v } = f;
+    it(i, v, d);
+  }, _ = (i, f) => {
+    const { width: d, height: v } = f;
+    it(i, v, d), Ct(i, S, tn);
+  }, q = (i, f, d, v, A, E) => {
+    const { droppable: R, droppableScroll: B, config: w } = A, { siblings: N, positionOnDroppable: z } = ft(
+      i,
+      R
+    ), Z = N.toReversed();
+    Z.splice(z, 0, i);
+    const { previousElement: ot, nextElement: lt, targetIndex: K } = U(
+      i,
+      z,
+      Z,
+      R
     );
-    v = yt(
-      c,
-      a,
-      _.direction,
+    d = dt(
+      i,
+      f,
+      w.direction,
       r,
-      tt,
-      it
+      ot,
+      lt
     );
-    const et = Ut(), dt = Ge(
-      _.direction,
-      k,
-      X,
-      U,
-      et,
+    const st = ee(), St = we(
+      w.direction,
+      Z,
+      z,
+      K,
+      st,
       B,
-      S,
-      x,
-      c
+      v,
+      R,
+      i
     );
-    for (const [pt, nt] of $.toReversed().entries()) {
-      let ht = v;
-      U - 1 >= pt && (ht = { height: 0, width: 0 }), a === Fe && !nt.classList.contains(_t) && V(
-        nt,
-        ht,
-        c,
-        dt
+    for (const [Tt, rt] of N.toReversed().entries()) {
+      let ut = d;
+      K - 1 >= Tt && (ut = { height: 0, width: 0 }), f === Je && !rt.classList.contains(Vt) && X(
+        rt,
+        ut,
+        i,
+        St
       );
     }
-    j(
-      U,
-      c,
-      _.onInsertEvent,
-      x,
-      b
+    L(
+      K,
+      i,
+      w.onInsertEvent,
+      R,
+      E
     );
-  }, P = (c, a, v, S) => {
-    const b = K(c, S) ? a : l.value, x = () => a < b ? [b, b + 1] : a > b ? [b - 1, b] : [b - 1, b + 1], [B, _] = x(), $ = v[B] ?? null, X = v[_] ?? null;
+  }, U = (i, f, d, v) => {
+    const E = et(i, v) ? f : l.value, R = () => f < E ? [E, E + 1] : f > E ? [E - 1, E] : [E - 1, E + 1], [B, w] = R(), N = d[B] ?? null, z = d[w] ?? null;
     return {
-      previousElement: $,
-      nextElement: X,
-      targetIndex: b
+      previousElement: N,
+      nextElement: z,
+      targetIndex: E
     };
-  }, V = (c, a, v, S) => {
-    ot(c, a.height, a.width), ot(
-      v,
-      S.height,
-      S.width
+  }, X = (i, f, d, v) => {
+    it(i, f.height, f.width), it(
+      d,
+      v.height,
+      v.width
     );
-  }, j = (c, a, v, S, R) => {
-    a.classList.add($t), N(S), setTimeout(() => {
-      if (a.classList.remove($t), W(r, S), R != null) {
-        const b = p(R);
-        b && v(c, b);
+  }, L = (i, f, d, v, A) => {
+    f.classList.add(zt), W(f, r, v, () => {
+      if (f.classList.remove(zt), A != null) {
+        const E = D(A);
+        E && d(i, E);
       }
-      F(a), Y(a, r), Y(a, S);
-    }, g);
+    });
   };
-  function W(c, a) {
-    c.isSameNode(a) ? St(c, g) : (St(c, g, !0), St(a, g));
+  function W(i, f, d, v) {
+    setTimeout(() => {
+      v && v(), P(f, d), j(d), H(i), V(i, f), V(i, d);
+    }, S);
   }
-  const N = (c) => {
-    if (r.isSameNode(c))
+  function P(i, f) {
+    i.isSameNode(f) ? yt(i, S) : (yt(i, S, !0), yt(f, S));
+  }
+  const j = (i) => {
+    if (r.isSameNode(i))
       return;
-    var [a] = r.querySelectorAll(`.${_t}`);
-    if (!a)
+    var [f] = r.querySelectorAll(`.${Vt}`);
+    if (!f)
       return;
-    const { distance: v } = A(i);
-    Q(a) && (a.style[v] = "0px");
-  }, Y = (c, a) => {
-    const { siblings: v } = Dt(c, a);
-    for (const S of [...v, c])
-      z(S);
-  }, z = (c) => {
-    Q(c) && (c.style.transition = "", c.style.transform = "");
-  }, F = (c) => {
-    e.value = I.NOT_DRAGGING, L(c, !1), c.style.transform = "", c.style.transition = "", c.style.top = "", c.style.left = "", n.value = "", o.value = "";
-  }, H = (c, a) => {
-    const v = a.querySelector(f);
-    v ? v.classList.toggle(wt, c) : a.classList.toggle(wt, c);
-  }, L = (c, a) => {
-    c.classList.toggle(d, a), H(a, c);
+    const { distance: d } = x(c);
+    nt(f) && (f.style[d] = "0px");
+  }, V = (i, f) => {
+    const { siblings: d } = ft(i, f);
+    for (const v of [...d, i])
+      Y(v);
+  }, Y = (i) => {
+    nt(i) && (i.style.transition = "", i.style.transform = "");
+  }, H = (i) => {
+    e.value = I.NOT_DRAGGING, tt(i, !1), i.style.transform = "", i.style.transition = "", i.style.top = "", i.style.left = "", n.value = "", o.value = "";
+  }, F = (i, f) => {
+    const d = f.querySelector(u);
+    d ? d.classList.toggle(Pt, i) : f.classList.toggle(Pt, i);
+  }, tt = (i, f) => {
+    i.classList.toggle(b, f), F(f, i);
   };
-  return { emitEventToSiblings: E, toggleDraggingClass: L };
+  return {
+    emitEventToSiblings: y,
+    emitRemoveEventToSiblings: p,
+    emitFinishRemoveEventToSiblings: g,
+    toggleDraggingClass: tt
+  };
 }
-const q = class q {
+const k = class k {
   static addConfig(e, n) {
-    const o = q.configs.filter(
+    const o = k.configs.filter(
       (r) => !r.droppable.isSameNode(e)
-    ), s = Ct(e);
+    ), s = Nt(e);
     o.push({
@@ -786,12 +816,12 @@ droppable: e,
       droppableScroll: s
-    }), q.configs = o;
+    }), k.configs = o;
   }
   static updateScrolls(e, n) {
-    for (const o of q.configs) {
+    for (const o of k.configs) {
       const { droppable: s } = o;
-      (n && _e(s, n) || s.isSameNode(e)) && (o.droppableScroll = Ct(s));
+      (n && Xe(s, n) || s.isSameNode(e)) && (o.droppableScroll = Nt(s));
     }
   }
   static getConfig(e) {
-    return q.configs.find(
+    return k.configs.find(
       ({ droppable: o }) => o.isSameNode(e)
@@ -801,61 +831,61 @@ );
 };
-mt(q, "configs", []), mt(q, "removeObsoleteConfigs", () => {
-  const e = q.configs.filter(
+bt(k, "configs", []), bt(k, "removeObsoleteConfigs", () => {
+  const e = k.configs.filter(
     ({ droppable: n }) => document.contains(n)
   );
-  q.configs = e;
+  k.configs = e;
 });
-let J = q;
-function Ze(t, e, n, o) {
-  function s(h, m, D) {
-    return document.elementsFromPoint(h, m).filter((y) => !y.isSameNode(D));
+let Q = k;
+function nn(t, e, n, o) {
+  function s(p, g, m) {
+    return document.elementsFromPoint(p, g).filter((T) => !T.isSameNode(m));
   }
-  const r = O();
-  function l(h, m) {
-    h.hidden = !0;
-    const [D] = s(
-      m.clientX,
-      m.clientY,
-      h
+  const r = $();
+  function l(p, g) {
+    p.hidden = !0;
+    const [m] = s(
+      g.clientX,
+      g.clientY,
+      p
     );
-    return h.hidden = !1, !e || !D ? void 0 : D.closest(
-      at(e)
+    return p.hidden = !1, !e || !m ? void 0 : m.closest(
+      pt(e)
     );
   }
-  function i(h) {
+  function c(p) {
     return Array.from(
-      document.querySelectorAll(at(e))
+      document.querySelectorAll(pt(e))
     ).every(
-      (D) => K(h, D)
+      (m) => et(p, m)
     );
   }
-  function f(h, m) {
-    return !K(h, m) || i(h);
+  function u(p, g) {
+    return !et(p, g) || c(p);
   }
-  const p = () => {
+  const D = () => {
     o();
   };
-  function g(h) {
-    Wt(h, "onscroll", p);
+  function S(p) {
+    qt(p, "onscroll", D);
   }
-  function d(h) {
-    var y;
-    const m = t.value;
-    if (!m)
+  function b(p) {
+    var T;
+    const g = t.value;
+    if (!g)
       return;
-    if (r.value && f(
-      m,
-      (y = r.value) == null ? void 0 : y.droppable
+    if (r.value && u(
+      g,
+      (T = r.value) == null ? void 0 : T.droppable
     ))
       return r.value;
-    const D = l(m, h);
-    return D ? (Q(D) && !D.onscroll && g(D), J.getConfig(D)) : J.getConfig(n);
+    const m = l(g, p);
+    return m ? (nt(m) && !m.onscroll && S(m), Q.getConfig(m)) : Q.getConfig(n);
   }
-  function E(h) {
-    r.value = d(h);
+  function y(p) {
+    r.value = b(p);
   }
-  return { currentDroppableConfig: r, updateConfig: E, getCurrentConfig: d };
+  return { currentDroppableConfig: r, updateConfig: y, getCurrentConfig: b };
 }
-const It = "draggable", ct = "handler-class", Je = "dragging-handler-class", Ke = "droppable", Qe = "dropping", Pt = "drag", tn = "startDrag", en = "startDrop", nn = "cubic-bezier(0.2, 0, 0, 1)";
-function on(t, e, n, o) {
+const Xt = "draggable", gt = "handler-class", on = "dragging-handler-class", sn = "droppable", rn = "dropping", Wt = "drag", cn = "startDrag", an = "startDrop", ln = "cubic-bezier(0.2, 0, 0, 1)";
+function un(t, e, n, o) {
   const {
@@ -865,186 +895,212 @@ handlerSelector: s,
     droppableGroup: l,
-    animationDuration: i,
-    draggingClass: f
-  } = n, p = gt(l).map((u) => `droppable-group-${u}`).join(" "), g = O(I.NOT_DRAGGING), d = O(t), E = O({ scrollLeft: 0, scrollTop: 0 }), h = O({
+    animationDuration: c,
+    delayBeforeRemove: u,
+    draggingClass: D,
+    removingClass: S,
+    onRemoveAtEvent: b
+  } = n, y = Dt(l).map((a) => `droppable-group-${a}`).join(" "), p = $(I.NOT_DRAGGING), g = $(t), m = $({ scrollLeft: 0, scrollTop: 0 }), T = $({
     scrollX: 0,
     scrollY: 0
-  }), m = O({ pageX: 0, pageY: 0 }), D = O(""), y = O(""), w = O(), { setTransform: M, updateTransformState: P } = de(
-    d,
-    f
-  ), { emitEventToSiblings: V, toggleDraggingClass: j } = Ue(
+  }), M = $({ pageX: 0, pageY: 0 }), C = $(""), _ = $(""), q = $(), { setTransform: U, updateTransformState: X } = Se(
+    g,
+    D
+  ), {
+    emitEventToSiblings: L,
+    emitRemoveEventToSiblings: W,
+    emitFinishRemoveEventToSiblings: P,
+    toggleDraggingClass: j
+  } = en(
     n,
-    g,
-    y,
-    D,
+    p,
+    _,
+    C,
     e,
     o
-  ), W = () => {
-    d.value && d.value.classList.add(It);
-  }, N = () => {
-    if (d.value && r(d.value)) {
-      const u = d.value.querySelector(s);
-      u ? u.classList.add(ct) : d.value.classList.add(ct);
+  ), V = () => {
+    g.value && g.value.classList.add(Xt);
+  }, Y = () => {
+    if (g.value && r(g.value)) {
+      const a = g.value.querySelector(s);
+      a ? a.classList.add(gt) : g.value.classList.add(gt);
     }
-  }, Y = () => {
-    ae(document, [
-      `.${It} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
-      `.${ct} { cursor: grab; pointer-events: auto !important; }`,
+  }, H = () => {
+    pe(document, [
+      `.${Xt} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
+      `.${gt} { cursor: grab; pointer-events: auto !important; }`,
       ".temp-child { touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
       ".droppable { box-sizing: border-box !important; }",
-      `.${f} { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }`,
-      `.${Je} { cursor: grabbing; cursor: grabbing; }`,
-      `.${Qe} { pointer-events: none !important; }`
-    ]), N(), W(), z();
-  }, z = () => {
-    p && $e(o, p);
-  }, F = (u) => {
-    const T = (u == null ? void 0 : u.querySelector(`.${ct}`)) ?? u;
-    T && u && r(u) && (Gt(
-      T,
+      `.${D} { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }`,
+      `.${on} { cursor: grabbing; cursor: grabbing; }`,
+      `.${rn} { pointer-events: none !important; }`
+    ]), Y(), V(), F();
+  }, F = () => {
+    y && We(o, y);
+  }, tt = (a) => {
+    const h = (a == null ? void 0 : a.querySelector(`.${gt}`)) ?? a;
+    h && a && r(a) && (Bt(
+      h,
       "onmousedown",
-      B("mousemove", "mouseup")
-    ), Gt(
-      T,
+      N("mousemove", "mouseup")
+    ), Bt(
+      h,
       "ontouchstart",
-      B("touchmove", "touchend")
-    ), H(T)), o.classList.add(Ke);
+      N("touchmove", "touchend")
+    ), i(h)), o.classList.add(sn);
   };
-  function H(u) {
-    const T = u.querySelectorAll("img");
-    Array.from(T).forEach((C) => {
-      C.onmousedown = () => !1;
+  function i(a) {
+    const h = a.querySelectorAll("img");
+    Array.from(h).forEach((G) => {
+      G.onmousedown = () => !1;
     });
   }
-  const L = () => {
-    const u = d.value;
-    if (m.value.pageX == 0 && m.value.pageY == 0 || !a.value)
+  const f = () => {
+    const a = g.value;
+    if (M.value.pageX == 0 && M.value.pageY == 0 || !v.value)
       return;
-    const { droppable: T, config: C } = a.value;
-    M(u, T, m, C.direction), V(
-      u,
-      Pt,
-      h.value,
-      a.value
+    const { droppable: h, config: G } = v.value;
+    U(a, h, M, G.direction), L(
+      a,
+      Wt,
+      T.value,
+      v.value
     );
-  }, { updateConfig: c, currentDroppableConfig: a, getCurrentConfig: v } = Ze(d, p, o, L), S = function(u) {
-    c(u), g.value === I.START_DRAGGING ? (Ot(
-      d.value,
+  }, { updateConfig: d, currentDroppableConfig: v, getCurrentConfig: A } = nn(g, y, o, f), E = function(a) {
+    d(a), p.value === I.START_DRAGGING ? (It(
+      g.value,
       o,
-      g.value,
-      a.value
-    ), X(u)) : g.value === I.DRAGING && (R(), tt(u));
+      p.value,
+      v.value
+    ), ot(a)) : p.value === I.DRAGING && (R(), K(a));
   }, R = () => {
-    if (!a.value)
+    if (!v.value)
       return;
-    const { droppable: u } = a.value;
-    Ye(
-      u,
+    const { droppable: a } = v.value;
+    Ue(
+      a,
       o,
-      p,
-      i
-    ), Ot(
-      d.value,
+      y,
+      c
+    ), It(
+      g.value,
       o,
-      g.value,
-      a.value
+      p.value,
+      v.value
     );
-  }, b = (u) => {
-    if (Tt(u) && u.cancelable)
-      u.preventDefault();
-    else if (Tt(u))
+  }, B = (a) => {
+    if (Rt(a) && a.cancelable)
+      a.preventDefault();
+    else if (Rt(a))
       return;
-    const T = bt(u);
-    S(T);
-  }, x = (u, T) => {
-    u == "touchmove" ? w.value = setTimeout(() => {
-      T();
-    }, 200) : T();
-  }, B = (u, T) => () => {
-    const C = d.value;
-    J.updateScrolls(o, p);
-    const { scrollX: Z, scrollY: vt } = window;
-    h.value = { scrollX: Z, scrollY: vt }, g.value === I.NOT_DRAGGING && (g.value = I.START_DRAGGING, x(u, () => {
-      document.addEventListener(u, b, {
+    const h = At(a);
+    E(h);
+  }, w = (a, h) => {
+    a == "touchmove" ? q.value = setTimeout(() => {
+      h();
+    }, 200) : h();
+  }, N = (a, h) => () => {
+    const G = g.value;
+    Q.updateScrolls(o, y);
+    const { scrollX: J, scrollY: Et } = window;
+    T.value = { scrollX: J, scrollY: Et }, p.value === I.NOT_DRAGGING && (p.value = I.START_DRAGGING, w(a, () => {
+      document.addEventListener(a, B, {
         passive: !1
       });
-    }), it(o), C && document.addEventListener(T, _(u), {
+    }), st(o), G && document.addEventListener(h, z(a), {
       once: !0
     }));
-  }, _ = (u) => (T) => {
-    const C = bt(T);
-    clearTimeout(w.value), et(), document.removeEventListener(u, b), c(C);
-    const Z = v(C);
-    if (Z) {
-      const { droppable: vt } = Z;
-      $(vt);
+  }, z = (a) => (h) => {
+    const G = At(h);
+    clearTimeout(q.value), Tt(), document.removeEventListener(a, B), d(G);
+    const J = A(G);
+    if (J) {
+      const { droppable: Et } = J;
+      Z(Et);
     }
     o.onscroll = null;
-  }, $ = (u) => {
-    if (u.onscroll = null, !p)
+  }, Z = (a) => {
+    if (a.onscroll = null, !y)
       return;
-    const T = Array.from(
-      document.querySelectorAll(at(p))
+    const h = Array.from(
+      document.querySelectorAll(pt(y))
     );
-    for (const C of T)
-      C instanceof HTMLElement && (C.onscroll = null);
-  }, X = (u) => {
-    const T = d.value;
-    T && (k(), V(
-      T,
-      tn,
-      h.value,
-      a.value
-    ), P(u, T), pt(T));
-  }, k = () => {
-    E.value = kt(o), g.value = I.DRAGING;
-  }, tt = (u) => {
-    const { pageX: T, pageY: C } = u;
-    m.value = { pageX: T, pageY: C }, L();
-  }, it = (u) => {
-    Wt(u, "onscroll", U);
-  }, U = () => {
-    L();
-  }, et = () => {
-    if (g.value !== I.DRAGING) {
-      g.value = I.NOT_DRAGGING;
+    for (const G of h)
+      G instanceof HTMLElement && (G.onscroll = null);
+  }, ot = (a) => {
+    const h = g.value;
+    h && (lt(), L(
+      h,
+      cn,
+      T.value,
+      v.value
+    ), X(a, h), ut(h));
+  }, lt = () => {
+    m.value = te(o), p.value = I.DRAGING;
+  }, K = (a) => {
+    const { pageX: h, pageY: G } = a;
+    M.value = { pageX: h, pageY: G }, f();
+  }, st = (a) => {
+    qt(a, "onscroll", St);
+  }, St = () => {
+    f();
+  }, Tt = () => {
+    if (p.value !== I.DRAGING) {
+      p.value = I.NOT_DRAGGING;
       return;
     }
-    g.value = I.END_DRAGGING;
-    const u = d.value;
-    u && (dt(u), V(
-      u,
-      en,
-      h.value,
-      a.value,
+    p.value = I.END_DRAGGING;
+    const a = g.value;
+    a && (rt(a), L(
+      a,
+      an,
+      T.value,
+      v.value,
       e
     ));
-  }, dt = (u) => {
-    xt(u, i, nn), ot(u, 0, 0);
-  }, pt = (u) => {
-    const { height: T, width: C } = u.getBoundingClientRect();
-    y.value = `${T}px`, D.value = `${C}px`, j(u, !0), u.style.transition = "";
-  }, nt = (u, T) => {
-    st(u, (C) => {
-      const Z = d.value;
-      Z && Z.style.setProperty(T, C);
+  }, rt = (a) => {
+    Ct(a, c, ln), it(a, 0, 0);
+  }, ut = (a) => {
+    const { height: h, width: G } = a.getBoundingClientRect();
+    _.value = `${h}px`, C.value = `${G}px`, j(a, !0), a.style.transition = "";
+  }, Mt = (a, h) => {
+    ct(a, (G) => {
+      const J = g.value;
+      J && J.style.setProperty(h, G);
     });
+  }, kt = (a, h) => {
+    g.value && h && p.value == I.DRAGING && !(a != null && a.droppable.isSameNode(h.droppable)) && L(
+      g.value,
+      Wt,
+      T.value,
+      h
+    );
   };
-  st(a, (u, T) => {
-    d.value && T && g.value == I.DRAGING && !(u != null && u.droppable.isSameNode(T.droppable)) && V(
-      d.value,
-      Pt,
-      h.value,
-      T
-    );
-  }, { deep: !0 }), nt(D, "--fixedWidth"), nt(y, "--fixedHeight"), Y(), F(d.value);
+  function Ut(a) {
+    const h = g.value;
+    if (!v.value)
+      return;
+    const G = v.value;
+    a == e && t && (h.classList.add(S), setTimeout(() => {
+      b(e), h.classList.remove(S), W(
+        a,
+        h,
+        G,
+        (J) => {
+          rt(J), P(h);
+        }
+      );
+    }, u));
+  }
+  return ct(v, kt, { deep: !0 }), Mt(C, "--fixedWidth"), Mt(_, "--fixedHeight"), H(), tt(g.value), { removeAtFromElement: Ut };
 }
-const sn = "vertical", Vt = (t, e, n) => {
+const fn = "vertical", Yt = (t, e, n) => {
   const o = {
-    direction: sn,
+    direction: fn,
     handlerSelector: "draggable",
     draggingClass: "dragging",
+    removingClass: "removing",
     isDraggable: () => !0,
     onRemoveAtEvent: t,
     onInsertEvent: e,
-    animationDuration: 200
+    animationDuration: 200,
+    delayBeforeRemove: 200
   };
@@ -1059,21 +1115,34 @@ return n ? {
     onInsertEvent: e,
-    animationDuration: o.animationDuration
+    animationDuration: o.animationDuration,
+    removingClass: n.removingClass ?? o.removingClass,
+    delayBeforeRemove: n.delayBeforeRemove ?? o.delayBeforeRemove
   } : o;
 };
-function an(t, e) {
-  const n = "index", o = O(), s = (E) => (h) => qt(E, h), r = (E) => (h, m) => jt(E, h, m), l = s(t), i = r(t), f = () => {
-    if (o.value)
-      for (const E of o.value.children) {
-        const h = E.getAttribute(n), m = Zt(h), D = E;
-        D && m >= 0 && on(
-          D,
-          m,
-          Vt(l, i, e),
-          o.value
-        );
+function pn(t, e) {
+  const n = "index", o = $();
+  let s = [];
+  function r(g) {
+    for (const m of s)
+      m(g);
+  }
+  const l = (g) => (m) => Kt(g, m), c = (g) => (m, T) => Qt(g, m, T), u = l(t), D = c(t), S = () => {
+    if (o.value) {
+      s = [];
+      for (const g of o.value.children) {
+        const m = g.getAttribute(n), T = ne(m), M = g;
+        if (M && T >= 0) {
+          const { removeAtFromElement: C } = un(
+            M,
+            T,
+            Yt(u, D, e),
+            o.value
+          );
+          s.push(C);
+        }
       }
-  }, p = () => {
-    o.value && Yt(
+    }
+  }, b = () => {
+    o.value && jt(
       () => {
-        f();
+        S();
       },
@@ -1083,16 +1152,16 @@ o.value,
     );
-  }, g = () => {
+  }, y = () => {
     o.value && o.value.classList.add("droppable");
-  }, d = () => {
-    o.value && J.addConfig(
+  }, p = () => {
+    o.value && Q.addConfig(
       o.value,
-      Vt(l, i, e)
+      Yt(u, D, e)
     );
   };
-  return st(o, () => {
-    g(), d(), p(), f(), J.removeObsoleteConfigs();
-  }), { parent: o };
+  return ct(o, () => {
+    y(), p(), b(), S(), Q.removeObsoleteConfigs();
+  }), { parent: o, removeAt: r };
 }
 export {
-  an as useDragAndDrop
+  pn as useDragAndDrop
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A Vue 3 drag and drop library to sort all kind of lists",
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

70735

increased by4.96%

Lines of code

1514

increased by6.62%

No dependency changes