@vue-dnd-kit/core 0.0.28-beta → 0.0.30-beta

package/dist/composables/useDnDStore.d.ts

@@ -478,7 +478,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -726,7 +726,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -987,7 +987,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1247,7 +1247,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1496,7 +1496,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1744,7 +1744,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        isVisible: boolean;
+        isVisible?: any;
         data: any;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2032,7 +2032,7 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            isVisible: boolean;
+            isVisible?: any;
             data: any;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2280,7 +2280,7 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            isVisible: boolean;
+            isVisible?: any;
             data: any;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;

package/dist/composables/useDragContainer.d.ts

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

package/dist/managers/useElementManager.d.ts

@@ -1,4 +1,3 @@
-import { ShallowRef } from 'vue';
 import { IUseDragOptions } from "../types";
 /**
  * Hook for managing draggable elements and their interactions.
@@ -15,5 +14,5 @@ export declare const useElementManager: (options?: IUseDragOptions) => {
     isDragging: import('vue').ComputedRef<boolean>;
     isOvered: import('vue').ComputedRef<boolean>;
     isAllowed: import('vue').ComputedRef<boolean>;
-    isVisible: ShallowRef<boolean, 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: boolean;
+  isVisible?: any;
   /** Custom data associated with element */
   data: any;
   /** Event handlers */

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

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

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

@@ -9,7 +9,7 @@ function xe(t) {
 }
 const De = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Ie = (t) => t != null, b = () => {
+const Ie = (t) => t != null, X = () => {
 };
 function Se(t) {
   return Array.isArray(t) ? t : [t];
@@ -19,7 +19,7 @@ function Me(t, e, n) {
   return u;
 }
 const ae = De ? window : void 0;
-function X(t) {
+function Y(t) {
   var e;
   const n = U(t);
   return (e = n == null ? void 0 : n.$el) != null ? e : n;
@@ -43,28 +43,28 @@ function _e(t, e, n = {}) {
     immediate: v = !0
   } = n, g = Le(() => s && "IntersectionObserver" in s), y = P(() => {
     const l = U(t);
-    return Se(l).map(X).filter(Ie);
+    return Se(l).map(Y).filter(Ie);
   });
-  let o = b;
+  let o = X;
   const f = F(v), x = g.value ? se(
-    () => [y.value, X(u), f.value],
+    () => [y.value, Y(u), f.value],
     ([l, d]) => {
       if (o(), !f.value || !l.length)
         return;
       const h = new IntersectionObserver(
         e,
         {
-          root: X(d),
+          root: Y(d),
           rootMargin: c,
           threshold: r
         }
       );
       l.forEach((m) => m && h.observe(m)), o = () => {
-        h.disconnect(), o = b;
+        h.disconnect(), o = X;
       };
     },
     { immediate: v, flush: "post" }
-  ) : b, p = () => {
+  ) : X, p = () => {
     o(), x(), f.value = !1;
   };
   return Pe(p), {
@@ -175,7 +175,7 @@ const C = xe(() => {
       }), 128))
     ], 4)) : he("", !0);
   }
-}), Ye = /* @__PURE__ */ ie({
+}), be = /* @__PURE__ */ ie({
   __name: "DragOverlay",
   setup(t) {
     const { activeContainer: e } = C(), n = P(
@@ -217,7 +217,7 @@ const C = xe(() => {
         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: g.value
+        isVisible: g
       }), s.value.setAttribute(He, "true");
     },
     unregisterElement: () => {
@@ -271,7 +271,7 @@ const C = xe(() => {
     width: e.width,
     height: e.height
   };
-}, Y = (t) => ({
+}, b = (t) => ({
   x: t.x + t.width / 2,
   y: t.y + t.height / 2
 }), Ve = (t, e) => {
@@ -352,7 +352,7 @@ const C = xe(() => {
     return (E / D * 100 + E / L * 100) / 2;
   }, g = () => {
     var G, N, q, B, j, J, K, Q, ee, te;
-    const l = k(e.activeContainer.ref.value), d = Y(l), h = ((G = e.pointerPosition.current.value) == null ? void 0 : G.x) ?? 0, m = ((N = e.pointerPosition.current.value) == null ? void 0 : N.y) ?? 0, D = !(l && h >= l.x && h <= l.x + l.width && m >= l.y && m <= l.y + l.height), L = e.draggingElements.value.map((i) => i.node), H = e.elements.value.filter((i) => {
+    const l = k(e.activeContainer.ref.value), d = b(l), h = ((G = e.pointerPosition.current.value) == null ? void 0 : G.x) ?? 0, m = ((N = e.pointerPosition.current.value) == null ? void 0 : N.y) ?? 0, D = !(l && h >= l.x && h <= l.x + l.width && m >= l.y && m <= l.y + l.height), L = e.draggingElements.value.map((i) => i.node), H = e.elements.value.filter((i) => {
       if (!i.node || L.some(
         (I) => I && M(i.node, I)
       ) || i.groups.length && !!e.draggingElements.value.some(
@@ -364,7 +364,7 @@ const C = xe(() => {
       const a = k(i.node);
       return a && l && oe(a, l);
     }).map((i) => {
-      const a = k(i.node), I = Y(a), S = h >= a.x && h <= a.x + a.width && m >= a.y && m <= a.y + a.height, _ = v(a, l), V = le(d, I), Z = e.elements.value.filter(
+      const a = k(i.node), I = b(a), S = h >= a.x && h <= a.x + a.width && m >= a.y && m <= a.y + a.height, _ = v(a, l), V = le(d, I), Z = e.elements.value.filter(
         (O) => O !== i && O.node && i.node && M(
           i.node,
           O.node
@@ -393,7 +393,7 @@ const C = xe(() => {
       const a = k(i.node);
       return a && l && oe(a, l);
     }).map((i) => {
-      const a = k(i.node), I = Y(a), S = h >= a.x && h <= a.x + a.width && m >= a.y && m <= a.y + a.height, _ = v(a, l), V = le(d, I), Z = e.zones.value.filter(
+      const a = k(i.node), I = b(a), S = h >= a.x && h <= a.x + a.width && m >= a.y && m <= a.y + a.height, _ = v(a, l), V = le(d, I), Z = e.zones.value.filter(
         (O) => O !== i && O.node && i.node && M(i.node, O.node)
       ).length;
       return {
@@ -462,7 +462,7 @@ const C = xe(() => {
     handleDragStart: l,
     isVisible: v
   };
-}, be = (t) => {
+}, Xe = (t) => {
   const { zones: e, hovered: n, draggingElements: u, isDragging: c } = C(), r = w(null), s = P(() => {
     var o;
     return ((o = n.zone.value) == null ? void 0 : o.node) === r.value;
@@ -491,7 +491,7 @@ const C = xe(() => {
     o !== -1 && e.value.splice(o, 1);
   }, isOvered: s, isAllowed: v };
 }, Ue = (t) => {
-  const { elementRef: e, registerZone: n, unregisterZone: u, isOvered: c, isAllowed: r } = be(t);
+  const { elementRef: e, registerZone: n, unregisterZone: u, isOvered: c, isAllowed: r } = Xe(t);
   return A(n), W(u), { elementRef: e, isOvered: c, isAllowed: r };
 }, We = (t) => {
   const { selectedElements: e, elements: n } = C(), u = P(
@@ -536,7 +536,7 @@ const C = xe(() => {
   };
 };
 export {
-  Ye as DragOverlay,
+  be as DragOverlay,
   k as getBoundingBox,
   C as useDnDStore,
   Fe as useDraggable,

package/package.json

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