@vue-dnd-kit/core 0.5.2 → 0.5.4

package/README.md

@@ -1,7 +1,8 @@
 # Vue Drag & Drop Library - Core Package
 
 [![Beta](https://img.shields.io/badge/status-beta-yellow.svg)](https://github.com/zizigy/vue-dnd-kit)
- > ⚠️ **Warning**: This project is in active development (beta). The API may change between minor versions. Not recommended for production use until version 1.0.0.
+
+> ⚠️ **Warning**: This project is in active development (beta). The API may change between minor versions. Not recommended for production use until version 1.0.0.
 
 <p align="center">
   <a href="https://zizigy.github.io/vue-dnd-hooks/">
@@ -24,14 +25,15 @@
 </p>
 
 ## Project Status
-   
-   This project is in active development. We're working toward a stable API, but until version 1.0.0, there may be breaking changes.
-   
-   Roadmap:
-   - [x] Basic drag & drop functionality
-   - [x] Complete documentation
-   - [ ] Tests
-   - [ ] Stable API (version 1.0.0)
+
+This project is in active development. We're working toward a stable API, but until version 1.0.0, there may be breaking changes.
+
+Roadmap:
+
+- [x] Basic drag & drop functionality
+- [x] Complete documentation
+- [ ] Tests
+- [ ] Stable API (version 1.0.0)
 
 ## Features
 
@@ -42,12 +44,14 @@
   - Intuitive hooks-based approach
   - Clean and declarative syntax
   - Minimal boilerplate code
+
 - 🎨 **Full Customization**
 
   - Custom drag overlays
   - Flexible styling system
   - Animation support
   - Custom drag handles
+
 - 📱 **Advanced Input Support**
 
   - Touch devices support
@@ -62,6 +66,7 @@
   - Minimal re-renders
   - Efficient DOM updates
   - Memory leak prevention
+
 - 🔄 **Smart Auto-scrolling**
 
   - Smooth scroll animations
@@ -77,6 +82,7 @@
   - Type inference
   - IDE autocompletion
   - Type-safe events
+
 - 📐 **Layout Features**
 
   - Grid system support
@@ -92,12 +98,14 @@
   - Zone filtering
   - Nested groups
   - Dynamic group validation
+
 - 📊 **Rich Events System**
 
   - Comprehensive lifecycle events
   - Custom event handlers
   - Drag state tracking
   - Position coordinates
+
 - 🛡️ **Built-in Utilities**
 
   - Geometry calculations
@@ -129,6 +137,20 @@ yarn add @vue-dnd-kit/core
 pnpm install @vue-dnd-kit/core
 ```
 
+## Setup
+
+Register the plugin in your main.js/ts file:
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+import VueDnDKitPlugin from '@vue-dnd-kit/core';
+
+const app = createApp(App);
+app.use(VueDnDKitPlugin);
+app.mount('#app');
+```
+
 ## Basic Usage
 
 ### App.vue

package/dist/composables/useDnDStore.d.ts

@@ -479,7 +479,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -726,7 +730,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -986,7 +994,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1245,7 +1257,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1493,7 +1509,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1740,7 +1760,11 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1750,7 +1774,10 @@ export declare const useDnDStore: () => {
     zones: import('vue').Ref<{
         node: HTMLElement | Element | null;
         groups: string[];
-        data: any;
+        data?: {
+            [x: string]: any;
+            source?: any[] | undefined;
+        } | undefined;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1759,7 +1786,10 @@ export declare const useDnDStore: () => {
     }[], IDropZone[] | {
         node: HTMLElement | Element | null;
         groups: string[];
-        data: any;
+        data?: {
+            [x: string]: any;
+            source?: any[] | undefined;
+        } | undefined;
         events: {
             onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1770,7 +1800,10 @@ export declare const useDnDStore: () => {
         zone: import('vue').Ref<{
             node: HTMLElement | Element | null;
             groups: string[];
-            data: any;
+            data?: {
+                [x: string]: any;
+                source?: any[] | undefined;
+            } | undefined;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
                 onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -1779,7 +1812,10 @@ export declare const useDnDStore: () => {
         } | null, IDropZone | {
             node: HTMLElement | Element | null;
             groups: string[];
-            data: any;
+            data?: {
+                [x: string]: any;
+                source?: any[] | undefined;
+            } | undefined;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
                 onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2027,7 +2063,11 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            data: any;
+            data: {
+                [x: string]: any;
+                source?: any[] | undefined;
+                index?: number | undefined;
+            } | null;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
                 onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2274,7 +2314,11 @@ export declare const useDnDStore: () => {
                 __file?: string | undefined;
                 __name?: string | undefined;
             } | null;
-            data: any;
+            data: {
+                [x: string]: any;
+                source?: any[] | undefined;
+                index?: number | undefined;
+            } | null;
             events: {
                 onHover?: ((store: import('../types').IDnDStore) => void) | undefined;
                 onLeave?: ((store: import('../types').IDnDStore) => void) | undefined;
@@ -2291,9 +2335,13 @@ export declare const useDnDStore: () => {
         };
     };
     keyboard: {
-        w: import('vue').ShallowRef<boolean, boolean>;
-        s: import('vue').ShallowRef<boolean, boolean>;
-        a: import('vue').ShallowRef<boolean, boolean>;
-        d: import('vue').ShallowRef<boolean, boolean>;
+        w: import('vue').ComputedRef<boolean>;
+        s: import('vue').ComputedRef<boolean>;
+        a: import('vue').ComputedRef<boolean>;
+        d: import('vue').ComputedRef<boolean>;
+        ctrl: import('vue').ComputedRef<boolean>;
+        shift: import('vue').ComputedRef<boolean>;
+        alt: import('vue').ComputedRef<boolean>;
+        meta: import('vue').ComputedRef<boolean>;
     };
 };

package/dist/composables/useDragContainer.d.ts

@@ -320,7 +320,11 @@ export declare const useDragContainer: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('..').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('..').IDnDStore) => void) | undefined;
@@ -579,7 +583,11 @@ export declare const useDragContainer: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null;
-        data: any;
+        data: {
+            [x: string]: any;
+            source?: any[] | undefined;
+            index?: number | undefined;
+        } | null;
         events: {
             onHover?: ((store: import('..').IDnDStore) => void) | undefined;
             onLeave?: ((store: import('..').IDnDStore) => void) | undefined;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { DnDOperations } from './utils/operations';
 import { VueDndKitPlugin } from './plugin';
 import { getBoundingBox } from './utils/geometry';
 import { useDnDStore } from './composables/useDnDStore';
@@ -6,5 +7,5 @@ import { useDroppable } from './composables/useDroppable';
 import { useSelection } from './composables/useSelection';
 
 export default VueDndKitPlugin;
-export { useDraggable, useDroppable, useDnDStore, useSelection, getBoundingBox, };
+export { useDraggable, useDroppable, useDnDStore, useSelection, getBoundingBox, DnDOperations, };
 export type { IDnDStore, IActiveContainer, IDragElement, IDraggingElement, IDropZone, IPoint, IBoundingBox, } from './types';

package/dist/types/index.d.ts

@@ -13,6 +13,16 @@ export interface IDnDStore {
     element: Ref<IDragElement | null>;
   };
   pointerPosition: IPointerPosition;
+  keyboard: {
+    w: Ref<boolean>;
+    s: Ref<boolean>;
+    a: Ref<boolean>;
+    d: Ref<boolean>;
+    ctrl: Ref<boolean>;
+    shift: Ref<boolean>;
+    alt: Ref<boolean>;
+    meta: Ref<boolean>;
+  };
 }
 
 export interface IActiveContainer {
@@ -34,7 +44,11 @@ export interface IDragElement {
   groups: string[];
   layer: Component | null;
   defaultLayer: Component | null;
-  data: any;
+  data: {
+    source?: any[];
+    index?: number;
+    [key: string]: any;
+  } | null;
   events: {
     onHover?: (store: IDnDStore) => void;
     onLeave?: (store: IDnDStore) => void;
@@ -42,6 +56,8 @@ export interface IDragElement {
   };
 }
 
+const test: IDragElement['data'];
+
 export interface IDraggingElement extends IDragElement {
   initialHTML: string;
   initialRect?: DOMRect;
@@ -50,7 +66,10 @@ export interface IDraggingElement extends IDragElement {
 export interface IDropZone {
   node: HTMLElement | Element | null;
   groups: string[];
-  data: any;
+  data?: {
+    source?: any[];
+    [key: string]: any;
+  };
   events: {
     onHover?: (store: IDnDStore) => void;
     onLeave?: (store: IDnDStore) => void;
@@ -70,7 +89,10 @@ export interface IUseDropOptions {
     onHover?: (store: IDnDStore) => void;
     onLeave?: (store: IDnDStore) => void;
   };
-  data?: any;
+  data?: {
+    source?: any[];
+    [key: string]: any;
+  };
 }
 export interface IUseDragOptions extends IUseSensorOptions {
   groups?: string[];
@@ -84,7 +106,11 @@ export interface IUseDragOptions extends IUseSensorOptions {
   keyboard?: {
     moveStep?: number;
   };
-  data?: any;
+  data?: {
+    source?: any[];
+    index?: number;
+    [key: string]: any;
+  };
   layer?: Component | null;
   container?: Component;
 }

package/dist/utils/operations.d.ts

@@ -0,0 +1,14 @@
+import { IDnDStore } from "../types";
+
+export declare class DnDOperations {
+    static remove: (source?: any[], index?: number) => any;
+    static insert: (target?: any[], index?: number, item?: any) => void;
+    static move: (source?: any[], sourceIndex?: number, target?: any[], targetIndex?: number) => void;
+    static swap: (source?: any[], sourceIndex?: number, target?: any[], targetIndex?: number) => void;
+    static copy: (source?: any[], index?: number, target?: any[], targetIndex?: number) => void;
+    static applyTransfer: (store: IDnDStore) => void;
+    static applyCopy: (store: IDnDStore) => void;
+    static applySwap: (store: IDnDStore) => void;
+    static applyRemove: (store: IDnDStore) => void;
+    static applyInsert: (store: IDnDStore, items: any[]) => void;
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue");function H(e){let t=!1,n;const o=s.effectScope(!0);return(...l)=>(t||(n=o.run(()=>e(...l)),t=!0),n)}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const V=()=>{};function Z(e,t){function n(...o){return new Promise((l,u)=>{Promise.resolve(e(()=>t.apply(this,o),{fn:t,thisArg:this,args:o})).then(l).catch(u)})}return n}function q(...e){let t=0,n,o=!0,l=V,u,a,f,d,v;!s.isRef(e[0])&&typeof e[0]=="object"?{delay:a,trailing:f=!0,leading:d=!0,rejectOnCancel:v=!1}=e[0]:[a,f=!0,d=!0,v=!1]=e;const c=()=>{n&&(clearTimeout(n),n=void 0,l(),l=V)};return r=>{const i=s.toValue(a),g=Date.now()-t,p=()=>u=r();return c(),i<=0?(t=Date.now(),p()):(g>i&&(d||!o)?(t=Date.now(),p()):f&&(u=new Promise((w,L)=>{l=v?L:w,n=setTimeout(()=>{t=Date.now(),o=!0,w(p()),c()},Math.max(0,i-g))})),!d&&!n&&(n=setTimeout(()=>o=!0,i)),o=!1,u)}}function N(e,t=200,n=!1,o=!0,l=!1){return Z(q(t,n,o,l),e)}const M=H(()=>{const e=s.ref([]),t=s.computed(()=>e.value.length>0),n={component:s.ref(null),ref:s.shallowRef(null)},o=s.ref([]),l=s.ref([]),u=s.ref([]),a={zone:s.ref(null),element:s.ref(null)},f={current:s.shallowRef(null),start:s.shallowRef(null),offset:{percent:s.shallowRef(null),pixel:s.shallowRef(null)}},d={w:s.shallowRef(!1),s:s.shallowRef(!1),a:s.shallowRef(!1),d:s.shallowRef(!1)};return{isDragging:t,activeContainer:n,elements:o,draggingElements:e,selectedElements:l,zones:u,hovered:a,pointerPosition:f,keyboard:d}}),$=()=>{const e=s.ref(null),{draggingElements:t,pointerPosition:n,isDragging:o,activeContainer:l}=M();return s.onMounted(()=>{l.ref=e}),s.onBeforeUnmount(()=>{l.ref.value=null}),{elementRef:e,draggingElements:t,pointerPosition:n,isDragging:o}},j=["innerHTML"],W=s.defineComponent({__name:"DefaultOverlay",setup(e){const{elementRef:t,pointerPosition:n,isDragging:o,draggingElements:l}=$(),u=s.computed(()=>{var a,f,d,v;return{transform:`translate3d(${(((a=n.current.value)==null?void 0:a.x)??0)-(((f=n.offset.pixel.value)==null?void 0:f.x)??0)}px, ${(((d=n.current.value)==null?void 0:d.y)??0)-(((v=n.offset.pixel.value)==null?void 0:v.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,f)=>s.unref(o)?(s.openBlock(),s.createElementBlock("div",{key:0,ref_key:"elementRef",ref:t,style:s.normalizeStyle(u.value)},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(s.unref(l),(d,v)=>{var c,h;return s.openBlock(),s.createElementBlock("div",{key:v,innerHTML:d.initialHTML,style:s.normalizeStyle({width:`${(c=d.initialRect)==null?void 0:c.width}px`,height:`${(h=d.initialRect)==null?void 0:h.height}px`})},null,12,j)}),128))],4)):s.createCommentVNode("",!0)}}),U=s.defineComponent({__name:"DragOverlay",setup(e){const{activeContainer:t}=M(),n=s.computed(()=>t.component.value??W);return(o,l)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.value)))}}),G={install(e){e.component("DragOverlay",U);const t=e.mount;e.mount=function(o){const l=t.call(this,o),u=typeof o=="string"?document.querySelector(o):o;if(u&&u instanceof Element&&!u.querySelector("#vue-dnd-kit-overlay")){const a=document.createElement("div");a.id="vue-dnd-kit-overlay",a.style.pointerEvents="none",u.appendChild(a);const f=s.createVNode(U);s.render(f,a),e.__VUE_DND_KIT_OVERLAY__={container:a,vnode:f}}return l};const n=e.unmount;e.unmount=function(){return e.__VUE_DND_KIT_OVERLAY__&&(s.render(null,e.__VUE_DND_KIT_OVERLAY__.container),delete e.__VUE_DND_KIT_OVERLAY__),n.call(this)}}},Y=(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}},K=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),J=(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}}},B=(e,t)=>{const n=t.x-e.x,o=t.y-e.y;return Math.sqrt(n*n+o*o)},X=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),o=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),l=n*o,u=e.width*e.height,a=t.width*t.height;return(l/u*100+l/a*100)/2},F="data-vue-dnd-kit-draggable",_=e=>{e.preventDefault()},Q=e=>{const{elements:t,draggingElements:n,hovered:o,selectedElements:l,isDragging:u}=M(),a=s.ref(null),f=s.computed(()=>{var r;return((r=o.element.value)==null?void 0:r.node)===a.value}),d=s.computed(()=>n.value.some(r=>r.node===a.value)),v=s.computed(()=>{if(!a.value||!u.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(g=>r.groups.includes(g)):!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",_),a.value.addEventListener("drag",_),a.value.setAttribute(F,"true"),a.value.setAttribute("draggable","false")},unregisterElement:()=>{var g,p,w,L;const r=t.value.findIndex(S=>S.node===a.value);r!==-1&&t.value.splice(r,1);const i=l.value.findIndex(S=>S.node===a.value);i!==-1&&l.value.splice(i,1),(g=a.value)==null||g.removeEventListener("dragstart",_),(p=a.value)==null||p.removeEventListener("drag",_),(w=a.value)==null||w.removeAttribute(F),(L=a.value)==null||L.removeAttribute("draggable")},isDragging:d,isOvered:f,isAllowed:v}},b=(e,t)=>e?t.contains(e):!1,ee=e=>{var c,h;const t=T(e.activeContainer.ref.value),n=K(t),o=((c=e.pointerPosition.current.value)==null?void 0:c.x)??0,l=((h=e.pointerPosition.current.value)==null?void 0:h.y)??0,a=!(t&&o>=t.x&&o<=t.x+t.width&&l>=t.y&&l<=t.y+t.height),f=e.draggingElements.value.map(r=>r.node),d=e.elements.value.filter(r=>{if(!r.node)return!1;const i=T(r.node);return i&&t&&Y(i,t)}).map(r=>{const i=T(r.node),g=K(i),p=o>=i.x&&o<=i.x+i.width&&l>=i.y&&l<=i.y+i.height,w=X(i,t),L=B(n,g),S=e.elements.value.filter(C=>C!==r&&C.node&&r.node&&b(r.node,C.node)).length;return{element:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:S,centerDistance:L}}).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}),v=e.zones.value.filter(r=>{if(!r.node||f.some(g=>g&&b(r.node,g)))return!1;const i=T(r.node);return i&&t&&Y(i,t)}).map(r=>{const i=T(r.node),g=K(i),p=o>=i.x&&o<=i.x+i.width&&l>=i.y&&l<=i.y+i.height,w=X(i,t),L=B(n,g),S=e.zones.value.filter(C=>C!==r&&C.node&&r.node&&b(r.node,C.node)).length;return{zone:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:S,centerDistance:L}}).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[...d.map(r=>r.node),...v.map(r=>r.node)]},te=(e,t)=>{const{pointerPosition:n,keyboard:o}=M(),l=(t==null?void 0:t.moveStep)||10;return{onKeyboardStart:d=>{var r;_(d);const v=T(e.value);(r=e.value)==null||r.blur();const c=v.x+v.width/2,h=v.y+v.height/2;n.start.value={x:c,y:h},n.current.value={x:c,y:h},n.offset.pixel.value={x:v.width/2,y:v.height/2},n.offset.percent.value={x:50,y:50}},onKeyboardMove:()=>{if(!n.current.value)return;const d=n.current.value.x,v=n.current.value.y;let c=d,h=v;o.w.value&&(h-=l),o.s.value&&(h+=l),o.a.value&&(c-=l),o.d.value&&(c+=l),n.current.value={x:c,y:h}},onKeyboardEnd:()=>{n.current.value=null,n.start.value=null,n.offset.pixel.value=null,n.offset.percent.value=null}}},ne=e=>{const t=M();return{onPointerStart:u=>{t.pointerPosition.start.value={x:u.clientX,y:u.clientY},t.pointerPosition.current.value={x:u.clientX,y:u.clientY};const{pixel:a,percent:f}=J(e.value,{x:u.clientX,y:u.clientY});t.pointerPosition.offset.pixel.value=a,t.pointerPosition.offset.percent.value=f},onPointerMove:u=>{t.pointerPosition.current.value={x:u.clientX,y:u.clientY}},onPointerEnd:()=>{t.pointerPosition.current.value=null,t.pointerPosition.start.value=null,t.pointerPosition.offset.pixel.value=null,t.pointerPosition.offset.percent.value=null}}},re=(e,t)=>{var A,z;const n=M(),{onPointerStart:o,onPointerMove:l,onPointerEnd:u}=ne(e),{onKeyboardStart:a,onKeyboardMove:f,onKeyboardEnd:d}=te(e,t==null?void 0:t.keyboard);let v=null;const c=y=>{var R,I;const x=n.selectedElements.value.some(m=>m.node===y);if(n.selectedElements.value.length&&x)return n.selectedElements.value.map(m=>{var E,k;return{...m,initialHTML:((E=m.node)==null?void 0:E.outerHTML)??"",initialRect:(k=m.node)==null?void 0:k.getBoundingClientRect()}});n.selectedElements.value=[];const D=n.elements.value.find(m=>m.node===y);return D?[{...D,initialHTML:((R=D.node)==null?void 0:R.outerHTML)??"",initialRect:(I=D.node)==null?void 0:I.getBoundingClientRect()}]:[]},h=y=>{if(!y)return{element:null,zone:null};const x=Array.isArray(y)?y:[y],D=n.draggingElements.value.map(m=>m.node),R=x.map(m=>n.elements.value.find(E=>E.node===m)).filter(m=>!m||D.some(E=>E&&(E===m.node||b(m.node,E)))?!1:m.groups.length?!n.draggingElements.value.some(k=>k.groups.length?!k.groups.some(O=>m.groups.includes(O)):!1):!0),I=x.map(m=>n.zones.value.find(E=>E.node===m)).filter(m=>!m||D.some(E=>E&&(E===m.node||b(m.node,E)))?!1:m.groups.length&&!!n.draggingElements.value.some(k=>k.groups.length?!k.groups.some(O=>m.groups.includes(O)):!1)?null:!0);return{element:R[0]??null,zone:I[0]??null}},r=((A=t==null?void 0:t.sensor)==null?void 0:A.setup)||ee,i=y=>{var R,I,m,E,k,O;const x=n.hovered.element.value,D=n.hovered.zone.value;n.hovered.element.value=y.element,n.hovered.zone.value=y.zone,n.hovered.element.value!==x&&((R=x==null?void 0:x.events)!=null&&R.onLeave&&x.events.onLeave(n),(m=(I=n.hovered.element.value)==null?void 0:I.events)!=null&&m.onHover&&n.hovered.element.value.events.onHover(n)),n.hovered.zone.value!==D&&((E=D==null?void 0:D.events)!=null&&E.onLeave&&D.events.onLeave(n),(O=(k=n.hovered.zone.value)==null?void 0:k.events)!=null&&O.onHover&&n.hovered.zone.value.events.onHover(n))},g=N(()=>{const y=r(n),x=h(y);i(x)},((z=t==null?void 0:t.sensor)==null?void 0:z.throttle)??0),p=()=>{g(),v=requestAnimationFrame(p)},w=()=>p(),L=()=>{v!==null&&(cancelAnimationFrame(v),v=null)};return{activate:y=>{n.draggingElements.value=c(e.value),y instanceof PointerEvent?o(y):a(y),w()},track:y=>{y instanceof KeyboardEvent?f():l(y)},deactivate:(y=!0)=>{var x,D;u(),d(),y&&(n.hovered.zone.value?(D=(x=n.hovered.zone.value.events).onDrop)==null||D.call(x,n):n.draggingElements.value.forEach(R=>{var I,m;return(m=(I=R.events).onEnd)==null?void 0:m.call(I,n)}),n.selectedElements.value=[]),n.draggingElements.value=[],n.hovered.zone.value=null,n.hovered.element.value=null,L()}}},le=H(()=>{let e="",t="",n="",o=null,l=null,u=null,a=null;const{activeContainer:f,keyboard:d}=M(),v=()=>{const g=document.body;e=g.style.userSelect,g.style.userSelect="none",window.addEventListener("contextmenu",_),window.addEventListener("selectstart",_),window.addEventListener("touchstart",_),window.addEventListener("touchmove",_)},c=()=>{const g=document.body;g.style.userSelect=e,g.style.touchAction=t,g.style.overscrollBehavior=n,window.removeEventListener("contextmenu",_),window.removeEventListener("selectstart",_),window.removeEventListener("touchstart",_),window.removeEventListener("touchmove",_)},h=()=>{o&&(document.removeEventListener("pointermove",o),o=null),l&&(document.removeEventListener("pointerup",()=>l==null?void 0:l()),l=null),u&&(document.removeEventListener("wheel",u),u=null),a&&(document.removeEventListener("keydown",a),document.removeEventListener("keypress",a),document.removeEventListener("keyup",a),a=null)},r=(g,p,w)=>{h(),g.target.blur(),w!=null&&w.container&&(f.component.value=s.markRaw(w.container));const{activate:L,track:S,deactivate:C}=re(p,w);l=(P=!0)=>{f.component.value=null,c(),C(P),h()},o=P=>S(P),u=P=>S(P),a=P=>{P.type==="keydown"&&i(P,!0),P.type==="keypress"&&i(P,!0),P.type==="keyup"&&(P.code==="Escape"&&(l==null||l(!1)),P.code==="Enter"&&(l==null||l()),i(P,!1)),S(P)},v(),L(g),document.addEventListener("pointermove",o),document.addEventListener("pointerup",()=>l==null?void 0:l()),document.addEventListener("wheel",u),document.addEventListener("keydown",a),document.addEventListener("keypress",a),document.addEventListener("keyup",a)},i=(g,p=!0)=>{g.code==="KeyW"&&(d.w.value=p),g.code==="KeyA"&&(d.a.value=p),g.code==="KeyS"&&(d.s.value=p),g.code==="KeyD"&&(d.d.value=p)};return{handleDragStart:r}}),oe=e=>{const{elementRef:t,registerElement:n,unregisterElement:o,isDragging:l,isOvered:u,isAllowed:a}=Q(e),{pointerPosition:f}=M(),{handleDragStart:d}=le(),v=c=>d(c,t,e);return s.onMounted(n),s.onBeforeUnmount(o),{pointerPosition:f,elementRef:t,isDragging:l,isOvered:u,isAllowed:a,handleDragStart:v}},se=e=>{const{zones:t,hovered:n,draggingElements:o,isDragging:l}=M(),u=s.ref(null),a=s.computed(()=>{var c;return((c=n.zone.value)==null?void 0:c.node)===u.value}),f=s.computed(()=>{if(!u.value||!l.value)return!1;const c=t.value.find(h=>h.node===u.value);return c!=null&&c.groups.length?!o.value.some(h=>h.groups.length?!h.groups.some(r=>c.groups.includes(r)):!1):!0});return{elementRef:u,registerZone:()=>{if(!u.value)throw new Error("elementRef is not set");t.value.push({node:u.value,groups:(e==null?void 0:e.groups)??[],events:(e==null?void 0:e.events)??{},data:(e==null?void 0:e.data)??void 0}),u.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!u.value)throw new Error("elementRef is not set");const c=t.value.findIndex(h=>h.node===u.value);c!==-1&&t.value.splice(c,1)},isOvered:a,isAllowed:f}},ae=e=>{const{elementRef:t,registerZone:n,unregisterZone:o,isOvered:l,isAllowed:u}=se(e);return s.onMounted(n),s.onBeforeUnmount(o),{elementRef:t,isOvered:l,isAllowed:u}},ie=e=>{const{selectedElements:t,elements:n}=M(),o=s.computed(()=>n.value.find(c=>c.node===e.value)),l=s.computed(()=>t.value.some(c=>c.node===e.value)),u=s.computed(()=>e.value?t.value.some(c=>c.node&&b(c.node,e.value)):!1),a=s.computed(()=>e.value?t.value.some(c=>c.node&&b(e.value,c.node)):!1),f=()=>{o.value&&(t.value=t.value.filter(c=>c.node!==e.value))},d=()=>{o.value&&(u.value&&(t.value=t.value.filter(c=>c.node&&!b(c.node,e.value))),a.value&&(t.value=t.value.filter(c=>c.node&&!b(e.value,c.node))),t.value.push(o.value))};return{handleUnselect:f,handleSelect:d,handleToggleSelect:()=>{o.value&&(t.value.some(c=>c.node===e.value)?f():d())},isSelected:l,isParentOfSelected:u}};exports.default=G;exports.getBoundingBox=T;exports.useDnDStore=M;exports.useDraggable=oe;exports.useDroppable=ae;exports.useSelection=ie;
+"use strict";var J=Object.defineProperty;var Q=(n,e,t)=>e in n?J(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var R=(n,e,t)=>Q(n,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),w=class w{};R(w,"remove",(e,t)=>{if(!e||t===void 0)return;const[r]=e.splice(t,1);return r}),R(w,"insert",(e,t,r)=>{!e||t===void 0||e.splice(t,0,r)}),R(w,"move",(e,t,r,o)=>{if(!e||!r||t===void 0||o===void 0)return;const a=w.remove(e,t);w.insert(r,o,a)}),R(w,"swap",(e,t,r,o)=>{if(!e||!r||t===void 0||o===void 0)return;const a=e[t],l=r[o];e[t]=l,r[o]=a}),R(w,"copy",(e,t,r,o)=>{if(!e||t===void 0||!r||o===void 0)return;const a=e[t];w.insert(r,o,a)}),R(w,"applyTransfer",e=>{const t=e.hovered.element.value,r=e.hovered.zone.value;t?e.draggingElements.value.forEach(o=>{var a,l,i,s;return w.move((a=o.data)==null?void 0:a.source,(l=o.data)==null?void 0:l.index,(i=t.data)==null?void 0:i.source,(s=t.data)==null?void 0:s.index)}):e.draggingElements.value.forEach(o=>{var a,l,i,s,f;return w.move((a=o.data)==null?void 0:a.source,(l=o.data)==null?void 0:l.index,(i=r==null?void 0:r.data)==null?void 0:i.source,(f=(s=r==null?void 0:r.data)==null?void 0:s.source)==null?void 0:f.length)})}),R(w,"applyCopy",e=>{const t=e.hovered.element.value,r=e.hovered.zone.value;t?e.draggingElements.value.forEach(o=>{var a,l,i,s;return w.copy((a=o.data)==null?void 0:a.source,(l=o.data)==null?void 0:l.index,(i=t.data)==null?void 0:i.source,(s=t.data)==null?void 0:s.index)}):e.draggingElements.value.forEach(o=>{var a,l,i,s,f;return w.copy((a=o.data)==null?void 0:a.source,(l=o.data)==null?void 0:l.index,(i=r==null?void 0:r.data)==null?void 0:i.source,(f=(s=r==null?void 0:r.data)==null?void 0:s.source)==null?void 0:f.length)})}),R(w,"applySwap",e=>{var o,a,l,i;const t=e.hovered.element.value,r=e.hovered.zone.value;if(t&&e.draggingElements.value.length===1){const s=e.draggingElements.value[0];w.swap((o=s.data)==null?void 0:o.source,(a=s.data)==null?void 0:a.index,(l=t.data)==null?void 0:l.source,(i=t.data)==null?void 0:i.index)}else e.draggingElements.value.forEach(s=>{var f,v,g,u,d;return w.move((f=s.data)==null?void 0:f.source,(v=s.data)==null?void 0:v.index,(g=r==null?void 0:r.data)==null?void 0:g.source,(d=(u=r==null?void 0:r.data)==null?void 0:u.source)==null?void 0:d.length)})}),R(w,"applyRemove",e=>{e.draggingElements.value.forEach(t=>{var r,o;(r=t.data)!=null&&r.source&&((o=t.data)==null?void 0:o.index)!==void 0&&w.remove(t.data.source,t.data.index)})}),R(w,"applyInsert",(e,t)=>{const r=e.hovered.element.value,o=e.hovered.zone.value;r&&t.length>0?t.forEach(a=>{var l,i;w.insert((l=r.data)==null?void 0:l.source,(i=r.data)==null?void 0:i.index,a)}):t.forEach(a=>{var l,i,s;w.insert((l=o==null?void 0:o.data)==null?void 0:l.source,(s=(i=o==null?void 0:o.data)==null?void 0:i.source)==null?void 0:s.length,a)})});let B=w;function Z(n){return c.getCurrentScope()?(c.onScopeDispose(n),!0):!1}function W(n){let e=!1,t;const r=c.effectScope(!0);return(...o)=>(e||(t=r.run(()=>n(...o)),e=!0),t)}const ee=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const te=Object.prototype.toString,ne=n=>te.call(n)==="[object Object]",j=()=>{};function re(n,e){function t(...r){return new Promise((o,a)=>{Promise.resolve(n(()=>e.apply(this,r),{fn:e,thisArg:this,args:r})).then(o).catch(a)})}return t}function oe(...n){let e=0,t,r=!0,o=j,a,l,i,s,f;!c.isRef(n[0])&&typeof n[0]=="object"?{delay:l,trailing:i=!0,leading:s=!0,rejectOnCancel:f=!1}=n[0]:[l,i=!0,s=!0,f=!1]=n;const v=()=>{t&&(clearTimeout(t),t=void 0,o(),o=j)};return u=>{const d=c.toValue(l),E=Date.now()-e,m=()=>a=u();return v(),d<=0?(e=Date.now(),m()):(E>d&&(s||!r)?(e=Date.now(),m()):i&&(a=new Promise((h,x)=>{o=f?x:h,t=setTimeout(()=>{e=Date.now(),r=!0,h(m()),v()},Math.max(0,d-E))})),!s&&!t&&(t=setTimeout(()=>r=!0,d)),r=!1,a)}}function U(n){return Array.isArray(n)?n:[n]}function le(n,e=200,t=!1,r=!0,o=!1){return re(oe(e,t,r,o),n)}function ae(n,e,t){return c.watch(n,e,{...t,immediate:!0})}const G=ee?window:void 0;function ie(n){var e;const t=c.toValue(n);return(e=t==null?void 0:t.$el)!=null?e:t}function H(...n){const e=[],t=()=>{e.forEach(i=>i()),e.length=0},r=(i,s,f,v)=>(i.addEventListener(s,f,v),()=>i.removeEventListener(s,f,v)),o=c.computed(()=>{const i=U(c.toValue(n[0])).filter(s=>s!=null);return i.every(s=>typeof s!="string")?i:void 0}),a=ae(()=>{var i,s;return[(s=(i=o.value)==null?void 0:i.map(f=>ie(f)))!=null?s:[G].filter(f=>f!=null),U(c.toValue(o.value?n[1]:n[0])),U(c.unref(o.value?n[2]:n[1])),c.toValue(o.value?n[3]:n[2])]},([i,s,f,v])=>{if(t(),!(i!=null&&i.length)||!(s!=null&&s.length)||!(f!=null&&f.length))return;const g=ne(v)?{...v}:v;e.push(...i.flatMap(u=>s.flatMap(d=>f.map(E=>r(u,d,E,g)))))},{flush:"post"}),l=()=>{a(),t()};return Z(t),l}const se={ctrl:"control",command:"meta",cmd:"meta",option:"alt",up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright"};function ue(n={}){const{reactive:e=!1,target:t=G,aliasMap:r=se,passive:o=!0,onEventFired:a=j}=n,l=c.reactive(new Set),i={toJSON(){return{}},current:l},s=e?c.reactive(i):i,f=new Set,v=new Set;function g(m,h){m in s&&(e?s[m]=h:s[m].value=h)}function u(){l.clear();for(const m of v)g(m,!1)}function d(m,h){var x,L;const p=(x=m.key)==null?void 0:x.toLowerCase(),O=[(L=m.code)==null?void 0:L.toLowerCase(),p].filter(Boolean);p&&(h?l.add(p):l.delete(p));for(const _ of O)v.add(_),g(_,h);p==="meta"&&!h?(f.forEach(_=>{l.delete(_),g(_,!1)}),f.clear()):typeof m.getModifierState=="function"&&m.getModifierState("Meta")&&h&&[...l,...O].forEach(_=>f.add(_))}H(t,"keydown",m=>(d(m,!0),a(m)),{passive:o}),H(t,"keyup",m=>(d(m,!1),a(m)),{passive:o}),H("blur",u,{passive:o}),H("focus",u,{passive:o});const E=new Proxy(s,{get(m,h,x){if(typeof h!="string")return Reflect.get(m,h,x);if(h=h.toLowerCase(),h in r&&(h=r[h]),!(h in s))if(/[+_-]/.test(h)){const p=h.split(/[+_-]/g).map(z=>z.trim());s[h]=c.computed(()=>p.map(z=>c.toValue(E[z])).every(Boolean))}else s[h]=c.shallowRef(!1);const L=Reflect.get(m,h,x);return e?c.toValue(L):L}});return E}const b=W(()=>{const n=c.ref([]),e=c.computed(()=>n.value.length>0),t={component:c.ref(null),ref:c.shallowRef(null)},r=c.ref([]),o=c.ref([]),a=c.ref([]),l={zone:c.ref(null),element:c.ref(null)},i={current:c.shallowRef(null),start:c.shallowRef(null),offset:{percent:c.shallowRef(null),pixel:c.shallowRef(null)}},{w:s,s:f,a:v,d:g,ctrl:u,shift:d,alt:E,meta:m}=ue();return{isDragging:e,activeContainer:t,elements:r,draggingElements:n,selectedElements:o,zones:a,hovered:l,pointerPosition:i,keyboard:{w:s,s:f,a:v,d:g,ctrl:u,shift:d,alt:E,meta:m}}}),ce=()=>{const n=c.ref(null),{draggingElements:e,pointerPosition:t,isDragging:r,activeContainer:o}=b();return c.onMounted(()=>{o.ref=n}),c.onBeforeUnmount(()=>{o.ref.value=null}),{elementRef:n,draggingElements:e,pointerPosition:t,isDragging:r}},de=["innerHTML"],ve=c.defineComponent({__name:"DefaultOverlay",setup(n){const{elementRef:e,pointerPosition:t,isDragging:r,draggingElements:o}=ce(),a=c.computed(()=>{var l,i,s,f;return{transform:`translate3d(${(((l=t.current.value)==null?void 0:l.x)??0)-(((i=t.offset.pixel.value)==null?void 0:i.x)??0)}px, ${(((s=t.current.value)==null?void 0:s.y)??0)-(((f=t.offset.pixel.value)==null?void 0:f.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(l,i)=>c.unref(r)?(c.openBlock(),c.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:c.normalizeStyle(a.value)},[(c.openBlock(!0),c.createElementBlock(c.Fragment,null,c.renderList(c.unref(o),(s,f)=>{var v,g;return c.openBlock(),c.createElementBlock("div",{key:f,innerHTML:s.initialHTML,style:c.normalizeStyle({width:`${(v=s.initialRect)==null?void 0:v.width}px`,height:`${(g=s.initialRect)==null?void 0:g.height}px`})},null,12,de)}),128))],4)):c.createCommentVNode("",!0)}}),F=c.defineComponent({__name:"DragOverlay",setup(n){const{activeContainer:e}=b(),t=c.computed(()=>e.component.value??ve);return(r,o)=>(c.openBlock(),c.createBlock(c.resolveDynamicComponent(t.value)))}}),fe={install(n){n.component("DragOverlay",F);const e=n.mount;n.mount=function(r){const o=e.call(this,r),a=typeof r=="string"?document.querySelector(r):r;if(a&&a instanceof Element&&!a.querySelector("#vue-dnd-kit-overlay")){const l=document.createElement("div");l.id="vue-dnd-kit-overlay",l.style.pointerEvents="none",a.appendChild(l);const i=c.createVNode(F);c.render(i,l),n.__VUE_DND_KIT_OVERLAY__={container:l,vnode:i}}return o};const t=n.unmount;n.unmount=function(){return n.__VUE_DND_KIT_OVERLAY__&&(c.render(null,n.__VUE_DND_KIT_OVERLAY__.container),delete n.__VUE_DND_KIT_OVERLAY__),t.call(this)}}},X=(n,e)=>n.x<e.x+e.width&&n.x+n.width>e.x&&n.y<e.y+e.height&&n.y+n.height>e.y,A=n=>{if(!n)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=n.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}},Y=n=>({x:n.x+n.width/2,y:n.y+n.height/2}),me=(n,e)=>{const t=A(n);return{pixel:{x:e.x-t.x,y:e.y-t.y},percent:{x:(e.x-t.x)/t.width*100,y:(e.y-t.y)/t.height*100}}},N=(n,e)=>{const t=e.x-n.x,r=e.y-n.y;return Math.sqrt(t*t+r*r)},$=(n,e)=>{const t=Math.max(0,Math.min(n.x+n.width,e.x+e.width)-Math.max(n.x,e.x)),r=Math.max(0,Math.min(n.y+n.height,e.y+e.height)-Math.max(n.y,e.y)),o=t*r,a=n.width*n.height,l=e.width*e.height;return(o/a*100+o/l*100)/2},q="data-vue-dnd-kit-draggable",k=n=>{n.preventDefault()},ge=n=>{const{elements:e,draggingElements:t,hovered:r,selectedElements:o,isDragging:a}=b(),l=c.ref(null),i=c.computed(()=>{var u;return((u=r.element.value)==null?void 0:u.node)===l.value}),s=c.computed(()=>t.value.some(u=>u.node===l.value)),f=c.computed(()=>{if(!l.value||!a.value)return!1;const u=e.value.find(d=>d.node===l.value);return u!=null&&u.groups.length?!t.value.some(d=>d.groups.length?!d.groups.some(E=>u.groups.includes(E)):!1):!0});return{elementRef:l,registerElement:()=>{if(!l.value)throw new Error("ElementRef is not set");e.value.push({node:l.value,groups:(n==null?void 0:n.groups)??[],layer:(n==null?void 0:n.layer)??null,defaultLayer:(n==null?void 0:n.layer)??null,events:(n==null?void 0:n.events)??{},data:(n==null?void 0:n.data)??null}),l.value.addEventListener("dragstart",k),l.value.addEventListener("drag",k),l.value.setAttribute(q,"true"),l.value.setAttribute("draggable","false")},unregisterElement:()=>{var E,m,h,x;const u=e.value.findIndex(L=>L.node===l.value);u!==-1&&e.value.splice(u,1);const d=o.value.findIndex(L=>L.node===l.value);d!==-1&&o.value.splice(d,1),(E=l.value)==null||E.removeEventListener("dragstart",k),(m=l.value)==null||m.removeEventListener("drag",k),(h=l.value)==null||h.removeAttribute(q),(x=l.value)==null||x.removeAttribute("draggable")},isDragging:s,isOvered:i,isAllowed:f}},K=(n,e)=>n?e.contains(n):!1,he=n=>{var v,g;const e=A(n.activeContainer.ref.value),t=Y(e),r=((v=n.pointerPosition.current.value)==null?void 0:v.x)??0,o=((g=n.pointerPosition.current.value)==null?void 0:g.y)??0,l=!(e&&r>=e.x&&r<=e.x+e.width&&o>=e.y&&o<=e.y+e.height),i=n.draggingElements.value.map(u=>u.node),s=n.elements.value.filter(u=>{if(!u.node)return!1;const d=A(u.node);return d&&e&&X(d,e)}).map(u=>{const d=A(u.node),E=Y(d),m=r>=d.x&&r<=d.x+d.width&&o>=d.y&&o<=d.y+d.height,h=$(d,e),x=N(t,E),L=n.elements.value.filter(p=>p!==u&&p.node&&u.node&&K(u.node,p.node)).length;return{element:u,node:u.node,isPointerInElement:m,overlapPercent:h,depth:L,centerDistance:x}}).sort((u,d)=>{if(!l){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}),f=n.zones.value.filter(u=>{if(!u.node||i.some(E=>E&&K(u.node,E)))return!1;const d=A(u.node);return d&&e&&X(d,e)}).map(u=>{const d=A(u.node),E=Y(d),m=r>=d.x&&r<=d.x+d.width&&o>=d.y&&o<=d.y+d.height,h=$(d,e),x=N(t,E),L=n.zones.value.filter(p=>p!==u&&p.node&&u.node&&K(u.node,p.node)).length;return{zone:u,node:u.node,isPointerInElement:m,overlapPercent:h,depth:L,centerDistance:x}}).sort((u,d)=>{if(!l){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});return[...s.map(u=>u.node),...f.map(u=>u.node)]},ye=(n,e)=>{const{pointerPosition:t,keyboard:r}=b(),o=(e==null?void 0:e.moveStep)||10;return{onKeyboardStart:s=>{var u;k(s);const f=A(n.value);(u=n.value)==null||u.blur();const v=f.x+f.width/2,g=f.y+f.height/2;t.start.value={x:v,y:g},t.current.value={x:v,y:g},t.offset.pixel.value={x:f.width/2,y:f.height/2},t.offset.percent.value={x:50,y:50}},onKeyboardMove:()=>{if(!t.current.value)return;const s=t.current.value.x,f=t.current.value.y;let v=s,g=f;r.w.value&&(g-=o),r.s.value&&(g+=o),r.a.value&&(v-=o),r.d.value&&(v+=o),t.current.value={x:v,y:g}},onKeyboardEnd:()=>{t.current.value=null,t.start.value=null,t.offset.pixel.value=null,t.offset.percent.value=null}}},Ee=n=>{const e=b();return{onPointerStart:a=>{e.pointerPosition.start.value={x:a.clientX,y:a.clientY},e.pointerPosition.current.value={x:a.clientX,y:a.clientY};const{pixel:l,percent:i}=me(n.value,{x:a.clientX,y:a.clientY});e.pointerPosition.offset.pixel.value=l,e.pointerPosition.offset.percent.value=i},onPointerMove:a=>{e.pointerPosition.current.value={x:a.clientX,y:a.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},pe=(n,e)=>{var O,_;const t=b(),{onPointerStart:r,onPointerMove:o,onPointerEnd:a}=Ee(n),{onKeyboardStart:l,onKeyboardMove:i,onKeyboardEnd:s}=ye(n,e==null?void 0:e.keyboard);let f=null;const v=P=>{var T,I;const D=t.selectedElements.value.some(y=>y.node===P);if(t.selectedElements.value.length&&D)return t.selectedElements.value.map(y=>{var S,C;return{...y,initialHTML:((S=y.node)==null?void 0:S.outerHTML)??"",initialRect:(C=y.node)==null?void 0:C.getBoundingClientRect()}});t.selectedElements.value=[];const M=t.elements.value.find(y=>y.node===P);return M?[{...M,initialHTML:((T=M.node)==null?void 0:T.outerHTML)??"",initialRect:(I=M.node)==null?void 0:I.getBoundingClientRect()}]:[]},g=P=>{if(!P)return{element:null,zone:null};const D=Array.isArray(P)?P:[P],M=t.draggingElements.value.map(y=>y.node),T=D.map(y=>t.elements.value.find(S=>S.node===y)).filter(y=>!y||M.some(S=>S&&(S===y.node||K(y.node,S)))?!1:y.groups.length?!t.draggingElements.value.some(C=>C.groups.length?!C.groups.some(V=>y.groups.includes(V)):!1):!0),I=D.map(y=>t.zones.value.find(S=>S.node===y)).filter(y=>!y||M.some(S=>S&&(S===y.node||K(y.node,S)))?!1:y.groups.length&&!!t.draggingElements.value.some(C=>C.groups.length?!C.groups.some(V=>y.groups.includes(V)):!1)?null:!0);return{element:T[0]??null,zone:I[0]??null}},u=((O=e==null?void 0:e.sensor)==null?void 0:O.setup)||he,d=P=>{var T,I,y,S,C,V;const D=t.hovered.element.value,M=t.hovered.zone.value;t.hovered.element.value=P.element,t.hovered.zone.value=P.zone,t.hovered.element.value!==D&&((T=D==null?void 0:D.events)!=null&&T.onLeave&&D.events.onLeave(t),(y=(I=t.hovered.element.value)==null?void 0:I.events)!=null&&y.onHover&&t.hovered.element.value.events.onHover(t)),t.hovered.zone.value!==M&&((S=M==null?void 0:M.events)!=null&&S.onLeave&&M.events.onLeave(t),(V=(C=t.hovered.zone.value)==null?void 0:C.events)!=null&&V.onHover&&t.hovered.zone.value.events.onHover(t))},E=le(()=>{const P=u(t),D=g(P);d(D)},((_=e==null?void 0:e.sensor)==null?void 0:_.throttle)??0),m=()=>{E(),f=requestAnimationFrame(m)},h=()=>m(),x=()=>{f!==null&&(cancelAnimationFrame(f),f=null)};return{activate:P=>{t.draggingElements.value=v(n.value),P instanceof PointerEvent?r(P):l(P),h()},track:P=>{P instanceof KeyboardEvent?i():o(P)},deactivate:(P=!0)=>{var D,M;a(),s(),P&&(t.hovered.zone.value?(M=(D=t.hovered.zone.value.events).onDrop)==null||M.call(D,t):t.draggingElements.value.forEach(T=>{var I,y;return(y=(I=T.events).onEnd)==null?void 0:y.call(I,t)}),t.selectedElements.value=[]),t.draggingElements.value=[],t.hovered.zone.value=null,t.hovered.element.value=null,x()}}},we=W(()=>{let n="",e="",t="",r=null,o=null,a=null,l=null,i=null;const{activeContainer:s}=b(),f=()=>{const d=document.body;n=d.style.userSelect,d.style.userSelect="none",window.addEventListener("contextmenu",k),window.addEventListener("selectstart",k),window.addEventListener("touchstart",k),window.addEventListener("touchmove",k)},v=()=>{const d=document.body;d.style.userSelect=n,d.style.touchAction=e,d.style.overscrollBehavior=t,window.removeEventListener("contextmenu",k),window.removeEventListener("selectstart",k),window.removeEventListener("touchstart",k),window.removeEventListener("touchmove",k)},g=()=>{r&&(document.removeEventListener("pointermove",r),r=null),o&&(document.removeEventListener("pointerup",o),o=null),a&&(a=null),l&&(document.removeEventListener("wheel",l),l=null),i&&(document.removeEventListener("keydown",i),document.removeEventListener("keypress",i),document.removeEventListener("keyup",i),i=null)};return{handleDragStart:(d,E,m)=>{g(),d.target.blur(),m!=null&&m.container&&(s.component.value=c.markRaw(m.container));const{activate:h,track:x,deactivate:L}=pe(E,m);o=()=>{s.component.value=null,v(),L(!0),g()},a=()=>{s.component.value=null,v(),L(!1),g()},r=p=>x(p),l=p=>x(p),i=p=>{p.type==="keyup"&&(p.code==="Escape"&&(a==null||a()),p.code==="Enter"&&(o==null||o())),x(p)},f(),h(d),document.addEventListener("pointermove",r),document.addEventListener("pointerup",o),document.addEventListener("wheel",l),document.addEventListener("keydown",i),document.addEventListener("keypress",i),document.addEventListener("keyup",i)}}}),Pe=n=>{const{elementRef:e,registerElement:t,unregisterElement:r,isDragging:o,isOvered:a,isAllowed:l}=ge(n),{pointerPosition:i}=b(),{handleDragStart:s}=we(),f=v=>s(v,e,n);return c.onMounted(t),c.onBeforeUnmount(r),{pointerPosition:i,elementRef:e,isDragging:o,isOvered:a,isAllowed:l,handleDragStart:f}},xe=n=>{const{zones:e,hovered:t,draggingElements:r,isDragging:o}=b(),a=c.ref(null),l=c.computed(()=>{var v;return((v=t.zone.value)==null?void 0:v.node)===a.value}),i=c.computed(()=>{if(!a.value||!o.value)return!1;const v=e.value.find(g=>g.node===a.value);return v!=null&&v.groups.length?!r.value.some(g=>g.groups.length?!g.groups.some(u=>v.groups.includes(u)):!1):!0});return{elementRef:a,registerZone:()=>{if(!a.value)throw new Error("elementRef is not set");e.value.push({node:a.value,groups:(n==null?void 0:n.groups)??[],events:(n==null?void 0:n.events)??{},data:(n==null?void 0:n.data)??void 0}),a.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!a.value)throw new Error("elementRef is not set");const v=e.value.findIndex(g=>g.node===a.value);v!==-1&&e.value.splice(v,1)},isOvered:l,isAllowed:i}},Se=n=>{const{elementRef:e,registerZone:t,unregisterZone:r,isOvered:o,isAllowed:a}=xe(n);return c.onMounted(t),c.onBeforeUnmount(r),{elementRef:e,isOvered:o,isAllowed:a}},Le=n=>{const{selectedElements:e,elements:t}=b(),r=c.computed(()=>t.value.find(v=>v.node===n.value)),o=c.computed(()=>e.value.some(v=>v.node===n.value)),a=c.computed(()=>n.value?e.value.some(v=>v.node&&K(v.node,n.value)):!1),l=c.computed(()=>n.value?e.value.some(v=>v.node&&K(n.value,v.node)):!1),i=()=>{r.value&&(e.value=e.value.filter(v=>v.node!==n.value))},s=()=>{r.value&&(a.value&&(e.value=e.value.filter(v=>v.node&&!K(v.node,n.value))),l.value&&(e.value=e.value.filter(v=>v.node&&!K(n.value,v.node))),e.value.push(r.value))};return{handleUnselect:i,handleSelect:s,handleToggleSelect:()=>{r.value&&(e.value.some(v=>v.node===n.value)?i():s())},isSelected:o,isParentOfSelected:a}};exports.DnDOperations=B;exports.default=fe;exports.getBoundingBox=A;exports.useDnDStore=b;exports.useDraggable=Pe;exports.useDroppable=Se;exports.useSelection=Le;