@vue-dnd-kit/core 0.0.24-beta → 0.0.26-beta

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: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    draggingElements: import('vue').Ref<import('..').IDraggingElement[], import('..').IDraggingElement[]>;
+    pointerPosition: import('..').IPointerPosition;
+    isDragging: import('vue').Ref<boolean, boolean>;
+};

package/dist/composables/useDraggable.d.ts

@@ -1,51 +1,50 @@
 import { 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 } = useDraggable({
+ *   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;
+};

package/dist/composables/useDroppable.d.ts

@@ -1,91 +1,90 @@
 import { 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?: IUseDropOptions) => {
+    elementRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    isOvered: import('vue').ComputedRef<boolean>;
+    isAllowed: import('vue').ComputedRef<boolean>;
+};

package/dist/composables/usePointer.d.ts

@@ -1,7 +1,6 @@
 import { 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,14 +1,13 @@
 import { 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: import('vue').ComputedRef<boolean>;
+    isParentOfSelected: import('vue').ComputedRef<boolean>;
+};

package/dist/composables/useSensor.d.ts

@@ -1,7 +1,6 @@
 import { 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

@@ -3,7 +3,6 @@ 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 { getBoundingBox } from './utils/geometry';
-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,18 +1,17 @@
 import { 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?: 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>;
+};

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,9 +1,8 @@
 import { 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?: IUseDropOptions) => {
+    elementRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    registerZone: () => void;
+    unregisterZone: () => void;
+    isOvered: import('vue').ComputedRef<boolean>;
+    isAllowed: import('vue').ComputedRef<boolean>;
+};