@vue-dnd-kit/core 1.3.0 → 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.
package/dist/index.d.ts
CHANGED
|
@@ -48,6 +48,10 @@ declare interface IBoundingBox {
|
|
|
48
48
|
top: number;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
declare interface IDnDPayload {
|
|
52
|
+
items: IDraggingElement[];
|
|
53
|
+
}
|
|
54
|
+
|
|
51
55
|
export declare interface IDnDStore extends ReturnType<typeof useDnDStore> {}
|
|
52
56
|
|
|
53
57
|
export declare interface IDragElement {
|
|
@@ -62,11 +66,11 @@ export declare interface IDragElement {
|
|
|
62
66
|
[key: string]: any;
|
|
63
67
|
} | null;
|
|
64
68
|
events: {
|
|
65
|
-
onHover?: (store: IDnDStore, payload:
|
|
66
|
-
onLeave?: (store: IDnDStore, payload:
|
|
67
|
-
onEnd?: (store: IDnDStore, payload:
|
|
68
|
-
onStart?: (store: IDnDStore, payload:
|
|
69
|
-
onMove?: (store: IDnDStore, payload:
|
|
69
|
+
onHover?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
70
|
+
onLeave?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
71
|
+
onEnd?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
72
|
+
onStart?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
73
|
+
onMove?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
70
74
|
};
|
|
71
75
|
}
|
|
72
76
|
|
|
@@ -83,9 +87,9 @@ export declare interface IDropZone {
|
|
|
83
87
|
[key: string]: any;
|
|
84
88
|
};
|
|
85
89
|
events: {
|
|
86
|
-
onHover?: (store: IDnDStore, payload:
|
|
87
|
-
onLeave?: (store: IDnDStore, payload:
|
|
88
|
-
onDrop?: (store: IDnDStore, payload:
|
|
90
|
+
onHover?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
91
|
+
onLeave?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
92
|
+
onDrop?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
89
93
|
};
|
|
90
94
|
}
|
|
91
95
|
|
|
@@ -102,11 +106,11 @@ declare interface IUseDragOptions extends IUseSensorOptions {
|
|
|
102
106
|
id?: string | number;
|
|
103
107
|
groups?: string[];
|
|
104
108
|
events?: {
|
|
105
|
-
onEnd?: (store: IDnDStore, payload:
|
|
106
|
-
onStart?: (store: IDnDStore, payload:
|
|
107
|
-
onMove?: (store: IDnDStore, payload:
|
|
108
|
-
onHover?: (store: IDnDStore, payload:
|
|
109
|
-
onLeave?: (store: IDnDStore, payload:
|
|
109
|
+
onEnd?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
110
|
+
onStart?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
111
|
+
onMove?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
112
|
+
onHover?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
113
|
+
onLeave?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
110
114
|
};
|
|
111
115
|
keyboard?: {
|
|
112
116
|
moveStep?: number;
|
|
@@ -123,9 +127,9 @@ declare interface IUseDragOptions extends IUseSensorOptions {
|
|
|
123
127
|
declare interface IUseDropOptions {
|
|
124
128
|
groups?: string[];
|
|
125
129
|
events?: {
|
|
126
|
-
onDrop?: (store: IDnDStore, payload:
|
|
127
|
-
onHover?: (store: IDnDStore, payload:
|
|
128
|
-
onLeave?: (store: IDnDStore, payload:
|
|
130
|
+
onDrop?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
131
|
+
onHover?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
132
|
+
onLeave?: (store: IDnDStore, payload: IDnDPayload) => void;
|
|
129
133
|
};
|
|
130
134
|
data?: {
|
|
131
135
|
source?: any[];
|
|
@@ -401,11 +405,11 @@ export declare const useDnDStore: () => {
|
|
|
401
405
|
index?: number | undefined;
|
|
402
406
|
} | null;
|
|
403
407
|
events: {
|
|
404
|
-
onHover?: ((store: IDnDStore, payload:
|
|
405
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
406
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
407
|
-
onStart?: ((store: IDnDStore, payload:
|
|
408
|
-
onMove?: ((store: IDnDStore, payload:
|
|
408
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
409
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
410
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
411
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
412
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
409
413
|
};
|
|
410
414
|
}> & Omit<Map<HTMLElement | Element, IDraggingElement>, keyof Map<any, any>>, Map<HTMLElement | Element, IDraggingElement> | (Map<HTMLElement | Element, {
|
|
411
415
|
initialHTML: string;
|
|
@@ -667,11 +671,11 @@ export declare const useDnDStore: () => {
|
|
|
667
671
|
index?: number | undefined;
|
|
668
672
|
} | null;
|
|
669
673
|
events: {
|
|
670
|
-
onHover?: ((store: IDnDStore, payload:
|
|
671
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
672
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
673
|
-
onStart?: ((store: IDnDStore, payload:
|
|
674
|
-
onMove?: ((store: IDnDStore, payload:
|
|
674
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
675
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
676
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
677
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
678
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
675
679
|
};
|
|
676
680
|
}> & Omit<Map<HTMLElement | Element, IDraggingElement>, keyof Map<any, any>>)>;
|
|
677
681
|
isDragging: ComputedRef<boolean>;
|
|
@@ -1159,11 +1163,11 @@ export declare const useDnDStore: () => {
|
|
|
1159
1163
|
index?: number | undefined;
|
|
1160
1164
|
} | null;
|
|
1161
1165
|
events: {
|
|
1162
|
-
onHover?: ((store: IDnDStore, payload:
|
|
1163
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
1164
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
1165
|
-
onStart?: ((store: IDnDStore, payload:
|
|
1166
|
-
onMove?: ((store: IDnDStore, payload:
|
|
1166
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1167
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1168
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1169
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1170
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1167
1171
|
};
|
|
1168
1172
|
}> & Omit<Map<HTMLElement | Element, IDragElement>, keyof Map<any, any>>, Map<HTMLElement | Element, IDragElement> | (Map<HTMLElement | Element, {
|
|
1169
1173
|
id: string | number;
|
|
@@ -1413,11 +1417,11 @@ export declare const useDnDStore: () => {
|
|
|
1413
1417
|
index?: number | undefined;
|
|
1414
1418
|
} | null;
|
|
1415
1419
|
events: {
|
|
1416
|
-
onHover?: ((store: IDnDStore, payload:
|
|
1417
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
1418
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
1419
|
-
onStart?: ((store: IDnDStore, payload:
|
|
1420
|
-
onMove?: ((store: IDnDStore, payload:
|
|
1420
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1421
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1422
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1423
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1424
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1421
1425
|
};
|
|
1422
1426
|
}> & Omit<Map<HTMLElement | Element, IDragElement>, keyof Map<any, any>>)>;
|
|
1423
1427
|
selectedElements: Ref<Set<HTMLElement | Element> & Omit<Set<HTMLElement | Element>, keyof Set<any>>, Set<HTMLElement | Element> | (Set<HTMLElement | Element> & Omit<Set<HTMLElement | Element>, keyof Set<any>>)>;
|
|
@@ -1429,9 +1433,9 @@ export declare const useDnDStore: () => {
|
|
|
1429
1433
|
source?: any[] | undefined;
|
|
1430
1434
|
} | undefined;
|
|
1431
1435
|
events: {
|
|
1432
|
-
onHover?: ((store: IDnDStore, payload:
|
|
1433
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
1434
|
-
onDrop?: ((store: IDnDStore, payload:
|
|
1436
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1437
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1438
|
+
onDrop?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1435
1439
|
};
|
|
1436
1440
|
}> & Omit<Map<HTMLElement | Element, IDropZone>, keyof Map<any, any>>, Map<HTMLElement | Element, IDropZone> | (Map<HTMLElement | Element, {
|
|
1437
1441
|
node: HTMLElement | Element | null;
|
|
@@ -1441,9 +1445,9 @@ export declare const useDnDStore: () => {
|
|
|
1441
1445
|
source?: any[] | undefined;
|
|
1442
1446
|
} | undefined;
|
|
1443
1447
|
events: {
|
|
1444
|
-
onHover?: ((store: IDnDStore, payload:
|
|
1445
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
1446
|
-
onDrop?: ((store: IDnDStore, payload:
|
|
1448
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1449
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1450
|
+
onDrop?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1447
1451
|
};
|
|
1448
1452
|
}> & Omit<Map<HTMLElement | Element, IDropZone>, keyof Map<any, any>>)>;
|
|
1449
1453
|
visibleZones: Ref<Set<HTMLElement | Element> & Omit<Set<HTMLElement | Element>, keyof Set<any>>, Set<HTMLElement | Element> | (Set<HTMLElement | Element> & Omit<Set<HTMLElement | Element>, keyof Set<any>>)>;
|
|
@@ -1736,11 +1740,11 @@ export declare const useDragContainer: (options?: Omit<TransitionProps, 'appear'
|
|
|
1736
1740
|
index?: number | undefined;
|
|
1737
1741
|
} | null;
|
|
1738
1742
|
events: {
|
|
1739
|
-
onHover?: ((store: IDnDStore, payload:
|
|
1740
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
1741
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
1742
|
-
onStart?: ((store: IDnDStore, payload:
|
|
1743
|
-
onMove?: ((store: IDnDStore, payload:
|
|
1743
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1744
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1745
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1746
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1747
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
1744
1748
|
};
|
|
1745
1749
|
}> & Omit<Map<HTMLElement | Element, IDraggingElement>, keyof Map<any, any>>, Map<HTMLElement | Element, IDraggingElement> | (Map<HTMLElement | Element, {
|
|
1746
1750
|
initialHTML: string;
|
|
@@ -2002,11 +2006,11 @@ export declare const useDragContainer: (options?: Omit<TransitionProps, 'appear'
|
|
|
2002
2006
|
index?: number | undefined;
|
|
2003
2007
|
} | null;
|
|
2004
2008
|
events: {
|
|
2005
|
-
onHover?: ((store: IDnDStore, payload:
|
|
2006
|
-
onLeave?: ((store: IDnDStore, payload:
|
|
2007
|
-
onEnd?: ((store: IDnDStore, payload:
|
|
2008
|
-
onStart?: ((store: IDnDStore, payload:
|
|
2009
|
-
onMove?: ((store: IDnDStore, payload:
|
|
2009
|
+
onHover?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
2010
|
+
onLeave?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
2011
|
+
onEnd?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
2012
|
+
onStart?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
2013
|
+
onMove?: ((store: IDnDStore, payload: IDnDPayload) => void) | undefined;
|
|
2010
2014
|
};
|
|
2011
2015
|
}> & Omit<Map<HTMLElement | Element, IDraggingElement>, keyof Map<any, any>>)>;
|
|
2012
2016
|
pointerPosition: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ee=Object.defineProperty;var te=(n,e,t)=>e in n?ee(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var b=(n,e,t)=>te(n,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),Y=require("@vueuse/core"),w=class w{};b(w,"remove",(e,t)=>{if(!e||t===void 0)return;const[a]=e.splice(t,1);return a}),b(w,"insert",(e,t,a)=>{!e||t===void 0||e.splice(t,0,a)}),b(w,"move",(e,t,a,o)=>{if(!e||!a||t===void 0||o===void 0)return;const s=w.remove(e,t);w.insert(a,o,s)}),b(w,"swap",(e,t,a,o)=>{if(!e||!a||t===void 0||o===void 0)return;const s=e[t],u=a[o];e[t]=u,a[o]=s}),b(w,"copy",(e,t,a,o)=>{if(!e||t===void 0||!a||o===void 0)return;const s=e[t];w.insert(a,o,s)}),b(w,"applyTransfer",e=>{var o,s,u,m,i,v,f;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t){const d=(s=(o=e.elementsMap.value.get(t))==null?void 0:o.data)==null?void 0:s.source,l=(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.index,c=e.draggingElements.value.values().next().value,g=(i=c==null?void 0:c.data)==null?void 0:i.index,h=g!==void 0&&l!==void 0&&g>l?1:-1;Array.from(e.draggingElements.value.values()).sort((y,A)=>{var x,_;return h*((((x=y.data)==null?void 0:x.index)||0)-(((_=A.data)==null?void 0:_.index)||0))}).forEach(y=>{var A,x;return w.move((A=y.data)==null?void 0:A.source,(x=y.data)==null?void 0:x.index,d,l)})}else if(a){const d=(f=(v=e.zonesMap.value.get(a))==null?void 0:v.data)==null?void 0:f.source,l=d==null?void 0:d.length;Array.from(e.draggingElements.value.values()).sort((g,h)=>{var E,y;return(((E=h.data)==null?void 0:E.index)||0)-(((y=g.data)==null?void 0:y.index)||0)}).forEach(g=>{var h,E;return w.move((h=g.data)==null?void 0:h.source,(E=g.data)==null?void 0:E.index,d,l)})}}),b(w,"applyCopy",e=>{var o,s,u,m,i,v;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t){const f=(s=(o=e.elementsMap.value.get(t))==null?void 0:o.data)==null?void 0:s.source,d=(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.index;Array.from(e.draggingElements.value.values()).sort((c,g)=>{var h,E;return(((h=g.data)==null?void 0:h.index)||0)-(((E=c.data)==null?void 0:E.index)||0)}).forEach(c=>{var g,h;return w.copy((g=c.data)==null?void 0:g.source,(h=c.data)==null?void 0:h.index,f,d)})}else if(a){const f=(v=(i=e.zonesMap.value.get(a))==null?void 0:i.data)==null?void 0:v.source,d=f==null?void 0:f.length;Array.from(e.draggingElements.value.values()).sort((c,g)=>{var h,E;return(((h=g.data)==null?void 0:h.index)||0)-(((E=c.data)==null?void 0:E.index)||0)}).forEach(c=>{var g,h;return w.copy((g=c.data)==null?void 0:g.source,(h=c.data)==null?void 0:h.index,f,d)})}}),b(w,"applySwap",e=>{var o,s,u,m,i,v,f,d;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t&&e.draggingElements.value.size===1){const l=e.draggingElements.value.values().next().value;w.swap((o=l==null?void 0:l.data)==null?void 0:o.source,(s=l==null?void 0:l.data)==null?void 0:s.index,(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.source,(v=(i=e.elementsMap.value.get(t))==null?void 0:i.data)==null?void 0:v.index)}else if(a){const l=(d=(f=e.zonesMap.value.get(a))==null?void 0:f.data)==null?void 0:d.source,c=l==null?void 0:l.length;Array.from(e.draggingElements.value.values()).sort((h,E)=>{var y,A;return(((y=E.data)==null?void 0:y.index)||0)-(((A=h.data)==null?void 0:A.index)||0)}).forEach(h=>{var E,y;return w.move((E=h.data)==null?void 0:E.source,(y=h.data)==null?void 0:y.index,l,c)})}}),b(w,"applyRemove",e=>{Array.from(e.draggingElements.value.values()).sort((a,o)=>{var s,u;return(((s=o.data)==null?void 0:s.index)||0)-(((u=a.data)==null?void 0:u.index)||0)}).forEach(a=>{var o,s;(o=a.data)!=null&&o.source&&((s=a.data)==null?void 0:s.index)!==void 0&&w.remove(a.data.source,a.data.index)})}),b(w,"applyInsert",(e,t)=>{var s,u,m,i,v,f;const a=e.hovered.element.value,o=e.hovered.zone.value;if(a&&t.length>0){const d=(u=(s=e.elementsMap.value.get(a))==null?void 0:s.data)==null?void 0:u.source,l=(i=(m=e.elementsMap.value.get(a))==null?void 0:m.data)==null?void 0:i.index;t.forEach(c=>{w.insert(d,l,c)})}else if(o){const d=(f=(v=e.zonesMap.value.get(o))==null?void 0:v.data)==null?void 0:f.source,l=d==null?void 0:d.length;t.forEach(c=>{w.insert(d,l,c)})}});let F=w;const z=Y.createGlobalState(()=>{const n=r.ref(new Map),e=r.computed(()=>n.value.size>0),t={component:r.ref(null),ref:r.shallowRef(null),options:r.shallowRef(null)},a=r.ref(new Map),o=r.ref(new Set),s=r.ref(new Map),u=r.ref(new Set),m=r.ref(new Set),i=new IntersectionObserver(B=>{B.forEach(p=>m.value[p.isIntersecting?"add":"delete"](p.target))}),v=new IntersectionObserver(B=>{B.forEach(p=>u.value[p.isIntersecting?"add":"delete"](p.target))}),f=(B,p)=>{B==="add"?i.observe(p):(i.unobserve(p),m.value.delete(p))},d=(B,p)=>{B==="add"?v.observe(p):(v.unobserve(p),u.value.delete(p))},l={start:r.shallowRef(null),current:r.shallowRef(null),offset:{percent:r.shallowRef(null),pixel:r.shallowRef(null)}},{w:c,s:g,a:h,d:E,ctrl:y,shift:A,alt:x,meta:_}=Y.useMagicKeys(),U={zone:r.shallowRef(null),element:r.shallowRef(null)};return{draggingElements:n,isDragging:e,activeContainer:t,elementsMap:a,selectedElements:o,zonesMap:s,visibleZones:u,visibleElements:m,pointerPosition:l,keyboard:{w:c,s:g,a:h,d:E,ctrl:y,shift:A,alt:x,meta:_},hovered:U,handleDragElementIntersection:f,handleDropZoneIntersection:d}}),W=n=>{const e=r.ref(null),{draggingElements:t,pointerPosition:a,isDragging:o,activeContainer:s}=z();return r.onMounted(()=>{s.ref=e,s.options.value=n??null}),r.onUnmounted(()=>{s.ref.value=null,s.options.value=null}),{elementRef:e,draggingElements:t,pointerPosition:a,isDragging:o}},ne=["innerHTML"],re=r.defineComponent({__name:"DefaultOverlay",setup(n){const{elementRef:e,pointerPosition:t,isDragging:a,draggingElements:o}=W(),s=r.computed(()=>{var u,m,i,v;return{transform:`translate3d(${(((u=t.current.value)==null?void 0:u.x)??0)-(((m=t.offset.pixel.value)==null?void 0:m.x)??0)}px, ${(((i=t.current.value)==null?void 0:i.y)??0)-(((v=t.offset.pixel.value)==null?void 0:v.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(u,m)=>r.unref(a)?(r.openBlock(),r.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:r.normalizeStyle(s.value)},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(o),([i,v])=>{var f,d;return r.openBlock(),r.createElementBlock("div",{key:v.id,innerHTML:v.initialHTML,style:r.normalizeStyle({width:`${(f=v.initialRect)==null?void 0:f.width}px`,height:`${(d=v.initialRect)==null?void 0:d.height}px`})},null,12,ne)}),128))],4)):r.createCommentVNode("",!0)}}),$=r.defineComponent({__name:"DragOverlay",setup(n){const{activeContainer:e}=z(),t=r.computed(()=>e.component.value??re);return(a,o)=>r.unref(e).options.value?(r.openBlock(),r.createBlock(r.Transition,{key:0,name:r.unref(e).options.value.name,duration:r.unref(e).options.value.duration,"enter-from-class":r.unref(e).options.value.enterFromClass,"enter-to-class":r.unref(e).options.value.enterToClass,"enter-active-class":r.unref(e).options.value.enterActiveClass,"leave-from-class":r.unref(e).options.value.leaveFromClass,"leave-to-class":r.unref(e).options.value.leaveToClass,"leave-active-class":r.unref(e).options.value.leaveActiveClass,"appear-active-class":r.unref(e).options.value.appearActiveClass,"appear-from-class":r.unref(e).options.value.appearFromClass,"appear-to-class":r.unref(e).options.value.appearToClass,mode:r.unref(e).options.value.mode,type:r.unref(e).options.value.type,css:r.unref(e).options.value.css,appear:!0,persisted:r.unref(e).options.value.persisted,onEnter:r.unref(e).options.value.onEnter,onLeave:r.unref(e).options.value.onLeave,onBeforeEnter:r.unref(e).options.value.onBeforeEnter,onBeforeLeave:r.unref(e).options.value.onBeforeLeave,onBeforeAppear:r.unref(e).options.value.onBeforeAppear,onAfterEnter:r.unref(e).options.value.onAfterEnter,onAfterLeave:r.unref(e).options.value.onAfterLeave,onAfterAppear:r.unref(e).options.value.onAfterAppear},{default:r.withCtx(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.value)))]),_: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"])):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.value),{key:1}))}}),ae={install(n){n.component("DragOverlay",$);const e=n.mount;n.mount=function(a){const o=e.call(this,a),s=typeof a=="string"?document.querySelector(a):a;if(s&&s instanceof Element&&!s.querySelector("#vue-dnd-kit-overlay")){const u=document.createElement("div");u.id="vue-dnd-kit-overlay",u.style.pointerEvents="none",s.appendChild(u);const m=r.createVNode($);r.render(m,u),n.__VUE_DND_KIT_OVERLAY__={container:u,vnode:m};const i=z();n.__VUE_DND_KIT_STORE__=i}return o};const t=n.unmount;n.unmount=function(){return n.__VUE_DND_KIT_OVERLAY__&&(r.render(null,n.__VUE_DND_KIT_OVERLAY__.container),delete n.__VUE_DND_KIT_OVERLAY__),t.call(this)}}},G=(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,R=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}},H=n=>({x:n.x+n.width/2,y:n.y+n.height/2}),le=(n,e)=>{const t=R(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}}},j=(n,e)=>{const t=e.x-n.x,a=e.y-n.y;return Math.sqrt(t*t+a*a)},J=(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)),o=t*a,s=n.width*n.height,u=e.width*e.height;return(o/s*100+o/u*100)/2},Q="data-vue-dnd-kit-draggable",C=n=>{n.preventDefault()},oe=n=>{const{elementsMap:e,draggingElements:t,hovered:a,selectedElements:o,isDragging:s,visibleElements:u,handleDragElementIntersection:m}=z(),i=r.ref(null),v=r.computed(()=>u.value.has(i.value)&&a.element.value===i.value),f=r.shallowRef((n==null?void 0:n.id)||r.useId()),d=r.computed(()=>!i.value||!u.value.has(i.value)?!1:t.value.has(i.value)),l=r.computed(()=>{if(!i.value||!s.value||!u.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(([E,y])=>y.groups.length?!y.groups.some(A=>h.groups.includes(A)):!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:f.value}),m("add",i.value),i.value.addEventListener("dragstart",C),i.value.addEventListener("drag",C),i.value.setAttribute(Q,"true"),i.value.setAttribute("draggable","false")},unregisterElement:()=>{i.value&&(e.value.delete(i.value),o.value.delete(i.value),i.value.removeEventListener("dragstart",C),i.value.removeEventListener("drag",C),i.value.removeAttribute(Q),i.value.removeAttribute("draggable"))},isDragging:d,isOvered:v,isAllowed:l,id:f}},T=(n,e)=>n?e.contains(n):!1,se=n=>{var f,d;const e=R(n.activeContainer.ref.value),t=H(e),a=((f=n.pointerPosition.current.value)==null?void 0:f.x)??0,o=((d=n.pointerPosition.current.value)==null?void 0:d.y)??0,u=!(e&&a>=e.x&&a<=e.x+e.width&&o>=e.y&&o<=e.y+e.height),m=Array.from(n.draggingElements.value.keys()),i=Array.from(n.visibleElements.value.entries()).filter(([l,c])=>{if(!l)return!1;const g=R(l);return g&&e&&G(g,e)}).map(([l,c])=>{const g=R(l),h=H(g),E=a>=g.x&&a<=g.x+g.width&&o>=g.y&&o<=g.y+g.height,y=J(g,e),A=j(t,h);let x=0;for(const[_,U]of n.visibleElements.value.entries())_!==l&&_&&l&&T(l,_)&&x++;return{element:c,node:l,isPointerInElement:E,overlapPercent:y,depth:x,centerDistance:A}}).sort((l,c)=>{if(!u){if(l.isPointerInElement&&c.isPointerInElement)return c.depth-l.depth;if(l.isPointerInElement!==c.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-c.overlapPercent)<=1?l.centerDistance-c.centerDistance:c.overlapPercent-l.overlapPercent}),v=Array.from(n.visibleZones.value.entries()).filter(([l,c])=>{if(!l||m.some(h=>h&&T(l,h)))return!1;const g=R(l);return g&&e&&G(g,e)}).map(([l,c])=>{const g=R(l),h=H(g),E=a>=g.x&&a<=g.x+g.width&&o>=g.y&&o<=g.y+g.height,y=J(g,e),A=j(t,h);let x=0;for(const[_,U]of n.visibleZones.value.entries())_!==l&&_&&l&&T(l,_)&&x++;return{zone:c,node:l,isPointerInElement:E,overlapPercent:y,depth:x,centerDistance:A}}).sort((l,c)=>{if(!u){if(l.isPointerInElement&&c.isPointerInElement)return c.depth-l.depth;if(l.isPointerInElement!==c.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-c.overlapPercent)<=1?l.centerDistance-c.centerDistance:c.overlapPercent-l.overlapPercent});return[...i.map(l=>l.node),...v.map(l=>l.node)]},ue=(n,e)=>{const{pointerPosition:t,keyboard:a}=z(),o=(e==null?void 0:e.moveStep)||10;return{onKeyboardStart:i=>{var l;C(i);const v=R(n.value);(l=n.value)==null||l.blur();const f=v.x+v.width/2,d=v.y+v.height/2;t.start.value={x:f,y:d},t.current.value={x:f,y:d},t.offset.pixel.value={x:v.width/2,y:v.height/2},t.offset.percent.value={x:50,y:50}},onKeyboardMove:()=>{if(!t.current.value)return;const i=t.current.value.x,v=t.current.value.y;let f=i,d=v;a.w.value&&(d-=o),a.s.value&&(d+=o),a.a.value&&(f-=o),a.d.value&&(f+=o),t.current.value={x:f,y:d}},onKeyboardEnd:()=>{t.current.value=null,t.start.value=null,t.offset.pixel.value=null,t.offset.percent.value=null}}},ie=n=>{const e=z();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:u,percent:m}=le(n.value,{x:s.clientX,y:s.clientY});e.pointerPosition.offset.pixel.value=u,e.pointerPosition.offset.percent.value=m},onPointerMove:s=>{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}}},ce=(n,e)=>{var U,B;const t=z(),{onPointerStart:a,onPointerMove:o,onPointerEnd:s}=ie(n),{onKeyboardStart:u,onKeyboardMove:m,onKeyboardEnd:i}=ue(n,e==null?void 0:e.keyboard);let v=null;const f=p=>{var I,L;if(!p)return new Map;const S=t.selectedElements.value.has(p);if(t.selectedElements.value.size>0&&S){const D=new Map;return t.selectedElements.value.forEach(k=>{var Z,O;const K=t.elementsMap.value.get(k);K&&D.set(k,{...K,initialHTML:((Z=K.node)==null?void 0:Z.outerHTML)??"",initialRect:(O=K.node)==null?void 0:O.getBoundingClientRect()})}),D}t.selectedElements.value.clear();const P=t.elementsMap.value.get(p);if(!P)return new Map;const M=new Map;return M.set(p,{...P,initialHTML:((I=P.node)==null?void 0:I.outerHTML)??"",initialRect:(L=P.node)==null?void 0:L.getBoundingClientRect()}),M},d=p=>{if(!p)return{element:null,zone:null};const S=Array.isArray(p)?p:[p],P=Array.from(t.draggingElements.value.keys()),M=S.find(L=>{if(!t.visibleZones.value.has(L))return!1;const D=t.zonesMap.value.get(L);return!(!D||P.some(k=>k&&(k===D.node||T(D.node,k)))||D.groups.length&&!!Array.from(t.draggingElements.value.values()).some(K=>K.groups.length?!K.groups.some(Z=>D.groups.includes(Z)):!1))});return M?{element:S.find(L=>t.visibleElements.value.has(L)&&t.elementsMap.value.has(L)&&!P.some(D=>D&&(D===L||T(L,D)||T(D,L)))&&(L===M||T(L,M)))||null,zone:M}:{element:null,zone:null}},l=((U=e==null?void 0:e.sensor)==null?void 0:U.setup)||se,c=p=>{var M,I,L,D,k,K,Z,O,X,N,V,q;const S=t.hovered.element.value,P=t.hovered.zone.value;t.hovered.element.value=p.element,t.hovered.zone.value=p.zone,S&&t.hovered.element.value!==S&&((L=(I=(M=t.elementsMap.value.get(S))==null?void 0:M.events)==null?void 0:I.onLeave)==null||L.call(I,t,Array.from(t.draggingElements.value.values())),t.hovered.element.value&&((K=(k=(D=t.elementsMap.value.get(t.hovered.element.value))==null?void 0:D.events)==null?void 0:k.onHover)==null||K.call(k,t,Array.from(t.draggingElements.value.values())))),P&&t.hovered.zone.value!==P&&((X=(O=(Z=t.zonesMap.value.get(P))==null?void 0:Z.events)==null?void 0:O.onLeave)==null||X.call(O,t,Array.from(t.draggingElements.value.values())),t.hovered.zone.value&&((q=(V=(N=t.zonesMap.value.get(t.hovered.zone.value))==null?void 0:N.events)==null?void 0:V.onHover)==null||q.call(V,t,Array.from(t.draggingElements.value.values()))))},g=Y.useThrottleFn(()=>{const p=l(t),S=d(p);c(S)},((B=e==null?void 0:e.sensor)==null?void 0:B.throttle)??0),h=()=>{g(),v=requestAnimationFrame(h)},E=()=>h(),y=()=>{v!==null&&(cancelAnimationFrame(v),v=null)};return{activate:p=>{t.draggingElements.value=f(n.value),t.draggingElements.value.forEach(S=>{var P,M;return(M=(P=S.events).onStart)==null?void 0:M.call(P,t,Array.from(t.draggingElements.value.values()))}),p instanceof PointerEvent?a(p):u(p),E()},track:p=>{t.draggingElements.value.forEach(S=>{var P,M;return(M=(P=S.events).onMove)==null?void 0:M.call(P,t,Array.from(t.draggingElements.value.values()))}),p instanceof KeyboardEvent?m():o(p)},deactivate:(p=!0)=>{var S,P;if(s(),i(),p){if(t.hovered.zone.value){const M=t.zonesMap.value.get(t.hovered.zone.value);(P=M==null?void 0:(S=M.events).onDrop)==null||P.call(S,t,Array.from(t.draggingElements.value.values()))}else t.draggingElements.value.forEach(M=>{var I,L;return(L=(I=M.events).onEnd)==null?void 0:L.call(I,t,Array.from(t.draggingElements.value.values()))});t.selectedElements.value.clear()}t.draggingElements.value.clear(),t.hovered.zone.value=null,t.hovered.element.value=null,y()}}},ve=Y.createGlobalState(()=>{let n="",e="",t="",a=null,o=null,s=null,u=null,m=null;const{activeContainer:i}=z(),v=()=>{const c=document.body;n=c.style.userSelect,c.style.userSelect="none",window.addEventListener("contextmenu",C),window.addEventListener("selectstart",C),window.addEventListener("touchstart",C),window.addEventListener("touchmove",C)},f=()=>{const c=document.body;c.style.userSelect=n,c.style.touchAction=e,c.style.overscrollBehavior=t,window.removeEventListener("contextmenu",C),window.removeEventListener("selectstart",C),window.removeEventListener("touchstart",C),window.removeEventListener("touchmove",C)},d=()=>{a&&(document.removeEventListener("pointermove",a),a=null),o&&(document.removeEventListener("pointerup",o),o=null),s&&(s=null),u&&(document.removeEventListener("wheel",u),u=null),m&&(document.removeEventListener("keydown",m),document.removeEventListener("keypress",m),document.removeEventListener("keyup",m),m=null)};return{handleDragStart:(c,g,h)=>{d(),c.target.blur(),h!=null&&h.container&&(i.component.value=r.markRaw(h.container));const{activate:E,track:y,deactivate:A}=ce(g,h);o=()=>{i.component.value=null,f(),A(!0),d()},s=()=>{i.component.value=null,f(),A(!1),d()},a=x=>y(x),u=x=>y(x),m=x=>{x.type==="keyup"&&(x.code==="Escape"&&(s==null||s()),x.code==="Enter"&&(o==null||o())),y(x)},v(),E(c),document.addEventListener("pointermove",a),document.addEventListener("pointerup",o),document.addEventListener("wheel",u),document.addEventListener("keydown",m),document.addEventListener("keypress",m),document.addEventListener("keyup",m)}}}),de=n=>{const{id:e,elementRef:t,isDragging:a,isOvered:o,isAllowed:s,registerElement:u,unregisterElement:m}=oe(n),{pointerPosition:i}=z(),{handleDragStart:v}=ve(),f=d=>v(d,t,n);return r.onMounted(u),r.onBeforeUnmount(m),{pointerPosition:i,elementRef:t,isDragging:a,isOvered:o,isAllowed:s,handleDragStart:f,id:e}},fe=n=>{const{zonesMap:e,hovered:t,draggingElements:a,isDragging:o,handleDropZoneIntersection:s}=z(),u=r.ref(null),m=r.computed(()=>t.zone.value===u.value),i=r.computed(()=>{if(!u.value||!o.value)return!1;const d=e.value.get(u.value);return d!=null&&d.groups.length?!Array.from(a.value.values()).some(l=>l.groups.length?!l.groups.some(c=>d.groups.includes(c)):!1):!0});return{elementRef:u,registerZone:()=>{if(!u.value)throw new Error("elementRef is not set");s("add",u.value),e.value.set(u.value,{node:u.value,groups:(n==null?void 0:n.groups)??[],events:(n==null?void 0:n.events)??{},data:(n==null?void 0:n.data)??void 0}),u.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{u.value&&(s("remove",u.value),e.value.delete(u.value))},isOvered:m,isAllowed:i}},ge=n=>{const{elementRef:e,registerZone:t,unregisterZone:a,isOvered:o,isAllowed:s}=fe(n);return r.onMounted(t),r.onBeforeUnmount(a),{elementRef:e,isOvered:o,isAllowed:s}},me=n=>{const{selectedElements:e,elementsMap:t}=z(),a=r.computed(()=>n.value?e.value.has(n.value):!1),o=r.computed(()=>{if(!n.value)return!1;for(const v of e.value)if(v&&T(v,n.value))return!0;return!1}),s=r.computed(()=>{if(!n.value)return!1;for(const v of e.value)if(v&&T(n.value,v))return!0;return!1}),u=()=>{n.value&&e.value.delete(n.value)},m=()=>{if(!(!n.value||!t.value.get(n.value))){if(o.value)for(const f of e.value)f&&T(f,n.value)&&e.value.delete(f);if(s.value)for(const f of e.value)f&&T(n.value,f)&&e.value.delete(f);e.value.add(n.value)}};return{handleUnselect:u,handleSelect:m,handleToggleSelect:()=>{n.value&&(e.value.has(n.value)?u():m())},isSelected:a,isParentOfSelected:o}};exports.DnDOperations=F;exports.default=ae;exports.getBoundingBox=R;exports.useDnDStore=z;exports.useDragContainer=W;exports.useDraggable=de;exports.useDroppable=ge;exports.useSelection=me;
|
|
1
|
+
"use strict";var te=Object.defineProperty;var ne=(n,e,t)=>e in n?te(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var b=(n,e,t)=>ne(n,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),H=require("@vueuse/core"),w=class w{};b(w,"remove",(e,t)=>{if(!e||t===void 0)return;const[a]=e.splice(t,1);return a}),b(w,"insert",(e,t,a)=>{!e||t===void 0||e.splice(t,0,a)}),b(w,"move",(e,t,a,o)=>{if(!e||!a||t===void 0||o===void 0)return;const s=w.remove(e,t);w.insert(a,o,s)}),b(w,"swap",(e,t,a,o)=>{if(!e||!a||t===void 0||o===void 0)return;const s=e[t],u=a[o];e[t]=u,a[o]=s}),b(w,"copy",(e,t,a,o)=>{if(!e||t===void 0||!a||o===void 0)return;const s=e[t];w.insert(a,o,s)}),b(w,"applyTransfer",e=>{var o,s,u,m,i,v,f;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t){const d=(s=(o=e.elementsMap.value.get(t))==null?void 0:o.data)==null?void 0:s.source,l=(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.index,c=e.draggingElements.value.values().next().value,g=(i=c==null?void 0:c.data)==null?void 0:i.index,h=g!==void 0&&l!==void 0&&g>l?1:-1;Array.from(e.draggingElements.value.values()).sort((y,L)=>{var x,_;return h*((((x=y.data)==null?void 0:x.index)||0)-(((_=L.data)==null?void 0:_.index)||0))}).forEach(y=>{var L,x;return w.move((L=y.data)==null?void 0:L.source,(x=y.data)==null?void 0:x.index,d,l)})}else if(a){const d=(f=(v=e.zonesMap.value.get(a))==null?void 0:v.data)==null?void 0:f.source,l=d==null?void 0:d.length;Array.from(e.draggingElements.value.values()).sort((g,h)=>{var E,y;return(((E=h.data)==null?void 0:E.index)||0)-(((y=g.data)==null?void 0:y.index)||0)}).forEach(g=>{var h,E;return w.move((h=g.data)==null?void 0:h.source,(E=g.data)==null?void 0:E.index,d,l)})}}),b(w,"applyCopy",e=>{var o,s,u,m,i,v;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t){const f=(s=(o=e.elementsMap.value.get(t))==null?void 0:o.data)==null?void 0:s.source,d=(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.index;Array.from(e.draggingElements.value.values()).sort((c,g)=>{var h,E;return(((h=g.data)==null?void 0:h.index)||0)-(((E=c.data)==null?void 0:E.index)||0)}).forEach(c=>{var g,h;return w.copy((g=c.data)==null?void 0:g.source,(h=c.data)==null?void 0:h.index,f,d)})}else if(a){const f=(v=(i=e.zonesMap.value.get(a))==null?void 0:i.data)==null?void 0:v.source,d=f==null?void 0:f.length;Array.from(e.draggingElements.value.values()).sort((c,g)=>{var h,E;return(((h=g.data)==null?void 0:h.index)||0)-(((E=c.data)==null?void 0:E.index)||0)}).forEach(c=>{var g,h;return w.copy((g=c.data)==null?void 0:g.source,(h=c.data)==null?void 0:h.index,f,d)})}}),b(w,"applySwap",e=>{var o,s,u,m,i,v,f,d;const t=e.hovered.element.value,a=e.hovered.zone.value;if(t&&e.draggingElements.value.size===1){const l=e.draggingElements.value.values().next().value;w.swap((o=l==null?void 0:l.data)==null?void 0:o.source,(s=l==null?void 0:l.data)==null?void 0:s.index,(m=(u=e.elementsMap.value.get(t))==null?void 0:u.data)==null?void 0:m.source,(v=(i=e.elementsMap.value.get(t))==null?void 0:i.data)==null?void 0:v.index)}else if(a){const l=(d=(f=e.zonesMap.value.get(a))==null?void 0:f.data)==null?void 0:d.source,c=l==null?void 0:l.length;Array.from(e.draggingElements.value.values()).sort((h,E)=>{var y,L;return(((y=E.data)==null?void 0:y.index)||0)-(((L=h.data)==null?void 0:L.index)||0)}).forEach(h=>{var E,y;return w.move((E=h.data)==null?void 0:E.source,(y=h.data)==null?void 0:y.index,l,c)})}}),b(w,"applyRemove",e=>{Array.from(e.draggingElements.value.values()).sort((a,o)=>{var s,u;return(((s=o.data)==null?void 0:s.index)||0)-(((u=a.data)==null?void 0:u.index)||0)}).forEach(a=>{var o,s;(o=a.data)!=null&&o.source&&((s=a.data)==null?void 0:s.index)!==void 0&&w.remove(a.data.source,a.data.index)})}),b(w,"applyInsert",(e,t)=>{var s,u,m,i,v,f;const a=e.hovered.element.value,o=e.hovered.zone.value;if(a&&t.length>0){const d=(u=(s=e.elementsMap.value.get(a))==null?void 0:s.data)==null?void 0:u.source,l=(i=(m=e.elementsMap.value.get(a))==null?void 0:m.data)==null?void 0:i.index;t.forEach(c=>{w.insert(d,l,c)})}else if(o){const d=(f=(v=e.zonesMap.value.get(o))==null?void 0:v.data)==null?void 0:f.source,l=d==null?void 0:d.length;t.forEach(c=>{w.insert(d,l,c)})}});let X=w;const z=H.createGlobalState(()=>{const n=r.ref(new Map),e=r.computed(()=>n.value.size>0),t={component:r.ref(null),ref:r.shallowRef(null),options:r.shallowRef(null)},a=r.ref(new Map),o=r.ref(new Set),s=r.ref(new Map),u=r.ref(new Set),m=r.ref(new Set),i=new IntersectionObserver(B=>{B.forEach(p=>m.value[p.isIntersecting?"add":"delete"](p.target))}),v=new IntersectionObserver(B=>{B.forEach(p=>u.value[p.isIntersecting?"add":"delete"](p.target))}),f=(B,p)=>{B==="add"?i.observe(p):(i.unobserve(p),m.value.delete(p))},d=(B,p)=>{B==="add"?v.observe(p):(v.unobserve(p),u.value.delete(p))},l={start:r.shallowRef(null),current:r.shallowRef(null),offset:{percent:r.shallowRef(null),pixel:r.shallowRef(null)}},{w:c,s:g,a:h,d:E,ctrl:y,shift:L,alt:x,meta:_}=H.useMagicKeys(),V={zone:r.shallowRef(null),element:r.shallowRef(null)};return{draggingElements:n,isDragging:e,activeContainer:t,elementsMap:a,selectedElements:o,zonesMap:s,visibleZones:u,visibleElements:m,pointerPosition:l,keyboard:{w:c,s:g,a:h,d:E,ctrl:y,shift:L,alt:x,meta:_},hovered:V,handleDragElementIntersection:f,handleDropZoneIntersection:d}}),ee=n=>{const e=r.ref(null),{draggingElements:t,pointerPosition:a,isDragging:o,activeContainer:s}=z();return r.onMounted(()=>{s.ref=e,s.options.value=n??null}),r.onUnmounted(()=>{s.ref.value=null,s.options.value=null}),{elementRef:e,draggingElements:t,pointerPosition:a,isDragging:o}},re=["innerHTML"],ae=r.defineComponent({__name:"DefaultOverlay",setup(n){const{elementRef:e,pointerPosition:t,isDragging:a,draggingElements:o}=ee(),s=r.computed(()=>{var u,m,i,v;return{transform:`translate3d(${(((u=t.current.value)==null?void 0:u.x)??0)-(((m=t.offset.pixel.value)==null?void 0:m.x)??0)}px, ${(((i=t.current.value)==null?void 0:i.y)??0)-(((v=t.offset.pixel.value)==null?void 0:v.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(u,m)=>r.unref(a)?(r.openBlock(),r.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:r.normalizeStyle(s.value)},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(o),([i,v])=>{var f,d;return r.openBlock(),r.createElementBlock("div",{key:v.id,innerHTML:v.initialHTML,style:r.normalizeStyle({width:`${(f=v.initialRect)==null?void 0:f.width}px`,height:`${(d=v.initialRect)==null?void 0:d.height}px`})},null,12,re)}),128))],4)):r.createCommentVNode("",!0)}}),G=r.defineComponent({__name:"DragOverlay",setup(n){const{activeContainer:e}=z(),t=r.computed(()=>e.component.value??ae);return(a,o)=>r.unref(e).options.value?(r.openBlock(),r.createBlock(r.Transition,{key:0,name:r.unref(e).options.value.name,duration:r.unref(e).options.value.duration,"enter-from-class":r.unref(e).options.value.enterFromClass,"enter-to-class":r.unref(e).options.value.enterToClass,"enter-active-class":r.unref(e).options.value.enterActiveClass,"leave-from-class":r.unref(e).options.value.leaveFromClass,"leave-to-class":r.unref(e).options.value.leaveToClass,"leave-active-class":r.unref(e).options.value.leaveActiveClass,"appear-active-class":r.unref(e).options.value.appearActiveClass,"appear-from-class":r.unref(e).options.value.appearFromClass,"appear-to-class":r.unref(e).options.value.appearToClass,mode:r.unref(e).options.value.mode,type:r.unref(e).options.value.type,css:r.unref(e).options.value.css,appear:!0,persisted:r.unref(e).options.value.persisted,onEnter:r.unref(e).options.value.onEnter,onLeave:r.unref(e).options.value.onLeave,onBeforeEnter:r.unref(e).options.value.onBeforeEnter,onBeforeLeave:r.unref(e).options.value.onBeforeLeave,onBeforeAppear:r.unref(e).options.value.onBeforeAppear,onAfterEnter:r.unref(e).options.value.onAfterEnter,onAfterLeave:r.unref(e).options.value.onAfterLeave,onAfterAppear:r.unref(e).options.value.onAfterAppear},{default:r.withCtx(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.value)))]),_: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"])):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.value),{key:1}))}}),le={install(n){n.component("DragOverlay",G);const e=n.mount;n.mount=function(a){const o=e.call(this,a),s=typeof a=="string"?document.querySelector(a):a;if(s&&s instanceof Element&&!s.querySelector("#vue-dnd-kit-overlay")){const u=document.createElement("div");u.id="vue-dnd-kit-overlay",u.style.pointerEvents="none",s.appendChild(u);const m=r.createVNode(G);r.render(m,u),n.__VUE_DND_KIT_OVERLAY__={container:u,vnode:m};const i=z();n.__VUE_DND_KIT_STORE__=i}return o};const t=n.unmount;n.unmount=function(){return n.__VUE_DND_KIT_OVERLAY__&&(r.render(null,n.__VUE_DND_KIT_OVERLAY__.container),delete n.__VUE_DND_KIT_OVERLAY__),t.call(this)}}},j=(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,Z=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}},F=n=>({x:n.x+n.width/2,y:n.y+n.height/2}),oe=(n,e)=>{const t=Z(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}}},J=(n,e)=>{const t=e.x-n.x,a=e.y-n.y;return Math.sqrt(t*t+a*a)},Q=(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)),o=t*a,s=n.width*n.height,u=e.width*e.height;return(o/s*100+o/u*100)/2},W="data-vue-dnd-kit-draggable",C=n=>{n.preventDefault()},R=n=>({items:Array.from(n.draggingElements.value.values())}),se=n=>{const{elementsMap:e,draggingElements:t,hovered:a,selectedElements:o,isDragging:s,visibleElements:u,handleDragElementIntersection:m}=z(),i=r.ref(null),v=r.computed(()=>u.value.has(i.value)&&a.element.value===i.value),f=r.shallowRef((n==null?void 0:n.id)||r.useId()),d=r.computed(()=>!i.value||!u.value.has(i.value)?!1:t.value.has(i.value)),l=r.computed(()=>{if(!i.value||!s.value||!u.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(([E,y])=>y.groups.length?!y.groups.some(L=>h.groups.includes(L)):!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:f.value}),m("add",i.value),i.value.addEventListener("dragstart",C),i.value.addEventListener("drag",C),i.value.setAttribute(W,"true"),i.value.setAttribute("draggable","false")},unregisterElement:()=>{i.value&&(e.value.delete(i.value),o.value.delete(i.value),i.value.removeEventListener("dragstart",C),i.value.removeEventListener("drag",C),i.value.removeAttribute(W),i.value.removeAttribute("draggable"))},isDragging:d,isOvered:v,isAllowed:l,id:f}},T=(n,e)=>n?e.contains(n):!1,ue=n=>{var f,d;const e=Z(n.activeContainer.ref.value),t=F(e),a=((f=n.pointerPosition.current.value)==null?void 0:f.x)??0,o=((d=n.pointerPosition.current.value)==null?void 0:d.y)??0,u=!(e&&a>=e.x&&a<=e.x+e.width&&o>=e.y&&o<=e.y+e.height),m=Array.from(n.draggingElements.value.keys()),i=Array.from(n.visibleElements.value.entries()).filter(([l,c])=>{if(!l)return!1;const g=Z(l);return g&&e&&j(g,e)}).map(([l,c])=>{const g=Z(l),h=F(g),E=a>=g.x&&a<=g.x+g.width&&o>=g.y&&o<=g.y+g.height,y=Q(g,e),L=J(t,h);let x=0;for(const[_,V]of n.visibleElements.value.entries())_!==l&&_&&l&&T(l,_)&&x++;return{element:c,node:l,isPointerInElement:E,overlapPercent:y,depth:x,centerDistance:L}}).sort((l,c)=>{if(!u){if(l.isPointerInElement&&c.isPointerInElement)return c.depth-l.depth;if(l.isPointerInElement!==c.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-c.overlapPercent)<=1?l.centerDistance-c.centerDistance:c.overlapPercent-l.overlapPercent}),v=Array.from(n.visibleZones.value.entries()).filter(([l,c])=>{if(!l||m.some(h=>h&&T(l,h)))return!1;const g=Z(l);return g&&e&&j(g,e)}).map(([l,c])=>{const g=Z(l),h=F(g),E=a>=g.x&&a<=g.x+g.width&&o>=g.y&&o<=g.y+g.height,y=Q(g,e),L=J(t,h);let x=0;for(const[_,V]of n.visibleZones.value.entries())_!==l&&_&&l&&T(l,_)&&x++;return{zone:c,node:l,isPointerInElement:E,overlapPercent:y,depth:x,centerDistance:L}}).sort((l,c)=>{if(!u){if(l.isPointerInElement&&c.isPointerInElement)return c.depth-l.depth;if(l.isPointerInElement!==c.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-c.overlapPercent)<=1?l.centerDistance-c.centerDistance:c.overlapPercent-l.overlapPercent});return[...i.map(l=>l.node),...v.map(l=>l.node)]},ie=(n,e)=>{const{pointerPosition:t,keyboard:a}=z(),o=(e==null?void 0:e.moveStep)||10;return{onKeyboardStart:i=>{var l;C(i);const v=Z(n.value);(l=n.value)==null||l.blur();const f=v.x+v.width/2,d=v.y+v.height/2;t.start.value={x:f,y:d},t.current.value={x:f,y:d},t.offset.pixel.value={x:v.width/2,y:v.height/2},t.offset.percent.value={x:50,y:50}},onKeyboardMove:()=>{if(!t.current.value)return;const i=t.current.value.x,v=t.current.value.y;let f=i,d=v;a.w.value&&(d-=o),a.s.value&&(d+=o),a.a.value&&(f-=o),a.d.value&&(f+=o),t.current.value={x:f,y:d}},onKeyboardEnd:()=>{t.current.value=null,t.start.value=null,t.offset.pixel.value=null,t.offset.percent.value=null}}},ce=n=>{const e=z();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:u,percent:m}=oe(n.value,{x:s.clientX,y:s.clientY});e.pointerPosition.offset.pixel.value=u,e.pointerPosition.offset.percent.value=m},onPointerMove:s=>{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}}},ve=(n,e)=>{var V,B;const t=z(),{onPointerStart:a,onPointerMove:o,onPointerEnd:s}=ce(n),{onKeyboardStart:u,onKeyboardMove:m,onKeyboardEnd:i}=ie(n,e==null?void 0:e.keyboard);let v=null;const f=p=>{var I,A;if(!p)return new Map;const S=t.selectedElements.value.has(p);if(t.selectedElements.value.size>0&&S){const D=new Map;return t.selectedElements.value.forEach(k=>{var O,U;const K=t.elementsMap.value.get(k);K&&D.set(k,{...K,initialHTML:((O=K.node)==null?void 0:O.outerHTML)??"",initialRect:(U=K.node)==null?void 0:U.getBoundingClientRect()})}),D}t.selectedElements.value.clear();const P=t.elementsMap.value.get(p);if(!P)return new Map;const M=new Map;return M.set(p,{...P,initialHTML:((I=P.node)==null?void 0:I.outerHTML)??"",initialRect:(A=P.node)==null?void 0:A.getBoundingClientRect()}),M},d=p=>{if(!p)return{element:null,zone:null};const S=Array.isArray(p)?p:[p],P=Array.from(t.draggingElements.value.keys()),M=S.find(A=>{if(!t.visibleZones.value.has(A))return!1;const D=t.zonesMap.value.get(A);return!(!D||P.some(k=>k&&(k===D.node||T(D.node,k)))||D.groups.length&&!!Array.from(t.draggingElements.value.values()).some(K=>K.groups.length?!K.groups.some(O=>D.groups.includes(O)):!1))});return M?{element:S.find(A=>t.visibleElements.value.has(A)&&t.elementsMap.value.has(A)&&!P.some(D=>D&&(D===A||T(A,D)||T(D,A)))&&(A===M||T(A,M)))||null,zone:M}:{element:null,zone:null}},l=((V=e==null?void 0:e.sensor)==null?void 0:V.setup)||ue,c=p=>{var M,I,A,D,k,K,O,U,N,q,Y,$;const S=t.hovered.element.value,P=t.hovered.zone.value;t.hovered.element.value=p.element,t.hovered.zone.value=p.zone,S&&t.hovered.element.value!==S&&((A=(I=(M=t.elementsMap.value.get(S))==null?void 0:M.events)==null?void 0:I.onLeave)==null||A.call(I,t,R(t)),t.hovered.element.value&&((K=(k=(D=t.elementsMap.value.get(t.hovered.element.value))==null?void 0:D.events)==null?void 0:k.onHover)==null||K.call(k,t,R(t)))),P&&t.hovered.zone.value!==P&&((N=(U=(O=t.zonesMap.value.get(P))==null?void 0:O.events)==null?void 0:U.onLeave)==null||N.call(U,t,R(t)),t.hovered.zone.value&&(($=(Y=(q=t.zonesMap.value.get(t.hovered.zone.value))==null?void 0:q.events)==null?void 0:Y.onHover)==null||$.call(Y,t,R(t))))},g=H.useThrottleFn(()=>{const p=l(t),S=d(p);c(S)},((B=e==null?void 0:e.sensor)==null?void 0:B.throttle)??0),h=()=>{g(),v=requestAnimationFrame(h)},E=()=>h(),y=()=>{v!==null&&(cancelAnimationFrame(v),v=null)};return{activate:p=>{t.draggingElements.value=f(n.value),t.draggingElements.value.forEach(S=>{var P,M;return(M=(P=S.events).onStart)==null?void 0:M.call(P,t,R(t))}),p instanceof PointerEvent?a(p):u(p),E()},track:p=>{t.draggingElements.value.forEach(S=>{var P,M;return(M=(P=S.events).onMove)==null?void 0:M.call(P,t,R(t))}),p instanceof KeyboardEvent?m():o(p)},deactivate:(p=!0)=>{var S,P;if(s(),i(),p){if(t.hovered.zone.value){const M=t.zonesMap.value.get(t.hovered.zone.value);(P=M==null?void 0:(S=M.events).onDrop)==null||P.call(S,t,R(t))}else t.draggingElements.value.forEach(M=>{var I,A;return(A=(I=M.events).onEnd)==null?void 0:A.call(I,t,R(t))});t.selectedElements.value.clear()}t.draggingElements.value.clear(),t.hovered.zone.value=null,t.hovered.element.value=null,y()}}},de=H.createGlobalState(()=>{let n="",e="",t="",a=null,o=null,s=null,u=null,m=null;const{activeContainer:i}=z(),v=()=>{const c=document.body;n=c.style.userSelect,c.style.userSelect="none",window.addEventListener("contextmenu",C),window.addEventListener("selectstart",C),window.addEventListener("touchstart",C),window.addEventListener("touchmove",C)},f=()=>{const c=document.body;c.style.userSelect=n,c.style.touchAction=e,c.style.overscrollBehavior=t,window.removeEventListener("contextmenu",C),window.removeEventListener("selectstart",C),window.removeEventListener("touchstart",C),window.removeEventListener("touchmove",C)},d=()=>{a&&(document.removeEventListener("pointermove",a),a=null),o&&(document.removeEventListener("pointerup",o),o=null),s&&(s=null),u&&(document.removeEventListener("wheel",u),u=null),m&&(document.removeEventListener("keydown",m),document.removeEventListener("keypress",m),document.removeEventListener("keyup",m),m=null)};return{handleDragStart:(c,g,h)=>{d(),c.target.blur(),h!=null&&h.container&&(i.component.value=r.markRaw(h.container));const{activate:E,track:y,deactivate:L}=ve(g,h);o=()=>{i.component.value=null,f(),L(!0),d()},s=()=>{i.component.value=null,f(),L(!1),d()},a=x=>y(x),u=x=>y(x),m=x=>{x.type==="keyup"&&(x.code==="Escape"&&(s==null||s()),x.code==="Enter"&&(o==null||o())),y(x)},v(),E(c),document.addEventListener("pointermove",a),document.addEventListener("pointerup",o),document.addEventListener("wheel",u),document.addEventListener("keydown",m),document.addEventListener("keypress",m),document.addEventListener("keyup",m)}}}),fe=n=>{const{id:e,elementRef:t,isDragging:a,isOvered:o,isAllowed:s,registerElement:u,unregisterElement:m}=se(n),{pointerPosition:i}=z(),{handleDragStart:v}=de(),f=d=>v(d,t,n);return r.onMounted(u),r.onBeforeUnmount(m),{pointerPosition:i,elementRef:t,isDragging:a,isOvered:o,isAllowed:s,handleDragStart:f,id:e}},ge=n=>{const{zonesMap:e,hovered:t,draggingElements:a,isDragging:o,handleDropZoneIntersection:s}=z(),u=r.ref(null),m=r.computed(()=>t.zone.value===u.value),i=r.computed(()=>{if(!u.value||!o.value)return!1;const d=e.value.get(u.value);return d!=null&&d.groups.length?!Array.from(a.value.values()).some(l=>l.groups.length?!l.groups.some(c=>d.groups.includes(c)):!1):!0});return{elementRef:u,registerZone:()=>{if(!u.value)throw new Error("elementRef is not set");s("add",u.value),e.value.set(u.value,{node:u.value,groups:(n==null?void 0:n.groups)??[],events:(n==null?void 0:n.events)??{},data:(n==null?void 0:n.data)??void 0}),u.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{u.value&&(s("remove",u.value),e.value.delete(u.value))},isOvered:m,isAllowed:i}},me=n=>{const{elementRef:e,registerZone:t,unregisterZone:a,isOvered:o,isAllowed:s}=ge(n);return r.onMounted(t),r.onBeforeUnmount(a),{elementRef:e,isOvered:o,isAllowed:s}},he=n=>{const{selectedElements:e,elementsMap:t}=z(),a=r.computed(()=>n.value?e.value.has(n.value):!1),o=r.computed(()=>{if(!n.value)return!1;for(const v of e.value)if(v&&T(v,n.value))return!0;return!1}),s=r.computed(()=>{if(!n.value)return!1;for(const v of e.value)if(v&&T(n.value,v))return!0;return!1}),u=()=>{n.value&&e.value.delete(n.value)},m=()=>{if(!(!n.value||!t.value.get(n.value))){if(o.value)for(const f of e.value)f&&T(f,n.value)&&e.value.delete(f);if(s.value)for(const f of e.value)f&&T(n.value,f)&&e.value.delete(f);e.value.add(n.value)}};return{handleUnselect:u,handleSelect:m,handleToggleSelect:()=>{n.value&&(e.value.has(n.value)?u():m())},isSelected:a,isParentOfSelected:o}};exports.DnDOperations=X;exports.default=le;exports.getBoundingBox=Z;exports.useDnDStore=z;exports.useDragContainer=ee;exports.useDraggable=fe;exports.useDroppable=me;exports.useSelection=he;
|
|
2
2
|
//# sourceMappingURL=vue-dnd-kit-core.cjs.js.map
|