@vue-dnd-kit/core 0.0.46-beta → 0.0.47-beta

package/dist/composables/useDnDStore.d.ts

@@ -238,7 +238,7 @@ export declare const useDnDStore: () => {
         ref: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     };
     elements: import('vue').Ref<{
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -486,7 +486,7 @@ export declare const useDnDStore: () => {
             onEnd?: ((store: import('../types').IDnDStore) => void) | undefined;
         };
     }[], IDragElement[] | {
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -747,7 +747,7 @@ export declare const useDnDStore: () => {
             readonly top: number;
             toJSON: () => any;
         } | undefined;
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -1007,7 +1007,7 @@ export declare const useDnDStore: () => {
             readonly top: number;
             toJSON: () => any;
         } | undefined;
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -1256,7 +1256,7 @@ export declare const useDnDStore: () => {
         };
     }[]>;
     selectedElements: import('vue').Ref<{
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -1504,7 +1504,7 @@ export declare const useDnDStore: () => {
             onEnd?: ((store: import('../types').IDnDStore) => void) | undefined;
         };
     }[], IDragElement[] | {
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -1753,7 +1753,7 @@ export declare const useDnDStore: () => {
         };
     }[]>;
     zones: import('vue').Ref<{
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         data: any;
         events: {
@@ -1762,7 +1762,7 @@ export declare const useDnDStore: () => {
             onDrop?: ((store: import('../types').IDnDStore) => void) | undefined;
         };
     }[], IDropZone[] | {
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         data: any;
         events: {
@@ -1774,7 +1774,7 @@ export declare const useDnDStore: () => {
     visibleElements: import('vue').ComputedRef<number[]>;
     hovered: {
         zone: import('vue').Ref<{
-            node: Element | HTMLElement | null;
+            node: HTMLElement | Element | null;
             groups: string[];
             data: any;
             events: {
@@ -1783,7 +1783,7 @@ export declare const useDnDStore: () => {
                 onDrop?: ((store: import('../types').IDnDStore) => void) | undefined;
             };
         } | null, IDropZone | {
-            node: Element | HTMLElement | null;
+            node: HTMLElement | Element | null;
             groups: string[];
             data: any;
             events: {
@@ -1793,7 +1793,7 @@ export declare const useDnDStore: () => {
             };
         } | null>;
         element: import('vue').Ref<{
-            node: Element | HTMLElement | null;
+            node: HTMLElement | Element | null;
             groups: string[];
             layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
                 new (...args: any[]): any;
@@ -2041,7 +2041,7 @@ export declare const useDnDStore: () => {
                 onEnd?: ((store: import('../types').IDnDStore) => void) | undefined;
             };
         } | null, IDragElement | {
-            node: Element | HTMLElement | null;
+            node: HTMLElement | Element | null;
             groups: string[];
             layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
                 new (...args: any[]): any;

package/dist/composables/useDragContainer.d.ts

@@ -80,7 +80,7 @@ export declare const useDragContainer: () => {
             readonly top: number;
             toJSON: () => any;
         } | undefined;
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
@@ -340,7 +340,7 @@ export declare const useDragContainer: () => {
             readonly top: number;
             toJSON: () => any;
         } | undefined;
-        node: Element | HTMLElement | null;
+        node: HTMLElement | Element | null;
         groups: string[];
         layer: import('vue').FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;

package/dist/plugin.d.ts

@@ -2,3 +2,11 @@ import { App } from 'vue';
 export declare const VueDndKitPlugin: {
     install(app: App): void;
 };
+declare module '@vue/runtime-core' {
+    interface App {
+        __VUE_DND_KIT_OVERLAY__?: {
+            container: HTMLElement;
+            vnode: any;
+        };
+    }
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue");function te(t){return n.getCurrentScope()?(n.onScopeDispose(t),!0):!1}function ne(t){let e=!1,r;const i=n.effectScope(!0);return(...c)=>(e||(r=i.run(()=>t(...c)),e=!0),r)}const re=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const oe=t=>t!=null,R=()=>{};function le(t,e){function r(...i){return new Promise((c,o)=>{Promise.resolve(t(()=>e.apply(this,i),{fn:e,thisArg:this,args:i})).then(c).catch(o)})}return r}function ie(...t){let e=0,r,i=!0,c=R,o,s,v,f,m;!n.isRef(t[0])&&typeof t[0]=="object"?{delay:s,trailing:v=!0,leading:f=!0,rejectOnCancel:m=!1}=t[0]:[s,v=!0,f=!0,m=!1]=t;const l=()=>{r&&(clearTimeout(r),r=void 0,c(),c=R)};return D=>{const p=n.toValue(s),E=Date.now()-e,a=()=>o=D();return l(),p<=0?(e=Date.now(),a()):(E>p&&(f||!i)?(e=Date.now(),a()):v&&(o=new Promise((h,y)=>{c=m?y:h,r=setTimeout(()=>{e=Date.now(),i=!0,h(a()),l()},Math.max(0,p-E))})),!f&&!r&&(r=setTimeout(()=>i=!0,p)),i=!1,o)}}function se(t){return Array.isArray(t)?t:[t]}function ae(t,e=200,r=!1,i=!0,c=!1){return le(ie(e,r,i,c),t)}function ue(t,e,r){const i=n.watch(t,(...c)=>(n.nextTick(()=>i()),e(...c)),r);return i}const Q=re?window:void 0;function H(t){var e;const r=n.toValue(t);return(e=r==null?void 0:r.$el)!=null?e:r}function ce(){const t=n.shallowRef(!1),e=n.getCurrentInstance();return e&&n.onMounted(()=>{t.value=!0},e),t}function de(t){const e=ce();return n.computed(()=>(e.value,!!t()))}function ve(t,e,r={}){const{root:i,rootMargin:c="0px",threshold:o=0,window:s=Q,immediate:v=!0}=r,f=de(()=>s&&"IntersectionObserver"in s),m=n.computed(()=>{const E=n.toValue(t);return se(E).map(H).filter(oe)});let l=R;const g=n.shallowRef(v),D=f.value?n.watch(()=>[m.value,H(i),g.value],([E,a])=>{if(l(),!g.value||!E.length)return;const h=new IntersectionObserver(e,{root:H(a),rootMargin:c,threshold:o});E.forEach(y=>y&&h.observe(y)),l=()=>{h.disconnect(),l=R}},{immediate:v,flush:"post"}):R,p=()=>{l(),D(),g.value=!1};return te(p),{isSupported:f,isActive:g,pause(){l(),g.value=!1},resume(){g.value=!0},stop:p}}function fe(t,e={}){const{window:r=Q,scrollTarget:i,threshold:c=0,rootMargin:o,once:s=!1}=e,v=n.shallowRef(!1),{stop:f}=ve(t,m=>{let l=v.value,g=0;for(const D of m)D.time>=g&&(g=D.time,l=D.isIntersecting);v.value=l,s&&ue(v,()=>{f()})},{root:i,window:r,threshold:c,rootMargin:n.toValue(o)});return v}const I=ne(()=>{const t=n.ref([]),e=n.computed(()=>t.value.length>0),r={component:n.ref(null),ref:n.ref(null)},i=n.ref([]),c=n.computed(()=>i.value.map((m,l)=>{var g;if((g=m.isVisible)!=null&&g.value||m.isVisible&&l)return l}).filter(m=>m!==void 0)),o=n.ref([]),s=n.ref([]),v={zone:n.ref(null),element:n.ref(null)},f={current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}};return{isDragging:e,activeContainer:r,elements:i,draggingElements:t,selectedElements:o,zones:s,visibleElements:c,hovered:v,pointerPosition:f}}),ge=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:r,isDragging:i,activeContainer:c}=I();return n.onMounted(()=>{c.ref=t}),n.onBeforeUnmount(()=>{c.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:r,isDragging:i}},me=["innerHTML"],he=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:r,isDragging:i,draggingElements:c}=ge(),o=n.computed(()=>{var s,v,f,m;return{transform:`translate3d(${(((s=r.current.value)==null?void 0:s.x)??0)-(((v=r.offset.pixel.value)==null?void 0:v.x)??0)}px, ${(((f=r.current.value)==null?void 0:f.y)??0)-(((m=r.offset.pixel.value)==null?void 0:m.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(s,v)=>n.unref(i)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(o.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(c),(f,m)=>{var l,g;return n.openBlock(),n.createElementBlock("div",{key:m,innerHTML:f.initialHTML,style:n.normalizeStyle({width:`${(l=f.initialRect)==null?void 0:l.width}px`,height:`${(g=f.initialRect)==null?void 0:g.height}px`})},null,12,me)}),128))],4)):n.createCommentVNode("",!0)}}),F=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=I(),r=n.computed(()=>e.component.value??he);return(i,c)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.value)))}}),pe={install(t){t.component("DragOverlay",F);const e=document.createElement("div");e.id="vue-dnd-kit-overlay-container",document.body.appendChild(e);const r=n.createVNode(F);n.render(r,e);const i=t.unmount;t.unmount=function(){return n.render(null,e),e.parentNode&&e.parentNode.removeChild(e),i.call(this)}}},ye="data-dnd-draggable",Ee=t=>{const{elements:e,draggingElements:r,hovered:i,selectedElements:c,isDragging:o}=I(),s=n.ref(null),v=n.computed(()=>{var p;return((p=i.element.value)==null?void 0:p.node)===s.value}),f=fe(s),m=n.computed(()=>r.value.some(p=>p.node===s.value)),l=n.computed(()=>{if(!s.value||!o.value)return!1;const p=e.value.find(E=>E.node===s.value);return p!=null&&p.groups.length?!r.value.some(E=>E.groups.length?!E.groups.some(a=>p.groups.includes(a)):!1):!0});return{elementRef:s,registerElement:()=>{if(!s.value)throw new Error("ElementRef is not set");e.value.push({node:s.value,groups:(t==null?void 0:t.groups)??[],layer:(t==null?void 0:t.layer)??null,defaultLayer:(t==null?void 0:t.layer)??null,events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0,isVisible:f}),s.value.setAttribute(ye,"true")},unregisterElement:()=>{const p=e.value.findIndex(a=>a.node===s.value);p!==-1&&e.value.splice(p,1);const E=c.value.findIndex(a=>a.node===s.value);E!==-1&&c.value.splice(E,1)},isDragging:m,isOvered:v,isAllowed:l,isVisible:f}},we=()=>{let t="",e="",r="";const i=()=>{const s=document.body;t=s.style.userSelect,e=s.style.touchAction,r=s.style.overscrollBehavior,s.style.userSelect="none",s.style.touchAction="none",s.style.overscrollBehavior="none",window.addEventListener("contextmenu",o),window.addEventListener("selectstart",o),window.addEventListener("touchstart",o),window.addEventListener("touchmove",o)},c=()=>{const s=document.body;s.style.userSelect=t,s.style.touchAction=e,s.style.overscrollBehavior=r,window.removeEventListener("contextmenu",o),window.removeEventListener("selectstart",o),window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",o)},o=s=>s.preventDefault();return{disableInteractions:i,enableInteractions:c}},K=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,O=t=>{if(!t)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=t.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}},A=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),Pe=(t,e)=>{const r=O(t);return{pixel:{x:e.x-r.x,y:e.y-r.y},percent:{x:(e.x-r.x)/r.width*100,y:(e.y-r.y)/r.height*100}}},J=(t,e)=>{const r=e.x-t.x,i=e.y-t.y;return Math.sqrt(r*r+i*i)},C=(t,e)=>t?e.contains(t):!1,De=t=>{const e=I();return{onPointerStart:o=>{e.pointerPosition.start.value={x:o.clientX,y:o.clientY},e.pointerPosition.current.value={x:o.clientX,y:o.clientY};const{pixel:s,percent:v}=Pe(t.value,{x:o.clientX,y:o.clientY});e.pointerPosition.offset.pixel.value=s,e.pointerPosition.offset.percent.value=v},onPointerMove:o=>{e.pointerPosition.current.value={x:o.clientX,y:o.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},xe=t=>{const e=I(),{onPointerStart:r,onPointerMove:i,onPointerEnd:c}=De(t);let o=null;const s=a=>{var w,P;const h=e.selectedElements.value.some(x=>x.node===a);if(e.selectedElements.value.length&&h)return e.selectedElements.value.map(x=>{var L,V;return{...x,initialHTML:((L=x.node)==null?void 0:L.outerHTML)??"",initialRect:(V=x.node)==null?void 0:V.getBoundingClientRect()}});e.selectedElements.value=[];const y=e.elements.value.find(x=>x.node===a);return y?[{...y,initialHTML:((w=y.node)==null?void 0:w.outerHTML)??"",initialRect:(P=y.node)==null?void 0:P.getBoundingClientRect()}]:[]},v=(a,h)=>{const y=Math.max(0,Math.min(a.x+a.width,h.x+h.width)-Math.max(a.x,h.x)),w=Math.max(0,Math.min(a.y+a.height,h.y+h.height)-Math.max(a.y,h.y)),P=y*w,x=a.width*a.height,L=h.width*h.height;return(P/x*100+P/L*100)/2},f=ae(()=>{var U,N,Z,$,W,X,Y,j,q,G;const a=O(e.activeContainer.ref.value),h=A(a),y=((U=e.pointerPosition.current.value)==null?void 0:U.x)??0,w=((N=e.pointerPosition.current.value)==null?void 0:N.y)??0,x=!(a&&y>=a.x&&y<=a.x+a.width&&w>=a.y&&w<=a.y+a.height),L=e.draggingElements.value.map(u=>u.node),V=e.visibleElements.value.map(u=>e.elements.value[u]).filter(u=>{if(!u.node||L.some(M=>M&&C(u.node,M))||u.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(_=>u.groups.includes(_)):!1))return!1;const d=O(u.node);return d&&a&&K(d,a)}).map(u=>{const d=O(u.node),M=A(d),S=y>=d.x&&y<=d.x+d.width&&w>=d.y&&w<=d.y+d.height,_=v(d,a),z=J(h,M),B=e.elements.value.filter(k=>k!==u&&k.node&&u.node&&C(u.node,k.node)).length;return{element:u,isPointerInElement:S,overlapPercent:_,depth:B,centerDistance:z}}).sort((u,d)=>{if(!x){if(u.isPointerInElement&&d.isPointerInElement)return d.depth-u.depth;if(u.isPointerInElement!==d.isPointerInElement)return u.isPointerInElement?-1:1}return Math.abs(u.overlapPercent-d.overlapPercent)<=1?u.centerDistance-d.centerDistance:d.overlapPercent-u.overlapPercent}),ee=e.zones.value.filter(u=>{if(!u.node||L.some(M=>M&&C(u.node,M))||u.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(_=>u.groups.includes(_)):!1))return!1;const d=O(u.node);return d&&a&&K(d,a)}).map(u=>{const d=O(u.node),M=A(d),S=y>=d.x&&y<=d.x+d.width&&w>=d.y&&w<=d.y+d.height,_=v(d,a),z=J(h,M),B=e.zones.value.filter(k=>k!==u&&k.node&&u.node&&C(u.node,k.node)).length;return{zone:u,isPointerInElement:S,overlapPercent:_,depth:B,centerDistance:z}}).sort((u,d)=>{if(!x){if(u.isPointerInElement&&d.isPointerInElement)return d.depth-u.depth;if(u.isPointerInElement!==d.isPointerInElement)return u.isPointerInElement?-1:1}return Math.abs(u.overlapPercent-d.overlapPercent)<=1?u.centerDistance-d.centerDistance:d.overlapPercent-u.overlapPercent}),T=e.hovered.element.value,b=e.hovered.zone.value;e.hovered.element.value=((Z=V[0])==null?void 0:Z.element)??null,e.hovered.zone.value=(($=ee[0])==null?void 0:$.zone)??null,e.hovered.element.value!==T&&((W=T==null?void 0:T.events)!=null&&W.onLeave&&T.events.onLeave(e),(Y=(X=e.hovered.element.value)==null?void 0:X.events)!=null&&Y.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==b&&((j=b==null?void 0:b.events)!=null&&j.onLeave&&b.events.onLeave(e),(G=(q=e.hovered.zone.value)==null?void 0:q.events)!=null&&G.onHover&&e.hovered.zone.value.events.onHover(e))},1e3),m=()=>{f(),o=requestAnimationFrame(m)},l=()=>{m()},g=()=>{o!==null&&(cancelAnimationFrame(o),o=null)};return{activate:a=>{e.draggingElements.value=s(t.value),r(a),l()},track:a=>{i(a)},deactivate:()=>{var a,h;c(),e.hovered.zone.value?(h=(a=e.hovered.zone.value.events).onDrop)==null||h.call(a,e):e.draggingElements.value.forEach(y=>{var w,P;return(P=(w=y.events).onEnd)==null?void 0:P.call(w,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,g()}}},Me=t=>{const{elementRef:e,registerElement:r,unregisterElement:i,isDragging:c,isOvered:o,isAllowed:s,isVisible:v}=Ee(t),{disableInteractions:f,enableInteractions:m}=we(),{activeContainer:l,pointerPosition:g}=I(),{activate:D,track:p,deactivate:E}=xe(e),a=P=>{t!=null&&t.container&&(l.component.value=n.markRaw(t.container)),f(),D(P),document.addEventListener("pointermove",h),document.addEventListener("pointerup",w),document.addEventListener("wheel",y)},h=P=>p(P),y=P=>p(P),w=()=>{l.component.value=null,m(),E(),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",w),document.removeEventListener("wheel",y)};return n.onMounted(r),n.onBeforeUnmount(i),{pointerPosition:g,elementRef:e,isDragging:c,isOvered:o,isAllowed:s,handleDragStart:a,isVisible:v}},Se=t=>{const{zones:e,hovered:r,draggingElements:i,isDragging:c}=I(),o=n.ref(null),s=n.computed(()=>{var l;return((l=r.zone.value)==null?void 0:l.node)===o.value}),v=n.computed(()=>{if(!o.value||!c.value)return!1;const l=e.value.find(g=>g.node===o.value);return l!=null&&l.groups.length?!i.value.some(g=>g.groups.length?!g.groups.some(D=>l.groups.includes(D)):!1):!0});return{elementRef:o,registerZone:()=>{if(!o.value)throw new Error("elementRef is not set");e.value.push({node:o.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),o.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!o.value)throw new Error("elementRef is not set");const l=e.value.findIndex(g=>g.node===o.value);l!==-1&&e.value.splice(l,1)},isOvered:s,isAllowed:v}},Ie=t=>{const{elementRef:e,registerZone:r,unregisterZone:i,isOvered:c,isAllowed:o}=Se(t);return n.onMounted(r),n.onBeforeUnmount(i),{elementRef:e,isOvered:c,isAllowed:o}},Ce=t=>{const{selectedElements:e,elements:r}=I(),i=n.computed(()=>r.value.find(l=>l.node===t.value)),c=n.computed(()=>e.value.some(l=>l.node===t.value)),o=n.computed(()=>t.value?e.value.some(l=>l.node&&C(l.node,t.value)):!1),s=n.computed(()=>t.value?e.value.some(l=>l.node&&C(t.value,l.node)):!1),v=()=>{i.value&&(e.value=e.value.filter(l=>l.node!==t.value))},f=()=>{i.value&&(o.value&&(e.value=e.value.filter(l=>l.node&&!C(l.node,t.value))),s.value&&(e.value=e.value.filter(l=>l.node&&!C(t.value,l.node))),e.value.push(i.value))};return{handleUnselect:v,handleSelect:f,handleToggleSelect:()=>{i.value&&(e.value.some(l=>l.node===t.value)?v():f())},isSelected:c,isParentOfSelected:o}};exports.DragOverlay=F;exports.default=pe;exports.getBoundingBox=O;exports.useDnDStore=I;exports.useDraggable=Me;exports.useDroppable=Ie;exports.useSelection=Ce;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue");function te(t){return n.getCurrentScope()?(n.onScopeDispose(t),!0):!1}function ne(t){let e=!1,r;const s=n.effectScope(!0);return(...c)=>(e||(r=s.run(()=>t(...c)),e=!0),r)}const re=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const oe=t=>t!=null,R=()=>{};function le(t,e){function r(...s){return new Promise((c,o)=>{Promise.resolve(t(()=>e.apply(this,s),{fn:e,thisArg:this,args:s})).then(c).catch(o)})}return r}function ie(...t){let e=0,r,s=!0,c=R,o,i,v,f,m;!n.isRef(t[0])&&typeof t[0]=="object"?{delay:i,trailing:v=!0,leading:f=!0,rejectOnCancel:m=!1}=t[0]:[i,v=!0,f=!0,m=!1]=t;const l=()=>{r&&(clearTimeout(r),r=void 0,c(),c=R)};return D=>{const p=n.toValue(i),E=Date.now()-e,u=()=>o=D();return l(),p<=0?(e=Date.now(),u()):(E>p&&(f||!s)?(e=Date.now(),u()):v&&(o=new Promise((h,y)=>{c=m?y:h,r=setTimeout(()=>{e=Date.now(),s=!0,h(u()),l()},Math.max(0,p-E))})),!f&&!r&&(r=setTimeout(()=>s=!0,p)),s=!1,o)}}function se(t){return Array.isArray(t)?t:[t]}function ue(t,e=200,r=!1,s=!0,c=!1){return le(ie(e,r,s,c),t)}function ae(t,e,r){const s=n.watch(t,(...c)=>(n.nextTick(()=>s()),e(...c)),r);return s}const Q=re?window:void 0;function B(t){var e;const r=n.toValue(t);return(e=r==null?void 0:r.$el)!=null?e:r}function ce(){const t=n.shallowRef(!1),e=n.getCurrentInstance();return e&&n.onMounted(()=>{t.value=!0},e),t}function de(t){const e=ce();return n.computed(()=>(e.value,!!t()))}function ve(t,e,r={}){const{root:s,rootMargin:c="0px",threshold:o=0,window:i=Q,immediate:v=!0}=r,f=de(()=>i&&"IntersectionObserver"in i),m=n.computed(()=>{const E=n.toValue(t);return se(E).map(B).filter(oe)});let l=R;const g=n.shallowRef(v),D=f.value?n.watch(()=>[m.value,B(s),g.value],([E,u])=>{if(l(),!g.value||!E.length)return;const h=new IntersectionObserver(e,{root:B(u),rootMargin:c,threshold:o});E.forEach(y=>y&&h.observe(y)),l=()=>{h.disconnect(),l=R}},{immediate:v,flush:"post"}):R,p=()=>{l(),D(),g.value=!1};return te(p),{isSupported:f,isActive:g,pause(){l(),g.value=!1},resume(){g.value=!0},stop:p}}function fe(t,e={}){const{window:r=Q,scrollTarget:s,threshold:c=0,rootMargin:o,once:i=!1}=e,v=n.shallowRef(!1),{stop:f}=ve(t,m=>{let l=v.value,g=0;for(const D of m)D.time>=g&&(g=D.time,l=D.isIntersecting);v.value=l,i&&ae(v,()=>{f()})},{root:s,window:r,threshold:c,rootMargin:n.toValue(o)});return v}const I=ne(()=>{const t=n.ref([]),e=n.computed(()=>t.value.length>0),r={component:n.ref(null),ref:n.ref(null)},s=n.ref([]),c=n.computed(()=>s.value.map((m,l)=>{var g;if((g=m.isVisible)!=null&&g.value||m.isVisible&&l)return l}).filter(m=>m!==void 0)),o=n.ref([]),i=n.ref([]),v={zone:n.ref(null),element:n.ref(null)},f={current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}};return{isDragging:e,activeContainer:r,elements:s,draggingElements:t,selectedElements:o,zones:i,visibleElements:c,hovered:v,pointerPosition:f}}),ge=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:r,isDragging:s,activeContainer:c}=I();return n.onMounted(()=>{c.ref=t}),n.onBeforeUnmount(()=>{c.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:r,isDragging:s}},me=["innerHTML"],he=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:r,isDragging:s,draggingElements:c}=ge(),o=n.computed(()=>{var i,v,f,m;return{transform:`translate3d(${(((i=r.current.value)==null?void 0:i.x)??0)-(((v=r.offset.pixel.value)==null?void 0:v.x)??0)}px, ${(((f=r.current.value)==null?void 0:f.y)??0)-(((m=r.offset.pixel.value)==null?void 0:m.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(i,v)=>n.unref(s)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(o.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(c),(f,m)=>{var l,g;return n.openBlock(),n.createElementBlock("div",{key:m,innerHTML:f.initialHTML,style:n.normalizeStyle({width:`${(l=f.initialRect)==null?void 0:l.width}px`,height:`${(g=f.initialRect)==null?void 0:g.height}px`})},null,12,me)}),128))],4)):n.createCommentVNode("",!0)}}),U=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=I(),r=n.computed(()=>e.component.value??he);return(s,c)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.value)))}}),pe={install(t){t.component("DragOverlay",U);const e=t.mount;t.mount=function(s){const c=e.call(this,s),o=typeof s=="string"?document.querySelector(s):s;if(o&&o instanceof Element&&!o.querySelector("#vue-dnd-kit-overlay")){const i=document.createElement("div");i.id="vue-dnd-kit-overlay",o.appendChild(i);const v=n.createVNode(U);n.render(v,i),t.__VUE_DND_KIT_OVERLAY__={container:i,vnode:v}}return c};const r=t.unmount;t.unmount=function(){return t.__VUE_DND_KIT_OVERLAY__&&(n.render(null,t.__VUE_DND_KIT_OVERLAY__.container),delete t.__VUE_DND_KIT_OVERLAY__),r.call(this)}}},ye="data-dnd-draggable",Ee=t=>{const{elements:e,draggingElements:r,hovered:s,selectedElements:c,isDragging:o}=I(),i=n.ref(null),v=n.computed(()=>{var p;return((p=s.element.value)==null?void 0:p.node)===i.value}),f=fe(i),m=n.computed(()=>r.value.some(p=>p.node===i.value)),l=n.computed(()=>{if(!i.value||!o.value)return!1;const p=e.value.find(E=>E.node===i.value);return p!=null&&p.groups.length?!r.value.some(E=>E.groups.length?!E.groups.some(u=>p.groups.includes(u)):!1):!0});return{elementRef:i,registerElement:()=>{if(!i.value)throw new Error("ElementRef is not set");e.value.push({node:i.value,groups:(t==null?void 0:t.groups)??[],layer:(t==null?void 0:t.layer)??null,defaultLayer:(t==null?void 0:t.layer)??null,events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0,isVisible:f}),i.value.setAttribute(ye,"true")},unregisterElement:()=>{const p=e.value.findIndex(u=>u.node===i.value);p!==-1&&e.value.splice(p,1);const E=c.value.findIndex(u=>u.node===i.value);E!==-1&&c.value.splice(E,1)},isDragging:m,isOvered:v,isAllowed:l,isVisible:f}},we=()=>{let t="",e="",r="";const s=()=>{const i=document.body;t=i.style.userSelect,e=i.style.touchAction,r=i.style.overscrollBehavior,i.style.userSelect="none",i.style.touchAction="none",i.style.overscrollBehavior="none",window.addEventListener("contextmenu",o),window.addEventListener("selectstart",o),window.addEventListener("touchstart",o),window.addEventListener("touchmove",o)},c=()=>{const i=document.body;i.style.userSelect=t,i.style.touchAction=e,i.style.overscrollBehavior=r,window.removeEventListener("contextmenu",o),window.removeEventListener("selectstart",o),window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",o)},o=i=>i.preventDefault();return{disableInteractions:s,enableInteractions:c}},G=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,T=t=>{if(!t)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=t.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=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),Pe=(t,e)=>{const r=T(t);return{pixel:{x:e.x-r.x,y:e.y-r.y},percent:{x:(e.x-r.x)/r.width*100,y:(e.y-r.y)/r.height*100}}},J=(t,e)=>{const r=e.x-t.x,s=e.y-t.y;return Math.sqrt(r*r+s*s)},M=(t,e)=>t?e.contains(t):!1,De=t=>{const e=I();return{onPointerStart:o=>{e.pointerPosition.start.value={x:o.clientX,y:o.clientY},e.pointerPosition.current.value={x:o.clientX,y:o.clientY};const{pixel:i,percent:v}=Pe(t.value,{x:o.clientX,y:o.clientY});e.pointerPosition.offset.pixel.value=i,e.pointerPosition.offset.percent.value=v},onPointerMove:o=>{e.pointerPosition.current.value={x:o.clientX,y:o.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},_e=t=>{const e=I(),{onPointerStart:r,onPointerMove:s,onPointerEnd:c}=De(t);let o=null;const i=u=>{var w,P;const h=e.selectedElements.value.some(_=>_.node===u);if(e.selectedElements.value.length&&h)return e.selectedElements.value.map(_=>{var L,A;return{..._,initialHTML:((L=_.node)==null?void 0:L.outerHTML)??"",initialRect:(A=_.node)==null?void 0:A.getBoundingClientRect()}});e.selectedElements.value=[];const y=e.elements.value.find(_=>_.node===u);return y?[{...y,initialHTML:((w=y.node)==null?void 0:w.outerHTML)??"",initialRect:(P=y.node)==null?void 0:P.getBoundingClientRect()}]:[]},v=(u,h)=>{const y=Math.max(0,Math.min(u.x+u.width,h.x+h.width)-Math.max(u.x,h.x)),w=Math.max(0,Math.min(u.y+u.height,h.y+h.height)-Math.max(u.y,h.y)),P=y*w,_=u.width*u.height,L=h.width*h.height;return(P/_*100+P/L*100)/2},f=ue(()=>{var Y,N,F,Z,$,q,K,W,X,j;const u=T(e.activeContainer.ref.value),h=H(u),y=((Y=e.pointerPosition.current.value)==null?void 0:Y.x)??0,w=((N=e.pointerPosition.current.value)==null?void 0:N.y)??0,_=!(u&&y>=u.x&&y<=u.x+u.width&&w>=u.y&&w<=u.y+u.height),L=e.draggingElements.value.map(a=>a.node),A=e.visibleElements.value.map(a=>e.elements.value[a]).filter(a=>{if(!a.node||L.some(x=>x&&M(a.node,x))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(C=>a.groups.includes(C)):!1))return!1;const d=T(a.node);return d&&u&&G(d,u)}).map(a=>{const d=T(a.node),x=H(d),S=y>=d.x&&y<=d.x+d.width&&w>=d.y&&w<=d.y+d.height,C=v(d,u),b=J(h,x),z=e.elements.value.filter(O=>O!==a&&O.node&&a.node&&M(a.node,O.node)).length;return{element:a,isPointerInElement:S,overlapPercent:C,depth:z,centerDistance:b}}).sort((a,d)=>{if(!_){if(a.isPointerInElement&&d.isPointerInElement)return d.depth-a.depth;if(a.isPointerInElement!==d.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-d.overlapPercent)<=1?a.centerDistance-d.centerDistance:d.overlapPercent-a.overlapPercent}),ee=e.zones.value.filter(a=>{if(!a.node||L.some(x=>x&&M(a.node,x))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(C=>a.groups.includes(C)):!1))return!1;const d=T(a.node);return d&&u&&G(d,u)}).map(a=>{const d=T(a.node),x=H(d),S=y>=d.x&&y<=d.x+d.width&&w>=d.y&&w<=d.y+d.height,C=v(d,u),b=J(h,x),z=e.zones.value.filter(O=>O!==a&&O.node&&a.node&&M(a.node,O.node)).length;return{zone:a,isPointerInElement:S,overlapPercent:C,depth:z,centerDistance:b}}).sort((a,d)=>{if(!_){if(a.isPointerInElement&&d.isPointerInElement)return d.depth-a.depth;if(a.isPointerInElement!==d.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-d.overlapPercent)<=1?a.centerDistance-d.centerDistance:d.overlapPercent-a.overlapPercent}),k=e.hovered.element.value,V=e.hovered.zone.value;e.hovered.element.value=((F=A[0])==null?void 0:F.element)??null,e.hovered.zone.value=((Z=ee[0])==null?void 0:Z.zone)??null,e.hovered.element.value!==k&&(($=k==null?void 0:k.events)!=null&&$.onLeave&&k.events.onLeave(e),(K=(q=e.hovered.element.value)==null?void 0:q.events)!=null&&K.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==V&&((W=V==null?void 0:V.events)!=null&&W.onLeave&&V.events.onLeave(e),(j=(X=e.hovered.zone.value)==null?void 0:X.events)!=null&&j.onHover&&e.hovered.zone.value.events.onHover(e))},1e3),m=()=>{f(),o=requestAnimationFrame(m)},l=()=>{m()},g=()=>{o!==null&&(cancelAnimationFrame(o),o=null)};return{activate:u=>{e.draggingElements.value=i(t.value),r(u),l()},track:u=>{s(u)},deactivate:()=>{var u,h;c(),e.hovered.zone.value?(h=(u=e.hovered.zone.value.events).onDrop)==null||h.call(u,e):e.draggingElements.value.forEach(y=>{var w,P;return(P=(w=y.events).onEnd)==null?void 0:P.call(w,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,g()}}},xe=t=>{const{elementRef:e,registerElement:r,unregisterElement:s,isDragging:c,isOvered:o,isAllowed:i,isVisible:v}=Ee(t),{disableInteractions:f,enableInteractions:m}=we(),{activeContainer:l,pointerPosition:g}=I(),{activate:D,track:p,deactivate:E}=_e(e),u=P=>{t!=null&&t.container&&(l.component.value=n.markRaw(t.container)),f(),D(P),document.addEventListener("pointermove",h),document.addEventListener("pointerup",w),document.addEventListener("wheel",y)},h=P=>p(P),y=P=>p(P),w=()=>{l.component.value=null,m(),E(),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",w),document.removeEventListener("wheel",y)};return n.onMounted(r),n.onBeforeUnmount(s),{pointerPosition:g,elementRef:e,isDragging:c,isOvered:o,isAllowed:i,handleDragStart:u,isVisible:v}},Se=t=>{const{zones:e,hovered:r,draggingElements:s,isDragging:c}=I(),o=n.ref(null),i=n.computed(()=>{var l;return((l=r.zone.value)==null?void 0:l.node)===o.value}),v=n.computed(()=>{if(!o.value||!c.value)return!1;const l=e.value.find(g=>g.node===o.value);return l!=null&&l.groups.length?!s.value.some(g=>g.groups.length?!g.groups.some(D=>l.groups.includes(D)):!1):!0});return{elementRef:o,registerZone:()=>{if(!o.value)throw new Error("elementRef is not set");e.value.push({node:o.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),o.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!o.value)throw new Error("elementRef is not set");const l=e.value.findIndex(g=>g.node===o.value);l!==-1&&e.value.splice(l,1)},isOvered:i,isAllowed:v}},Ie=t=>{const{elementRef:e,registerZone:r,unregisterZone:s,isOvered:c,isAllowed:o}=Se(t);return n.onMounted(r),n.onBeforeUnmount(s),{elementRef:e,isOvered:c,isAllowed:o}},Me=t=>{const{selectedElements:e,elements:r}=I(),s=n.computed(()=>r.value.find(l=>l.node===t.value)),c=n.computed(()=>e.value.some(l=>l.node===t.value)),o=n.computed(()=>t.value?e.value.some(l=>l.node&&M(l.node,t.value)):!1),i=n.computed(()=>t.value?e.value.some(l=>l.node&&M(t.value,l.node)):!1),v=()=>{s.value&&(e.value=e.value.filter(l=>l.node!==t.value))},f=()=>{s.value&&(o.value&&(e.value=e.value.filter(l=>l.node&&!M(l.node,t.value))),i.value&&(e.value=e.value.filter(l=>l.node&&!M(t.value,l.node))),e.value.push(s.value))};return{handleUnselect:v,handleSelect:f,handleToggleSelect:()=>{s.value&&(e.value.some(l=>l.node===t.value)?v():f())},isSelected:c,isParentOfSelected:o}};exports.DragOverlay=U;exports.default=pe;exports.getBoundingBox=T;exports.useDnDStore=I;exports.useDraggable=xe;exports.useDroppable=Ie;exports.useSelection=Me;

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

@@ -1,102 +1,102 @@
-import { effectScope as fe, watch as ue, nextTick as ge, isRef as he, getCurrentScope as me, onScopeDispose as pe, toValue as A, shallowRef as X, computed as D, getCurrentInstance as ye, onMounted as F, ref as P, onBeforeUnmount as Y, defineComponent as ce, createElementBlock as $, createCommentVNode as Ee, unref as re, openBlock as b, normalizeStyle as oe, Fragment as we, renderList as Pe, createBlock as De, resolveDynamicComponent as xe, createVNode as Ie, render as le, markRaw as Ce } from "vue";
-function Me(t) {
-  return me() ? (pe(t), !0) : !1;
+import { effectScope as fe, watch as ue, nextTick as ge, isRef as me, getCurrentScope as he, onScopeDispose as pe, toValue as b, shallowRef as K, computed as D, getCurrentInstance as ye, onMounted as U, ref as P, onBeforeUnmount as W, defineComponent as ce, createElementBlock as F, createCommentVNode as Ee, unref as re, openBlock as H, normalizeStyle as oe, Fragment as we, renderList as Pe, createBlock as De, resolveDynamicComponent as _e, createVNode as xe, render as le, markRaw as Ie } from "vue";
+function Le(t) {
+  return he() ? (pe(t), !0) : !1;
 }
 function Se(t) {
   let e = !1, n;
-  const l = fe(!0);
-  return (...u) => (e || (n = l.run(() => t(...u)), e = !0), n);
+  const i = fe(!0);
+  return (...u) => (e || (n = i.run(() => t(...u)), e = !0), n);
 }
-const Le = typeof window < "u" && typeof document < "u";
+const Me = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const _e = (t) => t != null, H = () => {
+const Ce = (t) => t != null, A = () => {
 };
 function Oe(t, e) {
-  function n(...l) {
+  function n(...i) {
     return new Promise((u, r) => {
-      Promise.resolve(t(() => e.apply(this, l), { fn: e, thisArg: this, args: l })).then(u).catch(r);
+      Promise.resolve(t(() => e.apply(this, i), { fn: e, thisArg: this, args: i })).then(u).catch(r);
     });
   }
   return n;
 }
 function Te(...t) {
-  let e = 0, n, l = !0, u = H, r, i, d, v, g;
-  !he(t[0]) && typeof t[0] == "object" ? { delay: i, trailing: d = !0, leading: v = !0, rejectOnCancel: g = !1 } = t[0] : [i, d = !0, v = !0, g = !1] = t;
+  let e = 0, n, i = !0, u = A, r, l, d, v, g;
+  !me(t[0]) && typeof t[0] == "object" ? { delay: l, trailing: d = !0, leading: v = !0, rejectOnCancel: g = !1 } = t[0] : [l, d = !0, v = !0, g = !1] = t;
   const o = () => {
-    n && (clearTimeout(n), n = void 0, u(), u = H);
+    n && (clearTimeout(n), n = void 0, u(), u = A);
   };
-  return (x) => {
-    const m = A(i), y = Date.now() - e, s = () => r = x();
-    return o(), m <= 0 ? (e = Date.now(), s()) : (y > m && (v || !l) ? (e = Date.now(), s()) : d && (r = new Promise((h, p) => {
-      u = g ? p : h, n = setTimeout(() => {
-        e = Date.now(), l = !0, h(s()), o();
-      }, Math.max(0, m - y));
-    })), !v && !n && (n = setTimeout(() => l = !0, m)), l = !1, r);
+  return (_) => {
+    const h = b(l), y = Date.now() - e, s = () => r = _();
+    return o(), h <= 0 ? (e = Date.now(), s()) : (y > h && (v || !i) ? (e = Date.now(), s()) : d && (r = new Promise((m, p) => {
+      u = g ? p : m, n = setTimeout(() => {
+        e = Date.now(), i = !0, m(s()), o();
+      }, Math.max(0, h - y));
+    })), !v && !n && (n = setTimeout(() => i = !0, h)), i = !1, r);
   };
 }
-function ke(t) {
+function Ve(t) {
   return Array.isArray(t) ? t : [t];
 }
-function ze(t, e = 200, n = !1, l = !0, u = !1) {
+function ke(t, e = 200, n = !1, i = !0, u = !1) {
   return Oe(
-    Te(e, n, l, u),
+    Te(e, n, i, u),
     t
   );
 }
 function Re(t, e, n) {
-  const l = ue(t, (...u) => (ge(() => l()), e(...u)), n);
-  return l;
+  const i = ue(t, (...u) => (ge(() => i()), e(...u)), n);
+  return i;
 }
-const de = Le ? window : void 0;
-function U(t) {
+const de = Me ? window : void 0;
+function Z(t) {
   var e;
-  const n = A(t);
+  const n = b(t);
   return (e = n == null ? void 0 : n.$el) != null ? e : n;
 }
-function He() {
-  const t = X(!1), e = ye();
-  return e && F(() => {
+function Ae() {
+  const t = K(!1), e = ye();
+  return e && U(() => {
     t.value = !0;
   }, e), t;
 }
-function Ve(t) {
-  const e = He();
+function ze(t) {
+  const e = Ae();
   return D(() => (e.value, !!t()));
 }
-function be(t, e, n = {}) {
+function He(t, e, n = {}) {
   const {
-    root: l,
+    root: i,
     rootMargin: u = "0px",
     threshold: r = 0,
-    window: i = de,
+    window: l = de,
     immediate: d = !0
-  } = n, v = Ve(() => i && "IntersectionObserver" in i), g = D(() => {
-    const y = A(t);
-    return ke(y).map(U).filter(_e);
+  } = n, v = ze(() => l && "IntersectionObserver" in l), g = D(() => {
+    const y = b(t);
+    return Ve(y).map(Z).filter(Ce);
   });
-  let o = H;
-  const f = X(d), x = v.value ? ue(
-    () => [g.value, U(l), f.value],
+  let o = A;
+  const f = K(d), _ = v.value ? ue(
+    () => [g.value, Z(i), f.value],
     ([y, s]) => {
       if (o(), !f.value || !y.length)
         return;
-      const h = new IntersectionObserver(
+      const m = new IntersectionObserver(
         e,
         {
-          root: U(s),
+          root: Z(s),
           rootMargin: u,
           threshold: r
         }
       );
-      y.forEach((p) => p && h.observe(p)), o = () => {
-        h.disconnect(), o = H;
+      y.forEach((p) => p && m.observe(p)), o = () => {
+        m.disconnect(), o = A;
       };
     },
     { immediate: d, flush: "post" }
-  ) : H, m = () => {
-    o(), x(), f.value = !1;
+  ) : A, h = () => {
+    o(), _(), f.value = !1;
   };
-  return Me(m), {
+  return Le(h), {
     isSupported: v,
     isActive: f,
     pause() {
@@ -105,46 +105,46 @@ function be(t, e, n = {}) {
     resume() {
       f.value = !0;
     },
-    stop: m
+    stop: h
   };
 }
-function Ae(t, e = {}) {
+function be(t, e = {}) {
   const {
     window: n = de,
-    scrollTarget: l,
+    scrollTarget: i,
     threshold: u = 0,
     rootMargin: r,
-    once: i = !1
-  } = e, d = X(!1), { stop: v } = be(
+    once: l = !1
+  } = e, d = K(!1), { stop: v } = He(
     t,
     (g) => {
       let o = d.value, f = 0;
-      for (const x of g)
-        x.time >= f && (f = x.time, o = x.isIntersecting);
-      d.value = o, i && Re(d, () => {
+      for (const _ of g)
+        _.time >= f && (f = _.time, o = _.isIntersecting);
+      d.value = o, l && Re(d, () => {
         v();
       });
     },
     {
-      root: l,
+      root: i,
       window: n,
       threshold: u,
-      rootMargin: A(r)
+      rootMargin: b(r)
     }
   );
   return d;
 }
-const L = Se(() => {
+const M = Se(() => {
   const t = P([]), e = D(() => t.value.length > 0), n = {
     component: P(null),
     ref: P(null)
-  }, l = P([]), u = D(
-    () => l.value.map((g, o) => {
+  }, i = P([]), u = D(
+    () => i.value.map((g, o) => {
       var f;
       if ((f = g.isVisible) != null && f.value || g.isVisible && o)
         return o;
     }).filter((g) => g !== void 0)
-  ), r = P([]), i = P([]), d = {
+  ), r = P([]), l = P([]), d = {
     zone: P(null),
     element: P(null)
   }, v = {
@@ -158,33 +158,33 @@ const L = Se(() => {
   return {
     isDragging: e,
     activeContainer: n,
-    elements: l,
+    elements: i,
     draggingElements: t,
     selectedElements: r,
-    zones: i,
+    zones: l,
     visibleElements: u,
     hovered: d,
     pointerPosition: v
   };
-}), Fe = () => {
-  const t = P(null), { draggingElements: e, pointerPosition: n, isDragging: l, activeContainer: u } = L();
-  return F(() => {
+}), Ue = () => {
+  const t = P(null), { draggingElements: e, pointerPosition: n, isDragging: i, activeContainer: u } = M();
+  return U(() => {
     u.ref = t;
-  }), Y(() => {
+  }), W(() => {
     u.ref.value = null;
   }), {
     elementRef: t,
     draggingElements: e,
     pointerPosition: n,
-    isDragging: l
+    isDragging: i
   };
-}, Ne = ["innerHTML"], Ze = /* @__PURE__ */ ce({
+}, Ye = ["innerHTML"], Ne = /* @__PURE__ */ ce({
   __name: "DefaultOverlay",
   setup(t) {
-    const { elementRef: e, pointerPosition: n, isDragging: l, draggingElements: u } = Fe(), r = D(() => {
-      var i, d, v, g;
+    const { elementRef: e, pointerPosition: n, isDragging: i, draggingElements: u } = Ue(), r = D(() => {
+      var l, d, v, g;
       return {
-        transform: `translate3d(${(((i = n.current.value) == null ? void 0 : i.x) ?? 0) - (((d = n.offset.pixel.value) == null ? void 0 : d.x) ?? 0)}px, ${(((v = n.current.value) == null ? void 0 : v.y) ?? 0) - (((g = n.offset.pixel.value) == null ? void 0 : g.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((l = n.current.value) == null ? void 0 : l.x) ?? 0) - (((d = n.offset.pixel.value) == null ? void 0 : d.x) ?? 0)}px, ${(((v = n.current.value) == null ? void 0 : v.y) ?? 0) - (((g = n.offset.pixel.value) == null ? void 0 : g.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -192,89 +192,99 @@ const L = Se(() => {
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (i, d) => re(l) ? (b(), $("div", {
+    return (l, d) => re(i) ? (H(), F("div", {
       key: 0,
       ref_key: "elementRef",
       ref: e,
       style: oe(r.value)
     }, [
-      (b(!0), $(we, null, Pe(re(u), (v, g) => {
+      (H(!0), F(we, null, Pe(re(u), (v, g) => {
         var o, f;
-        return b(), $("div", {
+        return H(), F("div", {
           key: g,
           innerHTML: v.initialHTML,
           style: oe({
             width: `${(o = v.initialRect) == null ? void 0 : o.width}px`,
             height: `${(f = v.initialRect) == null ? void 0 : f.height}px`
           })
-        }, null, 12, Ne);
+        }, null, 12, Ye);
       }), 128))
     ], 4)) : Ee("", !0);
   }
 }), ie = /* @__PURE__ */ ce({
   __name: "DragOverlay",
   setup(t) {
-    const { activeContainer: e } = L(), n = D(
-      () => e.component.value ?? Ze
+    const { activeContainer: e } = M(), n = D(
+      () => e.component.value ?? Ne
     );
-    return (l, u) => (b(), De(xe(n.value)));
+    return (i, u) => (H(), De(_e(n.value)));
   }
-}), Be = {
+}), Ge = {
   install(t) {
     t.component("DragOverlay", ie);
-    const e = document.createElement("div");
-    e.id = "vue-dnd-kit-overlay-container", document.body.appendChild(e);
-    const n = Ie(ie);
-    le(n, e);
-    const l = t.unmount;
+    const e = t.mount;
+    t.mount = function(i) {
+      const u = e.call(this, i), r = typeof i == "string" ? document.querySelector(i) : i;
+      if (r && r instanceof Element && !r.querySelector("#vue-dnd-kit-overlay")) {
+        const l = document.createElement("div");
+        l.id = "vue-dnd-kit-overlay", r.appendChild(l);
+        const d = xe(ie);
+        le(d, l), t.__VUE_DND_KIT_OVERLAY__ = {
+          container: l,
+          vnode: d
+        };
+      }
+      return u;
+    };
+    const n = t.unmount;
     t.unmount = function() {
-      return le(null, e), e.parentNode && e.parentNode.removeChild(e), l.call(this);
+      return t.__VUE_DND_KIT_OVERLAY__ && (le(null, t.__VUE_DND_KIT_OVERLAY__.container), delete t.__VUE_DND_KIT_OVERLAY__), n.call(this);
     };
   }
-}, $e = "data-dnd-draggable", Ue = (t) => {
+}, Fe = "data-dnd-draggable", Ze = (t) => {
   const {
     elements: e,
     draggingElements: n,
-    hovered: l,
+    hovered: i,
     selectedElements: u,
     isDragging: r
-  } = L(), i = P(null), d = D(
+  } = M(), l = P(null), d = D(
     () => {
-      var m;
-      return ((m = l.element.value) == null ? void 0 : m.node) === i.value;
+      var h;
+      return ((h = i.element.value) == null ? void 0 : h.node) === l.value;
     }
-  ), v = Ae(i), g = D(
-    () => n.value.some((m) => m.node === i.value)
+  ), v = be(l), g = D(
+    () => n.value.some((h) => h.node === l.value)
   ), o = D(() => {
-    if (!i.value || !r.value) return !1;
-    const m = e.value.find(
-      (y) => y.node === i.value
+    if (!l.value || !r.value) return !1;
+    const h = e.value.find(
+      (y) => y.node === l.value
     );
-    return m != null && m.groups.length ? !n.value.some((y) => y.groups.length ? !y.groups.some(
-      (s) => m.groups.includes(s)
+    return h != null && h.groups.length ? !n.value.some((y) => y.groups.length ? !y.groups.some(
+      (s) => h.groups.includes(s)
     ) : !1) : !0;
   });
   return {
-    elementRef: i,
+    elementRef: l,
     registerElement: () => {
-      if (!i.value) throw new Error("ElementRef is not set");
+      if (!l.value) throw new Error("ElementRef is not set");
       e.value.push({
-        node: i.value,
+        node: l.value,
         groups: (t == null ? void 0 : t.groups) ?? [],
         layer: (t == null ? void 0 : t.layer) ?? null,
         defaultLayer: (t == null ? void 0 : t.layer) ?? null,
         events: (t == null ? void 0 : t.events) ?? {},
         data: (t == null ? void 0 : t.data) ?? void 0,
         isVisible: v
-      }), i.value.setAttribute($e, "true");
+      }), l.value.setAttribute(Fe, "true");
     },
     unregisterElement: () => {
-      const m = e.value.findIndex(
-        (s) => s.node === i.value
+      const h = e.value.findIndex(
+        (s) => s.node === l.value
       );
-      m !== -1 && e.value.splice(m, 1);
+      h !== -1 && e.value.splice(h, 1);
       const y = u.value.findIndex(
-        (s) => s.node === i.value
+        (s) => s.node === l.value
       );
       y !== -1 && u.value.splice(y, 1);
     },
@@ -283,20 +293,20 @@ const L = Se(() => {
     isAllowed: o,
     isVisible: v
   };
-}, We = () => {
+}, $e = () => {
   let t = "", e = "", n = "";
-  const l = () => {
-    const i = document.body;
-    t = i.style.userSelect, e = i.style.touchAction, n = i.style.overscrollBehavior, i.style.userSelect = "none", i.style.touchAction = "none", i.style.overscrollBehavior = "none", window.addEventListener("contextmenu", r), window.addEventListener("selectstart", r), window.addEventListener("touchstart", r), window.addEventListener("touchmove", r);
+  const i = () => {
+    const l = document.body;
+    t = l.style.userSelect, e = l.style.touchAction, n = l.style.overscrollBehavior, l.style.userSelect = "none", l.style.touchAction = "none", l.style.overscrollBehavior = "none", window.addEventListener("contextmenu", r), window.addEventListener("selectstart", r), window.addEventListener("touchstart", r), window.addEventListener("touchmove", r);
   }, u = () => {
-    const i = document.body;
-    i.style.userSelect = t, i.style.touchAction = e, i.style.overscrollBehavior = n, window.removeEventListener("contextmenu", r), window.removeEventListener("selectstart", r), window.removeEventListener("touchstart", r), window.removeEventListener("touchmove", r);
-  }, r = (i) => i.preventDefault();
+    const l = document.body;
+    l.style.userSelect = t, l.style.touchAction = e, l.style.overscrollBehavior = n, window.removeEventListener("contextmenu", r), window.removeEventListener("selectstart", r), window.removeEventListener("touchstart", r), window.removeEventListener("touchmove", r);
+  }, r = (l) => l.preventDefault();
   return {
-    disableInteractions: l,
+    disableInteractions: i,
     enableInteractions: u
   };
-}, se = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, k = (t) => {
+}, se = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, V = (t) => {
   if (!t)
     return {
       x: 0,
@@ -319,11 +329,11 @@ const L = Se(() => {
     width: e.width,
     height: e.height
   };
-}, W = (t) => ({
+}, $ = (t) => ({
   x: t.x + t.width / 2,
   y: t.y + t.height / 2
-}), Xe = (t, e) => {
-  const n = k(t);
+}), Ke = (t, e) => {
+  const n = V(t);
   return {
     pixel: {
       x: e.x - n.x,
@@ -335,21 +345,21 @@ const L = Se(() => {
     }
   };
 }, ae = (t, e) => {
-  const n = e.x - t.x, l = e.y - t.y;
-  return Math.sqrt(n * n + l * l);
-}, S = (t, e) => t ? e.contains(t) : !1, Ye = (t) => {
-  const e = L();
+  const n = e.x - t.x, i = e.y - t.y;
+  return Math.sqrt(n * n + i * i);
+}, S = (t, e) => t ? e.contains(t) : !1, We = (t) => {
+  const e = M();
   return {
     onPointerStart: (r) => {
       e.pointerPosition.start.value = { x: r.clientX, y: r.clientY }, e.pointerPosition.current.value = {
         x: r.clientX,
         y: r.clientY
       };
-      const { pixel: i, percent: d } = Xe(t.value, {
+      const { pixel: l, percent: d } = Ke(t.value, {
         x: r.clientX,
         y: r.clientY
       });
-      e.pointerPosition.offset.pixel.value = i, e.pointerPosition.offset.percent.value = d;
+      e.pointerPosition.offset.pixel.value = l, e.pointerPosition.offset.percent.value = d;
     },
     onPointerMove: (r) => {
       e.pointerPosition.current.value = {
@@ -361,26 +371,26 @@ const L = Se(() => {
       e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
     }
   };
-}, je = (t) => {
-  const e = L(), { onPointerStart: n, onPointerMove: l, onPointerEnd: u } = Ye(t);
+}, Xe = (t) => {
+  const e = M(), { onPointerStart: n, onPointerMove: i, onPointerEnd: u } = We(t);
   let r = null;
-  const i = (s) => {
+  const l = (s) => {
     var E, w;
-    const h = e.selectedElements.value.some(
-      (I) => I.node === s
+    const m = e.selectedElements.value.some(
+      (x) => x.node === s
     );
-    if (e.selectedElements.value.length && h)
-      return e.selectedElements.value.map((I) => {
-        var _, V;
+    if (e.selectedElements.value.length && m)
+      return e.selectedElements.value.map((x) => {
+        var C, z;
         return {
-          ...I,
-          initialHTML: ((_ = I.node) == null ? void 0 : _.outerHTML) ?? "",
-          initialRect: (V = I.node) == null ? void 0 : V.getBoundingClientRect()
+          ...x,
+          initialHTML: ((C = x.node) == null ? void 0 : C.outerHTML) ?? "",
+          initialRect: (z = x.node) == null ? void 0 : z.getBoundingClientRect()
         };
       });
     e.selectedElements.value = [];
     const p = e.elements.value.find(
-      (I) => I.node === s
+      (x) => x.node === s
     );
     return p ? [
       {
@@ -389,30 +399,30 @@ const L = Se(() => {
         initialRect: (w = p.node) == null ? void 0 : w.getBoundingClientRect()
       }
     ] : [];
-  }, d = (s, h) => {
+  }, d = (s, m) => {
     const p = Math.max(
       0,
-      Math.min(s.x + s.width, h.x + h.width) - Math.max(s.x, h.x)
+      Math.min(s.x + s.width, m.x + m.width) - Math.max(s.x, m.x)
     ), E = Math.max(
       0,
-      Math.min(s.y + s.height, h.y + h.height) - Math.max(s.y, h.y)
-    ), w = p * E, I = s.width * s.height, _ = h.width * h.height;
-    return (w / I * 100 + w / _ * 100) / 2;
-  }, v = ze(() => {
-    var j, G, q, B, K, J, Q, ee, te, ne;
-    const s = k(e.activeContainer.ref.value), h = W(s), p = ((j = e.pointerPosition.current.value) == null ? void 0 : j.x) ?? 0, E = ((G = e.pointerPosition.current.value) == null ? void 0 : G.y) ?? 0, I = !(s && p >= s.x && p <= s.x + s.width && E >= s.y && E <= s.y + s.height), _ = e.draggingElements.value.map((a) => a.node), V = e.visibleElements.value.map((a) => e.elements.value[a]).filter((a) => {
-      if (!a.node || _.some(
-        (C) => C && S(a.node, C)
+      Math.min(s.y + s.height, m.y + m.height) - Math.max(s.y, m.y)
+    ), w = p * E, x = s.width * s.height, C = m.width * m.height;
+    return (w / x * 100 + w / C * 100) / 2;
+  }, v = ke(() => {
+    var X, q, j, G, B, J, Q, ee, te, ne;
+    const s = V(e.activeContainer.ref.value), m = $(s), p = ((X = e.pointerPosition.current.value) == null ? void 0 : X.x) ?? 0, E = ((q = e.pointerPosition.current.value) == null ? void 0 : q.y) ?? 0, x = !(s && p >= s.x && p <= s.x + s.width && E >= s.y && E <= s.y + s.height), C = e.draggingElements.value.map((a) => a.node), z = e.visibleElements.value.map((a) => e.elements.value[a]).filter((a) => {
+      if (!a.node || C.some(
+        (I) => I && S(a.node, I)
       ) || a.groups.length && !!e.draggingElements.value.some(
-        (M) => M.groups.length ? !M.groups.some(
+        (L) => L.groups.length ? !L.groups.some(
           (O) => a.groups.includes(O)
         ) : !1
       ))
         return !1;
-      const c = k(a.node);
+      const c = V(a.node);
       return c && s && se(c, s);
     }).map((a) => {
-      const c = k(a.node), C = W(c), M = p >= c.x && p <= c.x + c.width && E >= c.y && E <= c.y + c.height, O = d(c, s), N = ae(h, C), Z = e.elements.value.filter(
+      const c = V(a.node), I = $(c), L = p >= c.x && p <= c.x + c.width && E >= c.y && E <= c.y + c.height, O = d(c, s), Y = ae(m, I), N = e.elements.value.filter(
         (T) => T !== a && T.node && a.node && S(
           a.node,
           T.node
@@ -420,43 +430,43 @@ const L = Se(() => {
       ).length;
       return {
         element: a,
-        isPointerInElement: M,
+        isPointerInElement: L,
         overlapPercent: O,
-        depth: Z,
-        centerDistance: N
+        depth: N,
+        centerDistance: Y
       };
     }).sort((a, c) => {
-      if (!I) {
+      if (!x) {
         if (a.isPointerInElement && c.isPointerInElement) return c.depth - a.depth;
         if (a.isPointerInElement !== c.isPointerInElement) return a.isPointerInElement ? -1 : 1;
       }
       return Math.abs(a.overlapPercent - c.overlapPercent) <= 1 ? a.centerDistance - c.centerDistance : c.overlapPercent - a.overlapPercent;
     }), ve = e.zones.value.filter((a) => {
-      if (!a.node || _.some(
-        (C) => C && S(a.node, C)
-      ) || a.groups.length && !!e.draggingElements.value.some((M) => M.groups.length ? !M.groups.some((O) => a.groups.includes(O)) : !1))
+      if (!a.node || C.some(
+        (I) => I && S(a.node, I)
+      ) || a.groups.length && !!e.draggingElements.value.some((L) => L.groups.length ? !L.groups.some((O) => a.groups.includes(O)) : !1))
         return !1;
-      const c = k(a.node);
+      const c = V(a.node);
       return c && s && se(c, s);
     }).map((a) => {
-      const c = k(a.node), C = W(c), M = p >= c.x && p <= c.x + c.width && E >= c.y && E <= c.y + c.height, O = d(c, s), N = ae(h, C), Z = e.zones.value.filter(
+      const c = V(a.node), I = $(c), L = p >= c.x && p <= c.x + c.width && E >= c.y && E <= c.y + c.height, O = d(c, s), Y = ae(m, I), N = e.zones.value.filter(
         (T) => T !== a && T.node && a.node && S(a.node, T.node)
       ).length;
       return {
         zone: a,
-        isPointerInElement: M,
+        isPointerInElement: L,
         overlapPercent: O,
-        depth: Z,
-        centerDistance: N
+        depth: N,
+        centerDistance: Y
       };
     }).sort((a, c) => {
-      if (!I) {
+      if (!x) {
         if (a.isPointerInElement && c.isPointerInElement) return c.depth - a.depth;
         if (a.isPointerInElement !== c.isPointerInElement) return a.isPointerInElement ? -1 : 1;
       }
       return Math.abs(a.overlapPercent - c.overlapPercent) <= 1 ? a.centerDistance - c.centerDistance : c.overlapPercent - a.overlapPercent;
-    }), z = e.hovered.element.value, R = e.hovered.zone.value;
-    e.hovered.element.value = ((q = V[0]) == null ? void 0 : q.element) ?? null, e.hovered.zone.value = ((B = ve[0]) == null ? void 0 : B.zone) ?? null, e.hovered.element.value !== z && ((K = z == null ? void 0 : z.events) != null && K.onLeave && z.events.onLeave(e), (Q = (J = e.hovered.element.value) == null ? void 0 : J.events) != null && Q.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== R && ((ee = R == null ? void 0 : R.events) != null && ee.onLeave && R.events.onLeave(e), (ne = (te = e.hovered.zone.value) == null ? void 0 : te.events) != null && ne.onHover && e.hovered.zone.value.events.onHover(e));
+    }), k = e.hovered.element.value, R = e.hovered.zone.value;
+    e.hovered.element.value = ((j = z[0]) == null ? void 0 : j.element) ?? null, e.hovered.zone.value = ((G = ve[0]) == null ? void 0 : G.zone) ?? null, e.hovered.element.value !== k && ((B = k == null ? void 0 : k.events) != null && B.onLeave && k.events.onLeave(e), (Q = (J = e.hovered.element.value) == null ? void 0 : J.events) != null && Q.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== R && ((ee = R == null ? void 0 : R.events) != null && ee.onLeave && R.events.onLeave(e), (ne = (te = e.hovered.zone.value) == null ? void 0 : te.events) != null && ne.onHover && e.hovered.zone.value.events.onHover(e));
   }, 1e3), g = () => {
     v(), r = requestAnimationFrame(g);
   }, o = () => {
@@ -466,14 +476,14 @@ const L = Se(() => {
   };
   return {
     activate: (s) => {
-      e.draggingElements.value = i(t.value), n(s), o();
+      e.draggingElements.value = l(t.value), n(s), o();
     },
     track: (s) => {
-      l(s);
+      i(s);
     },
     deactivate: () => {
-      var s, h;
-      u(), e.hovered.zone.value ? (h = (s = e.hovered.zone.value.events).onDrop) == null || h.call(s, e) : e.draggingElements.value.forEach(
+      var s, m;
+      u(), e.hovered.zone.value ? (m = (s = e.hovered.zone.value.events).onDrop) == null || m.call(s, e) : e.draggingElements.value.forEach(
         (p) => {
           var E, w;
           return (w = (E = p.events).onEnd) == null ? void 0 : w.call(E, e);
@@ -481,31 +491,31 @@ const L = Se(() => {
       ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, f();
     }
   };
-}, Ke = (t) => {
+}, Be = (t) => {
   const {
     elementRef: e,
     registerElement: n,
-    unregisterElement: l,
+    unregisterElement: i,
     isDragging: u,
     isOvered: r,
-    isAllowed: i,
+    isAllowed: l,
     isVisible: d
-  } = Ue(t), { disableInteractions: v, enableInteractions: g } = We(), { activeContainer: o, pointerPosition: f } = L(), { activate: x, track: m, deactivate: y } = je(e), s = (w) => {
-    t != null && t.container && (o.component.value = Ce(t.container)), v(), x(w), document.addEventListener("pointermove", h), document.addEventListener("pointerup", E), document.addEventListener("wheel", p);
-  }, h = (w) => m(w), p = (w) => m(w), E = () => {
-    o.component.value = null, g(), y(), document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", E), document.removeEventListener("wheel", p);
+  } = Ze(t), { disableInteractions: v, enableInteractions: g } = $e(), { activeContainer: o, pointerPosition: f } = M(), { activate: _, track: h, deactivate: y } = Xe(e), s = (w) => {
+    t != null && t.container && (o.component.value = Ie(t.container)), v(), _(w), document.addEventListener("pointermove", m), document.addEventListener("pointerup", E), document.addEventListener("wheel", p);
+  }, m = (w) => h(w), p = (w) => h(w), E = () => {
+    o.component.value = null, g(), y(), document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", E), document.removeEventListener("wheel", p);
   };
-  return F(n), Y(l), {
+  return U(n), W(i), {
     pointerPosition: f,
     elementRef: e,
     isDragging: u,
     isOvered: r,
-    isAllowed: i,
+    isAllowed: l,
     handleDragStart: s,
     isVisible: d
   };
-}, Ge = (t) => {
-  const { zones: e, hovered: n, draggingElements: l, isDragging: u } = L(), r = P(null), i = D(() => {
+}, qe = (t) => {
+  const { zones: e, hovered: n, draggingElements: i, isDragging: u } = M(), r = P(null), l = D(() => {
     var o;
     return ((o = n.zone.value) == null ? void 0 : o.node) === r.value;
   }), d = D(() => {
@@ -513,8 +523,8 @@ const L = Se(() => {
     const o = e.value.find(
       (f) => f.node === r.value
     );
-    return o != null && o.groups.length ? !l.value.some((f) => f.groups.length ? !f.groups.some(
-      (x) => o.groups.includes(x)
+    return o != null && o.groups.length ? !i.value.some((f) => f.groups.length ? !f.groups.some(
+      (_) => o.groups.includes(_)
     ) : !1) : !0;
   });
   return { elementRef: r, registerZone: () => {
@@ -531,12 +541,12 @@ const L = Se(() => {
       (f) => f.node === r.value
     );
     o !== -1 && e.value.splice(o, 1);
-  }, isOvered: i, isAllowed: d };
+  }, isOvered: l, isAllowed: d };
 }, Je = (t) => {
-  const { elementRef: e, registerZone: n, unregisterZone: l, isOvered: u, isAllowed: r } = Ge(t);
-  return F(n), Y(l), { elementRef: e, isOvered: u, isAllowed: r };
+  const { elementRef: e, registerZone: n, unregisterZone: i, isOvered: u, isAllowed: r } = qe(t);
+  return U(n), W(i), { elementRef: e, isOvered: u, isAllowed: r };
 }, Qe = (t) => {
-  const { selectedElements: e, elements: n } = L(), l = D(
+  const { selectedElements: e, elements: n } = M(), i = D(
     () => n.value.find((o) => o.node === t.value)
   ), u = D(
     () => e.value.some((o) => o.node === t.value)
@@ -545,33 +555,33 @@ const L = Se(() => {
       o.node,
       t.value
     )
-  ) : !1), i = D(() => t.value ? e.value.some(
+  ) : !1), l = D(() => t.value ? e.value.some(
     (o) => o.node && S(
       t.value,
       o.node
     )
   ) : !1), d = () => {
-    l.value && (e.value = e.value.filter(
+    i.value && (e.value = e.value.filter(
       (o) => o.node !== t.value
     ));
   }, v = () => {
-    l.value && (r.value && (e.value = e.value.filter(
+    i.value && (r.value && (e.value = e.value.filter(
       (o) => o.node && !S(
         o.node,
         t.value
       )
-    )), i.value && (e.value = e.value.filter(
+    )), l.value && (e.value = e.value.filter(
       (o) => o.node && !S(
         t.value,
         o.node
       )
-    )), e.value.push(l.value));
+    )), e.value.push(i.value));
   };
   return {
     handleUnselect: d,
     handleSelect: v,
     handleToggleSelect: () => {
-      l.value && (e.value.some((o) => o.node === t.value) ? d() : v());
+      i.value && (e.value.some((o) => o.node === t.value) ? d() : v());
     },
     isSelected: u,
     isParentOfSelected: r
@@ -579,10 +589,10 @@ const L = Se(() => {
 };
 export {
   ie as DragOverlay,
-  Be as default,
-  k as getBoundingBox,
-  L as useDnDStore,
-  Ke as useDraggable,
+  Ge as default,
+  V as getBoundingBox,
+  M as useDnDStore,
+  Be as useDraggable,
   Je as useDroppable,
   Qe as useSelection
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "0.0.46-beta",
+  "version": "0.0.47-beta",
   "description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
   "author": "ZiZIGY",
   "license": "MIT",