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