@vue-dnd-kit/core 0.1.1-beta → 0.1.3-beta

package/dist/index.d.ts

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

package/dist/utils/namespaces.d.ts

@@ -1,2 +1,2 @@
-export declare const draggableDataName = "data-dnd-draggable";
-export declare const droppableDataName = "data-dnd-droppable";
+export declare const draggableDataName = "data-vue-dnd-kit-draggable";
+export declare const droppableDataName = "data-vue-dnd-kit-droppable";

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

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

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

@@ -1,4 +1,4 @@
-import { effectScope as fe, watch as ue, nextTick as ge, isRef as me, getCurrentScope as he, onScopeDispose as pe, toValue as b, shallowRef as K, computed as D, getCurrentInstance as ye, onMounted as U, ref as P, onBeforeUnmount as W, defineComponent as ce, createElementBlock as F, createCommentVNode as Ee, unref as re, openBlock as H, normalizeStyle as oe, Fragment as we, renderList as Pe, createBlock as De, resolveDynamicComponent as _e, createVNode as xe, render as le, markRaw as Ie } from "vue";
+import { effectScope as fe, watch as ue, nextTick as ge, isRef as me, getCurrentScope as he, onScopeDispose as pe, toValue as H, shallowRef as K, computed as D, getCurrentInstance as ye, onMounted as U, ref as P, onBeforeUnmount as W, defineComponent as ce, createElementBlock as F, createCommentVNode as Ee, unref as re, openBlock as b, normalizeStyle as oe, Fragment as we, renderList as Pe, createBlock as De, resolveDynamicComponent as _e, createVNode as xe, render as le, markRaw as Ie } from "vue";
 function Le(t) {
   return he() ? (pe(t), !0) : !1;
 }
@@ -26,7 +26,7 @@ function Te(...t) {
     n && (clearTimeout(n), n = void 0, u(), u = A);
   };
   return (_) => {
-    const h = b(o), y = Date.now() - e, s = () => r = _();
+    const h = H(o), y = Date.now() - e, s = () => r = _();
     return l(), h <= 0 ? (e = Date.now(), s()) : (y > h && (d || !i) ? (e = Date.now(), s()) : v && (r = new Promise((m, p) => {
       u = g ? p : m, n = setTimeout(() => {
         e = Date.now(), i = !0, m(s()), l();
@@ -50,7 +50,7 @@ function Re(t, e, n) {
 const ve = Me ? window : void 0;
 function Z(t) {
   var e;
-  const n = b(t);
+  const n = H(t);
   return (e = n == null ? void 0 : n.$el) != null ? e : n;
 }
 function Ae() {
@@ -63,7 +63,7 @@ function ze(t) {
   const e = Ae();
   return D(() => (e.value, !!t()));
 }
-function He(t, e, n = {}) {
+function be(t, e, n = {}) {
   const {
     root: i,
     rootMargin: u = "0px",
@@ -71,7 +71,7 @@ function He(t, e, n = {}) {
     window: o = ve,
     immediate: v = !0
   } = n, d = ze(() => o && "IntersectionObserver" in o), g = D(() => {
-    const y = b(t);
+    const y = H(t);
     return Ve(y).map(Z).filter(Ce);
   });
   let l = A;
@@ -108,14 +108,14 @@ function He(t, e, n = {}) {
     stop: h
   };
 }
-function be(t, e = {}) {
+function He(t, e = {}) {
   const {
     window: n = ve,
     scrollTarget: i,
     threshold: u = 0,
     rootMargin: r,
     once: o = !1
-  } = e, v = K(!1), { stop: d } = He(
+  } = e, v = K(!1), { stop: d } = be(
     t,
     (g) => {
       let l = v.value, f = 0;
@@ -129,7 +129,7 @@ function be(t, e = {}) {
       root: i,
       window: n,
       threshold: u,
-      rootMargin: b(r)
+      rootMargin: H(r)
     }
   );
   return v;
@@ -192,15 +192,15 @@ const M = Se(() => {
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (o, v) => re(i) ? (H(), F("div", {
+    return (o, v) => re(i) ? (b(), F("div", {
       key: 0,
       ref_key: "elementRef",
       ref: e,
       style: oe(r.value)
     }, [
-      (H(!0), F(we, null, Pe(re(u), (d, g) => {
+      (b(!0), F(we, null, Pe(re(u), (d, g) => {
         var l, f;
-        return H(), F("div", {
+        return b(), F("div", {
           key: g,
           innerHTML: d.initialHTML,
           style: oe({
@@ -217,7 +217,7 @@ const M = Se(() => {
     const { activeContainer: e } = M(), n = D(
       () => e.component.value ?? Ne
     );
-    return (i, u) => (H(), De(_e(n.value)));
+    return (i, u) => (b(), De(_e(n.value)));
   }
 }), Ge = {
   install(t) {
@@ -241,7 +241,7 @@ const M = Se(() => {
       return t.__VUE_DND_KIT_OVERLAY__ && (le(null, t.__VUE_DND_KIT_OVERLAY__.container), delete t.__VUE_DND_KIT_OVERLAY__), n.call(this);
     };
   }
-}, Fe = "data-dnd-draggable", Ze = (t) => {
+}, Fe = "data-vue-dnd-kit-draggable", Ze = (t) => {
   const {
     elements: e,
     draggingElements: n,
@@ -253,7 +253,7 @@ const M = Se(() => {
       var h;
       return ((h = i.element.value) == null ? void 0 : h.node) === o.value;
     }
-  ), d = be(o), g = D(
+  ), d = He(o), g = D(
     () => n.value.some((h) => h.node === o.value)
   ), l = D(() => {
     if (!o.value || !r.value) return !1;
@@ -276,7 +276,7 @@ const M = Se(() => {
         events: (t == null ? void 0 : t.events) ?? {},
         data: (t == null ? void 0 : t.data) ?? void 0,
         isVisible: d
-      }), o.value.setAttribute(Fe, "true");
+      }), o.value.setAttribute(Fe, "true"), o.value.setAttribute("draggable", "false");
     },
     unregisterElement: () => {
       const h = e.value.findIndex(
@@ -588,9 +588,7 @@ const M = Se(() => {
   };
 };
 export {
-  ie as DragOverlay,
   Ge as default,
-  V as getBoundingBox,
   M as useDnDStore,
   Be as useDraggable,
   Je as useDroppable,

package/package.json

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