@vue-dnd-kit/core 1.2.2 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var k = (n, e, t) =>
|
|
4
|
-
import { ref as V, computed as T, shallowRef as Y, onMounted as
|
|
5
|
-
import { createGlobalState as
|
|
1
|
+
var de = Object.defineProperty;
|
|
2
|
+
var fe = (n, e, t) => e in n ? de(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
|
|
3
|
+
var k = (n, e, t) => fe(n, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { ref as V, computed as T, shallowRef as Y, onMounted as j, onUnmounted as ge, defineComponent as ue, createElementBlock as $, createCommentVNode as me, unref as y, openBlock as X, normalizeStyle as ee, Fragment as he, renderList as pe, createBlock as q, Transition as Ee, withCtx as ye, resolveDynamicComponent as te, createVNode as xe, render as ne, useId as we, markRaw as Me, onBeforeUnmount as ce } from "vue";
|
|
5
|
+
import { createGlobalState as ve, useMagicKeys as Pe, useThrottleFn as Le } from "@vueuse/core";
|
|
6
6
|
const x = class x {
|
|
7
7
|
};
|
|
8
8
|
k(x, "remove", (e, t) => {
|
|
@@ -14,23 +14,23 @@ k(x, "remove", (e, t) => {
|
|
|
14
14
|
}), k(x, "move", (e, t, r, l) => {
|
|
15
15
|
if (!e || !r || t === void 0 || l === void 0)
|
|
16
16
|
return;
|
|
17
|
-
const
|
|
18
|
-
x.insert(r, l,
|
|
17
|
+
const s = x.remove(e, t);
|
|
18
|
+
x.insert(r, l, s);
|
|
19
19
|
}), k(x, "swap", (e, t, r, l) => {
|
|
20
20
|
if (!e || !r || t === void 0 || l === void 0)
|
|
21
21
|
return;
|
|
22
|
-
const
|
|
23
|
-
e[t] =
|
|
22
|
+
const s = e[t], o = r[l];
|
|
23
|
+
e[t] = o, r[l] = s;
|
|
24
24
|
}), k(x, "copy", (e, t, r, l) => {
|
|
25
25
|
if (!e || t === void 0 || !r || l === void 0)
|
|
26
26
|
return;
|
|
27
|
-
const
|
|
28
|
-
x.insert(r, l,
|
|
27
|
+
const s = e[t];
|
|
28
|
+
x.insert(r, l, s);
|
|
29
29
|
}), k(x, "applyTransfer", (e) => {
|
|
30
|
-
var l,
|
|
30
|
+
var l, s, o, g, i, c, d;
|
|
31
31
|
const t = e.hovered.element.value, r = e.hovered.zone.value;
|
|
32
32
|
if (t) {
|
|
33
|
-
const v = (
|
|
33
|
+
const v = (s = (l = e.elementsMap.value.get(t)) == null ? void 0 : l.data) == null ? void 0 : s.source, a = (g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.index, u = e.draggingElements.value.values().next().value, f = (i = u == null ? void 0 : u.data) == null ? void 0 : i.index, m = f !== void 0 && a !== void 0 && f > a ? 1 : -1;
|
|
34
34
|
Array.from(
|
|
35
35
|
e.draggingElements.value.values()
|
|
36
36
|
).sort(
|
|
@@ -69,10 +69,10 @@ k(x, "remove", (e, t) => {
|
|
|
69
69
|
);
|
|
70
70
|
}
|
|
71
71
|
}), k(x, "applyCopy", (e) => {
|
|
72
|
-
var l,
|
|
72
|
+
var l, s, o, g, i, c;
|
|
73
73
|
const t = e.hovered.element.value, r = e.hovered.zone.value;
|
|
74
74
|
if (t) {
|
|
75
|
-
const d = (
|
|
75
|
+
const d = (s = (l = e.elementsMap.value.get(t)) == null ? void 0 : l.data) == null ? void 0 : s.source, v = (g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.index;
|
|
76
76
|
Array.from(
|
|
77
77
|
e.draggingElements.value.values()
|
|
78
78
|
).sort((u, f) => {
|
|
@@ -109,14 +109,14 @@ k(x, "remove", (e, t) => {
|
|
|
109
109
|
);
|
|
110
110
|
}
|
|
111
111
|
}), k(x, "applySwap", (e) => {
|
|
112
|
-
var l,
|
|
112
|
+
var l, s, o, g, i, c, d, v;
|
|
113
113
|
const t = e.hovered.element.value, r = e.hovered.zone.value;
|
|
114
114
|
if (t && e.draggingElements.value.size === 1) {
|
|
115
115
|
const a = e.draggingElements.value.values().next().value;
|
|
116
116
|
x.swap(
|
|
117
117
|
(l = a == null ? void 0 : a.data) == null ? void 0 : l.source,
|
|
118
|
-
(
|
|
119
|
-
(g = (
|
|
118
|
+
(s = a == null ? void 0 : a.data) == null ? void 0 : s.index,
|
|
119
|
+
(g = (o = e.elementsMap.value.get(t)) == null ? void 0 : o.data) == null ? void 0 : g.source,
|
|
120
120
|
(c = (i = e.elementsMap.value.get(t)) == null ? void 0 : i.data) == null ? void 0 : c.index
|
|
121
121
|
);
|
|
122
122
|
} else if (r) {
|
|
@@ -142,17 +142,17 @@ k(x, "remove", (e, t) => {
|
|
|
142
142
|
Array.from(
|
|
143
143
|
e.draggingElements.value.values()
|
|
144
144
|
).sort((r, l) => {
|
|
145
|
-
var
|
|
146
|
-
return (((
|
|
145
|
+
var s, o;
|
|
146
|
+
return (((s = l.data) == null ? void 0 : s.index) || 0) - (((o = r.data) == null ? void 0 : o.index) || 0);
|
|
147
147
|
}).forEach((r) => {
|
|
148
|
-
var l,
|
|
149
|
-
(l = r.data) != null && l.source && ((
|
|
148
|
+
var l, s;
|
|
149
|
+
(l = r.data) != null && l.source && ((s = r.data) == null ? void 0 : s.index) !== void 0 && x.remove(r.data.source, r.data.index);
|
|
150
150
|
});
|
|
151
151
|
}), k(x, "applyInsert", (e, t) => {
|
|
152
|
-
var
|
|
152
|
+
var s, o, g, i, c, d;
|
|
153
153
|
const r = e.hovered.element.value, l = e.hovered.zone.value;
|
|
154
154
|
if (r && t.length > 0) {
|
|
155
|
-
const v = (
|
|
155
|
+
const v = (o = (s = e.elementsMap.value.get(r)) == null ? void 0 : s.data) == null ? void 0 : o.source, a = (i = (g = e.elementsMap.value.get(r)) == null ? void 0 : g.data) == null ? void 0 : i.index;
|
|
156
156
|
t.forEach((u) => {
|
|
157
157
|
x.insert(v, a, u);
|
|
158
158
|
});
|
|
@@ -163,15 +163,15 @@ k(x, "remove", (e, t) => {
|
|
|
163
163
|
});
|
|
164
164
|
}
|
|
165
165
|
});
|
|
166
|
-
let
|
|
167
|
-
const K =
|
|
166
|
+
let re = x;
|
|
167
|
+
const K = ve(() => {
|
|
168
168
|
const n = V(
|
|
169
169
|
/* @__PURE__ */ new Map()
|
|
170
170
|
), e = T(() => n.value.size > 0), t = {
|
|
171
171
|
component: V(null),
|
|
172
172
|
ref: Y(null),
|
|
173
173
|
options: Y(null)
|
|
174
|
-
}, r = V(/* @__PURE__ */ new Map()), l = V(/* @__PURE__ */ new Set()),
|
|
174
|
+
}, r = V(/* @__PURE__ */ new Map()), l = V(/* @__PURE__ */ new Set()), s = V(/* @__PURE__ */ new Map()), o = V(/* @__PURE__ */ new Set()), g = V(/* @__PURE__ */ new Set()), i = new IntersectionObserver((Z) => {
|
|
175
175
|
Z.forEach(
|
|
176
176
|
(h) => g.value[h.isIntersecting ? "add" : "delete"](
|
|
177
177
|
h.target
|
|
@@ -179,12 +179,12 @@ const K = ce(() => {
|
|
|
179
179
|
);
|
|
180
180
|
}), c = new IntersectionObserver((Z) => {
|
|
181
181
|
Z.forEach(
|
|
182
|
-
(h) =>
|
|
182
|
+
(h) => o.value[h.isIntersecting ? "add" : "delete"](h.target)
|
|
183
183
|
);
|
|
184
184
|
}), d = (Z, h) => {
|
|
185
185
|
Z === "add" ? i.observe(h) : (i.unobserve(h), g.value.delete(h));
|
|
186
186
|
}, v = (Z, h) => {
|
|
187
|
-
Z === "add" ? c.observe(h) : (c.unobserve(h),
|
|
187
|
+
Z === "add" ? c.observe(h) : (c.unobserve(h), o.value.delete(h));
|
|
188
188
|
}, a = {
|
|
189
189
|
start: Y(null),
|
|
190
190
|
current: Y(null),
|
|
@@ -192,7 +192,7 @@ const K = ce(() => {
|
|
|
192
192
|
percent: Y(null),
|
|
193
193
|
pixel: Y(null)
|
|
194
194
|
}
|
|
195
|
-
}, { w: u, s: f, a: m, d: p, ctrl: E, shift: L, alt: w, meta: I } =
|
|
195
|
+
}, { w: u, s: f, a: m, d: p, ctrl: E, shift: L, alt: w, meta: I } = Pe(), F = {
|
|
196
196
|
zone: Y(null),
|
|
197
197
|
element: Y(null)
|
|
198
198
|
};
|
|
@@ -202,8 +202,8 @@ const K = ce(() => {
|
|
|
202
202
|
activeContainer: t,
|
|
203
203
|
elementsMap: r,
|
|
204
204
|
selectedElements: l,
|
|
205
|
-
zonesMap:
|
|
206
|
-
visibleZones:
|
|
205
|
+
zonesMap: s,
|
|
206
|
+
visibleZones: o,
|
|
207
207
|
visibleElements: g,
|
|
208
208
|
pointerPosition: a,
|
|
209
209
|
keyboard: {
|
|
@@ -216,29 +216,29 @@ const K = ce(() => {
|
|
|
216
216
|
alt: w,
|
|
217
217
|
meta: I
|
|
218
218
|
},
|
|
219
|
-
hovered:
|
|
219
|
+
hovered: F,
|
|
220
220
|
handleDragElementIntersection: d,
|
|
221
221
|
handleDropZoneIntersection: v
|
|
222
222
|
};
|
|
223
|
-
}),
|
|
224
|
-
const e = V(null), { draggingElements: t, pointerPosition: r, isDragging: l, activeContainer:
|
|
225
|
-
return
|
|
226
|
-
|
|
227
|
-
}),
|
|
228
|
-
|
|
223
|
+
}), Ae = (n) => {
|
|
224
|
+
const e = V(null), { draggingElements: t, pointerPosition: r, isDragging: l, activeContainer: s } = K();
|
|
225
|
+
return j(() => {
|
|
226
|
+
s.ref = e, s.options.value = n ?? null;
|
|
227
|
+
}), ge(() => {
|
|
228
|
+
s.ref.value = null, s.options.value = null;
|
|
229
229
|
}), {
|
|
230
230
|
elementRef: e,
|
|
231
231
|
draggingElements: t,
|
|
232
232
|
pointerPosition: r,
|
|
233
233
|
isDragging: l
|
|
234
234
|
};
|
|
235
|
-
},
|
|
235
|
+
}, _e = ["innerHTML"], Se = /* @__PURE__ */ ue({
|
|
236
236
|
__name: "DefaultOverlay",
|
|
237
237
|
setup(n) {
|
|
238
|
-
const { elementRef: e, pointerPosition: t, isDragging: r, draggingElements: l } =
|
|
239
|
-
var
|
|
238
|
+
const { elementRef: e, pointerPosition: t, isDragging: r, draggingElements: l } = Ae(), s = T(() => {
|
|
239
|
+
var o, g, i, c;
|
|
240
240
|
return {
|
|
241
|
-
transform: `translate3d(${(((
|
|
241
|
+
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)`,
|
|
242
242
|
zIndex: 1e3,
|
|
243
243
|
position: "fixed",
|
|
244
244
|
top: 0,
|
|
@@ -246,32 +246,32 @@ const K = ce(() => {
|
|
|
246
246
|
transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
|
|
247
247
|
};
|
|
248
248
|
});
|
|
249
|
-
return (
|
|
249
|
+
return (o, g) => y(r) ? (X(), $("div", {
|
|
250
250
|
key: 0,
|
|
251
251
|
ref_key: "elementRef",
|
|
252
252
|
ref: e,
|
|
253
|
-
style:
|
|
253
|
+
style: ee(s.value)
|
|
254
254
|
}, [
|
|
255
|
-
(
|
|
255
|
+
(X(!0), $(he, null, pe(y(l), ([i, c]) => {
|
|
256
256
|
var d, v;
|
|
257
|
-
return
|
|
257
|
+
return X(), $("div", {
|
|
258
258
|
key: c.id,
|
|
259
259
|
innerHTML: c.initialHTML,
|
|
260
|
-
style:
|
|
260
|
+
style: ee({
|
|
261
261
|
width: `${(d = c.initialRect) == null ? void 0 : d.width}px`,
|
|
262
262
|
height: `${(v = c.initialRect) == null ? void 0 : v.height}px`
|
|
263
263
|
})
|
|
264
|
-
}, null, 12,
|
|
264
|
+
}, null, 12, _e);
|
|
265
265
|
}), 128))
|
|
266
|
-
], 4)) :
|
|
266
|
+
], 4)) : me("", !0);
|
|
267
267
|
}
|
|
268
|
-
}),
|
|
268
|
+
}), ae = /* @__PURE__ */ ue({
|
|
269
269
|
__name: "DragOverlay",
|
|
270
270
|
setup(n) {
|
|
271
271
|
const { activeContainer: e } = K(), t = T(
|
|
272
|
-
() => e.component.value ??
|
|
272
|
+
() => e.component.value ?? Se
|
|
273
273
|
);
|
|
274
|
-
return (r, l) => y(e).options.value ? (
|
|
274
|
+
return (r, l) => y(e).options.value ? (X(), q(Ee, {
|
|
275
275
|
key: 0,
|
|
276
276
|
name: y(e).options.value.name,
|
|
277
277
|
duration: y(e).options.value.duration,
|
|
@@ -298,24 +298,24 @@ const K = ce(() => {
|
|
|
298
298
|
onAfterLeave: y(e).options.value.onAfterLeave,
|
|
299
299
|
onAfterAppear: y(e).options.value.onAfterAppear
|
|
300
300
|
}, {
|
|
301
|
-
default:
|
|
302
|
-
(
|
|
301
|
+
default: ye(() => [
|
|
302
|
+
(X(), q(te(t.value)))
|
|
303
303
|
]),
|
|
304
304
|
_: 1
|
|
305
|
-
}, 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"])) : (
|
|
305
|
+
}, 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(), q(te(t.value), { key: 1 }));
|
|
306
306
|
}
|
|
307
|
-
}),
|
|
307
|
+
}), Ye = {
|
|
308
308
|
install(n) {
|
|
309
|
-
n.component("DragOverlay",
|
|
309
|
+
n.component("DragOverlay", ae);
|
|
310
310
|
const e = n.mount;
|
|
311
311
|
n.mount = function(r) {
|
|
312
|
-
const l = e.call(this, r),
|
|
313
|
-
if (
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
const g =
|
|
317
|
-
|
|
318
|
-
container:
|
|
312
|
+
const l = e.call(this, r), s = typeof r == "string" ? document.querySelector(r) : r;
|
|
313
|
+
if (s && s instanceof Element && !s.querySelector("#vue-dnd-kit-overlay")) {
|
|
314
|
+
const o = document.createElement("div");
|
|
315
|
+
o.id = "vue-dnd-kit-overlay", o.style.pointerEvents = "none", s.appendChild(o);
|
|
316
|
+
const g = xe(ae);
|
|
317
|
+
ne(g, o), n.__VUE_DND_KIT_OVERLAY__ = {
|
|
318
|
+
container: o,
|
|
319
319
|
vnode: g
|
|
320
320
|
};
|
|
321
321
|
const i = K();
|
|
@@ -325,10 +325,10 @@ const K = ce(() => {
|
|
|
325
325
|
};
|
|
326
326
|
const t = n.unmount;
|
|
327
327
|
n.unmount = function() {
|
|
328
|
-
return n.__VUE_DND_KIT_OVERLAY__ && (
|
|
328
|
+
return n.__VUE_DND_KIT_OVERLAY__ && (ne(null, n.__VUE_DND_KIT_OVERLAY__.container), delete n.__VUE_DND_KIT_OVERLAY__), t.call(this);
|
|
329
329
|
};
|
|
330
330
|
}
|
|
331
|
-
},
|
|
331
|
+
}, le = (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, B = (n) => {
|
|
332
332
|
if (!n)
|
|
333
333
|
return {
|
|
334
334
|
x: 0,
|
|
@@ -351,11 +351,11 @@ const K = ce(() => {
|
|
|
351
351
|
width: e.width,
|
|
352
352
|
height: e.height
|
|
353
353
|
};
|
|
354
|
-
},
|
|
354
|
+
}, G = (n) => ({
|
|
355
355
|
x: n.x + n.width / 2,
|
|
356
356
|
y: n.y + n.height / 2
|
|
357
|
-
}),
|
|
358
|
-
const t =
|
|
357
|
+
}), Ie = (n, e) => {
|
|
358
|
+
const t = B(n);
|
|
359
359
|
return {
|
|
360
360
|
pixel: {
|
|
361
361
|
x: e.x - t.x,
|
|
@@ -366,7 +366,7 @@ const K = ce(() => {
|
|
|
366
366
|
y: (e.y - t.y) / t.height * 100
|
|
367
367
|
}
|
|
368
368
|
};
|
|
369
|
-
},
|
|
369
|
+
}, se = (n, e) => {
|
|
370
370
|
const t = e.x - n.x, r = e.y - n.y;
|
|
371
371
|
return Math.sqrt(t * t + r * r);
|
|
372
372
|
}, oe = (n, e) => {
|
|
@@ -376,23 +376,25 @@ const K = ce(() => {
|
|
|
376
376
|
), r = Math.max(
|
|
377
377
|
0,
|
|
378
378
|
Math.min(n.y + n.height, e.y + e.height) - Math.max(n.y, e.y)
|
|
379
|
-
), l = t * r,
|
|
380
|
-
return (l /
|
|
381
|
-
},
|
|
379
|
+
), l = t * r, s = n.width * n.height, o = e.width * e.height;
|
|
380
|
+
return (l / s * 100 + l / o * 100) / 2;
|
|
381
|
+
}, ie = "data-vue-dnd-kit-draggable", z = (n) => {
|
|
382
382
|
n.preventDefault();
|
|
383
|
-
},
|
|
383
|
+
}, O = (n) => ({
|
|
384
|
+
items: Array.from(n.draggingElements.value.values())
|
|
385
|
+
}), ze = (n) => {
|
|
384
386
|
const {
|
|
385
387
|
elementsMap: e,
|
|
386
388
|
draggingElements: t,
|
|
387
389
|
hovered: r,
|
|
388
390
|
selectedElements: l,
|
|
389
|
-
isDragging:
|
|
390
|
-
visibleElements:
|
|
391
|
+
isDragging: s,
|
|
392
|
+
visibleElements: o,
|
|
391
393
|
handleDragElementIntersection: g
|
|
392
394
|
} = K(), i = V(null), c = T(
|
|
393
|
-
() =>
|
|
394
|
-
), d = Y((n == null ? void 0 : n.id) ||
|
|
395
|
-
if (!i.value || !
|
|
395
|
+
() => o.value.has(i.value) && r.element.value === i.value
|
|
396
|
+
), d = Y((n == null ? void 0 : n.id) || we()), v = T(() => !i.value || !o.value.has(i.value) ? !1 : t.value.has(i.value)), a = T(() => {
|
|
397
|
+
if (!i.value || !s.value || !o.value.has(i.value)) return !1;
|
|
396
398
|
const m = e.value.get(i.value);
|
|
397
399
|
return m != null && m.groups.length ? !Array.from(t.value.entries()).some(
|
|
398
400
|
([p, E]) => E.groups.length ? !E.groups.some(
|
|
@@ -412,26 +414,26 @@ const K = ce(() => {
|
|
|
412
414
|
events: (n == null ? void 0 : n.events) ?? {},
|
|
413
415
|
data: (n == null ? void 0 : n.data) ?? null,
|
|
414
416
|
id: d.value
|
|
415
|
-
}), g("add", i.value), i.value.addEventListener("dragstart", z), i.value.addEventListener("drag", z), i.value.setAttribute(
|
|
417
|
+
}), g("add", i.value), i.value.addEventListener("dragstart", z), i.value.addEventListener("drag", z), i.value.setAttribute(ie, "true"), i.value.setAttribute("draggable", "false");
|
|
416
418
|
},
|
|
417
419
|
unregisterElement: () => {
|
|
418
|
-
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(
|
|
420
|
+
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(ie), i.value.removeAttribute("draggable"));
|
|
419
421
|
},
|
|
420
422
|
isDragging: v,
|
|
421
423
|
isOvered: c,
|
|
422
424
|
isAllowed: a,
|
|
423
425
|
id: d
|
|
424
426
|
};
|
|
425
|
-
}, b = (n, e) => n ? e.contains(n) : !1,
|
|
427
|
+
}, b = (n, e) => n ? e.contains(n) : !1, Ce = (n) => {
|
|
426
428
|
var d, v;
|
|
427
|
-
const e =
|
|
429
|
+
const e = B(n.activeContainer.ref.value), t = G(e), r = ((d = n.pointerPosition.current.value) == null ? void 0 : d.x) ?? 0, l = ((v = n.pointerPosition.current.value) == null ? void 0 : v.y) ?? 0, o = !(e && r >= e.x && r <= 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(([a, u]) => {
|
|
428
430
|
if (!a) return !1;
|
|
429
|
-
const f =
|
|
430
|
-
return f && e &&
|
|
431
|
+
const f = B(a);
|
|
432
|
+
return f && e && le(f, e);
|
|
431
433
|
}).map(([a, u]) => {
|
|
432
|
-
const f =
|
|
434
|
+
const f = B(a), m = G(f), p = r >= f.x && r <= f.x + f.width && l >= f.y && l <= f.y + f.height, E = oe(f, e), L = se(t, m);
|
|
433
435
|
let w = 0;
|
|
434
|
-
for (const [I,
|
|
436
|
+
for (const [I, F] of n.visibleElements.value.entries())
|
|
435
437
|
I !== a && I && a && b(a, I) && w++;
|
|
436
438
|
return {
|
|
437
439
|
element: u,
|
|
@@ -442,7 +444,7 @@ const K = ce(() => {
|
|
|
442
444
|
centerDistance: L
|
|
443
445
|
};
|
|
444
446
|
}).sort((a, u) => {
|
|
445
|
-
if (!
|
|
447
|
+
if (!o) {
|
|
446
448
|
if (a.isPointerInElement && u.isPointerInElement)
|
|
447
449
|
return u.depth - a.depth;
|
|
448
450
|
if (a.isPointerInElement !== u.isPointerInElement)
|
|
@@ -454,12 +456,12 @@ const K = ce(() => {
|
|
|
454
456
|
(m) => m && b(a, m)
|
|
455
457
|
))
|
|
456
458
|
return !1;
|
|
457
|
-
const f =
|
|
458
|
-
return f && e &&
|
|
459
|
+
const f = B(a);
|
|
460
|
+
return f && e && le(f, e);
|
|
459
461
|
}).map(([a, u]) => {
|
|
460
|
-
const f =
|
|
462
|
+
const f = B(a), m = G(f), p = r >= f.x && r <= f.x + f.width && l >= f.y && l <= f.y + f.height, E = oe(f, e), L = se(t, m);
|
|
461
463
|
let w = 0;
|
|
462
|
-
for (const [I,
|
|
464
|
+
for (const [I, F] of n.visibleZones.value.entries())
|
|
463
465
|
I !== a && I && a && b(a, I) && w++;
|
|
464
466
|
return {
|
|
465
467
|
zone: u,
|
|
@@ -470,7 +472,7 @@ const K = ce(() => {
|
|
|
470
472
|
centerDistance: L
|
|
471
473
|
};
|
|
472
474
|
}).sort((a, u) => {
|
|
473
|
-
if (!
|
|
475
|
+
if (!o) {
|
|
474
476
|
if (a.isPointerInElement && u.isPointerInElement)
|
|
475
477
|
return u.depth - a.depth;
|
|
476
478
|
if (a.isPointerInElement !== u.isPointerInElement)
|
|
@@ -482,13 +484,13 @@ const K = ce(() => {
|
|
|
482
484
|
...i.map((a) => a.node),
|
|
483
485
|
...c.map((a) => a.node)
|
|
484
486
|
];
|
|
485
|
-
},
|
|
487
|
+
}, De = (n, e) => {
|
|
486
488
|
const { pointerPosition: t, keyboard: r } = K(), l = (e == null ? void 0 : e.moveStep) || 10;
|
|
487
489
|
return {
|
|
488
490
|
onKeyboardStart: (i) => {
|
|
489
491
|
var a;
|
|
490
492
|
z(i);
|
|
491
|
-
const c =
|
|
493
|
+
const c = B(n.value);
|
|
492
494
|
(a = n.value) == null || a.blur();
|
|
493
495
|
const d = c.x + c.width / 2, v = c.y + c.height / 2;
|
|
494
496
|
t.start.value = {
|
|
@@ -518,33 +520,33 @@ const K = ce(() => {
|
|
|
518
520
|
t.current.value = null, t.start.value = null, t.offset.pixel.value = null, t.offset.percent.value = null;
|
|
519
521
|
}
|
|
520
522
|
};
|
|
521
|
-
},
|
|
523
|
+
}, ke = (n) => {
|
|
522
524
|
const e = K();
|
|
523
525
|
return {
|
|
524
|
-
onPointerStart: (
|
|
525
|
-
e.pointerPosition.start.value = { x:
|
|
526
|
-
x:
|
|
527
|
-
y:
|
|
526
|
+
onPointerStart: (s) => {
|
|
527
|
+
e.pointerPosition.start.value = { x: s.clientX, y: s.clientY }, e.pointerPosition.current.value = {
|
|
528
|
+
x: s.clientX,
|
|
529
|
+
y: s.clientY
|
|
528
530
|
};
|
|
529
|
-
const { pixel:
|
|
530
|
-
x:
|
|
531
|
-
y:
|
|
531
|
+
const { pixel: o, percent: g } = Ie(n.value, {
|
|
532
|
+
x: s.clientX,
|
|
533
|
+
y: s.clientY
|
|
532
534
|
});
|
|
533
|
-
e.pointerPosition.offset.pixel.value =
|
|
535
|
+
e.pointerPosition.offset.pixel.value = o, e.pointerPosition.offset.percent.value = g;
|
|
534
536
|
},
|
|
535
|
-
onPointerMove: (
|
|
537
|
+
onPointerMove: (s) => {
|
|
536
538
|
e.pointerPosition.current.value = {
|
|
537
|
-
x:
|
|
538
|
-
y:
|
|
539
|
+
x: s.clientX,
|
|
540
|
+
y: s.clientY
|
|
539
541
|
};
|
|
540
542
|
},
|
|
541
543
|
onPointerEnd: () => {
|
|
542
544
|
e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
|
|
543
545
|
}
|
|
544
546
|
};
|
|
545
|
-
},
|
|
546
|
-
var
|
|
547
|
-
const t = K(), { onPointerStart: r, onPointerMove: l, onPointerEnd:
|
|
547
|
+
}, be = (n, e) => {
|
|
548
|
+
var F, Z;
|
|
549
|
+
const t = K(), { onPointerStart: r, onPointerMove: l, onPointerEnd: s } = ke(n), { onKeyboardStart: o, onKeyboardMove: g, onKeyboardEnd: i } = De(
|
|
548
550
|
n,
|
|
549
551
|
e == null ? void 0 : e.keyboard
|
|
550
552
|
);
|
|
@@ -556,12 +558,12 @@ const K = ce(() => {
|
|
|
556
558
|
if (t.selectedElements.value.size > 0 && _) {
|
|
557
559
|
const S = /* @__PURE__ */ new Map();
|
|
558
560
|
return t.selectedElements.value.forEach((C) => {
|
|
559
|
-
var
|
|
561
|
+
var R, H;
|
|
560
562
|
const U = t.elementsMap.value.get(C);
|
|
561
563
|
U && S.set(C, {
|
|
562
564
|
...U,
|
|
563
|
-
initialHTML: ((
|
|
564
|
-
initialRect: (
|
|
565
|
+
initialHTML: ((R = U.node) == null ? void 0 : R.outerHTML) ?? "",
|
|
566
|
+
initialRect: (H = U.node) == null ? void 0 : H.getBoundingClientRect()
|
|
565
567
|
});
|
|
566
568
|
}), S;
|
|
567
569
|
}
|
|
@@ -584,7 +586,7 @@ const K = ce(() => {
|
|
|
584
586
|
(C) => C && (C === S.node || b(S.node, C))
|
|
585
587
|
) || S.groups.length && !!Array.from(
|
|
586
588
|
t.draggingElements.value.values()
|
|
587
|
-
).some((U) => U.groups.length ? !U.groups.some((
|
|
589
|
+
).some((U) => U.groups.length ? !U.groups.some((R) => S.groups.includes(R)) : !1));
|
|
588
590
|
});
|
|
589
591
|
return M ? {
|
|
590
592
|
element: _.find(
|
|
@@ -600,11 +602,11 @@ const K = ce(() => {
|
|
|
600
602
|
) || null,
|
|
601
603
|
zone: M
|
|
602
604
|
} : { element: null, zone: null };
|
|
603
|
-
}, a = ((
|
|
604
|
-
var M, D, A, S, C, U,
|
|
605
|
+
}, a = ((F = e == null ? void 0 : e.sensor) == null ? void 0 : F.setup) || Ce, u = (h) => {
|
|
606
|
+
var M, D, A, S, C, U, R, H, J, Q, N, W;
|
|
605
607
|
const _ = t.hovered.element.value, P = t.hovered.zone.value;
|
|
606
|
-
t.hovered.element.value = h.element, t.hovered.zone.value = h.zone, _ && t.hovered.element.value !== _ && ((A = (D = (M = t.elementsMap.value.get(_)) == null ? void 0 : M.events) == null ? void 0 : D.onLeave) == null || A.call(D, t), t.hovered.element.value && ((U = (C = (S = t.elementsMap.value.get(t.hovered.element.value)) == null ? void 0 : S.events) == null ? void 0 : C.onHover) == null || U.call(C, t))), P && t.hovered.zone.value !== P && ((
|
|
607
|
-
}, f =
|
|
608
|
+
t.hovered.element.value = h.element, t.hovered.zone.value = h.zone, _ && t.hovered.element.value !== _ && ((A = (D = (M = t.elementsMap.value.get(_)) == null ? void 0 : M.events) == null ? void 0 : D.onLeave) == null || A.call(D, t, O(t)), t.hovered.element.value && ((U = (C = (S = t.elementsMap.value.get(t.hovered.element.value)) == null ? void 0 : S.events) == null ? void 0 : C.onHover) == null || U.call(C, t, O(t)))), P && t.hovered.zone.value !== P && ((J = (H = (R = t.zonesMap.value.get(P)) == null ? void 0 : R.events) == null ? void 0 : H.onLeave) == null || J.call(H, t, O(t)), t.hovered.zone.value && ((W = (N = (Q = t.zonesMap.value.get(t.hovered.zone.value)) == null ? void 0 : Q.events) == null ? void 0 : N.onHover) == null || W.call(N, t, O(t))));
|
|
609
|
+
}, f = Le(() => {
|
|
608
610
|
const h = a(t), _ = v(h);
|
|
609
611
|
u(_);
|
|
610
612
|
}, ((Z = e == null ? void 0 : e.sensor) == null ? void 0 : Z.throttle) ?? 0), m = () => {
|
|
@@ -617,29 +619,29 @@ const K = ce(() => {
|
|
|
617
619
|
t.draggingElements.value = d(n.value), t.draggingElements.value.forEach(
|
|
618
620
|
(_) => {
|
|
619
621
|
var P, M;
|
|
620
|
-
return (M = (P = _.events).onStart) == null ? void 0 : M.call(P, t);
|
|
622
|
+
return (M = (P = _.events).onStart) == null ? void 0 : M.call(P, t, O(t));
|
|
621
623
|
}
|
|
622
|
-
), h instanceof PointerEvent ? r(h) :
|
|
624
|
+
), h instanceof PointerEvent ? r(h) : o(h), p();
|
|
623
625
|
},
|
|
624
626
|
track: (h) => {
|
|
625
627
|
t.draggingElements.value.forEach(
|
|
626
628
|
(_) => {
|
|
627
629
|
var P, M;
|
|
628
|
-
return (M = (P = _.events).onMove) == null ? void 0 : M.call(P, t);
|
|
630
|
+
return (M = (P = _.events).onMove) == null ? void 0 : M.call(P, t, O(t));
|
|
629
631
|
}
|
|
630
632
|
), h instanceof KeyboardEvent ? g() : l(h);
|
|
631
633
|
},
|
|
632
634
|
deactivate: (h = !0) => {
|
|
633
635
|
var _, P;
|
|
634
|
-
if (
|
|
636
|
+
if (s(), i(), h) {
|
|
635
637
|
if (t.hovered.zone.value) {
|
|
636
638
|
const M = t.zonesMap.value.get(t.hovered.zone.value);
|
|
637
|
-
(P = M == null ? void 0 : (_ = M.events).onDrop) == null || P.call(_, t);
|
|
639
|
+
(P = M == null ? void 0 : (_ = M.events).onDrop) == null || P.call(_, t, O(t));
|
|
638
640
|
} else
|
|
639
641
|
t.draggingElements.value.forEach(
|
|
640
642
|
(M) => {
|
|
641
643
|
var D, A;
|
|
642
|
-
return (A = (D = M.events).onEnd) == null ? void 0 : A.call(D, t);
|
|
644
|
+
return (A = (D = M.events).onEnd) == null ? void 0 : A.call(D, t, O(t));
|
|
643
645
|
}
|
|
644
646
|
);
|
|
645
647
|
t.selectedElements.value.clear();
|
|
@@ -647,8 +649,8 @@ const K = ce(() => {
|
|
|
647
649
|
t.draggingElements.value.clear(), t.hovered.zone.value = null, t.hovered.element.value = null, E();
|
|
648
650
|
}
|
|
649
651
|
};
|
|
650
|
-
},
|
|
651
|
-
let n = "", e = "", t = "", r = null, l = null,
|
|
652
|
+
}, Te = ve(() => {
|
|
653
|
+
let n = "", e = "", t = "", r = null, l = null, s = null, o = null, g = null;
|
|
652
654
|
const { activeContainer: i } = K(), c = () => {
|
|
653
655
|
const u = document.body;
|
|
654
656
|
n = u.style.userSelect, u.style.userSelect = "none", window.addEventListener("contextmenu", z), window.addEventListener("selectstart", z), window.addEventListener("touchstart", z), window.addEventListener("touchmove", z);
|
|
@@ -656,69 +658,69 @@ const K = ce(() => {
|
|
|
656
658
|
const u = document.body;
|
|
657
659
|
u.style.userSelect = n, u.style.touchAction = e, u.style.overscrollBehavior = t, window.removeEventListener("contextmenu", z), window.removeEventListener("selectstart", z), window.removeEventListener("touchstart", z), window.removeEventListener("touchmove", z);
|
|
658
660
|
}, v = () => {
|
|
659
|
-
r && (document.removeEventListener("pointermove", r), r = null), l && (document.removeEventListener("pointerup", l), l = null),
|
|
661
|
+
r && (document.removeEventListener("pointermove", r), r = 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);
|
|
660
662
|
};
|
|
661
663
|
return {
|
|
662
664
|
handleDragStart: (u, f, m) => {
|
|
663
|
-
v(), u.target.blur(), m != null && m.container && (i.component.value =
|
|
664
|
-
const { activate: p, track: E, deactivate: L } =
|
|
665
|
+
v(), u.target.blur(), m != null && m.container && (i.component.value = Me(m.container));
|
|
666
|
+
const { activate: p, track: E, deactivate: L } = be(f, m);
|
|
665
667
|
l = () => {
|
|
666
668
|
i.component.value = null, d(), L(!0), v();
|
|
667
|
-
},
|
|
669
|
+
}, s = () => {
|
|
668
670
|
i.component.value = null, d(), L(!1), v();
|
|
669
|
-
}, r = (w) => E(w),
|
|
670
|
-
w.type === "keyup" && (w.code === "Escape" && (
|
|
671
|
-
}, c(), p(u), document.addEventListener("pointermove", r), document.addEventListener("pointerup", l), document.addEventListener("wheel",
|
|
671
|
+
}, r = (w) => E(w), o = (w) => E(w), g = (w) => {
|
|
672
|
+
w.type === "keyup" && (w.code === "Escape" && (s == null || s()), w.code === "Enter" && (l == null || l())), E(w);
|
|
673
|
+
}, c(), p(u), document.addEventListener("pointermove", r), document.addEventListener("pointerup", l), document.addEventListener("wheel", o), document.addEventListener("keydown", g), document.addEventListener("keypress", g), document.addEventListener("keyup", g);
|
|
672
674
|
}
|
|
673
675
|
};
|
|
674
|
-
}),
|
|
676
|
+
}), Oe = (n) => {
|
|
675
677
|
const {
|
|
676
678
|
id: e,
|
|
677
679
|
elementRef: t,
|
|
678
680
|
isDragging: r,
|
|
679
681
|
isOvered: l,
|
|
680
|
-
isAllowed:
|
|
681
|
-
registerElement:
|
|
682
|
+
isAllowed: s,
|
|
683
|
+
registerElement: o,
|
|
682
684
|
unregisterElement: g
|
|
683
|
-
} =
|
|
684
|
-
return
|
|
685
|
+
} = ze(n), { pointerPosition: i } = K(), { handleDragStart: c } = Te(), d = (v) => c(v, t, n);
|
|
686
|
+
return j(o), ce(g), {
|
|
685
687
|
pointerPosition: i,
|
|
686
688
|
elementRef: t,
|
|
687
689
|
isDragging: r,
|
|
688
690
|
isOvered: l,
|
|
689
|
-
isAllowed:
|
|
691
|
+
isAllowed: s,
|
|
690
692
|
handleDragStart: d,
|
|
691
693
|
id: e
|
|
692
694
|
};
|
|
693
|
-
},
|
|
695
|
+
}, Ke = (n) => {
|
|
694
696
|
const {
|
|
695
697
|
zonesMap: e,
|
|
696
698
|
hovered: t,
|
|
697
699
|
draggingElements: r,
|
|
698
700
|
isDragging: l,
|
|
699
|
-
handleDropZoneIntersection:
|
|
700
|
-
} = K(),
|
|
701
|
-
if (!
|
|
702
|
-
const v = e.value.get(
|
|
701
|
+
handleDropZoneIntersection: s
|
|
702
|
+
} = K(), o = V(null), g = T(() => t.zone.value === o.value), i = T(() => {
|
|
703
|
+
if (!o.value || !l.value) return !1;
|
|
704
|
+
const v = e.value.get(o.value);
|
|
703
705
|
return v != null && v.groups.length ? !Array.from(r.value.values()).some((a) => a.groups.length ? !a.groups.some(
|
|
704
706
|
(u) => v.groups.includes(u)
|
|
705
707
|
) : !1) : !0;
|
|
706
708
|
});
|
|
707
|
-
return { elementRef:
|
|
708
|
-
if (!
|
|
709
|
-
|
|
710
|
-
node:
|
|
709
|
+
return { elementRef: o, registerZone: () => {
|
|
710
|
+
if (!o.value) throw new Error("elementRef is not set");
|
|
711
|
+
s("add", o.value), e.value.set(o.value, {
|
|
712
|
+
node: o.value,
|
|
711
713
|
groups: (n == null ? void 0 : n.groups) ?? [],
|
|
712
714
|
events: (n == null ? void 0 : n.events) ?? {},
|
|
713
715
|
data: (n == null ? void 0 : n.data) ?? void 0
|
|
714
|
-
}),
|
|
716
|
+
}), o.value.setAttribute("data-dnd-droppable", "true");
|
|
715
717
|
}, unregisterZone: () => {
|
|
716
|
-
|
|
718
|
+
o.value && (s("remove", o.value), e.value.delete(o.value));
|
|
717
719
|
}, isOvered: g, isAllowed: i };
|
|
718
|
-
}, Oe = (n) => {
|
|
719
|
-
const { elementRef: e, registerZone: t, unregisterZone: r, isOvered: l, isAllowed: o } = Te(n);
|
|
720
|
-
return G(t), ue(r), { elementRef: e, isOvered: l, isAllowed: o };
|
|
721
720
|
}, Re = (n) => {
|
|
721
|
+
const { elementRef: e, registerZone: t, unregisterZone: r, isOvered: l, isAllowed: s } = Ke(n);
|
|
722
|
+
return j(t), ce(r), { elementRef: e, isOvered: l, isAllowed: s };
|
|
723
|
+
}, He = (n) => {
|
|
722
724
|
const { selectedElements: e, elementsMap: t } = K(), r = T(
|
|
723
725
|
() => n.value ? e.value.has(n.value) : !1
|
|
724
726
|
), l = T(() => {
|
|
@@ -727,43 +729,43 @@ const K = ce(() => {
|
|
|
727
729
|
if (c && b(c, n.value))
|
|
728
730
|
return !0;
|
|
729
731
|
return !1;
|
|
730
|
-
}),
|
|
732
|
+
}), s = T(() => {
|
|
731
733
|
if (!n.value) return !1;
|
|
732
734
|
for (const c of e.value)
|
|
733
735
|
if (c && b(n.value, c))
|
|
734
736
|
return !0;
|
|
735
737
|
return !1;
|
|
736
|
-
}),
|
|
738
|
+
}), o = () => {
|
|
737
739
|
n.value && e.value.delete(n.value);
|
|
738
740
|
}, g = () => {
|
|
739
741
|
if (!(!n.value || !t.value.get(n.value))) {
|
|
740
742
|
if (l.value)
|
|
741
743
|
for (const d of e.value)
|
|
742
744
|
d && b(d, n.value) && e.value.delete(d);
|
|
743
|
-
if (
|
|
745
|
+
if (s.value)
|
|
744
746
|
for (const d of e.value)
|
|
745
747
|
d && b(n.value, d) && e.value.delete(d);
|
|
746
748
|
e.value.add(n.value);
|
|
747
749
|
}
|
|
748
750
|
};
|
|
749
751
|
return {
|
|
750
|
-
handleUnselect:
|
|
752
|
+
handleUnselect: o,
|
|
751
753
|
handleSelect: g,
|
|
752
754
|
handleToggleSelect: () => {
|
|
753
|
-
n.value && (e.value.has(n.value) ?
|
|
755
|
+
n.value && (e.value.has(n.value) ? o() : g());
|
|
754
756
|
},
|
|
755
757
|
isSelected: r,
|
|
756
758
|
isParentOfSelected: l
|
|
757
759
|
};
|
|
758
760
|
};
|
|
759
761
|
export {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
762
|
+
re as DnDOperations,
|
|
763
|
+
Ye as default,
|
|
764
|
+
B as getBoundingBox,
|
|
763
765
|
K as useDnDStore,
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
766
|
+
Ae as useDragContainer,
|
|
767
|
+
Oe as useDraggable,
|
|
768
|
+
Re as useDroppable,
|
|
769
|
+
He as useSelection
|
|
768
770
|
};
|
|
769
771
|
//# sourceMappingURL=vue-dnd-kit-core.es.js.map
|