vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.16 to 0.6.17

dist/vue-fluid-dnd.js

@@ -1,6 +0,6 @@
-var zt = Object.defineProperty;
-var Xt = (t, e, n) => e in t ? zt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var gt = (t, e, n) => (Xt(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { ref as M, watch as rt } from "vue";
-const Wt = (t, e) => {
+var Xt = Object.defineProperty;
+var Wt = (t, e, n) => e in t ? Xt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var gt = (t, e, n) => (Wt(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { ref as M, watch as ot } from "vue";
+const Yt = (t, e) => {
   const n = t.value;
@@ -11,5 +11,5 @@ if (n.length <= 0)
   return o;
-}, Yt = (t, e, n) => {
+}, Vt = (t, e, n) => {
   t.value.splice(e, 0, n);
-}, Vt = (t) => {
+}, Ht = (t) => {
   if (t) {
@@ -20,6 +20,6 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, Ht = () => {
+}, Ft = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, at = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Ft = (t) => t ? parseInt(t) : -1, $t = (t) => {
+}, lt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), qt = (t) => t ? parseInt(t) : -1, It = (t) => {
   const e = getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
@@ -30,8 +30,8 @@ return {
   };
-}, It = (t, e) => t.x1 > e.x1 ? It(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, Q = (t, e) => !qt(t, e), qt = (t, e) => {
-  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = xt(n, o, "vertical"), i = xt(n, o, "horizontal");
+}, 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, K = (t, e) => !kt(t, e), kt = (t, e) => {
+  const n = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = yt(n, o, "vertical"), i = yt(n, o, "horizontal");
   return s >= Math.min(n.height, o.height) / 2 && i >= Math.min(n.width, o.width) / 2;
-}, xt = (t, e, n) => {
+}, yt = (t, e, n) => {
   const { before: o, distance: s } = G(n);
-  return It(
+  return Pt(
     {
@@ -46,3 +46,3 @@ x1: t[o],
   );
-}, lt = (t, e) => t ? at(getComputedStyle(t)[e]) : 0, B = (t, e) => t ? at(getComputedStyle(t)[e]) : 0, yt = (t) => {
+}, ut = (t, e) => t ? lt(getComputedStyle(t)[e]) : 0, B = (t, e) => t ? lt(getComputedStyle(t)[e]) : 0, At = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
@@ -84,3 +84,3 @@ return { scrollLeft: e, scrollTop: n };
   clientDistance: "clientHeight"
-}, dt = (t, e) => kt(t, e), kt = (t, e) => {
+}, dt = (t, e) => Ut(t, e), Ut = (t, e) => {
   const n = [...e.children].filter(
@@ -96,5 +96,5 @@ (s) => !s.isEqualNode(t) && s.classList.contains("draggable")
   };
-}, ht = (t) => window.TouchEvent && t instanceof TouchEvent, tt = (t) => t instanceof HTMLElement, Ut = ["onmouseup", "onmousedown", "onmousemove"], st = (t, e, n) => {
-  !t || !tt(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, Zt = (t, e, n) => {
+}, ht = (t) => window.TouchEvent && t instanceof TouchEvent, Q = (t) => t instanceof HTMLElement, Zt = ["onmouseup", "onmousedown", "onmousemove"], nt = (t, e, n) => {
+  !t || !Q(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
+}, jt = (t, e, n) => {
   t[e] = (o) => {
@@ -106,5 +106,5 @@ if (o.defaultPrevented)
   };
-}, At = (t, e, n) => {
-  n && (jt(e) ? t[e] = n : Zt(t, e, n));
-}, jt = (t) => Ut.includes(t), Jt = (t) => {
+}, Gt = (t, e, n) => {
+  n && (Jt(e) ? t[e] = n : jt(t, e, n));
+}, Jt = (t) => Zt.includes(t), Kt = (t) => {
   const { target: e } = t;
@@ -122,4 +122,4 @@ return {
   };
-}, Kt = (t, e) => {
-  const n = (o, s) => te(e, window, s, o);
+}, Qt = (t, e) => {
+  const n = (o, s) => ee(e, window, s, o);
   if (t instanceof MouseEvent) {
@@ -136,6 +136,6 @@ const { offsetX: o, offsetY: s } = t;
 }, vt = (t) => {
-  const e = Qt(t);
+  const e = te(t);
   if (!e)
-    return Jt(t);
-  const { offsetX: n, offsetY: o } = Kt(t, e), { clientX: s, clientY: i, pageX: r, pageY: a, screenX: f, screenY: g, target: d } = e;
+    return Kt(t);
+  const { offsetX: n, offsetY: o } = Qt(t, e), { clientX: s, clientY: i, pageX: r, pageY: a, screenX: f, screenY: g, target: p } = e;
   return {
@@ -148,7 +148,7 @@ clientX: s,
     screenY: g,
-    target: d,
+    target: p,
     offsetX: n,
     offsetY: o
   };
-}, Qt = (t) => {
+}, te = (t) => {
   if (ht(t))
@@ -158,12 +158,12 @@ return t.touches[0];
     return t;
-}, te = (t, e, n, o) => {
+}, ee = (t, e, n, o) => {
   const { page: s, scroll: i, before: r, borderBeforeWidth: a } = G(n), f = o.getBoundingClientRect();
-  return t[s] - e[i] - f[r] - lt(o, a);
+  return t[s] - e[i] - f[r] - ut(o, a);
 }, Tt = (t, e, n = "ease-out", o = "transform") => {
-  tt(t) && (t.style.transition = `${e}ms ${n}`, t.style.transitionProperty = `${o}`);
-}, ee = (t, e, n) => {
-  !t || !tt(t) || (t[e] = () => {
+  Q(t) && (t.style.transition = `${e}ms ${n}`, t.style.transitionProperty = `${o}`);
+}, ne = (t, e, n) => {
+  !t || !Q(t) || (t[e] = () => {
     n();
   });
-}, ne = (t) => {
+}, oe = (t) => {
   var e = t.querySelector("style");
@@ -175,3 +175,3 @@ if (!e) {
   return e;
-}, oe = (t, e) => {
+}, se = (t, e) => {
   const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [o] = e.match(n) || [];
@@ -184,18 +184,18 @@ for (const s of t.cssRules) {
   return !1;
-}, se = (t, e) => {
+}, re = (t, e) => {
   e.forEach((n) => {
-    re(t, n);
+    ie(t, n);
   });
-}, re = (t, e) => {
+}, ie = (t, e) => {
   var o;
-  var n = ne(t);
-  n.sheet && (oe(n.sheet, e) || (o = n.sheet) == null || o.insertRule(e, n.sheet.cssRules.length));
-}, ie = (t, e, n) => {
+  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) => {
   n != 0 && (e === "vertical" ? t.scrollBy(0, n) : t.scrollBy(n, 0));
-}, ce = (t, e, n) => {
+}, ae = (t, e, n) => {
   const { scrollDistance: o, clientDistance: s, scrollElement: i } = G(t);
   return n[i] / (e[o] - e[s]);
-}, ae = "handler-class", le = (t) => {
+}, le = "handler-class", ue = (t) => {
   const e = M({ offsetX: 0, offsetY: 0 }), n = M({ top: 0, left: 0 }), o = M({ x: 0, y: 0 });
-  rt(
+  ot(
     o,
@@ -207,3 +207,3 @@ (r) => {
     { deep: !0 }
-  ), rt(
+  ), ot(
     n,
@@ -217,3 +217,3 @@ (r) => {
   function s(r, a, f, g) {
-    const d = (b) => {
+    const p = (b) => {
       const {
@@ -223,3 +223,3 @@ beforeMargin: x,
         before: S,
-        offset: O,
+        offset: w,
         scroll: z,
@@ -230,3 +230,3 @@ page: k,
         axis: C
-      } = G(b), Y = f.value[k], V = window[z], H = window[X], F = r.getBoundingClientRect()[W], I = lt(r, R), l = B(r, x), u = Y - e.value[O];
+      } = G(b), Y = f.value[k], V = window[z], H = window[X], F = r.getBoundingClientRect()[W], I = ut(r, R), l = B(r, x), u = Y - e.value[w];
       if (u >= V - F / 2 && u <= V + H) {
@@ -239,12 +239,12 @@ const v = u - n.value[S] - I - l - V;
       if (r && r.classList.contains("dragging") && b === g) {
-        const { before: x, distance: R, axis: S } = G(g), O = r.getBoundingClientRect()[R], z = a.getBoundingClientRect(), k = n.value[x] - z[x] + o.value[S], W = z[R] - O, C = k / W, Y = O / W, V = 0.1, H = 0.2, F = 0.8;
+        const { before: x, distance: R, axis: S } = G(g), w = r.getBoundingClientRect()[R], z = a.getBoundingClientRect(), k = n.value[x] - z[x] + o.value[S], W = z[R] - w, C = k / W, Y = w / W, V = 0.1, H = 0.2, F = 0.8;
         let I = 0;
-        const l = Q(r, a);
+        const l = K(r, a);
         !l && C < H && C > -Y ? I = C / H - 1 : !l && C > F && C < 1 + Y && (I = 1 / (1 - F) * (C - F));
-        const u = V * O * I;
-        ie(a, g, u);
+        const u = V * w * I;
+        ce(a, g, u);
       }
     }, m = (b) => {
       const { axis: x } = G(b);
-      o.value[x] = d(b);
+      o.value[x] = p(b);
     };
@@ -256,3 +256,3 @@ m("horizontal"), m("vertical");
     updateTransformState: (r, a) => {
-      const { offsetX: f, offsetY: g, top: d, left: E } = ge(
+      const { offsetX: f, offsetY: g, top: p, left: E } = de(
         r,
@@ -263,3 +263,3 @@ a,
       n.value = {
-        top: d,
+        top: p,
         left: E
@@ -269,22 +269,22 @@ }, e.value = { offsetX: f, offsetY: g };
   };
-}, Gt = (t, e, n) => {
+}, Rt = (t, e, n) => {
   const { borderBeforeWidth: o, before: s } = G(t);
-  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - lt(n, o);
-}, ue = (t, e) => {
-  let { offsetX: n, offsetY: o, target: s } = t, i = fe(s, e);
-  return e && i && e != s && (n += Gt("horizontal", i, e), o += Gt("vertical", i, e)), { offsetX: n, offsetY: o };
+  return e.getBoundingClientRect()[s] - n.getBoundingClientRect()[s] - ut(n, o);
 }, fe = (t, e) => {
-  const n = t == null ? void 0 : t.closest(`.${ae}`);
+  let { offsetX: n, offsetY: o, target: s } = t, i = ge(s, e);
+  return e && i && e != s && (n += Rt("horizontal", i, e), o += Rt("vertical", i, e)), { offsetX: n, offsetY: o };
+}, ge = (t, e) => {
+  const n = t == null ? void 0 : t.closest(`.${le}`);
   return n && e && n.isSameNode(e) ? t : n;
-}, Rt = (t, e, n, o) => {
+}, Ct = (t, e, n, o) => {
   const { offset: s, beforeMargin: i, page: r, borderBeforeWidth: a, scroll: f } = G(t);
-  return e[r] - o[s] - B(n, i) - lt(n, a) - window[f];
-}, ge = (t, e, n) => {
-  const { offsetX: o, offsetY: s } = ue(t, n);
+  return e[r] - o[s] - B(n, i) - ut(n, a) - window[f];
+}, de = (t, e, n) => {
+  const { offsetX: o, offsetY: s } = fe(t, n);
   return {
-    top: Rt("vertical", t, e, {
+    top: Ct("vertical", t, e, {
       offsetX: o,
       offsetY: s
     }),
-    left: Rt("horizontal", t, e, {
+    left: Ct("horizontal", t, e, {
       offsetX: o,
@@ -296,8 +296,8 @@ offsetY: s
   };
-}, de = "drag", pe = "startDrop", he = "drop", ve = (t) => t === he || t === pe;
+}, 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 mt = (t) => !t || t.length == 0 ? 0 : at(t.replace("px", "")), me = (t, e) => {
+const mt = (t) => !t || t.length == 0 ? 0 : lt(t.replace("px", "")), De = (t, e) => {
   const n = getComputedStyle(t)[e];
   if (n.match("%")) {
-    const s = at(n.replace("%", "")), { width: i } = t.getBoundingClientRect();
+    const s = lt(n.replace("%", "")), { width: i } = t.getBoundingClientRect();
     return i * (s / 100);
@@ -312,3 +312,3 @@ }
     };
-  const n = me(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
+  const n = De(t, e), o = getComputedStyle(t).display, s = n > 0 || o === "flex";
   return {
@@ -318,3 +318,3 @@ gap: n,
   };
-}, De = (t) => {
+}, be = (t) => {
   const { top: e, left: n } = getComputedStyle(t);
@@ -325,3 +325,3 @@ return {
   };
-}, be = (t, e) => {
+}, Se = (t, e) => {
   const { gap: n } = G(e), { gap: o, hasGaps: s } = Et(t, n);
@@ -331,3 +331,3 @@ return s ? o : 0;
 function Dt(t, e, n, o, s = t.previousElementSibling, i = t.nextElementSibling) {
-  let { height: r, width: a } = Se(
+  let { height: r, width: a } = Te(
     n,
@@ -338,5 +338,5 @@ t,
   );
-  return Q(t, o) && e == de && (r = 0, a = 0), { height: r, width: a };
+  return K(t, o) && e == pe && (r = 0, a = 0), { height: r, width: a };
 }
-function Se(t, e, n, o) {
+function Te(t, e, n, o) {
   const {
@@ -347,3 +347,3 @@ afterMargin: s,
     gap: a
-  } = G(t), f = B(e, s), g = B(e, i), d = B(o, i), { gap: E, hasGaps: m } = Et(
+  } = G(t), f = B(e, s), g = B(e, i), p = B(o, i), { gap: E, hasGaps: m } = Et(
     e.parentElement,
@@ -353,6 +353,6 @@ a
   if (m)
-    return Ct(b, g, f, E, 0, t);
-  const { afterSpace: x, beforeScace: R, rest: S } = Te(
+    return Nt(b, g, f, E, 0, t);
+  const { afterSpace: x, beforeScace: R, rest: S } = Ee(
     n,
-    d,
+    p,
     f,
@@ -362,5 +362,5 @@ g,
   );
-  return Ct(b, R, x, 0, S, t);
+  return Nt(b, R, x, 0, S, t);
 }
-const Te = (t, e, n, o, s) => {
+const Ee = (t, e, n, o, s) => {
   const i = Math.max(e, n);
@@ -376,3 +376,3 @@ let r = o, a = e;
   return { afterSpace: i, beforeScace: r, rest: a };
-}, Ct = (t, e, n, o, s, i) => Ee(i, t + e + n + o - s), Ee = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, xe = (t, e, n) => {
+}, Nt = (t, e, n, o, s, i) => xe(i, t + e + n + o - s), xe = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, ye = (t, e, n) => {
   console.log(n);
@@ -385,3 +385,3 @@ const { beforeMargin: o } = G("vertical"), { beforeMargin: s } = G("horizontal"), i = B(
     s
-  ), { top: a, left: f } = De(e), { top: g, left: d } = t.getBoundingClientRect(), { x: E, y: m } = $t(t);
+  ), { top: a, left: f } = be(e), { top: g, left: p } = t.getBoundingClientRect(), { x: E, y: m } = It(t);
   return console.log(
@@ -392,10 +392,10 @@ g - B(t, o) - m - (a - i) - 13,
     y: g - a - m - i,
-    x: d - f - E - r
+    x: p - f - E - r
   };
 };
-function ye(t, e, n, o, s, i, r, a, f) {
-  let g = 0, d = 0, E = !1;
+function Ae(t, e, n, o, s, i, r, a, f) {
+  let g = 0, p = 0, E = !1;
   if (n === o)
-    return Nt(
-      { height: g, width: d },
+    return Lt(
+      { height: g, width: p },
       t,
@@ -408,3 +408,3 @@ s,
     E = !0;
-    const [D] = e, { x: A, y: N } = xe(
+    const [D] = e, { x: y, y: N } = ye(
       D,
@@ -414,7 +414,7 @@ f,
     );
-    g += N, d += A;
+    g += N, p += y;
   }
-  const { sourceElement: m, targetElement: b, siblingsBetween: x, isDraggedFoward: R } = Re(e, n, o, f), {
+  const { sourceElement: m, targetElement: b, siblingsBetween: x, isDraggedFoward: R } = Ce(e, n, o, f), {
     scrollElement: S,
-    beforeMargin: O,
+    beforeMargin: w,
     afterMargin: z,
@@ -427,4 +427,4 @@ distance: k,
     spaceBeforeDraggedElement: H
-  } = Ne(
-    O,
+  } = Le(
+    w,
     z,
@@ -435,4 +435,4 @@ m,
     C
-  ), { beforeSpace: F, space: I, afterSpace: l } = Ce(
-    O,
+  ), { beforeSpace: F, space: I, afterSpace: l } = Ne(
+    w,
     z,
@@ -443,3 +443,3 @@ k,
     C
-  ), u = Ge(
+  ), u = Re(
     I,
@@ -451,5 +451,5 @@ F,
     W
-  ), h = E ? 0 : Ae(S, a, i), y = (R ? u - H : H - u) - h;
-  return t === "vertical" ? g += y : t === "horizontal" && (d += y), Nt(
-    { height: g, width: d },
+  ), h = E ? 0 : Ge(S, a, i), A = (R ? u - H : H - u) - h;
+  return t === "vertical" ? g += A : t === "horizontal" && (p += A), Lt(
+    { height: g, width: p },
     t,
@@ -461,11 +461,11 @@ s,
 }
-const Ae = (t, e, n) => {
+const Ge = (t, e, n) => {
   const o = e[t], s = n[t];
   return o - s;
-}, Ge = (t, e, n, o, s, i) => {
+}, Re = (t, e, n, o, s, i) => {
   const r = Math.max(e, s);
   return Math.max(n, o) + t + r + i;
-}, Re = (t, e, n, o) => {
+}, Ce = (t, e, n, o) => {
   const s = e < n, [i, r] = [e, n].toSorted(
-    (d, E) => d - E
+    (p, E) => p - E
   ), a = t[e] ?? o, f = t[n];
@@ -479,3 +479,3 @@ let g = s ? t.slice(i + 1, r + 1) : t.slice(i, r);
   };
-}, Ce = (t, e, n, o, s, i) => {
+}, Ne = (t, e, n, o, s, i) => {
   if (o.length == 0)
@@ -489,13 +489,13 @@ return {
   let a = 0, f = -r;
-  for (const [g, d] of o.entries()) {
-    const E = d.getBoundingClientRect()[n], m = B(d, t);
-    i && (a += m), i && g > 0 ? a += s : a = Math.max(a, m), f += a + E, a = B(d, e);
+  for (const [g, p] of o.entries()) {
+    const E = p.getBoundingClientRect()[n], m = B(p, t);
+    i && (a += m), i && g > 0 ? a += s : a = Math.max(a, m), f += a + E, a = B(p, e);
   }
   return { beforeSpace: r, space: f, afterSpace: a };
-}, Nt = (t, e, n, o, s) => {
+}, Lt = (t, e, n, o, s) => {
   const { scroll: i, distance: r } = G(e), a = window[i], f = n[i], g = s ? 0 : f - 2 * a + o[i];
   return t[r] += g, t;
-}, Ne = (t, e, n, o, s, i) => {
+}, Le = (t, e, n, o, s, i) => {
   const r = s ? n.previousElementSibling : o;
-  return Le(
+  return Me(
     t,
@@ -507,3 +507,3 @@ e,
   );
-}, Le = (t, e, n, o, s) => {
+}, Me = (t, e, n, o, s) => {
   if (s)
@@ -525,14 +525,14 @@ return {
   };
-}, Lt = "dragging-handler-class", Me = "dragging", Be = "draggable", pt = "temp-child", Oe = "startDrop", we = "drag", _e = "startDrag", Mt = "dropping", $e = "cubic-bezier(0.2, 0, 0, 1)";
-function Ie(t, e, n, o, s, i) {
-  const r = M(s), { direction: a, handlerSelector: f, onRemoveAtEvent: g, animationDuration: d } = t, E = (l, u, h, v, y) => {
+}, Mt = "dragging-handler-class", Be = "dragging", we = "draggable", pt = "temp-child", Oe = "startDrop", _e = "drag", $e = "startDrag", Bt = "dropping", Ie = "cubic-bezier(0.2, 0, 0, 1)";
+function Pe(t, e, n, o, s, i) {
+  const r = M(s), { direction: a, handlerSelector: f, onRemoveAtEvent: g, animationDuration: p } = t, E = (l, u, h, v, A) => {
     if (!v)
       return;
-    const { droppable: D, config: A } = v, N = Dt(
+    const { droppable: D, config: y } = v, N = Dt(
       l,
       u,
-      A.direction,
+      y.direction,
       D
     );
-    ve(u) ? O(
+    me(u) ? w(
       l,
@@ -543,3 +543,3 @@ u,
       v,
-      y
+      A
     ) : m(
@@ -552,10 +552,10 @@ l,
   }, m = (l, u, h, v) => {
-    const { config: y, droppable: D } = v, { siblings: A } = dt(l, D), N = Q(l, D);
-    for (const [L, w] of A.entries()) {
-      if (!w.classList.contains(Be))
+    const { config: A, droppable: D } = v, { siblings: y } = dt(l, D), N = K(l, D);
+    for (const [O, L] of y.entries()) {
+      if (!L.classList.contains(we))
         continue;
       const P = b(
-        y.direction,
+        A.direction,
         l,
-        w,
+        L,
         h
@@ -567,38 +567,38 @@ );
         continue;
-      const U = A.length - L;
+      const U = y.length - O;
       x(
         h,
         U,
-        y.direction,
-        A
-      ), u === _e ? R(w, h) : u === we && S(w, h);
+        A.direction,
+        y
+      ), u === $e ? R(L, h) : u === _e && S(L, h);
     }
   }, b = (l, u, h, v) => {
-    const { before: y, distance: D, axis: A } = G(l), N = u.getBoundingClientRect(), L = h.getBoundingClientRect(), w = N[y], P = L[y], U = L[D], et = P + U / 2;
+    const { before: A, distance: D, axis: y } = G(l), N = u.getBoundingClientRect(), O = h.getBoundingClientRect(), L = N[A], P = O[A], U = O[D], tt = P + U / 2;
     if (h.getAnimations().length !== 0)
       return;
-    const Z = $t(h)[A], J = et - Z;
-    return w > J ? { height: 0, width: 0 } : v;
+    const Z = It(h)[y], et = tt - Z;
+    return L > et ? { height: 0, width: 0 } : v;
   }, x = (l, u, h, v) => {
-    const y = v.filter(
-      (A) => A.classList.contains("draggable")
+    const A = v.filter(
+      (y) => y.classList.contains("draggable")
     ).length, { distance: D } = G(h);
-    l[D] == 0 ? r.value = Math.max(r.value, u) : r.value = Math.min(r.value, u - 1), r.value = Math.min(r.value, y);
+    l[D] == 0 ? r.value = Math.max(r.value, u) : r.value = Math.min(r.value, u - 1), r.value = Math.min(r.value, A);
   }, R = (l, u) => {
     const { width: h, height: v } = u;
-    st(l, v, h);
+    nt(l, v, h);
   }, S = (l, u) => {
     const { width: h, height: v } = u;
-    st(l, v, h), Tt(l, d, $e);
-  }, O = (l, u, h, v, y, D) => {
-    const { droppable: A, droppableScroll: N, config: L } = y, { siblings: w, positionOnDroppable: P } = dt(
+    nt(l, v, h), Tt(l, p, Ie);
+  }, w = (l, u, h, v, A, D) => {
+    const { droppable: y, droppableScroll: N, config: O } = A, { siblings: L, positionOnDroppable: P } = dt(
       l,
-      A
-    ), U = w.toReversed();
+      y
+    ), U = L.toReversed();
     U.splice(P, 0, l);
-    const { previousElement: et, nextElement: nt, targetIndex: Z } = z(
+    const { previousElement: tt, nextElement: st, targetIndex: Z } = z(
       l,
       P,
       U,
-      A
+      y
     );
@@ -608,25 +608,25 @@ h = Dt(
       u,
-      L.direction,
+      O.direction,
       i,
-      et,
-      nt
+      tt,
+      st
     );
-    const J = Ht(), ut = ye(
-      L.direction,
+    const et = Ft(), rt = Ae(
+      O.direction,
       U,
       P,
       Z,
-      J,
+      et,
       N,
       v,
-      A,
+      y,
       l
     );
-    for (const [ft, it] of w.toReversed().entries()) {
-      let ot = h;
-      Z - 1 >= ft && (ot = { height: 0, width: 0 }), u === Oe && !it.classList.contains(pt) && k(
+    for (const [ft, it] of L.toReversed().entries()) {
+      let ct = h;
+      Z - 1 >= ft && (ct = { height: 0, width: 0 }), u === Oe && !it.classList.contains(pt) && k(
         it,
-        ot,
+        ct,
         l,
-        ut
+        rt
       );
@@ -637,10 +637,10 @@ }
       l,
-      L.onInsertEvent,
-      A,
+      O.onInsertEvent,
+      y,
       D
     );
   }, z = (l, u, h, v) => {
-    const D = Q(l, v) ? u : r.value, A = () => u < D ? [D, D + 1] : u > D ? [D - 1, D] : [D - 1, D + 1], [N, L] = A(), w = h[N] ?? null, P = h[L] ?? null;
+    const D = K(l, v) ? u : r.value, y = () => u < D ? [D, D + 1] : u > D ? [D - 1, D] : [D - 1, D + 1], [N, O] = y(), L = h[N] ?? null, P = h[O] ?? null;
     return {
-      previousElement: w,
+      previousElement: L,
       nextElement: P,
@@ -650,3 +650,3 @@ targetIndex: D
   }, k = (l, u, h, v) => {
-    st(l, u.height, u.width), st(
+    nt(l, u.height, u.width), nt(
       h,
@@ -656,10 +656,10 @@ v.height,
     );
-  }, X = (l, u, h, v, y) => {
-    u.classList.add(Mt), W(v), setTimeout(() => {
-      if (u.classList.remove(Mt), C(i), C(v), y != null) {
-        const D = g(y);
+  }, X = (l, u, h, v, A) => {
+    u.classList.add(Bt), W(v), setTimeout(() => {
+      if (u.classList.remove(Bt), C(i), C(v), A != null) {
+        const D = g(A);
         D && h(l, D);
       }
       H(u), Y(u, i), Y(u, v);
-    }, d);
+    }, p);
   }, W = (l) => {
@@ -672,3 +672,3 @@ if (i.isSameNode(l))
     const { distance: h } = G(a);
-    tt(u) && (u.style[h] = "0px");
+    Q(u) && (u.style[h] = "0px");
   }, C = (l) => {
@@ -684,3 +684,3 @@ var u = l.querySelectorAll(`.${pt}`);
   }, V = (l) => {
-    tt(l) && (l.style.transition = "", l.style.transform = "");
+    Q(l) && (l.style.transition = "", l.style.transform = "");
   }, H = (l) => {
@@ -690,5 +690,5 @@ e.value = $.NOT_DRAGGING, I(l, !1), l.style.transform = "", l.style.transition = "", l.style.top = "", l.style.left = "", n.value = "", o.value = "";
     const h = u.querySelector(f);
-    h ? h.classList.toggle(Lt, l) : u.classList.toggle(Lt, l);
+    h ? h.classList.toggle(Mt, l) : u.classList.toggle(Mt, l);
   }, I = (l, u) => {
-    l.classList.toggle(Me, u), F(u, l);
+    l.classList.toggle(Be, u), F(u, l);
   };
@@ -701,3 +701,3 @@ return { emitEventToSiblings: E, toggleDraggingClass: I };
       (i) => !i.droppable.isSameNode(e)
-    ), s = yt(e);
+    ), s = At(e);
     o.push({
@@ -712,3 +712,3 @@ droppable: e,
       const { droppable: s } = o;
-      (n && s.classList.contains(n) || s.isSameNode(e)) && (o.droppableScroll = yt(s));
+      (n && s.classList.contains(n) || s.isSameNode(e)) && (o.droppableScroll = At(s));
     }
@@ -729,3 +729,3 @@ }
 let j = q;
-const Pt = (t, e, n) => {
+const zt = (t, e, n) => {
   const o = new MutationObserver((s) => {
@@ -737,14 +737,14 @@ s.forEach(() => {
   o.observe(e, n);
-}, bt = "temp-child", Pe = "startDrag", ze = "cubic-bezier(0.2, 0, 0, 1)", Xe = (t, e, n) => {
+}, bt = "temp-child", ze = "startDrag", Xe = "cubic-bezier(0.2, 0, 0, 1)", We = (t, e, n) => {
   let o = Dt(
     e,
-    Pe,
+    ze,
     n,
     t
   );
-  const s = be(t, n), { distance: i } = G(n);
+  const s = Se(t, n), { distance: i } = G(n);
   o[i] -= s;
-  const { large: r, largeDistance: a } = We(n, e);
+  const { large: r, largeDistance: a } = Ye(n, e);
   return o[a] = r, o;
-}, We = (t, e) => {
+}, Ye = (t, e) => {
   const n = t == "horizontal" ? "vertical" : "horizontal", { distance: o } = G(n);
@@ -757,20 +757,20 @@ return {
   t.style.height = `${e}px`, t.style.width = `${n}px`, t.style.width = `${n}px`, t.style.minWidth = `${n}px`;
-}, Ye = (t, e, n) => (o) => {
+}, Ve = (t, e, n) => (o) => {
   e.contains(t) && (St(t, n.height, n.width), o.disconnect());
-}, Ve = (t, e) => {
+}, He = (t, e) => {
   if (e != $.START_DRAGGING)
     return;
-  const { droppable: n, config: o, droppableScroll: s } = t, { direction: i } = o, r = ce(o.direction, n, s) > 0.99, { scrollDistance: a, clientDistance: f, scrollElement: g } = G(i);
+  const { droppable: n, config: o, droppableScroll: s } = t, { direction: i } = o, r = ae(o.direction, n, s) > 0.99, { scrollDistance: a, clientDistance: f, scrollElement: g } = G(i);
   r && (n[g] = n[a] - n[f]);
-}, Bt = (t, e, n, o) => {
+}, wt = (t, e, n, o) => {
   if (!o)
     return;
   const { droppable: s, config: i } = o, { direction: r, animationDuration: a } = i;
-  if (Ve(o, n), s.querySelector(`.${bt}`) || !t)
+  if (He(o, n), s.querySelector(`.${bt}`) || !t)
     return;
   var f = document.createElement("div");
   f.classList.add(bt), St(f, 0, 0);
-  const g = Xe(s, t, r);
-  Tt(f, a, ze, "height, width"), e.isSameNode(s) && St(f, g.height, g.width), Pt(
-    Ye(f, s, g),
+  const g = We(s, t, r);
+  Tt(f, a, Xe, "height, width"), e.isSameNode(s) && St(f, g.height, g.width), zt(
+    Ve(f, s, g),
     s,
@@ -782,3 +782,3 @@ {
   ), s.appendChild(f);
-}, He = (t, e, n, o) => {
+}, Fe = (t, e, n, o) => {
   if (n) {
@@ -799,8 +799,8 @@ var s = document.querySelectorAll(
   }
-}, Ot = "draggable", ct = "handler-class", Fe = "dragging-handler-class", qe = "droppable", ke = "dropping", wt = "drag", Ue = "startDrag", Ze = "startDrop", je = "cubic-bezier(0.2, 0, 0, 1)";
-function Je(t, e, n, o) {
-  const { handlerSelector: s, isDraggable: i, droppableGroup: r, animationDuration: a } = n, f = r ? `droppable-group-${r}` : null, g = M($.NOT_DRAGGING), d = M(t), E = M({ scrollLeft: 0, scrollTop: 0 }), m = M({
+}, Ot = "draggable", at = "handler-class", qe = "dragging-handler-class", ke = "droppable", Ue = "dropping", _t = "drag", Ze = "startDrag", je = "startDrop", Je = "cubic-bezier(0.2, 0, 0, 1)";
+function Ke(t, e, n, o) {
+  const { handlerSelector: s, isDraggable: i, droppableGroup: r, animationDuration: a } = n, f = r ? `droppable-group-${r}` : null, g = M($.NOT_DRAGGING), p = M(t), E = M({ scrollLeft: 0, scrollTop: 0 }), m = M({
     scrollX: 0,
     scrollY: 0
-  }), b = M({ pageX: 0, pageY: 0 }), x = M(""), R = M(""), S = M(), O = M(), { setTransform: z, updateTransformState: k } = le(d), { emitEventToSiblings: X, toggleDraggingClass: W } = Ie(
+  }), b = M({ pageX: 0, pageY: 0 }), x = M(""), R = M(""), S = M(), w = M(), { setTransform: z, updateTransformState: k } = ue(p), { emitEventToSiblings: X, toggleDraggingClass: W } = Pe(
     n,
@@ -813,12 +813,12 @@ g,
   ), C = () => {
-    d.value && d.value.classList.add(Ot);
+    p.value && p.value.classList.add(Ot);
   }, Y = () => {
-    if (d.value && i(d.value)) {
-      const c = d.value.querySelector(s);
-      c ? c.classList.add(ct) : d.value.classList.add(ct);
+    if (p.value && i(p.value)) {
+      const c = p.value.querySelector(s);
+      c ? c.classList.add(at) : p.value.classList.add(at);
     }
   }, V = () => {
-    se(o, [
+    re(o, [
       `.${Ot} { touch-action: manipulation; user-select: none; box-sizing: border-box !important; -webkit-user-select: none; }`,
-      `.${ct} { cursor: grab; pointer-events: auto !important; }`,
+      `.${at} { cursor: grab; pointer-events: auto !important; }`,
       ".temp-child { display: block ;touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
@@ -828,4 +828,4 @@ ".temp-child { display: block ;touch-action: none; pointer-events: none; box-sizing: border-box !important; }",
       ".dragging { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important; }",
-      `.${Fe} { cursor: grabbing; cursor: grabbing; }`,
-      `.${ke} { pointer-events: none !important; }`
+      `.${qe} { cursor: grabbing; cursor: grabbing; }`,
+      `.${Ue} { pointer-events: none !important; }`
     ]), Y(), C(), H();
@@ -835,24 +835,31 @@ }, H = () => {
   }, F = (c) => {
-    const p = (c == null ? void 0 : c.querySelector(`.${ct}`)) ?? c;
-    p && c && i(c) && (At(
-      p,
+    const d = (c == null ? void 0 : c.querySelector(`.${at}`)) ?? c;
+    d && c && i(c) && (Gt(
+      d,
       "onmousedown",
       L("mousemove", "mouseup")
-    ), At(
-      p,
+    ), Gt(
+      d,
       "ontouchstart",
       L("touchmove", "touchend")
-    )), o.classList.add(qe);
-  }, I = function(c) {
-    S.value = D(c), g.value === $.START_DRAGGING ? (Bt(
-      d.value,
+    ), I(d)), o.classList.add(ke);
+  };
+  function I(c) {
+    const d = c.querySelectorAll("img");
+    Array.from(d).forEach((T) => {
+      T.onmousedown = () => !1;
+    });
+  }
+  const l = function(c) {
+    S.value = y(c), g.value === $.START_DRAGGING ? (wt(
+      p.value,
       o,
       g.value,
       S.value
-    ), P(c)) : g.value === $.DRAGING && (l(), et(c));
-  }, l = () => {
+    ), U(c)) : g.value === $.DRAGING && (u(), st(c));
+  }, u = () => {
     if (!S.value)
       return;
     const { droppable: c } = S.value;
-    He(
+    Fe(
       c,
@@ -862,4 +869,4 @@ o,
       a
-    ), Bt(
-      d.value,
+    ), wt(
+      p.value,
       o,
@@ -869,30 +876,30 @@ g.value,
     );
-  }, u = (c, p, T) => document.elementsFromPoint(c, p).filter((_) => !_.isSameNode(T)), h = (c, p) => {
+  }, h = (c, d, T) => document.elementsFromPoint(c, d).filter((_) => !_.isSameNode(T)), v = (c, d) => {
     c.hidden = !0;
-    const [T] = u(
-      p.clientX,
-      p.clientY,
+    const [T] = h(
+      d.clientX,
+      d.clientY,
       c
     );
     return c.hidden = !1, !f || !T ? void 0 : T.closest(`.${f}`);
-  }, v = (c) => Array.from(
+  }, A = (c) => Array.from(
     document.querySelectorAll(`.${f}`)
   ).every(
-    (T) => Q(c, T)
-  ), y = (c, p) => !Q(c, p) || v(c), D = (c) => {
-    var _, K;
-    const p = d.value;
-    if (!p)
+    (T) => K(c, T)
+  ), D = (c, d) => !K(c, d) || A(c), y = (c) => {
+    var _, J;
+    const d = p.value;
+    if (!d)
       return;
-    if (S.value && y(
-      p,
+    if (S.value && D(
+      d,
       (_ = S.value) == null ? void 0 : _.droppable
-    ) || S.value && y(
-      p,
-      (K = S.value) == null ? void 0 : K.droppable
+    ) || S.value && D(
+      d,
+      (J = S.value) == null ? void 0 : J.droppable
     ))
       return S.value;
-    const T = h(p, c);
-    return T ? (tt(T) && !T.onscroll && nt(T), j.getConfig(T)) : j.getConfig(o);
-  }, A = (c) => {
+    const T = v(d, c);
+    return T ? (Q(T) && !T.onscroll && Z(T), j.getConfig(T)) : j.getConfig(o);
+  }, N = (c) => {
     if (ht(c) && c.cancelable)
@@ -902,57 +909,57 @@ c.preventDefault();
       return;
-    const p = vt(c);
-    I(p);
-  }, N = (c, p) => {
-    c == "touchmove" ? O.value = setTimeout(() => {
-      p();
-    }, 200) : p();
-  }, L = (c, p) => () => {
-    const T = d.value;
+    const d = vt(c);
+    l(d);
+  }, O = (c, d) => {
+    c == "touchmove" ? w.value = setTimeout(() => {
+      d();
+    }, 200) : d();
+  }, L = (c, d) => () => {
+    const T = p.value;
     j.updateScrolls(o, f);
-    const { scrollX: _, scrollY: K } = window;
-    m.value = { scrollX: _, scrollY: K }, g.value === $.NOT_DRAGGING && (g.value = $.START_DRAGGING, N(c, () => {
-      document.addEventListener(c, A, {
+    const { scrollX: _, scrollY: J } = window;
+    m.value = { scrollX: _, scrollY: J }, g.value === $.NOT_DRAGGING && (g.value = $.START_DRAGGING, O(c, () => {
+      document.addEventListener(c, N, {
         passive: !1
       });
-    }), nt(o), T && document.addEventListener(p, w(c), {
+    }), Z(o), T && document.addEventListener(d, P(c), {
       once: !0
     }));
-  }, w = (c) => (p) => {
-    const T = vt(p);
-    clearTimeout(O.value), ut(), document.removeEventListener(c, A);
-    const _ = D(T);
+  }, P = (c) => (d) => {
+    const T = vt(d);
+    clearTimeout(w.value), ft(), document.removeEventListener(c, N);
+    const _ = y(T);
     if (_) {
-      const { droppable: K } = _;
-      K.onscroll = null;
+      const { droppable: J } = _;
+      J.onscroll = null;
     }
     o.onscroll = null;
-  }, P = (c) => {
-    const p = d.value;
-    p && (U(), X(
-      p,
-      Ue,
+  }, U = (c) => {
+    const d = p.value;
+    d && (tt(), X(
+      d,
+      Ze,
       m.value,
       S.value
-    ), k(c, p), it(p));
-  }, U = () => {
-    E.value = Vt(o), g.value = $.DRAGING;
-  }, et = (c) => {
-    const { pageX: p, pageY: T } = c;
-    b.value = { pageX: p, pageY: T }, J();
-  }, nt = (c) => {
-    ee(c, "onscroll", Z);
-  }, Z = () => {
-    J();
-  }, J = () => {
-    const c = d.value;
+    ), k(c, d), ct(d));
+  }, tt = () => {
+    E.value = Ht(o), g.value = $.DRAGING;
+  }, st = (c) => {
+    const { pageX: d, pageY: T } = c;
+    b.value = { pageX: d, pageY: T }, rt();
+  }, Z = (c) => {
+    ne(c, "onscroll", et);
+  }, et = () => {
+    rt();
+  }, rt = () => {
+    const c = p.value;
     if (b.value.pageX == 0 && b.value.pageY == 0 || !S.value)
       return;
-    const { droppable: p, config: T } = S.value;
-    z(c, p, b, T.direction), X(
+    const { droppable: d, config: T } = S.value;
+    z(c, d, b, T.direction), X(
       c,
-      wt,
+      _t,
       m.value,
       S.value
     );
-  }, ut = () => {
+  }, ft = () => {
     if (g.value !== $.DRAGING) {
@@ -963,6 +970,6 @@ g.value = $.NOT_DRAGGING;
     g.value = $.END_DRAGGING;
-    const c = d.value;
-    c && (ft(c), X(
+    const c = p.value;
+    c && (it(c), X(
       c,
-      Ze,
+      je,
       m.value,
@@ -972,25 +979,25 @@ S.value,
     ));
-  }, ft = (c) => {
-    Tt(c, a, je), st(c, 0, 0);
   }, it = (c) => {
-    const { height: p, width: T } = c.getBoundingClientRect();
-    R.value = `${p}px`, x.value = `${T}px`, W(c, !0), c.style.transition = "";
-  }, ot = (c, p) => {
-    rt(c, (T) => {
-      const _ = d.value;
-      _ && _.style.setProperty(p, T);
+    Tt(c, a, Je), nt(c, 0, 0);
+  }, ct = (c) => {
+    const { height: d, width: T } = c.getBoundingClientRect();
+    R.value = `${d}px`, x.value = `${T}px`, W(c, !0), c.style.transition = "";
+  }, xt = (c, d) => {
+    ot(c, (T) => {
+      const _ = p.value;
+      _ && _.style.setProperty(d, T);
     });
   };
-  rt(S, (c, p) => {
-    d.value && p && g.value == $.DRAGING && !(c != null && c.droppable.isSameNode(p.droppable)) && X(
-      d.value,
-      wt,
+  ot(S, (c, d) => {
+    p.value && d && g.value == $.DRAGING && !(c != null && c.droppable.isSameNode(d.droppable)) && X(
+      p.value,
+      _t,
       m.value,
-      p
+      d
     );
-  }, { deep: !0 }), ot(x, "--fixedWidth"), ot(R, "--fixedHeight"), V(), F(d.value);
+  }, { deep: !0 }), xt(x, "--fixedWidth"), xt(R, "--fixedHeight"), V(), F(p.value);
 }
-const Ke = "vertical", _t = (t, e, n) => {
+const Qe = "vertical", $t = (t, e, n) => {
   const o = {
-    direction: Ke,
+    direction: Qe,
     handlerSelector: "draggable",
@@ -1012,11 +1019,11 @@ isDraggable: () => !0,
 };
-function nn(t, e) {
-  const n = "index", o = M(), s = (m) => (b) => Wt(m, b), i = (m) => (b, x) => Yt(m, b, x), r = s(t), a = i(t), f = () => {
+function on(t, e) {
+  const n = "index", o = M(), s = (m) => (b) => Yt(m, b), i = (m) => (b, x) => Vt(m, b, x), r = s(t), a = i(t), f = () => {
     if (o.value)
       for (const m of o.value.children) {
-        const b = m.getAttribute(n), x = Ft(b), R = m;
-        R && x >= 0 && Je(
+        const b = m.getAttribute(n), x = qt(b), R = m;
+        R && x >= 0 && Ke(
           R,
           x,
-          _t(r, a, e),
+          $t(r, a, e),
           o.value
@@ -1026,3 +1033,3 @@ );
   }, g = () => {
-    o.value && Pt(
+    o.value && zt(
       () => {
@@ -1034,3 +1041,3 @@ f();
     );
-  }, d = () => {
+  }, p = () => {
     o.value && o.value.classList.add("droppable");
@@ -1040,11 +1047,11 @@ }, E = () => {
       o.value,
-      _t(r, a, e)
+      $t(r, a, e)
     );
   };
-  return rt(o, () => {
-    d(), E(), g(), f(), j.removeObsoleteConfigs();
+  return ot(o, () => {
+    p(), E(), g(), f(), j.removeObsoleteConfigs();
   }), { parent: o };
 }
 export {
-  nn as useDragAndDrop
+  on as useDragAndDrop
 };

package.json

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

64197

increased by0.41%

Lines of code

1311

increased by0.61%

No dependency changes