@vue-dnd-kit/core 0.1.4-beta → 0.1.5-beta

package/dist/composables/useDnDStore.d.ts

@@ -1,5 +1,6 @@
 import { IDragElement, IDraggingElement, IDropZone, IPoint } from "../types";
 import { Component } from 'vue';
+import { MaybeElement } from '@vueuse/core';
 export declare const useDnDStore: () => {
     isDragging: import('vue').ComputedRef<boolean>;
     activeContainer: {
@@ -478,7 +479,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -726,7 +727,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -987,7 +988,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1247,7 +1248,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1496,7 +1497,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1744,7 +1745,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2033,7 +2034,7 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            isVisible?: any;
+            isVisible?: boolean | undefined;
             data: any;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2281,7 +2282,7 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            isVisible?: any;
+            isVisible?: boolean | undefined;
             data: any;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2322,4 +2323,6 @@ export declare const useDnDStore: () => {
             } | null>;
         };
     };
+    elementNodeMap: import('vue').ComputedRef<Map<MaybeElement, number>>;
+    cleanup: () => void;
 };

package/dist/composables/useDragContainer.d.ts

@@ -320,7 +320,7 @@ export declare const useDragContainer: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('..').IDnDStore) => void) | undefined;
@@ -580,7 +580,7 @@ export declare const useDragContainer: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible?: any;
+        isVisible?: boolean | undefined;
         data: any;
         events: {
             onHover?: ((store: import('..').IDnDStore) => void) | undefined;

package/dist/composables/useDraggable.d.ts

@@ -37,5 +37,4 @@ export declare const useDraggable: (options?: IUseDragOptions) => {
     isOvered: import('vue').ComputedRef<boolean>;
     isAllowed: import('vue').ComputedRef<boolean>;
     handleDragStart: (event: PointerEvent) => void;
-    isVisible: import('vue').ShallowRef<boolean, boolean>;
 };

package/dist/managers/useElementManager.d.ts

@@ -14,5 +14,4 @@ export declare const useElementManager: (options?: IUseDragOptions) => {
     isDragging: import('vue').ComputedRef<boolean>;
     isOvered: import('vue').ComputedRef<boolean>;
     isAllowed: import('vue').ComputedRef<boolean>;
-    isVisible: import('vue').ShallowRef<boolean, boolean>;
 };

package/dist/types/index.d.ts

@@ -58,7 +58,7 @@ export interface IDragElement {
   /** Default layer component */
   defaultLayer: Component | null;
   /** Visibility state of the element */
-  isVisible?: any;
+  isVisible?: boolean;
   /** Custom data associated with element */
   data: any;
   /** Event handlers */

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

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

@@ -1,190 +1,196 @@
-import { effectScope as me, watch as ve, nextTick as he, isRef as pe, getCurrentScope as ye, onScopeDispose as Ee, toValue as U, shallowRef as W, computed as D, getCurrentInstance as we, onMounted as Y, ref as P, onBeforeUnmount as X, defineComponent as de, createElementBlock as Z, createCommentVNode as Pe, unref as oe, openBlock as H, normalizeStyle as le, Fragment as De, renderList as _e, createBlock as xe, resolveDynamicComponent as Ie, createVNode as Le, render as ie, markRaw as Se } from "vue";
-function Me(t) {
-  return ye() ? (Ee(t), !0) : !1;
+import { effectScope as ge, getCurrentScope as me, onScopeDispose as he, isRef as pe, toValue as K, computed as P, shallowRef as ce, watch as ve, getCurrentInstance as Ee, onMounted as N, ref as D, onBeforeUnmount as W, defineComponent as de, createElementBlock as F, createCommentVNode as ye, 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 me() ? (he(t), !0) : !1;
 }
-function Ce(t) {
-  let e = !1, n;
-  const l = me(!0);
-  return (...u) => (e || (n = l.run(() => t(...u)), e = !0), n);
+function Se(t) {
+  let e = !1, r;
+  const o = ge(!0);
+  return (...u) => (e || (r = o.run(() => t(...u)), e = !0), r);
 }
-const Oe = typeof window < "u" && typeof document < "u";
+const Me = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Te = (t) => t != null, R = () => {
+const Ce = (t) => t != null, b = () => {
 };
-function Ve(t, e) {
-  function n(...l) {
-    return new Promise((u, r) => {
-      Promise.resolve(t(() => e.apply(this, l), { fn: e, thisArg: this, args: l })).then(u).catch(r);
+function Oe(t, e) {
+  function r(...o) {
+    return new Promise((u, n) => {
+      Promise.resolve(t(() => e.apply(this, o), { fn: e, thisArg: this, args: o })).then(u).catch(n);
     });
   }
-  return n;
+  return r;
 }
-function ke(...t) {
-  let e = 0, n, l = !0, u = R, r, i, v, d, m;
-  !pe(t[0]) && typeof t[0] == "object" ? { delay: i, trailing: v = !0, leading: d = !0, rejectOnCancel: m = !1 } = t[0] : [i, v = !0, d = !0, m = !1] = t;
-  const o = () => {
-    n && (clearTimeout(n), n = void 0, u(), u = R);
+function Te(...t) {
+  let e = 0, r, o = !0, u = b, n, s, g, v, y;
+  !pe(t[0]) && typeof t[0] == "object" ? { delay: s, trailing: g = !0, leading: v = !0, rejectOnCancel: y = !1 } = t[0] : [s, g = !0, v = !0, y = !1] = t;
+  const l = () => {
+    r && (clearTimeout(r), r = void 0, u(), u = b);
   };
-  return (_) => {
-    const p = U(i), w = Date.now() - e, s = () => r = _();
-    return o(), p <= 0 ? (e = Date.now(), s()) : (w > p && (d || !l) ? (e = Date.now(), s()) : v && (r = new Promise((g, h) => {
-      u = m ? h : g, n = setTimeout(() => {
-        e = Date.now(), l = !0, g(s()), o();
-      }, Math.max(0, p - w));
-    })), !d && !n && (n = setTimeout(() => l = !0, p)), l = !1, r);
+  return (E) => {
+    const m = K(s), w = Date.now() - e, i = () => n = E();
+    return l(), m <= 0 ? (e = Date.now(), i()) : (w > m && (v || !o) ? (e = Date.now(), i()) : g && (n = new Promise((d, f) => {
+      u = y ? f : d, r = setTimeout(() => {
+        e = Date.now(), o = !0, d(i()), l();
+      }, Math.max(0, m - w));
+    })), !v && !r && (r = setTimeout(() => o = !0, m)), o = !1, n);
   };
 }
 function Ae(t) {
   return Array.isArray(t) ? t : [t];
 }
-function be(t, e = 200, n = !1, l = !0, u = !1) {
-  return Ve(
-    ke(e, n, l, u),
+function ke(t, e = 200, r = !1, o = !0, u = !1) {
+  return Oe(
+    Te(e, r, o, u),
     t
   );
 }
-function Re(t, e, n) {
-  const l = ve(t, (...u) => (he(() => l()), e(...u)), n);
-  return l;
-}
-const fe = Oe ? window : void 0;
-function $(t) {
+const Re = Me ? window : void 0;
+function Z(t) {
   var e;
-  const n = U(t);
-  return (e = n == null ? void 0 : n.$el) != null ? e : n;
+  const r = K(t);
+  return (e = r == null ? void 0 : r.$el) != null ? e : r;
 }
-function ze() {
-  const t = W(!1), e = we();
-  return e && Y(() => {
+function Ve() {
+  const t = ce(!1), e = Ee();
+  return e && N(() => {
     t.value = !0;
   }, e), t;
 }
-function He(t) {
-  const e = ze();
-  return D(() => (e.value, !!t()));
+function be(t) {
+  const e = Ve();
+  return P(() => (e.value, !!t()));
 }
-function Ue(t, e, n = {}) {
+function ze(t, e, r = {}) {
   const {
-    root: l,
+    root: o,
     rootMargin: u = "0px",
-    threshold: r = 0,
-    window: i = fe,
-    immediate: v = !0
-  } = n, d = He(() => i && "IntersectionObserver" in i), m = D(() => {
-    const w = U(t);
-    return Ae(w).map($).filter(Te);
+    threshold: n = 0,
+    window: s = Re,
+    immediate: g = !0
+  } = r, v = be(() => s && "IntersectionObserver" in s), y = P(() => {
+    const w = K(t);
+    return Ae(w).map(Z).filter(Ce);
   });
-  let o = R;
-  const f = W(v), _ = d.value ? ve(
-    () => [m.value, $(l), f.value],
-    ([w, s]) => {
-      if (o(), !f.value || !w.length)
+  let l = b;
+  const p = ce(g), E = v.value ? ve(
+    () => [y.value, Z(o), p.value],
+    ([w, i]) => {
+      if (l(), !p.value || !w.length)
         return;
-      const g = new IntersectionObserver(
+      const d = new IntersectionObserver(
         e,
         {
-          root: $(s),
+          root: Z(i),
           rootMargin: u,
-          threshold: r
+          threshold: n
         }
       );
-      w.forEach((h) => h && g.observe(h)), o = () => {
-        g.disconnect(), o = R;
+      w.forEach((f) => f && d.observe(f)), l = () => {
+        d.disconnect(), l = b;
       };
     },
-    { immediate: v, flush: "post" }
-  ) : R, p = () => {
-    o(), _(), f.value = !1;
+    { immediate: g, flush: "post" }
+  ) : b, m = () => {
+    l(), E(), p.value = !1;
   };
-  return Me(p), {
-    isSupported: d,
-    isActive: f,
+  return Le(m), {
+    isSupported: v,
+    isActive: p,
     pause() {
-      o(), f.value = !1;
+      l(), p.value = !1;
     },
     resume() {
-      f.value = !0;
+      p.value = !0;
     },
-    stop: p
+    stop: m
   };
 }
-function Ye(t, e = {}) {
-  const {
-    window: n = fe,
-    scrollTarget: l,
-    threshold: u = 0,
-    rootMargin: r,
-    once: i = !1
-  } = e, v = W(!1), { stop: d } = Ue(
-    t,
+const C = Se(() => {
+  const t = D([]), e = P(() => t.value.length > 0), r = {
+    component: D(null),
+    ref: D(null)
+  }, o = D([]), u = P(() => {
+    const m = /* @__PURE__ */ new Map();
+    return o.value.forEach((w, i) => {
+      w.node && m.set(w.node, i);
+    }), m;
+  }), n = D(/* @__PURE__ */ new Set()), s = P(
+    () => Array.from(n.value).sort((m, w) => m - w)
+  ), g = P(
+    () => o.value.filter((m) => m.node).map((m) => m.node)
+  );
+  ve(
+    () => g.value.length,
     (m) => {
-      let o = v.value, f = 0;
-      for (const _ of m)
-        _.time >= f && (f = _.time, o = _.isIntersecting);
-      v.value = o, i && Re(v, () => {
-        d();
-      });
+      if (m === 0) return;
+      v && (v(), v = null);
+      const { stop: w } = ze(
+        g,
+        (i) => {
+          let d = !1;
+          i.forEach((f) => {
+            const h = f.target, _ = u.value.get(h);
+            _ !== void 0 && o.value[_].isVisible !== f.isIntersecting && (o.value[_].isVisible = f.isIntersecting, d = !0, f.isIntersecting ? n.value.add(_) : n.value.delete(_));
+          }), d && (n.value = new Set(n.value));
+        },
+        {
+          threshold: 0.1,
+          // Элемент считается видимым, если видно хотя бы 10%
+          immediate: !0
+        }
+      );
+      v = w;
     },
-    {
-      root: l,
-      window: n,
-      threshold: u,
-      rootMargin: U(r)
-    }
+    { immediate: !0 }
   );
-  return v;
-}
-const C = Ce(() => {
-  const t = P([]), e = D(() => t.value.length > 0), n = {
-    component: P(null),
-    ref: P(null)
-  }, l = P([]), u = D(
-    () => l.value.map((m, o) => {
-      var f;
-      if ((f = m.isVisible) != null && f.value || m.isVisible && o)
-        return o;
-    }).filter((m) => m !== void 0)
-  ), r = P([]), i = P([]), v = {
-    zone: P(null),
-    element: P(null)
-  }, d = {
-    current: P(null),
-    start: P(null),
+  let v = null;
+  const y = D([]), l = D([]), p = {
+    zone: D(null),
+    element: D(null)
+  }, E = {
+    current: D(null),
+    start: D(null),
     offset: {
-      percent: P(null),
-      pixel: P(null)
+      percent: D(null),
+      pixel: D(null)
     }
   };
   return {
     isDragging: e,
-    activeContainer: n,
-    elements: l,
+    activeContainer: r,
+    elements: o,
     draggingElements: t,
-    selectedElements: r,
-    zones: i,
-    visibleElements: u,
-    hovered: v,
-    pointerPosition: d
+    selectedElements: y,
+    zones: l,
+    visibleElements: s,
+    // Теперь это computed свойство
+    hovered: p,
+    pointerPosition: E,
+    // Экспортируем Map для быстрого доступа
+    elementNodeMap: u,
+    // Добавляем метод для очистки ресурсов
+    cleanup: () => {
+      v && (v(), v = null);
+    }
   };
-}), Ne = () => {
-  const t = P(null), { draggingElements: e, pointerPosition: n, isDragging: l, activeContainer: u } = C();
-  return Y(() => {
+}), He = () => {
+  const t = D(null), { draggingElements: e, pointerPosition: r, isDragging: o, activeContainer: u } = C();
+  return N(() => {
     u.ref = t;
-  }), X(() => {
+  }), W(() => {
     u.ref.value = null;
   }), {
     elementRef: t,
     draggingElements: e,
-    pointerPosition: n,
-    isDragging: l
+    pointerPosition: r,
+    isDragging: o
   };
-}, Fe = ["innerHTML"], Ze = /* @__PURE__ */ de({
+}, Ne = ["innerHTML"], Ue = /* @__PURE__ */ de({
   __name: "DefaultOverlay",
   setup(t) {
-    const { elementRef: e, pointerPosition: n, isDragging: l, draggingElements: u } = Ne(), r = D(() => {
-      var i, v, d, m;
+    const { elementRef: e, pointerPosition: r, isDragging: o, draggingElements: u } = He(), n = P(() => {
+      var s, g, v, y;
       return {
-        transform: `translate3d(${(((i = n.current.value) == null ? void 0 : i.x) ?? 0) - (((v = n.offset.pixel.value) == null ? void 0 : v.x) ?? 0)}px, ${(((d = n.current.value) == null ? void 0 : d.y) ?? 0) - (((m = n.offset.pixel.value) == null ? void 0 : m.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((s = r.current.value) == null ? void 0 : s.x) ?? 0) - (((g = r.offset.pixel.value) == null ? void 0 : g.x) ?? 0)}px, ${(((v = r.current.value) == null ? void 0 : v.y) ?? 0) - (((y = r.offset.pixel.value) == null ? void 0 : y.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -192,123 +198,122 @@ const C = Ce(() => {
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (i, v) => oe(l) ? (H(), Z("div", {
+    return (s, g) => re(o) ? (H(), F("div", {
       key: 0,
       ref_key: "elementRef",
       ref: e,
-      style: le(r.value)
+      style: oe(n.value)
     }, [
-      (H(!0), Z(De, null, _e(oe(u), (d, m) => {
-        var o, f;
-        return H(), Z("div", {
-          key: m,
-          innerHTML: d.initialHTML,
-          style: le({
-            width: `${(o = d.initialRect) == null ? void 0 : o.width}px`,
-            height: `${(f = d.initialRect) == null ? void 0 : f.height}px`
+      (H(!0), F(we, null, Pe(re(u), (v, y) => {
+        var l, p;
+        return H(), F("div", {
+          key: y,
+          innerHTML: v.initialHTML,
+          style: oe({
+            width: `${(l = v.initialRect) == null ? void 0 : l.width}px`,
+            height: `${(p = v.initialRect) == null ? void 0 : p.height}px`
           })
-        }, null, 12, Fe);
+        }, null, 12, Ne);
       }), 128))
-    ], 4)) : Pe("", !0);
+    ], 4)) : ye("", !0);
   }
-}), se = /* @__PURE__ */ de({
+}), ie = /* @__PURE__ */ de({
   __name: "DragOverlay",
   setup(t) {
-    const { activeContainer: e } = C(), n = D(
-      () => e.component.value ?? Ze
+    const { activeContainer: e } = C(), r = P(
+      () => e.component.value ?? Ue
     );
-    return (l, u) => (H(), xe(Ie(n.value)));
+    return (o, u) => (H(), De(_e(r.value)));
   }
-}), Be = {
+}), qe = {
   install(t) {
-    t.component("DragOverlay", se);
+    t.component("DragOverlay", ie);
     const e = t.mount;
-    t.mount = function(l) {
-      const u = e.call(this, l), r = typeof l == "string" ? document.querySelector(l) : l;
-      if (r && r instanceof Element && !r.querySelector("#vue-dnd-kit-overlay")) {
-        const i = document.createElement("div");
-        i.id = "vue-dnd-kit-overlay", i.style.pointerEvents = "none", r.appendChild(i);
-        const v = Le(se);
-        ie(v, i), t.__VUE_DND_KIT_OVERLAY__ = {
-          container: i,
-          vnode: v
+    t.mount = function(o) {
+      const u = e.call(this, o), n = typeof o == "string" ? document.querySelector(o) : o;
+      if (n && n instanceof Element && !n.querySelector("#vue-dnd-kit-overlay")) {
+        const s = document.createElement("div");
+        s.id = "vue-dnd-kit-overlay", s.style.pointerEvents = "none", n.appendChild(s);
+        const g = xe(ie);
+        le(g, s), t.__VUE_DND_KIT_OVERLAY__ = {
+          container: s,
+          vnode: g
         };
       }
       return u;
     };
-    const n = t.unmount;
+    const r = t.unmount;
     t.unmount = function() {
-      return t.__VUE_DND_KIT_OVERLAY__ && (ie(null, t.__VUE_DND_KIT_OVERLAY__.container), delete t.__VUE_DND_KIT_OVERLAY__), n.call(this);
+      return t.__VUE_DND_KIT_OVERLAY__ && (le(null, t.__VUE_DND_KIT_OVERLAY__.container), delete t.__VUE_DND_KIT_OVERLAY__), r.call(this);
     };
   }
-}, ae = "data-vue-dnd-kit-draggable", I = (t) => {
+}, se = "data-vue-dnd-kit-draggable", I = (t) => {
   t.preventDefault();
-}, $e = (t) => {
+}, Ye = (t) => {
   const {
     elements: e,
-    draggingElements: n,
-    hovered: l,
+    draggingElements: r,
+    hovered: o,
     selectedElements: u,
-    isDragging: r
-  } = C(), i = P(null), v = D(
+    isDragging: n
+  } = C(), s = D(null), g = P(
     () => {
-      var p;
-      return ((p = l.element.value) == null ? void 0 : p.node) === i.value;
+      var E;
+      return ((E = o.element.value) == null ? void 0 : E.node) === s.value;
     }
-  ), d = Ye(i), m = D(
-    () => n.value.some((p) => p.node === i.value)
-  ), o = D(() => {
-    if (!i.value || !r.value) return !1;
-    const p = e.value.find(
-      (w) => w.node === i.value
+  ), v = P(
+    () => r.value.some((E) => E.node === s.value)
+  ), y = P(() => {
+    if (!s.value || !n.value) return !1;
+    const E = e.value.find(
+      (m) => m.node === s.value
     );
-    return p != null && p.groups.length ? !n.value.some((w) => w.groups.length ? !w.groups.some(
-      (s) => p.groups.includes(s)
+    return E != null && E.groups.length ? !r.value.some((m) => m.groups.length ? !m.groups.some(
+      (w) => E.groups.includes(w)
     ) : !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,
-        isVisible: d
-      }), i.value.addEventListener("dragstart", I), i.value.addEventListener("drag", I), i.value.setAttribute(ae, "true"), i.value.setAttribute("draggable", "false");
+        isVisible: !1
+      }), s.value.addEventListener("dragstart", I), s.value.addEventListener("drag", I), s.value.setAttribute(se, "true"), s.value.setAttribute("draggable", "false");
     },
     unregisterElement: () => {
-      var s, g, h, y;
-      const p = e.value.findIndex(
-        (E) => E.node === i.value
+      var w, i, d, f;
+      const E = e.value.findIndex(
+        (h) => h.node === s.value
       );
-      p !== -1 && e.value.splice(p, 1);
-      const w = u.value.findIndex(
-        (E) => E.node === i.value
+      E !== -1 && e.value.splice(E, 1);
+      const m = u.value.findIndex(
+        (h) => h.node === s.value
       );
-      w !== -1 && u.value.splice(w, 1), (s = i.value) == null || s.removeEventListener("dragstart", I), (g = i.value) == null || g.removeEventListener("drag", I), (h = i.value) == null || h.removeAttribute(ae), (y = i.value) == null || y.removeAttribute("draggable");
+      m !== -1 && u.value.splice(m, 1), (w = s.value) == null || w.removeEventListener("dragstart", I), (i = s.value) == null || i.removeEventListener("drag", I), (d = s.value) == null || d.removeAttribute(se), (f = s.value) == null || f.removeAttribute("draggable");
     },
-    isDragging: m,
-    isOvered: v,
-    isAllowed: o,
-    isVisible: d
+    isDragging: v,
+    isOvered: g,
+    isAllowed: y
   };
-}, Ke = () => {
-  let t = "", e = "", n = "";
+}, Fe = () => {
+  let t = "", e = "", r = "";
   return {
     disableInteractions: () => {
-      const r = document.body;
-      t = r.style.userSelect, e = r.style.touchAction, n = r.style.overscrollBehavior, r.style.userSelect = "none", r.style.touchAction = "none", r.style.overscrollBehavior = "none", window.addEventListener("contextmenu", I), window.addEventListener("selectstart", I), window.addEventListener("touchstart", I), window.addEventListener("touchmove", I);
+      const n = document.body;
+      t = n.style.userSelect, e = n.style.touchAction, r = n.style.overscrollBehavior, n.style.userSelect = "none", n.style.touchAction = "none", n.style.overscrollBehavior = "none", window.addEventListener("contextmenu", I), window.addEventListener("selectstart", I), window.addEventListener("touchstart", I), window.addEventListener("touchmove", I);
     },
     enableInteractions: () => {
-      const r = document.body;
-      r.style.userSelect = t, r.style.touchAction = e, r.style.overscrollBehavior = n, window.removeEventListener("contextmenu", I), window.removeEventListener("selectstart", I), window.removeEventListener("touchstart", I), window.removeEventListener("touchmove", I);
+      const n = document.body;
+      n.style.userSelect = t, n.style.touchAction = e, n.style.overscrollBehavior = r, window.removeEventListener("contextmenu", I), window.removeEventListener("selectstart", I), window.removeEventListener("touchstart", I), window.removeEventListener("touchmove", I);
     }
   };
-}, ue = (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) => {
+}, ae = (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,
@@ -331,57 +336,57 @@ const C = Ce(() => {
     width: e.width,
     height: e.height
   };
-}, K = (t) => ({
+}, $ = (t) => ({
   x: t.x + t.width / 2,
   y: t.y + t.height / 2
-}), We = (t, e) => {
-  const n = k(t);
+}), Ze = (t, e) => {
+  const r = k(t);
   return {
     pixel: {
-      x: e.x - n.x,
-      y: e.y - n.y
+      x: e.x - r.x,
+      y: e.y - r.y
     },
     percent: {
-      x: (e.x - n.x) / n.width * 100,
-      y: (e.y - n.y) / n.height * 100
+      x: (e.x - r.x) / r.width * 100,
+      y: (e.y - r.y) / r.height * 100
     }
   };
-}, ce = (t, e) => {
-  const n = e.x - t.x, l = e.y - t.y;
-  return Math.sqrt(n * n + l * l);
-}, M = (t, e) => t ? e.contains(t) : !1, Xe = (t) => {
+}, ue = (t, e) => {
+  const r = e.x - t.x, o = e.y - t.y;
+  return Math.sqrt(r * r + o * o);
+}, M = (t, e) => t ? e.contains(t) : !1, $e = (t) => {
   const e = C();
   return {
-    onPointerStart: (r) => {
-      e.pointerPosition.start.value = { x: r.clientX, y: r.clientY }, e.pointerPosition.current.value = {
-        x: r.clientX,
-        y: r.clientY
+    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: v } = We(t.value, {
-        x: r.clientX,
-        y: r.clientY
+      const { pixel: s, percent: g } = Ze(t.value, {
+        x: n.clientX,
+        y: n.clientY
       });
-      e.pointerPosition.offset.pixel.value = i, e.pointerPosition.offset.percent.value = v;
+      e.pointerPosition.offset.pixel.value = s, e.pointerPosition.offset.percent.value = g;
     },
-    onPointerMove: (r) => {
+    onPointerMove: (n) => {
       e.pointerPosition.current.value = {
-        x: r.clientX,
-        y: r.clientY
+        x: n.clientX,
+        y: n.clientY
       };
     },
     onPointerEnd: () => {
       e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
     }
   };
-}, qe = (t) => {
-  const e = C(), { onPointerStart: n, onPointerMove: l, onPointerEnd: u } = Xe(t);
-  let r = null;
-  const i = (s) => {
-    var y, E;
-    const g = e.selectedElements.value.some(
-      (x) => x.node === s
+}, Ke = (t) => {
+  const e = C(), { onPointerStart: r, onPointerMove: o, onPointerEnd: u } = $e(t);
+  let n = null;
+  const s = (i) => {
+    var h, _;
+    const d = e.selectedElements.value.some(
+      (x) => x.node === i
     );
-    if (e.selectedElements.value.length && g)
+    if (e.selectedElements.value.length && d)
       return e.selectedElements.value.map((x) => {
         var O, z;
         return {
@@ -391,28 +396,28 @@ const C = Ce(() => {
         };
       });
     e.selectedElements.value = [];
-    const h = e.elements.value.find(
-      (x) => x.node === s
+    const f = e.elements.value.find(
+      (x) => x.node === i
     );
-    return h ? [
+    return f ? [
       {
-        ...h,
-        initialHTML: ((y = h.node) == null ? void 0 : y.outerHTML) ?? "",
-        initialRect: (E = h.node) == null ? void 0 : E.getBoundingClientRect()
+        ...f,
+        initialHTML: ((h = f.node) == null ? void 0 : h.outerHTML) ?? "",
+        initialRect: (_ = f.node) == null ? void 0 : _.getBoundingClientRect()
       }
     ] : [];
-  }, v = (s, g) => {
-    const h = Math.max(
+  }, g = (i, d) => {
+    const f = Math.max(
       0,
-      Math.min(s.x + s.width, g.x + g.width) - Math.max(s.x, g.x)
-    ), y = Math.max(
+      Math.min(i.x + i.width, d.x + d.width) - Math.max(i.x, d.x)
+    ), h = Math.max(
       0,
-      Math.min(s.y + s.height, g.y + g.height) - Math.max(s.y, g.y)
-    ), E = h * y, x = s.width * s.height, O = g.width * g.height;
-    return (E / x * 100 + E / O * 100) / 2;
-  }, d = be(() => {
-    var q, j, G, B, J, Q, ee, te, ne, re;
-    const s = k(e.activeContainer.ref.value), g = K(s), h = ((q = e.pointerPosition.current.value) == null ? void 0 : q.x) ?? 0, y = ((j = e.pointerPosition.current.value) == null ? void 0 : j.y) ?? 0, x = !(s && h >= s.x && h <= s.x + s.width && y >= s.y && y <= s.y + s.height), O = e.draggingElements.value.map((a) => a.node), z = e.visibleElements.value.map((a) => e.elements.value[a]).filter((a) => {
+      Math.min(i.y + i.height, d.y + d.height) - Math.max(i.y, d.y)
+    ), _ = f * h, x = i.width * i.height, O = d.width * d.height;
+    return (_ / x * 100 + _ / O * 100) / 2;
+  }, v = ke(() => {
+    var X, q, j, G, B, J, Q, ee, te, ne;
+    const i = k(e.activeContainer.ref.value), d = $(i), f = ((X = e.pointerPosition.current.value) == null ? void 0 : X.x) ?? 0, h = ((q = e.pointerPosition.current.value) == null ? void 0 : q.y) ?? 0, x = !(i && f >= i.x && f <= i.x + i.width && h >= i.y && h <= i.y + i.height), O = e.draggingElements.value.map((a) => a.node), z = e.visibleElements.value.map((a) => e.elements.value[a]).filter((a) => {
       if (!a.node || O.some(
         (L) => L && M(a.node, L)
       ) || a.groups.length && !!e.draggingElements.value.some(
@@ -422,20 +427,20 @@ const C = Ce(() => {
       ))
         return !1;
       const c = k(a.node);
-      return c && s && ue(c, s);
+      return c && i && ae(c, i);
     }).map((a) => {
-      const c = k(a.node), L = K(c), S = h >= c.x && h <= c.x + c.width && y >= c.y && y <= c.y + c.height, T = v(c, s), N = ce(g, L), F = e.elements.value.filter(
-        (V) => V !== a && V.node && a.node && M(
+      const c = k(a.node), L = $(c), S = f >= c.x && f <= c.x + c.width && h >= c.y && h <= c.y + c.height, T = g(c, i), U = ue(d, L), Y = e.elements.value.filter(
+        (A) => A !== a && A.node && a.node && M(
           a.node,
-          V.node
+          A.node
         )
       ).length;
       return {
         element: a,
         isPointerInElement: S,
         overlapPercent: T,
-        depth: F,
-        centerDistance: N
+        depth: Y,
+        centerDistance: U
       };
     }).sort((a, c) => {
       if (!x) {
@@ -443,23 +448,23 @@ const C = Ce(() => {
         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;
-    }), ge = e.zones.value.filter((a) => {
+    }), fe = e.zones.value.filter((a) => {
       if (!a.node || O.some(
         (L) => L && M(a.node, L)
       ) || a.groups.length && !!e.draggingElements.value.some((S) => S.groups.length ? !S.groups.some((T) => a.groups.includes(T)) : !1))
         return !1;
       const c = k(a.node);
-      return c && s && ue(c, s);
+      return c && i && ae(c, i);
     }).map((a) => {
-      const c = k(a.node), L = K(c), S = h >= c.x && h <= c.x + c.width && y >= c.y && y <= c.y + c.height, T = v(c, s), N = ce(g, L), F = e.zones.value.filter(
-        (V) => V !== a && V.node && a.node && M(a.node, V.node)
+      const c = k(a.node), L = $(c), S = f >= c.x && f <= c.x + c.width && h >= c.y && h <= c.y + c.height, T = g(c, i), U = ue(d, L), Y = e.zones.value.filter(
+        (A) => A !== a && A.node && a.node && M(a.node, A.node)
       ).length;
       return {
         zone: a,
         isPointerInElement: S,
         overlapPercent: T,
-        depth: F,
-        centerDistance: N
+        depth: Y,
+        centerDistance: U
       };
     }).sort((a, c) => {
       if (!x) {
@@ -467,132 +472,130 @@ const C = Ce(() => {
         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;
-    }), A = e.hovered.element.value, b = e.hovered.zone.value;
-    e.hovered.element.value = ((G = z[0]) == null ? void 0 : G.element) ?? null, e.hovered.zone.value = ((B = ge[0]) == null ? void 0 : B.zone) ?? null, e.hovered.element.value !== A && ((J = A == null ? void 0 : A.events) != null && J.onLeave && A.events.onLeave(e), (ee = (Q = e.hovered.element.value) == null ? void 0 : Q.events) != null && ee.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== b && ((te = b == null ? void 0 : b.events) != null && te.onLeave && b.events.onLeave(e), (re = (ne = e.hovered.zone.value) == null ? void 0 : ne.events) != null && re.onHover && e.hovered.zone.value.events.onHover(e));
-  }, 1e3), m = () => {
-    d(), r = requestAnimationFrame(m);
-  }, o = () => {
-    m();
-  }, f = () => {
-    r !== null && (cancelAnimationFrame(r), r = null);
+    }), R = e.hovered.element.value, V = e.hovered.zone.value;
+    e.hovered.element.value = ((j = z[0]) == null ? void 0 : j.element) ?? null, e.hovered.zone.value = ((G = fe[0]) == null ? void 0 : G.zone) ?? null, e.hovered.element.value !== R && ((B = R == null ? void 0 : R.events) != null && B.onLeave && R.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 !== V && ((ee = V == null ? void 0 : V.events) != null && ee.onLeave && V.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), y = () => {
+    v(), n = requestAnimationFrame(y);
+  }, l = () => {
+    y();
+  }, p = () => {
+    n !== null && (cancelAnimationFrame(n), n = null);
   };
   return {
-    activate: (s) => {
-      e.draggingElements.value = i(t.value), n(s), o();
+    activate: (i) => {
+      e.draggingElements.value = s(t.value), r(i), l();
     },
-    track: (s) => {
-      l(s);
+    track: (i) => {
+      o(i);
     },
     deactivate: () => {
-      var s, g;
-      u(), e.hovered.zone.value ? (g = (s = e.hovered.zone.value.events).onDrop) == null || g.call(s, e) : e.draggingElements.value.forEach(
-        (h) => {
-          var y, E;
-          return (E = (y = h.events).onEnd) == null ? void 0 : E.call(y, e);
+      var i, d;
+      u(), e.hovered.zone.value ? (d = (i = e.hovered.zone.value.events).onDrop) == null || d.call(i, e) : e.draggingElements.value.forEach(
+        (f) => {
+          var h, _;
+          return (_ = (h = f.events).onEnd) == null ? void 0 : _.call(h, e);
         }
-      ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, f();
+      ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, p();
     }
   };
-}, Je = (t) => {
+}, je = (t) => {
   const {
     elementRef: e,
-    registerElement: n,
-    unregisterElement: l,
+    registerElement: r,
+    unregisterElement: o,
     isDragging: u,
-    isOvered: r,
-    isAllowed: i,
-    isVisible: v
-  } = $e(t), { disableInteractions: d, enableInteractions: m } = Ke(), { activeContainer: o, pointerPosition: f } = C(), { activate: _, track: p, deactivate: w } = qe(e), s = (E) => {
-    t != null && t.container && (o.component.value = Se(t.container)), d(), _(E), document.addEventListener("pointermove", g), document.addEventListener("pointerup", y), document.addEventListener("wheel", h);
-  }, g = (E) => p(E), h = (E) => p(E), y = () => {
-    o.component.value = null, m(), w(), document.removeEventListener("pointermove", g), document.removeEventListener("pointerup", y), document.removeEventListener("wheel", h);
+    isOvered: n,
+    isAllowed: s
+  } = Ye(t), { disableInteractions: g, enableInteractions: v } = Fe(), { activeContainer: y, pointerPosition: l } = C(), { activate: p, track: E, deactivate: m } = Ke(e), w = (h) => {
+    t != null && t.container && (y.component.value = Ie(t.container)), g(), p(h), document.addEventListener("pointermove", i), document.addEventListener("pointerup", f), document.addEventListener("wheel", d);
+  }, i = (h) => E(h), d = (h) => E(h), f = () => {
+    y.component.value = null, v(), m(), document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", f), document.removeEventListener("wheel", d);
   };
-  return Y(n), X(l), {
-    pointerPosition: f,
+  return N(r), W(o), {
+    pointerPosition: l,
     elementRef: e,
     isDragging: u,
-    isOvered: r,
-    isAllowed: i,
-    handleDragStart: s,
-    isVisible: v
+    isOvered: n,
+    isAllowed: s,
+    handleDragStart: w
   };
-}, je = (t) => {
-  const { zones: e, hovered: n, draggingElements: l, isDragging: u } = C(), r = P(null), i = D(() => {
-    var o;
-    return ((o = n.zone.value) == null ? void 0 : o.node) === r.value;
-  }), v = D(() => {
-    if (!r.value || !u.value) return !1;
-    const o = e.value.find(
-      (f) => f.node === r.value
+}, We = (t) => {
+  const { zones: e, hovered: r, draggingElements: o, isDragging: u } = C(), n = D(null), s = P(() => {
+    var l;
+    return ((l = r.zone.value) == null ? void 0 : l.node) === n.value;
+  }), g = P(() => {
+    if (!n.value || !u.value) return !1;
+    const l = e.value.find(
+      (p) => p.node === n.value
     );
-    return o != null && o.groups.length ? !l.value.some((f) => f.groups.length ? !f.groups.some(
-      (_) => o.groups.includes(_)
+    return l != null && l.groups.length ? !o.value.some((p) => p.groups.length ? !p.groups.some(
+      (E) => l.groups.includes(E)
     ) : !1) : !0;
   });
-  return { elementRef: r, registerZone: () => {
-    if (!r.value) throw new Error("elementRef is not set");
+  return { elementRef: n, registerZone: () => {
+    if (!n.value) throw new Error("elementRef is not set");
     e.value.push({
-      node: r.value,
+      node: n.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");
+    }), n.value.setAttribute("data-dnd-droppable", "true");
   }, unregisterZone: () => {
-    if (!r.value) throw new Error("elementRef is not set");
-    const o = e.value.findIndex(
-      (f) => f.node === r.value
+    if (!n.value) throw new Error("elementRef is not set");
+    const l = e.value.findIndex(
+      (p) => p.node === n.value
     );
-    o !== -1 && e.value.splice(o, 1);
-  }, isOvered: i, isAllowed: v };
-}, Qe = (t) => {
-  const { elementRef: e, registerZone: n, unregisterZone: l, isOvered: u, isAllowed: r } = je(t);
-  return Y(n), X(l), { elementRef: e, isOvered: u, isAllowed: r };
-}, et = (t) => {
-  const { selectedElements: e, elements: n } = C(), l = D(
-    () => n.value.find((o) => o.node === t.value)
-  ), u = D(
-    () => e.value.some((o) => o.node === t.value)
-  ), r = D(() => t.value ? e.value.some(
-    (o) => o.node && M(
-      o.node,
+    l !== -1 && e.value.splice(l, 1);
+  }, isOvered: s, isAllowed: g };
+}, Ge = (t) => {
+  const { elementRef: e, registerZone: r, unregisterZone: o, isOvered: u, isAllowed: n } = We(t);
+  return N(r), W(o), { elementRef: e, isOvered: u, isAllowed: n };
+}, Be = (t) => {
+  const { selectedElements: e, elements: r } = C(), o = P(
+    () => r.value.find((l) => l.node === t.value)
+  ), u = P(
+    () => e.value.some((l) => l.node === t.value)
+  ), n = P(() => t.value ? e.value.some(
+    (l) => l.node && M(
+      l.node,
       t.value
     )
-  ) : !1), i = D(() => t.value ? e.value.some(
-    (o) => o.node && M(
+  ) : !1), s = P(() => t.value ? e.value.some(
+    (l) => l.node && M(
       t.value,
-      o.node
+      l.node
     )
-  ) : !1), v = () => {
-    l.value && (e.value = e.value.filter(
-      (o) => o.node !== t.value
+  ) : !1), g = () => {
+    o.value && (e.value = e.value.filter(
+      (l) => l.node !== t.value
     ));
-  }, d = () => {
-    l.value && (r.value && (e.value = e.value.filter(
-      (o) => o.node && !M(
-        o.node,
+  }, v = () => {
+    o.value && (n.value && (e.value = e.value.filter(
+      (l) => l.node && !M(
+        l.node,
         t.value
       )
-    )), i.value && (e.value = e.value.filter(
-      (o) => o.node && !M(
+    )), s.value && (e.value = e.value.filter(
+      (l) => l.node && !M(
         t.value,
-        o.node
+        l.node
       )
-    )), e.value.push(l.value));
+    )), e.value.push(o.value));
   };
   return {
-    handleUnselect: v,
-    handleSelect: d,
+    handleUnselect: g,
+    handleSelect: v,
     handleToggleSelect: () => {
-      l.value && (e.value.some((o) => o.node === t.value) ? v() : d());
+      o.value && (e.value.some((l) => l.node === t.value) ? g() : v());
     },
     isSelected: u,
-    isParentOfSelected: r
+    isParentOfSelected: n
   };
 };
 export {
-  Be as default,
+  qe as default,
   C as useDnDStore,
-  Je as useDraggable,
-  Qe as useDroppable,
-  et as useSelection
+  je as useDraggable,
+  Ge as useDroppable,
+  Be as useSelection
 };

package/package.json

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