vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

dist/composables/index.d.ts

@@ -14,2 +14,3 @@ export declare const HORIZONTAL = "horizontal";
     direction?: Direction;
+    handlerClass?: string;
 };

dist/composables/useDraggable.d.ts

 import { DraggableElement } from "../../index";
-import { Direction } from ".";
-export default function useDraggable(child: HTMLElement | undefined, index: number, direction: Direction, onDrop: (source: DraggableElement, destination: DraggableElement) => void, parent: HTMLElement): void;
+import { Config } from ".";
+export default function useDraggable(child: HTMLElement | undefined, index: number, config: Config, onDrop: (source: DraggableElement, destination: DraggableElement) => void, parent: HTMLElement): void;

dist/vue-fluid-dnd.js

@@ -1,32 +0,32 @@
-import { ref as M, watch as Q } from "vue";
-const Ht = (t, e, n) => {
-  if (e.index === n.index)
+import { ref as x, watch as Z } from "vue";
+const Ut = (t, e, o) => {
+  if (e.index === o.index)
     return;
   const i = t.value, [s] = i.splice(e.index, 1);
-  i.splice(n.index, 0, s);
-}, Nt = "drag", Ft = "startDrop", kt = "drop", qt = (t) => t === kt || t === Ft, Ut = (t) => {
+  i.splice(o.index, 0, s);
+}, jt = "drag", Jt = "startDrop", Kt = "drop", Qt = (t) => t === Kt || t === Jt, Zt = (t) => {
   if (t) {
-    const { scrollLeft: e, scrollTop: n } = t;
-    return { scrollLeft: e, scrollTop: n };
+    const { scrollLeft: e, scrollTop: o } = t;
+    return { scrollLeft: e, scrollTop: o };
   }
   return { scrollLeft: 0, scrollTop: 0 };
-}, jt = () => {
+}, te = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, tt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Jt = (t) => t ? parseInt(t) : -1, Kt = (t, e) => {
-  const n = getComputedStyle(t)[e];
-  if (n.match("%")) {
-    const s = tt(n.replace("%", "")), { width: c } = t.getBoundingClientRect();
-    return c * (s / 100);
+}, rt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), ee = (t) => t ? parseInt(t) : -1, ne = (t, e) => {
+  const o = getComputedStyle(t)[e];
+  if (o.match("%")) {
+    const s = rt(o.replace("%", "")), { width: u } = t.getBoundingClientRect();
+    return u * (s / 100);
   }
-  return tt(n.replace("px", ""));
-}, Tt = (t, e) => t.x1 > e.x1 ? Tt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, St = (t) => {
+  return rt(o.replace("px", ""));
+}, Mt = (t, e) => t.x1 > e.x1 ? Mt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, Bt = (t) => {
   const e = t.parentElement;
-  return !Dt(t, e);
-}, Dt = (t, e) => {
-  const n = t.getBoundingClientRect(), i = e.getBoundingClientRect(), s = gt(n, i, "vertical"), c = gt(n, i, "horizontal");
-  return s >= Math.min(n.height, i.height) / 2 && c >= Math.min(n.width, i.width) / 2;
-}, gt = (t, e, n) => {
-  const { before: i, distance: s } = w(n);
-  return Tt(
+  return !wt(t, e);
+}, wt = (t, e) => {
+  const o = t.getBoundingClientRect(), i = e.getBoundingClientRect(), s = mt(o, i, "vertical"), u = mt(o, i, "horizontal");
+  return s >= Math.min(o.height, i.height) / 2 && u >= Math.min(o.width, i.width) / 2;
+}, mt = (t, e, o) => {
+  const { before: i, distance: s } = S(o);
+  return Mt(
     {
@@ -41,15 +41,15 @@ x1: t[i],
   );
-}, it = (t, e) => t && t instanceof HTMLElement ? tt(getComputedStyle(t)[e]) : 0, L = (t, e) => t && t instanceof HTMLElement ? tt(window.getComputedStyle(t)[e]) : 0, Qt = (t, e) => {
-  const { gap: n } = w(e), { gap: i, hasGaps: s } = ct(t, n);
+}, st = (t, e) => t && t instanceof HTMLElement ? rt(getComputedStyle(t)[e]) : 0, A = (t, e) => t && t instanceof HTMLElement ? rt(window.getComputedStyle(t)[e]) : 0, oe = (t, e) => {
+  const { gap: o } = S(e), { gap: i, hasGaps: s } = dt(t, o);
   return s ? i : 0;
-}, ct = (t, e) => {
-  const n = Kt(t, e), i = window.getComputedStyle(t).display, s = n > 0 || i === "flex";
+}, dt = (t, e) => {
+  const o = ne(t, e), i = window.getComputedStyle(t).display, s = o > 0 || i === "flex";
   return {
-    gap: n,
+    gap: o,
     hasGaps: s
   };
-}, Zt = (t) => {
-  const { scrollLeft: e, scrollTop: n } = t;
-  return { scrollLeft: e, scrollTop: n };
-}, w = (t) => t == "horizontal" ? {
+}, se = (t) => {
+  const { scrollLeft: e, scrollTop: o } = t;
+  return { scrollLeft: e, scrollTop: o };
+}, S = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -84,19 +84,19 @@ afterMargin: "marginRight",
   offsetElement: "offsetTop"
-}, ut = (t) => {
-  const e = te(t), { previousSiblings: n, elementPosition: i } = ee(t);
+}, bt = (t) => {
+  const e = re(t), { previousSiblings: o, elementPosition: i } = ie(t);
   return {
-    siblings: [...e, ...n],
+    siblings: [...e, ...o],
     elementPosition: i
   };
-}, te = (t) => {
+}, re = (t) => {
   const e = [];
-  let n = t;
-  for (; n; )
-    n = n.nextElementSibling, n instanceof HTMLElement && e.push(n);
+  let o = t;
+  for (; o; )
+    o = o.nextElementSibling, o instanceof HTMLElement && e.push(o);
   return e.toReversed();
-}, ee = (t) => {
+}, ie = (t) => {
   const e = [];
-  let n = t;
-  for (; n; )
-    n = n.previousElementSibling, n instanceof HTMLElement && e.push(n);
+  let o = t;
+  for (; o; )
+    o = o.previousElementSibling, o instanceof HTMLElement && e.push(o);
   return {
@@ -107,61 +107,61 @@ previousSiblings: e,
 };
-function ne(t, e, n, i, s, c) {
-  let a = 0, g = 0;
-  if (n === i)
-    return ft({ height: a, width: g }, t, s);
-  const { sourceElement: f, targetElement: u, siblingsBetween: p, isDraggedFoward: h } = re(e, n, i), b = f.parentElement, {
-    scrollElement: y,
-    beforeMargin: E,
-    afterMargin: v,
-    distance: x,
-    gap: T
-  } = w(t), { gap: O, hasGaps: G } = ct(b, T), { beforeMarginSpace: P, space: W, afterMarginSpace: $ } = ie(
-    E,
-    v,
-    x,
+function ce(t, e, o, i, s, u) {
+  let g = 0, c = 0;
+  if (o === i)
+    return Et({ height: g, width: c }, t, s);
+  const { sourceElement: a, targetElement: f, siblingsBetween: d, isDraggedFoward: p } = ge(e, o, i), b = a.parentElement, {
+    scrollElement: D,
+    beforeMargin: C,
+    afterMargin: w,
+    distance: M,
+    gap: m
+  } = S(t), { gap: T, hasGaps: y } = dt(b, m), { beforeMarginSpace: Y, space: q, afterMarginSpace: O } = ue(
+    C,
+    w,
+    M,
+    d,
+    T,
+    y
+  ), {
+    beforeMargin: $,
+    afterMargin: z,
+    spaceBeforeDraggedElement: H
+  } = fe(
+    C,
+    w,
+    a,
+    f == null ? void 0 : f.previousElementSibling,
     p,
+    y
+  ), W = le(
+    q,
+    Y,
     O,
-    G
-  ), {
-    beforeMargin: N,
-    afterMargin: X,
-    spaceBeforeDraggedElement: S
-  } = ce(
-    E,
-    v,
-    f,
-    u == null ? void 0 : u.previousElementSibling,
-    h,
-    G
-  ), B = se(
-    W,
-    P,
     $,
-    N,
-    X,
-    O
-  ), z = oe(
-    y,
+    z,
+    T
+  ), B = ae(
+    D,
     b,
-    c
-  ), A = (h ? B - S : S - B) - z;
-  return t === "vertical" ? a = A : t === "horizontal" && (g = A), ft({ height: a, width: g }, t, s);
+    u
+  ), _ = (p ? W - H : H - W) - B;
+  return t === "vertical" ? g = _ : t === "horizontal" && (c = _), Et({ height: g, width: c }, t, s);
 }
-const oe = (t, e, n) => {
-  const i = e[t], s = n[t];
+const ae = (t, e, o) => {
+  const i = e[t], s = o[t];
   return i - s;
-}, se = (t, e, n, i, s, c) => {
-  const a = Math.max(e, s);
-  return Math.max(n, i) + t + a + c;
-}, re = (t, e, n) => {
-  const i = e < n, [s, c] = [e, n].toSorted(
-    (u, p) => u - p
-  ), a = t[e], g = t[n], f = i ? t.slice(s + 1, c + 1) : t.slice(s, c);
+}, le = (t, e, o, i, s, u) => {
+  const g = Math.max(e, s);
+  return Math.max(o, i) + t + g + u;
+}, ge = (t, e, o) => {
+  const i = e < o, [s, u] = [e, o].toSorted(
+    (f, d) => f - d
+  ), g = t[e], c = t[o], a = i ? t.slice(s + 1, u + 1) : t.slice(s, u);
   return {
-    sourceElement: a,
-    targetElement: g,
-    siblingsBetween: f,
+    sourceElement: g,
+    targetElement: c,
+    siblingsBetween: a,
     isDraggedFoward: i
   };
-}, ie = (t, e, n, i, s, c) => {
+}, ue = (t, e, o, i, s, u) => {
   if (i.length == 0)
@@ -173,26 +173,26 @@ return {
     };
-  const a = L(i[0], t);
-  let g = 0, f = 0;
-  for (let u = 0; u < i.length; u++) {
-    const p = i[u], h = p.getBoundingClientRect()[n], b = L(p, t);
-    c && (g += b), c && u > 0 ? g += s : g = Math.max(g, b), f += g + h, g = L(p, e);
+  const g = A(i[0], t);
+  let c = 0, a = 0;
+  for (let f = 0; f < i.length; f++) {
+    const d = i[f], p = d.getBoundingClientRect()[o], b = A(d, t);
+    u && (c += b), u && f > 0 ? c += s : c = Math.max(c, b), a += c + p, c = A(d, e);
   }
   return {
-    beforeMarginSpace: a,
-    space: f - a,
-    afterMarginSpace: g
+    beforeMarginSpace: g,
+    space: a - g,
+    afterMarginSpace: c
   };
-}, ft = (t, e, n) => {
-  const { scroll: i, distance: s } = w(e), c = window[i], g = n[i] - c;
-  return t[s] += g, t;
-}, ce = (t, e, n, i, s, c) => {
-  const a = s ? n.previousElementSibling : i;
-  return ae(
+}, Et = (t, e, o) => {
+  const { scroll: i, distance: s } = S(e), u = window[i], c = o[i] - u;
+  return t[s] += c, t;
+}, fe = (t, e, o, i, s, u) => {
+  const g = s ? o.previousElementSibling : i;
+  return de(
     t,
     e,
-    a,
-    n,
-    c
+    g,
+    o,
+    u
   );
-}, ae = (t, e, n, i, s) => {
+}, de = (t, e, o, i, s) => {
   if (s)
@@ -204,23 +204,23 @@ return {
     };
-  const c = L(
-    n,
+  const u = A(
+    o,
     e
-  ), a = L(i, t);
-  let g = Math.max(c, a);
+  ), g = A(i, t);
+  let c = Math.max(u, g);
   return {
-    afterMargin: c,
-    beforeMargin: a,
-    spaceBeforeDraggedElement: g
+    afterMargin: u,
+    beforeMargin: g,
+    spaceBeforeDraggedElement: c
   };
-}, le = ["onmouseup", "onmousedown", "onmousemove"], J = (t, e, n) => {
-  t && (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, Z = (t, e, n) => {
-  n && (ge(e) ? t[e] = n : t[e] = (i) => {
-    const s = Mt(i);
-    n(s);
+}, pe = ["onmouseup", "onmousedown", "onmousemove"], K = (t, e, o) => {
+  t && (o == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${o}px,${e}px)`);
+}, nt = (t, e, o) => {
+  o && (he(e) ? t[e] = o : t[e] = (i) => {
+    const s = Lt(i);
+    o(s);
   });
-}, ge = (t) => le.includes(t), Mt = (t) => {
+}, he = (t) => pe.includes(t), Lt = (t) => {
   let e = t instanceof TouchEvent ? t.touches[0] : t;
   if (!e) {
-    const { target: h } = t;
+    const { target: p } = t;
     return {
@@ -233,3 +233,3 @@ clientX: 0,
       screenY: 0,
-      target: h,
+      target: p,
       offsetX: 0,
@@ -239,41 +239,45 @@ offsetY: 0
   }
-  const { clientX: n, clientY: i, pageX: s, pageY: c, screenX: a, screenY: g, target: f } = e;
-  let u = 0, p = 0;
+  const { clientX: o, clientY: i, pageX: s, pageY: u, screenX: g, screenY: c, target: a } = e;
+  let f = 0, d = 0;
   if (t instanceof MouseEvent)
-    u = t.offsetX, p = t.offsetY;
+    f = t.offsetX, d = t.offsetY;
   else {
-    const h = t.target;
-    u = dt(e, window, "horizontal", h), p = dt(e, window, "vertical", h);
+    const p = t.target;
+    f = xt(e, window, "horizontal", p), d = xt(e, window, "vertical", p);
   }
   return {
-    clientX: n,
+    clientX: o,
     clientY: i,
     pageX: s,
-    pageY: c,
-    screenX: a,
-    screenY: g,
-    target: f,
-    offsetX: u,
-    offsetY: p
+    pageY: u,
+    screenX: g,
+    screenY: c,
+    target: a,
+    offsetX: f,
+    offsetY: d
   };
-}, dt = (t, e, n, i) => {
-  const { page: s, scroll: c, before: a, borderBeforeWidth: g } = w(n), f = i.getBoundingClientRect();
-  return t[s] - e[c] - f[a] - it(i, g);
-}, pt = (t, e, n = "ease-out") => {
-  t && (t.style.transition = `transform ${e}ms ${n}`);
-}, ue = (t, e, n) => {
+}, xt = (t, e, o, i) => {
+  const { page: s, scroll: u, before: g, borderBeforeWidth: c } = S(o), a = i.getBoundingClientRect();
+  return t[s] - e[u] - a[g] - st(i, c);
+}, St = (t, e, o = "ease-out") => {
+  t && (t.style.transition = `transform ${e}ms ${o}`);
+}, ve = (t, e, o) => {
   t && (t[e] = () => {
-    n();
+    o();
   });
-}, K = (t, e) => {
-  var n = document.createElement("style");
-  n.innerHTML = e;
-  for (const i of t.children)
-    if (i.innerHTML === e)
-      return;
-  t.appendChild(n);
-}, fe = (t) => {
-  const e = M({ offsetX: 0, offsetY: 0 }), n = M({ top: 0, left: 0 });
-  Q(
-    n,
+}, me = (t) => {
+  var e = t.querySelector("style");
+  if (!e) {
+    var o = document.createElement("style");
+    return t.appendChild(o), o;
+  }
+  return e;
+}, F = (t, e) => {
+  var i;
+  var o = me(t);
+  (i = o.sheet) == null || i.insertRule(e, o.sheet.cssRules.length);
+}, be = (t) => {
+  const e = x({ offsetX: 0, offsetY: 0 }), o = x({ top: 0, left: 0 });
+  Z(
+    o,
     (c) => {
@@ -285,49 +289,64 @@ const a = t.value;
   );
-  function i(c, a, g, f, u) {
-    const p = c.getBoundingClientRect(), h = (v) => {
+  function i(c, a, f, d, p) {
+    const b = c.getBoundingClientRect(), D = (m) => {
       const {
-        beforeMargin: x,
-        borderBeforeWidth: T,
-        before: O,
-        offset: G,
-        scroll: P,
-        page: W,
-        inner: $,
-        distance: N,
-        axis: X
-      } = w(v), S = g.value[W], B = window[P], z = window[$], V = p[N], A = it(c, T), I = L(c, x), Y = S - e.value[G];
-      if (Y >= B - V / 2 && Y <= B + z) {
-        const q = Y - n.value[O] - A - I - B;
-        return b(v), q;
+        beforeMargin: T,
+        borderBeforeWidth: y,
+        before: Y,
+        offset: q,
+        scroll: O,
+        page: $,
+        inner: z,
+        distance: H,
+        axis: W
+      } = S(m), B = f.value[$], P = window[O], _ = window[z], k = b[H], I = st(c, y), N = A(c, T), G = B - e.value[q];
+      if (G >= P - k / 2 && G <= P + _) {
+        const et = G - o.value[Y] - I - N - P;
+        return C(m), et;
       }
-      return f.value[X];
-    }, b = (v) => {
-      if (c && c.classList.contains("dragging") && a && v === u) {
-        const { before: x, distance: T, axis: O } = w(u), P = c.getBoundingClientRect()[T], W = a.getBoundingClientRect(), $ = n.value[x] - W[x] + f.value[O], X = W[T] - P, S = $ / X, B = P / X, z = 0.1, V = 0.25, A = 0.75;
-        let I = 0;
-        const Y = St(c);
-        !Y && S < V && S > -B ? I = S / V - 1 : !Y && S > A && S < 1 + B && (I = 1 / (1 - A) * (S - A));
-        const k = z * P * I;
-        y(a, u, k);
+      return d.value[W];
+    }, C = (m) => {
+      if (c && c.classList.contains("dragging") && a && m === p) {
+        const { before: T, distance: y, axis: Y } = S(p), O = c.getBoundingClientRect()[y], $ = a.getBoundingClientRect(), z = o.value[T] - $[T] + d.value[Y], W = $[y] - O, B = z / W, P = O / W, _ = 0.1, k = 0.25, I = 0.75;
+        let N = 0;
+        const G = Bt(c);
+        !G && B < k && B > -P ? N = B / k - 1 : !G && B > I && B < 1 + P && (N = 1 / (1 - I) * (B - I));
+        const tt = _ * O * N;
+        w(a, p, tt);
       }
-    }, y = (v, x, T) => {
-      T != 0 && (x === "vertical" ? v.scrollBy(0, T) : v.scrollBy(T, 0));
-    }, E = (v) => {
-      const { axis: x } = w(v);
-      f.value[x] = h(v);
+    }, w = (m, T, y) => {
+      y != 0 && (T === "vertical" ? m.scrollBy(0, y) : m.scrollBy(y, 0));
+    }, M = (m) => {
+      const { axis: T } = S(m);
+      d.value[T] = D(m);
     };
-    E("horizontal"), E("vertical");
+    M("horizontal"), M("vertical");
   }
+  const s = (c, a, f) => {
+    const { borderBeforeWidth: d, before: p } = S(c);
+    return a.getBoundingClientRect()[p] - f.getBoundingClientRect()[p] - st(t.value, d);
+  }, u = (c) => {
+    let { offsetX: a, offsetY: f, target: d } = c;
+    return t.value && d && t.value != d && (a += s(
+      "horizontal",
+      d,
+      t.value
+    ), f += s(
+      "vertical",
+      d,
+      t.value
+    )), { offsetX: a, offsetY: f };
+  };
   return {
     setTransform: i,
     updateTransformState: (c, a) => {
-      const { offsetX: g, offsetY: f } = c;
-      e.value = { offsetX: g, offsetY: f };
-      const u = (p) => {
-        const { offset: h, beforeMargin: b, page: y, borderBeforeWidth: E, scroll: v } = w(p);
-        return c[y] - e.value[h] - L(a, b) - it(a, E) - window[v];
+      const { offsetX: f, offsetY: d } = u(c);
+      e.value = { offsetX: f, offsetY: d };
+      const p = (b) => {
+        const { offset: D, beforeMargin: C, page: w, borderBeforeWidth: M, scroll: m } = S(b);
+        return c[w] - e.value[D] - A(a, C) - st(a, M) - window[m];
       };
-      n.value = {
-        top: u("vertical"),
-        left: u("horizontal")
+      o.value = {
+        top: p("vertical"),
+        left: p("horizontal")
       };
@@ -337,5 +356,5 @@ }
 };
-function ot(t, e, n, i = t.previousElementSibling, s = t.nextElementSibling) {
-  let { height: c, width: a } = de(
-    n,
+function lt(t, e, o, i = t.previousElementSibling, s = t.nextElementSibling) {
+  let { height: u, width: g } = Ee(
+    o,
     t,
@@ -345,181 +364,170 @@ i,
   );
-  return St(t) && e == Nt && (c = 0, a = 0), { height: c, width: a };
+  return Bt(t) && e == jt && (u = 0, g = 0), { height: u, width: g };
 }
-function de(t, e, n, i) {
+function Ee(t, e, o, i) {
   const {
     afterMargin: s,
-    beforeMargin: c,
-    distance: a,
-    gap: g
-  } = w(t), f = L(e, s), u = L(e, c);
-  let p = L(i, c);
-  const h = e.parentElement, { gap: b, hasGaps: y } = ct(h, g), E = e.getBoundingClientRect()[a];
-  if (y)
-    return vt(
+    beforeMargin: u,
+    distance: g,
+    gap: c
+  } = S(t), a = A(e, s), f = A(e, u);
+  let d = A(i, u);
+  const p = e.parentElement, { gap: b, hasGaps: D } = dt(p, c), C = e.getBoundingClientRect()[g];
+  if (D)
+    return Tt(
       t,
-      ht(E, u, f, b, 0)
+      Dt(C, f, a, b, 0)
     );
-  const { afterSpace: v, beforeScace: x, rest: T } = pe(
-    n,
-    p,
+  const { afterSpace: w, beforeScace: M, rest: m } = xe(
+    o,
+    d,
+    a,
     f,
-    u,
     s
   );
-  return vt(
+  return Tt(
     t,
-    ht(E, x, v, 0, T)
+    Dt(C, M, w, 0, m)
   );
 }
-const pe = (t, e, n, i, s) => {
-  const c = Math.max(e, n);
-  let a = i, g = e;
+const xe = (t, e, o, i, s) => {
+  const u = Math.max(e, o);
+  let g = i, c = e;
   if (t) {
-    const f = L(
+    const a = A(
       t,
       s
     );
-    a = Math.max(f, i), g = Math.max(g, f);
+    g = Math.max(a, i), c = Math.max(c, a);
   }
-  return { afterSpace: c, beforeScace: a, rest: g };
-}, ht = (t, e, n, i, s) => t + e + n + i - s, vt = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, mt = "draggable", he = "droppable", st = "temp-child", bt = "dragging", Et = "drag", rt = "startDrag", xt = "startDrop";
-function ve(t, e, n, i, s) {
-  const c = M(
+  return { afterSpace: u, beforeScace: g, rest: c };
+}, Dt = (t, e, o, i, s) => t + e + o + i - s, Tt = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, Q = "draggable", ot = "handler-class", gt = "dragging-handler-class", Se = "droppable", ut = "temp-child", De = "dragging", yt = "drag", ft = "startDrag", Ct = "startDrop";
+function Te(t, e, o, i, s) {
+  const { handlerClass: u = Q, direction: g = "vertical" } = o, c = x(
     0
     /* NOT_DRAGGING */
-  ), a = M(t), g = M(e), f = M({ x: 0, y: 0 }), u = M({ scrollLeft: 0, scrollTop: 0 }), p = M({ scrollY: 0, scrollX: 0 }), h = 200, b = M({ pageX: 0, pageY: 0 }), y = M({ scrollLeft: 0, scrollTop: 0 }), E = M(""), v = M(""), x = "cubic-bezier(0.2, 0, 0, 1)", { setTransform: T, updateTransformState: O } = fe(a), G = () => {
-    a.value && a.value.classList.add(mt);
-  }, P = () => {
-    K(
+  ), a = x(t), f = x(e), d = x({ x: 0, y: 0 }), p = x({ scrollLeft: 0, scrollTop: 0 }), b = x({ scrollY: 0, scrollX: 0 }), D = 200, C = x({ pageX: 0, pageY: 0 }), w = x({ scrollLeft: 0, scrollTop: 0 }), M = x(""), m = x(""), T = "cubic-bezier(0.2, 0, 0, 1)", { setTransform: y, updateTransformState: Y } = be(a), q = () => {
+    a.value && a.value.classList.add(Q);
+  }, O = () => {
+    if (a.value) {
+      const n = a.value.querySelector(`.${u}`);
+      n ? n.classList.add(ot) : a.value.classList.add(ot);
+    }
+  }, $ = () => {
+    F(
       s,
-      `.draggable {  
-      box-sizing: border-box !important; 
-      touch-action: none; 
-      cursor: grab; 
-      user-select: none;
-      -webkit-user-select: none;
-    }`
-    ), K(
+      `.${Q} { box-sizing: border-box !important; touch-action: none; user-select: none; -webkit-user-select: none;}`
+    ), F(s, `.${ot} { cursor: grab;}`), O(), F(
       s,
-      `.draggable * {
+      `.${Q} *>:not(.${ot}) {
         pointer-events: none;
       }`
-    ), K(
+    ), F(
       s,
-      `.temp-child {
-        box-sizing: border-box !important;
-        touch-action: none;
-        pointer-events: none;
-      }`
-    ), K(
+      ".temp-child { box-sizing: border-box !important; touch-action: none; pointer-events: none; }"
+    ), F(
       s,
-      `.droppable {
-      box-sizing: border-box !important;
-      position: relative;
-    }`
-    ), K(
+      ".droppable { box-sizing: border-box !important; position: relative; }"
+    ), F(
       s,
-      `.dragging {
-      position: fixed;
-      z-index: 5000;
-      cursor: grabbing !important;
-      width: var(--fixedWidth) !important;
-      height: var(--fixedHeight) !important;
-    }`
-    ), G();
-  }, W = (o) => new MutationObserver((r) => {
+      ".dragging { position: fixed; z-index: 5000; width: var(--fixedWidth) !important; height: var(--fixedHeight) !important;}"
+    ), F(
+      s,
+      `.${gt} { cursor: grabbing !important; }`
+    ), q();
+  }, z = (n) => new MutationObserver((r) => {
     r.forEach(() => {
-      o();
+      n();
     });
-  }), $ = (o) => {
-    o && (o.style.transition = "", o.style.transform = "");
-  }, N = (o) => {
-    o && (Z(
-      o,
+  }), H = (n) => {
+    n && (n.style.transition = "", n.style.transform = "");
+  }, W = (n) => {
+    n && (nt(
+      n,
       "onmousedown",
-      B("mousemove", "onmouseup")
-    ), Z(
-      o,
+      _("mousemove", "onmouseup")
+    ), nt(
+      n,
       "ontouchstart",
-      B("touchmove", "ontouchend")
-    )), o != null && o.parentElement && (o == null || o.parentElement.classList.add(he));
-  }, X = function(o) {
-    c.value === 1 ? V(o) : c.value === 2 && Y(o);
-  }, S = (o) => {
-    const r = Mt(o);
-    X(r);
-  }, B = (o, r) => () => {
+      _("touchmove", "ontouchend")
+    )), n != null && n.parentElement && (n == null || n.parentElement.classList.add(Se));
+  }, B = function(n) {
+    c.value === 1 ? I(n) : c.value === 2 && tt(n);
+  }, P = (n) => {
+    const r = Lt(n);
+    B(r);
+  }, _ = (n, r) => () => {
     const l = a.value;
-    y.value = Zt(s), c.value === 0 && (c.value = 1, document.addEventListener(o, S), ue(s, "onscroll", k), l && Z(
+    w.value = se(s), c.value === 0 && (c.value = 1, document.addEventListener(n, P), ve(s, "onscroll", et), l && nt(
       l,
       r,
-      z(o, l, r)
+      k(n, l, r)
     ));
-  }, z = (o, r, l) => () => {
-    _t(), document.removeEventListener(o, S), s.onscroll = null, Z(r, l, null);
-  }, V = (o) => {
+  }, k = (n, r, l) => () => {
+    Ht(), document.removeEventListener(n, P), s.onscroll = null, nt(r, l, null);
+  }, I = (n) => {
     const r = a.value;
-    r && (A(r), I(r), q(r, rt), O(o, r), zt(r));
-  }, A = (o) => {
-    u.value = Ut(o.parentElement), p.value = jt(), c.value = 2;
-  }, I = (o) => {
-    let r = ot(
-      o,
-      rt,
-      n
+    r && (N(r), G(r), it(r, ft), Y(n, r), Ft(r));
+  }, N = (n) => {
+    p.value = Zt(n.parentElement), b.value = te(), c.value = 2;
+  }, G = (n) => {
+    let r = lt(
+      n,
+      ft,
+      g
     );
     var l = document.createElement("div");
-    l.classList.add(st);
-    const d = Qt(s, n), { distance: m } = w(n);
-    r[m] -= d, l.style.height = `${r.height}px`, l.style.minWidth = `${r.width}px`, s.appendChild(l);
-  }, Y = (o) => {
-    const { pageX: r, pageY: l } = o;
-    b.value = { pageX: r, pageY: l }, k();
-  }, k = () => {
-    const o = a.value;
-    T(o, s, b, f, n), q(o, Et);
-  }, q = (o, r) => {
+    l.classList.add(ut);
+    const h = oe(s, g), { distance: v } = S(g);
+    r[v] -= h, l.style.height = `${r.height}px`, l.style.minWidth = `${r.width}px`, s.appendChild(l);
+  }, tt = (n) => {
+    const { pageX: r, pageY: l } = n;
+    C.value = { pageX: r, pageY: l }, et();
+  }, et = () => {
+    const n = a.value;
+    y(n, s, C, d, g), it(n, yt);
+  }, it = (n, r) => {
     let l = { height: 0, width: 0 };
-    l = ot(o, r, n);
-    const { siblings: d, elementPosition: m } = ut(o);
-    qt(r) ? Yt(
-      o,
+    l = lt(n, r, g);
+    const { siblings: h, elementPosition: v } = bt(n);
+    Qt(r) ? zt(
+      n,
       r,
-      d,
-      m,
+      h,
+      v,
       l
-    ) : yt(o, r, d, l);
-  }, yt = (o, r, l, d) => {
-    const m = at(o);
-    for (const [C, R] of l.entries()) {
-      if (!R.classList.contains(mt))
+    ) : Rt(n, r, h, l);
+  }, Rt = (n, r, l, h) => {
+    const v = pt(n);
+    for (const [L, R] of l.entries()) {
+      if (!R.classList.contains(Q))
         continue;
-      if (!m) {
-        const D = Wt(
+      if (!v) {
+        const E = Xt(
+          g,
           n,
-          o,
           R,
-          d
+          h
         );
-        if (D)
-          d = D;
+        if (E)
+          h = E;
         else
           continue;
       }
-      const _ = l.length - C;
-      Ot(d, _), r === rt ? Bt(R, d) : r === Et && Ct(R, d);
+      const X = l.length - L;
+      Gt(h, X), r === ft ? At(R, h) : r === yt && Pt(R, h);
     }
-  }, Bt = (o, r) => {
-    const { width: l, height: d } = r;
-    J(o, d, l);
-  }, Ct = (o, r) => {
-    const { width: l, height: d } = r;
-    J(o, d, l), pt(o, h, x);
-  }, Rt = (o) => {
-    const { siblings: r } = ut(o);
-    for (const l of [...r, o]) {
-      const d = W(() => {
-        $(l), d.disconnect();
+  }, At = (n, r) => {
+    const { width: l, height: h } = r;
+    K(n, h, l);
+  }, Pt = (n, r) => {
+    const { width: l, height: h } = r;
+    K(n, h, l), St(n, D, T);
+  }, Ot = (n) => {
+    const { siblings: r } = bt(n);
+    for (const l of [...r, n]) {
+      const h = z(() => {
+        H(l), h.disconnect();
       });
-      d.observe(o, {
+      h.observe(n, {
         attributes: !0,
@@ -529,7 +537,7 @@ attributeFilter: ["style"]
     }
-  }, Lt = (o, r, l) => {
+  }, Wt = (n, r, l) => {
     setTimeout(() => {
-      Pt(), i(
+      $t(), i(
         {
-          index: o
+          index: n
         },
@@ -539,69 +547,69 @@ {
         }
-      ), Gt(l), Rt(l);
-    }, h);
-  }, At = (o, r, l, d) => {
-    J(r, l.height, l.width), J(
-      o,
-      d.height,
-      d.width
+      ), Nt(l), Ot(l);
+    }, D);
+  }, _t = (n, r, l, h) => {
+    K(r, l.height, l.width), K(
+      n,
+      h.height,
+      h.width
     );
-  }, Pt = () => {
-    var o = s.querySelectorAll(`.${st}`);
-    o.forEach((r) => {
+  }, $t = () => {
+    var n = s.querySelectorAll(`.${ut}`);
+    n.forEach((r) => {
       s.removeChild(r);
     });
-  }, Ot = (o, r) => {
-    const { distance: l } = w(n);
-    o[l] == 0 ? g.value = Math.max(g.value, r) : g.value = Math.min(g.value, r - 1);
-  }, Wt = (o, r, l, d) => {
-    const { before: m, distance: C } = w(o), R = r.getBoundingClientRect(), _ = l.getBoundingClientRect(), D = R[m], H = R[C], F = _[m], U = _[C], j = F + U / 2;
+  }, Gt = (n, r) => {
+    const { distance: l } = S(g);
+    n[l] == 0 ? f.value = Math.max(f.value, r) : f.value = Math.min(f.value, r - 1);
+  }, Xt = (n, r, l, h) => {
+    const { before: v, distance: L } = S(n), R = r.getBoundingClientRect(), X = l.getBoundingClientRect(), E = R[v], V = R[L], U = X[v], j = X[L], J = U + j / 2;
     if (l.getAnimations().length !== 0)
       return;
-    const et = F + U, nt = D + H, Vt = D >= F && D <= et, It = nt >= F && nt <= et;
-    return Vt && D > j || It && nt > j || D > et ? { height: 0, width: 0 } : d;
-  }, Xt = (o, r, l) => {
-    const m = at(o) ? r : g.value, C = () => r < m ? [m, m + 1] : r > m ? [m - 1, m] : [m - 1, m + 1], [R, _] = C(), D = l[R] ?? null, H = l[_] ?? null;
+    const ct = U + j, at = E + V, qt = E >= U && E <= ct, kt = at >= U && at <= ct;
+    return qt && E > J || kt && at > J || E > ct ? { height: 0, width: 0 } : h;
+  }, Yt = (n, r, l) => {
+    const v = pt(n) ? r : f.value, L = () => r < v ? [v, v + 1] : r > v ? [v - 1, v] : [v - 1, v + 1], [R, X] = L(), E = l[R] ?? null, V = l[X] ?? null;
     return {
-      previousElement: D,
-      nextElement: H,
-      targetIndex: m
+      previousElement: E,
+      nextElement: V,
+      targetIndex: v
     };
-  }, Yt = (o, r, l, d, m) => {
-    const C = l.toReversed();
-    C.splice(d, 0, o);
-    const { previousElement: R, nextElement: _, targetIndex: D } = Xt(o, d, C);
-    m = ot(
-      o,
+  }, zt = (n, r, l, h, v) => {
+    const L = l.toReversed();
+    L.splice(h, 0, n);
+    const { previousElement: R, nextElement: X, targetIndex: E } = Yt(n, h, L);
+    v = lt(
+      n,
       r,
-      n,
+      g,
       R,
-      _
+      X
     );
-    const H = a.value;
-    if (H) {
-      for (const [F, U] of l.toReversed().entries()) {
-        let j = m;
-        if (D - 1 >= F && (j = { height: 0, width: 0 }), r === xt && !U.classList.contains(st)) {
-          const lt = ne(
-            n,
-            C,
-            d,
-            D,
-            p.value,
-            y.value
+    const V = a.value;
+    if (V) {
+      for (const [U, j] of l.toReversed().entries()) {
+        let J = v;
+        if (E - 1 >= U && (J = { height: 0, width: 0 }), r === Ct && !j.classList.contains(ut)) {
+          const vt = ce(
+            g,
+            L,
+            h,
+            E,
+            b.value,
+            w.value
           );
-          At(
-            H,
-            U,
+          _t(
+            V,
             j,
-            lt
+            J,
+            vt
           );
         }
       }
-      Lt(d, D, H);
+      Wt(h, E, V);
     }
-  }, at = (o) => {
-    const r = o.parentElement;
-    return !Dt(o, r);
-  }, _t = () => {
+  }, pt = (n) => {
+    const r = n.parentElement;
+    return !wt(n, r);
+  }, Ht = () => {
     if (c.value !== 2) {
@@ -612,57 +620,67 @@ c.value = 0;
     c.value = 3;
-    const o = a.value;
-    o && ($t(o), q(o, xt));
-  }, Gt = (o) => {
-    c.value = 0, o.classList.remove(bt), o.style.transform = "", o.style.transition = "", o.style.top = "", o.style.left = "", v.value = "", E.value = "";
-  }, $t = (o) => {
-    pt(o, h), J(o, 0, 0);
-  }, zt = (o) => {
-    const { height: r, width: l } = o.getBoundingClientRect();
-    v.value = `${r}px`, E.value = `${l}px`, o.classList.add(bt), o.style.transition = "";
+    const n = a.value;
+    n && (Vt(n), it(n, Ct));
+  }, It = (n) => {
+    if (!a.value)
+      return;
+    const r = a.value.querySelector(`.${u}`);
+    r ? r.classList.toggle(gt, n) : a.value.classList.toggle(gt, n);
+  }, ht = (n, r) => {
+    n.classList.toggle(De, r), It(r);
+  }, Nt = (n) => {
+    c.value = 0, ht(n, !1), n.style.transform = "", n.style.transition = "", n.style.top = "", n.style.left = "", m.value = "", M.value = "";
+  }, Vt = (n) => {
+    St(n, D), K(n, 0, 0);
+  }, Ft = (n) => {
+    const { height: r, width: l } = n.getBoundingClientRect();
+    m.value = `${r}px`, M.value = `${l}px`, ht(n, !0), n.style.transition = "";
   };
-  Q(
-    f,
-    (o) => {
+  Z(
+    d,
+    (n) => {
       const r = a.value;
-      r && (r.style.transform = `translate( ${o.x}px, ${o.y}px)`);
+      r && (r.style.transform = `translate( ${n.x}px, ${n.y}px)`);
     },
     { deep: !0 }
-  ), Q(E, (o) => {
+  ), Z(M, (n) => {
     const r = a.value;
-    r && r.style.setProperty("--fixedWidth", o);
-  }), Q(v, (o) => {
+    r && r.style.setProperty("--fixedWidth", n);
+  }), Z(m, (n) => {
     const r = a.value;
-    r && r.style.setProperty("--fixedHeight", o);
-  }), P(), N(a.value);
+    r && r.style.setProperty("--fixedHeight", n);
+  }), $(), W(a.value);
 }
-const wt = "vertical", me = { direction: wt };
-function Te(t, e) {
-  const { direction: n = wt } = e ?? me, i = "index", s = M(), c = (u) => (p, h) => {
-    u && Ht(M(u), p, h);
-  }, a = () => {
+const ye = "vertical", Ce = "draggable", Me = {
+  direction: ye,
+  handlerClass: Ce
+};
+function Re(t, e) {
+  const o = e ?? Me, i = "index", s = x(), u = (f) => (d, p) => {
+    f && Ut(x(f), d, p);
+  }, g = () => {
     if (s.value)
-      for (const u of s.value.children) {
-        const p = u.getAttribute(i), h = Jt(p), b = u, y = c(t.value);
-        b && h >= 0 && ve(
+      for (const f of s.value.children) {
+        const d = f.getAttribute(i), p = ee(d), b = f, D = u(t.value);
+        b && p >= 0 && Te(
           b,
-          h,
-          n,
-          y,
+          p,
+          o,
+          D,
           s.value
         );
       }
-  }, g = () => {
+  }, c = () => {
     if (!s.value)
       return;
-    be(() => {
-      a();
+    Be(() => {
+      g();
     }).observe(s.value, { childList: !0 });
-  }, f = () => {
+  }, a = () => {
     s.value && s.value.classList.add("droppable");
   };
-  return Q(s, () => {
-    f(), g(), a();
+  return Z(s, () => {
+    a(), c(), g();
   }), { parent: s };
 }
-const be = (t) => new MutationObserver((e) => {
+const Be = (t) => new MutationObserver((e) => {
   e.forEach(() => {
@@ -673,3 +691,3 @@ t();
 export {
-  Te as useDragAndDrop
+  Re as useDragAndDrop
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "A Vue 3 drag and drop library to sort all kind of lists",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42914

increased by3.98%

Lines of code

868

increased by0.58%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes