@vue-dnd-kit/core 0.0.23 → 0.0.25-beta

package/{README.txt → README.md}

@@ -1,6 +1,7 @@
 # Vue Drag & Drop Library - Core Package
 
 [![Beta](https://img.shields.io/badge/status-beta-yellow.svg)](https://github.com/zizigy/vue-dnd-kit)
+ > ⚠️ **Warning**: This project is in active development (beta). The API may change between minor versions. Not recommended for production use until version 1.0.0.
 
 <p align="center">
   <a href="https://zizigy.github.io/vue-dnd-hooks/">
@@ -22,6 +23,16 @@
   Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
 </p>
 
+## Project Status
+   
+   This project is in active development. We're working toward a stable API, but until version 1.0.0, there may be breaking changes.
+   
+   Roadmap:
+   - [x] Basic drag & drop functionality
+   - [x] Complete documentation
+   - [ ] Tests
+   - [ ] Stable API (version 1.0.0)
+
 ## Features
 
 ### Core Capabilities
@@ -31,14 +42,12 @@
   - Intuitive hooks-based approach
   - Clean and declarative syntax
   - Minimal boilerplate code
-
 - 🎨 **Full Customization**
 
   - Custom drag overlays
   - Flexible styling system
   - Animation support
   - Custom drag handles
-
 - 📱 **Advanced Input Support**
 
   - Touch devices support
@@ -53,7 +62,6 @@
   - Minimal re-renders
   - Efficient DOM updates
   - Memory leak prevention
-
 - 🔄 **Smart Auto-scrolling**
 
   - Smooth scroll animations
@@ -69,7 +77,6 @@
   - Type inference
   - IDE autocompletion
   - Type-safe events
-
 - 📐 **Layout Features**
 
   - Grid system support
@@ -85,14 +92,12 @@
   - Zone filtering
   - Nested groups
   - Dynamic group validation
-
 - 📊 **Rich Events System**
 
   - Comprehensive lifecycle events
   - Custom event handlers
   - Drag state tracking
   - Position coordinates
-
 - 🛡️ **Built-in Utilities**
 
   - Geometry calculations
@@ -195,7 +200,7 @@ pnpm install @vue-dnd-kit/core
 </style>
 ```
 
-### Droppable.vue 
+### Droppable.vue
 
 <sup>🧩 components/Droppable.vue</sup>
 

package/dist/index.d.ts

@@ -1,9 +1,10 @@
+import { default as DnDContext } from './components/DnDContext';
 import { default as DragOverlay } from './components/DragOverlay';
 import { useDnDStore } from './composables/useDnDStore';
 import { useDraggable } from './composables/useDraggable';
 import { useDroppable } from './composables/useDroppable';
 import { useSelection } from './composables/useSelection';
 
-export { DragOverlay, useDraggable, useDroppable, useDnDStore, useSelection };
+export { DragOverlay, DnDContext, useDraggable, useDroppable, useDnDStore, useSelection, };
 export { getBoundingBox } from './utils/geometry';
 export type { IDnDStore, IActiveContainer, IBoundingBox, IDragElement, IDraggingElement, IDropZone, IPoint, IPointerPosition, IUseDragOptions, IUseDropOptions, } from './types';

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");let G=!1,R;const L=()=>(G||(R=n.effectScope(!0).run(()=>({isDragging:n.computed(()=>R.draggingElements.value.length>0),activeContainer:{component:n.ref(null),ref:n.ref(null)},elements:n.ref([]),draggingElements:n.ref([]),selectedElements:n.ref([]),zones:n.ref([]),hovered:{zone:n.ref(null),element:n.ref(null)},pointerPosition:{current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}}})),G=!0),R),W=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:u,isDragging:c,activeContainer:d}=L();return n.onMounted(()=>{d.ref=t}),n.onBeforeUnmount(()=>{d.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:u,isDragging:c}},b=["innerHTML"],ee=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:u,isDragging:c,draggingElements:d}=W(),r=n.computed(()=>{var s,m,h,y;return{transform:`translate3d(${(((s=u.current.value)==null?void 0:s.x)??0)-(((m=u.offset.pixel.value)==null?void 0:m.x)??0)}px, ${(((h=u.current.value)==null?void 0:h.y)??0)-(((y=u.offset.pixel.value)==null?void 0:y.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,m)=>n.unref(c)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(r.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),(h,y)=>{var i,E;return n.openBlock(),n.createElementBlock("div",{key:y,innerHTML:h.initialHTML,style:n.normalizeStyle({width:`${(i=h.initialRect)==null?void 0:i.width}px`,height:`${(E=h.initialRect)==null?void 0:E.height}px`})},null,12,b)}),128))],4)):n.createCommentVNode("",!0)}}),te=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=L(),u=n.computed(()=>e.component.value??ee);return(c,d)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(u.value)))}}),ne="data-dnd-draggable",re=t=>{const{elements:e,draggingElements:u,hovered:c,selectedElements:d,isDragging:r}=L(),s=n.ref(null),m=n.computed(()=>{var p;return((p=c.element.value)==null?void 0:p.node)===s.value}),h=n.computed(()=>u.value.some(p=>p.node===s.value)),y=n.computed(()=>{if(!s.value||!r.value)return!1;const p=e.value.find(D=>D.node===s.value);return p!=null&&p.groups.length?!u.value.some(D=>D.groups.length?!D.groups.some(o=>p.groups.includes(o)):!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}),s.value.setAttribute(ne,"true")},unregisterElement:()=>{const p=e.value.findIndex(o=>o.node===s.value);p!==-1&&e.value.splice(p,1);const D=d.value.findIndex(o=>o.node===s.value);D!==-1&&d.value.splice(D,1)},isDragging:h,isOvered:m,isAllowed:y}},oe=()=>{let t="",e="",u="";const c=()=>{const s=document.body;t=s.style.userSelect,e=s.style.touchAction,u=s.style.overscrollBehavior,s.style.userSelect="none",s.style.touchAction="none",s.style.overscrollBehavior="none",window.addEventListener("contextmenu",r),window.addEventListener("selectstart",r),window.addEventListener("touchstart",r),window.addEventListener("touchmove",r)},d=()=>{const s=document.body;s.style.userSelect=t,s.style.touchAction=e,s.style.overscrollBehavior=u,window.removeEventListener("contextmenu",r),window.removeEventListener("selectstart",r),window.removeEventListener("touchstart",r),window.removeEventListener("touchmove",r)},r=s=>s.preventDefault();return{disableInteractions:c,enableInteractions:d}},J=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,k=t=>{if(!t)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}},U=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),le=(t,e)=>{const u=k(t);return{pixel:{x:e.x-u.x,y:e.y-u.y},percent:{x:(e.x-u.x)/u.width*100,y:(e.y-u.y)/u.height*100}}},K=(t,e)=>{const u=e.x-t.x,c=e.y-t.y;return Math.sqrt(u*u+c*c)},M=(t,e)=>t?e.contains(t):!1,ie=t=>{const e=L();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:s,percent:m}=le(t.value,{x:r.clientX,y:r.clientY});e.pointerPosition.offset.pixel.value=s,e.pointerPosition.offset.percent.value=m},onPointerMove:r=>{e.pointerPosition.current.value={x:r.clientX,y:r.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},se=t=>{const e=L(),{onPointerStart:u,onPointerMove:c,onPointerEnd:d}=ie(t);let r=null;const s=o=>{var v,x;const g=e.selectedElements.value.some(P=>P.node===o);if(e.selectedElements.value.length&&g)return e.selectedElements.value.map(P=>{var C,H;return{...P,initialHTML:((C=P.node)==null?void 0:C.outerHTML)??"",initialRect:(H=P.node)==null?void 0:H.getBoundingClientRect()}});e.selectedElements.value=[];const f=e.elements.value.find(P=>P.node===o);return f?[{...f,initialHTML:((v=f.node)==null?void 0:v.outerHTML)??"",initialRect:(x=f.node)==null?void 0:x.getBoundingClientRect()}]:[]},m=(o,g)=>{const f=Math.max(0,Math.min(o.x+o.width,g.x+g.width)-Math.max(o.x,g.x)),v=Math.max(0,Math.min(o.y+o.height,g.y+g.height)-Math.max(o.y,g.y)),x=f*v,P=o.width*o.height,C=g.width*g.height;return(x/P*100+x/C*100)/2},h=()=>{var Z,A,X,Y,$,F,q,N,j,V;const o=k(e.activeContainer.ref.value),g=U(o),f=((Z=e.pointerPosition.current.value)==null?void 0:Z.x)??0,v=((A=e.pointerPosition.current.value)==null?void 0:A.y)??0,P=!(o&&f>=o.x&&f<=o.x+o.width&&v>=o.y&&v<=o.y+o.height),C=e.draggingElements.value.map(l=>l.node),H=e.elements.value.filter(l=>{if(!l.node||C.some(w=>w&&M(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(I=>l.groups.includes(I)):!1))return!1;const a=k(l.node);return a&&o&&J(a,o)}).map(l=>{const a=k(l.node),w=U(a),S=f>=a.x&&f<=a.x+a.width&&v>=a.y&&v<=a.y+a.height,I=m(a,o),T=K(g,w),B=e.elements.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{element:l,isPointerInElement:S,overlapPercent:I,depth:B,centerDistance:T}}).sort((l,a)=>{if(!P){if(l.isPointerInElement&&a.isPointerInElement)return a.depth-l.depth;if(l.isPointerInElement!==a.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-a.overlapPercent)<=1?l.centerDistance-a.centerDistance:a.overlapPercent-l.overlapPercent}),Q=e.zones.value.filter(l=>{if(!l.node||C.some(w=>w&&M(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(I=>l.groups.includes(I)):!1))return!1;const a=k(l.node);return a&&o&&J(a,o)}).map(l=>{const a=k(l.node),w=U(a),S=f>=a.x&&f<=a.x+a.width&&v>=a.y&&v<=a.y+a.height,I=m(a,o),T=K(g,w),B=e.zones.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{zone:l,isPointerInElement:S,overlapPercent:I,depth:B,centerDistance:T}}).sort((l,a)=>{if(!P){if(l.isPointerInElement&&a.isPointerInElement)return a.depth-l.depth;if(l.isPointerInElement!==a.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-a.overlapPercent)<=1?l.centerDistance-a.centerDistance:a.overlapPercent-l.overlapPercent}),O=e.hovered.element.value,z=e.hovered.zone.value;e.hovered.element.value=((X=H[0])==null?void 0:X.element)??null,e.hovered.zone.value=((Y=Q[0])==null?void 0:Y.zone)??null,e.hovered.element.value!==O&&(($=O==null?void 0:O.events)!=null&&$.onLeave&&O.events.onLeave(e),(q=(F=e.hovered.element.value)==null?void 0:F.events)!=null&&q.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==z&&((N=z==null?void 0:z.events)!=null&&N.onLeave&&z.events.onLeave(e),(V=(j=e.hovered.zone.value)==null?void 0:j.events)!=null&&V.onHover&&e.hovered.zone.value.events.onHover(e)),r=requestAnimationFrame(h)},y=()=>{h()},i=()=>{r!==null&&(cancelAnimationFrame(r),r=null)};return{activate:o=>{e.draggingElements.value=s(t.value),u(o),y()},track:o=>{c(o)},deactivate:()=>{var o,g;d(),e.hovered.zone.value?(g=(o=e.hovered.zone.value.events).onDrop)==null||g.call(o,e):e.draggingElements.value.forEach(f=>{var v,x;return(x=(v=f.events).onEnd)==null?void 0:x.call(v,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,i()}}},ae=t=>{const{elementRef:e,registerElement:u,unregisterElement:c,isDragging:d,isOvered:r,isAllowed:s}=re(t),{disableInteractions:m,enableInteractions:h}=oe(),y=L(),{activate:i,track:E,deactivate:p}=se(e),D=v=>{t!=null&&t.container&&(y.activeContainer.component.value=n.markRaw(t.container)),m(),i(v),document.addEventListener("pointermove",o),document.addEventListener("pointerup",f),document.addEventListener("wheel",g)},o=v=>{E(v)},g=v=>{E(v)},f=()=>{y.activeContainer.component.value=null,h(),p(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",f),document.removeEventListener("wheel",g)};return n.onMounted(u),n.onBeforeUnmount(c),{pointerPosition:y.pointerPosition,elementRef:e,isDragging:d,isOvered:r,isAllowed:s,handleDragStart:D}},ue=t=>{const{zones:e,hovered:u,draggingElements:c,isDragging:d}=L(),r=n.ref(null),s=n.computed(()=>{var i;return((i=u.zone.value)==null?void 0:i.node)===r.value}),m=n.computed(()=>{if(!r.value||!d.value)return!1;const i=e.value.find(E=>E.node===r.value);return i!=null&&i.groups.length?!c.value.some(E=>E.groups.length?!E.groups.some(p=>i.groups.includes(p)):!1):!0});return{elementRef:r,registerZone:()=>{if(!r.value)throw new Error("elementRef is not set");e.value.push({node:r.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),r.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!r.value)throw new Error("elementRef is not set");const i=e.value.findIndex(E=>E.node===r.value);i!==-1&&e.value.splice(i,1)},isOvered:s,isAllowed:m}},ce=t=>{const{elementRef:e,registerZone:u,unregisterZone:c,isOvered:d,isAllowed:r}=ue(t);return n.onMounted(u),n.onBeforeUnmount(c),{elementRef:e,isOvered:d,isAllowed:r}},de=t=>{const{selectedElements:e,elements:u}=L(),c=n.computed(()=>u.value.find(i=>i.node===t.value)),d=n.computed(()=>e.value.some(i=>i.node===t.value)),r=n.computed(()=>t.value?e.value.some(i=>i.node&&M(i.node,t.value)):!1),s=n.computed(()=>t.value?e.value.some(i=>i.node&&M(t.value,i.node)):!1),m=()=>{c.value&&(e.value=e.value.filter(i=>i.node!==t.value))},h=()=>{c.value&&(r.value&&(e.value=e.value.filter(i=>i.node&&!M(i.node,t.value))),s.value&&(e.value=e.value.filter(i=>i.node&&!M(t.value,i.node))),e.value.push(c.value))};return{handleUnselect:m,handleSelect:h,handleToggleSelect:()=>{c.value&&(e.value.some(i=>i.node===t.value)?m():h())},isSelected:d,isParentOfSelected:r}};exports.DragOverlay=te;exports.getBoundingBox=k;exports.useDnDStore=L;exports.useDraggable=ae;exports.useDroppable=ce;exports.useSelection=de;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");let G=!1,T;const S=()=>(G||(T=n.effectScope(!0).run(()=>({isDragging:n.computed(()=>T.draggingElements.value.length>0),activeContainer:{component:n.ref(null),ref:n.ref(null)},elements:n.ref([]),draggingElements:n.ref([]),selectedElements:n.ref([]),zones:n.ref([]),hovered:{zone:n.ref(null),element:n.ref(null)},pointerPosition:{current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}}})),G=!0),T),b=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:s,isDragging:c,activeContainer:d}=S();return n.onMounted(()=>{d.ref=t}),n.onBeforeUnmount(()=>{d.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:s,isDragging:c}},ee=["innerHTML"],te=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:s,isDragging:c,draggingElements:d}=b(),r=n.computed(()=>{var a,m,h,y;return{transform:`translate3d(${(((a=s.current.value)==null?void 0:a.x)??0)-(((m=s.offset.pixel.value)==null?void 0:m.x)??0)}px, ${(((h=s.current.value)==null?void 0:h.y)??0)-(((y=s.offset.pixel.value)==null?void 0:y.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(a,m)=>n.unref(c)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(r.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),(h,y)=>{var i,E;return n.openBlock(),n.createElementBlock("div",{key:y,innerHTML:h.initialHTML,style:n.normalizeStyle({width:`${(i=h.initialRect)==null?void 0:i.width}px`,height:`${(E=h.initialRect)==null?void 0:E.height}px`})},null,12,ee)}),128))],4)):n.createCommentVNode("",!0)}}),Q=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=S(),s=n.computed(()=>e.component.value??te);return(c,d)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(s.value)))}}),ne=n.defineComponent({__name:"DnDContext",setup(t){const e=n.ref(null);return(s,c)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"contextRef",ref:e},[n.renderSlot(s.$slots,"default"),n.createVNode(Q)],512))}}),re="data-dnd-draggable",oe=t=>{const{elements:e,draggingElements:s,hovered:c,selectedElements:d,isDragging:r}=S(),a=n.ref(null),m=n.computed(()=>{var p;return((p=c.element.value)==null?void 0:p.node)===a.value}),h=n.computed(()=>s.value.some(p=>p.node===a.value)),y=n.computed(()=>{if(!a.value||!r.value)return!1;const p=e.value.find(D=>D.node===a.value);return p!=null&&p.groups.length?!s.value.some(D=>D.groups.length?!D.groups.some(o=>p.groups.includes(o)):!1):!0});return{elementRef:a,registerElement:()=>{if(!a.value)throw new Error("ElementRef is not set");e.value.push({node:a.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}),a.value.setAttribute(re,"true")},unregisterElement:()=>{const p=e.value.findIndex(o=>o.node===a.value);p!==-1&&e.value.splice(p,1);const D=d.value.findIndex(o=>o.node===a.value);D!==-1&&d.value.splice(D,1)},isDragging:h,isOvered:m,isAllowed:y}},le=()=>{let t="",e="",s="";const c=()=>{const a=document.body;t=a.style.userSelect,e=a.style.touchAction,s=a.style.overscrollBehavior,a.style.userSelect="none",a.style.touchAction="none",a.style.overscrollBehavior="none",window.addEventListener("contextmenu",r),window.addEventListener("selectstart",r),window.addEventListener("touchstart",r),window.addEventListener("touchmove",r)},d=()=>{const a=document.body;a.style.userSelect=t,a.style.touchAction=e,a.style.overscrollBehavior=s,window.removeEventListener("contextmenu",r),window.removeEventListener("selectstart",r),window.removeEventListener("touchstart",r),window.removeEventListener("touchmove",r)},r=a=>a.preventDefault();return{disableInteractions:c,enableInteractions:d}},J=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,k=t=>{if(!t)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}},$=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),ie=(t,e)=>{const s=k(t);return{pixel:{x:e.x-s.x,y:e.y-s.y},percent:{x:(e.x-s.x)/s.width*100,y:(e.y-s.y)/s.height*100}}},K=(t,e)=>{const s=e.x-t.x,c=e.y-t.y;return Math.sqrt(s*s+c*c)},L=(t,e)=>t?e.contains(t):!1,se=t=>{const e=S();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:a,percent:m}=ie(t.value,{x:r.clientX,y:r.clientY});e.pointerPosition.offset.pixel.value=a,e.pointerPosition.offset.percent.value=m},onPointerMove:r=>{e.pointerPosition.current.value={x:r.clientX,y:r.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},ae=t=>{const e=S(),{onPointerStart:s,onPointerMove:c,onPointerEnd:d}=se(t);let r=null;const a=o=>{var v,x;const g=e.selectedElements.value.some(P=>P.node===o);if(e.selectedElements.value.length&&g)return e.selectedElements.value.map(P=>{var M,B;return{...P,initialHTML:((M=P.node)==null?void 0:M.outerHTML)??"",initialRect:(B=P.node)==null?void 0:B.getBoundingClientRect()}});e.selectedElements.value=[];const f=e.elements.value.find(P=>P.node===o);return f?[{...f,initialHTML:((v=f.node)==null?void 0:v.outerHTML)??"",initialRect:(x=f.node)==null?void 0:x.getBoundingClientRect()}]:[]},m=(o,g)=>{const f=Math.max(0,Math.min(o.x+o.width,g.x+g.width)-Math.max(o.x,g.x)),v=Math.max(0,Math.min(o.y+o.height,g.y+g.height)-Math.max(o.y,g.y)),x=f*v,P=o.width*o.height,M=g.width*g.height;return(x/P*100+x/M*100)/2},h=()=>{var U,Z,A,X,Y,F,q,N,V,j;const o=k(e.activeContainer.ref.value),g=$(o),f=((U=e.pointerPosition.current.value)==null?void 0:U.x)??0,v=((Z=e.pointerPosition.current.value)==null?void 0:Z.y)??0,P=!(o&&f>=o.x&&f<=o.x+o.width&&v>=o.y&&v<=o.y+o.height),M=e.draggingElements.value.map(l=>l.node),B=e.elements.value.filter(l=>{if(!l.node||M.some(w=>w&&L(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(C=>C.groups.length?!C.groups.some(_=>l.groups.includes(_)):!1))return!1;const u=k(l.node);return u&&o&&J(u,o)}).map(l=>{const u=k(l.node),w=$(u),C=f>=u.x&&f<=u.x+u.width&&v>=u.y&&v<=u.y+u.height,_=m(u,o),H=K(g,w),R=e.elements.value.filter(I=>I!==l&&I.node&&l.node&&L(l.node,I.node)).length;return{element:l,isPointerInElement:C,overlapPercent:_,depth:R,centerDistance:H}}).sort((l,u)=>{if(!P){if(l.isPointerInElement&&u.isPointerInElement)return u.depth-l.depth;if(l.isPointerInElement!==u.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-u.overlapPercent)<=1?l.centerDistance-u.centerDistance:u.overlapPercent-l.overlapPercent}),W=e.zones.value.filter(l=>{if(!l.node||M.some(w=>w&&L(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(C=>C.groups.length?!C.groups.some(_=>l.groups.includes(_)):!1))return!1;const u=k(l.node);return u&&o&&J(u,o)}).map(l=>{const u=k(l.node),w=$(u),C=f>=u.x&&f<=u.x+u.width&&v>=u.y&&v<=u.y+u.height,_=m(u,o),H=K(g,w),R=e.zones.value.filter(I=>I!==l&&I.node&&l.node&&L(l.node,I.node)).length;return{zone:l,isPointerInElement:C,overlapPercent:_,depth:R,centerDistance:H}}).sort((l,u)=>{if(!P){if(l.isPointerInElement&&u.isPointerInElement)return u.depth-l.depth;if(l.isPointerInElement!==u.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-u.overlapPercent)<=1?l.centerDistance-u.centerDistance:u.overlapPercent-l.overlapPercent}),O=e.hovered.element.value,z=e.hovered.zone.value;e.hovered.element.value=((A=B[0])==null?void 0:A.element)??null,e.hovered.zone.value=((X=W[0])==null?void 0:X.zone)??null,e.hovered.element.value!==O&&((Y=O==null?void 0:O.events)!=null&&Y.onLeave&&O.events.onLeave(e),(q=(F=e.hovered.element.value)==null?void 0:F.events)!=null&&q.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==z&&((N=z==null?void 0:z.events)!=null&&N.onLeave&&z.events.onLeave(e),(j=(V=e.hovered.zone.value)==null?void 0:V.events)!=null&&j.onHover&&e.hovered.zone.value.events.onHover(e)),r=requestAnimationFrame(h)},y=()=>{h()},i=()=>{r!==null&&(cancelAnimationFrame(r),r=null)};return{activate:o=>{e.draggingElements.value=a(t.value),s(o),y()},track:o=>{c(o)},deactivate:()=>{var o,g;d(),e.hovered.zone.value?(g=(o=e.hovered.zone.value.events).onDrop)==null||g.call(o,e):e.draggingElements.value.forEach(f=>{var v,x;return(x=(v=f.events).onEnd)==null?void 0:x.call(v,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,i()}}},ue=t=>{const{elementRef:e,registerElement:s,unregisterElement:c,isDragging:d,isOvered:r,isAllowed:a}=oe(t),{disableInteractions:m,enableInteractions:h}=le(),y=S(),{activate:i,track:E,deactivate:p}=ae(e),D=v=>{t!=null&&t.container&&(y.activeContainer.component.value=n.markRaw(t.container)),m(),i(v),document.addEventListener("pointermove",o),document.addEventListener("pointerup",f),document.addEventListener("wheel",g)},o=v=>{E(v)},g=v=>{E(v)},f=()=>{y.activeContainer.component.value=null,h(),p(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",f),document.removeEventListener("wheel",g)};return n.onMounted(s),n.onBeforeUnmount(c),{pointerPosition:y.pointerPosition,elementRef:e,isDragging:d,isOvered:r,isAllowed:a,handleDragStart:D}},ce=t=>{const{zones:e,hovered:s,draggingElements:c,isDragging:d}=S(),r=n.ref(null),a=n.computed(()=>{var i;return((i=s.zone.value)==null?void 0:i.node)===r.value}),m=n.computed(()=>{if(!r.value||!d.value)return!1;const i=e.value.find(E=>E.node===r.value);return i!=null&&i.groups.length?!c.value.some(E=>E.groups.length?!E.groups.some(p=>i.groups.includes(p)):!1):!0});return{elementRef:r,registerZone:()=>{if(!r.value)throw new Error("elementRef is not set");e.value.push({node:r.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),r.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!r.value)throw new Error("elementRef is not set");const i=e.value.findIndex(E=>E.node===r.value);i!==-1&&e.value.splice(i,1)},isOvered:a,isAllowed:m}},de=t=>{const{elementRef:e,registerZone:s,unregisterZone:c,isOvered:d,isAllowed:r}=ce(t);return n.onMounted(s),n.onBeforeUnmount(c),{elementRef:e,isOvered:d,isAllowed:r}},ve=t=>{const{selectedElements:e,elements:s}=S(),c=n.computed(()=>s.value.find(i=>i.node===t.value)),d=n.computed(()=>e.value.some(i=>i.node===t.value)),r=n.computed(()=>t.value?e.value.some(i=>i.node&&L(i.node,t.value)):!1),a=n.computed(()=>t.value?e.value.some(i=>i.node&&L(t.value,i.node)):!1),m=()=>{c.value&&(e.value=e.value.filter(i=>i.node!==t.value))},h=()=>{c.value&&(r.value&&(e.value=e.value.filter(i=>i.node&&!L(i.node,t.value))),a.value&&(e.value=e.value.filter(i=>i.node&&!L(t.value,i.node))),e.value.push(c.value))};return{handleUnselect:m,handleSelect:h,handleToggleSelect:()=>{c.value&&(e.value.some(i=>i.node===t.value)?m():h())},isSelected:d,isParentOfSelected:r}};exports.DnDContext=ne;exports.DragOverlay=Q;exports.getBoundingBox=k;exports.useDnDStore=S;exports.useDraggable=ue;exports.useDroppable=de;exports.useSelection=ve;

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

@@ -1,9 +1,9 @@
-import { effectScope as ie, ref as p, computed as w, onMounted as F, onBeforeUnmount as U, defineComponent as oe, createElementBlock as X, createCommentVNode as se, unref as b, openBlock as R, normalizeStyle as ee, Fragment as ae, renderList as ue, createBlock as ce, resolveDynamicComponent as ve, markRaw as de } from "vue";
-let te = !1, Y;
-const M = () => (te || (Y = ie(!0).run(() => ({
+import { effectScope as ie, ref as p, computed as w, onMounted as F, onBeforeUnmount as U, defineComponent as N, createElementBlock as $, createCommentVNode as se, unref as ee, openBlock as R, normalizeStyle as te, Fragment as ae, renderList as ue, createBlock as ce, resolveDynamicComponent as ve, renderSlot as de, createVNode as ge, markRaw as he } from "vue";
+let ne = !1, X;
+const I = () => (ne || (X = ie(!0).run(() => ({
   /** Whether any drag operation is currently active */
   isDragging: w(
-    () => Y.draggingElements.value.length > 0
+    () => X.draggingElements.value.length > 0
   ),
   /** Active container where dragging occurs */
   activeContainer: {
@@ -41,8 +41,8 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       pixel: p(null)
     }
   }
-})), te = !0), Y), ge = () => {
-  const t = p(null), { draggingElements: e, pointerPosition: a, isDragging: u, activeContainer: c } = M();
+})), ne = !0), X), fe = () => {
+  const t = p(null), { draggingElements: e, pointerPosition: i, isDragging: u, activeContainer: c } = I();
   return F(() => {
     c.ref = t;
   }), U(() => {
@@ -50,16 +50,16 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   }), {
     elementRef: t,
     draggingElements: e,
-    pointerPosition: a,
+    pointerPosition: i,
     isDragging: u
   };
-}, he = ["innerHTML"], fe = /* @__PURE__ */ oe({
+}, me = ["innerHTML"], pe = /* @__PURE__ */ N({
   __name: "DefaultOverlay",
   setup(t) {
-    const { elementRef: e, pointerPosition: a, isDragging: u, draggingElements: c } = ge(), n = w(() => {
-      var i, h, f, y;
+    const { elementRef: e, pointerPosition: i, isDragging: u, draggingElements: c } = fe(), n = w(() => {
+      var s, h, f, y;
       return {
-        transform: `translate3d(${(((i = a.current.value) == null ? void 0 : i.x) ?? 0) - (((h = a.offset.pixel.value) == null ? void 0 : h.x) ?? 0)}px, ${(((f = a.current.value) == null ? void 0 : f.y) ?? 0) - (((y = a.offset.pixel.value) == null ? void 0 : y.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((s = i.current.value) == null ? void 0 : s.x) ?? 0) - (((h = i.offset.pixel.value) == null ? void 0 : h.x) ?? 0)}px, ${(((f = i.current.value) == null ? void 0 : f.y) ?? 0) - (((y = i.offset.pixel.value) == null ? void 0 : y.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -67,76 +67,88 @@ const M = () => (te || (Y = ie(!0).run(() => ({
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (i, h) => b(u) ? (R(), X("div", {
+    return (s, h) => ee(u) ? (R(), $("div", {
       key: 0,
       ref_key: "elementRef",
       ref: e,
-      style: ee(n.value)
+      style: te(n.value)
     }, [
-      (R(!0), X(ae, null, ue(b(c), (f, y) => {
+      (R(!0), $(ae, null, ue(ee(c), (f, y) => {
         var l, E;
-        return R(), X("div", {
+        return R(), $("div", {
           key: y,
           innerHTML: f.initialHTML,
-          style: ee({
+          style: te({
             width: `${(l = f.initialRect) == null ? void 0 : l.width}px`,
             height: `${(E = f.initialRect) == null ? void 0 : E.height}px`
           })
-        }, null, 12, he);
+        }, null, 12, me);
       }), 128))
     ], 4)) : se("", !0);
   }
-}), Le = /* @__PURE__ */ oe({
+}), ye = /* @__PURE__ */ N({
   __name: "DragOverlay",
   setup(t) {
-    const { activeContainer: e } = M(), a = w(
-      () => e.component.value ?? fe
+    const { activeContainer: e } = I(), i = w(
+      () => e.component.value ?? pe
     );
-    return (u, c) => (R(), ce(ve(a.value)));
+    return (u, c) => (R(), ce(ve(i.value)));
   }
-}), me = "data-dnd-draggable", pe = (t) => {
+}), Ie = /* @__PURE__ */ N({
+  __name: "DnDContext",
+  setup(t) {
+    const e = p(null);
+    return (i, u) => (R(), $("div", {
+      ref_key: "contextRef",
+      ref: e
+    }, [
+      de(i.$slots, "default"),
+      ge(ye)
+    ], 512));
+  }
+}), Ee = "data-dnd-draggable", Pe = (t) => {
   const {
     elements: e,
-    draggingElements: a,
+    draggingElements: i,
     hovered: u,
     selectedElements: c,
     isDragging: n
-  } = M(), i = p(null), h = w(
+  } = I(), s = p(null), h = w(
     () => {
       var m;
-      return ((m = u.element.value) == null ? void 0 : m.node) === i.value;
+      return ((m = u.element.value) == null ? void 0 : m.node) === s.value;
     }
   ), f = w(
-    () => a.value.some((m) => m.node === i.value)
+    () => i.value.some((m) => m.node === s.value)
   ), y = w(() => {
-    if (!i.value || !n.value) return !1;
+    if (!s.value || !n.value) return !1;
     const m = e.value.find(
-      (D) => D.node === i.value
+      (D) => D.node === s.value
     );
-    return m != null && m.groups.length ? !a.value.some((D) => D.groups.length ? !D.groups.some(
+    return m != null && m.groups.length ? !i.value.some((D) => D.groups.length ? !D.groups.some(
       (r) => m.groups.includes(r)
     ) : !1) : !0;
   });
   return {
-    elementRef: i,
+    elementRef: s,
     registerElement: () => {
-      if (!i.value) throw new Error("ElementRef is not set");
+      if (!s.value) throw new Error("ElementRef is not set");
       e.value.push({
-        node: i.value,
+        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
-      }), i.value.setAttribute(me, "true");
+      }), s.value.setAttribute(Ee, "true");
     },
     unregisterElement: () => {
       const m = e.value.findIndex(
-        (r) => r.node === i.value
+        (r) => r.node === s.value
       );
       m !== -1 && e.value.splice(m, 1);
       const D = c.value.findIndex(
-        (r) => r.node === i.value
+        (r) => r.node === s.value
       );
       D !== -1 && c.value.splice(D, 1);
     },
@@ -144,20 +156,20 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     isOvered: h,
     isAllowed: y
   };
-}, ye = () => {
-  let t = "", e = "", a = "";
+}, we = () => {
+  let t = "", e = "", i = "";
   const u = () => {
-    const i = document.body;
-    t = i.style.userSelect, e = i.style.touchAction, a = i.style.overscrollBehavior, i.style.userSelect = "none", i.style.touchAction = "none", i.style.overscrollBehavior = "none", window.addEventListener("contextmenu", n), window.addEventListener("selectstart", n), window.addEventListener("touchstart", n), window.addEventListener("touchmove", n);
+    const s = document.body;
+    t = s.style.userSelect, e = s.style.touchAction, i = s.style.overscrollBehavior, s.style.userSelect = "none", s.style.touchAction = "none", s.style.overscrollBehavior = "none", window.addEventListener("contextmenu", n), window.addEventListener("selectstart", n), window.addEventListener("touchstart", n), window.addEventListener("touchmove", n);
   }, c = () => {
-    const i = document.body;
-    i.style.userSelect = t, i.style.touchAction = e, i.style.overscrollBehavior = a, window.removeEventListener("contextmenu", n), window.removeEventListener("selectstart", n), window.removeEventListener("touchstart", n), window.removeEventListener("touchmove", n);
-  }, n = (i) => i.preventDefault();
+    const s = document.body;
+    s.style.userSelect = t, s.style.touchAction = e, s.style.overscrollBehavior = i, window.removeEventListener("contextmenu", n), window.removeEventListener("selectstart", n), window.removeEventListener("touchstart", n), window.removeEventListener("touchmove", n);
+  }, n = (s) => s.preventDefault();
   return {
     disableInteractions: u,
     enableInteractions: c
   };
-}, ne = (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, z = (t) => {
+}, re = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, k = (t) => {
   if (!t)
     return {
       x: 0,
@@ -180,37 +192,37 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     width: e.width,
     height: e.height
   };
-}, $ = (t) => ({
+}, Y = (t) => ({
   x: t.x + t.width / 2,
   y: t.y + t.height / 2
-}), Ee = (t, e) => {
-  const a = z(t);
+}), xe = (t, e) => {
+  const i = k(t);
   return {
     pixel: {
-      x: e.x - a.x,
-      y: e.y - a.y
+      x: e.x - i.x,
+      y: e.y - i.y
     },
     percent: {
-      x: (e.x - a.x) / a.width * 100,
-      y: (e.y - a.y) / a.height * 100
+      x: (e.x - i.x) / i.width * 100,
+      y: (e.y - i.y) / i.height * 100
     }
   };
-}, re = (t, e) => {
-  const a = e.x - t.x, u = e.y - t.y;
-  return Math.sqrt(a * a + u * u);
-}, C = (t, e) => t ? e.contains(t) : !1, Pe = (t) => {
-  const e = M();
+}, oe = (t, e) => {
+  const i = e.x - t.x, u = e.y - t.y;
+  return Math.sqrt(i * i + u * u);
+}, _ = (t, e) => t ? e.contains(t) : !1, De = (t) => {
+  const e = I();
   return {
     onPointerStart: (n) => {
       e.pointerPosition.start.value = { x: n.clientX, y: n.clientY }, e.pointerPosition.current.value = {
         x: n.clientX,
         y: n.clientY
       };
-      const { pixel: i, percent: h } = Ee(t.value, {
+      const { pixel: s, percent: h } = xe(t.value, {
         x: n.clientX,
         y: n.clientY
       });
-      e.pointerPosition.offset.pixel.value = i, e.pointerPosition.offset.percent.value = h;
+      e.pointerPosition.offset.pixel.value = s, e.pointerPosition.offset.percent.value = h;
     },
     onPointerMove: (n) => {
       e.pointerPosition.current.value = {
@@ -222,20 +234,20 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
     }
   };
-}, we = (t) => {
-  const e = M(), { onPointerStart: a, onPointerMove: u, onPointerEnd: c } = Pe(t);
+}, Ce = (t) => {
+  const e = I(), { onPointerStart: i, onPointerMove: u, onPointerEnd: c } = De(t);
   let n = null;
-  const i = (r) => {
-    var v, L;
+  const s = (r) => {
+    var v, C;
     const d = e.selectedElements.value.some(
       (P) => P.node === r
     );
     if (e.selectedElements.value.length && d)
       return e.selectedElements.value.map((P) => {
-        var S, T;
+        var M, T;
         return {
           ...P,
-          initialHTML: ((S = P.node) == null ? void 0 : S.outerHTML) ?? "",
+          initialHTML: ((M = P.node) == null ? void 0 : M.outerHTML) ?? "",
           initialRect: (T = P.node) == null ? void 0 : T.getBoundingClientRect()
         };
       });
@@ -247,7 +259,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       {
         ...g,
         initialHTML: ((v = g.node) == null ? void 0 : v.outerHTML) ?? "",
-        initialRect: (L = g.node) == null ? void 0 : L.getBoundingClientRect()
+        initialRect: (C = g.node) == null ? void 0 : C.getBoundingClientRect()
       }
     ] : [];
   }, h = (r, d) => {
@@ -257,71 +269,71 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     ), v = Math.max(
       0,
       Math.min(r.y + r.height, d.y + d.height) - Math.max(r.y, d.y)
-    ), L = g * v, P = r.width * r.height, S = d.width * d.height;
-    return (L / P * 100 + L / S * 100) / 2;
+    ), C = g * v, P = r.width * r.height, M = d.width * d.height;
+    return (C / P * 100 + C / M * 100) / 2;
   }, f = () => {
-    var q, N, B, V, j, G, J, K, Q, W;
-    const r = z(e.activeContainer.ref.value), d = $(r), g = ((q = e.pointerPosition.current.value) == null ? void 0 : q.x) ?? 0, v = ((N = e.pointerPosition.current.value) == null ? void 0 : N.y) ?? 0, P = !(r && g >= r.x && g <= r.x + r.width && v >= r.y && v <= r.y + r.height), S = e.draggingElements.value.map((o) => o.node), T = e.elements.value.filter((o) => {
-      if (!o.node || S.some(
-        (x) => x && C(o.node, x)
+    var q, V, B, j, G, J, K, Q, W, b;
+    const r = k(e.activeContainer.ref.value), d = Y(r), g = ((q = e.pointerPosition.current.value) == null ? void 0 : q.x) ?? 0, v = ((V = e.pointerPosition.current.value) == null ? void 0 : V.y) ?? 0, P = !(r && g >= r.x && g <= r.x + r.width && v >= r.y && v <= r.y + r.height), M = e.draggingElements.value.map((o) => o.node), T = e.elements.value.filter((o) => {
+      if (!o.node || M.some(
+        (x) => x && _(o.node, x)
       ) || o.groups.length && !!e.draggingElements.value.some(
-        (I) => I.groups.length ? !I.groups.some(
-          (_) => o.groups.includes(_)
+        (L) => L.groups.length ? !L.groups.some(
+          (S) => o.groups.includes(S)
         ) : !1
       ))
         return !1;
-      const s = z(o.node);
-      return s && r && ne(s, r);
+      const a = k(o.node);
+      return a && r && re(a, r);
     }).map((o) => {
-      const s = z(o.node), x = $(s), I = g >= s.x && g <= s.x + s.width && v >= s.y && v <= s.y + s.height, _ = h(s, r), Z = re(d, x), A = e.elements.value.filter(
-        (O) => O !== o && O.node && o.node && C(
+      const a = k(o.node), x = Y(a), L = g >= a.x && g <= a.x + a.width && v >= a.y && v <= a.y + a.height, S = h(a, r), Z = oe(d, x), A = e.elements.value.filter(
+        (O) => O !== o && O.node && o.node && _(
           o.node,
           O.node
         )
       ).length;
       return {
         element: o,
-        isPointerInElement: I,
-        overlapPercent: _,
+        isPointerInElement: L,
+        overlapPercent: S,
         depth: A,
         centerDistance: Z
       };
-    }).sort((o, s) => {
+    }).sort((o, a) => {
       if (!P) {
-        if (o.isPointerInElement && s.isPointerInElement)
-          return s.depth - o.depth;
-        if (o.isPointerInElement !== s.isPointerInElement)
+        if (o.isPointerInElement && a.isPointerInElement)
+          return a.depth - o.depth;
+        if (o.isPointerInElement !== a.isPointerInElement)
           return o.isPointerInElement ? -1 : 1;
       }
-      return Math.abs(o.overlapPercent - s.overlapPercent) <= 1 ? o.centerDistance - s.centerDistance : s.overlapPercent - o.overlapPercent;
+      return Math.abs(o.overlapPercent - a.overlapPercent) <= 1 ? o.centerDistance - a.centerDistance : a.overlapPercent - o.overlapPercent;
     }), le = e.zones.value.filter((o) => {
-      if (!o.node || S.some(
-        (x) => x && C(o.node, x)
-      ) || o.groups.length && !!e.draggingElements.value.some((I) => I.groups.length ? !I.groups.some((_) => o.groups.includes(_)) : !1))
+      if (!o.node || M.some(
+        (x) => x && _(o.node, x)
+      ) || o.groups.length && !!e.draggingElements.value.some((L) => L.groups.length ? !L.groups.some((S) => o.groups.includes(S)) : !1))
         return !1;
-      const s = z(o.node);
-      return s && r && ne(s, r);
+      const a = k(o.node);
+      return a && r && re(a, r);
     }).map((o) => {
-      const s = z(o.node), x = $(s), I = g >= s.x && g <= s.x + s.width && v >= s.y && v <= s.y + s.height, _ = h(s, r), Z = re(d, x), A = e.zones.value.filter(
-        (O) => O !== o && O.node && o.node && C(o.node, O.node)
+      const a = k(o.node), x = Y(a), L = g >= a.x && g <= a.x + a.width && v >= a.y && v <= a.y + a.height, S = h(a, r), Z = oe(d, x), A = e.zones.value.filter(
+        (O) => O !== o && O.node && o.node && _(o.node, O.node)
       ).length;
       return {
         zone: o,
-        isPointerInElement: I,
-        overlapPercent: _,
+        isPointerInElement: L,
+        overlapPercent: S,
         depth: A,
         centerDistance: Z
       };
-    }).sort((o, s) => {
+    }).sort((o, a) => {
       if (!P) {
-        if (o.isPointerInElement && s.isPointerInElement)
-          return s.depth - o.depth;
-        if (o.isPointerInElement !== s.isPointerInElement)
+        if (o.isPointerInElement && a.isPointerInElement)
+          return a.depth - o.depth;
+        if (o.isPointerInElement !== a.isPointerInElement)
           return o.isPointerInElement ? -1 : 1;
       }
-      return Math.abs(o.overlapPercent - s.overlapPercent) <= 1 ? o.centerDistance - s.centerDistance : s.overlapPercent - o.overlapPercent;
-    }), k = e.hovered.element.value, H = e.hovered.zone.value;
-    e.hovered.element.value = ((B = T[0]) == null ? void 0 : B.element) ?? null, e.hovered.zone.value = ((V = le[0]) == null ? void 0 : V.zone) ?? null, e.hovered.element.value !== k && ((j = k == null ? void 0 : k.events) != null && j.onLeave && k.events.onLeave(e), (J = (G = e.hovered.element.value) == null ? void 0 : G.events) != null && J.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== H && ((K = H == null ? void 0 : H.events) != null && K.onLeave && H.events.onLeave(e), (W = (Q = e.hovered.zone.value) == null ? void 0 : Q.events) != null && W.onHover && e.hovered.zone.value.events.onHover(e)), n = requestAnimationFrame(f);
+      return Math.abs(o.overlapPercent - a.overlapPercent) <= 1 ? o.centerDistance - a.centerDistance : a.overlapPercent - o.overlapPercent;
+    }), z = e.hovered.element.value, H = e.hovered.zone.value;
+    e.hovered.element.value = ((B = T[0]) == null ? void 0 : B.element) ?? null, e.hovered.zone.value = ((j = le[0]) == null ? void 0 : j.zone) ?? null, e.hovered.element.value !== z && ((G = z == null ? void 0 : z.events) != null && G.onLeave && z.events.onLeave(e), (K = (J = e.hovered.element.value) == null ? void 0 : J.events) != null && K.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== H && ((Q = H == null ? void 0 : H.events) != null && Q.onLeave && H.events.onLeave(e), (b = (W = e.hovered.zone.value) == null ? void 0 : W.events) != null && b.onHover && e.hovered.zone.value.events.onHover(e)), n = requestAnimationFrame(f);
   }, y = () => {
     f();
   }, l = () => {
@@ -329,7 +341,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   };
   return {
     activate: (r) => {
-      e.draggingElements.value = i(t.value), a(r), y();
+      e.draggingElements.value = s(t.value), i(r), y();
     },
     track: (r) => {
       u(r);
@@ -338,22 +350,22 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       var r, d;
       c(), e.hovered.zone.value ? (d = (r = e.hovered.zone.value.events).onDrop) == null || d.call(r, e) : e.draggingElements.value.forEach(
         (g) => {
-          var v, L;
-          return (L = (v = g.events).onEnd) == null ? void 0 : L.call(v, e);
+          var v, C;
+          return (C = (v = g.events).onEnd) == null ? void 0 : C.call(v, e);
         }
       ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, l();
     }
   };
-}, Ie = (t) => {
+}, Me = (t) => {
   const {
     elementRef: e,
-    registerElement: a,
+    registerElement: i,
     unregisterElement: u,
     isDragging: c,
     isOvered: n,
-    isAllowed: i
-  } = pe(t), { disableInteractions: h, enableInteractions: f } = ye(), y = M(), { activate: l, track: E, deactivate: m } = we(e), D = (v) => {
-    t != null && t.container && (y.activeContainer.component.value = de(t.container)), h(), l(v), document.addEventListener("pointermove", r), document.addEventListener("pointerup", g), document.addEventListener("wheel", d);
+    isAllowed: s
+  } = Pe(t), { disableInteractions: h, enableInteractions: f } = we(), y = I(), { activate: l, track: E, deactivate: m } = Ce(e), D = (v) => {
+    t != null && t.container && (y.activeContainer.component.value = he(t.container)), h(), l(v), document.addEventListener("pointermove", r), document.addEventListener("pointerup", g), document.addEventListener("wheel", d);
   }, r = (v) => {
     E(v);
   }, d = (v) => {
@@ -361,18 +373,18 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   }, g = () => {
     y.activeContainer.component.value = null, f(), m(), document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", g), document.removeEventListener("wheel", d);
   };
-  return F(a), U(u), {
+  return F(i), U(u), {
     pointerPosition: y.pointerPosition,
     elementRef: e,
     isDragging: c,
     isOvered: n,
-    isAllowed: i,
+    isAllowed: s,
     handleDragStart: D
   };
-}, xe = (t) => {
-  const { zones: e, hovered: a, draggingElements: u, isDragging: c } = M(), n = p(null), i = w(() => {
+}, Le = (t) => {
+  const { zones: e, hovered: i, draggingElements: u, isDragging: c } = I(), n = p(null), s = w(() => {
     var l;
-    return ((l = a.zone.value) == null ? void 0 : l.node) === n.value;
+    return ((l = i.zone.value) == null ? void 0 : l.node) === n.value;
   }), h = w(() => {
     if (!n.value || !c.value) return !1;
     const l = e.value.find(
@@ -396,22 +408,22 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       (E) => E.node === n.value
     );
     l !== -1 && e.value.splice(l, 1);
-  }, isOvered: i, isAllowed: h };
-}, Ce = (t) => {
-  const { elementRef: e, registerZone: a, unregisterZone: u, isOvered: c, isAllowed: n } = xe(t);
-  return F(a), U(u), { elementRef: e, isOvered: c, isAllowed: n };
-}, Me = (t) => {
-  const { selectedElements: e, elements: a } = M(), u = w(
-    () => a.value.find((l) => l.node === t.value)
+  }, isOvered: s, isAllowed: h };
+}, Se = (t) => {
+  const { elementRef: e, registerZone: i, unregisterZone: u, isOvered: c, isAllowed: n } = Le(t);
+  return F(i), U(u), { elementRef: e, isOvered: c, isAllowed: n };
+}, Oe = (t) => {
+  const { selectedElements: e, elements: i } = I(), u = w(
+    () => i.value.find((l) => l.node === t.value)
   ), c = w(
     () => e.value.some((l) => l.node === t.value)
   ), n = w(() => t.value ? e.value.some(
-    (l) => l.node && C(
+    (l) => l.node && _(
       l.node,
       t.value
     )
-  ) : !1), i = w(() => t.value ? e.value.some(
-    (l) => l.node && C(
+  ) : !1), s = w(() => t.value ? e.value.some(
+    (l) => l.node && _(
       t.value,
       l.node
     )
@@ -421,12 +433,12 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     ));
   }, f = () => {
     u.value && (n.value && (e.value = e.value.filter(
-      (l) => l.node && !C(
+      (l) => l.node && !_(
         l.node,
         t.value
       )
-    )), i.value && (e.value = e.value.filter(
-      (l) => l.node && !C(
+    )), s.value && (e.value = e.value.filter(
+      (l) => l.node && !_(
         t.value,
         l.node
       )
@@ -443,10 +455,11 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   };
 };
 export {
-  Le as DragOverlay,
-  z as getBoundingBox,
-  M as useDnDStore,
-  Ie as useDraggable,
-  Ce as useDroppable,
-  Me as useSelection
+  Ie as DnDContext,
+  ye as DragOverlay,
+  k as getBoundingBox,
+  I as useDnDStore,
+  Me as useDraggable,
+  Se as useDroppable,
+  Oe as useSelection
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "0.0.23",
+  "version": "0.0.25-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",