@vue-dnd-kit/core 0.0.17 → 0.0.18

package/dist/composables/useDnDStore.d.ts

@@ -1,4 +1,4 @@
-import type { IDnDStore } from '../types';
+import type { IDnDStore } from "../types";
 /**
  * Global store for managing drag and drop state.
  * Uses singleton pattern to ensure single source of truth across the application.

package/dist/composables/useDraggable.d.ts

@@ -1,4 +1,4 @@
-import type { IUseDragOptions } from '../types';
+import type { IUseDragOptions } from "../types";
 /**
  * Main hook for making elements draggable.
  * Provides all necessary functionality for drag and drop operations.

package/dist/composables/useDroppable.d.ts

@@ -1,4 +1,4 @@
-import type { IUseDropOptions } from '../types';
+import type { IUseDropOptions } from "../types";
 /**
  * Hook for creating drop zones that can accept dragged elements.
  * Manages drop zone registration and interaction states.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import DragOverlay from './components/DragOverlay.vue';
+import DragOverlay from "./components/DragOverlay";
 import { useDnDStore } from './composables/useDnDStore';
 import { useDraggable } from './composables/useDraggable';
 import { useDroppable } from './composables/useDroppable';

package/dist/managers/useElementManager.d.ts

@@ -1,4 +1,4 @@
-import type { IUseDragOptions } from '../types';
+import type { IUseDragOptions } from "../types";
 /**
  * Hook for managing draggable elements and their interactions.
  * Provides methods for registering, unregistering elements,

package/dist/managers/useZoneManager.d.ts

@@ -1,4 +1,4 @@
-import type { IUseDropOptions } from '../types';
+import type { IUseDropOptions } from "../types";
 export declare const useZoneManager: (options?: IUseDropOptions) => {
     elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
     registerZone: () => void;

package/dist/types/index.d.ts

@@ -0,0 +1,169 @@
+import type { Component, Ref } 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;
+  /** 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;
+}

package/dist/utils/geometry.d.ts

@@ -1,4 +1,4 @@
-import type { IBoundingBox, IPoint } from '../types';
+import type { 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;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");let G=!1,B;const L=()=>(G||(B=n.effectScope(!0).run(()=>({isDragging:n.computed(()=>B.draggingElements.value.length>0),activeContainer:{component:n.ref(null),ref:n.ref(null)},elements:n.ref([]),draggingElements:n.ref([]),selectedElements:n.ref([]),zones:n.ref([]),hovered:{zone:n.ref(null),element:n.ref(null)},pointerPosition:{current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}}})),G=!0),B),W=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:u,isDragging:c,activeContainer:d}=L();return n.onMounted(()=>{d.ref=t}),n.onBeforeUnmount(()=>{d.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:u,isDragging:c}},b=["innerHTML"],ee=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:u,isDragging:c,draggingElements:d}=W(),r=n.computed(()=>{var s,m,h,y;return{transform:`translate3d(${(((s=u.current.value)==null?void 0:s.x)??0)-(((m=u.offset.pixel.value)==null?void 0:m.x)??0)}px, ${(((h=u.current.value)==null?void 0:h.y)??0)-(((y=u.offset.pixel.value)==null?void 0:y.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,m)=>n.unref(c)?(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(d),(h,y)=>{var i,E;return n.openBlock(),n.createElementBlock("div",{key:y,innerHTML:h.initialHTML,style:n.normalizeStyle({width:`${(i=h.initialRect)==null?void 0:i.width}px`,height:`${(E=h.initialRect)==null?void 0:E.height}px`})},null,12,b)}),128))],4)):n.createCommentVNode("",!0)}}),te=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=L(),u=n.computed(()=>e.component.value??ee);return(c,d)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(u.value)))}}),ne="data-dnd-draggable",re=t=>{const{elements:e,draggingElements:u,hovered:c,selectedElements:d,isDragging:r}=L(),s=n.ref(null),m=n.computed(()=>{var p;return((p=c.element.value)==null?void 0:p.node)===s.value}),h=n.computed(()=>u.value.some(p=>p.node===s.value)),y=n.computed(()=>{if(!s.value||!r.value)return!1;const p=e.value.find(D=>D.node===s.value);return p!=null&&p.groups.length?!u.value.some(D=>D.groups.length?!D.groups.some(o=>p.groups.includes(o)):!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}),s.value.setAttribute(ne,"true")},unregisterElement:()=>{const p=e.value.findIndex(o=>o.node===s.value);p!==-1&&e.value.splice(p,1);const D=d.value.findIndex(o=>o.node===s.value);D!==-1&&d.value.splice(D,1)},isDragging:h,isOvered:m,isAllowed:y}},oe=()=>{let t="",e="",u="";const c=()=>{const s=document.body;t=s.style.userSelect,e=s.style.touchAction,u=s.style.overscrollBehavior,s.style.userSelect="none",s.style.touchAction="none",s.style.overscrollBehavior="none",window.addEventListener("contextmenu",r),window.addEventListener("selectstart",r),window.addEventListener("touchstart",r),window.addEventListener("touchmove",r)},d=()=>{const s=document.body;s.style.userSelect=t,s.style.touchAction=e,s.style.overscrollBehavior=u,window.removeEventListener("contextmenu",r),window.removeEventListener("selectstart",r),window.removeEventListener("touchstart",r),window.removeEventListener("touchmove",r)},r=s=>s.preventDefault();return{disableInteractions:c,enableInteractions:d}},J=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,k=t=>{if(!t)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=t.getBoundingClientRect();return{bottom:e.bottom,left:e.left,right:e.right,top:e.top,x:e.x,y:e.y,width:e.width,height:e.height}},U=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),le=(t,e)=>{const u=k(t);return{pixel:{x:e.x-u.x,y:e.y-u.y},percent:{x:(e.x-u.x)/u.width*100,y:(e.y-u.y)/u.height*100}}},K=(t,e)=>{const u=e.x-t.x,c=e.y-t.y;return Math.sqrt(u*u+c*c)},M=(t,e)=>t?e.contains(t):!1,ie=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:s,percent:m}=le(t.value,{x:r.clientX,y:r.clientY});e.pointerPosition.offset.pixel.value=s,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}}},se=t=>{const e=L(),{onPointerStart:u,onPointerMove:c,onPointerEnd:d}=ie(t);let r=null;const s=o=>{var v,x;const g=e.selectedElements.value.some(P=>P.node===o);if(e.selectedElements.value.length&&g)return e.selectedElements.value.map(P=>{var C,H;return{...P,initialHTML:((C=P.node)==null?void 0:C.outerHTML)??"",initialRect:(H=P.node)==null?void 0:H.getBoundingClientRect()}});e.selectedElements.value=[];const f=e.elements.value.find(P=>P.node===o);return f?[{...f,initialHTML:((v=f.node)==null?void 0:v.outerHTML)??"",initialRect:(x=f.node)==null?void 0:x.getBoundingClientRect()}]:[]},m=(o,g)=>{const f=Math.max(0,Math.min(o.x+o.width,g.x+g.width)-Math.max(o.x,g.x)),v=Math.max(0,Math.min(o.y+o.height,g.y+g.height)-Math.max(o.y,g.y)),x=f*v,P=o.width*o.height,C=g.width*g.height;return(x/P*100+x/C*100)/2},h=()=>{var Z,A,X,Y,$,F,q,N,j,V;const o=k(e.activeContainer.ref.value),g=U(o),f=((Z=e.pointerPosition.current.value)==null?void 0:Z.x)??0,v=((A=e.pointerPosition.current.value)==null?void 0:A.y)??0,P=!(o&&f>=o.x&&f<=o.x+o.width&&v>=o.y&&v<=o.y+o.height),C=e.draggingElements.value.map(l=>l.node),H=e.elements.value.filter(l=>{if(!l.node||C.some(w=>w&&M(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(I=>l.groups.includes(I)):!1))return!1;const a=k(l.node);return a&&o&&J(a,o)}).map(l=>{const a=k(l.node),w=U(a),S=f>=a.x&&f<=a.x+a.width&&v>=a.y&&v<=a.y+a.height,I=m(a,o),T=K(g,w),R=e.elements.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{element:l,isPointerInElement:S,overlapPercent:I,depth:R,centerDistance:T}}).sort((l,a)=>{if(!P){if(l.isPointerInElement&&a.isPointerInElement)return a.depth-l.depth;if(l.isPointerInElement!==a.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-a.overlapPercent)<=1?l.centerDistance-a.centerDistance:a.overlapPercent-l.overlapPercent}),Q=e.zones.value.filter(l=>{if(!l.node||C.some(w=>w&&M(l.node,w))||l.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(I=>l.groups.includes(I)):!1))return!1;const a=k(l.node);return a&&o&&J(a,o)}).map(l=>{const a=k(l.node),w=U(a),S=f>=a.x&&f<=a.x+a.width&&v>=a.y&&v<=a.y+a.height,I=m(a,o),T=K(g,w),R=e.zones.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{zone:l,isPointerInElement:S,overlapPercent:I,depth:R,centerDistance:T}}).sort((l,a)=>{if(!P){if(l.isPointerInElement&&a.isPointerInElement)return a.depth-l.depth;if(l.isPointerInElement!==a.isPointerInElement)return l.isPointerInElement?-1:1}return Math.abs(l.overlapPercent-a.overlapPercent)<=1?l.centerDistance-a.centerDistance:a.overlapPercent-l.overlapPercent}),O=e.hovered.element.value,z=e.hovered.zone.value;e.hovered.element.value=((X=H[0])==null?void 0:X.element)??null,e.hovered.zone.value=((Y=Q[0])==null?void 0:Y.zone)??null,e.hovered.element.value!==O&&(($=O==null?void 0:O.events)!=null&&$.onLeave&&O.events.onLeave(e),(q=(F=e.hovered.element.value)==null?void 0:F.events)!=null&&q.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==z&&((N=z==null?void 0:z.events)!=null&&N.onLeave&&z.events.onLeave(e),(V=(j=e.hovered.zone.value)==null?void 0:j.events)!=null&&V.onHover&&e.hovered.zone.value.events.onHover(e)),r=requestAnimationFrame(h)},y=()=>{h()},i=()=>{r!==null&&(cancelAnimationFrame(r),r=null)};return{activate:o=>{e.draggingElements.value=s(t.value),u(o),y()},track:o=>{c(o)},deactivate:()=>{var o,g;d(),e.hovered.zone.value?(g=(o=e.hovered.zone.value.events).onDrop)==null||g.call(o,e):e.draggingElements.value.forEach(f=>{var v,x;return(x=(v=f.events).onEnd)==null?void 0:x.call(v,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,i()}}},ae=t=>{const{elementRef:e,registerElement:u,unregisterElement:c,isDragging:d,isOvered:r,isAllowed:s}=re(t),{disableInteractions:m,enableInteractions:h}=oe(),y=L(),{activate:i,track:E,deactivate:p}=se(e),D=v=>{t!=null&&t.container&&(y.activeContainer.component.value=n.markRaw(t.container)),m(),i(v),document.addEventListener("pointermove",o),document.addEventListener("pointerup",f),document.addEventListener("wheel",g)},o=v=>{E(v)},g=v=>{E(v)},f=()=>{y.activeContainer.component.value=null,h(),p(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",f),document.removeEventListener("wheel",g)};return n.onMounted(u),n.onBeforeUnmount(c),{pointerPosition:y.pointerPosition,elementRef:e,isDragging:d,isOvered:r,isAllowed:s,handleDragStart:D}},ue=t=>{const{zones:e,hovered:u,draggingElements:c,isDragging:d}=L(),r=n.ref(null),s=n.computed(()=>{var i;return((i=u.zone.value)==null?void 0:i.node)===r.value}),m=n.computed(()=>{if(!r.value||!d.value)return!1;const i=e.value.find(E=>E.node===r.value);return i!=null&&i.groups.length?!c.value.some(E=>E.groups.length?!E.groups.some(p=>i.groups.includes(p)):!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 i=e.value.findIndex(E=>E.node===r.value);i!==-1&&e.value.splice(i,1)},isOvered:s,isAllowed:m}},ce=t=>{const{elementRef:e,registerZone:u,unregisterZone:c,isOvered:d,isAllowed:r}=ue(t);return n.onMounted(u),n.onBeforeUnmount(c),{elementRef:e,isOvered:d,isAllowed:r}},de=t=>{const{selectedElements:e,elements:u}=L(),c=n.computed(()=>u.value.find(i=>i.node===t.value)),d=n.computed(()=>e.value.some(i=>i.node===t.value)),r=n.computed(()=>t.value?e.value.some(i=>i.node&&M(i.node,t.value)):!1),s=n.computed(()=>t.value?e.value.some(i=>i.node&&M(t.value,i.node)):!1),m=()=>{c.value&&(e.value=e.value.filter(i=>i.node!==t.value))},h=()=>{c.value&&(r.value&&(e.value=e.value.filter(i=>i.node&&!M(i.node,t.value))),s.value&&(e.value=e.value.filter(i=>i.node&&!M(t.value,i.node))),e.value.push(c.value))};return{handleUnselect:m,handleSelect:h,handleToggleSelect:()=>{c.value&&(e.value.some(i=>i.node===t.value)?m():h())},isSelected:d,isParentOfSelected:r}};exports.DragOverlay=te;exports.useDnDStore=L;exports.useDraggable=ae;exports.useDroppable=ce;exports.useSelection=de;