vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.7 to 0.6.8

dist/utils/GetStyles.d.ts

@@ -14,2 +14,7 @@ import { Direction } from "../composables";
 export declare const computeGapPixels: (element: HTMLElement, gapType: GapStyle) => number;
+export declare const getNumberFromPixels: (pixels: string | undefined) => number;
+export declare const getTransform: (element: HTMLElement) => {
+    x: number;
+    y: number;
+};
 export declare const draggableIsOutside: (draggable: HTMLElement) => boolean;
@@ -16,0 +21,0 @@ export declare const hasIntersection: (element1: HTMLElement, element2: HTMLElement) => boolean;

dist/vue-fluid-dnd.js

@@ -1,3 +0,3 @@
-import { ref as L, watch as j } from "vue";
-const xt = (t, e, n) => {
+import { ref as L, watch as U } from "vue";
+const Tt = (t, e, n) => {
   if (e.index === n.index)
@@ -7,3 +7,3 @@ return;
   o.splice(n.index, 0, s);
-}, Gt = (t) => {
+}, St = (t) => {
   if (t) {
@@ -14,21 +14,27 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, Rt = () => {
+}, xt = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, Q = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), At = (t) => t ? parseInt(t) : -1, Ct = (t, e) => {
+}, K = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Gt = (t) => t ? parseInt(t) : -1, Rt = (t, e) => {
   const n = getComputedStyle(t)[e];
   if (n.match("%")) {
-    const s = Q(n.replace("%", "")), { width: f } = t.getBoundingClientRect();
+    const s = K(n.replace("%", "")), { width: f } = t.getBoundingClientRect();
     return f * (s / 100);
   }
-  return Q(n.replace("px", ""));
-}, 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, Et = (t) => {
+  return yt(n);
+}, yt = (t) => !t || t.length == 0 ? 0 : K(t.replace("px", "")), At = (t) => {
+  const e = window.getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
+  return {
+    x: n.m41,
+    y: n.m42
+  };
+}, ht = (t, e) => t.x1 > e.x1 ? ht(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, vt = (t) => {
   const e = t.parentElement;
-  return !bt(t, e);
-}, bt = (t, e) => {
-  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = it(n, o, "vertical"), f = it(n, o, "horizontal");
+  return !mt(t, e);
+}, mt = (t, e) => {
+  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = rt(n, o, "vertical"), f = rt(n, o, "horizontal");
   return s >= Math.min(n.height, o.height) / 2 && f >= Math.min(n.width, o.width) / 2;
-}, it = (t, e, n) => {
-  const { before: o, distance: s } = y(n);
-  return vt(
+}, rt = (t, e, n) => {
+  const { before: o, distance: s } = M(n);
+  return ht(
     {
@@ -43,7 +49,7 @@ x1: t[o],
   );
-}, K = (t, e) => t && t instanceof HTMLElement ? Q(getComputedStyle(t)[e]) : 0, P = (t, e) => t && t instanceof HTMLElement ? Q(window.getComputedStyle(t)[e]) : 0, yt = (t, e) => {
-  const { gap: n } = y(e), { gap: o, hasGaps: s } = st(t, n);
+}, J = (t, e) => t && t instanceof HTMLElement ? K(getComputedStyle(t)[e]) : 0, P = (t, e) => t && t instanceof HTMLElement ? K(window.getComputedStyle(t)[e]) : 0, Mt = (t, e) => {
+  const { gap: n } = M(e), { gap: o, hasGaps: s } = ot(t, n);
   return s ? o : 0;
-}, st = (t, e) => {
-  const n = Ct(t, e), o = window.getComputedStyle(t).display, s = n > 0 || o === "flex";
+}, ot = (t, e) => {
+  const n = Rt(t, e), o = window.getComputedStyle(t).display, s = n > 0 || o === "flex";
   return {
@@ -53,6 +59,6 @@ gap: n,
   };
-}, Mt = (t) => {
+}, Ct = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: e, scrollTop: n };
-}, y = (t) => t == "horizontal" ? {
+}, M = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -87,4 +93,4 @@ afterMargin: "marginRight",
   offsetElement: "offsetTop"
-}, ct = (t) => {
-  const e = Bt(t), { previousSiblings: n, elementPosition: o } = wt(t);
+}, it = (t) => {
+  const e = wt(t), { previousSiblings: n, elementPosition: o } = Bt(t);
   return {
@@ -94,3 +100,3 @@ siblings: [...e, ...n],
   };
-}, Bt = (t) => {
+}, wt = (t) => {
   const e = [];
@@ -101,3 +107,3 @@ let n = t;
   return e.toReversed();
-}, wt = (t) => {
+}, Bt = (t) => {
   const e = [];
@@ -111,13 +117,13 @@ let n = t;
   };
-}, Lt = ["onmouseup", "onmousedown", "onmousemove"], Z = (t, e, n) => {
+}, Lt = ["onmouseup", "onmousedown", "onmousemove"], k = (t, e, n) => {
   t && (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
 }, at = (t, e, n) => {
   n && (Nt(e) ? t[e] = n : t[e] = (o) => {
-    const s = mt(o);
+    const s = Et(o);
     n(s);
   });
-}, Nt = (t) => Lt.includes(t), mt = (t) => {
+}, Nt = (t) => Lt.includes(t), Et = (t) => {
   const e = _t(t);
   if (!e) {
-    const { target: E } = t;
+    const { target: m } = t;
     return {
@@ -130,3 +136,3 @@ clientX: 0,
       screenY: 0,
-      target: E,
+      target: m,
       offsetX: 0,
@@ -136,9 +142,9 @@ offsetY: 0
   }
-  const { clientX: n, clientY: o, pageX: s, pageY: f, screenX: p, screenY: a, target: l } = e;
-  let c = 0, d = 0;
+  const { clientX: n, clientY: o, pageX: s, pageY: f, screenX: p, screenY: c, target: l } = e;
+  let a = 0, d = 0;
   if (t instanceof MouseEvent)
-    c = t.offsetX, d = t.offsetY;
+    a = t.offsetX, d = t.offsetY;
   else {
-    const E = t.target;
-    c = lt(e, window, "horizontal", E), d = lt(e, window, "vertical", E);
+    const m = t.target;
+    a = ct(e, window, "horizontal", m), d = ct(e, window, "vertical", m);
   }
@@ -151,5 +157,5 @@ return {
     screenX: p,
-    screenY: a,
+    screenY: c,
     target: l,
-    offsetX: c,
+    offsetX: a,
     offsetY: d
@@ -162,6 +168,6 @@ };
     return t;
-}, lt = (t, e, n, o) => {
-  const { page: s, scroll: f, before: p, borderBeforeWidth: a } = y(n), l = o.getBoundingClientRect();
-  return t[s] - e[f] - l[p] - K(o, a);
-}, Dt = (t, e, n = "ease-out") => {
+}, ct = (t, e, n, o) => {
+  const { page: s, scroll: f, before: p, borderBeforeWidth: c } = M(n), l = o.getBoundingClientRect();
+  return t[s] - e[f] - l[p] - J(o, c);
+}, bt = (t, e, n = "ease-out") => {
   t && (t.style.transition = `transform ${e}ms ${n}`);
@@ -187,3 +193,3 @@ }, Ot = (t, e, n) => {
   return !1;
-}, q = (t, e) => {
+}, z = (t, e) => {
   var o;
@@ -194,12 +200,12 @@ var n = It(t);
   const e = L({ offsetX: 0, offsetY: 0 }), n = L({ top: 0, left: 0 });
-  j(
+  U(
     n,
-    (a) => {
+    (c) => {
       const l = t.value;
-      l && (l.style.top = `${a.top}px`, l.style.left = `${a.left}px`);
+      l && (l.style.top = `${c.top}px`, l.style.left = `${c.left}px`);
     },
     { deep: !0 }
   );
-  function o(a, l, c, d, E) {
-    const D = a.getBoundingClientRect(), B = (m) => {
+  function o(c, l, a, d, m) {
+    const D = c.getBoundingClientRect(), C = (b) => {
       const {
@@ -215,30 +221,30 @@ beforeMargin: S,
         axis: _
-      } = y(m), R = c.value[$], O = window[N], Y = window[W], i = D[X], u = K(a, G), h = P(a, S), v = R - e.value[V];
+      } = M(b), R = a.value[$], O = window[N], Y = window[W], i = D[X], g = J(c, G), h = P(c, S), v = R - e.value[V];
       if (v >= O - i / 2 && v <= O + Y) {
-        const A = v - n.value[H] - u - h - O;
-        return x(m), A;
+        const A = v - n.value[H] - g - h - O;
+        return x(b), A;
       }
       return d.value[_];
-    }, x = (m) => {
-      if (a && a.classList.contains("dragging") && l && m === E) {
-        const { before: S, distance: G, axis: H } = y(E), N = a.getBoundingClientRect()[G], $ = l.getBoundingClientRect(), W = n.value[S] - $[S] + d.value[H], _ = $[G] - N, R = W / _, O = N / _, Y = 0.1, i = 0.25, u = 0.75;
+    }, x = (b) => {
+      if (c && c.classList.contains("dragging") && l && b === m) {
+        const { before: S, distance: G, axis: H } = M(m), N = c.getBoundingClientRect()[G], $ = l.getBoundingClientRect(), W = n.value[S] - $[S] + d.value[H], _ = $[G] - N, R = W / _, O = N / _, Y = 0.1, i = 0.25, g = 0.75;
         let h = 0;
-        const v = Et(a);
-        !v && R < i && R > -O ? h = R / i - 1 : !v && R > u && R < 1 + O && (h = 1 / (1 - u) * (R - u));
-        const b = Y * N * h;
-        C(l, E, b);
+        const v = vt(c);
+        !v && R < i && R > -O ? h = R / i - 1 : !v && R > g && R < 1 + O && (h = 1 / (1 - g) * (R - g));
+        const E = Y * N * h;
+        y(l, m, E);
       }
-    }, C = (m, S, G) => {
-      G != 0 && (S === "vertical" ? m.scrollBy(0, G) : m.scrollBy(G, 0));
-    }, w = (m) => {
-      const { axis: S } = y(m);
-      d.value[S] = B(m);
+    }, y = (b, S, G) => {
+      G != 0 && (S === "vertical" ? b.scrollBy(0, G) : b.scrollBy(G, 0));
+    }, w = (b) => {
+      const { axis: S } = M(b);
+      d.value[S] = C(b);
     };
     w("horizontal"), w("vertical");
   }
-  const s = (a, l, c) => {
-    const { borderBeforeWidth: d, before: E } = y(a);
-    return l.getBoundingClientRect()[E] - c.getBoundingClientRect()[E] - K(t.value, d);
-  }, f = (a) => {
-    let { offsetX: l, offsetY: c, target: d } = a;
+  const s = (c, l, a) => {
+    const { borderBeforeWidth: d, before: m } = M(c);
+    return l.getBoundingClientRect()[m] - a.getBoundingClientRect()[m] - J(t.value, d);
+  }, f = (c) => {
+    let { offsetX: l, offsetY: a, target: d } = c;
     return t.value && d && t.value != d && (l += s(
@@ -248,20 +254,20 @@ "horizontal",
       t.value
-    ), c += s(
+    ), a += s(
       "vertical",
       d,
       t.value
-    )), { offsetX: l, offsetY: c };
+    )), { offsetX: l, offsetY: a };
   };
   return {
     setTransform: o,
-    updateTransformState: (a, l) => {
-      const { offsetX: c, offsetY: d } = f(a);
-      e.value = { offsetX: c, offsetY: d };
-      const E = (D) => {
-        const { offset: B, beforeMargin: x, page: C, borderBeforeWidth: w, scroll: m } = y(D);
-        return a[C] - e.value[B] - P(l, x) - K(l, w) - window[m];
+    updateTransformState: (c, l) => {
+      const { offsetX: a, offsetY: d } = f(c);
+      e.value = { offsetX: a, offsetY: d };
+      const m = (D) => {
+        const { offset: C, beforeMargin: x, page: y, borderBeforeWidth: w, scroll: b } = M(D);
+        return c[y] - e.value[C] - P(l, x) - J(l, w) - window[b];
       };
       n.value = {
-        top: E("vertical"),
-        left: E("horizontal")
+        top: m("vertical"),
+        left: m("horizontal")
       };
@@ -272,3 +278,3 @@ }
 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 || {});
-function ot(t, e, n, o = t.previousElementSibling, s = t.nextElementSibling) {
+function nt(t, e, n, o = t.previousElementSibling, s = t.nextElementSibling) {
   let { height: f, width: p } = Vt(
@@ -280,3 +286,3 @@ n,
   );
-  return Et(t) && e == Wt && (f = 0, p = 0), { height: f, width: p };
+  return vt(t) && e == Wt && (f = 0, p = 0), { height: f, width: p };
 }
@@ -288,21 +294,21 @@ function Vt(t, e, n, o) {
     distance: p,
-    gap: a
-  } = y(t), l = P(e, s), c = P(e, f);
+    gap: c
+  } = M(t), l = P(e, s), a = P(e, f);
   let d = P(o, f);
-  const E = e.parentElement, { gap: D, hasGaps: B } = st(E, a), x = e.getBoundingClientRect()[p];
-  if (B)
-    return ut(
+  const m = e.parentElement, { gap: D, hasGaps: C } = ot(m, c), x = e.getBoundingClientRect()[p];
+  if (C)
+    return gt(
       t,
-      gt(x, c, l, D, 0)
+      lt(x, a, l, D, 0)
     );
-  const { afterSpace: C, beforeScace: w, rest: m } = zt(
+  const { afterSpace: y, beforeScace: w, rest: b } = zt(
     n,
     d,
     l,
-    c,
+    a,
     s
   );
-  return ut(
+  return gt(
     t,
-    gt(x, w, C, 0, m)
+    lt(x, w, y, 0, b)
   );
@@ -312,3 +318,3 @@ }
   const f = Math.max(e, n);
-  let p = o, a = e;
+  let p = o, c = e;
   if (t) {
@@ -319,19 +325,19 @@ const l = P(
     );
-    p = Math.max(l, o), a = Math.max(a, l);
+    p = Math.max(l, o), c = Math.max(c, l);
   }
-  return { afterSpace: f, beforeScace: p, rest: a };
-}, gt = (t, e, n, o, s) => t + e + n + o - s, ut = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e };
+  return { afterSpace: f, beforeScace: p, rest: c };
+}, lt = (t, e, n, o, s) => t + e + n + o - s, gt = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e };
 function Ft(t, e, n, o, s, f) {
-  let p = 0, a = 0;
+  let p = 0, c = 0;
   if (n === o)
-    return ft({ height: p, width: a }, t, s);
-  const { sourceElement: l, targetElement: c, siblingsBetween: d, isDraggedFoward: E } = Ut(e, n, o), D = l.parentElement, {
-    scrollElement: B,
+    return ut({ height: p, width: c }, t, s);
+  const { sourceElement: l, targetElement: a, siblingsBetween: d, isDraggedFoward: m } = Ut(e, n, o), D = l.parentElement, {
+    scrollElement: C,
     beforeMargin: x,
-    afterMargin: C,
+    afterMargin: y,
     distance: w,
-    gap: m
-  } = y(t), { gap: S, hasGaps: G } = st(D, m), { beforeMarginSpace: H, space: V, afterMarginSpace: N } = Zt(
+    gap: b
+  } = M(t), { gap: S, hasGaps: G } = ot(D, b), { beforeMarginSpace: H, space: V, afterMarginSpace: N } = Zt(
     x,
-    C,
+    y,
     w,
@@ -347,6 +353,6 @@ d,
     x,
-    C,
+    y,
     l,
-    c == null ? void 0 : c.previousElementSibling,
-    E,
+    a == null ? void 0 : a.previousElementSibling,
+    m,
     G
@@ -361,7 +367,7 @@ ), _ = kt(
   ), R = qt(
-    B,
+    C,
     D,
     f
-  ), Y = (E ? _ - X : X - _) - R;
-  return t === "vertical" ? p = Y : t === "horizontal" && (a = Y), ft({ height: p, width: a }, t, s);
+  ), Y = (m ? _ - X : X - _) - R;
+  return t === "vertical" ? p = Y : t === "horizontal" && (c = Y), ut({ height: p, width: c }, t, s);
 }
@@ -376,7 +382,7 @@ const qt = (t, e, n) => {
   const o = e < n, [s, f] = [e, n].toSorted(
-    (c, d) => c - d
-  ), p = t[e], a = t[n], l = o ? t.slice(s + 1, f + 1) : t.slice(s, f);
+    (a, d) => a - d
+  ), p = t[e], c = t[n], l = o ? t.slice(s + 1, f + 1) : t.slice(s, f);
   return {
     sourceElement: p,
-    targetElement: a,
+    targetElement: c,
     siblingsBetween: l,
@@ -393,6 +399,6 @@ isDraggedFoward: o
   const p = P(o[0], t);
-  let a = 0, l = 0;
-  for (let c = 0; c < o.length; c++) {
-    const d = o[c], E = d.getBoundingClientRect()[n], D = P(d, t);
-    f && (a += D), f && c > 0 ? a += s : a = Math.max(a, D), l += a + E, a = P(d, e);
+  let c = 0, l = 0;
+  for (let a = 0; a < o.length; a++) {
+    const d = o[a], m = d.getBoundingClientRect()[n], D = P(d, t);
+    f && (c += D), f && a > 0 ? c += s : c = Math.max(c, D), l += c + m, c = P(d, e);
   }
@@ -402,7 +408,7 @@ return {
     space: l - p,
-    afterMarginSpace: a
+    afterMarginSpace: c
   };
-}, ft = (t, e, n) => {
-  const { scroll: o, distance: s } = y(e), f = window[o], a = n[o] - f;
-  return t[s] += a, t;
+}, ut = (t, e, n) => {
+  const { scroll: o, distance: s } = M(e), f = window[o], c = n[o] - f;
+  return t[s] += c, t;
 }, jt = (t, e, n, o, s, f) => {
@@ -428,35 +434,35 @@ const p = s ? n.previousElementSibling : o;
   ), p = P(o, t);
-  let a = Math.max(f, p);
+  let c = Math.max(f, p);
   return {
     afterMargin: f,
     beforeMargin: p,
-    spaceBeforeDraggedElement: a
+    spaceBeforeDraggedElement: c
   };
-}, dt = "dragging-handler-class", Kt = "dragging", Qt = "draggable", pt = "temp-child", te = "startDrop", ee = "drag", ne = "startDrag", oe = "cubic-bezier(0.2, 0, 0, 1)";
-function se(t, e, n, o, s, f, p, a, l, c) {
-  const d = L(s), E = Mt(l), D = (i, u) => {
+}, ft = "dragging-handler-class", Kt = "dragging", Qt = "draggable", dt = "temp-child", te = "startDrop", ee = "drag", ne = "startDrag", oe = "cubic-bezier(0.2, 0, 0, 1)";
+function se(t, e, n, o, s, f, p, c, l, a) {
+  const d = L(s), m = Ct(l), D = (i, g) => {
     let h = { height: 0, width: 0 };
-    h = ot(i, u, c);
-    const { siblings: v, elementPosition: b } = ct(i);
-    Ht(u) ? S(
+    h = nt(i, g, a);
+    const { siblings: v, elementPosition: E } = it(i);
+    Ht(g) ? S(
       i,
-      u,
+      g,
       v,
-      b,
+      E,
       h
-    ) : B(i, u, v, h);
-  }, B = (i, u, h, v) => {
-    const b = R(i);
-    for (const [A, M] of h.entries()) {
-      if (!M.classList.contains(Qt))
+    ) : C(i, g, v, h);
+  }, C = (i, g, h, v) => {
+    const E = R(i);
+    for (const [A, B] of h.entries()) {
+      if (!B.classList.contains(Qt))
         continue;
-      if (!b) {
-        const g = x(
-          c,
+      if (!E) {
+        const u = x(
+          a,
           i,
-          M,
+          B,
           v
         );
-        if (g)
-          v = g;
+        if (u)
+          v = u;
         else
@@ -466,28 +472,28 @@ continue;
       const r = h.length - A;
-      C(v, r), u === ne ? w(M, v) : u === ee && m(M, v);
+      y(v, r), g === ne ? w(B, v) : g === ee && b(B, v);
     }
-  }, x = (i, u, h, v) => {
-    const { before: b, distance: A } = y(i), M = u.getBoundingClientRect(), r = h.getBoundingClientRect(), g = M[b], T = M[A], z = r[b], F = r[A], k = z + F / 2;
+  }, x = (i, g, h, v) => {
+    const { before: E, distance: A, axis: B } = M(i), r = g.getBoundingClientRect(), u = h.getBoundingClientRect(), T = r[E], q = u[E], F = u[A], Z = q + F / 2;
     if (h.getAnimations().length !== 0)
       return;
-    const U = z + F, tt = g + T, Tt = g >= z && g <= U, St = tt >= z && tt <= U;
-    return Tt && g > k || St && tt > k || g > U ? { height: 0, width: 0 } : v;
-  }, C = (i, u) => {
-    const { distance: h } = y(c);
-    i[h] == 0 ? d.value = Math.max(d.value, u) : d.value = Math.min(d.value, u - 1);
-  }, w = (i, u) => {
-    const { width: h, height: v } = u;
-    Z(i, v, h);
-  }, m = (i, u) => {
-    const { width: h, height: v } = u;
-    Z(i, v, h), Dt(i, a, oe);
-  }, S = (i, u, h, v, b) => {
+    const Q = At(h)[B], Dt = Z - Q;
+    return T > Dt ? { height: 0, width: 0 } : v;
+  }, y = (i, g) => {
+    const { distance: h } = M(a);
+    i[h] == 0 ? d.value = Math.max(d.value, g) : d.value = Math.min(d.value, g - 1);
+  }, w = (i, g) => {
+    const { width: h, height: v } = g;
+    k(i, v, h);
+  }, b = (i, g) => {
+    const { width: h, height: v } = g;
+    k(i, v, h), bt(i, c, oe);
+  }, S = (i, g, h, v, E) => {
     const A = h.toReversed();
     A.splice(v, 0, i);
-    const { previousElement: M, nextElement: r, targetIndex: g } = G(i, v, A);
-    b = ot(
+    const { previousElement: B, nextElement: r, targetIndex: u } = G(i, v, A);
+    E = nt(
       i,
-      u,
-      c,
-      M,
+      g,
+      a,
+      B,
       r
@@ -497,12 +503,12 @@ );
     if (T) {
-      for (const [z, F] of h.toReversed().entries()) {
-        let k = b;
-        if (g - 1 >= z && (k = { height: 0, width: 0 }), u === te && !F.classList.contains(pt)) {
-          const rt = Rt(), U = Ft(
-            c,
+      for (const [q, F] of h.toReversed().entries()) {
+        let Z = E;
+        if (u - 1 >= q && (Z = { height: 0, width: 0 }), g === te && !F.classList.contains(dt)) {
+          const st = xt(), Q = Ft(
+            a,
             A,
             v,
-            g,
-            rt,
-            E
+            u,
+            st,
+            m
           );
@@ -512,18 +518,18 @@ H(
             F,
-            k,
-            U
+            Z,
+            Q
           );
         }
       }
-      V(v, g, T);
+      V(v, u, T);
     }
-  }, G = (i, u, h) => {
-    const b = R(i) ? u : d.value, A = () => u < b ? [b, b + 1] : u > b ? [b - 1, b] : [b - 1, b + 1], [M, r] = A(), g = h[M] ?? null, T = h[r] ?? null;
+  }, G = (i, g, h) => {
+    const E = R(i) ? g : d.value, A = () => g < E ? [E, E + 1] : g > E ? [E - 1, E] : [E - 1, E + 1], [B, r] = A(), u = h[B] ?? null, T = h[r] ?? null;
     return {
-      previousElement: g,
+      previousElement: u,
       nextElement: T,
-      targetIndex: b
+      targetIndex: E
     };
-  }, H = (i, u, h, v) => {
-    Z(u, h.height, h.width), Z(
+  }, H = (i, g, h, v) => {
+    k(g, h.height, h.width), k(
       i,
@@ -533,3 +539,3 @@ v.height,
     );
-  }, V = (i, u, h) => {
+  }, V = (i, g, h) => {
     setTimeout(() => {
@@ -541,14 +547,14 @@ N(), p(
         {
-          index: u
+          index: g
         }
       ), _(h), $(h);
-    }, a);
+    }, c);
   }, N = () => {
-    var i = l.querySelectorAll(`.${pt}`);
-    i.forEach((u) => {
-      l.removeChild(u);
+    var i = l.querySelectorAll(`.${dt}`);
+    i.forEach((g) => {
+      l.removeChild(g);
     });
   }, $ = (i) => {
-    const { siblings: u } = ct(i);
-    for (const h of [...u, i]) {
+    const { siblings: g } = it(i);
+    for (const h of [...g, i]) {
       const v = W(() => {
@@ -562,4 +568,4 @@ X(h), v.disconnect();
     }
-  }, W = (i) => new MutationObserver((u) => {
-    u.forEach(() => {
+  }, W = (i) => new MutationObserver((g) => {
+    g.forEach(() => {
       i();
@@ -572,11 +578,11 @@ });
   }, R = (i) => {
-    const u = i.parentElement;
-    return !bt(i, u);
+    const g = i.parentElement;
+    return !mt(i, g);
   }, O = (i) => {
     if (!t.value)
       return;
-    const u = t.value.querySelector(f);
-    u ? u.classList.toggle(dt, i) : t.value.classList.toggle(dt, i);
-  }, Y = (i, u) => {
-    i.classList.toggle(Kt, u), O(u);
+    const g = t.value.querySelector(f);
+    g ? g.classList.toggle(ft, i) : t.value.classList.toggle(ft, i);
+  }, Y = (i, g) => {
+    i.classList.toggle(Kt, g), O(g);
   };
@@ -596,8 +602,8 @@ return { emitEventToSiblings: D };
   } : e;
-}, et = "draggable", J = "handler-class", nt = "dragging-handler-class", ce = "droppable", ae = "temp-child", le = "dragging", ge = "drag", ht = "startDrag", ue = "startDrop";
+}, tt = "draggable", j = "handler-class", et = "dragging-handler-class", ae = "droppable", ce = "temp-child", le = "dragging", ge = "drag", pt = "startDrag", ue = "startDrop";
 function fe(t, e, n, o, s) {
-  const { handlerSelector: f, direction: p, isDraggable: a } = ie(n), l = L(I.NOT_DRAGGING), c = L(t), d = L({ x: 0, y: 0 }), E = L({ scrollLeft: 0, scrollTop: 0 }), D = 200, B = L({ pageX: 0, pageY: 0 }), x = L(""), C = L(""), { setTransform: w, updateTransformState: m } = $t(c), { emitEventToSiblings: S } = se(
-    c,
+  const { handlerSelector: f, direction: p, isDraggable: c } = ie(n), l = L(I.NOT_DRAGGING), a = L(t), d = L({ x: 0, y: 0 }), m = L({ scrollLeft: 0, scrollTop: 0 }), D = 200, C = L({ pageX: 0, pageY: 0 }), x = L(""), y = L(""), { setTransform: w, updateTransformState: b } = $t(a), { emitEventToSiblings: S } = se(
+    a,
     l,
-    C,
+    y,
     x,
@@ -611,73 +617,73 @@ e,
   ), G = () => {
-    c.value && c.value.classList.add(et);
+    a.value && a.value.classList.add(tt);
   }, H = () => {
-    if (c.value && a(c.value)) {
-      const r = c.value.querySelector(f);
-      r ? r.classList.add(J) : c.value.classList.add(J);
+    if (a.value && c(a.value)) {
+      const r = a.value.querySelector(f);
+      r ? r.classList.add(j) : a.value.classList.add(j);
     }
   }, V = () => {
-    q(
+    z(
       s,
-      `.${et} { touch-action: none; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`
-    ), q(
+      `.${tt} { touch-action: none; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`
+    ), z(
       s,
-      `.${J} { cursor: grab; pointer-events: auto !important; }`
-    ), H(), q(
+      `.${j} { cursor: grab; pointer-events: auto !important; }`
+    ), H(), z(
       s,
-      `.${et} * { pointer-events: none; }`
-    ), q(
+      `.${tt} * { pointer-events: none; }`
+    ), z(
       s,
       ".temp-child { touch-action: none; pointer-events: none; box-sizing: border-box !important; }"
-    ), q(
+    ), z(
       s,
       ".droppable { position: relative; box-sizing: border-box !important; }"
-    ), q(
+    ), z(
       s,
       ".dragging { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }"
-    ), q(
+    ), z(
       s,
-      `.${nt} { cursor: grabbing !important; }`
+      `.${et} { cursor: grabbing !important; }`
     ), G();
   }, N = (r) => {
-    const g = (r == null ? void 0 : r.querySelector(`.${J}`)) ?? r;
-    g && r && a(r) && (at(
-      g,
+    const u = (r == null ? void 0 : r.querySelector(`.${j}`)) ?? r;
+    u && r && c(r) && (at(
+      u,
       "onmousedown",
       X("mousemove", "mouseup")
     ), at(
-      g,
+      u,
       "ontouchstart",
       X("touchmove", "touchend")
-    )), r != null && r.parentElement && (r == null || r.parentElement.classList.add(ce));
+    )), r != null && r.parentElement && (r == null || r.parentElement.classList.add(ae));
   }, $ = function(r) {
     l.value === I.START_DRAGGING ? R(r) : l.value === I.DRAGING && i(r);
   }, W = (r) => {
-    const g = mt(r);
-    $(g);
-  }, X = (r, g) => () => {
-    const T = c.value;
-    l.value === I.NOT_DRAGGING && (l.value = I.START_DRAGGING, document.addEventListener(r, W), Ot(s, "onscroll", u), T && document.addEventListener(g, _(r)));
+    const u = Et(r);
+    $(u);
+  }, X = (r, u) => () => {
+    const T = a.value;
+    l.value === I.NOT_DRAGGING && (l.value = I.START_DRAGGING, document.addEventListener(r, W), Ot(s, "onscroll", g), T && document.addEventListener(u, _(r)));
   }, _ = (r) => () => {
     h(), document.removeEventListener(r, W), s.onscroll = null;
   }, R = (r) => {
-    const g = c.value;
-    g && (O(g), Y(g), S(g, ht), m(r, g), M(g));
+    const u = a.value;
+    u && (O(u), Y(u), S(u, pt), b(r, u), B(u));
   }, O = (r) => {
-    E.value = Gt(r.parentElement), l.value = I.DRAGING;
+    m.value = St(r.parentElement), l.value = I.DRAGING;
   }, Y = (r) => {
-    let g = ot(
+    let u = nt(
       r,
-      ht,
+      pt,
       p
     );
     var T = document.createElement("div");
-    T.classList.add(ae);
-    const z = yt(s, p), { distance: F } = y(p);
-    g[F] -= z, T.style.height = `${g.height}px`, T.style.minWidth = `${g.width}px`, s.appendChild(T);
+    T.classList.add(ce);
+    const q = Mt(s, p), { distance: F } = M(p);
+    u[F] -= q, T.style.height = `${u.height}px`, T.style.minWidth = `${u.width}px`, s.appendChild(T);
   }, i = (r) => {
-    const { pageX: g, pageY: T } = r;
-    B.value = { pageX: g, pageY: T }, u();
-  }, u = () => {
-    const r = c.value;
-    w(r, s, B, d, p), S(r, ge);
+    const { pageX: u, pageY: T } = r;
+    C.value = { pageX: u, pageY: T }, g();
+  }, g = () => {
+    const r = a.value;
+    w(r, s, C, d, p), S(r, ge);
   }, h = () => {
@@ -689,41 +695,41 @@ if (l.value !== I.DRAGING) {
     l.value = I.END_DRAGGING;
-    const r = c.value;
+    const r = a.value;
     r && (v(r), S(r, ue));
   }, v = (r) => {
-    Dt(r, D), Z(r, 0, 0);
-  }, b = (r) => {
-    if (!c.value)
+    bt(r, D), k(r, 0, 0);
+  }, E = (r) => {
+    if (!a.value)
       return;
-    const g = c.value.querySelector(f);
-    g ? g.classList.toggle(nt, r) : c.value.classList.toggle(nt, r);
-  }, A = (r, g) => {
-    r.classList.toggle(le, g), b(g);
-  }, M = (r) => {
-    const { height: g, width: T } = r.getBoundingClientRect();
-    C.value = `${g}px`, x.value = `${T}px`, A(r, !0), r.style.transition = "";
+    const u = a.value.querySelector(f);
+    u ? u.classList.toggle(et, r) : a.value.classList.toggle(et, r);
+  }, A = (r, u) => {
+    r.classList.toggle(le, u), E(u);
+  }, B = (r) => {
+    const { height: u, width: T } = r.getBoundingClientRect();
+    y.value = `${u}px`, x.value = `${T}px`, A(r, !0), r.style.transition = "";
   };
-  j(
+  U(
     d,
     (r) => {
-      const g = c.value;
-      g && (g.style.transform = `translate( ${r.x}px, ${r.y}px)`);
+      const u = a.value;
+      u && (u.style.transform = `translate( ${r.x}px, ${r.y}px)`);
     },
     { deep: !0 }
-  ), j(x, (r) => {
-    const g = c.value;
-    g && g.style.setProperty("--fixedWidth", r);
-  }), j(C, (r) => {
-    const g = c.value;
-    g && g.style.setProperty("--fixedHeight", r);
-  }), V(), N(c.value);
+  ), U(x, (r) => {
+    const u = a.value;
+    u && u.style.setProperty("--fixedWidth", r);
+  }), U(y, (r) => {
+    const u = a.value;
+    u && u.style.setProperty("--fixedHeight", r);
+  }), V(), N(a.value);
 }
-function ve(t, e) {
-  const n = "index", o = L(), s = (l) => (c, d) => {
-    l && xt(L(l), c, d);
+function he(t, e) {
+  const n = "index", o = L(), s = (l) => (a, d) => {
+    l && Tt(L(l), a, d);
   }, f = () => {
     if (o.value)
       for (const l of o.value.children) {
-        const c = l.getAttribute(n), d = At(c), E = l, D = s(t.value);
-        E && d >= 0 && fe(
-          E,
+        const a = l.getAttribute(n), d = Gt(a), m = l, D = s(t.value);
+        m && d >= 0 && fe(
+          m,
           d,
@@ -741,7 +747,7 @@ e,
     }).observe(o.value, { childList: !0 });
-  }, a = () => {
+  }, c = () => {
     o.value && o.value.classList.add("droppable");
   };
-  return j(o, () => {
-    a(), p(), f();
+  return U(o, () => {
+    c(), p(), f();
   }), { parent: o };
@@ -755,3 +761,3 @@ }
 export {
-  ve as useDragAndDrop
+  he as useDragAndDrop
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "A Vue 3 drag and drop library to sort all kind of lists",
@@ -30,2 +30,3 @@ "type": "module",
     "vue3",
+    "vuejs",
     "component",
@@ -36,3 +37,5 @@ "dnd",
     "drop",
+    "dragging",
     "drag&drop",
+    "drag-n-drop",
     "draggable",
@@ -39,0 +42,0 @@ "droppable",

README.md

@@ -14,2 +14,3 @@ <h1 align="center">
 [![twitter](https://img.shields.io/twitter/follow/carlosjorgerc)](https://twitter.com/carlosjorgerc)
+[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)
 
@@ -97,1 +98,2 @@ </div>
 - [MIT](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE).
+<!-- TODO: take a look to those issues https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/issues -->

No alert changes

Improved metrics

Total package byte prevSize

48737

increased by1.46%

Lines of code

968

increased by1.26%

Number of lines in readme file

98

increased by2.08%

No dependency changes