@vue-dnd-kit/core 0.1.5-beta → 0.2.5-beta

package/dist/vue-dnd-kit-core.es.js

@@ -1,196 +1,85 @@
-import { effectScope as ge, getCurrentScope as me, onScopeDispose as he, isRef as pe, toValue as K, computed as P, shallowRef as ce, watch as ve, getCurrentInstance as Ee, onMounted as N, ref as D, onBeforeUnmount as W, defineComponent as de, createElementBlock as F, createCommentVNode as ye, unref as re, openBlock as H, normalizeStyle as oe, Fragment as we, renderList as Pe, createBlock as De, resolveDynamicComponent as _e, createVNode as xe, render as le, markRaw as Ie } from "vue";
-function Le(t) {
-  return me() ? (he(t), !0) : !1;
+import { effectScope as G, isRef as W, toValue as J, ref as y, computed as I, onMounted as V, onBeforeUnmount as H, defineComponent as q, createElementBlock as z, createCommentVNode as Q, unref as U, openBlock as k, normalizeStyle as Y, Fragment as B, renderList as ee, createBlock as te, resolveDynamicComponent as ne, createVNode as re, render as F, markRaw as le } from "vue";
+function oe(e) {
+  let t = !1, n;
+  const i = G(!0);
+  return (...a) => (t || (n = i.run(() => e(...a)), t = !0), n);
 }
-function Se(t) {
-  let e = !1, r;
-  const o = ge(!0);
-  return (...u) => (e || (r = o.run(() => t(...u)), e = !0), r);
-}
-const Me = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Ce = (t) => t != null, b = () => {
+const N = () => {
 };
-function Oe(t, e) {
-  function r(...o) {
-    return new Promise((u, n) => {
-      Promise.resolve(t(() => e.apply(this, o), { fn: e, thisArg: this, args: o })).then(u).catch(n);
+function ie(e, t) {
+  function n(...i) {
+    return new Promise((a, l) => {
+      Promise.resolve(e(() => t.apply(this, i), { fn: t, thisArg: this, args: i })).then(a).catch(l);
     });
   }
-  return r;
+  return n;
 }
-function Te(...t) {
-  let e = 0, r, o = !0, u = b, n, s, g, v, y;
-  !pe(t[0]) && typeof t[0] == "object" ? { delay: s, trailing: g = !0, leading: v = !0, rejectOnCancel: y = !1 } = t[0] : [s, g = !0, v = !0, y = !1] = t;
-  const l = () => {
-    r && (clearTimeout(r), r = void 0, u(), u = b);
+function se(...e) {
+  let t = 0, n, i = !0, a = N, l, s, d, v, h;
+  !W(e[0]) && typeof e[0] == "object" ? { delay: s, trailing: d = !0, leading: v = !0, rejectOnCancel: h = !1 } = e[0] : [s, d = !0, v = !0, h = !1] = e;
+  const u = () => {
+    n && (clearTimeout(n), n = void 0, a(), a = N);
   };
-  return (E) => {
-    const m = K(s), w = Date.now() - e, i = () => n = E();
-    return l(), m <= 0 ? (e = Date.now(), i()) : (w > m && (v || !o) ? (e = Date.now(), i()) : g && (n = new Promise((d, f) => {
-      u = y ? f : d, r = setTimeout(() => {
-        e = Date.now(), o = !0, d(i()), l();
-      }, Math.max(0, m - w));
-    })), !v && !r && (r = setTimeout(() => o = !0, m)), o = !1, n);
+  return (r) => {
+    const o = J(s), f = Date.now() - t, p = () => l = r();
+    return u(), o <= 0 ? (t = Date.now(), p()) : (f > o && (v || !i) ? (t = Date.now(), p()) : d && (l = new Promise((D, x) => {
+      a = h ? x : D, n = setTimeout(() => {
+        t = Date.now(), i = !0, D(p()), u();
+      }, Math.max(0, o - f));
+    })), !v && !n && (n = setTimeout(() => i = !0, o)), i = !1, l);
   };
 }
-function Ae(t) {
-  return Array.isArray(t) ? t : [t];
-}
-function ke(t, e = 200, r = !1, o = !0, u = !1) {
-  return Oe(
-    Te(e, r, o, u),
-    t
+function ae(e, t = 200, n = !1, i = !0, a = !1) {
+  return ie(
+    se(t, n, i, a),
+    e
   );
 }
-const Re = Me ? window : void 0;
-function Z(t) {
-  var e;
-  const r = K(t);
-  return (e = r == null ? void 0 : r.$el) != null ? e : r;
-}
-function Ve() {
-  const t = ce(!1), e = Ee();
-  return e && N(() => {
-    t.value = !0;
-  }, e), t;
-}
-function be(t) {
-  const e = Ve();
-  return P(() => (e.value, !!t()));
-}
-function ze(t, e, r = {}) {
-  const {
-    root: o,
-    rootMargin: u = "0px",
-    threshold: n = 0,
-    window: s = Re,
-    immediate: g = !0
-  } = r, v = be(() => s && "IntersectionObserver" in s), y = P(() => {
-    const w = K(t);
-    return Ae(w).map(Z).filter(Ce);
-  });
-  let l = b;
-  const p = ce(g), E = v.value ? ve(
-    () => [y.value, Z(o), p.value],
-    ([w, i]) => {
-      if (l(), !p.value || !w.length)
-        return;
-      const d = new IntersectionObserver(
-        e,
-        {
-          root: Z(i),
-          rootMargin: u,
-          threshold: n
-        }
-      );
-      w.forEach((f) => f && d.observe(f)), l = () => {
-        d.disconnect(), l = b;
-      };
-    },
-    { immediate: g, flush: "post" }
-  ) : b, m = () => {
-    l(), E(), p.value = !1;
-  };
-  return Le(m), {
-    isSupported: v,
-    isActive: p,
-    pause() {
-      l(), p.value = !1;
-    },
-    resume() {
-      p.value = !0;
-    },
-    stop: m
-  };
-}
-const C = Se(() => {
-  const t = D([]), e = P(() => t.value.length > 0), r = {
-    component: D(null),
-    ref: D(null)
-  }, o = D([]), u = P(() => {
-    const m = /* @__PURE__ */ new Map();
-    return o.value.forEach((w, i) => {
-      w.node && m.set(w.node, i);
-    }), m;
-  }), n = D(/* @__PURE__ */ new Set()), s = P(
-    () => Array.from(n.value).sort((m, w) => m - w)
-  ), g = P(
-    () => o.value.filter((m) => m.node).map((m) => m.node)
-  );
-  ve(
-    () => g.value.length,
-    (m) => {
-      if (m === 0) return;
-      v && (v(), v = null);
-      const { stop: w } = ze(
-        g,
-        (i) => {
-          let d = !1;
-          i.forEach((f) => {
-            const h = f.target, _ = u.value.get(h);
-            _ !== void 0 && o.value[_].isVisible !== f.isIntersecting && (o.value[_].isVisible = f.isIntersecting, d = !0, f.isIntersecting ? n.value.add(_) : n.value.delete(_));
-          }), d && (n.value = new Set(n.value));
-        },
-        {
-          threshold: 0.1,
-          // Элемент считается видимым, если видно хотя бы 10%
-          immediate: !0
-        }
-      );
-      v = w;
-    },
-    { immediate: !0 }
-  );
-  let v = null;
-  const y = D([]), l = D([]), p = {
-    zone: D(null),
-    element: D(null)
-  }, E = {
-    current: D(null),
-    start: D(null),
+const T = oe(() => {
+  const e = y([]), t = I(() => e.value.length > 0), n = {
+    component: y(null),
+    ref: y(null)
+  }, i = y([]), a = y([]), l = y([]), s = {
+    zone: y(null),
+    element: y(null)
+  }, d = {
+    current: y(null),
+    start: y(null),
     offset: {
-      percent: D(null),
-      pixel: D(null)
+      percent: y(null),
+      pixel: y(null)
     }
   };
   return {
-    isDragging: e,
-    activeContainer: r,
-    elements: o,
-    draggingElements: t,
-    selectedElements: y,
+    isDragging: t,
+    activeContainer: n,
+    elements: i,
+    draggingElements: e,
+    selectedElements: a,
     zones: l,
-    visibleElements: s,
-    // Теперь это computed свойство
-    hovered: p,
-    pointerPosition: E,
-    // Экспортируем Map для быстрого доступа
-    elementNodeMap: u,
-    // Добавляем метод для очистки ресурсов
-    cleanup: () => {
-      v && (v(), v = null);
-    }
+    hovered: s,
+    pointerPosition: d
   };
-}), He = () => {
-  const t = D(null), { draggingElements: e, pointerPosition: r, isDragging: o, activeContainer: u } = C();
-  return N(() => {
-    u.ref = t;
-  }), W(() => {
-    u.ref.value = null;
+}), ue = () => {
+  const e = y(null), { draggingElements: t, pointerPosition: n, isDragging: i, activeContainer: a } = T();
+  return V(() => {
+    a.ref = e;
+  }), H(() => {
+    a.ref.value = null;
   }), {
-    elementRef: t,
-    draggingElements: e,
-    pointerPosition: r,
-    isDragging: o
+    elementRef: e,
+    draggingElements: t,
+    pointerPosition: n,
+    isDragging: i
   };
-}, Ne = ["innerHTML"], Ue = /* @__PURE__ */ de({
+}, ce = ["innerHTML"], de = /* @__PURE__ */ q({
   __name: "DefaultOverlay",
-  setup(t) {
-    const { elementRef: e, pointerPosition: r, isDragging: o, draggingElements: u } = He(), n = P(() => {
-      var s, g, v, y;
+  setup(e) {
+    const { elementRef: t, pointerPosition: n, isDragging: i, draggingElements: a } = ue(), l = I(() => {
+      var s, d, v, h;
       return {
-        transform: `translate3d(${(((s = r.current.value) == null ? void 0 : s.x) ?? 0) - (((g = r.offset.pixel.value) == null ? void 0 : g.x) ?? 0)}px, ${(((v = r.current.value) == null ? void 0 : v.y) ?? 0) - (((y = r.offset.pixel.value) == null ? void 0 : y.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((s = n.current.value) == null ? void 0 : s.x) ?? 0) - (((d = n.offset.pixel.value) == null ? void 0 : d.x) ?? 0)}px, ${(((v = n.current.value) == null ? void 0 : v.y) ?? 0) - (((h = n.offset.pixel.value) == null ? void 0 : h.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -198,123 +87,122 @@ const C = Se(() => {
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (s, g) => re(o) ? (H(), F("div", {
+    return (s, d) => U(i) ? (k(), z("div", {
       key: 0,
       ref_key: "elementRef",
-      ref: e,
-      style: oe(n.value)
+      ref: t,
+      style: Y(l.value)
     }, [
-      (H(!0), F(we, null, Pe(re(u), (v, y) => {
-        var l, p;
-        return H(), F("div", {
-          key: y,
+      (k(!0), z(B, null, ee(U(a), (v, h) => {
+        var u, E;
+        return k(), z("div", {
+          key: h,
           innerHTML: v.initialHTML,
-          style: oe({
-            width: `${(l = v.initialRect) == null ? void 0 : l.width}px`,
-            height: `${(p = v.initialRect) == null ? void 0 : p.height}px`
+          style: Y({
+            width: `${(u = v.initialRect) == null ? void 0 : u.width}px`,
+            height: `${(E = v.initialRect) == null ? void 0 : E.height}px`
           })
-        }, null, 12, Ne);
+        }, null, 12, ce);
       }), 128))
-    ], 4)) : ye("", !0);
+    ], 4)) : Q("", !0);
   }
-}), ie = /* @__PURE__ */ de({
+}), Z = /* @__PURE__ */ q({
   __name: "DragOverlay",
-  setup(t) {
-    const { activeContainer: e } = C(), r = P(
-      () => e.component.value ?? Ue
+  setup(e) {
+    const { activeContainer: t } = T(), n = I(
+      () => t.component.value ?? de
     );
-    return (o, u) => (H(), De(_e(r.value)));
+    return (i, a) => (k(), te(ne(n.value)));
   }
-}), qe = {
-  install(t) {
-    t.component("DragOverlay", ie);
-    const e = t.mount;
-    t.mount = function(o) {
-      const u = e.call(this, o), n = typeof o == "string" ? document.querySelector(o) : o;
-      if (n && n instanceof Element && !n.querySelector("#vue-dnd-kit-overlay")) {
+}), Pe = {
+  install(e) {
+    e.component("DragOverlay", Z);
+    const t = e.mount;
+    e.mount = function(i) {
+      const a = t.call(this, i), l = typeof i == "string" ? document.querySelector(i) : i;
+      if (l && l instanceof Element && !l.querySelector("#vue-dnd-kit-overlay")) {
         const s = document.createElement("div");
-        s.id = "vue-dnd-kit-overlay", s.style.pointerEvents = "none", n.appendChild(s);
-        const g = xe(ie);
-        le(g, s), t.__VUE_DND_KIT_OVERLAY__ = {
+        s.id = "vue-dnd-kit-overlay", s.style.pointerEvents = "none", l.appendChild(s);
+        const d = re(Z);
+        F(d, s), e.__VUE_DND_KIT_OVERLAY__ = {
           container: s,
-          vnode: g
+          vnode: d
         };
       }
-      return u;
+      return a;
     };
-    const r = t.unmount;
-    t.unmount = function() {
-      return t.__VUE_DND_KIT_OVERLAY__ && (le(null, t.__VUE_DND_KIT_OVERLAY__.container), delete t.__VUE_DND_KIT_OVERLAY__), r.call(this);
+    const n = e.unmount;
+    e.unmount = function() {
+      return e.__VUE_DND_KIT_OVERLAY__ && (F(null, e.__VUE_DND_KIT_OVERLAY__.container), delete e.__VUE_DND_KIT_OVERLAY__), n.call(this);
     };
   }
-}, se = "data-vue-dnd-kit-draggable", I = (t) => {
-  t.preventDefault();
-}, Ye = (t) => {
+}, b = "data-vue-dnd-kit-draggable", L = (e) => {
+  e.preventDefault();
+}, ve = (e) => {
   const {
-    elements: e,
-    draggingElements: r,
-    hovered: o,
-    selectedElements: u,
-    isDragging: n
-  } = C(), s = D(null), g = P(
+    elements: t,
+    draggingElements: n,
+    hovered: i,
+    selectedElements: a,
+    isDragging: l
+  } = T(), s = y(null), d = I(
     () => {
-      var E;
-      return ((E = o.element.value) == null ? void 0 : E.node) === s.value;
+      var r;
+      return ((r = i.element.value) == null ? void 0 : r.node) === s.value;
     }
-  ), v = P(
-    () => r.value.some((E) => E.node === s.value)
-  ), y = P(() => {
-    if (!s.value || !n.value) return !1;
-    const E = e.value.find(
-      (m) => m.node === s.value
+  ), v = I(
+    () => n.value.some((r) => r.node === s.value)
+  ), h = I(() => {
+    if (!s.value || !l.value) return !1;
+    const r = t.value.find(
+      (o) => o.node === s.value
     );
-    return E != null && E.groups.length ? !r.value.some((m) => m.groups.length ? !m.groups.some(
-      (w) => E.groups.includes(w)
+    return r != null && r.groups.length ? !n.value.some((o) => o.groups.length ? !o.groups.some(
+      (f) => r.groups.includes(f)
     ) : !1) : !0;
   });
   return {
     elementRef: s,
     registerElement: () => {
       if (!s.value) throw new Error("ElementRef is not set");
-      e.value.push({
+      t.value.push({
         node: s.value,
-        groups: (t == null ? void 0 : t.groups) ?? [],
-        layer: (t == null ? void 0 : t.layer) ?? null,
-        defaultLayer: (t == null ? void 0 : t.layer) ?? null,
-        events: (t == null ? void 0 : t.events) ?? {},
-        data: (t == null ? void 0 : t.data) ?? void 0,
-        isVisible: !1
-      }), s.value.addEventListener("dragstart", I), s.value.addEventListener("drag", I), s.value.setAttribute(se, "true"), s.value.setAttribute("draggable", "false");
+        groups: (e == null ? void 0 : e.groups) ?? [],
+        layer: (e == null ? void 0 : e.layer) ?? null,
+        defaultLayer: (e == null ? void 0 : e.layer) ?? null,
+        events: (e == null ? void 0 : e.events) ?? {},
+        data: (e == null ? void 0 : e.data) ?? void 0
+      }), s.value.addEventListener("dragstart", L), s.value.addEventListener("drag", L), s.value.setAttribute(b, "true"), s.value.setAttribute("draggable", "false"), s.value.style.touchAction = "none";
     },
     unregisterElement: () => {
-      var w, i, d, f;
-      const E = e.value.findIndex(
-        (h) => h.node === s.value
+      var f, p, D, x;
+      const r = t.value.findIndex(
+        (c) => c.node === s.value
       );
-      E !== -1 && e.value.splice(E, 1);
-      const m = u.value.findIndex(
-        (h) => h.node === s.value
+      r !== -1 && t.value.splice(r, 1);
+      const o = a.value.findIndex(
+        (c) => c.node === s.value
       );
-      m !== -1 && u.value.splice(m, 1), (w = s.value) == null || w.removeEventListener("dragstart", I), (i = s.value) == null || i.removeEventListener("drag", I), (d = s.value) == null || d.removeAttribute(se), (f = s.value) == null || f.removeAttribute("draggable");
+      o !== -1 && a.value.splice(o, 1), (f = s.value) == null || f.removeEventListener("dragstart", L), (p = s.value) == null || p.removeEventListener("drag", L), (D = s.value) == null || D.removeAttribute(b), (x = s.value) == null || x.removeAttribute("draggable");
     },
     isDragging: v,
-    isOvered: g,
-    isAllowed: y
+    isOvered: d,
+    isAllowed: h
   };
-}, Fe = () => {
-  let t = "", e = "", r = "";
+}, ge = () => {
+  let e = "", t = "", n = "";
   return {
     disableInteractions: () => {
-      const n = document.body;
-      t = n.style.userSelect, e = n.style.touchAction, r = n.style.overscrollBehavior, n.style.userSelect = "none", n.style.touchAction = "none", n.style.overscrollBehavior = "none", window.addEventListener("contextmenu", I), window.addEventListener("selectstart", I), window.addEventListener("touchstart", I), window.addEventListener("touchmove", I);
+      const l = document.body;
+      e = l.style.userSelect, l.style.userSelect = "none", window.addEventListener("contextmenu", L), window.addEventListener("selectstart", L), window.addEventListener("touchstart", L), window.addEventListener("touchmove", L);
     },
     enableInteractions: () => {
-      const n = document.body;
-      n.style.userSelect = t, n.style.touchAction = e, n.style.overscrollBehavior = r, window.removeEventListener("contextmenu", I), window.removeEventListener("selectstart", I), window.removeEventListener("touchstart", I), window.removeEventListener("touchmove", I);
+      const l = document.body;
+      l.style.userSelect = e, l.style.touchAction = t, l.style.overscrollBehavior = n, window.removeEventListener("contextmenu", L), window.removeEventListener("selectstart", L), window.removeEventListener("touchstart", L), window.removeEventListener("touchmove", L);
     }
   };
-}, ae = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, k = (t) => {
-  if (!t)
+}, K = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, R = (e) => {
+  if (!e)
     return {
       x: 0,
       y: 0,
@@ -325,277 +213,308 @@ const C = Se(() => {
       right: 0,
       top: 0
     };
-  const e = t.getBoundingClientRect();
+  const t = e.getBoundingClientRect();
   return {
-    bottom: e.bottom,
-    left: e.left,
-    right: e.right,
-    top: e.top,
-    x: e.x,
-    y: e.y,
-    width: e.width,
-    height: e.height
+    bottom: t.bottom,
+    left: t.left,
+    right: t.right,
+    top: t.top,
+    x: t.x,
+    y: t.y,
+    width: t.width,
+    height: t.height
   };
-}, $ = (t) => ({
-  x: t.x + t.width / 2,
-  y: t.y + t.height / 2
-}), Ze = (t, e) => {
-  const r = k(t);
+}, A = (e) => ({
+  x: e.x + e.width / 2,
+  y: e.y + e.height / 2
+}), fe = (e, t) => {
+  const n = R(e);
   return {
     pixel: {
-      x: e.x - r.x,
-      y: e.y - r.y
+      x: t.x - n.x,
+      y: t.y - n.y
     },
     percent: {
-      x: (e.x - r.x) / r.width * 100,
-      y: (e.y - r.y) / r.height * 100
+      x: (t.x - n.x) / n.width * 100,
+      y: (t.y - n.y) / n.height * 100
     }
   };
-}, ue = (t, e) => {
-  const r = e.x - t.x, o = e.y - t.y;
-  return Math.sqrt(r * r + o * o);
-}, M = (t, e) => t ? e.contains(t) : !1, $e = (t) => {
-  const e = C();
+}, X = (e, t) => {
+  const n = t.x - e.x, i = t.y - e.y;
+  return Math.sqrt(n * n + i * i);
+}, $ = (e, t) => {
+  const n = Math.max(
+    0,
+    Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)
+  ), i = Math.max(
+    0,
+    Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
+  ), a = n * i, l = e.width * e.height, s = t.width * t.height;
+  return (a / l * 100 + a / s * 100) / 2;
+}, M = (e, t) => e ? t.contains(e) : !1, me = (e) => {
+  var u, E;
+  const t = R(e.activeContainer.ref.value), n = A(t), i = ((u = e.pointerPosition.current.value) == null ? void 0 : u.x) ?? 0, a = ((E = e.pointerPosition.current.value) == null ? void 0 : E.y) ?? 0, s = !(t && i >= t.x && i <= t.x + t.width && a >= t.y && a <= t.y + t.height), d = e.draggingElements.value.map((r) => r.node), v = e.elements.value.filter((r) => {
+    if (!r.node || d.some(
+      (f) => f && M(r.node, f)
+    ))
+      return !1;
+    const o = R(r.node);
+    return o && t && K(o, t);
+  }).map((r) => {
+    const o = R(r.node), f = A(o), p = i >= o.x && i <= o.x + o.width && a >= o.y && a <= o.y + o.height, D = $(o, t), x = X(n, f), c = e.elements.value.filter(
+      (g) => g !== r && g.node && r.node && M(r.node, g.node)
+    ).length;
+    return {
+      element: r,
+      node: r.node,
+      isPointerInElement: p,
+      overlapPercent: D,
+      depth: c,
+      centerDistance: x
+    };
+  }).sort((r, o) => {
+    if (!s) {
+      if (r.isPointerInElement && o.isPointerInElement)
+        return o.depth - r.depth;
+      if (r.isPointerInElement !== o.isPointerInElement)
+        return r.isPointerInElement ? -1 : 1;
+    }
+    return Math.abs(r.overlapPercent - o.overlapPercent) <= 1 ? r.centerDistance - o.centerDistance : o.overlapPercent - r.overlapPercent;
+  }), h = e.zones.value.filter((r) => {
+    if (!r.node || d.some(
+      (f) => f && M(r.node, f)
+    ))
+      return !1;
+    const o = R(r.node);
+    return o && t && K(o, t);
+  }).map((r) => {
+    const o = R(r.node), f = A(o), p = i >= o.x && i <= o.x + o.width && a >= o.y && a <= o.y + o.height, D = $(o, t), x = X(n, f), c = e.zones.value.filter(
+      (g) => g !== r && g.node && r.node && M(r.node, g.node)
+    ).length;
+    return {
+      zone: r,
+      node: r.node,
+      isPointerInElement: p,
+      overlapPercent: D,
+      depth: c,
+      centerDistance: x
+    };
+  }).sort((r, o) => {
+    if (!s) {
+      if (r.isPointerInElement && o.isPointerInElement)
+        return o.depth - r.depth;
+      if (r.isPointerInElement !== o.isPointerInElement)
+        return r.isPointerInElement ? -1 : 1;
+    }
+    return Math.abs(r.overlapPercent - o.overlapPercent) <= 1 ? r.centerDistance - o.centerDistance : o.overlapPercent - r.overlapPercent;
+  });
+  return [
+    ...v.map((r) => r.node),
+    ...h.map((r) => r.node)
+  ];
+}, he = (e) => {
+  const t = T();
   return {
-    onPointerStart: (n) => {
-      e.pointerPosition.start.value = { x: n.clientX, y: n.clientY }, e.pointerPosition.current.value = {
-        x: n.clientX,
-        y: n.clientY
+    onPointerStart: (l) => {
+      t.pointerPosition.start.value = { x: l.clientX, y: l.clientY }, t.pointerPosition.current.value = {
+        x: l.clientX,
+        y: l.clientY
       };
-      const { pixel: s, percent: g } = Ze(t.value, {
-        x: n.clientX,
-        y: n.clientY
+      const { pixel: s, percent: d } = fe(e.value, {
+        x: l.clientX,
+        y: l.clientY
       });
-      e.pointerPosition.offset.pixel.value = s, e.pointerPosition.offset.percent.value = g;
+      t.pointerPosition.offset.pixel.value = s, t.pointerPosition.offset.percent.value = d;
     },
-    onPointerMove: (n) => {
-      e.pointerPosition.current.value = {
-        x: n.clientX,
-        y: n.clientY
+    onPointerMove: (l) => {
+      t.pointerPosition.current.value = {
+        x: l.clientX,
+        y: l.clientY
       };
     },
     onPointerEnd: () => {
-      e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
+      t.pointerPosition.current.value = null, t.pointerPosition.start.value = null, t.pointerPosition.offset.pixel.value = null, t.pointerPosition.offset.percent.value = null;
     }
   };
-}, Ke = (t) => {
-  const e = C(), { onPointerStart: r, onPointerMove: o, onPointerEnd: u } = $e(t);
-  let n = null;
-  const s = (i) => {
-    var h, _;
-    const d = e.selectedElements.value.some(
-      (x) => x.node === i
+}, Ee = (e, t) => {
+  const n = T(), { onPointerStart: i, onPointerMove: a, onPointerEnd: l } = he(e);
+  let s = null;
+  const d = (c) => {
+    var C, S;
+    const g = n.selectedElements.value.some(
+      (m) => m.node === c
     );
-    if (e.selectedElements.value.length && d)
-      return e.selectedElements.value.map((x) => {
-        var O, z;
+    if (n.selectedElements.value.length && g)
+      return n.selectedElements.value.map((m) => {
+        var _, w;
         return {
-          ...x,
-          initialHTML: ((O = x.node) == null ? void 0 : O.outerHTML) ?? "",
-          initialRect: (z = x.node) == null ? void 0 : z.getBoundingClientRect()
+          ...m,
+          initialHTML: ((_ = m.node) == null ? void 0 : _.outerHTML) ?? "",
+          initialRect: (w = m.node) == null ? void 0 : w.getBoundingClientRect()
         };
       });
-    e.selectedElements.value = [];
-    const f = e.elements.value.find(
-      (x) => x.node === i
+    n.selectedElements.value = [];
+    const P = n.elements.value.find(
+      (m) => m.node === c
     );
-    return f ? [
+    return P ? [
       {
-        ...f,
-        initialHTML: ((h = f.node) == null ? void 0 : h.outerHTML) ?? "",
-        initialRect: (_ = f.node) == null ? void 0 : _.getBoundingClientRect()
+        ...P,
+        initialHTML: ((C = P.node) == null ? void 0 : C.outerHTML) ?? "",
+        initialRect: (S = P.node) == null ? void 0 : S.getBoundingClientRect()
       }
     ] : [];
-  }, g = (i, d) => {
-    const f = Math.max(
-      0,
-      Math.min(i.x + i.width, d.x + d.width) - Math.max(i.x, d.x)
-    ), h = Math.max(
-      0,
-      Math.min(i.y + i.height, d.y + d.height) - Math.max(i.y, d.y)
-    ), _ = f * h, x = i.width * i.height, O = d.width * d.height;
-    return (_ / x * 100 + _ / O * 100) / 2;
-  }, v = ke(() => {
-    var X, q, j, G, B, J, Q, ee, te, ne;
-    const i = k(e.activeContainer.ref.value), d = $(i), f = ((X = e.pointerPosition.current.value) == null ? void 0 : X.x) ?? 0, h = ((q = e.pointerPosition.current.value) == null ? void 0 : q.y) ?? 0, x = !(i && f >= i.x && f <= i.x + i.width && h >= i.y && h <= i.y + i.height), O = e.draggingElements.value.map((a) => a.node), z = e.visibleElements.value.map((a) => e.elements.value[a]).filter((a) => {
-      if (!a.node || O.some(
-        (L) => L && M(a.node, L)
-      ) || a.groups.length && !!e.draggingElements.value.some(
-        (S) => S.groups.length ? !S.groups.some(
-          (T) => a.groups.includes(T)
-        ) : !1
-      ))
-        return !1;
-      const c = k(a.node);
-      return c && i && ae(c, i);
-    }).map((a) => {
-      const c = k(a.node), L = $(c), S = f >= c.x && f <= c.x + c.width && h >= c.y && h <= c.y + c.height, T = g(c, i), U = ue(d, L), Y = e.elements.value.filter(
-        (A) => A !== a && A.node && a.node && M(
-          a.node,
-          A.node
-        )
-      ).length;
-      return {
-        element: a,
-        isPointerInElement: S,
-        overlapPercent: T,
-        depth: Y,
-        centerDistance: U
-      };
-    }).sort((a, c) => {
-      if (!x) {
-        if (a.isPointerInElement && c.isPointerInElement) return c.depth - a.depth;
-        if (a.isPointerInElement !== c.isPointerInElement) return a.isPointerInElement ? -1 : 1;
-      }
-      return Math.abs(a.overlapPercent - c.overlapPercent) <= 1 ? a.centerDistance - c.centerDistance : c.overlapPercent - a.overlapPercent;
-    }), fe = e.zones.value.filter((a) => {
-      if (!a.node || O.some(
-        (L) => L && M(a.node, L)
-      ) || a.groups.length && !!e.draggingElements.value.some((S) => S.groups.length ? !S.groups.some((T) => a.groups.includes(T)) : !1))
-        return !1;
-      const c = k(a.node);
-      return c && i && ae(c, i);
-    }).map((a) => {
-      const c = k(a.node), L = $(c), S = f >= c.x && f <= c.x + c.width && h >= c.y && h <= c.y + c.height, T = g(c, i), U = ue(d, L), Y = e.zones.value.filter(
-        (A) => A !== a && A.node && a.node && M(a.node, A.node)
-      ).length;
-      return {
-        zone: a,
-        isPointerInElement: S,
-        overlapPercent: T,
-        depth: Y,
-        centerDistance: U
-      };
-    }).sort((a, c) => {
-      if (!x) {
-        if (a.isPointerInElement && c.isPointerInElement) return c.depth - a.depth;
-        if (a.isPointerInElement !== c.isPointerInElement) return a.isPointerInElement ? -1 : 1;
-      }
-      return Math.abs(a.overlapPercent - c.overlapPercent) <= 1 ? a.centerDistance - c.centerDistance : c.overlapPercent - a.overlapPercent;
-    }), R = e.hovered.element.value, V = e.hovered.zone.value;
-    e.hovered.element.value = ((j = z[0]) == null ? void 0 : j.element) ?? null, e.hovered.zone.value = ((G = fe[0]) == null ? void 0 : G.zone) ?? null, e.hovered.element.value !== R && ((B = R == null ? void 0 : R.events) != null && B.onLeave && R.events.onLeave(e), (Q = (J = e.hovered.element.value) == null ? void 0 : J.events) != null && Q.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== V && ((ee = V == null ? void 0 : V.events) != null && ee.onLeave && V.events.onLeave(e), (ne = (te = e.hovered.zone.value) == null ? void 0 : te.events) != null && ne.onHover && e.hovered.zone.value.events.onHover(e));
-  }, 1e3), y = () => {
-    v(), n = requestAnimationFrame(y);
-  }, l = () => {
-    y();
-  }, p = () => {
-    n !== null && (cancelAnimationFrame(n), n = null);
+  }, v = (c) => {
+    if (!c)
+      return { element: null, zone: null };
+    const g = Array.isArray(c) ? c : [c], P = n.draggingElements.value.map(
+      (m) => m.node
+    ), [C] = g.map(
+      (m) => n.elements.value.find((_) => _.node === m)
+    ).filter((m) => m ? m.groups.length ? !n.draggingElements.value.some(
+      (w) => w.groups.length ? !w.groups.some(
+        (O) => m.groups.includes(O)
+      ) : !1
+    ) : !0 : !1), [S] = g.map((m) => {
+      const _ = n.zones.value.find((w) => w.node === m);
+      return !_ || P.some(
+        (w) => w && M(m, w)
+      ) || _.groups.length && !!n.draggingElements.value.some((O) => O.groups.length ? !O.groups.some((j) => _.groups.includes(j)) : !1) ? null : _;
+    });
+    return {
+      element: C ?? null,
+      zone: S ?? null
+    };
+  }, h = (t == null ? void 0 : t.sensor) || me, u = (c) => {
+    var C, S, m, _, w, O;
+    const g = n.hovered.element.value, P = n.hovered.zone.value;
+    n.hovered.element.value = c.element, n.hovered.zone.value = c.zone, n.hovered.element.value !== g && ((C = g == null ? void 0 : g.events) != null && C.onLeave && g.events.onLeave(n), (m = (S = n.hovered.element.value) == null ? void 0 : S.events) != null && m.onHover && n.hovered.element.value.events.onHover(n)), n.hovered.zone.value !== P && ((_ = P == null ? void 0 : P.events) != null && _.onLeave && P.events.onLeave(n), (O = (w = n.hovered.zone.value) == null ? void 0 : w.events) != null && O.onHover && n.hovered.zone.value.events.onHover(n));
+  }, E = ae(() => {
+    const c = h(n), g = v(c);
+    u(g);
+  }, (t == null ? void 0 : t.throttle) ?? 0), r = () => {
+    E(), s = requestAnimationFrame(r);
+  }, o = () => r(), f = () => {
+    s !== null && (cancelAnimationFrame(s), s = null);
   };
   return {
-    activate: (i) => {
-      e.draggingElements.value = s(t.value), r(i), l();
+    activate: (c) => {
+      n.draggingElements.value = d(e.value), i(c), o();
     },
-    track: (i) => {
-      o(i);
+    track: (c) => {
+      a(c);
     },
     deactivate: () => {
-      var i, d;
-      u(), e.hovered.zone.value ? (d = (i = e.hovered.zone.value.events).onDrop) == null || d.call(i, e) : e.draggingElements.value.forEach(
-        (f) => {
-          var h, _;
-          return (_ = (h = f.events).onEnd) == null ? void 0 : _.call(h, e);
+      var c, g;
+      l(), n.hovered.zone.value ? (g = (c = n.hovered.zone.value.events).onDrop) == null || g.call(c, n) : n.draggingElements.value.forEach(
+        (P) => {
+          var C, S;
+          return (S = (C = P.events).onEnd) == null ? void 0 : S.call(C, n);
         }
-      ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, p();
+      ), n.draggingElements.value = [], n.selectedElements.value = [], n.hovered.zone.value = null, n.hovered.element.value = null, f();
     }
   };
-}, je = (t) => {
+}, we = (e) => {
   const {
-    elementRef: e,
-    registerElement: r,
-    unregisterElement: o,
-    isDragging: u,
-    isOvered: n,
+    elementRef: t,
+    registerElement: n,
+    unregisterElement: i,
+    isDragging: a,
+    isOvered: l,
     isAllowed: s
-  } = Ye(t), { disableInteractions: g, enableInteractions: v } = Fe(), { activeContainer: y, pointerPosition: l } = C(), { activate: p, track: E, deactivate: m } = Ke(e), w = (h) => {
-    t != null && t.container && (y.component.value = Ie(t.container)), g(), p(h), document.addEventListener("pointermove", i), document.addEventListener("pointerup", f), document.addEventListener("wheel", d);
-  }, i = (h) => E(h), d = (h) => E(h), f = () => {
-    y.component.value = null, v(), m(), document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", f), document.removeEventListener("wheel", d);
+  } = ve(e), { disableInteractions: d, enableInteractions: v } = ge(), { activeContainer: h, pointerPosition: u } = T(), { activate: E, track: r, deactivate: o } = Ee(t, {
+    throttle: e == null ? void 0 : e.throttle,
+    sensor: e == null ? void 0 : e.sensor
+  }), f = (c) => {
+    e != null && e.container && (h.component.value = le(e.container)), d(), E(c), document.addEventListener("pointermove", p), document.addEventListener("pointerup", x), document.addEventListener("wheel", D);
+  }, p = (c) => r(c), D = (c) => r(c), x = () => {
+    h.component.value = null, v(), o(), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", x), document.removeEventListener("wheel", D);
   };
-  return N(r), W(o), {
-    pointerPosition: l,
-    elementRef: e,
-    isDragging: u,
-    isOvered: n,
+  return V(n), H(i), {
+    pointerPosition: u,
+    elementRef: t,
+    isDragging: a,
+    isOvered: l,
     isAllowed: s,
-    handleDragStart: w
+    handleDragStart: f
   };
-}, We = (t) => {
-  const { zones: e, hovered: r, draggingElements: o, isDragging: u } = C(), n = D(null), s = P(() => {
-    var l;
-    return ((l = r.zone.value) == null ? void 0 : l.node) === n.value;
-  }), g = P(() => {
-    if (!n.value || !u.value) return !1;
-    const l = e.value.find(
-      (p) => p.node === n.value
+}, ye = (e) => {
+  const { zones: t, hovered: n, draggingElements: i, isDragging: a } = T(), l = y(null), s = I(() => {
+    var u;
+    return ((u = n.zone.value) == null ? void 0 : u.node) === l.value;
+  }), d = I(() => {
+    if (!l.value || !a.value) return !1;
+    const u = t.value.find(
+      (E) => E.node === l.value
     );
-    return l != null && l.groups.length ? !o.value.some((p) => p.groups.length ? !p.groups.some(
-      (E) => l.groups.includes(E)
+    return u != null && u.groups.length ? !i.value.some((E) => E.groups.length ? !E.groups.some(
+      (r) => u.groups.includes(r)
     ) : !1) : !0;
   });
-  return { elementRef: n, registerZone: () => {
-    if (!n.value) throw new Error("elementRef is not set");
-    e.value.push({
-      node: n.value,
-      groups: (t == null ? void 0 : t.groups) ?? [],
-      events: (t == null ? void 0 : t.events) ?? {},
-      data: (t == null ? void 0 : t.data) ?? void 0
-    }), n.value.setAttribute("data-dnd-droppable", "true");
+  return { elementRef: l, registerZone: () => {
+    if (!l.value) throw new Error("elementRef is not set");
+    t.value.push({
+      node: l.value,
+      groups: (e == null ? void 0 : e.groups) ?? [],
+      events: (e == null ? void 0 : e.events) ?? {},
+      data: (e == null ? void 0 : e.data) ?? void 0
+    }), l.value.setAttribute("data-dnd-droppable", "true");
   }, unregisterZone: () => {
-    if (!n.value) throw new Error("elementRef is not set");
-    const l = e.value.findIndex(
-      (p) => p.node === n.value
+    if (!l.value) throw new Error("elementRef is not set");
+    const u = t.value.findIndex(
+      (E) => E.node === l.value
     );
-    l !== -1 && e.value.splice(l, 1);
-  }, isOvered: s, isAllowed: g };
-}, Ge = (t) => {
-  const { elementRef: e, registerZone: r, unregisterZone: o, isOvered: u, isAllowed: n } = We(t);
-  return N(r), W(o), { elementRef: e, isOvered: u, isAllowed: n };
-}, Be = (t) => {
-  const { selectedElements: e, elements: r } = C(), o = P(
-    () => r.value.find((l) => l.node === t.value)
-  ), u = P(
-    () => e.value.some((l) => l.node === t.value)
-  ), n = P(() => t.value ? e.value.some(
-    (l) => l.node && M(
-      l.node,
-      t.value
+    u !== -1 && t.value.splice(u, 1);
+  }, isOvered: s, isAllowed: d };
+}, De = (e) => {
+  const { elementRef: t, registerZone: n, unregisterZone: i, isOvered: a, isAllowed: l } = ye(e);
+  return V(n), H(i), { elementRef: t, isOvered: a, isAllowed: l };
+}, _e = (e) => {
+  const { selectedElements: t, elements: n } = T(), i = I(
+    () => n.value.find((u) => u.node === e.value)
+  ), a = I(
+    () => t.value.some((u) => u.node === e.value)
+  ), l = I(() => e.value ? t.value.some(
+    (u) => u.node && M(
+      u.node,
+      e.value
     )
-  ) : !1), s = P(() => t.value ? e.value.some(
-    (l) => l.node && M(
-      t.value,
-      l.node
+  ) : !1), s = I(() => e.value ? t.value.some(
+    (u) => u.node && M(
+      e.value,
+      u.node
     )
-  ) : !1), g = () => {
-    o.value && (e.value = e.value.filter(
-      (l) => l.node !== t.value
+  ) : !1), d = () => {
+    i.value && (t.value = t.value.filter(
+      (u) => u.node !== e.value
     ));
   }, v = () => {
-    o.value && (n.value && (e.value = e.value.filter(
-      (l) => l.node && !M(
-        l.node,
-        t.value
+    i.value && (l.value && (t.value = t.value.filter(
+      (u) => u.node && !M(
+        u.node,
+        e.value
       )
-    )), s.value && (e.value = e.value.filter(
-      (l) => l.node && !M(
-        t.value,
-        l.node
+    )), s.value && (t.value = t.value.filter(
+      (u) => u.node && !M(
+        e.value,
+        u.node
       )
-    )), e.value.push(o.value));
+    )), t.value.push(i.value));
   };
   return {
-    handleUnselect: g,
+    handleUnselect: d,
     handleSelect: v,
     handleToggleSelect: () => {
-      o.value && (e.value.some((l) => l.node === t.value) ? g() : v());
+      i.value && (t.value.some((u) => u.node === e.value) ? d() : v());
     },
-    isSelected: u,
-    isParentOfSelected: n
+    isSelected: a,
+    isParentOfSelected: l
   };
 };
 export {
-  qe as default,
-  C as useDnDStore,
-  je as useDraggable,
-  Ge as useDroppable,
-  Be as useSelection
+  Pe as default,
+  T as useDnDStore,
+  we as useDraggable,
+  De as useDroppable,
+  _e as useSelection
 };