vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.19 to 0.7.0

dist/composables/index.d.ts

@@ -23,2 +23,6 @@ import { DraggableElement } from "index";
     /**
+     * The CSS class that is setted when a element is dragged.
+     */
+    draggingClass?: string;
+    /**
      * A function that returns whether a given element of the list is draggable
@@ -53,2 +57,6 @@ */
     /**
+     * The CSS class that is setted when a element is dragged.
+     */
+    draggingClass: string;
+    /**
      * A function that returns whether a given element of the list is draggable
@@ -55,0 +63,0 @@ */

dist/utils/SetStyles.d.ts

@@ -16,3 +16,3 @@ import { DragMouseTouchEvent } from "../../index";
 export declare const setEventWithInterval: (element: Element | undefined, eventName: "onscroll", callback: () => void) => void;
-export declare const AddCssStylesToElement: (element: HTMLElement, cssCodes: string[]) => void;
+export declare const AddCssStylesToElement: (node: ParentNode, cssCodes: string[]) => void;
 export {};

dist/utils/SetTransform.d.ts

 import { DragMouseTouchEvent, TransformEvent } from "../../index";
 import { Ref } from "vue";
 import { Direction } from "../composables";
-export declare const useTransform: (childRef: Ref<HTMLElement | undefined>) => {
+export declare const useTransform: (childRef: Ref<HTMLElement | undefined>, draggingClass: string) => {
     setTransform: (element: HTMLElement, parent: HTMLElement, pagePosition: Ref<{
@@ -6,0 +6,0 @@ pageX: number;

dist/vue-fluid-dnd.js

 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 pt = (t, e, n) => (Yt(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { ref as M, watch as ot } from "vue";
-const Vt = (t, e) => {
+var ht = (t, e, n) => (Yt(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { ref as O, watch as st } from "vue";
+const Ht = (t, e) => {
   const n = t.value;
@@ -11,5 +11,5 @@ if (n.length <= 0)
   return o;
-}, Ht = (t, e, n) => {
+}, Ft = (t, e, n) => {
   t.value.splice(e, 0, n);
-}, Ft = (t) => {
+}, qt = (t) => {
   if (t) {
@@ -20,6 +20,6 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, qt = () => {
+}, kt = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, at = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), kt = (t) => t ? parseInt(t) : -1, It = (t) => {
+}, lt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Ut = (t) => t ? parseInt(t) : -1, Pt = (t) => {
   const e = getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
@@ -30,8 +30,8 @@ return {
   };
-}, Pt = (t, e) => t.x1 > e.x1 ? Pt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, J = (t, e) => !Ut(t, e), Ut = (t, e) => {
-  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = yt(n, o, "vertical"), r = yt(n, o, "horizontal");
+}, Vt = (t, e) => t.x1 > e.x1 ? Vt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, K = (t, e) => !Zt(t, e), Zt = (t, e) => {
+  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = xt(n, o, "vertical"), r = xt(n, o, "horizontal");
   return s >= Math.min(n.height, o.height) / 2 && r >= Math.min(n.width, o.width) / 2;
-}, yt = (t, e, n) => {
-  const { before: o, distance: s } = x(n);
-  return Pt(
+}, xt = (t, e, n) => {
+  const { before: o, distance: s } = A(n);
+  return Vt(
     {
@@ -46,6 +46,6 @@ x1: t[o],
   );
-}, lt = (t, e) => t ? at(getComputedStyle(t)[e]) : 0, B = (t, e) => t ? at(getComputedStyle(t)[e]) : 0, At = (t) => {
+}, ut = (t, e) => t ? lt(getComputedStyle(t)[e]) : 0, C = (t, e) => t ? lt(getComputedStyle(t)[e]) : 0, At = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: e, scrollTop: n };
-}, x = (t) => t == "horizontal" ? {
+}, A = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -84,3 +84,3 @@ afterMargin: "marginRight",
   clientDistance: "clientHeight"
-}, ht = (t, e) => Zt(t, e), Zt = (t, e) => {
+}, vt = (t, e) => jt(t, e), jt = (t, e) => {
   const n = [...e.children].filter(
@@ -96,14 +96,14 @@ (s) => !s.isEqualNode(t) && s.classList.contains("draggable")
   };
-}, mt = (t) => window.TouchEvent && t instanceof TouchEvent, K = (t) => t instanceof HTMLElement, jt = ["onmouseup", "onmousedown", "onmousemove"], nt = (t, e, n) => {
-  !t || !K(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, Jt = (t, e, n) => {
+}, Dt = (t) => window.TouchEvent && t instanceof TouchEvent, Q = (t) => t instanceof HTMLElement, Jt = ["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)`);
+}, Kt = (t, e, n) => {
   t[e] = (o) => {
     if (o.defaultPrevented)
       return;
-    const s = Dt(o);
+    const s = St(o);
     n(s);
   };
-}, xt = (t, e, n) => {
-  n && (Kt(e) ? t[e] = n : Jt(t, e, n));
-}, Kt = (t) => jt.includes(t), Qt = (t) => {
+}, Rt = (t, e, n) => {
+  n && (Qt(e) ? t[e] = n : Kt(t, e, n));
+}, Qt = (t) => Jt.includes(t), te = (t) => {
   const { target: e } = t;
@@ -121,4 +121,4 @@ return {
   };
-}, te = (t, e) => {
-  const n = (o, s) => ne(e, window, s, o);
+}, ee = (t, e) => {
+  const n = (o, s) => oe(e, window, s, o);
   if (t instanceof MouseEvent) {
@@ -134,33 +134,33 @@ const { offsetX: o, offsetY: s } = t;
   }
-}, Dt = (t) => {
-  const e = ee(t);
+}, St = (t) => {
+  const e = ne(t);
   if (!e)
-    return Qt(t);
-  const { offsetX: n, offsetY: o } = te(t, e), { clientX: s, clientY: r, pageX: i, pageY: a, screenX: f, screenY: g, target: d } = e;
+    return te(t);
+  const { offsetX: n, offsetY: o } = ee(t, e), { clientX: s, clientY: r, pageX: l, pageY: i, screenX: u, screenY: p, target: g } = e;
   return {
     clientX: s,
     clientY: r,
-    pageX: i,
-    pageY: a,
-    screenX: f,
-    screenY: g,
-    target: d,
+    pageX: l,
+    pageY: i,
+    screenX: u,
+    screenY: p,
+    target: g,
     offsetX: n,
     offsetY: o
   };
-}, ee = (t) => {
-  if (mt(t))
+}, ne = (t) => {
+  if (Dt(t))
     return t.touches[0];
   if (t instanceof MouseEvent)
     return t;
-}, ne = (t, e, n, o) => {
-  const { page: s, scroll: r, before: i, borderBeforeWidth: a } = x(n), f = o.getBoundingClientRect();
-  return t[s] - e[r] - f[i] - lt(o, a);
-}, bt = (t, e, n = "ease-out", o = "transform") => {
-  K(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${o}`);
+}, oe = (t, e, n, o) => {
+  const { page: s, scroll: r, before: l, borderBeforeWidth: i } = A(n), u = o.getBoundingClientRect();
+  return t[s] - e[r] - u[l] - ut(o, i);
+}, Et = (t, e, n = "ease-out", o = "transform") => {
+  Q(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${o}`);
 }, zt = (t, e, n) => {
-  !t || !K(t) || (t[e] = () => {
+  !t || !Q(t) || (t[e] = () => {
     n();
   });
-}, oe = (t) => {
+}, se = (t) => {
   var e = t.querySelector("style");
@@ -172,3 +172,3 @@ if (!e) {
   return e;
-}, se = (t, e) => {
+}, re = (t, e) => {
   const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [o] = e.match(n) || [];
@@ -181,99 +181,99 @@ for (const s of t.cssRules) {
   return !1;
-}, re = (t, e) => {
+}, ie = (t, e) => {
   e.forEach((n) => {
-    ie(t, n);
+    ce(t, n);
   });
-}, ie = (t, e) => {
+}, ce = (t, e) => {
   var o;
-  var n = oe(t);
-  n.sheet && (se(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
-}, ce = (t, e, n) => {
+  var n = se(t);
+  n.sheet && (re(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
+}, ae = (t, e, n) => {
   n != 0 && (e === "vertical" ? t.scrollBy(0, n) : t.scrollBy(n, 0));
-}, ae = (t, e, n) => {
-  const { scrollDistance: o, clientDistance: s, scrollElement: r } = x(t);
+}, le = (t, e, n) => {
+  const { scrollDistance: o, clientDistance: s, scrollElement: r } = A(t);
   return n[r] / (e[o] - e[s]);
-}, le = "handler-class", ue = (t) => {
-  const e = M({ offsetX: 0, offsetY: 0 }), n = M({ top: 0, left: 0 }), o = M({ x: 0, y: 0 });
-  ot(
-    o,
+}, ue = "handler-class", fe = (t, e) => {
+  const n = O({ offsetX: 0, offsetY: 0 }), o = O({ top: 0, left: 0 }), s = O({ x: 0, y: 0 });
+  st(
+    s,
     (i) => {
-      const a = t.value;
-      a && (a.style.transform = `translate( ${i.x}px, ${i.y}px)`);
+      const u = t.value;
+      u && (u.style.transform = `translate( ${i.x}px, ${i.y}px)`);
     },
     { deep: !0 }
-  ), ot(
-    n,
+  ), st(
+    o,
     (i) => {
-      const a = t.value;
-      a && (a.style.top = `${i.top}px`, a.style.left = `${i.left}px`);
+      const u = t.value;
+      u && (u.style.top = `${i.top}px`, u.style.left = `${i.left}px`);
     },
     { deep: !0 }
   );
-  function s(i, a, f, g) {
-    const d = (p) => {
+  function r(i, u, p, g) {
+    const d = (m) => {
       const {
-        beforeMargin: m,
-        borderBeforeWidth: D,
-        before: R,
-        offset: $,
-        scroll: z,
-        page: I,
+        beforeMargin: D,
+        borderBeforeWidth: y,
+        before: w,
+        offset: M,
+        scroll: P,
+        page: V,
         inner: k,
-        distance: X,
+        distance: W,
         axis: N
-      } = x(p), W = f.value[I], Y = window[z], V = window[k], H = i.getBoundingClientRect()[X], L = lt(i, D), l = B(i, m), c = W - e.value[$];
-      if (c >= Y - H / 2 && c <= Y + V) {
-        const S = c - n.value[R] - L - l - Y;
-        return E(p), S;
+      } = A(m), Y = p.value[V], z = window[P], F = window[k], H = i.getBoundingClientRect()[W], L = ut(i, y), c = C(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;
       }
-      return o.value[N];
-    }, E = (p) => {
-      if (i && i.classList.contains("dragging") && p === g) {
-        const { before: m, distance: D, axis: R } = x(g), $ = i.getBoundingClientRect()[D], z = a.getBoundingClientRect(), I = n.value[m] - z[m] + o.value[R], X = z[D] - $, N = I / X, W = $ / X, Y = 0.1, V = 0.2, H = 0.8;
+      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 = u.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 l = J(i, a);
-        !l && N < V && N > -W ? L = N / V - 1 : !l && N > H && N < 1 + W && (L = 1 / (1 - H) * (N - H));
-        const c = Y * $ * L;
-        ce(a, g, c);
+        const c = K(i, u);
+        !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;
+        ae(u, g, a);
       }
-    }, T = (p) => {
-      const { axis: m } = x(p);
-      o.value[m] = d(p);
+    }, h = (m) => {
+      const { axis: D } = A(m);
+      s.value[D] = d(m);
     };
-    T("horizontal"), T("vertical");
+    h("horizontal"), h("vertical");
   }
   return {
-    setTransform: s,
-    updateTransformState: (i, a) => {
-      const { offsetX: f, offsetY: g, top: d, left: E } = de(
+    setTransform: r,
+    updateTransformState: (i, u) => {
+      const { offsetX: p, offsetY: g, top: d, left: E } = pe(
         i,
-        a,
+        u,
         t.value
       );
-      n.value = {
+      o.value = {
         top: d,
         left: E
-      }, e.value = { offsetX: f, offsetY: g };
+      }, n.value = { offsetX: p, offsetY: g };
     }
   };
-}, Rt = (t, e, n) => {
-  const { borderBeforeWidth: o, before: s } = x(t);
-  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - lt(n, o);
-}, fe = (t, e) => {
-  let { offsetX: n, offsetY: o, target: s } = t, r = ge(s, e);
-  return e && r && e != s && (n += Rt("horizontal", r, e), o += Rt("vertical", r, e)), { offsetX: n, offsetY: o };
+}, Gt = (t, e, n) => {
+  const { borderBeforeWidth: o, before: s } = A(t);
+  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - ut(n, o);
 }, ge = (t, e) => {
-  const n = t == null ? void 0 : t.closest(`.${le}`);
+  let { offsetX: n, offsetY: o, target: s } = t, r = de(s, e);
+  return e && r && e != s && (n += Gt("horizontal", r, e), o += Gt("vertical", r, e)), { offsetX: n, offsetY: o };
+}, de = (t, e) => {
+  const n = t == null ? void 0 : t.closest(`.${ue}`);
   return n && e && n.isSameNode(e) ? t : n;
-}, Gt = (t, e, n, o) => {
-  const { offset: s, beforeMargin: r, page: i, borderBeforeWidth: a, scroll: f } = x(t);
-  return e[i] - o[s] - B(n, r) - lt(n, a) - window[f];
-}, de = (t, e, n) => {
-  const { offsetX: o, offsetY: s } = fe(t, n);
+}, Ct = (t, e, n, o) => {
+  const { offset: s, beforeMargin: r, page: l, borderBeforeWidth: i, scroll: u } = A(t);
+  return e[l] - o[s] - C(n, r) - ut(n, i) - window[u];
+}, pe = (t, e, n) => {
+  const { offsetX: o, offsetY: s } = ge(t, n);
   return {
-    top: Gt("vertical", t, e, {
+    top: Ct("vertical", t, e, {
       offsetX: o,
       offsetY: s
     }),
-    left: Gt("horizontal", t, e, {
+    left: Ct("horizontal", t, e, {
       offsetX: o,
@@ -285,12 +285,12 @@ offsetY: s
   };
-}, pe = "drag", he = "startDrop", ve = "drop", me = (t) => t === ve || t === he;
-var _ = /* @__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))(_ || {});
-const St = (t) => !t || t.length == 0 ? 0 : at(t.replace("px", "")), De = (t, e) => {
+}, he = "drag", ve = "startDrop", me = "drop", De = (t) => t === me || t === ve;
+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 Tt = (t) => !t || t.length == 0 ? 0 : lt(t.replace("px", "")), Se = (t, e) => {
   const n = getComputedStyle(t)[e];
   if (n.match("%")) {
-    const s = at(n.replace("%", "")), { width: r } = t.getBoundingClientRect();
+    const s = lt(n.replace("%", "")), { width: r } = t.getBoundingClientRect();
     return r * (s / 100);
   }
-  return St(n);
-}, Et = (t, e) => {
+  return Tt(n);
+}, yt = (t, e) => {
   if (!(t instanceof Element))
@@ -301,3 +301,3 @@ return {
     };
-  const n = De(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
+  const n = Se(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
   return {
@@ -307,14 +307,14 @@ gap: n,
   };
-}, Se = (t) => {
+}, Te = (t) => {
   const { top: e, left: n } = getComputedStyle(t);
   return {
-    top: St(e),
-    left: St(n)
+    top: Tt(e),
+    left: Tt(n)
   };
-}, Te = (t, e) => {
-  const { gap: n } = x(e), { gap: o, hasGaps: s } = Et(t, n);
+}, be = (t, e) => {
+  const { gap: n } = A(e), { gap: o, hasGaps: s } = yt(t, n);
   return s ? o : 0;
 };
-function Tt(t, e, n, o, s = t.previousElementSibling, r = t.nextElementSibling) {
-  let { height: i, width: a } = be(
+function bt(t, e, n, o, s = t.previousElementSibling, r = t.nextElementSibling) {
+  let { height: l, width: i } = Ee(
     n,
@@ -325,127 +325,137 @@ t,
   );
-  return J(t, o) && e == pe && (i = 0, a = 0), { height: i, width: a };
+  return K(t, o) && e == he && (l = 0, i = 0), { height: l, width: i };
 }
-function be(t, e, n, o) {
+function Ee(t, e, n, o) {
   const {
     afterMargin: s,
     beforeMargin: r,
-    distance: i,
-    gap: a
-  } = x(t), f = B(e, s), g = B(e, r), d = B(o, r), { gap: E, hasGaps: T } = Et(
+    distance: l,
+    gap: i
+  } = A(t), u = C(e, s), p = C(e, r), g = C(o, r), { gap: d, hasGaps: E } = yt(
     e.parentElement,
-    a
-  ), p = e.getBoundingClientRect()[i];
-  if (T)
-    return Ct(p, g, f, E, 0, t);
-  const { afterSpace: m, beforeScace: D, rest: R } = Ee(
+    i
+  ), h = e.getBoundingClientRect()[l];
+  if (E)
+    return Mt(h, p, u, d, 0, t);
+  const { afterSpace: m, beforeScace: D, rest: y } = ye(
     n,
-    d,
-    f,
     g,
+    u,
+    p,
     s
   );
-  return Ct(p, D, m, 0, R, t);
+  return Mt(h, D, m, 0, y, t);
 }
-const Ee = (t, e, n, o, s) => {
+const ye = (t, e, n, o, s) => {
   const r = Math.max(e, n);
-  let i = o, a = e;
+  let l = o, i = e;
   if (t) {
-    const f = B(
+    const u = C(
       t,
       s
     );
-    i = Math.max(f, o), a = Math.max(a, f);
+    l = Math.max(u, o), i = Math.max(i, u);
   }
-  return { afterSpace: r, beforeScace: i, rest: a };
-}, Ct = (t, e, n, o, s, r) => ye(r, t + e + n + o - s), ye = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, Ae = (t, e, n) => {
-  console.log(n);
-  const { beforeMargin: o } = x("vertical"), { beforeMargin: s } = x("horizontal"), r = B(
+  return { afterSpace: r, beforeScace: l, rest: i };
+}, Mt = (t, e, n, o, s, r) => xe(r, t + e + n + o - s), xe = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, Ae = (t, e) => {
+  const n = e.parentElement, o = e.previousElementSibling;
+  if (!n)
+    return { x: 0, y: 0 };
+  const {
+    beforeMargin: s,
+    afterMargin: r
+  } = A("vertical"), { beforeMargin: l } = A("horizontal"), i = C(
     e,
-    o
-  ), i = B(
+    s
+  ), u = C(
+    o,
+    r
+  ), p = C(
     t,
     s
-  ), { top: a, left: f } = Se(e), { top: g, left: d } = t.getBoundingClientRect(), { x: E, y: T } = It(t);
-  return console.log(
-    g - B(t, o) - T - (a - r) - 13,
-    g - a - T - r - 25
-  ), {
-    y: g - a - T - r,
-    x: d - f - E - i
+  ), g = C(
+    e,
+    l
+  ), d = C(
+    t,
+    l
+  ), { top: E, left: h } = Te(e), { top: m, left: D } = t.getBoundingClientRect(), { x: y, y: w } = Pt(t), M = p - Math.max(i - u, 0), P = d - Math.max(
+    g - d,
+    0
+  );
+  return {
+    y: m - w - (E + i) - M,
+    x: D - y - (h + g) - P
   };
 };
-function xe(t, e, n, o, s, r, i, a, f) {
-  let g = 0, d = 0, E = !1;
+function Re(t, e, n, o, s, r, l, i, u) {
+  let p = 0, g = 0, d = !1;
   if (n === o)
     return Nt(
-      { height: g, width: d },
+      { height: p, width: g },
       t,
       s,
-      i,
-      E
+      l,
+      d
     );
-  if (n < 0 && f) {
-    E = !0;
-    const [b] = e, { x: A, y: C } = Ae(
-      b,
-      f,
-      t
-    );
-    g += C, d += A;
+  if (n < 0 && u) {
+    d = !0;
+    const [R] = e, { x: b, y: x } = Ae(R, u);
+    p += x, g += b;
   }
-  const { sourceElement: T, targetElement: p, siblingsBetween: m, isDraggedFoward: D } = Ce(e, n, o, f), {
-    scrollElement: R,
-    beforeMargin: $,
-    afterMargin: z,
-    distance: I,
-    gap: k
-  } = x(t), { gap: X, hasGaps: N } = Et(a, k), {
-    beforeMargin: W,
+  const { sourceElement: E, targetElement: h, siblingsBetween: m, isDraggedFoward: D } = Me(e, n, o, u), {
+    scrollElement: y,
+    beforeMargin: w,
+    afterMargin: M,
+    distance: P,
+    gap: V
+  } = A(t), { gap: k, hasGaps: W } = yt(i, V), {
+    beforeMargin: N,
     afterMargin: Y,
-    spaceBeforeDraggedElement: V
+    spaceBeforeDraggedElement: z
   } = Le(
-    $,
-    z,
-    T,
-    p == null ? void 0 : p.previousElementSibling,
+    w,
+    M,
+    E,
+    h == null ? void 0 : h.previousElementSibling,
     D,
-    N
-  ), { beforeSpace: H, space: L, afterSpace: l } = Ne(
-    $,
-    z,
-    I,
+    W
+  ), { beforeSpace: F, space: H, afterSpace: L } = Ne(
+    w,
+    M,
+    P,
     m,
-    X,
-    N
-  ), c = Ge(
+    k,
+    W
+  ), c = Ce(
+    H,
+    F,
     L,
-    H,
-    l,
-    W,
+    N,
     Y,
-    X
-  ), h = E ? 0 : Re(R, a, r), y = (D ? c - V : V - c) - h;
-  return t === "vertical" ? g += y : t === "horizontal" && (d += y), Nt(
-    { height: g, width: d },
+    k
+  ), a = d ? 0 : Ge(y, i, r), S = (D ? c - z : z - c) - a;
+  return t === "vertical" ? p += S : t === "horizontal" && (g += S), Nt(
+    { height: p, width: g },
     t,
     s,
-    i,
-    E
+    l,
+    d
   );
 }
-const Re = (t, e, n) => {
+const Ge = (t, e, n) => {
   const o = e[t], s = n[t];
   return o - s;
-}, Ge = (t, e, n, o, s, r) => {
-  const i = Math.max(e, s);
-  return Math.max(n, o) + t + i + r;
-}, Ce = (t, e, n, o) => {
-  const s = e < n, [r, i] = [e, n].toSorted(
-    (d, E) => d - E
-  ), a = t[e] ?? o, f = t[n];
-  let g = s ? t.slice(r + 1, i + 1) : t.slice(r, i);
-  return r < 0 && o && (g = t.slice(r + 1, i)), {
-    sourceElement: a,
-    targetElement: f,
-    siblingsBetween: g,
+}, Ce = (t, e, n, o, s, r) => {
+  const l = Math.max(e, s);
+  return Math.max(n, o) + t + l + r;
+}, Me = (t, e, n, o) => {
+  const s = e < n, [r, l] = [e, n].toSorted(
+    (g, d) => g - d
+  ), i = t[e] ?? o, u = 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: u,
+    siblingsBetween: p,
     isDraggedFoward: s
@@ -460,22 +470,22 @@ };
     };
-  const i = B(o[0], t);
-  let a = 0, f = -i;
-  for (const [g, d] of o.entries()) {
-    const E = d.getBoundingClientRect()[n], T = B(d, t);
-    r && (a += T), r && g > 0 ? a += s : a = Math.max(a, T), f += a + E, a = B(d, e);
+  const l = C(o[0], t);
+  let i = 0, u = -l;
+  for (const [p, g] of o.entries()) {
+    const d = g.getBoundingClientRect()[n], E = C(g, t);
+    r && (i += E), r && p > 0 ? i += s : i = Math.max(i, E), u += i + d, i = C(g, e);
   }
-  return { beforeSpace: i, space: f, afterSpace: a };
+  return { beforeSpace: l, space: u, afterSpace: i };
 }, Nt = (t, e, n, o, s) => {
-  const { scroll: r, distance: i } = x(e), a = window[r], f = n[r], g = s ? 0 : f - 2 * a + o[r];
-  return t[i] += g, t;
+  const { scroll: r, distance: l } = A(e), i = window[r], u = n[r], p = s ? 0 : u - 2 * i + o[r];
+  return t[l] += p, t;
 }, Le = (t, e, n, o, s, r) => {
-  const i = s ? n.previousElementSibling : o;
-  return Me(
+  const l = s ? n.previousElementSibling : o;
+  return Be(
     t,
     e,
-    i,
+    l,
     n,
     r
   );
-}, Me = (t, e, n, o, s) => {
+}, Be = (t, e, n, o, s) => {
   if (s)
@@ -487,11 +497,11 @@ return {
     };
-  const r = B(
+  const r = C(
     n,
     e
-  ), i = B(o, t);
-  let a = Math.max(r, i);
+  ), l = C(o, t);
+  let i = Math.max(r, l);
   return {
     afterMargin: r,
-    beforeMargin: i,
-    spaceBeforeDraggedElement: a
+    beforeMargin: l,
+    spaceBeforeDraggedElement: i
   };
@@ -505,15 +515,15 @@ }, Xt = (t, e, n) => {
   o.observe(e, n);
-}, ct = "temp-child", Be = "startDrag", Oe = "cubic-bezier(0.2, 0, 0, 1)", we = (t, e, n) => {
-  let o = Tt(
+}, at = "temp-child", Oe = "startDrag", we = "cubic-bezier(0.2, 0, 0, 1)", _e = (t, e, n) => {
+  let o = bt(
     e,
-    Be,
+    Oe,
     n,
     t
   );
-  const s = Te(t, n), { distance: r } = x(n);
+  const s = be(t, n), { distance: r } = A(n);
   o[r] -= s;
-  const { large: i, largeDistance: a } = _e(n, e);
-  return o[a] = i, o;
-}, _e = (t, e) => {
-  const n = t == "horizontal" ? "vertical" : "horizontal", { distance: o } = x(n);
+  const { large: l, largeDistance: i } = $e(n, e);
+  return o[i] = l, o;
+}, $e = (t, e) => {
+  const n = t == "horizontal" ? "vertical" : "horizontal", { distance: o } = A(n);
   return {
@@ -523,27 +533,27 @@ large: e.getBoundingClientRect()[o],
   };
-}, st = (t, e, n) => {
+}, rt = (t, e, n) => {
   t.style.height = `${e}px`, t.style.width = `${n}px`, t.style.minWidth = `${n}px`;
-}, $e = (t, e, n) => (o) => {
-  e.contains(t) && (st(t, n.height, n.width), o.disconnect());
-}, Ie = (t, e) => {
-  if (e != _.START_DRAGGING)
+}, Ie = (t, e, n) => (o) => {
+  e.contains(t) && (rt(t, n.height, n.width), o.disconnect());
+}, Pe = (t, e) => {
+  if (e != I.START_DRAGGING)
     return;
-  const { droppable: n, config: o, droppableScroll: s } = t, { direction: r } = o, i = ae(o.direction, n, s) > 0.99, { scrollDistance: a, clientDistance: f, scrollElement: g } = x(r);
-  i && (n[g] = n[a] - n[f]);
+  const { droppable: n, config: o, droppableScroll: s } = t, { direction: r } = o, l = le(o.direction, n, s) > 0.99, { scrollDistance: i, clientDistance: u, scrollElement: p } = A(r);
+  l && (n[p] = n[i] - n[u]);
 }, Lt = (t, e, n, o) => {
   if (!o)
     return;
-  const { droppable: s, config: r } = o, { direction: i, animationDuration: a } = r;
-  if (Ie(o, n), s.querySelector(`.${ct}`) || !t)
+  const { droppable: s, config: r } = o, { direction: l, animationDuration: i } = r;
+  if (Pe(o, n), s.querySelector(`.${at}`) || !t)
     return;
-  var f = document.createElement("div");
-  f.classList.add(ct), st(f, 0, 0);
-  const g = we(s, t, i);
-  bt(
-    f,
-    a,
-    Oe,
+  var u = document.createElement(t.tagName);
+  u.classList.add(at), rt(u, 0, 0);
+  const p = _e(s, t, l);
+  Et(
+    u,
+    i,
+    we,
     "width, min-width, height"
-  ), e.isSameNode(s) && st(f, g.height, g.width), Xt(
-    $e(f, s, g),
+  ), e.isSameNode(s) && rt(u, p.height, p.width), Xt(
+    Ie(u, s, p),
     s,
@@ -554,188 +564,194 @@ {
     }
-  ), s.appendChild(f);
-}, Pe = (t, e, n, o) => {
+  ), s.appendChild(u);
+}, Ve = (t, e, n, o) => {
   if (n) {
     var s = document.querySelectorAll(
-      `.${n} .${ct}`
+      `.${n} .${at}`
     );
     s.forEach((r) => {
-      const i = r.parentElement;
-      if (i != null && i.isSameNode(e) || i != null && i.isSameNode(t))
+      const l = r.parentElement;
+      if (l != null && l.isSameNode(e) || l != null && l.isSameNode(t))
         return;
-      st(r, 0, 0), setTimeout(() => {
-        var f;
-        (f = r.parentNode) == null || f.removeChild(r);
+      rt(r, 0, 0), setTimeout(() => {
+        var u;
+        (u = r.parentNode) == null || u.removeChild(r);
       }, o);
     });
   }
-}, vt = (t, e, n = !1) => {
-  var o = t.querySelectorAll(`.${ct}`);
+}, mt = (t, e, n = !1) => {
+  var o = t.querySelectorAll(`.${at}`);
   o.forEach((s) => {
-    n ? (st(s, 0, 0), setTimeout(() => {
+    n ? (rt(s, 0, 0), setTimeout(() => {
       t.removeChild(s);
     }, e)) : t.removeChild(s);
   });
-}, Mt = "dragging-handler-class", ze = "dragging", Xe = "draggable", Bt = "temp-child", We = "startDrop", Ye = "drag", Ve = "startDrag", Ot = "dropping", He = "cubic-bezier(0.2, 0, 0, 1)";
+}, Bt = "dragging-handler-class", ze = "draggable", Ot = "temp-child", Xe = "startDrop", We = "drag", Ye = "startDrag", wt = "dropping", He = "cubic-bezier(0.2, 0, 0, 1)";
 function Fe(t, e, n, o, s, r) {
-  const i = M(s), { direction: a, handlerSelector: f, onRemoveAtEvent: g, animationDuration: d } = t, E = (l, c, h, S, y) => {
+  const l = O(s), {
+    direction: i,
+    handlerSelector: u,
+    onRemoveAtEvent: p,
+    animationDuration: g,
+    draggingClass: d
+  } = t, E = (c, a, v, S, R) => {
     if (!S)
       return;
-    const { droppable: b, config: A } = S, C = Tt(
-      l,
+    const { droppable: b, config: x } = S, B = bt(
       c,
-      A.direction,
+      a,
+      x.direction,
       b
     );
-    me(c) ? $(
-      l,
+    De(a) ? M(
       c,
-      C,
-      h,
+      a,
+      B,
+      v,
       S,
-      y
-    ) : T(
-      l,
+      R
+    ) : h(
       c,
-      C,
+      a,
+      B,
       S
     );
-  }, T = (l, c, h, S) => {
-    const { config: y, droppable: b } = S, { siblings: A } = ht(l, b), C = J(l, b);
-    for (const [O, w] of A.entries()) {
-      if (!w.classList.contains(Xe))
+  }, h = (c, a, v, S) => {
+    const { config: R, droppable: b } = S, { siblings: x } = vt(c, b), B = K(c, b);
+    for (const [_, $] of x.entries()) {
+      if (!$.classList.contains(ze))
         continue;
-      const P = p(
-        y.direction,
-        l,
-        w,
-        h
+      const X = m(
+        R.direction,
+        c,
+        $,
+        v
       );
-      if (!C && P)
-        h = P;
-      else if (!C)
+      if (!B && X)
+        v = X;
+      else if (!B)
         continue;
-      const q = A.length - O;
-      m(
-        h,
-        q,
-        y.direction,
-        A
-      ), c === Ve ? D(w, h) : c === Ye && R(w, h);
+      const U = x.length - _;
+      D(
+        v,
+        U,
+        R.direction,
+        x
+      ), a === Ye ? y($, v) : a === We && w($, v);
     }
-  }, p = (l, c, h, S) => {
-    const { before: y, distance: b, axis: A } = x(l), C = c.getBoundingClientRect(), O = h.getBoundingClientRect(), w = C[y], P = O[y], q = O[b], Q = P + q / 2;
-    if (h.getAnimations().length !== 0)
+  }, m = (c, a, v, S) => {
+    const { before: R, distance: b, axis: x } = A(c), B = a.getBoundingClientRect(), _ = v.getBoundingClientRect(), $ = B[R], X = _[R], U = _[b], tt = X + U / 2;
+    if (v.getAnimations().length !== 0)
       return;
-    const U = It(h)[A], tt = Q - U;
-    return w > tt ? { height: 0, width: 0 } : S;
-  }, m = (l, c, h, S) => {
-    const y = S.filter(
-      (A) => A.classList.contains("draggable")
-    ).length, { distance: b } = x(h);
-    l[b] == 0 ? i.value = Math.max(i.value, c) : i.value = Math.min(i.value, c - 1), i.value = Math.min(i.value, y);
-  }, D = (l, c) => {
-    const { width: h, height: S } = c;
-    nt(l, S, h);
-  }, R = (l, c) => {
-    const { width: h, height: S } = c;
-    nt(l, S, h), bt(l, d, He);
-  }, $ = (l, c, h, S, y, b) => {
-    const { droppable: A, droppableScroll: C, config: O } = y, { siblings: w, positionOnDroppable: P } = ht(
-      l,
-      A
-    ), q = w.toReversed();
-    q.splice(P, 0, l);
-    const { previousElement: Q, nextElement: rt, targetIndex: U } = z(
-      l,
-      P,
-      q,
-      A
+    const Z = Pt(v)[x], et = tt - Z;
+    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), Et(c, g, He);
+  }, M = (c, a, v, S, R, b) => {
+    const { droppable: x, droppableScroll: B, config: _ } = R, { siblings: $, positionOnDroppable: X } = vt(
+      c,
+      x
+    ), U = $.toReversed();
+    U.splice(X, 0, c);
+    const { previousElement: tt, nextElement: it, targetIndex: Z } = P(
+      c,
+      X,
+      U,
+      x
     );
-    h = Tt(
-      l,
+    v = bt(
       c,
-      O.direction,
+      a,
+      _.direction,
       r,
-      Q,
-      rt
+      tt,
+      it
     );
-    const tt = qt(), ut = xe(
-      O.direction,
-      q,
-      P,
+    const et = kt(), ft = Re(
+      _.direction,
       U,
-      tt,
-      C,
+      X,
+      Z,
+      et,
+      B,
       S,
-      A,
-      l
+      x,
+      c
     );
-    for (const [ft, et] of w.toReversed().entries()) {
-      let gt = h;
-      U - 1 >= ft && (gt = { height: 0, width: 0 }), c === We && !et.classList.contains(Bt) && I(
-        et,
-        gt,
-        l,
-        ut
+    for (const [gt, nt] of $.toReversed().entries()) {
+      let dt = v;
+      Z - 1 >= gt && (dt = { height: 0, width: 0 }), a === Xe && !nt.classList.contains(Ot) && V(
+        nt,
+        dt,
+        c,
+        ft
       );
     }
     k(
-      U,
-      l,
-      O.onInsertEvent,
-      A,
+      Z,
+      c,
+      _.onInsertEvent,
+      x,
       b
     );
-  }, z = (l, c, h, S) => {
-    const b = J(l, S) ? c : i.value, A = () => c < b ? [b, b + 1] : c > b ? [b - 1, b] : [b - 1, b + 1], [C, O] = A(), w = h[C] ?? null, P = h[O] ?? null;
+  }, 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;
     return {
-      previousElement: w,
-      nextElement: P,
+      previousElement: $,
+      nextElement: X,
       targetIndex: b
     };
-  }, I = (l, c, h, S) => {
-    nt(l, c.height, c.width), nt(
-      h,
+  }, V = (c, a, v, S) => {
+    ot(c, a.height, a.width), ot(
+      v,
       S.height,
       S.width
     );
-  }, k = (l, c, h, S, y) => {
-    c.classList.add(Ot), N(S), setTimeout(() => {
-      if (c.classList.remove(Ot), X(r, S), y != null) {
-        const b = g(y);
-        b && h(l, b);
+  }, k = (c, a, v, S, R) => {
+    a.classList.add(wt), N(S), setTimeout(() => {
+      if (a.classList.remove(wt), W(r, S), R != null) {
+        const b = p(R);
+        b && v(c, b);
       }
-      V(c), W(c, r), W(c, S);
-    }, d);
+      F(a), Y(a, r), Y(a, S);
+    }, g);
   };
-  function X(l, c) {
-    l.isSameNode(c) ? vt(l, d) : (vt(l, d, !0), vt(c, d));
+  function W(c, a) {
+    c.isSameNode(a) ? mt(c, g) : (mt(c, g, !0), mt(a, g));
   }
-  const N = (l) => {
-    if (r.isSameNode(l))
+  const N = (c) => {
+    if (r.isSameNode(c))
       return;
-    var [c] = r.querySelectorAll(`.${Bt}`);
-    if (!c)
+    var [a] = r.querySelectorAll(`.${Ot}`);
+    if (!a)
       return;
-    const { distance: h } = x(a);
-    K(c) && (c.style[h] = "0px");
-  }, W = (l, c) => {
-    const { siblings: h } = ht(l, c);
-    for (const S of [...h, l])
-      Y(S);
-  }, Y = (l) => {
-    K(l) && (l.style.transition = "", l.style.transform = "");
-  }, V = (l) => {
-    e.value = _.NOT_DRAGGING, L(l, !1), l.style.transform = "", l.style.transition = "", l.style.top = "", l.style.left = "", n.value = "", o.value = "";
-  }, H = (l, c) => {
-    const h = c.querySelector(f);
-    h ? h.classList.toggle(Mt, l) : c.classList.toggle(Mt, l);
-  }, L = (l, c) => {
-    l.classList.toggle(ze, c), H(c, l);
+    const { distance: v } = A(i);
+    Q(a) && (a.style[v] = "0px");
+  }, Y = (c, a) => {
+    const { siblings: v } = vt(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(u);
+    v ? v.classList.toggle(Bt, c) : a.classList.toggle(Bt, c);
+  }, L = (c, a) => {
+    c.classList.toggle(d, a), H(a, c);
   };
   return { emitEventToSiblings: E, toggleDraggingClass: L };
 }
-const F = class F {
+const q = class q {
   static addConfig(e, n) {
-    const o = F.configs.filter(
+    const o = q.configs.filter(
       (r) => !r.droppable.isSameNode(e)
@@ -747,6 +763,6 @@ ), s = At(e);
       droppableScroll: s
-    }), F.configs = o;
+    }), q.configs = o;
   }
   static updateScrolls(e, n) {
-    for (const o of F.configs) {
+    for (const o of q.configs) {
       const { droppable: s } = o;
@@ -757,3 +773,3 @@ (n && s.classList.contains(n) || s.isSameNode(e)) && (o.droppableScroll = At(s));
   static getConfig(e) {
-    return F.configs.find(
+    return q.configs.find(
       ({ droppable: o }) => o.isSameNode(e)
@@ -763,104 +779,112 @@ );
 };
-pt(F, "configs", []), pt(F, "removeObsoleteConfigs", () => {
-  const e = F.configs.filter(
+ht(q, "configs", []), ht(q, "removeObsoleteConfigs", () => {
+  const e = q.configs.filter(
     ({ droppable: n }) => document.contains(n)
   );
-  F.configs = e;
+  q.configs = e;
 });
-let j = F;
+let J = q;
 function qe(t, e, n, o) {
-  function s(p, m, D) {
-    return document.elementsFromPoint(p, m).filter((R) => !R.isSameNode(D));
+  function s(h, m, D) {
+    return document.elementsFromPoint(h, m).filter((y) => !y.isSameNode(D));
   }
-  const r = M();
-  function i(p, m) {
-    p.hidden = !0;
+  const r = O();
+  function l(h, m) {
+    h.hidden = !0;
     const [D] = s(
       m.clientX,
       m.clientY,
-      p
+      h
     );
-    return p.hidden = !1, !e || !D ? void 0 : D.closest(`.${e}`);
+    return h.hidden = !1, !e || !D ? void 0 : D.closest(`.${e}`);
   }
-  function a(p) {
+  function i(h) {
     return Array.from(
       document.querySelectorAll(`.${e}`)
     ).every(
-      (D) => J(p, D)
+      (D) => K(h, D)
     );
   }
-  function f(p, m) {
-    return !J(p, m) || a(p);
+  function u(h, m) {
+    return !K(h, m) || i(h);
   }
-  const g = () => {
+  const p = () => {
     o();
   };
-  function d(p) {
-    zt(p, "onscroll", g);
+  function g(h) {
+    zt(h, "onscroll", p);
   }
-  function E(p) {
-    var R;
+  function d(h) {
+    var y;
     const m = t.value;
     if (!m)
       return;
-    if (r.value && f(
+    if (r.value && u(
       m,
-      (R = r.value) == null ? void 0 : R.droppable
+      (y = r.value) == null ? void 0 : y.droppable
     ))
       return r.value;
-    const D = i(m, p);
-    return D ? (K(D) && !D.onscroll && d(D), j.getConfig(D)) : j.getConfig(n);
+    const D = l(m, h);
+    return D ? (Q(D) && !D.onscroll && g(D), J.getConfig(D)) : J.getConfig(n);
   }
-  function T(p) {
-    r.value = E(p);
+  function E(h) {
+    r.value = d(h);
   }
-  return { currentDroppableConfig: r, updateConfig: T, getCurrentConfig: E };
+  return { currentDroppableConfig: r, updateConfig: E, getCurrentConfig: d };
 }
-const wt = "draggable", it = "handler-class", ke = "dragging-handler-class", Ue = "droppable", Ze = "dropping", _t = "drag", je = "startDrag", Je = "startDrop", Ke = "cubic-bezier(0.2, 0, 0, 1)";
+const _t = "draggable", ct = "handler-class", ke = "dragging-handler-class", Ue = "droppable", Ze = "dropping", $t = "drag", je = "startDrag", Je = "startDrop", Ke = "cubic-bezier(0.2, 0, 0, 1)";
 function Qe(t, e, n, o) {
-  const { handlerSelector: s, isDraggable: r, droppableGroup: i, animationDuration: a } = n, f = i ? `droppable-group-${i}` : null, g = M(_.NOT_DRAGGING), d = M(t), E = M({ scrollLeft: 0, scrollTop: 0 }), T = M({
+  const {
+    handlerSelector: s,
+    isDraggable: r,
+    droppableGroup: l,
+    animationDuration: i,
+    draggingClass: u
+  } = n, p = l ? `droppable-group-${l}` : null, g = O(I.NOT_DRAGGING), d = O(t), E = O({ scrollLeft: 0, scrollTop: 0 }), h = O({
     scrollX: 0,
     scrollY: 0
-  }), p = M({ pageX: 0, pageY: 0 }), m = M(""), D = M(""), R = M(), { setTransform: $, updateTransformState: z } = ue(d), { emitEventToSiblings: I, toggleDraggingClass: k } = Fe(
+  }), m = O({ pageX: 0, pageY: 0 }), D = O(""), y = O(""), w = O(), { setTransform: M, updateTransformState: P } = fe(
+    d,
+    u
+  ), { emitEventToSiblings: V, toggleDraggingClass: k } = Fe(
     n,
     g,
+    y,
     D,
-    m,
     e,
     o
-  ), X = () => {
-    d.value && d.value.classList.add(wt);
+  ), W = () => {
+    d.value && d.value.classList.add(_t);
   }, N = () => {
     if (d.value && r(d.value)) {
-      const u = d.value.querySelector(s);
-      u ? u.classList.add(it) : d.value.classList.add(it);
+      const f = d.value.querySelector(s);
+      f ? f.classList.add(ct) : d.value.classList.add(ct);
     }
-  }, W = () => {
-    re(o, [
-      `.${wt} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
-      `.${it} { cursor: grab; pointer-events: auto !important; }`,
-      ".temp-child { display: block ;touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
-      ".temp-child { display: block ;touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
+  }, Y = () => {
+    ie(document, [
+      `.${_t} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
+      `.${ct} { 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; }",
-      ".dragging { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }",
+      `.${u} { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }`,
       `.${ke} { cursor: grabbing; cursor: grabbing; }`,
       `.${Ze} { pointer-events: none !important; }`
-    ]), N(), X(), Y();
-  }, Y = () => {
-    f && o.classList.add(f);
-  }, V = (u) => {
-    const v = (u == null ? void 0 : u.querySelector(`.${it}`)) ?? u;
-    v && u && r(u) && (xt(
-      v,
+    ]), N(), W(), z();
+  }, z = () => {
+    p && o.classList.add(p);
+  }, F = (f) => {
+    const T = (f == null ? void 0 : f.querySelector(`.${ct}`)) ?? f;
+    T && f && r(f) && (Rt(
+      T,
       "onmousedown",
-      C("mousemove", "mouseup")
-    ), xt(
-      v,
+      B("mousemove", "mouseup")
+    ), Rt(
+      T,
       "ontouchstart",
-      C("touchmove", "touchend")
-    ), H(v)), o.classList.add(Ue);
+      B("touchmove", "touchend")
+    ), H(T)), o.classList.add(Ue);
   };
-  function H(u) {
-    const v = u.querySelectorAll("img");
-    Array.from(v).forEach((G) => {
+  function H(f) {
+    const T = f.querySelectorAll("img");
+    Array.from(T).forEach((G) => {
       G.onmousedown = () => !1;
@@ -870,28 +894,28 @@ });
   const L = () => {
-    const u = d.value;
-    if (p.value.pageX == 0 && p.value.pageY == 0 || !c.value)
+    const f = d.value;
+    if (m.value.pageX == 0 && m.value.pageY == 0 || !a.value)
       return;
-    const { droppable: v, config: G } = c.value;
-    $(u, v, p, G.direction), I(
-      u,
-      _t,
-      T.value,
-      c.value
+    const { droppable: T, config: G } = a.value;
+    M(f, T, m, G.direction), V(
+      f,
+      $t,
+      h.value,
+      a.value
     );
-  }, { updateConfig: l, currentDroppableConfig: c, getCurrentConfig: h } = qe(d, f, o, L), S = function(u) {
-    l(u), g.value === _.START_DRAGGING ? (Lt(
+  }, { updateConfig: c, currentDroppableConfig: a, getCurrentConfig: v } = qe(d, p, o, L), S = function(f) {
+    c(f), g.value === I.START_DRAGGING ? (Lt(
       d.value,
       o,
       g.value,
-      c.value
-    ), P(u)) : g.value === _.DRAGING && (y(), Q(u));
-  }, y = () => {
-    if (!c.value)
+      a.value
+    ), X(f)) : g.value === I.DRAGING && (R(), tt(f));
+  }, R = () => {
+    if (!a.value)
       return;
-    const { droppable: u } = c.value;
-    Pe(
-      u,
+    const { droppable: f } = a.value;
+    Ve(
+      f,
       o,
-      f,
-      a
+      p,
+      i
     ), Lt(
@@ -901,98 +925,99 @@ d.value,
       g.value,
-      c.value
+      a.value
     );
-  }, b = (u) => {
-    if (mt(u) && u.cancelable)
-      u.preventDefault();
-    else if (mt(u))
+  }, b = (f) => {
+    if (Dt(f) && f.cancelable)
+      f.preventDefault();
+    else if (Dt(f))
       return;
-    const v = Dt(u);
-    S(v);
-  }, A = (u, v) => {
-    u == "touchmove" ? R.value = setTimeout(() => {
-      v();
-    }, 200) : v();
-  }, C = (u, v) => () => {
+    const T = St(f);
+    S(T);
+  }, x = (f, T) => {
+    f == "touchmove" ? w.value = setTimeout(() => {
+      T();
+    }, 200) : T();
+  }, B = (f, T) => () => {
     const G = d.value;
-    j.updateScrolls(o, f);
-    const { scrollX: Z, scrollY: dt } = window;
-    T.value = { scrollX: Z, scrollY: dt }, g.value === _.NOT_DRAGGING && (g.value = _.START_DRAGGING, A(u, () => {
-      document.addEventListener(u, b, {
+    J.updateScrolls(o, p);
+    const { scrollX: j, scrollY: pt } = window;
+    h.value = { scrollX: j, scrollY: pt }, g.value === I.NOT_DRAGGING && (g.value = I.START_DRAGGING, x(f, () => {
+      document.addEventListener(f, b, {
         passive: !1
       });
-    }), rt(o), G && document.addEventListener(v, O(u), {
+    }), it(o), G && document.addEventListener(T, _(f), {
       once: !0
     }));
-  }, O = (u) => (v) => {
-    const G = Dt(v);
-    clearTimeout(R.value), tt(), document.removeEventListener(u, b), l(G);
-    const Z = h(G);
-    if (Z) {
-      const { droppable: dt } = Z;
-      w(dt);
+  }, _ = (f) => (T) => {
+    const G = St(T);
+    clearTimeout(w.value), et(), document.removeEventListener(f, b), c(G);
+    const j = v(G);
+    if (j) {
+      const { droppable: pt } = j;
+      $(pt);
     }
     o.onscroll = null;
-  }, w = (u) => {
-    if (u.onscroll = null, !f)
+  }, $ = (f) => {
+    if (f.onscroll = null, !p)
       return;
-    const v = Array.from(
-      document.querySelectorAll(`.${f}`)
+    const T = Array.from(
+      document.querySelectorAll(`.${p}`)
     );
-    for (const G of v)
+    for (const G of T)
       G instanceof HTMLElement && (G.onscroll = null);
-  }, P = (u) => {
-    const v = d.value;
-    v && (q(), I(
-      v,
+  }, X = (f) => {
+    const T = d.value;
+    T && (U(), V(
+      T,
       je,
-      T.value,
-      c.value
-    ), z(u, v), ft(v));
-  }, q = () => {
-    E.value = Ft(o), g.value = _.DRAGING;
-  }, Q = (u) => {
-    const { pageX: v, pageY: G } = u;
-    p.value = { pageX: v, pageY: G }, L();
-  }, rt = (u) => {
-    zt(u, "onscroll", U);
+      h.value,
+      a.value
+    ), P(f, T), gt(T));
   }, U = () => {
+    E.value = qt(o), g.value = I.DRAGING;
+  }, tt = (f) => {
+    const { pageX: T, pageY: G } = f;
+    m.value = { pageX: T, pageY: G }, L();
+  }, it = (f) => {
+    zt(f, "onscroll", Z);
+  }, Z = () => {
     L();
-  }, tt = () => {
-    if (g.value !== _.DRAGING) {
-      g.value = _.NOT_DRAGGING;
+  }, et = () => {
+    if (g.value !== I.DRAGING) {
+      g.value = I.NOT_DRAGGING;
       return;
     }
-    g.value = _.END_DRAGGING;
-    const u = d.value;
-    u && (ut(u), I(
-      u,
+    g.value = I.END_DRAGGING;
+    const f = d.value;
+    f && (ft(f), V(
+      f,
       Je,
-      T.value,
-      c.value,
+      h.value,
+      a.value,
       e
     ));
-  }, ut = (u) => {
-    bt(u, a, Ke), nt(u, 0, 0);
-  }, ft = (u) => {
-    const { height: v, width: G } = u.getBoundingClientRect();
-    D.value = `${v}px`, m.value = `${G}px`, k(u, !0), u.style.transition = "";
-  }, et = (u, v) => {
-    ot(u, (G) => {
-      const Z = d.value;
-      Z && Z.style.setProperty(v, G);
+  }, ft = (f) => {
+    Et(f, i, Ke), ot(f, 0, 0);
+  }, gt = (f) => {
+    const { height: T, width: G } = f.getBoundingClientRect();
+    y.value = `${T}px`, D.value = `${G}px`, k(f, !0), f.style.transition = "";
+  }, nt = (f, T) => {
+    st(f, (G) => {
+      const j = d.value;
+      j && j.style.setProperty(T, G);
     });
   };
-  ot(c, (u, v) => {
-    d.value && v && g.value == _.DRAGING && !(u != null && u.droppable.isSameNode(v.droppable)) && I(
+  st(a, (f, T) => {
+    d.value && T && g.value == I.DRAGING && !(f != null && f.droppable.isSameNode(T.droppable)) && V(
       d.value,
-      _t,
-      T.value,
-      v
+      $t,
+      h.value,
+      T
     );
-  }, { deep: !0 }), et(m, "--fixedWidth"), et(D, "--fixedHeight"), W(), V(d.value);
+  }, { deep: !0 }), nt(D, "--fixedWidth"), nt(y, "--fixedHeight"), Y(), F(d.value);
 }
-const tn = "vertical", $t = (t, e, n) => {
+const tn = "vertical", It = (t, e, n) => {
   const o = {
     direction: tn,
     handlerSelector: "draggable",
+    draggingClass: "dragging",
     isDraggable: () => !0,
@@ -1006,2 +1031,3 @@ onRemoveAtEvent: t,
     handlerSelector: n.handlerSelector ?? o.handlerSelector,
+    draggingClass: n.draggingClass ?? o.draggingClass,
     isDraggable: n.isDraggable ?? o.isDraggable,
@@ -1015,17 +1041,17 @@ droppableGroup: n.droppableGroup,
 function on(t, e) {
-  const n = "index", o = M(), s = (T) => (p) => Vt(T, p), r = (T) => (p, m) => Ht(T, p, m), i = s(t), a = r(t), f = () => {
+  const n = "index", o = O(), s = (E) => (h) => Ht(E, h), r = (E) => (h, m) => Ft(E, h, m), l = s(t), i = r(t), u = () => {
     if (o.value)
-      for (const T of o.value.children) {
-        const p = T.getAttribute(n), m = kt(p), D = T;
+      for (const E of o.value.children) {
+        const h = E.getAttribute(n), m = Ut(h), D = E;
         D && m >= 0 && Qe(
           D,
           m,
-          $t(i, a, e),
+          It(l, i, e),
           o.value
         );
       }
-  }, g = () => {
+  }, p = () => {
     o.value && Xt(
       () => {
-        f();
+        u();
       },
@@ -1035,12 +1061,12 @@ o.value,
     );
+  }, g = () => {
+    o.value && o.value.classList.add("droppable");
   }, d = () => {
-    o.value && o.value.classList.add("droppable");
-  }, E = () => {
-    o.value && j.addConfig(
+    o.value && J.addConfig(
       o.value,
-      $t(i, a, e)
+      It(l, i, e)
     );
   };
-  return ot(o, () => {
-    d(), E(), g(), f(), j.removeObsoleteConfigs();
+  return st(o, () => {
+    g(), d(), p(), u(), J.removeObsoleteConfigs();
   }), { parent: o };
@@ -1047,0 +1073,0 @@ }

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.6.19",
+  "version": "0.7.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

66515

increased by0.74%

Lines of code

1395

increased by2.5%

No dependency changes