@vue-dnd-kit/core 0.0.19 → 0.0.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZiZiGY
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/composables/useDnDStore.d.ts

@@ -1,64 +1,63 @@
-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.
- *
- * The store manages:
- * - Active drag operations
- * - Dragged elements
- * - Drop zones
- * - Pointer positions
- * - Hover states
- *
- * @returns {IDnDStore} Global drag and drop state
- *
- * @example
- * ```ts
- * const {
- *   // Drag state
- *   isDragging,          // Whether drag operation is active
- *   draggingElements,    // Currently dragged elements
- *   selectedElements,    // Selected elements (for multi-drag)
- *
- *   // Container state
- *   activeContainer,     // Current drag container
- *
- *   // Elements and zones
- *   elements,            // All registered draggable elements
- *   zones,              // All registered drop zones
- *
- *   // Hover state
- *   hovered: {
- *     zone,             // Currently hovered drop zone
- *     element           // Currently hovered element
- *   },
- *
- *   // Pointer tracking
- *   pointerPosition: {
- *     current,          // Current pointer coordinates
- *     start,           // Initial drag start coordinates
- *     offset: {
- *       percent,       // Offset as percentage
- *       pixel         // Offset in pixels
- *     }
- *   }
- * } = useDnDStore();
- *
- * // Example: Watch for drag state changes
- * watch(isDragging, (dragging) => {
- *   if (dragging) {
- *     console.log('Drag started with elements:', draggingElements.value);
- *   } else {
- *     console.log('Drag ended');
- *   }
- * });
- *
- * // Example: Track hover states
- * watch(() => hovered.zone.value, (zone) => {
- *   if (zone) {
- *     console.log('Hovering over zone:', zone.data);
- *   }
- * });
- * ```
- */
-export declare const useDnDStore: () => IDnDStore;
+/**
+ * Global store for managing drag and drop state.
+ * Uses singleton pattern to ensure single source of truth across the application.
+ *
+ * The store manages:
+ * - Active drag operations
+ * - Dragged elements
+ * - Drop zones
+ * - Pointer positions
+ * - Hover states
+ *
+ * @returns {IDnDStore} Global drag and drop state
+ *
+ * @example
+ * ```ts
+ * const {
+ *   // Drag state
+ *   isDragging,          // Whether drag operation is active
+ *   draggingElements,    // Currently dragged elements
+ *   selectedElements,    // Selected elements (for multi-drag)
+ *
+ *   // Container state
+ *   activeContainer,     // Current drag container
+ *
+ *   // Elements and zones
+ *   elements,            // All registered draggable elements
+ *   zones,              // All registered drop zones
+ *
+ *   // Hover state
+ *   hovered: {
+ *     zone,             // Currently hovered drop zone
+ *     element           // Currently hovered element
+ *   },
+ *
+ *   // Pointer tracking
+ *   pointerPosition: {
+ *     current,          // Current pointer coordinates
+ *     start,           // Initial drag start coordinates
+ *     offset: {
+ *       percent,       // Offset as percentage
+ *       pixel         // Offset in pixels
+ *     }
+ *   }
+ * } = useDnDStore();
+ *
+ * // Example: Watch for drag state changes
+ * watch(isDragging, (dragging) => {
+ *   if (dragging) {
+ *     console.log('Drag started with elements:', draggingElements.value);
+ *   } else {
+ *     console.log('Drag ended');
+ *   }
+ * });
+ *
+ * // Example: Track hover states
+ * watch(() => hovered.zone.value, (zone) => {
+ *   if (zone) {
+ *     console.log('Hovering over zone:', zone.data);
+ *   }
+ * });
+ * ```
+ */
+export declare const useDnDStore: () => IDnDStore;

package/dist/composables/useDragContainer.d.ts

@@ -1,73 +1,73 @@
-/**
- * Hook for creating custom drag container with overlay management.
- * Provides functionality for controlling drag visualization and element positioning.
- *
- * This hook is typically used to create custom drag overlays, layers,
- * and control how dragged elements are displayed during drag operations.
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- *  import { computed } from 'vue';
- *  import { useDragContainer } from '../composables/useDragContainer';
- *
- *  const { elementRef, pointerPosition, isDragging, draggingElements } =
- *    useDragContainer();
- *
- *  const computedStyle = computed(() => ({
- *    transform: `translate3d(${
- *      (pointerPosition.current.value?.x ?? 0) -
- *      (pointerPosition.offset.pixel.value?.x ?? 0)
- *    }px, ${
- *      (pointerPosition.current.value?.y ?? 0) -
- *      (pointerPosition.offset.pixel.value?.y ?? 0)
- *    }px, 0)`,
- *  }));
- *</script>
- *
- *<template>
- *  <Teleport to="body">
- *    <div
- *      v-if="isDragging"
- *      ref="elementRef"
- *      :style="computedStyle"
- *      class="default-drag-overlay"
- *    >
- *      <div
- *        v-for="(element, index) in draggingElements"
- *        :key="index"
- *        v-html="element.initialHTML"
- *        :style="{
- *          width: `${element.initialRect?.width}px`,
- *          height: `${element.initialRect?.height}px`,
- *        }"
- *      />
- *    </div>
- *  </Teleport>
- *</template>
- *
- *<style scoped>
- *  .default-drag-overlay {
- *    position: fixed;
- *    top: 0;
- *    left: 0;
- *    background-color: rgba(0, 0, 0, 0.5);
- *    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
- *    z-index: 1000;
- *  }
- *</style>
- *
- * ```
- *
- * @returns {Object} Container controls and state
- * @property {Ref<HTMLElement | null>} elementRef - Reference to be bound to container element
- * @property {Ref<IDragElement[]>} draggingElements - Currently dragged elements
- * @property {IPointerPosition} pointerPosition - Current pointer coordinates and offsets
- * @property {Ref<boolean>} isDragging - Whether drag operation is in progress
- */
-export declare const useDragContainer: () => {
-    elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-    draggingElements: import("vue").Ref<import("..").IDraggingElement[], import("..").IDraggingElement[]>;
-    pointerPosition: import("..").IPointerPosition;
-    isDragging: import("vue").Ref<boolean, boolean>;
-};
+/**
+ * Hook for creating custom drag container with overlay management.
+ * Provides functionality for controlling drag visualization and element positioning.
+ *
+ * This hook is typically used to create custom drag overlays, layers,
+ * and control how dragged elements are displayed during drag operations.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ *  import { computed } from 'vue';
+ *  import { useDragContainer } from '../composables/useDragContainer';
+ *
+ *  const { elementRef, pointerPosition, isDragging, draggingElements } =
+ *    useDragContainer();
+ *
+ *  const computedStyle = computed(() => ({
+ *    transform: `translate3d(${
+ *      (pointerPosition.current.value?.x ?? 0) -
+ *      (pointerPosition.offset.pixel.value?.x ?? 0)
+ *    }px, ${
+ *      (pointerPosition.current.value?.y ?? 0) -
+ *      (pointerPosition.offset.pixel.value?.y ?? 0)
+ *    }px, 0)`,
+ *  }));
+ *</script>
+ *
+ *<template>
+ *  <Teleport to="body">
+ *    <div
+ *      v-if="isDragging"
+ *      ref="elementRef"
+ *      :style="computedStyle"
+ *      class="default-drag-overlay"
+ *    >
+ *      <div
+ *        v-for="(element, index) in draggingElements"
+ *        :key="index"
+ *        v-html="element.initialHTML"
+ *        :style="{
+ *          width: `${element.initialRect?.width}px`,
+ *          height: `${element.initialRect?.height}px`,
+ *        }"
+ *      />
+ *    </div>
+ *  </Teleport>
+ *</template>
+ *
+ *<style scoped>
+ *  .default-drag-overlay {
+ *    position: fixed;
+ *    top: 0;
+ *    left: 0;
+ *    background-color: rgba(0, 0, 0, 0.5);
+ *    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+ *    z-index: 1000;
+ *  }
+ *</style>
+ *
+ * ```
+ *
+ * @returns {Object} Container controls and state
+ * @property {Ref<HTMLElement | null>} elementRef - Reference to be bound to container element
+ * @property {Ref<IDragElement[]>} draggingElements - Currently dragged elements
+ * @property {IPointerPosition} pointerPosition - Current pointer coordinates and offsets
+ * @property {Ref<boolean>} isDragging - Whether drag operation is in progress
+ */
+export declare const useDragContainer: () => {
+    elementRef: any;
+    draggingElements: IDnDStore;
+    pointerPosition: IDnDStore;
+    isDragging: IDnDStore;
+};

package/dist/composables/useDraggable.d.ts

@@ -1,50 +1,49 @@
-import type { IUseDragOptions } from "../types";
-/**
- * Main hook for making elements draggable.
- * Provides all necessary functionality for drag and drop operations.
- *
- * @param options - Configuration options for draggable element
- * @param options.groups - Groups that element belongs to (for drop zone filtering)
- * @param options.events - Event handlers for drag lifecycle
- * @param options.data - Custom data to be passed to event handlers
- * @param options.layer - Custom component to render while dragging
- * @param options.container - Parent container component reference
- *
- * @returns Object containing:
- * - elementRef: Reference to be bound to draggable element
- * - isDragging: Whether element is currently being dragged
- * - isOvered: Whether element is being hovered by dragged element
- * - isAllowed: Whether element can interact with current drop zone based on group matching
- * - pointerPosition: Current pointer coordinates
- * - handleDragStart: Function to initiate drag operation
- *
- * @example
- * ```vue
- * <template>
- *   <div
- *     ref="elementRef"
- *     :class="{ 'dragging': isDragging }"
- *     @pointerdown="handleDragStart"
- *   >
- *     Drag me!
- *   </div>
- * </template>
- *
- * <script setup lang="ts">
- * const { elementRef, isDragging, handleDragStart } = useDrag({
- *   groups: ['items'],
- *   events: {
- *     onEnd: (store) => console.log('Drag ended!'),
- *   }
- * });
- * </script>
- * ```
- */
-export declare const useDraggable: (options?: IUseDragOptions) => {
-    pointerPosition: import("../types").IPointerPosition;
-    elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-    isDragging: import("vue").ComputedRef<boolean>;
-    isOvered: import("vue").ComputedRef<boolean>;
-    isAllowed: import("vue").ComputedRef<boolean>;
-    handleDragStart: (event: PointerEvent) => void;
-};
+/**
+ * Main hook for making elements draggable.
+ * Provides all necessary functionality for drag and drop operations.
+ *
+ * @param options - Configuration options for draggable element
+ * @param options.groups - Groups that element belongs to (for drop zone filtering)
+ * @param options.events - Event handlers for drag lifecycle
+ * @param options.data - Custom data to be passed to event handlers
+ * @param options.layer - Custom component to render while dragging
+ * @param options.container - Parent container component reference
+ *
+ * @returns Object containing:
+ * - elementRef: Reference to be bound to draggable element
+ * - isDragging: Whether element is currently being dragged
+ * - isOvered: Whether element is being hovered by dragged element
+ * - isAllowed: Whether element can interact with current drop zone based on group matching
+ * - pointerPosition: Current pointer coordinates
+ * - handleDragStart: Function to initiate drag operation
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div
+ *     ref="elementRef"
+ *     :class="{ 'dragging': isDragging }"
+ *     @pointerdown="handleDragStart"
+ *   >
+ *     Drag me!
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * const { elementRef, isDragging, handleDragStart } = useDrag({
+ *   groups: ['items'],
+ *   events: {
+ *     onEnd: (store) => console.log('Drag ended!'),
+ *   }
+ * });
+ * </script>
+ * ```
+ */
+export declare const useDraggable: (options?: any) => {
+    pointerPosition: any;
+    elementRef: any;
+    isDragging: any;
+    isOvered: any;
+    isAllowed: any;
+    handleDragStart: (event: PointerEvent) => void;
+};

package/dist/composables/useDroppable.d.ts

@@ -1,90 +1,89 @@
-import type { IUseDropOptions } from "../types";
-/**
- * Hook for creating drop zones that can accept dragged elements.
- * Manages drop zone registration and interaction states.
- *
- * @param options - Configuration options for drop zone
- * @param options.groups - Groups that this zone accepts. Elements can only be
- *                        dropped if they share at least one group with the zone
- * @param options.events - Event handlers for drop zone lifecycle
- * @param options.events.onDrop - Called when compatible element is dropped
- * @param options.events.onHover - Called when compatible element hovers
- * @param options.events.onLeave - Called when element leaves zone
- * @param options.data - Custom data accessible in event handlers
- *
- * @returns Object containing:
- * - elementRef: Reference to be bound to drop zone element
- * - isOvered: Whether zone is currently being hovered by dragged element
- * - isAllowed: Whether currently dragged element can be dropped (groups match)
- *
- * @example
- * ```vue
- * <template>
- *   <div
- *     ref="elementRef"
- *     :class="{
- *       'drop-zone': true,
- *       'zone-hovered': isOvered,
- *       'drop-allowed': isAllowed && isOvered,
- *       'drop-forbidden': !isAllowed && isOvered
- *     }"
- *   >
- *     <slot />
- *   </div>
- * </template>
- *
- * <script setup lang="ts">
- * const { elementRef, isOvered, isAllowed } = useDrop({
- *   // Зона принимает только элементы из группы 'items'
- *   groups: ['items'],
- *   events: {
- *     onDrop: (store) => {
- *       const droppedElements = store.draggingElements.value;
- *       console.log('Elements dropped!', droppedElements);
- *     },
- *     onHover: (store) => {
- *       // Подсветка зоны при наведении совместимого элемента
- *       if (isAllowed.value) {
- *         console.log('Compatible element hovering!');
- *       }
- *     },
- *     onLeave: () => {
- *       console.log('Element left drop zone');
- *     }
- *   },
- *   // Пользовательские данные доступны в обработчиках
- *   data: {
- *     zoneId: 'main-drop-zone',
- *     acceptLimit: 5
- *   }
- * });
- * </script>
- *
- * <style scoped>
- * .drop-zone {
- *   border: 2px dashed #ccc;
- *   padding: 20px;
- *   transition: all 0.3s;
- * }
- *
- * .zone-hovered {
- *   background: #f0f0f0;
- * }
- *
- * .drop-allowed {
- *   border-color: #4CAF50;
- *   background: #E8F5E9;
- * }
- *
- * .drop-forbidden {
- *   border-color: #F44336;
- *   background: #FFEBEE;
- * }
- * </style>
- * ```
- */
-export declare const useDroppable: (options?: IUseDropOptions) => {
-    elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-    isOvered: import("vue").ComputedRef<boolean>;
-    isAllowed: import("vue").ComputedRef<boolean>;
-};
+/**
+ * Hook for creating drop zones that can accept dragged elements.
+ * Manages drop zone registration and interaction states.
+ *
+ * @param options - Configuration options for drop zone
+ * @param options.groups - Groups that this zone accepts. Elements can only be
+ *                        dropped if they share at least one group with the zone
+ * @param options.events - Event handlers for drop zone lifecycle
+ * @param options.events.onDrop - Called when compatible element is dropped
+ * @param options.events.onHover - Called when compatible element hovers
+ * @param options.events.onLeave - Called when element leaves zone
+ * @param options.data - Custom data accessible in event handlers
+ *
+ * @returns Object containing:
+ * - elementRef: Reference to be bound to drop zone element
+ * - isOvered: Whether zone is currently being hovered by dragged element
+ * - isAllowed: Whether currently dragged element can be dropped (groups match)
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div
+ *     ref="elementRef"
+ *     :class="{
+ *       'drop-zone': true,
+ *       'zone-hovered': isOvered,
+ *       'drop-allowed': isAllowed && isOvered,
+ *       'drop-forbidden': !isAllowed && isOvered
+ *     }"
+ *   >
+ *     <slot />
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * const { elementRef, isOvered, isAllowed } = useDrop({
+ *   // Зона принимает только элементы из группы 'items'
+ *   groups: ['items'],
+ *   events: {
+ *     onDrop: (store) => {
+ *       const droppedElements = store.draggingElements.value;
+ *       console.log('Elements dropped!', droppedElements);
+ *     },
+ *     onHover: (store) => {
+ *       // Подсветка зоны при наведении совместимого элемента
+ *       if (isAllowed.value) {
+ *         console.log('Compatible element hovering!');
+ *       }
+ *     },
+ *     onLeave: () => {
+ *       console.log('Element left drop zone');
+ *     }
+ *   },
+ *   // Пользовательские данные доступны в обработчиках
+ *   data: {
+ *     zoneId: 'main-drop-zone',
+ *     acceptLimit: 5
+ *   }
+ * });
+ * </script>
+ *
+ * <style scoped>
+ * .drop-zone {
+ *   border: 2px dashed #ccc;
+ *   padding: 20px;
+ *   transition: all 0.3s;
+ * }
+ *
+ * .zone-hovered {
+ *   background: #f0f0f0;
+ * }
+ *
+ * .drop-allowed {
+ *   border-color: #4CAF50;
+ *   background: #E8F5E9;
+ * }
+ *
+ * .drop-forbidden {
+ *   border-color: #F44336;
+ *   background: #FFEBEE;
+ * }
+ * </style>
+ * ```
+ */
+export declare const useDroppable: (options?: any) => {
+    elementRef: any;
+    isOvered: any;
+    isAllowed: any;
+};

package/dist/composables/usePointer.d.ts

@@ -1,6 +1,5 @@
-import type { Ref } from 'vue';
-export declare const usePointer: (elementRef: Ref<HTMLElement | null>) => {
-    onPointerStart: (event: PointerEvent) => void;
-    onPointerMove: (event: PointerEvent | WheelEvent) => void;
-    onPointerEnd: () => void;
-};
+export declare const usePointer: (elementRef: Ref<HTMLElement | null>) => {
+    onPointerStart: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent | WheelEvent) => void;
+    onPointerEnd: () => void;
+};

package/dist/composables/useSelection.d.ts

@@ -1,13 +1,12 @@
-import { type Ref } from 'vue';
-/**
- * Hook for managing element selection in drag and drop interface
- * @param elementRef - Reference to the HTML element that can be selected
- * @returns Object containing selection state and handlers
- */
-export declare const useSelection: (elementRef: Ref<HTMLElement | null>) => {
-    handleUnselect: () => void;
-    handleSelect: () => void;
-    handleToggleSelect: () => void;
-    isSelected: import("vue").ComputedRef<boolean>;
-    isParentOfSelected: import("vue").ComputedRef<boolean>;
-};
+/**
+ * Hook for managing element selection in drag and drop interface
+ * @param elementRef - Reference to the HTML element that can be selected
+ * @returns Object containing selection state and handlers
+ */
+export declare const useSelection: (elementRef: Ref<HTMLElement | null>) => {
+    handleUnselect: () => void;
+    handleSelect: () => void;
+    handleToggleSelect: () => void;
+    isSelected: any;
+    isParentOfSelected: any;
+};

package/dist/composables/useSensor.d.ts

@@ -1,6 +1,5 @@
-import type { Ref } from 'vue';
-export declare const useSensor: (elementRef: Ref<HTMLElement | null>) => {
-    activate: (event: PointerEvent) => void;
-    track: (event: PointerEvent | WheelEvent) => void;
-    deactivate: () => void;
-};
+export declare const useSensor: (elementRef: Ref<HTMLElement | null>) => {
+    activate: (event: PointerEvent) => void;
+    track: (event: PointerEvent | WheelEvent) => void;
+    deactivate: () => void;
+};

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import DragOverlay from "./components/DragOverlay";
+import { default as DragOverlay } from './components/DragOverlay';
 import { useDnDStore } from './composables/useDnDStore';
 import { useDraggable } from './composables/useDraggable';
 import { useDroppable } from './composables/useDroppable';
 import { useSelection } from './composables/useSelection';
-export { DragOverlay, useDraggable, useDroppable, useDnDStore, useSelection };
-export type { IDnDStore, IActiveContainer, IBoundingBox, IDragElement, IDraggingElement, IDropZone, IPoint, IPointerPosition, IUseDragOptions, IUseDropOptions, } from './types';
+
+export { DragOverlay, useDraggable, useDroppable, useDnDStore, useSelection };
+export { getBoundingBox } from './utils/geometry';
+export type { IDnDStore, IActiveContainer, IBoundingBox, IDragElement, IDraggingElement, IDropZone, IPoint, IPointerPosition, IUseDragOptions, IUseDropOptions, } from './types';

package/dist/managers/useElementManager.d.ts

@@ -1,17 +1,16 @@
-import type { IUseDragOptions } from "../types";
-/**
- * Hook for managing draggable elements and their interactions.
- * Provides methods for registering, unregistering elements,
- * checking if an element is being dragged, and determining if it can be dropped.
- *
- * @param options - Optional configuration object for element management
- * @returns Object containing element management state and methods
- */
-export declare const useElementManager: (options?: IUseDragOptions) => {
-    elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-    registerElement: () => void;
-    unregisterElement: () => void;
-    isDragging: import("vue").ComputedRef<boolean>;
-    isOvered: import("vue").ComputedRef<boolean>;
-    isAllowed: import("vue").ComputedRef<boolean>;
-};
+/**
+ * Hook for managing draggable elements and their interactions.
+ * Provides methods for registering, unregistering elements,
+ * checking if an element is being dragged, and determining if it can be dropped.
+ *
+ * @param options - Optional configuration object for element management
+ * @returns Object containing element management state and methods
+ */
+export declare const useElementManager: (options?: any) => {
+    elementRef: any;
+    registerElement: () => void;
+    unregisterElement: () => void;
+    isDragging: any;
+    isOvered: any;
+    isAllowed: any;
+};

package/dist/managers/useInteractionManager.d.ts

@@ -1,4 +1,4 @@
-export declare const useInteractionManager: () => {
-    disableInteractions: () => void;
-    enableInteractions: () => void;
-};
+export declare const useInteractionManager: () => {
+    disableInteractions: () => void;
+    enableInteractions: () => void;
+};

package/dist/managers/useZoneManager.d.ts

@@ -1,8 +1,7 @@
-import type { IUseDropOptions } from "../types";
-export declare const useZoneManager: (options?: IUseDropOptions) => {
-    elementRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-    registerZone: () => void;
-    unregisterZone: () => void;
-    isOvered: import("vue").ComputedRef<boolean>;
-    isAllowed: import("vue").ComputedRef<boolean>;
-};
+export declare const useZoneManager: (options?: any) => {
+    elementRef: any;
+    registerZone: () => void;
+    unregisterZone: () => void;
+    isOvered: any;
+    isAllowed: any;
+};

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
-import type { Component, Ref } from 'vue';
+import { Component, Ref } from 'vue';
+
 
 /** Main drag and drop state store */
 export interface IDnDStore {

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/geometry.d.ts

@@ -1,15 +1,14 @@
-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;
-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;

package/dist/utils/namespaces.d.ts

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

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

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");let G=!1,R;const L=()=>(G||(R=n.effectScope(!0).run(()=>({isDragging:n.computed(()=>R.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),R),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),B=e.elements.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{element:l,isPointerInElement:S,overlapPercent:I,depth:B,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),B=e.zones.value.filter(_=>_!==l&&_.node&&l.node&&M(l.node,_.node)).length;return{zone:l,isPointerInElement:S,overlapPercent:I,depth:B,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.getBoundingBox=k;exports.useDnDStore=L;exports.useDraggable=ae;exports.useDroppable=ce;exports.useSelection=de;

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

@@ -1,4 +1,4 @@
-import { effectScope as ie, computed as w, ref as p, onMounted as F, onBeforeUnmount as U, defineComponent as oe, unref as b, openBlock as R, createElementBlock as X, normalizeStyle as ee, Fragment as se, renderList as ae, createCommentVNode as ue, createBlock as ce, resolveDynamicComponent as ve, markRaw as de } from "vue";
+import { effectScope as ie, ref as p, computed as w, onMounted as F, onBeforeUnmount as U, defineComponent as oe, createElementBlock as X, createCommentVNode as se, unref as b, openBlock as R, normalizeStyle as ee, Fragment as ae, renderList as ue, createBlock as ce, resolveDynamicComponent as ve, markRaw as de } from "vue";
 let te = !1, Y;
 const M = () => (te || (Y = ie(!0).run(() => ({
   /** Whether any drag operation is currently active */
@@ -73,7 +73,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       ref: e,
       style: ee(n.value)
     }, [
-      (R(!0), X(se, null, ae(b(c), (f, y) => {
+      (R(!0), X(ae, null, ue(b(c), (f, y) => {
         var l, E;
         return R(), X("div", {
           key: y,
@@ -84,7 +84,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
           })
         }, null, 12, he);
       }), 128))
-    ], 4)) : ue("", !0);
+    ], 4)) : se("", !0);
   }
 }), Le = /* @__PURE__ */ oe({
   __name: "DragOverlay",
@@ -109,8 +109,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   ), f = w(
     () => a.value.some((m) => m.node === i.value)
   ), y = w(() => {
-    if (!i.value || !n.value)
-      return !1;
+    if (!i.value || !n.value) return !1;
     const m = e.value.find(
       (D) => D.node === i.value
     );
@@ -121,8 +120,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
   return {
     elementRef: i,
     registerElement: () => {
-      if (!i.value)
-        throw new Error("ElementRef is not set");
+      if (!i.value) throw new Error("ElementRef is not set");
       e.value.push({
         node: i.value,
         groups: (t == null ? void 0 : t.groups) ?? [],
@@ -376,8 +374,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     var l;
     return ((l = a.zone.value) == null ? void 0 : l.node) === n.value;
   }), h = w(() => {
-    if (!n.value || !c.value)
-      return !1;
+    if (!n.value || !c.value) return !1;
     const l = e.value.find(
       (E) => E.node === n.value
     );
@@ -386,8 +383,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
     ) : !1) : !0;
   });
   return { elementRef: n, registerZone: () => {
-    if (!n.value)
-      throw new Error("elementRef is not set");
+    if (!n.value) throw new Error("elementRef is not set");
     e.value.push({
       node: n.value,
       groups: (t == null ? void 0 : t.groups) ?? [],
@@ -395,8 +391,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
       data: (t == null ? void 0 : t.data) ?? void 0
     }), n.value.setAttribute("data-dnd-droppable", "true");
   }, unregisterZone: () => {
-    if (!n.value)
-      throw new Error("elementRef is not set");
+    if (!n.value) throw new Error("elementRef is not set");
     const l = e.value.findIndex(
       (E) => E.node === n.value
     );
@@ -449,6 +444,7 @@ const M = () => (te || (Y = ie(!0).run(() => ({
 };
 export {
   Le as DragOverlay,
+  z as getBoundingBox,
   M as useDnDStore,
   Ie as useDraggable,
   Ce as useDroppable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
   "author": "ZiZIGY",
   "license": "MIT",
@@ -11,21 +11,21 @@
     "drop",
     "drag and drop",
     "drag and drop library",
-    "drag and drop component",
     "vue dnd",
     "vue drag and drop",
     "vue drag and drop library",
-    "vue drag and drop component",
     "vue dnd kit",
     "vue dnd kit core",
-    "vue dnd kit core component",
     "dnd-kit",
-    "dnd-kit core"
+    "dnd-kit core",
+    "vue-dnd-kit",
+    "vue-dnd-kit core",
+    "@vue-dnd-kit/core"
   ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zizigy/vue-dnd-kit.git",
-    "directory": "packages/core"
+    "directory": "packages/utilities"
   },
   "scripts": {
     "start": "vite build --watch",
@@ -54,6 +54,7 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@types/node": "^22.13.14",
     "@vitejs/plugin-vue": "^4.2.3",
     "eslint": "^8.38.0",
     "typescript": "^4.9.5",

package/dist/components/DefaultOverlay.d.ts

@@ -1,2 +0,0 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _sfc_main;

package/dist/components/DragOverlay.d.ts

@@ -1,2 +0,0 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _sfc_main;