vue-fluid-dnd - npm Package Compare versions

Comparing version 0.4.11 to 0.4.12

CHANGELOG.md

@@ -10,2 +10,4 @@ # Changelog
 
+## 0.4.12 - 2024-03-13
+
 ## 0.4.11 - 2024-03-09
@@ -12,0 +14,0 @@

dist/utils/EventBus.d.ts

 import { Emitter } from "mitt";
 import { InjectionKey } from "vue";
 type Events = {
-    drag: {
-        height: number;
-        width: number;
-        draggableIdEvent: string;
-        droppableId?: string;
-    };
     startDrop: {
@@ -23,13 +17,2 @@ height: number;
     };
-    drop: {
-        droppableId?: string;
-        draggableIdEvent?: string;
-        element: HTMLElement;
-    };
-    startDrag: {
-        height: number;
-        width: number;
-        draggableIdEvent: string;
-        droppableId?: string;
-    };
 };
@@ -36,0 +19,0 @@ type EventHandlers<T extends Record<string, unknown>> = {

dist/vue-fluid-dnd.js

@@ -1,19 +0,19 @@
-import { onUnmounted as jt, defineComponent as Wt, useCssVars as kt, ref as S, inject as et, onMounted as Ut, computed as Jt, watch as k, renderSlot as _t, provide as nt } from "vue";
-function Kt(e) {
-  return { all: e = e || /* @__PURE__ */ new Map(), on: function(o, r) {
+import { onUnmounted as Jt, defineComponent as Ot, useCssVars as Kt, ref as y, inject as et, onMounted as Qt, computed as Zt, watch as k, renderSlot as Wt, provide as nt } from "vue";
+function te(e) {
+  return { all: e = e || /* @__PURE__ */ new Map(), on: function(o, s) {
     var i = e.get(o);
-    i ? i.push(r) : e.set(o, [r]);
-  }, off: function(o, r) {
+    i ? i.push(s) : e.set(o, [s]);
+  }, off: function(o, s) {
     var i = e.get(o);
-    i && (r ? i.splice(i.indexOf(r) >>> 0, 1) : e.set(o, []));
-  }, emit: function(o, r) {
+    i && (s ? i.splice(i.indexOf(s) >>> 0, 1) : e.set(o, []));
+  }, emit: function(o, s) {
     var i = e.get(o);
-    i && i.slice().map(function(l) {
-      l(r);
-    }), (i = e.get("*")) && i.slice().map(function(l) {
-      l(o, r);
+    i && i.slice().map(function(c) {
+      c(s);
+    }), (i = e.get("*")) && i.slice().map(function(c) {
+      c(o, s);
     });
   } };
 }
-function Qt(e, o) {
+function ee(e, o) {
   if (e === void 0)
@@ -23,29 +23,29 @@ throw new Error("No event bus found within this context");
     e.on(i, o[i]);
-  function r() {
+  function s() {
     for (const i of Object.keys(o))
       e == null || e.off(i, o[i]);
   }
-  return jt(r), r;
+  return Jt(s), s;
 }
-const Ot = Symbol("myEventBus"), Zt = () => Kt(), te = (e) => {
+const _t = Symbol("myEventBus"), ne = () => te(), oe = (e) => {
   if (e) {
-    const { scrollLeft: o, scrollTop: r } = e;
-    return { scrollLeft: o, scrollTop: r };
+    const { scrollLeft: o, scrollTop: s } = e;
+    return { scrollLeft: o, scrollTop: s };
   }
   return { scrollLeft: 0, scrollTop: 0 };
-}, ee = () => {
+}, se = () => {
   const { scrollX: e, scrollY: o } = window;
   return { scrollX: e, scrollY: o };
-}, st = (e) => !e || e.trim().length == 0 || e == "normal" ? 0 : parseFloat(e), ne = (e, o) => {
-  const r = getComputedStyle(e)[o];
-  if (r.match("%")) {
-    const l = st(r.replace("%", "")), { width: g } = e.getBoundingClientRect();
-    return g * (l / 100);
+}, rt = (e) => !e || e.trim().length == 0 || e == "normal" ? 0 : parseFloat(e), re = (e, o) => {
+  const s = getComputedStyle(e)[o];
+  if (s.match("%")) {
+    const c = rt(s.replace("%", "")), { width: g } = e.getBoundingClientRect();
+    return g * (c / 100);
   }
-  return st(r.replace("px", ""));
-}, Mt = (e, o) => e.x1 > o.x1 ? Mt(o, e) : e.x2 < o.x1 ? 0 : e.x2 >= o.x2 ? e.x2 - e.x1 : e.x2 - o.x1, oe = (e, o) => {
-  const r = e.getBoundingClientRect(), i = o.getBoundingClientRect(), l = Mt(
+  return rt(s.replace("px", ""));
+}, Tt = (e, o) => e.x1 > o.x1 ? Tt(o, e) : e.x2 < o.x1 ? 0 : e.x2 >= o.x2 ? e.x2 - e.x1 : e.x2 - o.x1, ie = (e, o) => {
+  const s = e.getBoundingClientRect(), i = o.getBoundingClientRect(), c = Tt(
     {
-      x1: r.top,
-      x2: r.top + r.height
+      x1: s.top,
+      x2: s.top + s.height
     },
@@ -56,6 +56,6 @@ {
     }
-  ), g = Mt(
+  ), g = Tt(
     {
-      x1: r.left,
-      x2: r.left + r.width
+      x1: s.left,
+      x2: s.left + s.width
     },
@@ -67,13 +67,13 @@ {
   );
-  return l >= Math.min(r.height, i.height) / 2 && g >= Math.min(r.width, i.width) / 2;
-}, re = (e, o, r, i, l, g) => {
-  let f = 0, u = 0;
+  return c >= Math.min(s.height, i.height) / 2 && g >= Math.min(s.width, i.width) / 2;
+}, ae = (e, o, s, i, c, g) => {
+  let u = 0, p = 0;
   if (!e)
-    return { height: f, width: u };
-  if (r === i)
-    return St({ height: f, width: u }, e, l);
-  const b = L(e), x = r < i, [D, E] = [r, i].toSorted(
+    return { height: u, width: p };
+  if (s === i)
+    return Bt({ height: u, width: p }, e, c);
+  const m = L(e), x = s < i, [E, D] = [s, i].toSorted(
     (N, vt) => N - vt
-  ), p = o[r], B = o[i], w = x ? o.slice(D + 1, E + 1) : o.slice(D, E), $ = p.parentElement, {
-    scrollElement: O,
+  ), d = o[s], S = o[i], R = x ? o.slice(E + 1, D + 1) : o.slice(E, D), $ = d.parentElement, {
+    scrollElement: _,
     beforeMargin: X,
@@ -83,18 +83,18 @@ afterMargin: z,
     gap: F
-  } = b, { gap: U, hasGaps: J } = Tt($, F), { beforeMargin: K, space: at, afterMargin: lt } = ie(
+  } = m, { gap: U, hasGaps: J } = yt($, F), { beforeMargin: K, space: at, afterMargin: ct } = le(
     X,
     z,
     G,
-    w,
+    R,
     U,
     J
   ), {
-    beforeMargin: ct,
+    beforeMargin: lt,
     afterMargin: gt,
     spaceBeforeDraggedElement: ut
-  } = se(
+  } = ce(
     X,
     z,
-    p,
-    B == null ? void 0 : B.previousElementSibling,
+    d,
+    S == null ? void 0 : S.previousElementSibling,
     x,
@@ -104,22 +104,22 @@ J
   let Q = Math.max(K, gt);
-  const pt = Math.max(lt, ct) + at + Q + U, dt = $[O], ht = g[O], Z = dt - ht;
+  const pt = Math.max(ct, lt) + at + Q + U, dt = $[_], ht = g[_], Z = dt - ht;
   let Y = pt - ut;
-  return Y = x ? Y : -Y, e === "vertical" ? f = Y - Z : e === "horizontal" && (u = Y - Z), St({ height: f, width: u }, e, l);
-}, St = (e, o, r) => {
-  const { scroll: i } = L(o), l = window[i], f = r[i] - l;
-  return o === "vertical" ? e.height += f : o === "horizontal" && (e.width += f), e;
-}, se = (e, o, r, i, l, g) => l ? Bt(
+  return Y = x ? Y : -Y, e === "vertical" ? u = Y - Z : e === "horizontal" && (p = Y - Z), Bt({ height: u, width: p }, e, c);
+}, Bt = (e, o, s) => {
+  const { scroll: i } = L(o), c = window[i], u = s[i] - c;
+  return o === "vertical" ? e.height += u : o === "horizontal" && (e.width += u), e;
+}, ce = (e, o, s, i, c, g) => c ? Ct(
   e,
   o,
-  r.previousElementSibling,
-  r,
+  s.previousElementSibling,
+  s,
   g
-) : Bt(
+) : Ct(
   e,
   o,
   i,
-  r,
+  s,
   g
-), Bt = (e, o, r, i, l) => {
-  if (l)
+), Ct = (e, o, s, i, c) => {
+  if (c)
     return {
@@ -130,13 +130,13 @@ afterMargin: 0,
     };
-  const g = C(
-    r,
+  const g = B(
+    s,
     o
-  ), f = C(i, e);
-  let u = Math.max(g, f);
+  ), u = B(i, e);
+  let p = Math.max(g, u);
   return {
     afterMargin: g,
-    beforeMargin: f,
-    spaceBeforeDraggedElement: u
+    beforeMargin: u,
+    spaceBeforeDraggedElement: p
   };
-}, ie = (e, o, r, i, l, g) => {
+}, le = (e, o, s, i, c, g) => {
   if (i.length == 0)
@@ -148,51 +148,51 @@ return {
     };
-  const f = C(i[0], e);
-  let u = 0, b = 0;
+  const u = B(i[0], e);
+  let p = 0, m = 0;
   for (let x = 0; x < i.length; x++) {
-    const D = i[x], E = D.getBoundingClientRect()[r];
-    g && (u = u + C(D, e)), g && x > 0 ? u += l : u = Math.max(
-      u,
-      C(D, e)
-    ), b += u + E, u = C(D, o);
+    const E = i[x], D = E.getBoundingClientRect()[s];
+    g && (p = p + B(E, e)), g && x > 0 ? p += c : p = Math.max(
+      p,
+      B(E, e)
+    ), m += p + D, p = B(E, o);
   }
   return {
-    beforeMargin: f,
-    space: b - f,
-    afterMargin: u
+    beforeMargin: u,
+    space: m - u,
+    afterMargin: p
   };
-}, it = (e, o) => e && e instanceof HTMLElement ? st(getComputedStyle(e)[o]) : 0, C = (e, o) => e && e instanceof HTMLElement ? st(window.getComputedStyle(e)[o]) : 0, ae = (e, o) => {
-  const { gap: r } = L(o), { gap: i, hasGaps: l } = Tt(e, r);
-  return l ? i : 0;
-}, Tt = (e, o) => {
-  const r = ne(e, o), i = window.getComputedStyle(e).display, l = r > 0 || i === "flex";
+}, it = (e, o) => e && e instanceof HTMLElement ? rt(getComputedStyle(e)[o]) : 0, B = (e, o) => e && e instanceof HTMLElement ? rt(window.getComputedStyle(e)[o]) : 0, ge = (e, o) => {
+  const { gap: s } = L(o), { gap: i, hasGaps: c } = yt(e, s);
+  return c ? i : 0;
+}, yt = (e, o) => {
+  const s = re(e, o), i = window.getComputedStyle(e).display, c = s > 0 || i === "flex";
   return {
-    gap: r,
-    hasGaps: l
+    gap: s,
+    hasGaps: c
   };
-}, le = (e, o, r, i) => {
-  let l = 0, g = 0;
+}, ue = (e, o, s, i) => {
+  let c = 0, g = 0;
   if (!e)
-    return { width: g, height: l };
-  const f = L(e), { afterMargin: u, beforeMargin: b } = f, x = C(o, u), D = C(o, b);
-  let E = C(i, b), p = x, B = D, w = E;
-  const $ = o.parentElement, O = f.gap, { gap: X, hasGaps: z } = Tt($, O), G = o.getBoundingClientRect()[f.distance];
+    return { width: g, height: c };
+  const u = L(e), { afterMargin: p, beforeMargin: m } = u, x = B(o, p), E = B(o, m);
+  let D = B(i, m), d = x, S = E, R = D;
+  const $ = o.parentElement, _ = u.gap, { gap: X, hasGaps: z } = yt($, _), G = o.getBoundingClientRect()[u.distance];
   if (z)
-    return Ct(
+    return Rt(
       e,
-      G + B + p + X
+      G + S + d + X
     );
-  if (p = Math.max(E, x), r) {
-    const F = C(
-      r,
-      u
+  if (d = Math.max(D, x), s) {
+    const F = B(
+      s,
+      p
     );
-    B = Math.max(F, D), w = Math.max(w, F);
+    S = Math.max(F, E), R = Math.max(R, F);
   }
-  return Ct(
+  return Rt(
     e,
-    G + B + p - w
+    G + S + d - R
   );
-}, Ct = (e, o) => e == "horizontal" ? { width: o, height: 0 } : { width: 0, height: o }, ce = (e) => {
-  const { scrollLeft: o, scrollTop: r } = e;
-  return { scrollLeft: o, scrollTop: r };
+}, Rt = (e, o) => e == "horizontal" ? { width: o, height: 0 } : { width: 0, height: o }, fe = (e) => {
+  const { scrollLeft: o, scrollTop: s } = e;
+  return { scrollLeft: o, scrollTop: s };
 }, L = (e) => e == "horizontal" ? {
@@ -228,13 +228,13 @@ beforeMargin: "marginLeft",
   offsetElement: "offsetTop"
-}, ge = ["onmouseup", "onmousedown", "onmousemove"], j = (e, o, r) => {
-  e && (r == 0 && o == 0 ? e.style.transform = "" : e.style.transform = `translate(${r}px,${o}px)`);
-}, ot = (e, o, r) => {
-  r && (ue(o) ? e[o] = r : e[o] = (i) => {
-    const l = Xt(i);
-    r(l);
+}, pe = ["onmouseup", "onmousedown", "onmousemove"], j = (e, o, s) => {
+  e && (s == 0 && o == 0 ? e.style.transform = "" : e.style.transform = `translate(${s}px,${o}px)`);
+}, ot = (e, o, s) => {
+  s && (de(o) ? e[o] = s : e[o] = (i) => {
+    const c = Xt(i);
+    s(c);
   });
-}, ue = (e) => ge.includes(e), Xt = (e) => {
+}, de = (e) => pe.includes(e), Xt = (e) => {
   let o = e instanceof TouchEvent ? e.touches[0] : e;
   if (!o) {
-    const { target: E } = e;
+    const { target: D } = e;
     return {
@@ -247,3 +247,3 @@ clientX: 0,
       screenY: 0,
-      target: E,
+      target: D,
       offsetX: 0,
@@ -253,28 +253,28 @@ offsetY: 0
   }
-  const { clientX: r, clientY: i, pageX: l, pageY: g, screenX: f, screenY: u, target: b } = o;
-  let x = 0, D = 0;
+  const { clientX: s, clientY: i, pageX: c, pageY: g, screenX: u, screenY: p, target: m } = o;
+  let x = 0, E = 0;
   if (e instanceof MouseEvent)
-    x = e.offsetX, D = e.offsetY;
+    x = e.offsetX, E = e.offsetY;
   else {
-    const E = e.target, p = E.getBoundingClientRect();
-    x = l - window.scrollX - p.left - it(E, "borderLeftWidth"), D = g - window.scrollY - p.top - it(E, "borderTopWidth");
+    const D = e.target, d = D.getBoundingClientRect();
+    x = c - window.scrollX - d.left - it(D, "borderLeftWidth"), E = g - window.scrollY - d.top - it(D, "borderTopWidth");
   }
   return {
-    clientX: r,
+    clientX: s,
     clientY: i,
-    pageX: l,
+    pageX: c,
     pageY: g,
-    screenX: f,
-    screenY: u,
-    target: b,
+    screenX: u,
+    screenY: p,
+    target: m,
     offsetX: x,
-    offsetY: D
+    offsetY: E
   };
-}, Rt = (e, o, r = "ease-out") => {
-  e && (e.style.transition = `transform ${o}ms ${r}`);
-}, fe = (e, o, r) => {
+}, Lt = (e, o, s = "ease-out") => {
+  e && (e.style.transition = `transform ${o}ms ${s}`);
+}, he = (e, o, s) => {
   e && (e[o] = () => {
-    r();
+    s();
   });
-}, Et = "draggable-id", Lt = "drag", pe = "startDrag", wt = "startDrop", Pt = "drop", rt = 200, me = /* @__PURE__ */ Wt({
+}, Dt = "draggable-id", wt = "drag", Pt = "startDrag", Mt = "startDrop", ve = "drop", st = 200, Ee = /* @__PURE__ */ Ot({
   __name: "Draggable",
@@ -286,78 +286,48 @@ props: {
   setup(e) {
-    kt((t) => ({
-      "39beb3ca": O.value,
-      67252372: X.value
+    Kt((t) => ({
+      "0e214549": _.value,
+      c78f2bf8: X.value
     }));
-    const o = e, r = S(
+    const o = e, s = y(
       "notDragging"
       /* NOT_DRAGGING */
-    ), i = S({ top: 0, left: 0 }), l = S({ offsetX: 0, offsetY: 0 }), g = et("direction"), f = et("onDrop"), u = et("droppableId"), b = S({ x: 0, y: 0 }), x = S({ scrollLeft: 0, scrollTop: 0 }), D = S({ scrollY: 0, scrollX: 0 }), E = S({ pageX: 0, pageY: 0 });
-    let p = S();
-    const B = S(o.index), w = et(Ot), $ = S({ scrollLeft: 0, scrollTop: 0 }), O = S(""), X = S("");
-    Ut(() => {
-      Qt(w, {
-        drag: ({
-          height: t,
-          width: n,
-          draggableIdEvent: s,
-          droppableId: a
-        }) => {
-          o.draggableId == s && u === a && (j(p.value, t, n), Rt(p.value, rt, "cubic-bezier(0.2, 0, 0, 1)"));
-        },
+    ), i = y({ top: 0, left: 0 }), c = y({ offsetX: 0, offsetY: 0 }), g = et("direction"), u = et("onDrop"), p = et("droppableId"), m = y({ x: 0, y: 0 }), x = y({ scrollLeft: 0, scrollTop: 0 }), E = y({ scrollY: 0, scrollX: 0 }), D = y({ pageX: 0, pageY: 0 });
+    let d = y();
+    const S = y(o.index), R = et(_t), $ = y({ scrollLeft: 0, scrollTop: 0 }), _ = y(""), X = y("");
+    Qt(() => {
+      ee(R, {
         startDrop: ({
           height: t,
           width: n,
-          draggableIdEvent: s,
+          draggableIdEvent: r,
           droppableId: a,
-          sourceIndex: c,
-          targetIndex: d,
-          element: v,
-          sourceElementTranlation: m
+          sourceIndex: l,
+          targetIndex: f,
+          element: h,
+          sourceElementTranlation: b
         }) => {
-          if (o.draggableId == s && u === a) {
-            if (j(p.value, t, n), !f)
+          if (o.draggableId == r && p === a) {
+            if (j(d.value, t, n), !u)
               return;
             j(
-              v,
-              m.height,
-              m.width
-            ), (c === d || d === o.index) && setTimeout(() => {
-              if (T.value) {
-                var h = T.value.querySelectorAll(".temp-child");
-                h.forEach((M) => {
-                  T.value && T.value.removeChild(M);
+              h,
+              b.height,
+              b.width
+            ), (l === f || f === o.index) && setTimeout(() => {
+              if (M.value) {
+                var v = M.value.querySelectorAll(".temp-child");
+                v.forEach((w) => {
+                  M.value && M.value.removeChild(w);
                 });
               }
-              f.value(
+              u.value(
                 {
-                  index: c
+                  index: l
                 },
                 {
-                  index: d
+                  index: f
                 }
-              ), w == null || w.emit(Pt, {
-                droppableId: u,
-                element: v
-              });
-            }, rt);
+              ), It(h);
+            }, st);
           }
-        },
-        drop: ({ droppableId: t, element: n }) => {
-          if (t === u) {
-            const s = z(() => {
-              G(), s.disconnect();
-            });
-            s.observe(n, {
-              attributes: !0,
-              attributeFilter: ["style"]
-            });
-          }
-        },
-        startDrag: ({
-          height: t,
-          width: n,
-          draggableIdEvent: s,
-          droppableId: a
-        }) => {
-          o.draggableId == s && u === a && j(p.value, t, n);
         }
@@ -370,9 +340,8 @@ });
       });
-    }), G = () => {
-      const t = p.value;
+    }), G = (t) => {
       t && (t.style.transition = "", t.style.transform = "");
     }, F = (t, n) => {
-      !t && n || (p.value = t, U());
+      !t && n || (d.value = t, U());
     }, U = () => {
-      p.value && p.value.classList.add("draggable");
+      d.value && d.value.classList.add("draggable");
     }, J = (t) => {
@@ -389,3 +358,3 @@ t && (ot(
     }, K = (t) => {
-      t && t.setAttribute(Et, o.draggableId);
+      t && t.setAttribute(Dt, o.draggableId);
     }, at = {
@@ -402,46 +371,46 @@ horizontal: {
       }
-    }, lt = () => {
-      const t = p.value, n = t.getBoundingClientRect(), s = (d) => {
+    }, ct = () => {
+      const t = d.value, n = t.getBoundingClientRect(), r = (f) => {
         const {
-          beforeMargin: v,
-          borderBeforeWidth: m,
-          before: h,
-          offset: M,
-          scroll: R,
+          beforeMargin: h,
+          borderBeforeWidth: b,
+          before: v,
+          offset: w,
+          scroll: C,
           page: P,
-          inner: y,
+          inner: T,
           distance: V,
-          axis: W
-        } = L(d), A = E.value[P], _ = window[R], I = window[y], q = n[V], bt = it(t, m), Ht = C(t, v), xt = A - l.value[M];
-        if (xt >= _ - q / 2 && xt <= _ + I) {
-          const H = xt - i.value[h] - bt - Ht - _, { scrollWeight: Dt } = ct(d);
-          return b.value[W] > H ? {
+          axis: O
+        } = L(f), A = D.value[P], W = window[C], I = window[T], q = n[V], bt = it(t, b), Ut = B(t, h), xt = A - c.value[w];
+        if (xt >= W - q / 2 && xt <= W + I) {
+          const H = xt - i.value[v] - bt - Ut - W, { scrollWeight: Et } = lt(f);
+          return m.value[O] > H ? {
             newTranslate: H,
-            scrollWeight: Dt
-          } : b.value[W] < H ? {
+            scrollWeight: Et
+          } : m.value[O] < H ? {
             newTranslate: H,
-            scrollWeight: Dt
+            scrollWeight: Et
           } : {
             newTranslate: H,
-            scrollWeight: Dt
+            scrollWeight: Et
           };
         }
         return {
-          newTranslate: b.value[W],
+          newTranslate: m.value[O],
           scrollWeight: 1
         };
-      }, { newTranslate: a } = s("horizontal");
-      b.value.x = a;
-      const { newTranslate: c } = s("vertical");
-      b.value.y = c;
-    }, ct = (t) => {
-      const n = p.value;
-      if (n && n.classList.contains("dragging") && T.value && (t === g || t === void 0) && g) {
-        const s = at[g], { before: a, distance: c, axis: d } = L(g), m = n.getBoundingClientRect()[c], h = T.value.getBoundingClientRect(), M = i.value[a] - h[a] + b.value[d], P = h[c] - m, y = M / P, V = m / P, W = 0.1, A = 0.25, _ = 0.75;
+      }, { newTranslate: a } = r("horizontal");
+      m.value.x = a;
+      const { newTranslate: l } = r("vertical");
+      m.value.y = l;
+    }, lt = (t) => {
+      const n = d.value;
+      if (n && n.classList.contains("dragging") && M.value && (t === g || t === void 0) && g) {
+        const r = at[g], { before: a, distance: l, axis: f } = L(g), b = n.getBoundingClientRect()[l], v = M.value.getBoundingClientRect(), w = i.value[a] - v[a] + m.value[f], P = v[l] - b, T = w / P, V = b / P, O = 0.1, A = 0.25, W = 0.75;
         let I = 0;
         const q = tt(n);
-        !q && y < A && y > -V ? I = y / A - 1 : !q && y > _ && y < 1 + V && (I = 1 / (1 - _) * (y - _));
-        const bt = W * m * I;
-        return gt(T.value, g, bt), {
-          scrollDirection: s.after,
+        !q && T < A && T > -V ? I = T / A - 1 : !q && T > W && T < 1 + V && (I = 1 / (1 - W) * (T - W));
+        const bt = O * b * I;
+        return gt(M.value, g, bt), {
+          scrollDirection: r.after,
           scrollWeight: 1 - Math.abs(I)
@@ -451,12 +420,12 @@ };
       return { scrollDirection: "quiet", scrollWeight: 1 };
-    }, gt = (t, n, s) => {
-      s != 0 && (n === "vertical" ? t.scrollBy(0, s) : t.scrollBy(s, 0));
+    }, gt = (t, n, r) => {
+      r != 0 && (n === "vertical" ? t.scrollBy(0, r) : t.scrollBy(r, 0));
     }, ut = function(t) {
-      r.value === "startDragging" ? dt(t) : r.value === "dragging" && Z(t, !0);
+      s.value === "startDragging" ? dt(t) : s.value === "dragging" && Z(t, !0);
     }, Q = (t) => {
       const n = Xt(t);
       ut(n);
-    }, ft = (t, n) => (s) => {
-      const a = s.target;
-      T.value && ($.value = ce(T.value)), r.value === "notDragging" && (r.value = "startDragging", document.addEventListener(t, Q), fe(T.value, "onscroll", Y), a && ot(
+    }, ft = (t, n) => (r) => {
+      const a = r.target;
+      M.value && ($.value = fe(M.value)), s.value === "notDragging" && (s.value = "startDragging", document.addEventListener(t, Q), he(M.value, "onscroll", Y), a && ot(
         a,
@@ -466,149 +435,161 @@ n,
       ));
-    }, pt = (t, n, s) => (a) => {
-      var c;
-      Ft(a), document.removeEventListener(t, Q), (c = T.value) != null && c.onscroll && (T.value.onscroll = null), ot(n, s, null);
+    }, pt = (t, n, r) => (a) => {
+      var l;
+      Ht(a), document.removeEventListener(t, Q), (l = M.value) != null && l.onscroll && (M.value.onscroll = null), ot(n, r, null);
     }, dt = (t) => {
       const n = t.target;
-      x.value = te(n.parentElement), D.value = ee();
-      const { offsetX: s, offsetY: a } = t;
-      l.value = { offsetX: s, offsetY: a }, r.value = "dragging", ht(n), N(n, pe);
-      const c = (d) => {
-        const { offset: v, beforeMargin: m, page: h, borderBeforeWidth: M, scroll: R } = L(d);
-        return t[h] - l.value[v] - C(n, m) - it(n, M) - window[R];
+      x.value = oe(n.parentElement), E.value = se();
+      const { offsetX: r, offsetY: a } = t;
+      c.value = { offsetX: r, offsetY: a }, s.value = "dragging", ht(n), N(n, Pt);
+      const l = (f) => {
+        const { offset: h, beforeMargin: b, page: v, borderBeforeWidth: w, scroll: C } = L(f);
+        return t[v] - c.value[h] - B(n, b) - it(n, w) - window[C];
       };
       i.value = {
-        top: c("vertical"),
-        left: c("horizontal")
-      }, qt(n);
+        top: l("vertical"),
+        left: l("horizontal")
+      }, kt(n);
     }, ht = (t) => {
-      if (T.value) {
-        let s = mt(t, "startDrag");
+      if (M.value) {
+        let r = mt(t, "startDrag");
         var n = document.createElement("div");
         if (n.classList.add("temp-child"), g) {
-          const a = ae(T.value, g), { distance: c } = L(g);
-          s[c] -= a;
+          const a = ge(M.value, g), { distance: l } = L(g);
+          r[l] -= a;
         }
-        n.style.height = `${s.height}px`, n.style.minWidth = `${s.width}px`, T.value.appendChild(n);
+        n.style.height = `${r.height}px`, n.style.minWidth = `${r.width}px`, M.value.appendChild(n);
       }
     }, Z = (t, n = !1) => {
-      const { pageX: s, pageY: a } = t;
-      E.value = { pageX: s, pageY: a }, n && Y();
+      const { pageX: r, pageY: a } = t;
+      D.value = { pageX: r, pageY: a }, n && Y();
     }, Y = () => {
-      const t = p.value;
-      lt(), N(t, Lt);
+      const t = d.value;
+      ct(), N(t, wt);
     }, N = (t, n) => {
-      let s = { height: 0, width: 0 };
-      s = mt(t, n);
-      const { siblings: a, elementPosition: c } = Vt(t);
-      n === Pt || n === wt ? $t(
+      let r = { height: 0, width: 0 };
+      r = mt(t, n);
+      const { siblings: a, elementPosition: l } = St(t);
+      n === ve || n === Mt ? Gt(
         t,
         n,
         a,
-        c,
-        s
-      ) : vt(t, n, a, s);
-    }, vt = (t, n, s, a) => {
-      const c = tt(t);
-      for (const [d, v] of s.entries()) {
-        const m = v.getAttribute(Et) ?? "";
-        if (!m)
+        l,
+        r
+      ) : vt(t, n, a, r);
+    }, vt = (t, n, r, a) => {
+      const l = tt(t);
+      for (const [f, h] of r.entries()) {
+        if (!(h.getAttribute(Dt) ?? ""))
           continue;
-        if (!c) {
-          const M = At(
+        if (!l) {
+          const w = Vt(
             g,
             t,
-            v,
+            h,
             a
           );
-          if (M)
-            a = M;
+          if (w)
+            a = w;
           else
             continue;
         }
-        const h = s.length - d;
-        Yt(a, h), yt(n, a, m);
+        const v = r.length - f;
+        $t(a, v), n === Pt ? Yt(h, a) : n === wt && At(h, a);
       }
     }, Yt = (t, n) => {
+      const { width: r, height: a } = n;
+      j(t, a, r);
+    }, At = (t, n) => {
+      const { width: r, height: a } = n;
+      j(t, a, r), Lt(t, st, "cubic-bezier(0.2, 0, 0, 1)");
+    }, It = (t) => {
+      const { siblings: n } = St(t);
+      for (const r of [...n, t]) {
+        const a = z(() => {
+          G(r), a.disconnect();
+        });
+        a.observe(t, {
+          attributes: !0,
+          attributeFilter: ["style"]
+        });
+      }
+    }, $t = (t, n) => {
       if (!g)
         return;
-      const { distance: s } = L(g);
-      t[s] == 0 ? B.value = Math.max(B.value, n) : B.value = Math.min(B.value, n - 1);
-    }, At = (t, n, s, a) => {
+      const { distance: r } = L(g);
+      t[r] == 0 ? S.value = Math.max(S.value, n) : S.value = Math.min(S.value, n - 1);
+    }, Vt = (t, n, r, a) => {
       if (!t)
         return { height: 0, width: 0 };
-      const { before: c, distance: d } = L(t), v = n.getBoundingClientRect(), m = s.getBoundingClientRect(), h = v[c], M = v[d], R = m[c], P = m[d], y = R + P / 2;
-      if (s.getAnimations().length !== 0)
+      const { before: l, distance: f } = L(t), h = n.getBoundingClientRect(), b = r.getBoundingClientRect(), v = h[l], w = h[f], C = b[l], P = b[f], T = C + P / 2;
+      if (r.getAnimations().length !== 0)
         return;
-      const W = R + P, A = h + M, _ = h >= R && h <= W, I = A >= R && A <= W;
-      return _ && h > y || I && A > y || h > W ? { height: 0, width: 0 } : a;
-    }, It = (t, n, s) => {
-      const c = tt(t) ? n : B.value, d = () => n < c ? [c, c + 1] : [c - 1, c], [v, m] = d(), h = s[v] ?? null, M = s[m] ?? null;
+      const O = C + P, A = v + w, W = v >= C && v <= O, I = A >= C && A <= O;
+      return W && v > T || I && A > T || v > O ? { height: 0, width: 0 } : a;
+    }, zt = (t, n, r) => {
+      const l = tt(t) ? n : S.value, f = () => n < l ? [l, l + 1] : [l - 1, l], [h, b] = f(), v = r[h] ?? null, w = r[b] ?? null;
       return {
-        previousElement: h,
-        nextElement: M,
-        targetIndex: c
+        previousElement: v,
+        nextElement: w,
+        targetIndex: l
       };
-    }, $t = (t, n, s, a, c) => {
-      const d = s.toReversed();
-      d.splice(a, 0, t);
-      const { previousElement: v, nextElement: m, targetIndex: h } = It(t, a, d);
-      c = mt(
+    }, Gt = (t, n, r, a, l) => {
+      const f = r.toReversed();
+      f.splice(a, 0, t);
+      const { previousElement: h, nextElement: b, targetIndex: v } = zt(t, a, f);
+      l = mt(
         t,
         n,
-        v,
-        m
+        h,
+        b
       );
-      for (const [M, R] of s.toReversed().entries()) {
-        const P = R.getAttribute(Et) ?? "";
-        let y = c;
-        h - 1 >= M && (y = { height: 0, width: 0 });
-        const V = re(
+      for (const [w, C] of r.toReversed().entries()) {
+        const P = C.getAttribute(Dt) ?? "";
+        let T = l;
+        v - 1 >= w && (T = { height: 0, width: 0 });
+        const V = ae(
           g,
-          d,
+          f,
           a,
-          h,
-          D.value,
+          v,
+          E.value,
           $.value
         );
-        yt(
+        Ft(
           n,
-          y,
+          T,
           P,
           a,
-          h,
+          v,
           V
         );
       }
-    }, yt = (t, n, s, a, c, d) => {
-      const v = p.value;
-      t === wt && a !== void 0 && c !== void 0 && d !== void 0 && v ? w == null || w.emit(t, {
-        droppableId: u,
-        draggableIdEvent: s,
+    }, Ft = (t, n, r, a, l, f) => {
+      const h = d.value;
+      t === Mt && a !== void 0 && l !== void 0 && f !== void 0 && h && (R == null || R.emit(t, {
+        droppableId: p,
+        draggableIdEvent: r,
         ...n,
         sourceIndex: a,
-        targetIndex: c,
-        element: v,
-        sourceElementTranlation: d
-      }) : w == null || w.emit(t, {
-        droppableId: u,
-        draggableIdEvent: s,
-        ...n
-      });
-    }, Vt = (t) => {
-      const n = zt(t), { previousSiblings: s, elementPosition: a } = Gt(t);
+        targetIndex: l,
+        element: h,
+        sourceElementTranlation: f
+      }));
+    }, St = (t) => {
+      const n = Nt(t), { previousSiblings: r, elementPosition: a } = qt(t);
       return {
-        siblings: [...n, ...s],
+        siblings: [...n, ...r],
         elementPosition: a
       };
-    }, zt = (t) => {
+    }, Nt = (t) => {
       const n = [];
-      let s = t;
-      for (; s; )
-        s = s.nextElementSibling, s instanceof HTMLElement && n.push(s);
+      let r = t;
+      for (; r; )
+        r = r.nextElementSibling, r instanceof HTMLElement && n.push(r);
       return n.toReversed();
-    }, Gt = (t) => {
+    }, qt = (t) => {
       const n = [];
-      let s = t;
-      for (; s; )
-        s = s.previousElementSibling, s instanceof HTMLElement && n.push(s);
+      let r = t;
+      for (; r; )
+        r = r.previousElementSibling, r instanceof HTMLElement && n.push(r);
       return {
@@ -618,31 +599,31 @@ previousSiblings: n,
       };
-    }, mt = (t, n, s = t.previousElementSibling, a = t.nextElementSibling) => {
-      let { height: c, width: d } = le(
+    }, mt = (t, n, r = t.previousElementSibling, a = t.nextElementSibling) => {
+      let { height: l, width: f } = ue(
         g,
         t,
-        s,
+        r,
         a
       );
-      return tt(t) && n == Lt && (c = 0, d = 0), { height: c, width: d };
+      return tt(t) && n == wt && (l = 0, f = 0), { height: l, width: f };
     }, tt = (t) => {
       const n = t.parentElement;
-      return !oe(t, n);
-    }, Ft = (t) => {
-      if (r.value !== "dragging") {
-        r.value = "notDragging";
+      return !ie(t, n);
+    }, Ht = (t) => {
+      if (s.value !== "dragging") {
+        s.value = "notDragging";
         return;
       }
-      r.value = "endDragging";
+      s.value = "endDragging";
       const n = t.target;
-      Nt(n), N(n, wt), setTimeout(() => {
-        r.value = "notDragging", n.classList.remove("dragging"), n.style.transform = "", n.style.transition = "", n.style.top = "", n.style.left = "", X.value = "", O.value = "";
-      }, rt);
-    }, Nt = (t) => {
-      Rt(t, rt), j(t, 0, 0);
-    }, qt = (t) => {
-      const { height: n, width: s } = t.getBoundingClientRect();
-      X.value = `${n}px`, O.value = `${s}px`, t.classList.add("dragging"), t.style.transition = "";
-    }, T = Jt(() => {
+      jt(n), N(n, Mt), setTimeout(() => {
+        s.value = "notDragging", n.classList.remove("dragging"), n.style.transform = "", n.style.transition = "", n.style.top = "", n.style.left = "", X.value = "", _.value = "";
+      }, st);
+    }, jt = (t) => {
+      Lt(t, st), j(t, 0, 0);
+    }, kt = (t) => {
+      const { height: n, width: r } = t.getBoundingClientRect();
+      X.value = `${n}px`, _.value = `${r}px`, t.classList.add("dragging"), t.style.transition = "";
+    }, M = Zt(() => {
       var n;
-      const t = (n = p.value) == null ? void 0 : n.parentElement;
+      const t = (n = d.value) == null ? void 0 : n.parentElement;
       if (t)
@@ -652,3 +633,3 @@ return t;
     return k(
-      p,
+      d,
       (t) => {
@@ -661,3 +642,3 @@ J(t);
       (t) => {
-        p.value && K(p.value);
+        d.value && K(d.value);
       }
@@ -667,3 +648,3 @@ ), k(
       (t) => {
-        const n = p.value;
+        const n = d.value;
         n && (n.style.top = `${t.top}px`, n.style.left = `${t.left}px`);
@@ -673,16 +654,16 @@ },
     ), k(
-      b,
+      m,
       (t) => {
-        const n = p.value;
+        const n = d.value;
         n && (n.style.transform = `translate( ${t.x}px, ${t.y}px)`);
       },
       { deep: !0 }
-    ), (t, n) => _t(t.$slots, "default", { setRef: F });
+    ), (t, n) => Wt(t.$slots, "default", { setRef: F });
   }
-}), de = (e, o, r) => {
-  if (o.index === r.index)
+}), me = (e, o, s) => {
+  if (o.index === s.index)
     return;
-  const i = e.value, [l] = i.splice(o.index, 1);
-  i.splice(r.index, 0, l);
-}, be = /* @__PURE__ */ Wt({
+  const i = e.value, [c] = i.splice(o.index, 1);
+  i.splice(s.index, 0, c);
+}, De = /* @__PURE__ */ Ot({
   __name: "Droppable",
@@ -696,19 +677,19 @@ props: {
   setup(e) {
-    const o = e, r = (f) => (u, b) => {
-      f && de(S(f), u, b);
-    }, l = S(o.items ? r(o.items) : o.onDrop ? o.onDrop : () => {
+    const o = e, s = (u) => (p, m) => {
+      u && me(y(u), p, m);
+    }, c = y(o.items ? s(o.items) : o.onDrop ? o.onDrop : () => {
     });
     k(
       () => o.items,
-      (f) => {
-        f && (l.value = r(f));
+      (u) => {
+        u && (c.value = s(u));
       }
     );
-    const g = Zt();
-    return nt(Ot, g), nt("direction", o.direction), nt("droppableId", o.droppableId), nt("onDrop", l), (f, u) => _t(f.$slots, "default");
+    const g = ne();
+    return nt(_t, g), nt("direction", o.direction), nt("droppableId", o.droppableId), nt("onDrop", c), (u, p) => Wt(u.$slots, "default");
   }
 });
 export {
-  me as Draggable,
-  be as Droppable
+  Ee as Draggable,
+  De as Droppable
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "type": "module",
@@ -5,0 +5,0 @@ "homepage": "https://vue-fluid-dnd.netlify.app",

README.md

@@ -84,3 +84,2 @@ <h1 align="center">
 
-<!-- TODO: add traduction -->
 <!-- TODO: add test with playwright https://github.com/formkit/drag-and-drop -->

No alert changes

Worsened metrics

Total package byte prevSize

71259

decreased by-1.68%

Lines of code

900

decreased by-3.95%

Number of lines in readme file

85

decreased by-1.16%

No dependency changes