vue-fluid-dnd - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/composables/index.d.ts

@@ -1,4 +0,14 @@
-export type Direction = "horizontal" | "vertical";
+export declare const HORIZONTAL = "horizontal";
+export declare const VERTICAL = "vertical";
+/**
+ * The direction of the list to sort.
+ * @public
+ */
+export type Direction = typeof HORIZONTAL | typeof VERTICAL;
+/**
+ * Configuration of the drag and drop.
+ * @public
+ */
 export type Config = {
     direction?: Direction;
 };

dist/composables/useDragAndDrop.d.ts

 import { Ref } from "vue";
 import { Config } from ".";
+/**
+ * Create the parent element of the draggable children and all the drag and drop events and styles.
+ *
+ * @template T - Type of the items.
+ * @param items - List of data to drag and drop.
+ * @param config - Configuration of drag and drop tool.
+ * @returns The reference of the parent element.
+ */
 export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config): {
     parent: Ref<HTMLElement | undefined>;
 };

dist/composables/useDraggable.d.ts

@@ -1,3 +0,3 @@
-import { DraggableElement } from "index";
+import { DraggableElement } from "../../index";
 import { Direction } from ".";
-export default function useDraggable(child: HTMLElement | undefined, index: number, direction?: Direction, onDrop?: (source: DraggableElement, destination: DraggableElement) => void, updateDraggableId?: (element: HTMLElement | undefined, index: number) => void): void;
+export default function useDraggable(child: HTMLElement | undefined, index: number, direction: Direction, onDrop: (source: DraggableElement, destination: DraggableElement) => void, parent: HTMLElement): void;

dist/utils/GetTranslateBeforeDropping.d.ts

 import { Direction } from "../composables";
-export default function getTranslateBeforeDropping(direction: Direction | undefined, siblings: HTMLElement[], sourceIndex: number, targetIndex: number, scroll: {
+import { Translate } from "../../index";
+export default function getTranslateBeforeDropping(direction: Direction, siblings: HTMLElement[], sourceIndex: number, targetIndex: number, scroll: {
     scrollY: number;
@@ -8,5 +9,2 @@ scrollX: number;
     scrollTop: number;
-}): {
-    height: number;
-    width: number;
-};
+}): Translate;

dist/utils/GetTranslationByDraggingAndEvent.d.ts

 import { Direction } from "../composables";
 import { DragAndDropEvent } from ".";
-export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction | undefined, previousElement?: Element | null, nextElement?: Element | null): {
+export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction, previousElement?: Element | null, nextElement?: Element | null): {
     height: number;
     width: number;
 };

dist/utils/index.d.ts

@@ -1,2 +0,2 @@
-declare const START_DRAG_EVENT = "startDrag";
+export declare const START_DRAG_EVENT = "startDrag";
 export declare const DRAG_EVENT = "drag";
@@ -9,2 +9,1 @@ export declare const START_DROP_EVENT = "startDrop";
 export declare const IsDropEvent: (event: DragAndDropEvent) => event is DropEvent;
-export {};

dist/utils/SetTransform.d.ts

@@ -1,2 +0,2 @@
-import { DragMouseTouchEvent } from "index";
+import { DragMouseTouchEvent } from "../../index";
 import { Ref } from "vue";
@@ -3,0 +3,0 @@ import { Direction } from "../composables";

dist/vue-fluid-dnd.js

@@ -1,8 +0,8 @@
-import { ref as w, watch as Z, computed as Vt } from "vue";
+import { ref as M, watch as Q } from "vue";
 const Ht = (t, e, n) => {
   if (e.index === n.index)
     return;
-  const r = t.value, [i] = r.splice(e.index, 1);
-  r.splice(n.index, 0, i);
-}, Ft = "startDrop", It = "drop", Nt = (t) => t === It || t === Ft, kt = (t) => {
+  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) => {
   if (t) {
@@ -13,43 +13,43 @@ const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: 0, scrollTop: 0 };
-}, qt = () => {
+}, jt = () => {
   const { scrollX: t, scrollY: e } = window;
   return { scrollX: t, scrollY: e };
-}, et = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Ut = (t) => t ? parseInt(t) : -1, jt = (t, 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 i = et(n.replace("%", "")), { width: a } = t.getBoundingClientRect();
-    return a * (i / 100);
+    const s = tt(n.replace("%", "")), { width: c } = t.getBoundingClientRect();
+    return c * (s / 100);
   }
-  return et(n.replace("px", ""));
-}, xt = (t, e) => t.x1 > e.x1 ? xt(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, Tt = (t) => {
+  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) => {
   const e = t.parentElement;
   return !Dt(t, e);
 }, Dt = (t, e) => {
-  const n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), i = lt(n, r, "vertical"), a = lt(n, r, "horizontal");
-  return i >= Math.min(n.height, r.height) / 2 && a >= Math.min(n.width, r.width) / 2;
-}, lt = (t, e, n) => {
-  const { before: r, distance: i } = y(n);
-  return xt(
+  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(
     {
-      x1: t[r],
-      x2: t[r] + t[i]
+      x1: t[i],
+      x2: t[i] + t[s]
     },
     {
-      x1: e[r],
-      x2: e[r] + e[i]
+      x1: e[i],
+      x2: e[i] + e[s]
     }
   );
-}, rt = (t, e) => t && t instanceof HTMLElement ? et(getComputedStyle(t)[e]) : 0, P = (t, e) => t && t instanceof HTMLElement ? et(window.getComputedStyle(t)[e]) : 0, Jt = (t, e) => {
-  const { gap: n } = y(e), { gap: r, hasGaps: i } = it(t, n);
-  return i ? r : 0;
-}, it = (t, e) => {
-  const n = jt(t, e), r = window.getComputedStyle(t).display, i = n > 0 || r === "flex";
+}, 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);
+  return s ? i : 0;
+}, ct = (t, e) => {
+  const n = Kt(t, e), i = window.getComputedStyle(t).display, s = n > 0 || i === "flex";
   return {
     gap: n,
-    hasGaps: i
+    hasGaps: s
   };
-}, Kt = (t) => {
+}, Zt = (t) => {
   const { scrollLeft: e, scrollTop: n } = t;
   return { scrollLeft: e, scrollTop: n };
-}, y = (t) => t == "horizontal" ? {
+}, w = (t) => t == "horizontal" ? {
   beforeMargin: "marginLeft",
@@ -84,9 +84,9 @@ afterMargin: "marginRight",
   offsetElement: "offsetTop"
-}, gt = (t) => {
-  const e = Qt(t), { previousSiblings: n, elementPosition: r } = Zt(t);
+}, ut = (t) => {
+  const e = te(t), { previousSiblings: n, elementPosition: i } = ee(t);
   return {
     siblings: [...e, ...n],
-    elementPosition: r
+    elementPosition: i
   };
-}, Qt = (t) => {
+}, te = (t) => {
   const e = [];
@@ -97,3 +97,3 @@ let n = t;
   return e.toReversed();
-}, Zt = (t) => {
+}, ee = (t) => {
   const e = [];
@@ -108,64 +108,62 @@ let n = t;
 };
-function te(t, e, n, r, i, a) {
-  let c = 0, l = 0;
-  if (!t)
-    return { height: c, width: l };
-  if (n === r)
-    return ut({ height: c, width: l }, t, i);
-  const { sourceElement: p, targetElement: u, siblingsBetween: d, isDraggedFoward: h } = oe(e, n, r), E = p.parentElement, {
-    scrollElement: B,
-    beforeMargin: x,
-    afterMargin: m,
-    distance: T,
-    gap: D
-  } = y(t), { gap: W, hasGaps: G } = it(E, D), { beforeMarginSpace: A, space: X, afterMarginSpace: $ } = se(
+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,
-    m,
-    T,
-    d,
-    W,
+    p,
+    O,
     G
   ), {
     beforeMargin: N,
-    afterMargin: Y,
+    afterMargin: X,
     spaceBeforeDraggedElement: S
-  } = re(
-    x,
-    m,
-    p,
+  } = ce(
+    E,
+    v,
+    f,
     u == null ? void 0 : u.previousElementSibling,
     h,
     G
-  ), C = ne(
-    X,
-    A,
+  ), B = se(
+    W,
+    P,
     $,
     N,
-    Y,
-    W
-  ), V = ee(
-    B,
-    E,
-    a
-  ), O = (h ? C - S : S - C) - V;
-  return t === "vertical" ? c = O : t === "horizontal" && (l = O), ut({ height: c, width: l }, t, i);
+    X,
+    O
+  ), z = oe(
+    y,
+    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);
 }
-const ee = (t, e, n) => {
-  const r = e[t], i = n[t];
-  return r - i;
-}, ne = (t, e, n, r, i, a) => {
-  const c = Math.max(e, i);
-  return Math.max(n, r) + t + c + a;
-}, oe = (t, e, n) => {
-  const r = e < n, [i, a] = [e, n].toSorted(
-    (u, d) => u - d
-  ), c = t[e], l = t[n], p = r ? t.slice(i + 1, a + 1) : t.slice(i, a);
+const oe = (t, e, n) => {
+  const i = e[t], s = n[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);
   return {
-    sourceElement: c,
-    targetElement: l,
-    siblingsBetween: p,
-    isDraggedFoward: r
+    sourceElement: a,
+    targetElement: g,
+    siblingsBetween: f,
+    isDraggedFoward: i
   };
-}, se = (t, e, n, r, i, a) => {
-  if (r.length == 0)
+}, ie = (t, e, n, i, s, c) => {
+  if (i.length == 0)
     return {
@@ -176,27 +174,27 @@ beforeMarginSpace: 0,
     };
-  const c = P(r[0], t);
-  let l = 0, p = 0;
-  for (let u = 0; u < r.length; u++) {
-    const d = r[u], h = d.getBoundingClientRect()[n], E = P(d, t);
-    a && (l += E), a && u > 0 ? l += i : l = Math.max(l, E), p += l + h, l = P(d, e);
+  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);
   }
   return {
-    beforeMarginSpace: c,
-    space: p - c,
-    afterMarginSpace: l
+    beforeMarginSpace: a,
+    space: f - a,
+    afterMarginSpace: g
   };
-}, ut = (t, e, n) => {
-  const { scroll: r, distance: i } = y(e), a = window[r], l = n[r] - a;
-  return t[i] += l, t;
-}, re = (t, e, n, r, i, a) => {
-  const c = i ? n.previousElementSibling : r;
-  return ie(
+}, 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(
     t,
     e,
-    c,
+    a,
     n,
-    a
+    c
   );
-}, ie = (t, e, n, r, i) => {
-  if (i)
+}, ae = (t, e, n, i, s) => {
+  if (s)
     return {
@@ -207,20 +205,20 @@ afterMargin: 0,
     };
-  const a = P(
+  const c = L(
     n,
     e
-  ), c = P(r, t);
-  let l = Math.max(a, c);
+  ), a = L(i, t);
+  let g = Math.max(c, a);
   return {
-    afterMargin: a,
-    beforeMargin: c,
-    spaceBeforeDraggedElement: l
+    afterMargin: c,
+    beforeMargin: a,
+    spaceBeforeDraggedElement: g
   };
-}, ae = ["onmouseup", "onmousedown", "onmousemove"], K = (t, e, n) => {
+}, le = ["onmouseup", "onmousedown", "onmousemove"], J = (t, e, n) => {
   t && (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
-}, tt = (t, e, n) => {
-  n && (ce(e) ? t[e] = n : t[e] = (r) => {
-    const i = St(r);
-    n(i);
+}, Z = (t, e, n) => {
+  n && (ge(e) ? t[e] = n : t[e] = (i) => {
+    const s = Mt(i);
+    n(s);
   });
-}, ce = (t) => ae.includes(t), St = (t) => {
+}, ge = (t) => le.includes(t), Mt = (t) => {
   let e = t instanceof TouchEvent ? t.touches[0] : t;
@@ -241,90 +239,90 @@ if (!e) {
   }
-  const { clientX: n, clientY: r, pageX: i, pageY: a, screenX: c, screenY: l, target: p } = e;
-  let u = 0, d = 0;
+  const { clientX: n, clientY: i, pageX: s, pageY: c, screenX: a, screenY: g, target: f } = e;
+  let u = 0, p = 0;
   if (t instanceof MouseEvent)
-    u = t.offsetX, d = t.offsetY;
+    u = t.offsetX, p = t.offsetY;
   else {
     const h = t.target;
-    u = ft(e, window, "horizontal", h), d = ft(e, window, "vertical", h);
+    u = dt(e, window, "horizontal", h), p = dt(e, window, "vertical", h);
   }
   return {
     clientX: n,
-    clientY: r,
-    pageX: i,
-    pageY: a,
-    screenX: c,
-    screenY: l,
-    target: p,
+    clientY: i,
+    pageX: s,
+    pageY: c,
+    screenX: a,
+    screenY: g,
+    target: f,
     offsetX: u,
-    offsetY: d
+    offsetY: p
   };
-}, ft = (t, e, n, r) => {
-  const { page: i, scroll: a, before: c, borderBeforeWidth: l } = y(n), p = r.getBoundingClientRect();
-  return t[i] - e[a] - p[c] - rt(r, l);
+}, 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}`);
-}, le = (t, e, n) => {
+}, ue = (t, e, n) => {
   t && (t[e] = () => {
     n();
   });
-}, Q = (t, e) => {
+}, K = (t, e) => {
   var n = document.createElement("style");
   n.innerHTML = e;
-  for (const r of t.children)
-    if (r.innerHTML === e)
+  for (const i of t.children)
+    if (i.innerHTML === e)
       return;
   t.appendChild(n);
-}, ge = (t) => {
-  const e = w({ offsetX: 0, offsetY: 0 }), n = w({ top: 0, left: 0 });
-  Z(
+}, fe = (t) => {
+  const e = M({ offsetX: 0, offsetY: 0 }), n = M({ top: 0, left: 0 });
+  Q(
     n,
-    (a) => {
-      const c = t.value;
-      c && (c.style.top = `${a.top}px`, c.style.left = `${a.left}px`);
+    (c) => {
+      const a = t.value;
+      a && (a.style.top = `${c.top}px`, a.style.left = `${c.left}px`);
     },
     { deep: !0 }
   );
-  function r(a, c, l, p, u) {
-    const d = a.getBoundingClientRect(), h = (m) => {
+  function i(c, a, g, f, u) {
+    const p = c.getBoundingClientRect(), h = (v) => {
       const {
-        beforeMargin: T,
-        borderBeforeWidth: D,
-        before: W,
+        beforeMargin: x,
+        borderBeforeWidth: T,
+        before: O,
         offset: G,
-        scroll: A,
-        page: X,
+        scroll: P,
+        page: W,
         inner: $,
         distance: N,
-        axis: Y
-      } = y(m), S = l.value[X], C = window[A], V = window[$], H = d[N], O = rt(a, D), F = P(a, T), z = S - e.value[G];
-      if (z >= C - H / 2 && z <= C + V) {
-        const U = z - n.value[W] - O - F - C;
-        return E(m), U;
+        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;
       }
-      return p.value[Y];
-    }, E = (m) => {
-      if (a && a.classList.contains("dragging") && c && m === u) {
-        const { before: T, distance: D, axis: W } = y(u), A = a.getBoundingClientRect()[D], X = c.getBoundingClientRect(), $ = n.value[T] - X[T] + p.value[W], Y = X[D] - A, S = $ / Y, C = A / Y, V = 0.1, H = 0.25, O = 0.75;
-        let F = 0;
-        const z = Tt(a);
-        !z && S < H && S > -C ? F = S / H - 1 : !z && S > O && S < 1 + C && (F = 1 / (1 - O) * (S - O));
-        const q = V * A * F;
-        B(c, u, q);
+      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);
       }
-    }, B = (m, T, D) => {
-      D != 0 && (T === "vertical" ? m.scrollBy(0, D) : m.scrollBy(D, 0));
-    }, x = (m) => {
-      const { axis: T } = y(m);
-      p.value[T] = h(m);
+    }, 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);
     };
-    x("horizontal"), x("vertical");
+    E("horizontal"), E("vertical");
   }
   return {
-    setTransform: r,
-    updateTransformState: (a, c) => {
-      const { offsetX: l, offsetY: p } = a;
-      e.value = { offsetX: l, offsetY: p };
-      const u = (d) => {
-        const { offset: h, beforeMargin: E, page: B, borderBeforeWidth: x, scroll: m } = y(d);
-        return a[B] - e.value[h] - P(c, E) - rt(c, x) - window[m];
+    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];
       };
@@ -338,60 +336,58 @@ n.value = {
 };
-function st(t, e, n, r = t.previousElementSibling, i = t.nextElementSibling) {
-  let { height: a, width: c } = ue(
+function ot(t, e, n, i = t.previousElementSibling, s = t.nextElementSibling) {
+  let { height: c, width: a } = de(
     n,
     t,
-    r,
-    i
+    i,
+    s
   );
-  return Tt(t) && e == "drag" && (a = 0, c = 0), { height: a, width: c };
+  return St(t) && e == Nt && (c = 0, a = 0), { height: c, width: a };
 }
-function ue(t, e, n, r) {
-  if (!t)
-    return { width: 0, height: 0 };
+function de(t, e, n, i) {
   const {
-    afterMargin: i,
-    beforeMargin: a,
-    distance: c,
-    gap: l
-  } = y(t), p = P(e, i), u = P(e, a);
-  let d = P(r, a);
-  const h = e.parentElement, { gap: E, hasGaps: B } = it(h, l), x = e.getBoundingClientRect()[c];
-  if (B)
-    return ht(
+    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(
       t,
-      dt(x, u, p, E, 0)
+      ht(E, u, f, b, 0)
     );
-  const { afterSpace: m, beforeScace: T, rest: D } = fe(
+  const { afterSpace: v, beforeScace: x, rest: T } = pe(
     n,
-    d,
     p,
+    f,
     u,
-    i
+    s
   );
-  return ht(
+  return vt(
     t,
-    dt(x, T, m, 0, D)
+    ht(E, x, v, 0, T)
   );
 }
-const fe = (t, e, n, r, i) => {
-  const a = Math.max(e, n);
-  let c = r, l = e;
+const pe = (t, e, n, i, s) => {
+  const c = Math.max(e, n);
+  let a = i, g = e;
   if (t) {
-    const p = P(
+    const f = L(
       t,
-      i
+      s
     );
-    c = Math.max(p, r), l = Math.max(l, p);
+    a = Math.max(f, i), g = Math.max(g, f);
   }
-  return { afterSpace: a, beforeScace: c, rest: l };
-}, dt = (t, e, n, r, i) => t + e + n + r - i, ht = (t, e) => t == "horizontal" ? { width: e, height: 0 } : { width: 0, height: e }, vt = "drag", mt = "startDrag", bt = "startDrop", Et = "draggable";
-function pe(t, e, n, r, i) {
-  const a = w(
-    "notDragging"
+  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(
+    0
     /* NOT_DRAGGING */
-  ), c = w(t), l = w(e), p = w({ x: 0, y: 0 }), u = w({ scrollLeft: 0, scrollTop: 0 }), d = w({ scrollY: 0, scrollX: 0 }), h = 200, E = w({ pageX: 0, pageY: 0 }), B = w({ scrollLeft: 0, scrollTop: 0 }), x = w(""), m = w(""), T = "cubic-bezier(0.2, 0, 0, 1)", { setTransform: D, updateTransformState: W } = ge(c), G = () => {
-    c.value && c.value.classList.add(Et);
-  }, A = () => {
-    b.value && (Q(
-      b.value,
+  ), 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(
+      s,
       `.draggable {  
@@ -402,10 +398,11 @@ box-sizing: border-box !important;
       user-select: none;
+      -webkit-user-select: none;
     }`
-    ), Q(
-      b.value,
+    ), K(
+      s,
       `.draggable * {
         pointer-events: none;
       }`
-    ), Q(
-      b.value,
+    ), K(
+      s,
       `.temp-child {
@@ -416,4 +413,4 @@ box-sizing: border-box !important;
       }`
-    ), Q(
-      b.value,
+    ), K(
+      s,
       `.droppable {
@@ -423,4 +420,4 @@ box-sizing: border-box !important;
     }`
-    ), Q(
-      b.value,
+    ), K(
+      s,
       `.dragging {
@@ -433,5 +430,5 @@ position: fixed;
     }`
-    ), G());
-  }, X = (o) => new MutationObserver((s) => {
-    s.forEach(() => {
+    ), G();
+  }, W = (o) => new MutationObserver((r) => {
+    r.forEach(() => {
       o();
@@ -442,95 +439,90 @@ });
   }, N = (o) => {
-    o && (tt(
+    o && (Z(
       o,
       "onmousedown",
-      C("mousemove", "onmouseup")
-    ), tt(
+      B("mousemove", "onmouseup")
+    ), Z(
       o,
       "ontouchstart",
-      C("touchmove", "ontouchend")
-    ), i && i(o, l.value)), o != null && o.parentElement && (o == null || o.parentElement.classList.add("droppable"));
-  }, Y = function(o) {
-    a.value === "startDragging" ? H(o) : a.value === "dragging" && z(o);
+      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 s = St(o);
-    Y(s);
-  }, C = (o, s) => (g) => {
-    const f = g.target;
-    b.value && (B.value = Kt(b.value)), a.value === "notDragging" && (a.value = "startDragging", document.addEventListener(o, S), le(b.value, "onscroll", q), f && tt(
-      f,
-      s,
-      V(o, f, s)
+    const r = Mt(o);
+    X(r);
+  }, B = (o, 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(
+      l,
+      r,
+      z(o, l, r)
     ));
-  }, V = (o, s, g) => (f) => {
-    var v;
-    Xt(f), document.removeEventListener(o, S), (v = b.value) != null && v.onscroll && (b.value.onscroll = null), tt(s, g, null);
-  }, H = (o) => {
-    const s = o.target;
-    O(s), F(s), U(s, mt), W(o, s), _t(s);
-  }, O = (o) => {
-    u.value = kt(o.parentElement), d.value = qt(), a.value = "dragging";
-  }, F = (o) => {
-    if (b.value) {
-      let g = st(
-        o,
-        "startDrag",
-        n
-      );
-      var s = document.createElement("div");
-      if (s.classList.add("temp-child"), n) {
-        const f = Jt(b.value, n), { distance: v } = y(n);
-        g[v] -= f;
-      }
-      s.style.height = `${g.height}px`, s.style.minWidth = `${g.width}px`, b.value.appendChild(s);
-    }
-  }, z = (o) => {
-    const { pageX: s, pageY: g } = o;
-    E.value = { pageX: s, pageY: g }, q();
-  }, q = () => {
-    const o = c.value;
-    b.value && D(o, b.value, E, p, n), U(o, vt);
-  }, U = (o, s) => {
-    let g = { height: 0, width: 0 };
-    g = st(o, s, n);
-    const { siblings: f, elementPosition: v } = gt(o);
-    Nt(s) ? Wt(
+  }, z = (o, r, l) => () => {
+    _t(), document.removeEventListener(o, S), s.onscroll = null, Z(r, l, null);
+  }, V = (o) => {
+    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,
-      s,
-      f,
-      v,
-      g
-    ) : Mt(o, s, f, g);
-  }, Mt = (o, s, g, f) => {
-    const v = at(o);
-    for (const [R, L] of g.entries()) {
-      if (!L.classList.contains(Et))
+      rt,
+      n
+    );
+    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) => {
+    let l = { height: 0, width: 0 };
+    l = ot(o, r, n);
+    const { siblings: d, elementPosition: m } = ut(o);
+    qt(r) ? Yt(
+      o,
+      r,
+      d,
+      m,
+      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))
         continue;
-      if (!v) {
-        const M = Ot(
+      if (!m) {
+        const D = Wt(
           n,
           o,
-          L,
-          f
+          R,
+          d
         );
-        if (M)
-          f = M;
+        if (D)
+          d = D;
         else
           continue;
       }
-      const _ = g.length - R;
-      Pt(f, _), s === mt ? wt(L, f) : s === vt && yt(L, f);
+      const _ = l.length - C;
+      Ot(d, _), r === rt ? Bt(R, d) : r === Et && Ct(R, d);
     }
-  }, wt = (o, s) => {
-    const { width: g, height: f } = s;
-    K(o, f, g);
-  }, yt = (o, s) => {
-    const { width: g, height: f } = s;
-    K(o, f, g), pt(o, h, T);
-  }, Bt = (o) => {
-    const { siblings: s } = gt(o);
-    for (const g of [...s, o]) {
-      const f = X(() => {
-        $(g), f.disconnect();
+  }, 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();
       });
-      f.observe(o, {
+      d.observe(o, {
         attributes: !0,
@@ -540,5 +532,5 @@ attributeFilter: ["style"]
     }
-  }, Ct = (o, s, g) => {
-    r && setTimeout(() => {
-      Lt(), r(
+  }, Lt = (o, r, l) => {
+    setTimeout(() => {
+      Pt(), i(
         {
@@ -548,137 +540,131 @@ index: o
         {
-          index: s
+          index: r
         }
-      ), Yt(g), Bt(g);
+      ), Gt(l), Rt(l);
     }, h);
-  }, Rt = (o, s, g, f) => {
-    K(s, g.height, g.width), K(
+  }, At = (o, r, l, d) => {
+    J(r, l.height, l.width), J(
       o,
-      f.height,
-      f.width
+      d.height,
+      d.width
     );
-  }, Lt = () => {
-    if (b.value) {
-      var o = b.value.querySelectorAll(".temp-child");
-      o.forEach((s) => {
-        b.value && b.value.removeChild(s);
-      });
-    }
-  }, Pt = (o, s) => {
-    if (!n)
+  }, Pt = () => {
+    var o = s.querySelectorAll(`.${st}`);
+    o.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;
+    if (l.getAnimations().length !== 0)
       return;
-    const { distance: g } = y(n);
-    o[g] == 0 ? l.value = Math.max(l.value, s) : l.value = Math.min(l.value, s - 1);
-  }, Ot = (o, s, g, f) => {
-    if (!o)
-      return { height: 0, width: 0 };
-    const { before: v, distance: R } = y(o), L = s.getBoundingClientRect(), _ = g.getBoundingClientRect(), M = L[v], I = L[R], k = _[v], j = _[R], J = k + j / 2;
-    if (g.getAnimations().length !== 0)
-      return;
-    const nt = k + j, ot = M + I, Gt = M >= k && M <= nt, $t = ot >= k && ot <= nt;
-    return Gt && M > J || $t && ot > J || M > nt ? { height: 0, width: 0 } : f;
-  }, At = (o, s, g) => {
-    const v = at(o) ? s : l.value, R = () => s < v ? [v, v + 1] : s > v ? [v - 1, v] : [v - 1, v + 1], [L, _] = R(), M = g[L] ?? null, I = g[_] ?? null;
+    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;
     return {
-      previousElement: M,
-      nextElement: I,
-      targetIndex: v
+      previousElement: D,
+      nextElement: H,
+      targetIndex: m
     };
-  }, Wt = (o, s, g, f, v) => {
-    const R = g.toReversed();
-    R.splice(f, 0, o);
-    const { previousElement: L, nextElement: _, targetIndex: M } = At(o, f, R);
-    v = st(
+  }, 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,
-      s,
+      r,
       n,
-      L,
+      R,
       _
     );
-    const I = c.value;
-    if (I) {
-      for (const [k, j] of g.toReversed().entries()) {
-        let J = v;
-        if (M - 1 >= k && (J = { height: 0, width: 0 }), s === bt && !j.classList.contains("temp-child")) {
-          const ct = te(
+    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,
-            R,
-            f,
-            M,
-            d.value,
-            B.value
+            C,
+            d,
+            D,
+            p.value,
+            y.value
           );
-          Rt(
-            I,
+          At(
+            H,
+            U,
             j,
-            J,
-            ct
+            lt
           );
         }
       }
-      Ct(f, M, I);
+      Lt(d, D, H);
     }
   }, at = (o) => {
-    const s = o.parentElement;
-    return !Dt(o, s);
-  }, Xt = (o) => {
-    if (a.value !== "dragging") {
-      a.value = "notDragging";
+    const r = o.parentElement;
+    return !Dt(o, r);
+  }, _t = () => {
+    if (c.value !== 2) {
+      c.value = 0;
       return;
     }
-    a.value = "endDragging";
-    const s = o.target;
-    zt(s), U(s, bt);
-  }, Yt = (o) => {
-    a.value = "notDragging", o.classList.remove("dragging"), o.style.transform = "", o.style.transition = "", o.style.top = "", o.style.left = "", m.value = "", x.value = "";
+    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) => {
-    pt(o, h), K(o, 0, 0);
-  }, _t = (o) => {
-    const { height: s, width: g } = o.getBoundingClientRect();
-    m.value = `${s}px`, x.value = `${g}px`, o.classList.add("dragging"), o.style.transition = "";
-  }, b = Vt(() => {
-    var s;
-    const o = (s = c.value) == null ? void 0 : s.parentElement;
-    if (o)
-      return o;
-  });
-  Z(
-    p,
+    const { height: r, width: l } = o.getBoundingClientRect();
+    v.value = `${r}px`, E.value = `${l}px`, o.classList.add(bt), o.style.transition = "";
+  };
+  Q(
+    f,
     (o) => {
-      const s = c.value;
-      s && (s.style.transform = `translate( ${o.x}px, ${o.y}px)`);
+      const r = a.value;
+      r && (r.style.transform = `translate( ${o.x}px, ${o.y}px)`);
     },
     { deep: !0 }
-  ), Z(x, (o) => {
-    const s = c.value;
-    s && s.style.setProperty("--fixedWidth", o);
-  }), Z(m, (o) => {
-    const s = c.value;
-    s && s.style.setProperty("--fixedHeight", o);
-  }), A(), N(c.value);
+  ), Q(E, (o) => {
+    const r = a.value;
+    r && r.style.setProperty("--fixedWidth", o);
+  }), Q(v, (o) => {
+    const r = a.value;
+    r && r.style.setProperty("--fixedHeight", o);
+  }), P(), N(a.value);
 }
-const de = { direction: "vertical" };
-function be(t, e) {
-  const { direction: n = "vertical" } = e ?? de, r = "index", i = w(), a = (u) => (d, h) => {
-    u && Ht(w(u), d, h);
-  }, c = () => {
-    if (i.value)
-      for (const u of i.value.children) {
-        const d = u.getAttribute(r), h = Ut(d), E = u, B = a(t.value);
-        E && h >= 0 && pe(E, h, n, B);
+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 = () => {
+    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(
+          b,
+          h,
+          n,
+          y,
+          s.value
+        );
       }
-  }, l = () => {
-    if (!i.value)
+  }, g = () => {
+    if (!s.value)
       return;
-    const u = he(() => {
-      c(), u.disconnect();
-    });
-    u.observe(i.value, { childList: !0 });
-  }, p = () => {
-    i.value && i.value.classList.add("droppable");
+    be(() => {
+      a();
+    }).observe(s.value, { childList: !0 });
+  }, f = () => {
+    s.value && s.value.classList.add("droppable");
   };
-  return Z(i, () => {
-    p(), l(), c();
-  }), { parent: i };
+  return Q(s, () => {
+    f(), g(), a();
+  }), { parent: s };
 }
-const he = (t) => new MutationObserver((e) => {
+const be = (t) => new MutationObserver((e) => {
   e.forEach(() => {
@@ -689,3 +675,3 @@ t();
 export {
-  be as useDragAndDrop
+  Te as useDragAndDrop
 };

package.json

 {
   "name": "vue-fluid-dnd",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
@@ -26,8 +26,2 @@ "homepage": "https://vue-fluid-dnd.netlify.app",
   "typings": "./dist/index.d.ts",
-  "scripts": {
-    "dev": "cd my-test-examples && vite",
-    "build": "vite build && vue-tsc --emitDeclarationOnly",
-    "preview": "vite preview",
-    "test": "vitest"
-  },
   "keywords": [
@@ -53,2 +47,4 @@ "vue",
   "devDependencies": {
+    "@playwright/test": "^1.43.0",
+    "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^4.5.2",
@@ -61,3 +57,9 @@ "jsdom": "^24.0.0",
     "vue-tsc": "^1.8.25"
+  },
+  "scripts": {
+    "dev": "cd my-test-examples && vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "test": "vitest"
   }
-}
+}

README.md

@@ -6,4 +6,4 @@ <h1 align="center">
 
-A **fluid**, **smooth**, **versatil** and **lightweight** drag and drop
-library for lists on Vue3.
+A **fluid**, **smooth** and **versatil** drag and drop
+library for lists on Vue3. It's a **lightweight** tool ~5 Kb (gzip) with no depenencies.
 
@@ -19,3 +19,3 @@ <img src="https://github.com/carlosjorger/vue-fluid-dnd/assets/50055316/4b25fd5e-4815-4a24-afe4-6f41d34be820" width="100%"/>
 - ✅ **Nice documentation 📑 and examples**.
-- 🔲 **Fully tested 🧪, typed and reliable**.
+- ✅ **Fully tested 🧪, typed and reliable**.
 
@@ -35,15 +35,11 @@ ## 🚀 Getting Started
    pnpm i vue-fluid-dnd
-
-   # with ultra:
-   ultra install vue-fluid-dnd
    ```
 
-2. **Import components and styles**
+2. **Import the vue composable**
 
    ```js
-   import { Draggable, Droppable } from "vue-fluid-dnd";
-   import "vue3-fluid-dnd/style.css";
+   import { useDragAndDrop } from "vue-fluid-dnd";
    ```
 
-3. **Create a list that your want to sort**
+3. **Create a list that your want to sort an use useDragAndDrop**
 
@@ -54,3 +50,2 @@ ```js
      {
-       "draggable-id": "h1",
        number: 1,
@@ -62,24 +57,22 @@ style:
    ]);
+   // create the parent element and set drag and drop configuration on the parent and children elements (creating events, statees, styles, etc) calling useDragAndDrop composable
+   const { parent } = useDragAndDrop(listToSort);
    ```
 
-4. **Use the components**
+4. **Create childrens**
 
    ```jsx
-   //pass setRef to child to have the reference of draggable element
-   //pass the direction of the list and droppable id
-   <Droppable droppable-id="droppable-id" direction="vertical" :items="list1">
-      <div style="width: 40%; background-color: darkgray; display: block">
-         <Draggable
-         v-for="(element, index) in listToSort"
-         v-slot="{ setRef }"
-         :draggable-id="element['draggable-id']"
-         :index="index"
-         >
-         <div :ref="setRef" :style="element.style">{{ element.number }}</div>
-         </Draggable>
+   <template>
+      <div ref="parent" style="width: 40%; display: block">
+         <div
+            v-for="(element, index) in listToSort"
+            :index="index"
+            :style="element.style"
+         >{{ element.number }}
+         </div>
       </div>
-   </Droppable>
+   </template>
    ```
 
-- 📚 [All docs here](https://vue-fluid-dnd.netlify.app/).
+📚 [Check out all the docs here!](https://vue-fluid-dnd.netlify.app/)
 
@@ -89,4 +82,1 @@ ## 🤝 Contributing
 If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
-
-<!-- TODO: add test with playwright https://github.com/formkit/drag-and-drop -->
-<!-- TODO: put the vue examples in a another folder and add tests -->

No alert changes

Worsened metrics

Total package byte prevSize

40037

decreased by-4.43%

Dev dependency count

9

increased by28.57%

Number of package files

15

decreased by-16.67%

Lines of code

863

decreased by-0.69%

Number of lines in readme file

77

decreased by-11.49%

No dependency changes