vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.6 to 0.6.7

dist/vue-fluid-dnd.js

@@ -83,3 +83,3 @@ import { ref as L, watch as j } from "vue";
   offsetElement: "offsetTop"
-}, at = (t) => {
+}, ct = (t) => {
   const e = Bt(t), { previousSiblings: n, elementPosition: o } = wt(t);
@@ -107,3 +107,3 @@ return {
   t && (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, ct = (t, e, n) => {
+}, at = (t, e, n) => {
   n && (Nt(e) ? t[e] = n : t[e] = (o) => {
@@ -114,3 +114,3 @@ const s = mt(o);
 }, Nt = (t) => Lt.includes(t), mt = (t) => {
-  let e = t instanceof TouchEvent ? t.touches[0] : t;
+  const e = _t(t);
   if (!e) {
@@ -130,9 +130,9 @@ const { target: E } = t;
   }
-  const { clientX: n, clientY: o, pageX: s, pageY: f, screenX: p, screenY: c, target: l } = e;
-  let a = 0, d = 0;
+  const { clientX: n, clientY: o, pageX: s, pageY: f, screenX: p, screenY: a, target: l } = e;
+  let c = 0, d = 0;
   if (t instanceof MouseEvent)
-    a = t.offsetX, d = t.offsetY;
+    c = t.offsetX, d = t.offsetY;
   else {
     const E = t.target;
-    a = lt(e, window, "horizontal", E), d = lt(e, window, "vertical", E);
+    c = lt(e, window, "horizontal", E), d = lt(e, window, "vertical", E);
   }
@@ -145,17 +145,22 @@ return {
     screenX: p,
-    screenY: c,
+    screenY: a,
     target: l,
-    offsetX: a,
+    offsetX: c,
     offsetY: d
   };
+}, _t = (t) => {
+  if (window.TouchEvent && t instanceof TouchEvent)
+    return t.touches[0];
+  if (t instanceof MouseEvent)
+    return t;
 }, lt = (t, e, n, o) => {
-  const { page: s, scroll: f, before: p, borderBeforeWidth: c } = y(n), l = o.getBoundingClientRect();
-  return t[s] - e[f] - l[p] - K(o, c);
+  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") => {
   t && (t.style.transition = `transform ${e}ms ${n}`);
-}, _t = (t, e, n) => {
+}, Ot = (t, e, n) => {
   t && (t[e] = () => {
     n();
   });
-}, Ot = (t) => {
+}, It = (t) => {
   var e = t.querySelector("style");
@@ -167,3 +172,3 @@ if (!e) {
   return e;
-}, It = (t, e) => {
+}, Pt = (t, e) => {
   const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [o] = e.match(n) || [];
@@ -178,16 +183,16 @@ for (const s of t.cssRules) {
   var o;
-  var n = Ot(t);
-  n.sheet && (It(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
-}, Pt = (t) => {
+  var n = It(t);
+  n.sheet && (Pt(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
+}, $t = (t) => {
   const e = L({ offsetX: 0, offsetY: 0 }), n = L({ top: 0, left: 0 });
   j(
     n,
-    (c) => {
+    (a) => {
       const l = t.value;
-      l && (l.style.top = `${c.top}px`, l.style.left = `${c.left}px`);
+      l && (l.style.top = `${a.top}px`, l.style.left = `${a.left}px`);
     },
     { deep: !0 }
   );
-  function o(c, l, a, d, E) {
-    const D = c.getBoundingClientRect(), B = (m) => {
+  function o(a, l, c, d, E) {
+    const D = a.getBoundingClientRect(), B = (m) => {
       const {
@@ -203,3 +208,3 @@ beforeMargin: S,
         axis: _
-      } = y(m), R = a.value[$], O = window[N], Y = window[W], i = D[X], u = K(c, G), h = P(c, S), v = R - e.value[V];
+      } = 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];
       if (v >= O - i / 2 && v <= O + Y) {
@@ -211,6 +216,6 @@ const A = v - n.value[H] - u - h - O;
     }, x = (m) => {
-      if (c && c.classList.contains("dragging") && l && m === E) {
-        const { before: S, distance: G, axis: H } = y(E), 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, u = 0.75;
+      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;
         let h = 0;
-        const v = Et(c);
+        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));
@@ -228,7 +233,7 @@ const b = Y * N * h;
   }
-  const s = (c, l, a) => {
-    const { borderBeforeWidth: d, before: E } = y(c);
-    return l.getBoundingClientRect()[E] - a.getBoundingClientRect()[E] - K(t.value, d);
-  }, f = (c) => {
-    let { offsetX: l, offsetY: a, target: d } = c;
+  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;
     return t.value && d && t.value != d && (l += s(
@@ -238,16 +243,16 @@ "horizontal",
       t.value
-    ), a += s(
+    ), c += s(
       "vertical",
       d,
       t.value
-    )), { offsetX: l, offsetY: a };
+    )), { offsetX: l, offsetY: c };
   };
   return {
     setTransform: o,
-    updateTransformState: (c, l) => {
-      const { offsetX: a, offsetY: d } = f(c);
-      e.value = { offsetX: a, offsetY: d };
+    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 c[C] - e.value[B] - P(l, x) - K(l, w) - window[m];
+        return a[C] - e.value[B] - P(l, x) - K(l, w) - window[m];
       };
@@ -260,6 +265,6 @@ n.value = {
   };
-}, $t = "drag", Wt = "startDrop", Xt = "drop", Yt = (t) => t === Xt || t === Wt;
+}, Wt = "drag", Xt = "startDrop", Yt = "drop", Ht = (t) => t === Yt || t === Xt;
 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) {
-  let { height: f, width: p } = Ht(
+  let { height: f, width: p } = Vt(
     n,
@@ -270,5 +275,5 @@ t,
   );
-  return Et(t) && e == $t && (f = 0, p = 0), { height: f, width: p };
+  return Et(t) && e == Wt && (f = 0, p = 0), { height: f, width: p };
 }
-function Ht(t, e, n, o) {
+function Vt(t, e, n, o) {
   const {
@@ -278,16 +283,16 @@ afterMargin: s,
     distance: p,
-    gap: c
-  } = y(t), l = P(e, s), a = P(e, f);
+    gap: a
+  } = y(t), l = P(e, s), c = P(e, f);
   let d = P(o, f);
-  const E = e.parentElement, { gap: D, hasGaps: B } = st(E, c), x = e.getBoundingClientRect()[p];
+  const E = e.parentElement, { gap: D, hasGaps: B } = st(E, a), x = e.getBoundingClientRect()[p];
   if (B)
     return ut(
       t,
-      gt(x, a, l, D, 0)
+      gt(x, c, l, D, 0)
     );
-  const { afterSpace: C, beforeScace: w, rest: m } = Vt(
+  const { afterSpace: C, beforeScace: w, rest: m } = zt(
     n,
     d,
     l,
-    a,
+    c,
     s
@@ -300,5 +305,5 @@ );
 }
-const Vt = (t, e, n, o, s) => {
+const zt = (t, e, n, o, s) => {
   const f = Math.max(e, n);
-  let p = o, c = e;
+  let p = o, a = e;
   if (t) {
@@ -309,11 +314,11 @@ const l = P(
     );
-    p = Math.max(l, o), c = Math.max(c, l);
+    p = Math.max(l, o), a = Math.max(a, l);
   }
-  return { afterSpace: f, beforeScace: p, rest: c };
+  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 };
-function zt(t, e, n, o, s, f) {
-  let p = 0, c = 0;
+function Ft(t, e, n, o, s, f) {
+  let p = 0, a = 0;
   if (n === o)
-    return ft({ height: p, width: c }, t, s);
-  const { sourceElement: l, targetElement: a, siblingsBetween: d, isDraggedFoward: E } = kt(e, n, o), D = l.parentElement, {
+    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,
@@ -324,3 +329,3 @@ beforeMargin: x,
     gap: m
-  } = y(t), { gap: S, hasGaps: G } = st(D, m), { beforeMarginSpace: H, space: V, afterMarginSpace: N } = Ut(
+  } = y(t), { gap: S, hasGaps: G } = st(D, m), { beforeMarginSpace: H, space: V, afterMarginSpace: N } = Zt(
     x,
@@ -336,10 +341,10 @@ C,
     spaceBeforeDraggedElement: X
-  } = Zt(
+  } = jt(
     x,
     C,
     l,
-    a == null ? void 0 : a.previousElementSibling,
+    c == null ? void 0 : c.previousElementSibling,
     E,
     G
-  ), _ = qt(
+  ), _ = kt(
     V,
@@ -351,3 +356,3 @@ H,
     S
-  ), R = Ft(
+  ), R = qt(
     B,
@@ -357,21 +362,21 @@ D,
   ), Y = (E ? _ - X : X - _) - R;
-  return t === "vertical" ? p = Y : t === "horizontal" && (c = Y), ft({ height: p, width: c }, t, s);
+  return t === "vertical" ? p = Y : t === "horizontal" && (a = Y), ft({ height: p, width: a }, t, s);
 }
-const Ft = (t, e, n) => {
+const qt = (t, e, n) => {
   const o = e[t], s = n[t];
   return o - s;
-}, qt = (t, e, n, o, s, f) => {
+}, kt = (t, e, n, o, s, f) => {
   const p = Math.max(e, s);
   return Math.max(n, o) + t + p + f;
-}, kt = (t, e, n) => {
+}, Ut = (t, e, n) => {
   const o = e < n, [s, f] = [e, n].toSorted(
-    (a, d) => a - d
-  ), p = t[e], c = t[n], l = o ? t.slice(s + 1, f + 1) : t.slice(s, f);
+    (c, d) => c - d
+  ), p = t[e], a = t[n], l = o ? t.slice(s + 1, f + 1) : t.slice(s, f);
   return {
     sourceElement: p,
-    targetElement: c,
+    targetElement: a,
     siblingsBetween: l,
     isDraggedFoward: o
   };
-}, Ut = (t, e, n, o, s, f) => {
+}, Zt = (t, e, n, o, s, f) => {
   if (o.length == 0)
@@ -384,6 +389,6 @@ return {
   const p = P(o[0], t);
-  let c = 0, l = 0;
-  for (let a = 0; a < o.length; a++) {
-    const d = o[a], E = d.getBoundingClientRect()[n], D = P(d, t);
-    f && (c += D), f && a > 0 ? c += s : c = Math.max(c, D), l += c + E, c = P(d, e);
+  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);
   }
@@ -393,10 +398,10 @@ return {
     space: l - p,
-    afterMarginSpace: c
+    afterMarginSpace: a
   };
 }, ft = (t, e, n) => {
-  const { scroll: o, distance: s } = y(e), f = window[o], c = n[o] - f;
-  return t[s] += c, t;
-}, Zt = (t, e, n, o, s, f) => {
+  const { scroll: o, distance: s } = y(e), f = window[o], a = n[o] - f;
+  return t[s] += a, t;
+}, jt = (t, e, n, o, s, f) => {
   const p = s ? n.previousElementSibling : o;
-  return jt(
+  return Jt(
     t,
@@ -408,3 +413,3 @@ e,
   );
-}, jt = (t, e, n, o, s) => {
+}, Jt = (t, e, n, o, s) => {
   if (s)
@@ -420,15 +425,15 @@ return {
   ), p = P(o, t);
-  let c = Math.max(f, p);
+  let a = Math.max(f, p);
   return {
     afterMargin: f,
     beforeMargin: p,
-    spaceBeforeDraggedElement: c
+    spaceBeforeDraggedElement: a
   };
-}, dt = "dragging-handler-class", Jt = "dragging", Kt = "draggable", pt = "temp-child", Qt = "startDrop", te = "drag", ee = "startDrag", ne = "cubic-bezier(0.2, 0, 0, 1)";
-function oe(t, e, n, o, s, f, p, c, l, a) {
+}, 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) => {
     let h = { height: 0, width: 0 };
-    h = ot(i, u, a);
-    const { siblings: v, elementPosition: b } = at(i);
-    Yt(u) ? S(
+    h = ot(i, u, c);
+    const { siblings: v, elementPosition: b } = ct(i);
+    Ht(u) ? S(
       i,
@@ -443,7 +448,7 @@ u,
     for (const [A, M] of h.entries()) {
-      if (!M.classList.contains(Kt))
+      if (!M.classList.contains(Qt))
         continue;
       if (!b) {
         const g = x(
-          a,
+          c,
           i,
@@ -459,3 +464,3 @@ M,
       const r = h.length - A;
-      C(v, r), u === ee ? w(M, v) : u === te && m(M, v);
+      C(v, r), u === ne ? w(M, v) : u === ee && m(M, v);
     }
@@ -469,3 +474,3 @@ }, x = (i, u, h, v) => {
   }, C = (i, u) => {
-    const { distance: h } = y(a);
+    const { distance: h } = y(c);
     i[h] == 0 ? d.value = Math.max(d.value, u) : d.value = Math.min(d.value, u - 1);
@@ -477,3 +482,3 @@ }, w = (i, u) => {
     const { width: h, height: v } = u;
-    Z(i, v, h), Dt(i, c, ne);
+    Z(i, v, h), Dt(i, a, oe);
   }, S = (i, u, h, v, b) => {
@@ -486,3 +491,3 @@ const A = h.toReversed();
       u,
-      a,
+      c,
       M,
@@ -495,5 +500,5 @@ r
         let k = b;
-        if (g - 1 >= z && (k = { height: 0, width: 0 }), u === Qt && !F.classList.contains(pt)) {
-          const rt = Rt(), U = zt(
-            a,
+        if (g - 1 >= z && (k = { height: 0, width: 0 }), u === te && !F.classList.contains(pt)) {
+          const rt = Rt(), U = Ft(
+            c,
             A,
@@ -538,3 +543,3 @@ v,
       ), _(h), $(h);
-    }, c);
+    }, a);
   }, N = () => {
@@ -546,3 +551,3 @@ var i = l.querySelectorAll(`.${pt}`);
   }, $ = (i) => {
-    const { siblings: u } = at(i);
+    const { siblings: u } = ct(i);
     for (const h of [...u, i]) {
@@ -574,9 +579,9 @@ const v = W(() => {
   }, Y = (i, u) => {
-    i.classList.toggle(Jt, u), O(u);
+    i.classList.toggle(Kt, u), O(u);
   };
   return { emitEventToSiblings: D };
 }
-const se = "vertical", re = (t) => {
+const re = "vertical", ie = (t) => {
   const e = {
-    direction: se,
+    direction: re,
     handlerSelector: "draggable",
@@ -590,6 +595,6 @@ isDraggable: () => !0
   } : e;
-}, et = "draggable", J = "handler-class", nt = "dragging-handler-class", ie = "droppable", ae = "temp-child", ce = "dragging", le = "drag", ht = "startDrag", ge = "startDrop";
-function ue(t, e, n, o, s) {
-  const { handlerSelector: f, direction: p, isDraggable: c } = re(n), l = L(I.NOT_DRAGGING), a = 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 } = Pt(a), { emitEventToSiblings: S } = oe(
-    a,
+}, et = "draggable", J = "handler-class", nt = "dragging-handler-class", ce = "droppable", ae = "temp-child", le = "dragging", ge = "drag", ht = "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,
     l,
@@ -605,7 +610,7 @@ C,
   ), G = () => {
-    a.value && a.value.classList.add(et);
+    c.value && c.value.classList.add(et);
   }, H = () => {
-    if (a.value && c(a.value)) {
-      const r = a.value.querySelector(f);
-      r ? r.classList.add(J) : a.value.classList.add(J);
+    if (c.value && a(c.value)) {
+      const r = c.value.querySelector(f);
+      r ? r.classList.add(J) : c.value.classList.add(J);
     }
@@ -637,11 +642,11 @@ }, V = () => {
     const g = (r == null ? void 0 : r.querySelector(`.${J}`)) ?? r;
-    g && r && c(r) && (ct(
+    g && r && a(r) && (at(
       g,
       "onmousedown",
       X("mousemove", "mouseup")
-    ), ct(
+    ), at(
       g,
       "ontouchstart",
       X("touchmove", "touchend")
-    )), r != null && r.parentElement && (r == null || r.parentElement.classList.add(ie));
+    )), r != null && r.parentElement && (r == null || r.parentElement.classList.add(ce));
   }, $ = function(r) {
@@ -653,8 +658,8 @@ l.value === I.START_DRAGGING ? R(r) : l.value === I.DRAGING && i(r);
   }, X = (r, g) => () => {
-    const T = a.value;
-    l.value === I.NOT_DRAGGING && (l.value = I.START_DRAGGING, document.addEventListener(r, W), _t(s, "onscroll", u), T && document.addEventListener(g, _(r)));
+    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)));
   }, _ = (r) => () => {
     h(), document.removeEventListener(r, W), s.onscroll = null;
   }, R = (r) => {
-    const g = a.value;
+    const g = c.value;
     g && (O(g), Y(g), S(g, ht), m(r, g), M(g));
@@ -677,4 +682,4 @@ }, O = (r) => {
   }, u = () => {
-    const r = a.value;
-    w(r, s, B, d, p), S(r, le);
+    const r = c.value;
+    w(r, s, B, d, p), S(r, ge);
   }, h = () => {
@@ -686,13 +691,13 @@ if (l.value !== I.DRAGING) {
     l.value = I.END_DRAGGING;
-    const r = a.value;
-    r && (v(r), S(r, ge));
+    const r = c.value;
+    r && (v(r), S(r, ue));
   }, v = (r) => {
     Dt(r, D), Z(r, 0, 0);
   }, b = (r) => {
-    if (!a.value)
+    if (!c.value)
       return;
-    const g = a.value.querySelector(f);
-    g ? g.classList.toggle(nt, r) : a.value.classList.toggle(nt, r);
+    const g = c.value.querySelector(f);
+    g ? g.classList.toggle(nt, r) : c.value.classList.toggle(nt, r);
   }, A = (r, g) => {
-    r.classList.toggle(ce, g), b(g);
+    r.classList.toggle(le, g), b(g);
   }, M = (r) => {
@@ -705,3 +710,3 @@ const { height: g, width: T } = r.getBoundingClientRect();
     (r) => {
-      const g = a.value;
+      const g = c.value;
       g && (g.style.transform = `translate( ${r.x}px, ${r.y}px)`);
@@ -711,17 +716,17 @@ },
   ), j(x, (r) => {
-    const g = a.value;
+    const g = c.value;
     g && g.style.setProperty("--fixedWidth", r);
   }), j(C, (r) => {
-    const g = a.value;
+    const g = c.value;
     g && g.style.setProperty("--fixedHeight", r);
-  }), V(), N(a.value);
+  }), V(), N(c.value);
 }
-function he(t, e) {
-  const n = "index", o = L(), s = (l) => (a, d) => {
-    l && xt(L(l), a, d);
+function ve(t, e) {
+  const n = "index", o = L(), s = (l) => (c, d) => {
+    l && xt(L(l), c, d);
   }, f = () => {
     if (o.value)
       for (const l of o.value.children) {
-        const a = l.getAttribute(n), d = At(a), E = l, D = s(t.value);
-        E && d >= 0 && ue(
+        const c = l.getAttribute(n), d = At(c), E = l, D = s(t.value);
+        E && d >= 0 && fe(
           E,
@@ -737,13 +742,13 @@ d,
       return;
-    fe(() => {
+    de(() => {
       f();
     }).observe(o.value, { childList: !0 });
-  }, c = () => {
+  }, a = () => {
     o.value && o.value.classList.add("droppable");
   };
   return j(o, () => {
-    c(), p(), f();
+    a(), p(), f();
   }), { parent: o };
 }
-const fe = (t) => new MutationObserver((e) => {
+const de = (t) => new MutationObserver((e) => {
   e.forEach(() => {
@@ -754,3 +759,3 @@ t();
 export {
-  he as useDragAndDrop
+  ve as useDragAndDrop
 };

package.json

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

48037

increased by0.38%

Lines of code

956

increased by0.53%

No dependency changes