@vue-dnd-kit/core 0.0.40-beta → 0.0.42-beta

package/dist/composables/useDnDStore.d.ts

@@ -1771,7 +1771,7 @@ export declare const useDnDStore: () => {
             onDrop?: ((store: import('../types').IDnDStore) => void) | undefined;
         };
     }[]>;
-    visibleElements: import('vue').ComputedRef<IDragElement[]>;
+    visibleElements: import('vue').ComputedRef<number[]>;
     hovered: {
         zone: import('vue').Ref<{
             node: Element | HTMLElement | null;

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

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

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

@@ -20,18 +20,18 @@ function Le(t, e) {
   return n;
 }
 function Ce(...t) {
-  let e = 0, n, s = !0, u = H, r, l, v, d, h;
-  !fe(t[0]) && typeof t[0] == "object" ? { delay: l, trailing: v = !0, leading: d = !0, rejectOnCancel: h = !1 } = t[0] : [l, v = !0, d = !0, h = !1] = t;
+  let e = 0, n, s = !0, u = H, r, l, v, d, m;
+  !fe(t[0]) && typeof t[0] == "object" ? { delay: l, trailing: v = !0, leading: d = !0, rejectOnCancel: m = !1 } = t[0] : [l, v = !0, d = !0, m = !1] = t;
   const o = () => {
     n && (clearTimeout(n), n = void 0, u(), u = H);
   };
   return (D) => {
-    const m = V(l), y = Date.now() - e, i = () => r = D();
-    return o(), m <= 0 ? (e = Date.now(), i()) : (y > m && (d || !s) ? (e = Date.now(), i()) : v && (r = new Promise((g, p) => {
-      u = h ? p : g, n = setTimeout(() => {
+    const h = V(l), y = Date.now() - e, i = () => r = D();
+    return o(), h <= 0 ? (e = Date.now(), i()) : (y > h && (d || !s) ? (e = Date.now(), i()) : v && (r = new Promise((g, p) => {
+      u = m ? p : g, n = setTimeout(() => {
         e = Date.now(), s = !0, g(i()), o();
-      }, Math.max(0, m - y));
-    })), !d && !n && (n = setTimeout(() => s = !0, m)), s = !1, r);
+      }, Math.max(0, h - y));
+    })), !d && !n && (n = setTimeout(() => s = !0, h)), s = !1, r);
   };
 }
 function _e(t) {
@@ -70,13 +70,13 @@ function Re(t, e, n = {}) {
     threshold: r = 0,
     window: l = ue,
     immediate: v = !0
-  } = n, d = ze(() => l && "IntersectionObserver" in l), h = x(() => {
+  } = n, d = ze(() => l && "IntersectionObserver" in l), m = x(() => {
     const y = V(t);
     return _e(y).map(X).filter(Se);
   });
   let o = H;
   const f = U(v), D = d.value ? ie(
-    () => [h.value, X(s), f.value],
+    () => [m.value, X(s), f.value],
     ([y, i]) => {
       if (o(), !f.value || !y.length)
         return;
@@ -93,10 +93,10 @@ function Re(t, e, n = {}) {
       };
     },
     { immediate: v, flush: "post" }
-  ) : H, m = () => {
+  ) : H, h = () => {
     o(), D(), f.value = !1;
   };
-  return De(m), {
+  return De(h), {
     isSupported: d,
     isActive: f,
     pause() {
@@ -105,7 +105,7 @@ function Re(t, e, n = {}) {
     resume() {
       f.value = !0;
     },
-    stop: m
+    stop: h
   };
 }
 function He(t, e = {}) {
@@ -117,9 +117,9 @@ function He(t, e = {}) {
     once: l = !1
   } = e, v = U(!1), { stop: d } = Re(
     t,
-    (h) => {
+    (m) => {
       let o = v.value, f = 0;
-      for (const D of h)
+      for (const D of m)
         D.time >= f && (f = D.time, o = D.isIntersecting);
       v.value = o, l && Te(v, () => {
         d();
@@ -139,9 +139,9 @@ const C = Ie(() => {
     component: P(null),
     ref: P(null)
   }, s = P([]), u = x(
-    () => s.value.filter((h) => {
-      var o;
-      return ((o = h.isVisible) == null ? void 0 : o.value) || h.isVisible;
+    () => s.value.map((m, o) => {
+      var f;
+      return ((f = m.isVisible) == null ? void 0 : f.value) && o;
     })
   ), r = P([]), l = P([]), v = {
     zone: P(null),
@@ -181,9 +181,9 @@ const C = Ie(() => {
   __name: "DefaultOverlay",
   setup(t) {
     const { elementRef: e, pointerPosition: n, isDragging: s, draggingElements: u } = Ae(), r = x(() => {
-      var l, v, d, h;
+      var l, v, d, m;
       return {
-        transform: `translate3d(${(((l = n.current.value) == null ? void 0 : l.x) ?? 0) - (((v = n.offset.pixel.value) == null ? void 0 : v.x) ?? 0)}px, ${(((d = n.current.value) == null ? void 0 : d.y) ?? 0) - (((h = n.offset.pixel.value) == null ? void 0 : h.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((l = n.current.value) == null ? void 0 : l.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)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -197,10 +197,10 @@ const C = Ie(() => {
       ref: e,
       style: oe(r.value)
     }, [
-      (b(!0), W(ye, null, Ee(re(u), (d, h) => {
+      (b(!0), W(ye, null, Ee(re(u), (d, m) => {
         var o, f;
         return b(), W("div", {
-          key: h,
+          key: m,
           innerHTML: d.initialHTML,
           style: oe({
             width: `${(o = d.initialRect) == null ? void 0 : o.width}px`,
@@ -227,18 +227,18 @@ const C = Ie(() => {
     isDragging: r
   } = C(), l = P(null), v = x(
     () => {
-      var m;
-      return ((m = s.element.value) == null ? void 0 : m.node) === l.value;
+      var h;
+      return ((h = s.element.value) == null ? void 0 : h.node) === l.value;
     }
-  ), d = He(l), h = x(
-    () => n.value.some((m) => m.node === l.value)
+  ), d = He(l), m = x(
+    () => n.value.some((h) => h.node === l.value)
   ), o = x(() => {
     if (!l.value || !r.value) return !1;
-    const m = e.value.find(
+    const h = e.value.find(
       (y) => y.node === l.value
     );
-    return m != null && m.groups.length ? !n.value.some((y) => y.groups.length ? !y.groups.some(
-      (i) => m.groups.includes(i)
+    return h != null && h.groups.length ? !n.value.some((y) => y.groups.length ? !y.groups.some(
+      (i) => h.groups.includes(i)
     ) : !1) : !0;
   });
   return {
@@ -256,16 +256,16 @@ const C = Ie(() => {
       }), l.value.setAttribute(Fe, "true");
     },
     unregisterElement: () => {
-      const m = e.value.findIndex(
+      const h = e.value.findIndex(
         (i) => i.node === l.value
       );
-      m !== -1 && e.value.splice(m, 1);
+      h !== -1 && e.value.splice(h, 1);
       const y = u.value.findIndex(
         (i) => i.node === l.value
       );
       y !== -1 && u.value.splice(y, 1);
     },
-    isDragging: h,
+    isDragging: m,
     isOvered: v,
     isAllowed: o,
     isVisible: d
@@ -448,10 +448,10 @@ const C = Ie(() => {
       return Math.abs(a.overlapPercent - c.overlapPercent) <= 1 ? a.centerDistance - c.centerDistance : c.overlapPercent - a.overlapPercent;
     }), z = e.hovered.element.value, R = e.hovered.zone.value;
     e.hovered.element.value = ((q = A[0]) == null ? void 0 : q.element) ?? null, e.hovered.zone.value = ((B = ce[0]) == null ? void 0 : B.zone) ?? null, e.hovered.element.value !== z && ((J = z == null ? void 0 : z.events) != null && J.onLeave && z.events.onLeave(e), (Q = (K = e.hovered.element.value) == null ? void 0 : K.events) != null && Q.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== R && ((ee = R == null ? void 0 : R.events) != null && ee.onLeave && R.events.onLeave(e), (ne = (te = e.hovered.zone.value) == null ? void 0 : te.events) != null && ne.onHover && e.hovered.zone.value.events.onHover(e));
-  }, 1e3), h = () => {
-    d(), r = requestAnimationFrame(h);
+  }, 1e3), m = () => {
+    d(), r = requestAnimationFrame(m);
   }, o = () => {
-    h();
+    m();
   }, f = () => {
     r !== null && (cancelAnimationFrame(r), r = null);
   };
@@ -481,10 +481,10 @@ const C = Ie(() => {
     isOvered: r,
     isAllowed: l,
     isVisible: v
-  } = Ze(t), { disableInteractions: d, enableInteractions: h } = $e(), { activeContainer: o, pointerPosition: f } = C(), { activate: D, track: m, deactivate: y } = Ye(e), i = (w) => {
+  } = Ze(t), { disableInteractions: d, enableInteractions: m } = $e(), { activeContainer: o, pointerPosition: f } = C(), { activate: D, track: h, deactivate: y } = Ye(e), i = (w) => {
     t != null && t.container && (o.component.value = xe(t.container)), d(), D(w), document.addEventListener("pointermove", g), document.addEventListener("pointerup", E), document.addEventListener("wheel", p);
-  }, g = (w) => m(w), p = (w) => m(w), E = () => {
-    o.component.value = null, h(), y(), document.removeEventListener("pointermove", g), document.removeEventListener("pointerup", E), document.removeEventListener("wheel", p);
+  }, g = (w) => h(w), p = (w) => h(w), E = () => {
+    o.component.value = null, m(), y(), document.removeEventListener("pointermove", g), document.removeEventListener("pointerup", E), document.removeEventListener("wheel", p);
   };
   return F(n), j(s), {
     pointerPosition: f,

package/package.json

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