@vue-dnd-kit/core
Version:
Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces
901 lines (900 loc) • 33.7 kB
JavaScript
var he = Object.defineProperty;
var pe = (n, e, t) => e in n ? he(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var V = (n, e, t) => pe(n, typeof e != "symbol" ? e + "" : e, t);
import { shallowRef as C, ref as F, computed as O, onMounted as te, onUnmounted as ye, defineComponent as fe, createElementBlock as j, createCommentVNode as Ee, unref as P, openBlock as X, normalizeStyle as re, Fragment as ae, renderList as we, createBlock as J, resolveDynamicComponent as ee, Transition as Pe, withCtx as xe, normalizeProps as le, guardReactiveProps as Me, mergeProps as Ae, createVNode as Le, render as se, useId as be, onBeforeUnmount as ge } from "vue";
import { createGlobalState as me, useMagicKeys as Ie, useThrottleFn as ze } from "@vueuse/core";
const M = class M {
};
V(M, "remove", (e, t) => {
if (!e || t === void 0) return;
const [a] = e.splice(t, 1);
return a;
}), V(M, "insert", (e, t, a) => {
!e || t === void 0 || e.splice(t, 0, a);
}), V(M, "move", (e, t, a, l) => {
if (!e || !a || t === void 0 || l === void 0)
return;
const s = M.remove(e, t);
M.insert(a, l, s);
}), V(M, "swap", (e, t, a, l) => {
if (!e || !a || t === void 0 || l === void 0)
return;
const s = e[t], o = a[l];
e[t] = o, a[l] = s;
}), V(M, "copy", (e, t, a, l) => {
if (!e || t === void 0 || !a || l === void 0)
return;
const s = e[t];
M.insert(a, l, s);
}), V(M, "applyTransfer", (e) => {
var l, s, o, g, i, c, d;
const t = e.hovered.element.value, a = e.hovered.zone.value;
if (t) {
const f = (s = (l = e.elementsMap.value.get(t)) == null ? void 0 : l.data) == null ? void 0 : s.source, r = (g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.index, v = e.draggingElements.value.values().next().value, u = (i = v == null ? void 0 : v.data) == null ? void 0 : i.index, m = u !== void 0 && r !== void 0 && u > r ? 1 : -1;
Array.from(
e.draggingElements.value.values()
).sort(
(h, L) => {
var b, z;
return m * ((((b = h.data) == null ? void 0 : b.index) || 0) - (((z = L.data) == null ? void 0 : z.index) || 0));
}
).forEach(
(h) => {
var L, b;
return M.move(
(L = h.data) == null ? void 0 : L.source,
(b = h.data) == null ? void 0 : b.index,
f,
r
);
}
);
} else if (a) {
const f = (d = (c = e.zonesMap.value.get(a)) == null ? void 0 : c.data) == null ? void 0 : d.source, r = f == null ? void 0 : f.length;
Array.from(
e.draggingElements.value.values()
).sort((u, m) => {
var p, h;
return (((p = m.data) == null ? void 0 : p.index) || 0) - (((h = u.data) == null ? void 0 : h.index) || 0);
}).forEach(
(u) => {
var m, p;
return M.move(
(m = u.data) == null ? void 0 : m.source,
(p = u.data) == null ? void 0 : p.index,
f,
r
);
}
);
}
}), V(M, "applyCopy", (e) => {
var l, s, o, g, i, c;
const t = e.hovered.element.value, a = e.hovered.zone.value;
if (t) {
const d = (s = (l = e.elementsMap.value.get(t)) == null ? void 0 : l.data) == null ? void 0 : s.source, f = (g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.index;
Array.from(
e.draggingElements.value.values()
).sort((v, u) => {
var m, p;
return (((m = u.data) == null ? void 0 : m.index) || 0) - (((p = v.data) == null ? void 0 : p.index) || 0);
}).forEach(
(v) => {
var u, m;
return M.copy(
(u = v.data) == null ? void 0 : u.source,
(m = v.data) == null ? void 0 : m.index,
d,
f
);
}
);
} else if (a) {
const d = (c = (i = e.zonesMap.value.get(a)) == null ? void 0 : i.data) == null ? void 0 : c.source, f = d == null ? void 0 : d.length;
Array.from(
e.draggingElements.value.values()
).sort((v, u) => {
var m, p;
return (((m = u.data) == null ? void 0 : m.index) || 0) - (((p = v.data) == null ? void 0 : p.index) || 0);
}).forEach(
(v) => {
var u, m;
return M.copy(
(u = v.data) == null ? void 0 : u.source,
(m = v.data) == null ? void 0 : m.index,
d,
f
);
}
);
}
}), V(M, "applySwap", (e) => {
var l, s, o, g, i, c, d, f;
const t = e.hovered.element.value, a = e.hovered.zone.value;
if (t && e.draggingElements.value.size === 1) {
const r = e.draggingElements.value.values().next().value;
M.swap(
(l = r == null ? void 0 : r.data) == null ? void 0 : l.source,
(s = r == null ? void 0 : r.data) == null ? void 0 : s.index,
(g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.source,
(c = (i = e.elementsMap.value.get(t)) == null ? void 0 : i.data) == null ? void 0 : c.index
);
} else if (a) {
const r = (f = (d = e.zonesMap.value.get(a)) == null ? void 0 : d.data) == null ? void 0 : f.source, v = r == null ? void 0 : r.length;
Array.from(
e.draggingElements.value.values()
).sort((m, p) => {
var h, L;
return (((h = p.data) == null ? void 0 : h.index) || 0) - (((L = m.data) == null ? void 0 : L.index) || 0);
}).forEach(
(m) => {
var p, h;
return M.move(
(p = m.data) == null ? void 0 : p.source,
(h = m.data) == null ? void 0 : h.index,
r,
v
);
}
);
}
}), V(M, "applyRemove", (e) => {
Array.from(
e.draggingElements.value.values()
).sort((a, l) => {
var s, o;
return (((s = l.data) == null ? void 0 : s.index) || 0) - (((o = a.data) == null ? void 0 : o.index) || 0);
}).forEach((a) => {
var l, s;
(l = a.data) != null && l.source && ((s = a.data) == null ? void 0 : s.index) !== void 0 && M.remove(a.data.source, a.data.index);
});
}), V(M, "applyInsert", (e, t) => {
var s, o, g, i, c, d;
const a = e.hovered.element.value, l = e.hovered.zone.value;
if (a && t.length > 0) {
const f = (o = (s = e.elementsMap.value.get(a)) == null ? void 0 : s.data) == null ? void 0 : o.source, r = (i = (g = e.elementsMap.value.get(a)) == null ? void 0 : g.data) == null ? void 0 : i.index;
t.forEach((v) => {
M.insert(f, r, v);
});
} else if (l) {
const f = (d = (c = e.zonesMap.value.get(l)) == null ? void 0 : c.data) == null ? void 0 : d.source, r = f == null ? void 0 : f.length;
t.forEach((v) => {
M.insert(f, r, v);
});
}
});
let oe = M;
const Y = me(() => {
const n = C(!1), e = F(
/* @__PURE__ */ new Map()
), t = O(() => e.value.size > 0), a = {
component: F(null),
ref: C(null),
options: C(null),
props: C(null),
animating: {
enter: C(!1),
leave: C(!1),
appear: C(!1)
}
}, l = F(/* @__PURE__ */ new Map()), s = F(/* @__PURE__ */ new Set()), o = F(/* @__PURE__ */ new Map()), g = C(/* @__PURE__ */ new Set()), i = C(/* @__PURE__ */ new Set()), c = typeof window < "u" && "IntersectionObserver" in window, d = c ? new IntersectionObserver((x) => {
x.forEach(
(y) => i.value[y.isIntersecting ? "add" : "delete"](
y.target
)
);
}) : null, f = c ? new IntersectionObserver((x) => {
x.forEach(
(y) => g.value[y.isIntersecting ? "add" : "delete"](
y.target
)
);
}) : null, r = (x, y) => {
d && (x === "add" ? d.observe(y) : (d.unobserve(y), i.value.delete(y)));
}, v = (x, y) => {
f && (x === "add" ? f.observe(y) : (f.unobserve(y), g.value.delete(y)));
}, u = {
start: C(null),
current: C(null),
offset: {
percent: C(null),
pixel: C(null)
}
}, { KeyW: m, KeyS: p, KeyA: h, KeyD: L, ctrl: b, shift: z, alt: B, meta: D } = Ie(), w = {
zone: C(null),
element: C(null)
};
return {
draggingElements: e,
isDragging: t,
activeContainer: a,
elementsMap: l,
selectedElements: s,
zonesMap: o,
visibleZones: g,
visibleElements: i,
pointerPosition: u,
keyboard: {
w: m,
s: p,
a: h,
d: L,
ctrl: b,
shift: z,
alt: B,
meta: D
},
hovered: w,
isPending: n,
handleDragElementIntersection: r,
handleDropZoneIntersection: v
};
}), Ce = (n) => {
const e = F(null), { draggingElements: t, pointerPosition: a, isDragging: l, activeContainer: s } = Y();
return te(() => {
s.ref = e, s.options.value = n ?? null;
}), ye(() => {
s.ref.value = null, s.options.value = null;
}), {
elementRef: e,
draggingElements: t,
pointerPosition: a,
isDragging: l,
animating: s.animating
};
}, Se = ["innerHTML"], De = /* @__PURE__ */ fe({
__name: "DefaultOverlay",
props: {
styles: {}
},
setup(n) {
const { elementRef: e, pointerPosition: t, isDragging: a, draggingElements: l } = Ce(), s = O(() => {
var o, g, i, c;
return {
transform: `translate3d(${(((o = t.current.value) == null ? void 0 : o.x) ?? 0) - (((g = t.offset.pixel.value) == null ? void 0 : g.x) ?? 0)}px, ${(((i = t.current.value) == null ? void 0 : i.y) ?? 0) - (((c = t.offset.pixel.value) == null ? void 0 : c.y) ?? 0)}px, 0)`,
zIndex: 1e3,
position: "fixed",
top: 0,
left: 0,
transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)",
...n.styles
};
});
return (o, g) => P(a) ? (X(), j("div", {
key: 0,
ref_key: "elementRef",
ref: e,
style: re(s.value)
}, [
(X(!0), j(ae, null, we(P(l), ([i, c]) => {
var d, f;
return X(), j(ae, {
key: c.id
}, [
c.layer ? (X(), J(ee(c.layer), {
key: 0,
node: i,
data: c.data,
id: c.id,
groups: c.groups
}, null, 8, ["node", "data", "id", "groups"])) : (X(), j("div", {
key: 1,
innerHTML: c.initialHTML,
style: re({
width: `${(d = c.initialRect) == null ? void 0 : d.width}px`,
height: `${(f = c.initialRect) == null ? void 0 : f.height}px`
})
}, null, 12, Se))
], 64);
}), 128))
], 4)) : Ee("", !0);
}
}), ie = /* @__PURE__ */ fe({
__name: "DragOverlay",
props: {
styles: {}
},
setup(n) {
const e = n, { activeContainer: t } = Y(), a = O(() => ({
component: t.component.value ?? De,
props: {
...e,
...t.props.value
}
}));
return (l, s) => P(t).options.value ? (X(), J(Pe, {
key: 0,
name: P(t).options.value.name,
duration: P(t).options.value.duration,
"enter-from-class": P(t).options.value.enterFromClass,
"enter-to-class": P(t).options.value.enterToClass,
"enter-active-class": P(t).options.value.enterActiveClass,
"leave-from-class": P(t).options.value.leaveFromClass,
"leave-to-class": P(t).options.value.leaveToClass,
"leave-active-class": P(t).options.value.leaveActiveClass,
"appear-active-class": P(t).options.value.appearActiveClass,
"appear-from-class": P(t).options.value.appearFromClass,
"appear-to-class": P(t).options.value.appearToClass,
mode: P(t).options.value.mode,
type: P(t).options.value.type,
css: P(t).options.value.css,
appear: !0,
persisted: P(t).options.value.persisted,
onEnter: P(t).options.value.onEnter,
onLeave: P(t).options.value.onLeave,
onBeforeEnter: P(t).options.value.onBeforeEnter,
onBeforeLeave: P(t).options.value.onBeforeLeave,
onBeforeAppear: P(t).options.value.onBeforeAppear,
onAfterEnter: P(t).options.value.onAfterEnter,
onAfterLeave: P(t).options.value.onAfterLeave,
onAfterAppear: P(t).options.value.onAfterAppear
}, {
default: xe(() => [
(X(), J(ee(a.value.component || a.value), le(Me(a.value.props || {})), null, 16))
]),
_: 1
}, 8, ["name", "duration", "enter-from-class", "enter-to-class", "enter-active-class", "leave-from-class", "leave-to-class", "leave-active-class", "appear-active-class", "appear-from-class", "appear-to-class", "mode", "type", "css", "persisted", "onEnter", "onLeave", "onBeforeEnter", "onBeforeLeave", "onBeforeAppear", "onAfterEnter", "onAfterLeave", "onAfterAppear"])) : (X(), J(ee(a.value.component || a.value), le(Ae({ key: 1 }, a.value.props || {})), null, 16));
}
}), He = {
install(n, e) {
n.component("DragOverlay", ie);
const t = n.mount;
n.mount = function(l) {
var g, i, c, d, f, r, v;
const s = t.call(this, l), o = typeof l == "string" ? document.querySelector(l) : l;
if (o && o instanceof Element && !o.querySelector("#vue-dnd-kit-overlay")) {
const u = document.createElement("div");
u.id = "vue-dnd-kit-overlay", u.style.pointerEvents = "none", (g = e == null ? void 0 : e.overlayPosition) != null && g.zIndex && (u.style.zIndex = e.overlayPosition.zIndex.toString()), (i = e == null ? void 0 : e.overlayPosition) != null && i.className && (u.className = e.overlayPosition.className);
const m = ((c = e == null ? void 0 : e.overlayPosition) == null ? void 0 : c.method) || "append", p = (d = e == null ? void 0 : e.overlayPosition) != null && d.target ? typeof e.overlayPosition.target == "string" ? document.querySelector(e.overlayPosition.target) : e.overlayPosition.target : o;
if (p && p instanceof Element)
switch (m) {
case "prepend":
p.insertBefore(
u,
p.firstChild
);
break;
case "after":
(f = p.parentNode) == null || f.insertBefore(
u,
p.nextSibling
);
break;
case "before":
(r = p.parentNode) == null || r.insertBefore(
u,
p
);
break;
case "append":
default:
p.appendChild(u);
break;
}
else
o.appendChild(u);
const h = Le(ie, {
styles: (v = e == null ? void 0 : e.defaultOverlay) == null ? void 0 : v.styles
});
se(h, u), n.__VUE_DND_KIT_OVERLAY__ = {
container: u,
vnode: h,
options: (e == null ? void 0 : e.defaultOverlay) || {}
};
const L = Y();
n.__VUE_DND_KIT_STORE__ = L;
}
return s;
};
const a = n.unmount;
n.unmount = function() {
return n.__VUE_DND_KIT_OVERLAY__ && (se(null, n.__VUE_DND_KIT_OVERLAY__.container), delete n.__VUE_DND_KIT_OVERLAY__), a.call(this);
};
}
}, ue = (n, e) => n.x < e.x + e.width && n.x + n.width > e.x && n.y < e.y + e.height && n.y + n.height > e.y, $ = (n) => {
if (!n)
return {
x: 0,
y: 0,
width: 0,
height: 0,
bottom: 0,
left: 0,
right: 0,
top: 0
};
const e = n.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
};
}, Q = (n) => ({
x: n.x + n.width / 2,
y: n.y + n.height / 2
}), _e = (n, e) => {
const t = $(n);
return {
pixel: {
x: e.x - t.x,
y: e.y - t.y
},
percent: {
x: (e.x - t.x) / t.width * 100,
y: (e.y - t.y) / t.height * 100
}
};
}, ce = (n, e) => {
const t = e.x - n.x, a = e.y - n.y;
return Math.sqrt(t * t + a * a);
}, ve = (n, e) => {
const t = Math.max(
0,
Math.min(n.x + n.width, e.x + e.width) - Math.max(n.x, e.x)
), a = Math.max(
0,
Math.min(n.y + n.height, e.y + e.height) - Math.max(n.y, e.y)
), l = t * a, s = n.width * n.height, o = e.width * e.height;
return (l / s * 100 + l / o * 100) / 2;
}, de = "data-vue-dnd-kit-draggable", Z = (n) => {
n.preventDefault();
}, R = (n) => ({
items: Array.from(n.draggingElements.value.values())
}), ke = (n) => {
const {
elementsMap: e,
draggingElements: t,
hovered: a,
selectedElements: l,
isDragging: s,
visibleElements: o,
handleDragElementIntersection: g
} = Y(), i = F(null), c = O(() => a.element.value === i.value), d = C((n == null ? void 0 : n.id) || be()), f = C((n == null ? void 0 : n.disabled) ?? !1), r = O(() => f.value || !i.value || !e.value.has(i.value) ? !1 : t.value.has(i.value)), v = O(() => {
if (f.value || !i.value || !s.value || !o.value.has(i.value)) return !1;
const h = e.value.get(i.value);
return h != null && h.groups.length ? !Array.from(t.value.entries()).some(
([L, b]) => b.groups.length ? !b.groups.some(
(z) => h.groups.includes(z)
) : !1
) : !0;
}), u = O(() => {
if (f.value || !i.value || !s.value || !o.value.has(i.value) || a.element.value !== i.value) return !1;
const h = e.value.get(i.value);
return h != null && h.groups.length ? !Array.from(t.value.entries()).some(
([L, b]) => b.groups.length ? !b.groups.some(
(z) => h.groups.includes(z)
) : !1
) : !0;
});
return {
elementRef: i,
registerElement: () => {
if (!i.value) throw new Error("ElementRef is not set");
e.value.set(i.value, {
node: i.value,
groups: (n == null ? void 0 : n.groups) ?? [],
layer: (n == null ? void 0 : n.layer) ?? null,
defaultLayer: (n == null ? void 0 : n.layer) ?? null,
events: (n == null ? void 0 : n.events) ?? {},
data: (n == null ? void 0 : n.data) ?? null,
id: d.value,
disabled: f ?? !1
}), g("add", i.value), i.value.addEventListener("dragstart", Z), i.value.addEventListener("drag", Z), i.value.setAttribute(de, "true"), i.value.setAttribute("draggable", "false");
},
unregisterElement: () => {
i.value && (e.value.delete(i.value), l.value.delete(i.value), i.value.removeEventListener("dragstart", Z), i.value.removeEventListener("drag", Z), i.value.removeAttribute(de), i.value.removeAttribute("draggable"));
},
isDragging: r,
isOvered: c,
isAllowed: v,
isLazyAllowed: u,
id: d
};
}, k = (n, e) => n ? e.contains(n) : !1, Ke = (n) => {
var d, f;
const e = $(n.activeContainer.ref.value), t = Q(e), a = ((d = n.pointerPosition.current.value) == null ? void 0 : d.x) ?? 0, l = ((f = n.pointerPosition.current.value) == null ? void 0 : f.y) ?? 0, o = !(e && a >= e.x && a <= e.x + e.width && l >= e.y && l <= e.y + e.height), g = Array.from(n.draggingElements.value.keys()), i = Array.from(n.visibleElements.value.entries()).filter(([r, v]) => {
if (!r) return !1;
const u = $(r);
return u && e && ue(u, e);
}).map(([r, v]) => {
const u = $(r), m = Q(u), p = a >= u.x && a <= u.x + u.width && l >= u.y && l <= u.y + u.height, h = ve(u, e), L = ce(t, m);
let b = 0;
for (const [z, B] of n.visibleElements.value.entries())
z !== r && z && r && k(r, z) && b++;
return {
element: v,
node: r,
isPointerInElement: p,
overlapPercent: h,
depth: b,
centerDistance: L
};
}).sort((r, v) => {
if (!o) {
if (r.isPointerInElement && v.isPointerInElement)
return v.depth - r.depth;
if (r.isPointerInElement !== v.isPointerInElement)
return r.isPointerInElement ? -1 : 1;
}
return Math.abs(r.overlapPercent - v.overlapPercent) <= 1 ? r.centerDistance - v.centerDistance : v.overlapPercent - r.overlapPercent;
}), c = Array.from(n.visibleZones.value.entries()).filter(([r, v]) => {
if (!r || g.some(
(m) => m && k(r, m)
))
return !1;
const u = $(r);
return u && e && ue(u, e);
}).map(([r, v]) => {
const u = $(r), m = Q(u), p = a >= u.x && a <= u.x + u.width && l >= u.y && l <= u.y + u.height, h = ve(u, e), L = ce(t, m);
let b = 0;
for (const [z, B] of n.visibleZones.value.entries())
z !== r && z && r && k(r, z) && b++;
return {
zone: v,
node: r,
isPointerInElement: p,
overlapPercent: h,
depth: b,
centerDistance: L
};
}).sort((r, v) => {
if (!o) {
if (r.isPointerInElement && v.isPointerInElement)
return v.depth - r.depth;
if (r.isPointerInElement !== v.isPointerInElement)
return r.isPointerInElement ? -1 : 1;
}
return Math.abs(r.overlapPercent - v.overlapPercent) <= 1 ? r.centerDistance - v.centerDistance : v.overlapPercent - r.overlapPercent;
});
return [
...i.map((r) => r.node),
...c.map((r) => r.node)
];
}, Te = (n, e) => {
const { pointerPosition: t, keyboard: a } = Y(), l = (e == null ? void 0 : e.moveStep) || 10;
return {
onKeyboardStart: (i) => {
var r;
Z(i);
const c = $(n.value);
(r = n.value) == null || r.blur();
const d = c.x + c.width / 2, f = c.y + c.height / 2;
t.start.value = {
x: d,
y: f
}, t.current.value = {
x: d,
y: f
}, t.offset.pixel.value = {
x: c.width / 2,
y: c.height / 2
}, t.offset.percent.value = {
x: 50,
y: 50
};
},
onKeyboardMove: () => {
if (!t.current.value) return;
const i = t.current.value.x, c = t.current.value.y;
let d = i, f = c;
a.w.value && (f -= l), a.s.value && (f += l), a.a.value && (d -= l), a.d.value && (d += l), t.current.value = {
x: d,
y: f
};
},
onKeyboardEnd: () => {
t.current.value = null, t.start.value = null, t.offset.pixel.value = null, t.offset.percent.value = null;
}
};
}, Ze = (n) => {
const e = Y();
return {
onPointerStart: (s) => {
e.pointerPosition.start.value = { x: s.clientX, y: s.clientY }, e.pointerPosition.current.value = {
x: s.clientX,
y: s.clientY
};
const { pixel: o, percent: g } = _e(n.value, {
x: s.clientX,
y: s.clientY
});
e.pointerPosition.offset.pixel.value = o, e.pointerPosition.offset.percent.value = g;
},
onPointerMove: (s) => {
e.isPending.value || (e.pointerPosition.current.value = {
x: s.clientX,
y: s.clientY
});
},
onPointerEnd: () => {
e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
}
};
}, Oe = (n, e) => {
var B, D;
const t = Y(), { onPointerStart: a, onPointerMove: l, onPointerEnd: s } = Ze(n), { onKeyboardStart: o, onKeyboardMove: g, onKeyboardEnd: i } = Te(
n,
e == null ? void 0 : e.keyboard
);
let c = null;
const d = (w) => {
var _, S;
if (!w) return /* @__PURE__ */ new Map();
const x = t.selectedElements.value.has(w);
if (t.selectedElements.value.size > 0 && x) {
const U = /* @__PURE__ */ new Map();
return t.selectedElements.value.forEach((G) => {
var A, K;
const E = t.elementsMap.value.get(G);
E && U.set(G, {
...E,
initialHTML: ((A = E.node) == null ? void 0 : A.outerHTML) ?? "",
initialRect: (K = E.node) == null ? void 0 : K.getBoundingClientRect()
});
}), U;
}
t.selectedElements.value.clear();
const y = t.elementsMap.value.get(w);
if (!y) return /* @__PURE__ */ new Map();
const I = /* @__PURE__ */ new Map();
return I.set(w, {
...y,
initialHTML: ((_ = y.node) == null ? void 0 : _.outerHTML) ?? "",
initialRect: (S = y.node) == null ? void 0 : S.getBoundingClientRect()
}), I;
}, f = (w) => {
if (!w)
return { element: null, zone: null };
const x = Array.isArray(w) ? w : [w], y = Array.from(t.draggingElements.value.keys()), I = Array.from(t.zonesMap.value.entries()).flatMap(
([E, A]) => A.disabled ? [E] : []
), _ = Array.from(
t.elementsMap.value.entries()
).flatMap(([E, A]) => A.disabled ? [E] : []), S = x.find((E) => {
if (!t.visibleZones.value.has(E)) return !1;
const A = t.zonesMap.value.get(E);
return !(!A || A.disabled || I.some(
(N) => E === N || k(E, N)
) || y.some(
(N) => N && (N === A.node || k(A.node, N))
) || A.groups.length && !!Array.from(
t.draggingElements.value.values()
).some((H) => H.groups.length ? !H.groups.some((T) => A.groups.includes(T)) : !1));
});
return S ? {
element: x.filter((E) => {
if (!t.visibleElements.value.has(E) || !t.elementsMap.value.has(E)) return !1;
const A = t.elementsMap.value.get(E);
if (A != null && A.disabled) return !1;
const K = I.some(
(T) => E === T || k(E, T)
), N = _.some(
(T) => E === T || k(
E,
T
)
);
return K || N ? !1 : !Array.from(
t.draggingElements.value.values()
).some((T) => T.groups.length ? !T.groups.some(
(W) => {
var q;
return (q = t.elementsMap.value.get(E)) == null ? void 0 : q.groups.includes(W);
}
) : !1);
}).find((E) => y.some(
(K) => K && (K === E || k(E, K) || k(K, E))
) ? !1 : E === S || k(
E,
S
)) || null,
zone: S
} : { element: null, zone: null };
}, r = ((B = e == null ? void 0 : e.sensor) == null ? void 0 : B.setup) || Ke, v = (w) => {
var S, U, G, E, A, K, N, H, T, W, q, ne;
const x = t.hovered.element.value, y = t.hovered.zone.value, I = w.element, _ = w.zone;
t.hovered.element.value = I, t.hovered.zone.value = _, x !== I && (x && ((G = (U = (S = t.elementsMap.value.get(x)) == null ? void 0 : S.events) == null ? void 0 : U.onLeave) == null || G.call(U, t, R(t))), I && ((K = (A = (E = t.elementsMap.value.get(I)) == null ? void 0 : E.events) == null ? void 0 : A.onHover) == null || K.call(A, t, R(t)))), y !== _ && (y && ((T = (H = (N = t.zonesMap.value.get(y)) == null ? void 0 : N.events) == null ? void 0 : H.onLeave) == null || T.call(H, t, R(t))), _ && ((ne = (q = (W = t.zonesMap.value.get(_)) == null ? void 0 : W.events) == null ? void 0 : q.onHover) == null || ne.call(q, t, R(t))));
}, u = ze(() => {
const w = r(t), x = f(w);
v(x);
}, ((D = e == null ? void 0 : e.sensor) == null ? void 0 : D.throttle) ?? 0), m = () => {
u(), c = requestAnimationFrame(m);
}, p = () => m(), h = () => {
c !== null && (s(), i(), cancelAnimationFrame(c), c = null);
};
return {
activate: (w) => {
t.draggingElements.value = d(n.value), t.draggingElements.value.forEach(
(x) => {
var y, I;
return (I = (y = x.events).onStart) == null ? void 0 : I.call(y, t, R(t));
}
), w instanceof PointerEvent ? a(w) : o(w), p();
},
track: (w) => {
t.draggingElements.value.forEach(
(x) => {
var y, I;
return (I = (y = x.events).onMove) == null ? void 0 : I.call(y, t, R(t));
}
), w instanceof KeyboardEvent ? g() : l(w);
},
deactivate: async (w = !0) => {
var x, y;
if (t.hovered.zone.value) {
const I = t.zonesMap.value.get(t.hovered.zone.value), _ = (y = I == null ? void 0 : (x = I.events).onDrop) == null ? void 0 : y.call(x, t, R(t));
if (_ instanceof Promise)
try {
t.isPending.value = !0;
const S = await _;
return S && (w && t.selectedElements.value.clear(), t.draggingElements.value.clear(), t.hovered.zone.value = null, t.hovered.element.value = null, h()), S;
} catch {
return !1;
} finally {
t.isPending.value = !1;
}
else
w && t.selectedElements.value.clear(), t.draggingElements.value.clear(), t.hovered.zone.value = null, t.hovered.element.value = null, h();
} else
t.draggingElements.value.forEach(
(I) => {
var _, S;
return (S = (_ = I.events).onEnd) == null ? void 0 : S.call(_, t, R(t));
}
), w && t.selectedElements.value.clear(), t.draggingElements.value.clear(), t.hovered.zone.value = null, t.hovered.element.value = null, h();
}
};
}, Ne = me(() => {
let n = "", e = "", t = "", a = null, l = null, s = null, o = null, g = null;
const { activeContainer: i, isPending: c, elementsMap: d } = Y(), f = () => {
const m = document.body;
n = m.style.userSelect, m.style.userSelect = "none", window.addEventListener("contextmenu", Z), window.addEventListener("selectstart", Z), window.addEventListener("touchstart", Z), window.addEventListener("touchmove", Z);
}, r = () => {
const m = document.body;
m.style.userSelect = n, m.style.touchAction = e, m.style.overscrollBehavior = t, window.removeEventListener("contextmenu", Z), window.removeEventListener("selectstart", Z), window.removeEventListener("touchstart", Z), window.removeEventListener("touchmove", Z);
}, v = () => {
a && (document.removeEventListener("pointermove", a), a = null), l && (document.removeEventListener("pointerup", l), l = null), s && (s = null), o && (document.removeEventListener("wheel", o), o = null), g && (document.removeEventListener("keydown", g), document.removeEventListener("keypress", g), document.removeEventListener("keyup", g), g = null);
};
return {
handleDragStart: (m, p, h) => {
if (!p.value || c.value) return;
const L = d.value.get(p.value);
if (L != null && L.disabled) return;
v(), m.target.blur(), h != null && h.container && (i.component.value = h.container), h != null && h.containerProps && (i.props.value = h.containerProps);
const { activate: b, track: z, deactivate: B } = Oe(p, h);
l = () => {
B(!0).then((D) => {
D !== !1 && (i.component.value = null, r(), B(!0), v());
});
}, s = () => {
i.component.value = null, r(), B(!1), v();
}, a = (D) => z(D), o = (D) => z(D), g = (D) => {
D.type === "keyup" && (D.code === "Escape" && (s == null || s()), D.code === "Enter" && (l == null || l())), z(D);
}, f(), b(m), document.addEventListener("pointermove", a), document.addEventListener("pointerup", l), document.addEventListener("wheel", o), document.addEventListener("keydown", g), document.addEventListener("keypress", g), document.addEventListener("keyup", g);
}
};
}), Re = (n) => {
const {
id: e,
elementRef: t,
isDragging: a,
isOvered: l,
isAllowed: s,
isLazyAllowed: o,
registerElement: g,
unregisterElement: i
} = ke(n), { pointerPosition: c } = Y(), { handleDragStart: d } = Ne(), f = (r) => d(r, t, n);
return te(g), ge(i), {
pointerPosition: c,
elementRef: t,
isDragging: a,
isOvered: l,
isAllowed: s,
isLazyAllowed: o,
handleDragStart: f,
id: e
};
}, Ve = (n) => {
const {
zonesMap: e,
hovered: t,
draggingElements: a,
isDragging: l,
handleDropZoneIntersection: s
} = Y(), o = F(null), g = O(
() => t.zone.value === o.value
), i = O(() => {
if (!o.value || !l.value) return !1;
const r = e.value.get(o.value);
return r != null && r.groups.length ? !Array.from(a.value.values()).some((v) => v.groups.length ? !v.groups.some(
(u) => r.groups.includes(u)
) : !1) : !0;
}), c = O(() => {
if (!o.value || !l.value || t.zone.value !== o.value) return !1;
const r = e.value.get(o.value);
return r != null && r.groups.length ? !Array.from(a.value.values()).some((v) => !v.groups.some(
(u) => r.groups.includes(u)
)) : !0;
});
return {
elementRef: o,
registerZone: () => {
if (!o.value) throw new Error("elementRef is not set");
s("add", o.value), e.value.set(o.value, {
node: o.value,
groups: (n == null ? void 0 : n.groups) ?? [],
events: (n == null ? void 0 : n.events) ?? {},
data: (n == null ? void 0 : n.data) ?? void 0,
disabled: (n == null ? void 0 : n.disabled) ?? !1
}), o.value.setAttribute("data-dnd-droppable", "true");
},
unregisterZone: () => {
o.value && (s("remove", o.value), e.value.delete(o.value));
},
isOvered: g,
isAllowed: i,
isLazyAllowed: c
};
}, Fe = (n) => {
const {
elementRef: e,
registerZone: t,
unregisterZone: a,
isOvered: l,
isAllowed: s,
isLazyAllowed: o
} = Ve(n);
return te(t), ge(a), { elementRef: e, isOvered: l, isAllowed: s, isLazyAllowed: o };
}, Xe = (n) => {
const { selectedElements: e, elementsMap: t } = Y(), a = O(
() => n.value ? e.value.has(n.value) : !1
), l = O(() => {
if (!n.value) return !1;
for (const c of e.value)
if (c && k(c, n.value))
return !0;
return !1;
}), s = O(() => {
if (!n.value) return !1;
for (const c of e.value)
if (c && k(n.value, c))
return !0;
return !1;
}), o = () => {
n.value && e.value.delete(n.value);
}, g = () => {
if (!(!n.value || !t.value.get(n.value))) {
if (l.value)
for (const d of e.value)
d && k(d, n.value) && e.value.delete(d);
if (s.value)
for (const d of e.value)
d && k(n.value, d) && e.value.delete(d);
e.value.add(n.value);
}
};
return {
handleUnselect: o,
handleSelect: g,
handleToggleSelect: () => {
n.value && (e.value.has(n.value) ? o() : g());
},
isSelected: a,
isParentOfSelected: l
};
};
export {
oe as DnDOperations,
He as default,
$ as getBoundingBox,
Y as useDnDStore,
Ce as useDragContainer,
Re as useDraggable,
Fe as useDroppable,
Xe as useSelection
};
//# sourceMappingURL=vue-dnd-kit-core.es.js.map