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

package/dist/types/index.d.ts

@@ -1,170 +1,112 @@
 import { Component, ComputedRef, Ref, ShallowRef } from 'vue';
-/** Main drag and drop state store */
-export interface IDnDStore {
-  /** Flag indicating if dragging is in progress */
-  isDragging: Ref<boolean>;
-  /** Active container where dragging occurs */
-  activeContainer: IActiveContainer;
-  /** Array of all drag elements */
-  elements: Ref<IDragElement[]>;
-  /** Array of currently selected elements */
-  selectedElements: Ref<IDragElement[]>;
-  /** Array of elements being dragged */
-  draggingElements: Ref<IDraggingElement[]>;
-  /** Array of drop zones */
-  zones: Ref<IDropZone[]>;
-  /** Currently hovered elements */
-  hovered: {
-    /** Currently hovered drop zone */
-    zone: Ref<IDropZone | null>;
-    /** Currently hovered drag element */
-    element: Ref<IDragElement | null>;
-  };
-  /** Pointer position information */
-  pointerPosition: IPointerPosition;
-}
-
-/** Active container information */
-export interface IActiveContainer {
-  /** Vue component reference */
-  component: Ref<Component | null>;
-  /** HTML element reference */
-  ref: Ref<HTMLElement | null>;
-}
-
-/** Pointer position tracking */
-export interface IPointerPosition {
-  /** Initial pointer position when drag starts */
-  start: Ref<IPoint | null>;
-  /** Current pointer position */
-  current: Ref<IPoint | null>;
-  /** Offset from start position */
-  offset: {
-    /** Offset in percentage */
-    percent: Ref<IPoint | null>;
-    /** Offset in pixels */
-    pixel: Ref<IPoint | null>;
-  };
-}
-
-/** Draggable element configuration */
-export interface IDragElement {
-  /** DOM node reference */
-  node: HTMLElement | Element | null;
-  /** Groups this element belongs to */
-  groups: string[];
-  /** Custom layer component for dragging */
-  layer: Component | null;
-  /** Default layer component */
-  defaultLayer: Component | null;
-  /** Visibility state of the element */
-  isVisible?: any;
-  /** Custom data associated with element */
-  data: any;
-  /** Event handlers */
-  events: {
-    /** Called when element is hovered */
-    onHover?: (store: IDnDStore) => void;
-    /** Called when hover ends */
-    onLeave?: (store: IDnDStore) => void;
-    /** Called when drag ends */
-    onEnd?: (store: IDnDStore) => void;
-  };
-}
-
-/** Element being dragged */
-export interface IDraggingElement extends IDragElement {
-  /** Original HTML content */
-  initialHTML: string;
-  /** Original element dimensions */
-  initialRect?: DOMRect;
-}
-
-/** Drop zone configuration */
-export interface IDropZone {
-  /** DOM node reference */
-  node: HTMLElement | Element | null;
-  /** Groups this zone accepts */
-  groups: string[];
-  /** Custom data associated with zone */
-  data: any;
-  /** Event handlers */
-  events: {
-    /** Called when element hovers over zone */
-    onHover?: (store: IDnDStore) => void;
-    /** Called when element leaves zone */
-    onLeave?: (store: IDnDStore) => void;
-    /** Called when element is dropped in zone */
-    onDrop?: (store: IDnDStore) => void;
-  };
-}
-
-/** 2D point coordinates */
-export interface IPoint {
-  /** X coordinate */
-  x: number;
-  /** Y coordinate */
-  y: number;
-}
-
-/** Drop zone options */
-export interface IUseDropOptions {
-  /** Accepted groups */
-  groups?: string[];
-  /** Event handlers */
-  events?: {
-    /** Called on drop */
-    onDrop?: (store: IDnDStore) => void;
-    /** Called when element hovers */
-    onHover?: (store: IDnDStore) => void;
-    /** Called when element leaves */
-    onLeave?: (store: IDnDStore) => void;
-  };
-  /** Custom data */
-  data?: any;
-}
-
-/** Drag element options */
-export interface IUseDragOptions {
-  /** Groups this element belongs to */
-  groups?: string[];
-  /** Event handlers */
-  events?: {
-    /** Called when drag ends */
-    onEnd?: (store: IDnDStore) => void;
-    /** Called when drag starts */
-    onStart?: (store: IDnDStore) => void;
-    /** Called during drag */
-    onMove?: (store: IDnDStore) => void;
-    /** Called when hovering over element */
-    onHover?: (store: IDnDStore) => void;
-    /** Called when leaving element */
-    onLeave?: (store: IDnDStore) => void;
-  };
-  /** Custom data */
-  data?: any;
-  /** Custom layer component */
-  layer?: Component | null;
-  /** Container component */
-  container?: Component;
-}
-
-/** Element bounding box dimensions */
-export interface IBoundingBox {
-  /** X coordinate */
-  x: number;
-  /** Y coordinate */
-  y: number;
-  /** Width */
-  width: number;
-  /** Height */
-  height: number;
-  /** Bottom edge position */
-  bottom: number;
-  /** Left edge position */
-  left: number;
-  /** Right edge position */
-  right: number;
-  /** Top edge position */
-  top: number;
-}
+
+
+export interface IDnDStore {
+  isDragging: Ref<boolean>;
+  activeContainer: IActiveContainer;
+  elements: Ref<IDragElement[]>;
+  selectedElements: Ref<IDragElement[]>;
+  draggingElements: Ref<IDraggingElement[]>;
+  zones: Ref<IDropZone[]>;
+  hovered: {
+    zone: Ref<IDropZone | null>;
+    element: Ref<IDragElement | null>;
+  };
+  pointerPosition: IPointerPosition;
+}
+
+export interface IActiveContainer {
+  component: Ref<Component | null>;
+  ref: Ref<HTMLElement | null>;
+}
+
+export interface IPointerPosition {
+  start: Ref<IPoint | null>;
+  current: Ref<IPoint | null>;
+  offset: {
+    percent: Ref<IPoint | null>;
+    pixel: Ref<IPoint | null>;
+  };
+}
+
+export interface IDragElement {
+  node: HTMLElement | Element | null;
+  groups: string[];
+  layer: Component | null;
+  defaultLayer: Component | null;
+  data: any;
+  events: {
+    onHover?: (store: IDnDStore) => void;
+    onLeave?: (store: IDnDStore) => void;
+    onEnd?: (store: IDnDStore) => void;
+  };
+}
+
+export interface IDraggingElement extends IDragElement {
+  initialHTML: string;
+  initialRect?: DOMRect;
+}
+
+export interface IDropZone {
+  node: HTMLElement | Element | null;
+  groups: string[];
+  data: any;
+  events: {
+    onHover?: (store: IDnDStore) => void;
+    onLeave?: (store: IDnDStore) => void;
+    onDrop?: (store: IDnDStore) => void;
+  };
+}
+
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export interface IUseDropOptions {
+  groups?: string[];
+  events?: {
+    onDrop?: (store: IDnDStore) => void;
+    onHover?: (store: IDnDStore) => void;
+    onLeave?: (store: IDnDStore) => void;
+  };
+  data?: any;
+}
+export interface IUseDragOptions {
+  groups?: string[];
+  events?: {
+    onEnd?: (store: IDnDStore) => void;
+    onStart?: (store: IDnDStore) => void;
+    onMove?: (store: IDnDStore) => void;
+    onHover?: (store: IDnDStore) => void;
+    onLeave?: (store: IDnDStore) => void;
+  };
+  data?: any;
+  layer?: Component | null;
+  container?: Component;
+  throttle?: number;
+  sensor?: ISensor;
+}
+
+export type ISensor = (store: IDnDStore) => HTMLElement | HTMLElement[] | null;
+
+export interface IBoundingBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+}
+
+export interface IUseSensorOptions {
+  throttle?: number;
+  sensor?: ISensor;
+}
+
+interface ICollisionDetectionResult {
+  element: IDragElement | null;
+  zone: IDropZone | null;
+}

package/dist/utils/dom.d.ts

@@ -1 +1 @@
-export declare const isDescendant: (element: HTMLElement | null, container: HTMLElement) => boolean;
+export declare const isDescendant: (element: HTMLElement | null, container: HTMLElement) => boolean;

package/dist/utils/events.d.ts

@@ -1 +1 @@
-export declare const preventEvent: (event: Event) => void;
+export declare const preventEvent: (event: Event) => void;

package/dist/utils/geometry.d.ts

@@ -1,15 +1,17 @@
 import { IBoundingBox, IPoint } from "../types";
-export declare const checkCollision: (boxA: IBoundingBox, boxB: IBoundingBox) => boolean;
-export declare const getBoundingBox: (element: HTMLElement | null) => IBoundingBox;
-export declare const getCenter: (box: IBoundingBox) => IPoint;
-export declare const getOffset: (element: HTMLElement | null, pointer: IPoint) => {
-    pixel: {
-        x: number;
-        y: number;
-    };
-    percent: {
-        x: number;
-        y: number;
-    };
-};
-export declare const getDistance: (pointA: IPoint, pointB: IPoint) => number;
+
+export declare const checkCollision: (boxA: IBoundingBox, boxB: IBoundingBox) => boolean;
+export declare const getBoundingBox: (element: HTMLElement | null) => IBoundingBox;
+export declare const getCenter: (box: IBoundingBox) => IPoint;
+export declare const getOffset: (element: HTMLElement | null, pointer: IPoint) => {
+    pixel: {
+        x: number;
+        y: number;
+    };
+    percent: {
+        x: number;
+        y: number;
+    };
+};
+export declare const getDistance: (pointA: IPoint, pointB: IPoint) => number;
+export declare const getOverlapPercent: (boxA: IBoundingBox, boxB: IBoundingBox) => number;

package/dist/utils/namespaces.d.ts

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

package/dist/utils/sensor.d.ts

@@ -0,0 +1,3 @@
+import { IDnDStore } from "../types";
+
+export declare const defaultCollisionDetection: (store: IDnDStore) => HTMLElement[];

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

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