vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.11 to 0.6.12

dist/composables/index.d.ts

@@ -30,2 +30,6 @@ import { DraggableElement } from "index";
     droppableGroup?: string;
+    /**
+     * The duration of the animations in milisecond
+     */
+    animationDuration?: number;
 }
@@ -56,5 +60,8 @@ /**
     droppableGroup?: string;
-    onDrop: OnDropEvent;
+    /**
+     * The duration of the animations in milisecond
+     */
+    animationDuration: number;
     onRemoveAtEvent: OnRemoveAtEvent<T>;
     onInsertEvent: OnInsertEvent<T>;
 };

dist/utils/config.d.ts

@@ -1,2 +0,2 @@
-import { Config, CoreConfig, OnDropEvent, OnInsertEvent, OnRemoveAtEvent } from "../composables";
-export declare const getConfig: <T>(onDrop: OnDropEvent, onRemoveAtEvent: OnRemoveAtEvent<T>, onInsertEvent: OnInsertEvent<T>, config?: Config) => CoreConfig<T>;
+import { Config, CoreConfig, OnInsertEvent, OnRemoveAtEvent } from "../composables";
+export declare const getConfig: <T>(onRemoveAtEvent: OnRemoveAtEvent<T>, onInsertEvent: OnInsertEvent<T>, config?: Config) => CoreConfig<T>;

dist/utils/DropMethods.d.ts

 import { Ref } from "vue";
-export declare const dropDraggingElementsBetween: <T>(list: Ref<T[]>, source: {
-    index: number;
-}, destination: {
-    index: number;
-}) => void;
 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;

dist/utils/emitEvents.d.ts

@@ -12,3 +12,3 @@ import { Ref } from "vue";
 type DropEvent = "drop" | typeof START_DROP_EVENT;
-export default function useEmitEvents<T>(currentConfig: CoreConfig<T>, childRef: Ref<HTMLElement | undefined>, draggingState: Ref<DraggingState>, fixedHeight: Ref<string>, fixedWidth: Ref<string>, index: number, duration: number, parent: HTMLElement): {
+export default function useEmitEvents<T>(currentConfig: CoreConfig<T>, draggingState: Ref<DraggingState>, fixedHeight: Ref<string>, fixedWidth: Ref<string>, index: number, parent: HTMLElement): {
     emitEventToSiblings: (draggedElement: HTMLElement, event: DragAndDropEvent, initialWindowScroll: WindowScroll, droppableConfig: DroppableConfig<T> | undefined, positionOnSourceDroppable?: number) => void;
@@ -15,0 +15,0 @@ toggleDraggingClass: (element: Element, force: boolean) => void;

dist/utils/GetStyles.d.ts

@@ -13,4 +13,2 @@ import { Direction } from "../composables";
 export declare const parseIntEmpty: (value: string | null) => number;
-export declare const computeGapPixels: (element: HTMLElement, gapType: GapStyle) => number;
-export declare const getNumberFromPixels: (pixels: string | undefined) => number;
 export declare const getTransform: (element: HTMLElement) => {
@@ -24,7 +22,2 @@ x: number;
 export declare const getMarginStyleByProperty: (element: HTMLElement | Element | undefined | null, property: BeforeMargin | AfterMargin) => number;
-export declare const getGapPixels: (element: HTMLElement, direction: Direction) => number;
-export declare const gapAndDisplayInformation: (element: HTMLElement, gapStyle: GapStyle) => {
-    gap: number;
-    hasGaps: boolean;
-};
 export declare const getScrollElement: (element: HTMLElement) => {
@@ -34,6 +27,2 @@ scrollLeft: number;
 };
-export declare const getBeforeStyles: (element: HTMLElement) => {
-    top: number;
-    left: number;
-};
 export declare const getPropByDirection: (direction: Direction) => {
@@ -57,3 +46,3 @@ beforeMargin: BeforeMargin;
     siblings: HTMLElement[];
-    elementPosition: number;
+    positionOnDroppable: number;
     parent: HTMLElement;
@@ -64,4 +53,4 @@ };
     siblings: HTMLElement[];
-    elementPosition: number;
+    positionOnDroppable: number;
     parent: HTMLElement;
 };

dist/vue-fluid-dnd.js

@@ -1,11 +0,6 @@
-var Wt = Object.defineProperty;
-var Yt = (t, e, n) => e in t ? Wt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var dt = (t, e, n) => (Yt(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { ref as N, watch as st } from "vue";
-const zt = (t, e, n) => {
-  if (e.index === n.index)
-    return;
-  const o = t.value, [s] = o.splice(e.index, 1);
-  o.splice(n.index, 0, s);
-}, Ht = (t, e) => {
+var Yt = Object.defineProperty;
+var Vt = (t, e, n) => e in t ? Yt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var gt = (t, e, n) => (Vt(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { ref as _, watch as et } from "vue";
+const zt = (t, e) => {
   const n = t.value;
@@ -16,5 +11,5 @@ if (n.length <= 0)
   return o;
-}, Ft = (t, e, n) => {
+}, Ht = (t, e, n) => {
   t.value.splice(e, 0, n);
-}, qt = (t) => {
+}, Ft = (t) => {
   if (t) {
@@ -25,13 +20,6 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, kt = () => {
+}, qt = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, ct = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Ut = (t) => t ? parseInt(t) : -1, Zt = (t, e) => {
-  const n = getComputedStyle(t)[e];
-  if (n.match("%")) {
-    const s = ct(n.replace("%", "")), { width: i } = t.getBoundingClientRect();
-    return i * (s / 100);
-  }
-  return mt(n);
-}, mt = (t) => !t || t.length == 0 ? 0 : ct(t.replace("px", "")), $t = (t) => {
+}, at = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), kt = (t) => t ? parseInt(t) : -1, $t = (t) => {
   const e = window.getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
@@ -42,7 +30,7 @@ return {
   };
-}, It = (t, e) => t.x1 > e.x1 ? It(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, rt = (t, e) => !jt(t, e), jt = (t, e) => {
+}, It = (t, e) => t.x1 > e.x1 ? It(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, nt = (t, e) => !Ut(t, e), Ut = (t, e) => {
   const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = xt(n, o, "vertical"), i = xt(n, o, "horizontal");
   return s >= Math.min(n.height, o.height) / 2 && i >= Math.min(n.width, o.width) / 2;
 }, xt = (t, e, n) => {
-  const { before: o, distance: s } = M(n);
+  const { before: o, distance: s } = B(n);
   return It(
@@ -58,21 +46,6 @@ {
   );
-}, at = (t, e) => t ? ct(getComputedStyle(t)[e]) : 0, $ = (t, e) => t ? ct(window.getComputedStyle(t)[e]) : 0, Jt = (t, e) => {
-  const { gap: n } = M(e), { gap: o, hasGaps: s } = St(t, n);
-  return s ? o : 0;
-}, St = (t, e) => {
-  const n = Zt(t, e), o = window.getComputedStyle(t).display, s = n > 0 || o === "flex";
-  return {
-    gap: n,
-    hasGaps: s
-  };
-}, Tt = (t) => {
+}, lt = (t, e) => t ? at(getComputedStyle(t)[e]) : 0, $ = (t, e) => t ? at(window.getComputedStyle(t)[e]) : 0, yt = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: e, scrollTop: n };
-}, Kt = (t) => {
-  const { top: e, left: n } = getComputedStyle(t);
-  return {
-    top: mt(e),
-    left: mt(n)
-  };
-}, M = (t) => t == "horizontal" ? {
+}, B = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -107,3 +80,3 @@ afterMargin: "marginRight",
   offsetElement: "offsetTop"
-}, yt = (t, e) => Qt(t, e), Qt = (t, e) => {
+}, ft = (t, e) => Zt(t, e), Zt = (t, e) => {
   const n = [...e.children].filter((s) => !s.isEqualNode(t)).map((s) => s).toReversed(), o = [...e.children].findLastIndex(
@@ -114,51 +87,52 @@ (s) => s.isEqualNode(t)
     siblings: n,
-    elementPosition: o,
+    positionOnDroppable: o,
     parent: e
   };
-}, te = ["onmouseup", "onmousedown", "onmousemove"], ot = (t, e, n) => {
+}, vt = (t) => window.TouchEvent && t instanceof TouchEvent, jt = ["onmouseup", "onmousedown", "onmousemove"], tt = (t, e, n) => {
   t && (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
 }, Gt = (t, e, n) => {
-  n && (ee(e) ? t[e] = n : t[e] = (o) => {
+  n && (Jt(e) ? t[e] = n : t[e] = (o) => {
     if (o.defaultPrevented)
       return;
-    const s = Pt(o);
+    const s = mt(o);
     n(s);
   });
-}, ee = (t) => te.includes(t), Pt = (t) => {
-  const e = ne(t);
-  if (!e) {
-    const { target: D } = t;
-    return {
-      clientX: 0,
-      clientY: 0,
-      pageX: 0,
-      pageY: 0,
-      screenX: 0,
-      screenY: 0,
-      target: D,
-      offsetX: 0,
-      offsetY: 0
-    };
-  }
-  const { clientX: n, clientY: o, pageX: s, pageY: i, screenX: a, screenY: u, target: g } = e;
-  let d = 0, f = 0;
+}, Jt = (t) => jt.includes(t), Kt = (t) => {
+  const { target: e } = t;
+  return {
+    clientX: 0,
+    clientY: 0,
+    pageX: 0,
+    pageY: 0,
+    screenX: 0,
+    screenY: 0,
+    target: e,
+    offsetX: 0,
+    offsetY: 0
+  };
+}, mt = (t) => {
+  const e = Qt(t);
+  if (!e)
+    return Kt(t);
+  let n = 0, o = 0;
   if (t instanceof MouseEvent)
-    d = t.offsetX, f = t.offsetY;
+    n = t.offsetX, o = t.offsetY;
   else {
-    const D = t.target;
-    d = Rt(e, window, "horizontal", D), f = Rt(e, window, "vertical", D);
+    const h = t.target;
+    n = Rt(e, window, "horizontal", h), o = Rt(e, window, "vertical", h);
   }
+  const { clientX: s, clientY: i, pageX: a, pageY: u, screenX: d, screenY: p, target: m } = e;
   return {
-    clientX: n,
-    clientY: o,
-    pageX: s,
-    pageY: i,
-    screenX: a,
-    screenY: u,
-    target: g,
-    offsetX: d,
-    offsetY: f
+    clientX: s,
+    clientY: i,
+    pageX: a,
+    pageY: u,
+    screenX: d,
+    screenY: p,
+    target: m,
+    offsetX: n,
+    offsetY: o
   };
-}, ne = (t) => {
-  if (window.TouchEvent && t instanceof TouchEvent)
+}, Qt = (t) => {
+  if (vt(t))
     return t.touches[0];
@@ -168,11 +142,11 @@ if (t instanceof MouseEvent)
 }, Rt = (t, e, n, o) => {
-  const { page: s, scroll: i, before: a, borderBeforeWidth: u } = M(n), g = o.getBoundingClientRect();
-  return t[s] - e[i] - g[a] - at(o, u);
-}, Et = (t, e, n = "ease-out", o = "transform") => {
+  const { page: s, scroll: i, before: a, borderBeforeWidth: u } = B(n), d = o.getBoundingClientRect();
+  return t[s] - e[i] - d[a] - lt(o, u);
+}, Dt = (t, e, n = "ease-out", o = "transform") => {
   t && (t.style.transition = `${e}ms ${n}`, t.style.transitionProperty = `${o}`);
-}, oe = (t, e, n) => {
+}, te = (t, e, n) => {
   t && (t[e] = () => {
     n();
   });
-}, se = (t) => {
+}, ee = (t) => {
   var e = t.querySelector("style");
@@ -184,3 +158,3 @@ if (!e) {
   return e;
-}, re = (t, e) => {
+}, ne = (t, e) => {
   const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [o] = e.match(n) || [];
@@ -193,13 +167,13 @@ for (const s of t.cssRules) {
   return !1;
-}, ie = (t, e) => {
+}, oe = (t, e) => {
   e.forEach((n) => {
-    ce(t, n);
+    se(t, n);
   });
-}, ce = (t, e) => {
+}, se = (t, e) => {
   var o;
-  var n = se(t);
-  n.sheet && (re(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
-}, ae = (t) => {
-  const e = N({ offsetX: 0, offsetY: 0 }), n = N({ top: 0, left: 0 });
-  st(
+  var n = ee(t);
+  n.sheet && (ne(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
+}, re = (t) => {
+  const e = _({ offsetX: 0, offsetY: 0 }), n = _({ top: 0, left: 0 });
+  et(
     n,
@@ -212,36 +186,36 @@ (i) => {
   );
-  function o(i, a, u, g, d) {
-    const f = i.getBoundingClientRect(), D = (m) => {
+  function o(i, a, u, d, p) {
+    const m = i.getBoundingClientRect(), h = (S) => {
       const {
-        beforeMargin: E,
-        borderBeforeWidth: x,
-        before: z,
-        offset: y,
-        scroll: W,
-        page: H,
-        inner: j,
-        distance: O,
-        axis: B
-      } = M(m), F = u.value[H], Y = window[W], q = window[j], I = f[O], c = at(i, x), l = $(i, E), v = F - e.value[y];
-      if (v >= Y - I / 2 && v <= Y + q) {
-        const b = v - n.value[z] - c - l - Y;
-        return R(m), b;
+        beforeMargin: C,
+        borderBeforeWidth: R,
+        before: y,
+        offset: P,
+        scroll: H,
+        page: F,
+        inner: I,
+        distance: Y,
+        axis: w
+      } = B(S), q = u.value[F], V = window[H], z = window[I], c = m[Y], l = lt(i, R), f = $(i, C), v = q - e.value[P];
+      if (v >= V - c / 2 && v <= V + z) {
+        const D = v - n.value[y] - l - f - V;
+        return b(S), D;
       }
-      return g.value[B];
-    }, R = (m) => {
-      if (i && i.classList.contains("dragging") && m === d) {
-        const { before: E, distance: x, axis: z } = M(d), y = i.getBoundingClientRect()[x], W = a.getBoundingClientRect(), H = n.value[E] - W[E] + g.value[z], O = W[x] - y, B = H / O, F = y / O, Y = 0.1, q = 0.25, I = 0.75;
-        let c = 0;
-        const l = rt(i, a);
-        !l && B < q && B > -F ? c = B / q - 1 : !l && B > I && B < 1 + F && (c = 1 / (1 - I) * (B - I));
-        const v = Y * y * c;
-        A(a, d, v);
+      return d.value[w];
+    }, b = (S) => {
+      if (i && i.classList.contains("dragging") && S === p) {
+        const { before: C, distance: R, axis: y } = B(p), P = i.getBoundingClientRect()[R], H = a.getBoundingClientRect(), F = n.value[C] - H[C] + d.value[y], Y = H[R] - P, w = F / Y, q = P / Y, V = 0.1, z = 0.25, c = 0.75;
+        let l = 0;
+        const f = nt(i, a);
+        !f && w < z && w > -q ? l = w / z - 1 : !f && w > c && w < 1 + q && (l = 1 / (1 - c) * (w - c));
+        const v = V * P * l;
+        M(a, p, v);
       }
-    }, A = (m, E, x) => {
-      x != 0 && (E === "vertical" ? m.scrollBy(0, x) : m.scrollBy(x, 0));
-    }, S = (m) => {
-      const { axis: E } = M(m);
-      g.value[E] = D(m);
+    }, M = (S, C, R) => {
+      R != 0 && (C === "vertical" ? S.scrollBy(0, R) : S.scrollBy(R, 0));
+    }, G = (S) => {
+      const { axis: C } = B(S);
+      d.value[C] = h(S);
     };
-    S("horizontal"), S("vertical");
+    G("horizontal"), G("vertical");
   }
@@ -251,3 +225,3 @@ return {
     updateTransformState: (i, a) => {
-      const { offsetX: u, offsetY: g, top: d, left: f } = ue(
+      const { offsetX: u, offsetY: d, top: p, left: m } = ce(
         i,
@@ -258,11 +232,11 @@ a,
       n.value = {
-        top: d,
-        left: f
-      }, e.value = { offsetX: u, offsetY: g };
+        top: p,
+        left: m
+      }, e.value = { offsetX: u, offsetY: d };
     }
   };
 }, At = (t, e, n) => {
-  const { borderBeforeWidth: o, before: s } = M(t);
-  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - at(n, o);
-}, le = (t, e) => {
+  const { borderBeforeWidth: o, before: s } = B(t);
+  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - lt(n, o);
+}, ie = (t, e) => {
   let { offsetX: n, offsetY: o, target: s } = t;
@@ -274,13 +248,13 @@ return e && s && e != s && (n += At(
   ), o += At("vertical", s, e)), { offsetX: n, offsetY: o };
-}, Mt = (t, e, n, o) => {
-  const { offset: s, beforeMargin: i, page: a, borderBeforeWidth: u, scroll: g } = M(t);
-  return e[a] - o[s] - $(n, i) - at(n, u) - window[g];
-}, ue = (t, e, n) => {
-  const { offsetX: o, offsetY: s } = le(t, n);
+}, Ct = (t, e, n, o) => {
+  const { offset: s, beforeMargin: i, page: a, borderBeforeWidth: u, scroll: d } = B(t);
+  return e[a] - o[s] - $(n, i) - lt(n, u) - window[d];
+}, ce = (t, e, n) => {
+  const { offsetX: o, offsetY: s } = ie(t, n);
   return {
-    top: Mt("vertical", t, e, {
+    top: Ct("vertical", t, e, {
       offsetX: o,
       offsetY: s
     }),
-    left: Mt("horizontal", t, e, {
+    left: Ct("horizontal", t, e, {
       offsetX: o,
@@ -292,5 +266,33 @@ offsetY: s
   };
-}, ge = "drag", fe = "startDrop", de = "drop", pe = (t) => t === de || t === fe;
-var V = /* @__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))(V || {});
-function Dt(t, e, n, o, s = t.previousElementSibling, i = t.nextElementSibling) {
+}, ae = "drag", le = "startDrop", ue = "drop", ge = (t) => t === ue || t === le;
+var W = /* @__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))(W || {});
+const Tt = (t) => !t || t.length == 0 ? 0 : at(t.replace("px", "")), fe = (t, e) => {
+  const n = getComputedStyle(t)[e];
+  if (n.match("%")) {
+    const s = at(n.replace("%", "")), { width: i } = t.getBoundingClientRect();
+    return i * (s / 100);
+  }
+  return Tt(n);
+}, St = (t, e) => {
+  if (!(t instanceof Element))
+    return {
+      gap: 0,
+      hasGaps: !1
+    };
+  const n = fe(t, e), o = window.getComputedStyle(t).display, s = n > 0 || o === "flex";
+  return {
+    gap: n,
+    hasGaps: s
+  };
+}, de = (t) => {
+  const { top: e, left: n } = getComputedStyle(t);
+  return {
+    top: Tt(e),
+    left: Tt(n)
+  };
+}, pe = (t, e) => {
+  const { gap: n } = B(e), { gap: o, hasGaps: s } = St(t, n);
+  return s ? o : 0;
+};
+function bt(t, e, n, o, s = t.previousElementSibling, i = t.nextElementSibling) {
   let { height: a, width: u } = he(
@@ -302,3 +304,3 @@ n,
   );
-  return rt(t, o) && e == ge && (a = 0, u = 0), { height: a, width: u };
+  return nt(t, o) && e == ae && (a = 0, u = 0), { height: a, width: u };
 }
@@ -311,13 +313,13 @@ function he(t, e, n, o) {
     gap: u
-  } = M(t), g = $(e, s), d = $(e, i), f = $(o, i), D = e.parentElement, { gap: R, hasGaps: A } = St(D, u), S = e.getBoundingClientRect()[a];
-  if (A)
+  } = B(t), d = $(e, s), p = $(e, i), m = $(o, i), h = e.parentElement, { gap: b, hasGaps: M } = St(h, u), G = e.getBoundingClientRect()[a];
+  if (M)
     return Bt(
       t,
-      Ct(S, d, g, R, 0)
+      Mt(G, p, d, b, 0)
     );
-  const { afterSpace: m, beforeScace: E, rest: x } = ve(
+  const { afterSpace: S, beforeScace: C, rest: R } = ve(
     n,
-    f,
-    g,
+    m,
     d,
+    p,
     s
@@ -327,3 +329,3 @@ );
     t,
-    Ct(S, E, m, 0, x)
+    Mt(G, C, S, 0, R)
   );
@@ -335,12 +337,12 @@ }
   if (t) {
-    const g = $(
+    const d = $(
       t,
       s
     );
-    a = Math.max(g, o), u = Math.max(u, g);
+    a = Math.max(d, o), u = Math.max(u, d);
   }
   return { afterSpace: i, beforeScace: a, rest: u };
-}, Ct = (t, e, n, o, s) => t + e + n + o - s, Bt = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, me = (t, e, n) => {
+}, Mt = (t, e, n, o, s) => t + e + n + o - s, Bt = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, me = (t, e, n) => {
   console.log(n);
-  const { beforeMargin: o } = M("vertical"), { beforeMargin: s } = M("horizontal"), i = $(
+  const { beforeMargin: o } = B("vertical"), { beforeMargin: s } = B("horizontal"), i = $(
     e,
@@ -351,16 +353,16 @@ o
     s
-  ), { top: u, left: g } = Kt(e), { top: d, left: f } = t.getBoundingClientRect(), { x: D, y: R } = $t(t);
+  ), { top: u, left: d } = de(e), { top: p, left: m } = t.getBoundingClientRect(), { x: h, y: b } = $t(t);
   return console.log(
-    d - $(t, o) - R - (u - i) - 13,
-    d - u - R - i - 25
+    p - $(t, o) - b - (u - i) - 13,
+    p - u - b - i - 25
   ), {
-    y: d - u - R - i,
-    x: f - g - D - a
+    y: p - u - b - i,
+    x: m - d - h - a
   };
 };
-function Te(t, e, n, o, s, i, a, u, g) {
-  let d = 0, f = 0, D = !1;
+function De(t, e, n, o, s, i, a, u, d) {
+  let p = 0, m = 0, h = !1;
   if (n === o)
     return wt(
-      { height: d, width: f },
+      { height: p, width: m },
       t,
@@ -370,45 +372,45 @@ s,
     );
-  if (n < 0 && g) {
-    D = !0;
-    const [b] = e, { x: T, y: _ } = me(
-      b,
-      g,
+  if (n < 0 && d) {
+    h = !0;
+    const [D] = e, { x: A, y: N } = me(
+      D,
+      d,
       t
     );
-    d += _, f += T;
+    p += N, m += A;
   }
-  const { sourceElement: R, targetElement: A, siblingsBetween: S, isDraggedFoward: m } = Se(e, n, o, g), {
-    scrollElement: E,
-    beforeMargin: x,
-    afterMargin: z,
-    distance: y,
-    gap: W
-  } = M(t), { gap: H, hasGaps: j } = St(u, W), { beforeMarginSpace: O, space: B, afterMarginSpace: F } = be(
-    x,
-    z,
+  const { sourceElement: b, targetElement: M, siblingsBetween: G, isDraggedFoward: S } = Se(e, n, o, d), {
+    scrollElement: C,
+    beforeMargin: R,
+    afterMargin: y,
+    distance: P,
+    gap: H
+  } = B(t), { gap: F, hasGaps: I } = St(u, H), { beforeMarginSpace: Y, space: w, afterMarginSpace: q } = Ee(
+    R,
     y,
-    S,
-    H,
-    j
+    P,
+    G,
+    F,
+    I
   ), {
-    beforeMargin: Y,
-    afterMargin: q,
-    spaceBeforeDraggedElement: I
+    beforeMargin: V,
+    afterMargin: z,
+    spaceBeforeDraggedElement: c
   } = xe(
-    x,
-    z,
     R,
-    A == null ? void 0 : A.previousElementSibling,
-    m,
-    j
-  ), c = De(
-    B,
-    O,
-    F,
+    y,
+    b,
+    M == null ? void 0 : M.previousElementSibling,
+    S,
+    I
+  ), l = be(
+    w,
     Y,
     q,
-    H
-  ), l = D ? 0 : Ee(E, u, i), h = (m ? c - I : I - c) - l;
-  return t === "vertical" ? d += h : t === "horizontal" && (f += h), wt(
-    { height: d, width: f },
+    V,
+    z,
+    F
+  ), f = h ? 0 : Te(C, u, i), x = (S ? l - c : c - l) - f;
+  return t === "vertical" ? p += x : t === "horizontal" && (m += x), wt(
+    { height: p, width: m },
     t,
@@ -419,6 +421,6 @@ s,
 }
-const Ee = (t, e, n) => {
+const Te = (t, e, n) => {
   const o = e[t], s = n[t];
   return o - s;
-}, De = (t, e, n, o, s, i) => {
+}, be = (t, e, n, o, s, i) => {
   const a = Math.max(e, s);
@@ -428,12 +430,12 @@ return Math.max(n, o) + t + a + i;
   const s = e < n, [i, a] = [e, n].toSorted(
-    (f, D) => f - D
-  ), u = t[e] ?? o, g = t[n];
-  let d = s ? t.slice(i + 1, a + 1) : t.slice(i, a);
-  return i < 0 && o && (d = t.slice(i + 1, a)), {
+    (m, h) => m - h
+  ), u = t[e] ?? o, d = t[n];
+  let p = s ? t.slice(i + 1, a + 1) : t.slice(i, a);
+  return i < 0 && o && (p = t.slice(i + 1, a)), {
     sourceElement: u,
-    targetElement: g,
-    siblingsBetween: d,
+    targetElement: d,
+    siblingsBetween: p,
     isDraggedFoward: s
   };
-}, be = (t, e, n, o, s, i) => {
+}, Ee = (t, e, n, o, s, i) => {
   if (o.length == 0)
@@ -446,15 +448,15 @@ return {
   const a = $(o[0], t);
-  let u = 0, g = 0;
-  for (let d = 0; d < o.length; d++) {
-    const f = o[d], D = f.getBoundingClientRect()[n], R = $(f, t);
-    i && (u += R), i && d > 0 ? u += s : u = Math.max(u, R), g += u + D, u = $(f, e);
+  let u = 0, d = 0;
+  for (let p = 0; p < o.length; p++) {
+    const m = o[p], h = m.getBoundingClientRect()[n], b = $(m, t);
+    i && (u += b), i && p > 0 ? u += s : u = Math.max(u, b), d += u + h, u = $(m, e);
   }
   return {
     beforeMarginSpace: a,
-    space: g - a,
+    space: d - a,
     afterMarginSpace: u
   };
 }, wt = (t, e, n, o) => {
-  const { scroll: s, distance: i } = M(e), a = window[s], g = n[s] - 2 * a + o[s];
-  return t[i] += g, t;
+  const { scroll: s, distance: i } = B(e), a = window[s], d = n[s] - 2 * a + o[s];
+  return t[i] += d, t;
 }, xe = (t, e, n, o, s, i) => {
@@ -486,169 +488,160 @@ const a = s ? n.previousElementSibling : o;
   };
-}, Xt = (t) => new MutationObserver((e) => {
+}, Pt = (t) => new MutationObserver((e) => {
   e.forEach(() => {
     t();
   });
-}), Lt = "dragging-handler-class", Ge = "dragging", Re = "draggable", pt = "temp-child", Ae = "startDrop", Me = "drag", Ce = "startDrag", Be = "cubic-bezier(0.2, 0, 0, 1)";
-function we(t, e, n, o, s, i, a, u) {
-  const g = N(i), { direction: d, handlerSelector: f, onRemoveAtEvent: D } = t, R = (c, l, v, h, b) => {
-    if (!h)
+}), Nt = "dragging-handler-class", Ge = "dragging", Re = "draggable", dt = "temp-child", Ae = "startDrop", Ce = "drag", Me = "startDrag", Be = "cubic-bezier(0.2, 0, 0, 1)";
+function we(t, e, n, o, s, i) {
+  const a = _(s), { direction: u, handlerSelector: d, onRemoveAtEvent: p, animationDuration: m } = t, h = (c, l, f, v, x) => {
+    if (!v)
       return;
-    let T = { height: 0, width: 0 };
-    const { droppable: _, config: X } = h;
-    T = Dt(
+    const { droppable: D, config: A } = v, N = bt(
       c,
       l,
-      X.direction,
-      _
+      A.direction,
+      D
     );
-    const { siblings: w, elementPosition: P } = yt(
+    ge(l) ? R(
       c,
-      _
-    );
-    pe(l) ? z(
-      c,
       l,
-      w,
-      P,
-      T,
+      N,
+      f,
       v,
-      h,
-      b
-    ) : A(
+      x
+    ) : b(
       c,
       l,
-      w,
-      T,
-      h
+      N,
+      v
     );
-  }, A = (c, l, v, h, b) => {
-    const { config: T, droppable: _ } = b, X = rt(c, _), w = v.filter(
-      (P) => P.classList.contains("draggable")
+  }, b = (c, l, f, v) => {
+    const { config: x, droppable: D } = v, { siblings: A } = ft(c, D), N = nt(c, D), L = A.filter(
+      (X) => X.classList.contains("draggable")
     ).length;
-    for (const [P, L] of v.entries()) {
-      if (!L.classList.contains(Re))
+    for (const [X, O] of A.entries()) {
+      if (!O.classList.contains(Re))
         continue;
-      if (!X) {
-        const K = S(
-          T.direction,
+      if (!N) {
+        const j = M(
+          x.direction,
           c,
-          L,
-          h
+          O,
+          f
         );
-        if (K)
-          h = K;
+        if (j)
+          f = j;
         else
           continue;
       }
-      const k = v.length - P;
-      m(
-        h,
-        k,
-        w,
-        T.direction
-      ), l === Ce ? E(L, h) : l === Me && x(L, h);
+      const Z = A.length - X;
+      G(
+        f,
+        Z,
+        L,
+        x.direction
+      ), l === Me ? S(O, f) : l === Ce && C(O, f);
     }
-  }, S = (c, l, v, h) => {
-    const { before: b, distance: T, axis: _ } = M(c), X = l.getBoundingClientRect(), w = v.getBoundingClientRect(), P = X[b], L = w[b], k = w[T], K = L + k / 2;
-    if (v.getAnimations().length !== 0)
+  }, M = (c, l, f, v) => {
+    const { before: x, distance: D, axis: A } = B(c), N = l.getBoundingClientRect(), L = f.getBoundingClientRect(), X = N[x], O = L[x], Z = L[D], j = O + Z / 2;
+    if (f.getAnimations().length !== 0)
       return;
-    const tt = $t(v)[_], J = K - tt;
-    return P > J ? { height: 0, width: 0 } : h;
-  }, m = (c, l, v, h) => {
-    const { distance: b } = M(h);
-    c[b] == 0 ? g.value = Math.max(g.value, l) : g.value = Math.min(g.value, l - 1), g.value = Math.min(g.value, v);
-  }, E = (c, l) => {
-    const { width: v, height: h } = l;
-    ot(c, h, v);
-  }, x = (c, l) => {
-    const { width: v, height: h } = l;
-    ot(c, h, v), Et(c, a, Be);
-  }, z = (c, l, v, h, b, T, _, X) => {
-    const { droppable: w, droppableScroll: P, config: L } = _, k = v.toReversed();
-    k.splice(h, 0, c);
-    const { previousElement: K, nextElement: et, targetIndex: tt } = y(
+    const J = $t(f)[A], Q = j - J;
+    return X > Q ? { height: 0, width: 0 } : v;
+  }, G = (c, l, f, v) => {
+    const { distance: x } = B(v);
+    c[x] == 0 ? a.value = Math.max(a.value, l) : a.value = Math.min(a.value, l - 1), a.value = Math.min(a.value, f);
+  }, S = (c, l) => {
+    const { width: f, height: v } = l;
+    tt(c, v, f);
+  }, C = (c, l) => {
+    const { width: f, height: v } = l;
+    tt(c, v, f), Dt(c, m, Be);
+  }, R = (c, l, f, v, x, D) => {
+    const { droppable: A, droppableScroll: N, config: L } = x, { siblings: X, positionOnDroppable: O } = ft(
       c,
-      h,
-      k,
-      w
+      A
+    ), Z = X.toReversed();
+    Z.splice(O, 0, c);
+    const { previousElement: j, nextElement: ot, targetIndex: J } = y(
+      c,
+      O,
+      Z,
+      A
     );
-    b = Dt(
+    f = bt(
       c,
       l,
       L.direction,
-      u,
-      K,
-      et
+      i,
+      j,
+      ot
     );
-    const J = e.value;
-    if (!J)
-      return;
-    const lt = kt(), ut = Te(
+    const Q = qt(), st = De(
       L.direction,
-      k,
-      h,
-      tt,
-      lt,
-      P,
-      T,
-      w,
-      J
+      Z,
+      O,
+      J,
+      Q,
+      N,
+      v,
+      A,
+      c
     );
-    for (const [gt, nt] of v.toReversed().entries()) {
-      let ft = b;
-      tt - 1 >= gt && (ft = { height: 0, width: 0 }), l === Ae && !nt.classList.contains(pt) && W(
-        nt,
-        ft,
-        J,
-        ut
+    for (const [ut, rt] of X.toReversed().entries()) {
+      let it = f;
+      J - 1 >= ut && (it = { height: 0, width: 0 }), l === Ae && !rt.classList.contains(dt) && P(
+        rt,
+        it,
+        c,
+        st
       );
     }
     H(
-      tt,
       J,
+      c,
       L.onInsertEvent,
-      w,
-      X
+      A,
+      D
     );
-  }, y = (c, l, v, h) => {
-    const T = rt(c, h) ? l : g.value, _ = () => l < T ? [T, T + 1] : l > T ? [T - 1, T] : [T - 1, T + 1], [X, w] = _(), P = v[X] ?? null, L = v[w] ?? null;
+  }, y = (c, l, f, v) => {
+    const D = nt(c, v) ? l : a.value, A = () => l < D ? [D, D + 1] : l > D ? [D - 1, D] : [D - 1, D + 1], [N, L] = A(), X = f[N] ?? null, O = f[L] ?? null;
     return {
-      previousElement: P,
-      nextElement: L,
-      targetIndex: T
+      previousElement: X,
+      nextElement: O,
+      targetIndex: D
     };
-  }, W = (c, l, v, h) => {
-    ot(c, l.height, l.width), ot(
-      v,
-      h.height,
-      h.width
+  }, P = (c, l, f, v) => {
+    tt(c, l.height, l.width), tt(
+      f,
+      v.height,
+      v.width
     );
-  }, H = (c, l, v, h, b) => {
-    j(h), setTimeout(() => {
-      if (O(u), O(h), b != null) {
-        const T = D(b);
-        T && v(c, T);
+  }, H = (c, l, f, v, x) => {
+    F(v), setTimeout(() => {
+      if (I(i), I(v), x != null) {
+        const D = p(x);
+        D && f(c, D);
       }
-      Y(l), B(l, u), B(l, h);
-    }, a);
-  }, j = (c) => {
-    if (u.isSameNode(c))
+      q(l), Y(l, i), Y(l, v);
+    }, m);
+  }, F = (c) => {
+    if (i.isSameNode(c))
       return;
-    var [l] = u.querySelectorAll(`.${pt}`);
+    var [l] = i.querySelectorAll(`.${dt}`);
     if (!l)
       return;
-    const { distance: v } = M(d), h = l;
-    h.style[v] = "0px";
-  }, O = (c) => {
-    var l = c.querySelectorAll(`.${pt}`);
-    l.forEach((v) => {
-      c.removeChild(v);
+    const { distance: f } = B(u), v = l;
+    v.style[f] = "0px";
+  }, I = (c) => {
+    var l = c.querySelectorAll(`.${dt}`);
+    l.forEach((f) => {
+      c.removeChild(f);
     });
-  }, B = (c, l) => {
-    const { siblings: v } = yt(c, l);
-    for (const h of [...v, c]) {
-      const b = Xt(() => {
-        F(h), b.disconnect();
+  }, Y = (c, l) => {
+    const { siblings: f } = ft(c, l);
+    for (const v of [...f, c]) {
+      const x = Pt(() => {
+        w(v), x.disconnect();
       });
-      b.observe(c, {
+      x.observe(c, {
         attributes: !0,
@@ -658,21 +651,19 @@ attributeFilter: ["style"]
     }
-  }, F = (c) => {
+  }, w = (c) => {
     c && (c.style.transition = "", c.style.transform = "");
-  }, Y = (c) => {
-    n.value = V.NOT_DRAGGING, I(c, !1), c.style.transform = "", c.style.transition = "", c.style.top = "", c.style.left = "", o.value = "", s.value = "";
   }, q = (c) => {
-    if (!e.value)
-      return;
-    const l = e.value.querySelector(f);
-    l ? l.classList.toggle(Lt, c) : e.value.classList.toggle(Lt, c);
-  }, I = (c, l) => {
-    c.classList.toggle(Ge, l), q(l);
+    e.value = W.NOT_DRAGGING, z(c, !1), c.style.transform = "", c.style.transition = "", c.style.top = "", c.style.left = "", n.value = "", o.value = "";
+  }, V = (c, l) => {
+    const f = l.querySelector(d);
+    f ? f.classList.toggle(Nt, c) : l.classList.toggle(Nt, c);
+  }, z = (c, l) => {
+    c.classList.toggle(Ge, l), V(l, c);
   };
-  return { emitEventToSiblings: R, toggleDraggingClass: I };
+  return { emitEventToSiblings: h, toggleDraggingClass: z };
 }
-const Z = class Z {
+const U = class U {
   static addConfig(e, n) {
-    const o = Z.configs.filter(
+    const o = U.configs.filter(
       (i) => !i.droppable.isSameNode(e)
-    ), s = Tt(e);
+    ), s = yt(e);
     o.push({
@@ -682,12 +673,12 @@ droppable: e,
       droppableScroll: s
-    }), Z.configs = o;
+    }), U.configs = o;
   }
   static updateScrolls(e, n) {
-    for (const o of Z.configs) {
+    for (const o of U.configs) {
       const { droppable: s } = o;
-      (n && s.classList.contains(n) || s.isSameNode(e)) && (o.droppableScroll = Tt(s));
+      (n && s.classList.contains(n) || s.isSameNode(e)) && (o.droppableScroll = yt(s));
     }
   }
   static getConfig(e) {
-    return Z.configs.find(
+    return U.configs.find(
       ({ droppable: o }) => o.isSameNode(e)
@@ -697,258 +688,267 @@ );
 };
-dt(Z, "configs", []), dt(Z, "removeObsoleteConfigs", () => {
-  const e = Z.configs.filter(
+gt(U, "configs", []), gt(U, "removeObsoleteConfigs", () => {
+  const e = U.configs.filter(
     ({ droppable: n }) => document.contains(n)
   );
-  Z.configs = e;
+  U.configs = e;
 });
-let Q = Z;
-const ht = "draggable", it = "handler-class", Le = "dragging-handler-class", Ne = "droppable", vt = "temp-child", Nt = "drag", Ot = "startDrag", Oe = "startDrop", _e = "cubic-bezier(0.2, 0, 0, 1)";
+let K = U;
+const pt = "draggable", ct = "handler-class", Ne = "dragging-handler-class", Le = "droppable", ht = "temp-child", Lt = "drag", Ot = "startDrag", Oe = "startDrop", _e = "cubic-bezier(0.2, 0, 0, 1)";
 function $e(t, e, n, o) {
-  const { handlerSelector: s, direction: i, isDraggable: a, droppableGroup: u } = n, g = u ? `droppable-group-${u}` : null, d = N(V.NOT_DRAGGING), f = N(t), D = N({ x: 0, y: 0 }), R = N({ scrollLeft: 0, scrollTop: 0 }), A = N({
+  const {
+    handlerSelector: s,
+    direction: i,
+    isDraggable: a,
+    droppableGroup: u,
+    animationDuration: d
+  } = n, p = u ? `droppable-group-${u}` : null, m = _(W.NOT_DRAGGING), h = _(t), b = _({ x: 0, y: 0 }), M = _({ scrollLeft: 0, scrollTop: 0 }), G = _({
     scrollX: 0,
     scrollY: 0
-  }), S = 200, m = N({ pageX: 0, pageY: 0 }), E = N(""), x = N(""), z = N({ scrollLeft: 0, scrollTop: 0 }), y = N(), W = N(), { setTransform: H, updateTransformState: j } = ae(f), { emitEventToSiblings: O, toggleDraggingClass: B } = we(
+  }), S = _({ pageX: 0, pageY: 0 }), C = _(""), R = _(""), y = _(), P = _(), { setTransform: H, updateTransformState: F } = re(h), { emitEventToSiblings: I, toggleDraggingClass: Y } = we(
     n,
-    f,
-    d,
-    x,
-    E,
+    m,
+    R,
+    C,
     e,
-    S,
     o
-  ), F = () => {
-    f.value && f.value.classList.add(ht);
-  }, Y = () => {
-    if (f.value && a(f.value)) {
-      const r = f.value.querySelector(s);
-      r ? r.classList.add(it) : f.value.classList.add(it);
+  ), w = () => {
+    h.value && h.value.classList.add(pt);
+  }, q = () => {
+    if (h.value && a(h.value)) {
+      const r = h.value.querySelector(s);
+      r ? r.classList.add(ct) : h.value.classList.add(ct);
     }
-  }, q = () => {
-    ie(o, [
-      `.${ht} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
-      `.${it} { cursor: grab; pointer-events: auto !important; }`,
-      `.${ht} * { pointer-events: none; }`,
+  }, V = () => {
+    oe(o, [
+      `.${pt} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
+      `.${ct} { cursor: grab; pointer-events: auto !important; }`,
+      `.${pt} * { pointer-events: none; }`,
       ".temp-child { touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
       ".droppable { position: relative; box-sizing: border-box !important; }",
       ".dragging { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }",
-      `.${Le} { cursor: grabbing !important; }`
-    ]), Y(), F(), I();
-  }, I = () => {
-    g && o.classList.add(g);
+      `.${Ne} { cursor: grabbing !important; }`
+    ]), q(), w(), z();
+  }, z = () => {
+    p && o.classList.add(p);
   }, c = (r) => {
-    const p = (r == null ? void 0 : r.querySelector(`.${it}`)) ?? r;
-    p && r && a(r) && (Gt(
-      p,
+    const g = (r == null ? void 0 : r.querySelector(`.${ct}`)) ?? r;
+    g && r && a(r) && (Gt(
+      g,
       "onmousedown",
-      X("mousemove", "mouseup")
+      L("mousemove", "mouseup")
     ), Gt(
-      p,
+      g,
       "ontouchstart",
-      X("touchmove", "touchend")
-    )), o.classList.add(Ne);
+      L("touchmove", "touchend")
+    )), o.classList.add(Le);
   }, l = function(r) {
-    y.value = b(r), d.value === V.START_DRAGGING ? (k(o, i), P(r)) : d.value === V.DRAGING && (v(), K(r));
-  }, v = () => {
+    y.value = D(r), m.value === W.START_DRAGGING ? (j(o, i), O(r)) : m.value === W.DRAGING && (f(), ot(r));
+  }, f = () => {
     if (!y.value)
       return;
-    const { droppable: r, config: p } = y.value, { direction: G } = p;
-    h(), k(r, G);
-  }, h = () => {
-    if (g) {
-      var r = document.querySelectorAll(
-        `.${g} .${vt}`
+    const { droppable: r, config: g } = y.value, { direction: T } = g;
+    v(r), j(r, T);
+  }, v = (r) => {
+    if (p) {
+      var g = document.querySelectorAll(
+        `.${p} .${ht}`
       );
-      r.forEach((p) => {
-        var G, C;
-        (G = p.parentElement) != null && G.isSameNode(o) || (C = p.parentElement) == null || C.removeChild(p);
+      g.forEach((T) => {
+        const E = T.parentElement;
+        E != null && E.isSameNode(o) || E != null && E.isSameNode(r) || E == null || E.removeChild(T);
       });
     }
-  }, b = (r) => {
-    var U;
-    const p = f.value;
-    if (!p)
+  }, x = (r, g) => {
+    r.hidden = !0;
+    const T = document.elementFromPoint(
+      g.clientX,
+      g.clientY
+    );
+    return r.hidden = !1, !p || !T ? void 0 : T.closest(
+      `.${p}`
+    );
+  }, D = (r) => {
+    var E;
+    const g = h.value;
+    if (!g)
       return;
-    if (y.value && !rt(
-      p,
-      (U = y.value) == null ? void 0 : U.droppable
+    if (y.value && !nt(
+      g,
+      (E = y.value) == null ? void 0 : E.droppable
     ))
       return y.value;
-    p.hidden = !0;
-    const G = document.elementFromPoint(
-      r.clientX,
-      r.clientY
-    );
-    if (p.hidden = !1, !g || !G)
-      return Q.getConfig(o);
-    const C = G.closest(
-      `.${g}`
-    );
-    return C ? (C.onscroll || et(C), Q.getConfig(C)) : Q.getConfig(o);
-  }, T = (r) => {
-    if (r instanceof TouchEvent && r.cancelable)
+    const T = x(g, r);
+    return T ? (T.onscroll || J(T), K.getConfig(T)) : K.getConfig(o);
+  }, A = (r) => {
+    if (vt(r) && r.cancelable)
       r.preventDefault();
-    else if (r instanceof TouchEvent)
+    else if (vt(r))
       return;
-    const p = Pt(r);
-    l(p);
-  }, _ = (r, p) => {
-    r == "touchmove" ? W.value = setTimeout(() => {
-      p();
-    }, 150) : p();
-  }, X = (r, p) => () => {
-    const G = f.value;
-    z.value = Tt(o), Q.updateScrolls(o, g);
-    const { scrollX: C, scrollY: U } = window;
-    A.value = { scrollX: C, scrollY: U }, d.value === V.NOT_DRAGGING && (d.value = V.START_DRAGGING, _(r, () => {
-      document.addEventListener(r, T, {
+    const g = mt(r);
+    l(g);
+  }, N = (r, g) => {
+    r == "touchmove" ? P.value = setTimeout(() => {
+      g();
+    }, 200) : g();
+  }, L = (r, g) => () => {
+    const T = h.value;
+    K.updateScrolls(o, p);
+    const { scrollX: E, scrollY: k } = window;
+    G.value = { scrollX: E, scrollY: k }, m.value === W.NOT_DRAGGING && (m.value = W.START_DRAGGING, N(r, () => {
+      document.addEventListener(r, A, {
         passive: !1
       });
-    }), et(o), G && document.addEventListener(p, w(r), {
+    }), J(o), T && document.addEventListener(g, X(r), {
       once: !0
     }));
-  }, w = (r) => () => {
-    clearTimeout(W.value), lt(), document.removeEventListener(r, T), o.onscroll = null;
-  }, P = (r) => {
-    const p = f.value;
-    p && (L(), O(
-      p,
+  }, X = (r) => (g) => {
+    const T = mt(g);
+    clearTimeout(P.value), ut(), document.removeEventListener(r, A);
+    const E = D(T);
+    if (E) {
+      const { droppable: k } = E;
+      k.onscroll = null;
+    } else
+      o.onscroll = null;
+  }, O = (r) => {
+    const g = h.value;
+    g && (Z(), I(
+      g,
       Ot,
-      A.value,
+      G.value,
       y.value
-    ), j(r, p), gt(p));
-  }, L = () => {
-    R.value = qt(o), d.value = V.DRAGING;
-  }, k = (r, p) => {
-    const G = f.value;
-    if (r.querySelector(`.${vt}`) || !G)
+    ), F(r, g), it(g));
+  }, Z = () => {
+    M.value = Ft(o), m.value = W.DRAGING;
+  }, j = (r, g) => {
+    const T = h.value;
+    if (r.querySelector(`.${ht}`) || !T)
       return;
-    let C = Dt(
-      G,
+    let E = bt(
+      T,
       Ot,
-      p,
+      g,
       r
     );
-    var U = document.createElement("div");
-    U.classList.add(vt);
-    const bt = Jt(r, p), { distance: Vt } = M(p);
-    C[Vt] -= bt, U.style.height = `${C.height}px`, U.style.minWidth = `${C.width}px`, Et(
-      U,
-      S,
+    var k = document.createElement("div");
+    k.classList.add(ht);
+    const Xt = pe(r, g), { distance: Wt } = B(g);
+    E[Wt] -= Xt, k.style.height = `${E.height}px`, k.style.minWidth = `${E.width}px`, Dt(
+      k,
+      d,
       _e,
       "height, width"
-    ), r.appendChild(U);
-  }, K = (r) => {
-    const { pageX: p, pageY: G } = r;
-    m.value = { pageX: p, pageY: G }, J();
-  }, et = (r) => {
-    oe(r, "onscroll", tt);
-  }, tt = () => {
-    J();
-  }, J = () => {
-    const r = f.value;
-    if (m.value.pageX == 0 && m.value.pageY == 0 || !y.value)
+    ), r.appendChild(k);
+  }, ot = (r) => {
+    const { pageX: g, pageY: T } = r;
+    S.value = { pageX: g, pageY: T }, st();
+  }, J = (r) => {
+    te(r, "onscroll", Q);
+  }, Q = () => {
+    st();
+  }, st = () => {
+    const r = h.value;
+    if (S.value.pageX == 0 && S.value.pageY == 0 || !y.value)
       return;
-    const { droppable: p, config: G } = y.value;
-    H(r, p, m, D, G.direction), O(
+    const { droppable: g, config: T } = y.value;
+    H(r, g, S, b, T.direction), I(
       r,
-      Nt,
-      A.value,
+      Lt,
+      G.value,
       y.value
     );
-  }, lt = () => {
-    if (d.value !== V.DRAGING) {
-      d.value = V.NOT_DRAGGING;
+  }, ut = () => {
+    if (m.value !== W.DRAGING) {
+      m.value = W.NOT_DRAGGING;
       return;
     }
-    d.value = V.END_DRAGGING;
-    const r = f.value;
-    r && (ut(r), O(
+    m.value = W.END_DRAGGING;
+    const r = h.value;
+    r && (rt(r), I(
       r,
       Oe,
-      A.value,
+      G.value,
       y.value,
       e
     ));
-  }, ut = (r) => {
-    Et(r, S), ot(r, 0, 0);
-  }, gt = (r) => {
-    const { height: p, width: G } = r.getBoundingClientRect();
-    x.value = `${p}px`, E.value = `${G}px`, B(r, !0), r.style.transition = "";
+  }, rt = (r) => {
+    Dt(r, d), tt(r, 0, 0);
+  }, it = (r) => {
+    const { height: g, width: T } = r.getBoundingClientRect();
+    R.value = `${g}px`, C.value = `${T}px`, Y(r, !0), r.style.transition = "";
   };
-  st(
-    D,
+  et(
+    b,
     (r) => {
-      const p = f.value;
-      p && (p.style.transform = `translate( ${r.x}px, ${r.y}px)`);
+      const g = h.value;
+      g && (g.style.transform = `translate( ${r.x}px, ${r.y}px)`);
     },
     { deep: !0 }
   );
-  const nt = (r, p) => {
-    st(r, (G) => {
-      const C = f.value;
-      C && C.style.setProperty(p, G);
+  const Et = (r, g) => {
+    et(r, (T) => {
+      const E = h.value;
+      E && E.style.setProperty(g, T);
     });
   };
-  st(y, (r, p) => {
-    f.value && p && d.value == V.DRAGING && (r != null && r.droppable.isSameNode(p.droppable) || O(
-      f.value,
-      Nt,
-      A.value,
-      p
+  et(y, (r, g) => {
+    h.value && g && m.value == W.DRAGING && (r != null && r.droppable.isSameNode(g.droppable) || I(
+      h.value,
+      Lt,
+      G.value,
+      g
     ));
-  }, { deep: !0 }), nt(E, "--fixedWidth"), nt(x, "--fixedHeight"), q(), c(f.value);
+  }, { deep: !0 }), Et(C, "--fixedWidth"), Et(R, "--fixedHeight"), V(), c(h.value);
 }
-const Ie = "vertical", _t = (t, e, n, o) => {
-  const s = {
+const Ie = "vertical", _t = (t, e, n) => {
+  const o = {
     direction: Ie,
     handlerSelector: "draggable",
     isDraggable: () => !0,
-    onDrop: t,
-    onRemoveAtEvent: e,
-    onInsertEvent: n
+    onRemoveAtEvent: t,
+    onInsertEvent: e,
+    animationDuration: 200
   };
-  return o ? {
-    direction: o.direction ?? s.direction,
-    handlerSelector: o.handlerSelector ?? s.handlerSelector,
-    isDraggable: o.isDraggable ?? s.isDraggable,
-    droppableGroup: o.droppableGroup,
-    onDrop: s.onDrop,
-    onRemoveAtEvent: e,
-    onInsertEvent: n
-  } : s;
+  return n ? {
+    direction: n.direction ?? o.direction,
+    handlerSelector: n.handlerSelector ?? o.handlerSelector,
+    isDraggable: n.isDraggable ?? o.isDraggable,
+    droppableGroup: n.droppableGroup,
+    onRemoveAtEvent: t,
+    onInsertEvent: e,
+    animationDuration: o.animationDuration
+  } : o;
 };
-function Ve(t, e) {
-  const n = "index", o = N(), s = (S) => (m, E) => {
-    S && zt(S, m, E);
-  }, i = (S) => (m) => Ht(S, m), a = (S) => (m, E) => Ft(S, m, E), u = s(t), g = i(t), d = a(t), f = () => {
+function Ye(t, e) {
+  const n = "index", o = _(), s = (b) => (M) => zt(b, M), i = (b) => (M, G) => Ht(b, M, G), a = s(t), u = i(t), d = () => {
     if (o.value)
-      for (const S of o.value.children) {
-        const m = S.getAttribute(n), E = Ut(m), x = S;
-        x && E >= 0 && $e(
-          x,
-          E,
-          _t(u, g, d, e),
+      for (const b of o.value.children) {
+        const M = b.getAttribute(n), G = kt(M), S = b;
+        S && G >= 0 && $e(
+          S,
+          G,
+          _t(a, u, e),
           o.value
         );
       }
-  }, D = () => {
+  }, p = () => {
     if (!o.value)
       return;
-    Xt(() => {
-      f();
+    Pt(() => {
+      d();
     }).observe(o.value, { childList: !0 });
-  }, R = () => {
+  }, m = () => {
     o.value && o.value.classList.add("droppable");
-  }, A = () => {
-    o.value && Q.addConfig(
+  }, h = () => {
+    o.value && K.addConfig(
       o.value,
-      _t(u, g, d, e)
+      _t(a, u, e)
     );
   };
-  return st(o, () => {
-    R(), A(), D(), f(), Q.removeObsoleteConfigs();
+  return et(o, () => {
+    m(), h(), p(), d(), K.removeObsoleteConfigs();
   }), { parent: o };
 }
 export {
-  Ve as useDragAndDrop
+  Ye as useDragAndDrop
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "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

Number of package files

22

increased by10%

Lines of code

1238

increased by0.41%

Worsened metrics

Total package byte prevSize

59164

decreased by-0.1%

No dependency changes