@vue-dnd-kit/core 2.4.7 → 3.0.0-beta.2

package/package.json

@@ -1,74 +1,104 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "2.4.7",
-  "description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
+  "version": "3.0.0-beta.2",
+  "description": "Drag and drop for Vue 3: sortable lists, kanban boards, trees, multi-drag and animations out of the box",
   "author": "ZiZIGY",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "keywords": [
     "vue",
+    "vue3",
     "dnd",
     "drag",
     "drop",
     "drag and drop",
-    "drag and drop library",
-    "vue dnd",
+    "sortable",
+    "kanban",
+    "tree",
+    "multi-drag",
+    "virtual list",
     "vue drag and drop",
-    "vue drag and drop library",
     "vue dnd kit",
-    "vue dnd kit core",
-    "dnd-kit",
-    "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",
+    "url": "git+https://github.com/ZiZIGY/vue-dnd-kit.git",
     "directory": "packages/core"
   },
   "scripts": {
-    "dev": "vite",
-    "start": "vite build --config vite.config.ts --watch",
-    "build": "vite build --config vite.config.ts",
-    "build:app": "vue-tsc -b && vite build",
-    "preview": "vite preview",
-    "prepublishOnly": "yarn build"
+    "build": "vite build",
+    "start": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "size": "node scripts/size.mjs",
+    "lint:package": "publint --strict --pack npm && attw --pack .",
+    "prepublishOnly": "yarn typecheck && yarn test && yarn build && yarn lint:package"
   },
-  "main": "dist/vue-dnd-kit-core.cjs.js",
-  "module": "dist/vue-dnd-kit-core.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-dnd-kit-core.es.js",
-      "require": "./dist/vue-dnd-kit-core.cjs.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./devtools": {
+      "import": {
+        "types": "./dist/devtools.d.ts",
+        "default": "./dist/devtools.js"
+      },
+      "require": {
+        "types": "./dist/devtools.d.cts",
+        "default": "./dist/devtools.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "devtools": [
+        "./dist/devtools.d.ts"
+      ]
     }
   },
   "files": [
-    "README.md",
-    "CHANGELOG.md",
+    "dist",
     "LICENSE",
-    "dist"
+    "README.md"
   ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14 || ^15"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@types/node": "^24.10.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.1.4",
     "@vue/tsconfig": "^0.8.1",
+    "esbuild": "^0.27.0",
+    "happy-dom": "^21.0.4",
     "prettier": "^3.8.1",
+    "publint": "^0.3.25",
+    "rollup": "^4.43.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.2",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.4",
+    "vitest": "^5.0.5",
     "vue": "^3.5.24",
     "vue-tsc": "^3.1.3"
   }

package/dist/external/components/DnDProvider.vue.d.ts

@@ -1,25 +0,0 @@
-import { IDnDProviderProps } from '../types/provider';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        preview?(_: {
-            preview: import('vue').Component;
-        }): any;
-    };
-    refs: {
-        previewRef: HTMLDivElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<IDnDProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IDnDProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    previewRef: HTMLDivElement;
-}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/external/components/DragPreview.vue.d.ts

@@ -1,89 +0,0 @@
-type __VLS_Props = {
-    /** Snap overlay to a grid. Pass a number for a uniform grid or { x, y } for per-axis control. */
-    grid?: number | {
-        x: number;
-        y: number;
-    };
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            draggingMap: Map<HTMLElement, {
-                initialHTML: string;
-                initialRect: {
-                    height: number;
-                    width: number;
-                    x: number;
-                    y: number;
-                    readonly bottom: number;
-                    readonly left: number;
-                    readonly right: number;
-                    readonly top: number;
-                    toJSON: () => any;
-                };
-                initialOuterHTML: string;
-                id?: string | number | symbol | undefined;
-                render?: Component;
-                events?: {
-                    onSelfDragStart?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onSelfDragMove?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onSelfDragEnd?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onSelfDragCancel?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onDragStart?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onDragMove?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onDragEnd?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onDragCancel?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onHover?: ((event: import('..').IDragEvent) => void) | undefined;
-                    onLeave?: ((event: import('..').IDragEvent) => void) | undefined;
-                } | undefined;
-                payload?: import('..').TDraggablePayload | undefined;
-                data?: (() => unknown) | undefined;
-                modifier?: {
-                    keys: string[];
-                    method: import('..').TModifierMethod;
-                } | undefined;
-                dragHandle?: string | undefined;
-                activation?: {
-                    distance?: number | {
-                        x?: number | undefined;
-                        y?: number | undefined;
-                        condition?: import('..').TCondition | undefined;
-                    } | undefined;
-                    delay?: number | undefined;
-                    condition?: import('..').TCondition | undefined;
-                } | undefined;
-                placementMargins?: {
-                    top?: number | undefined;
-                    right?: number | undefined;
-                    bottom?: number | undefined;
-                    left?: number | undefined;
-                } | undefined;
-                hoveredPlacement?: {
-                    top: boolean;
-                    right: boolean;
-                    bottom: boolean;
-                    left: boolean;
-                    center: boolean;
-                } | undefined;
-                disabled?: boolean | undefined;
-                groups?: string[] | undefined;
-            }> & Omit<Map<HTMLElement, import('..').IDraggingEntity>, keyof Map<any, any>>;
-        }): any;
-    };
-    refs: {
-        contentRef: HTMLDivElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    contentRef: HTMLDivElement;
-}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/external/composables/makeAutoScroll.d.ts

@@ -1,14 +0,0 @@
-import { Ref } from 'vue';
-import { IAutoScrollOptions } from '../types';
-export type { IAutoScrollOptions };
-/**
- * Auto-scroll when the drag overlay is near container edges, and the
- * container is the drop target. Element scroll only.
- *
- * @param container - Ref to the scrollable element
- * @param options - threshold, speed, disabled
- * @returns { isScrolling }
- */
-export declare const makeAutoScroll: (container: Ref<HTMLElement | null>, options?: IAutoScrollOptions) => {
-    isScrolling: import('vue').ShallowRef<boolean, boolean>;
-};

package/dist/external/composables/makeConstraintArea.d.ts

@@ -1,7 +0,0 @@
-import { TDnDNodeRef, TDragAxis } from '../types';
-import { Ref } from 'vue';
-export interface IMakeConstraintAreaOptions {
-    axis?: TDragAxis | Ref<TDragAxis>;
-    restrictToArea?: boolean | Ref<boolean>;
-}
-export declare function makeConstraintArea(ref: TDnDNodeRef, options?: IMakeConstraintAreaOptions): {};

package/dist/external/composables/makeDraggable.d.ts

@@ -1,24 +0,0 @@
-import { IBaseOptions, IDragActivationOptions, IDraggableEvents, IModifierOptions, IPlacement, IPlacementMargins, TDnDNodeRef, TDraggablePayload } from '../types';
-import { Component, ComputedRef, Ref, WritableComputedRef } from 'vue';
-interface IMakeDraggableOptions extends IBaseOptions {
-    /** Stable id for this draggable. Required for correct behavior inside virtual lists
-     *  where items unmount and remount as the user scrolls. If omitted, a random id is
-     *  generated automatically — sufficient for non-virtual usage. */
-    id?: string;
-    events?: IDraggableEvents;
-    modifier?: IModifierOptions;
-    render?: Component;
-    dragHandle?: string | Ref<string>;
-    activation?: IDragActivationOptions;
-    placementMargins?: IPlacementMargins;
-    data?: () => unknown;
-}
-interface IMakeDraggableReturnType {
-    selected: WritableComputedRef<boolean>;
-    isDragging: ComputedRef<boolean>;
-    isAllowed: ComputedRef<boolean>;
-    isDragOver: ComputedRef<IPlacement | undefined>;
-}
-export declare function makeDraggable(ref: TDnDNodeRef, payload?: TDraggablePayload): IMakeDraggableReturnType;
-export declare function makeDraggable(ref: TDnDNodeRef, options: IMakeDraggableOptions, payload?: TDraggablePayload): IMakeDraggableReturnType;
-export {};

package/dist/external/composables/makeDroppable.d.ts

@@ -1,21 +0,0 @@
-import { IBaseOptions, IDroppableEvents, IPlacement, TDnDNodeRef, TDroppablePayload, TModifierMethod } from '../types';
-import { ComputedRef } from 'vue';
-interface IMakeDroppableOptions extends IBaseOptions {
-    /**
-     * Group matching strategy.
-     * - `'every'` (default): zone is accessible only if ALL dragged items match zone's groups.
-     * - `'some'`: zone is accessible if AT LEAST ONE dragged item matches.
-     *   Invalid items are filtered out at drop time (or handled via `events.onValidate`).
-     */
-    groupMatch?: TModifierMethod;
-    events?: IDroppableEvents;
-    data?: () => unknown;
-}
-interface IMakeDroppableReturnType {
-    isAllowed: ComputedRef<boolean>;
-    isDragOver: ComputedRef<IPlacement | undefined>;
-}
-export declare function makeDroppable(ref: TDnDNodeRef): IMakeDroppableReturnType;
-export declare function makeDroppable(ref: TDnDNodeRef, options: IMakeDroppableOptions, payload?: TDroppablePayload): IMakeDroppableReturnType;
-export declare function makeDroppable(ref: TDnDNodeRef, payload: TDroppablePayload): IMakeDroppableReturnType;
-export {};

package/dist/external/composables/makeSelectionArea.d.ts

@@ -1,15 +0,0 @@
-import { Ref } from 'vue';
-import { IBaseOptions, ISelectableAreaEvents, TDnDNodeRef, TModifierKeys, TModifierMethod, TSelectableAreaStrategy } from '../types';
-interface ISelectionAreaOptions extends IBaseOptions {
-    modifier?: {
-        keys: TModifierKeys | Ref<TModifierKeys>;
-        method: TModifierMethod | Ref<TModifierMethod>;
-    };
-    events?: ISelectableAreaEvents;
-    strategy?: TSelectableAreaStrategy;
-}
-export declare const makeSelectionArea: (nodeRef: TDnDNodeRef, options?: ISelectionAreaOptions) => {
-    isSelecting: import('vue').ComputedRef<boolean>;
-    style: import('vue').ComputedRef<import('vue').CSSProperties>;
-};
-export {};

package/dist/external/composables/useDnDProvider.d.ts

@@ -1,2 +0,0 @@
-import { IDnDProviderExternal } from '../types';
-export declare const useDnDProvider: () => IDnDProviderExternal;

package/dist/external/env.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<object, object, unknown>;
-  export default component;
-}

package/dist/external/index.d.ts

@@ -1,11 +0,0 @@
-import { default as DnDProvider } from './components/DnDProvider.vue';
-import { default as DragPreview } from './components/DragPreview.vue';
-export { DnDProvider, DragPreview };
-export { makeDraggable } from './composables/makeDraggable';
-export { makeSelectionArea } from './composables/makeSelectionArea';
-export { makeConstraintArea } from './composables/makeConstraintArea';
-export { makeDroppable } from './composables/makeDroppable';
-export { useDnDProvider } from './composables/useDnDProvider';
-export { injectionKey } from '../internal/utils/namespaces';
-export { makeAutoScroll, type IAutoScrollOptions, } from './composables/makeAutoScroll';
-export type * from './types';

package/dist/external/types/entities.d.ts

@@ -1,208 +0,0 @@
-import { ComponentPublicInstance, ComputedRef, Ref, ShallowRef } from 'vue';
-import { IPlacement, IPlacementMargins } from './placement';
-import { IDragEvent } from './provider';
-import { IHoveredDraggableContext } from './operations';
-
-
-export type TDnDNode = HTMLElement | ComponentPublicInstance | null;
-export type TDnDNodeRef = Readonly<Ref<TDnDNode>>;
-export type TDragAxis = 'x' | 'y' | 'both';
-/** Factory registered on a draggable: returns [index, items] */
-export type TDraggablePayload<T = any> = () => [number, T[]];
-
-/** Factory registered on a droppable zone: returns items array */
-export type TDroppablePayload<T = any> = () => T[];
-
-// ─── Public event types ────────────────────────────────────────────────────────
-
-/** One dragged item — always carries its source array and position */
-export interface IDragItem<T = unknown> {
-  /** Index of this item in `items` */
-  index: number;
-  /** The actual object: `items[index]` */
-  item: T;
-  /** Source array (same reference as passed to the draggable payload factory) */
-  items: T[];
-  /** Custom data from the `data` option (reactive, always up-to-date) */
-  data?: unknown;
-}
-
-/** Drop zone context — present in onEnter / onDrop / onLeave */
-export interface IDropZoneContext<T = unknown> {
-  items: T[];
-  /** Cursor position relative to the zone boundary */
-  placement: IPlacement | undefined;
-  /** Custom data from the `data` option (reactive, always up-to-date) */
-  data?: unknown;
-}
-
-export interface IBaseOptions {
-  disabled?: boolean | Ref<boolean>;
-  groups?: string[] | Ref<string[]>;
-}
-
-export interface IBaseEntity {
-  disabled?: boolean;
-  groups?: string[];
-}
-
-export interface IEntities {
-  draggableMap: Map<HTMLElement, IDraggableEntity>;
-  droppableMap: Map<HTMLElement, IDroppableEntity>;
-
-  selectingArea?: HTMLElement;
-  initiatingDraggable?: HTMLElement;
-
-  selectableAreaMap: Map<HTMLElement, ISelectableAreaEntity>;
-  constraintsAreaMap: Map<HTMLElement, IConstraintsAreaEntity>;
-
-  draggingMap: Map<HTMLElement, IDraggingEntity>;
-  selectedSet: Set<HTMLElement>;
-  /** Snapshot of selectedSet taken at the start of a rubber-band selection session.
-   *  Elements in this set are preserved when the new rect doesn't cover them. */
-  selectionBase: Set<HTMLElement>;
-
-  modifiersDraggableSet: ComputedRef<Set<HTMLElement>>;
-  modifiersSelectableAreaSet: ComputedRef<Set<HTMLElement>>;
-
-  allowedDroppableSet: ComputedRef<Set<HTMLElement>>;
-  allowedDraggableSet: ComputedRef<Set<HTMLElement>>;
-
-  visibleDraggableSet: Set<HTMLElement>;
-  visibleDroppableSet: Set<HTMLElement>;
-  visibleSelectableAreaSet: Set<HTMLElement>;
-}
-
-export type TModifierMethod = 'every' | 'some';
-export type TModifierKeys = string[];
-
-export interface IModifier {
-  keys: TModifierKeys;
-  method: TModifierMethod;
-}
-
-export interface IModifierOptions {
-  keys: TModifierKeys | Ref<TModifierKeys>;
-  method: TModifierMethod | Ref<TModifierMethod>;
-}
-
-export interface ISelectableAreaEvents {
-  /** Called when selection ends (pointer up) with selected elements */
-  onSelected?: (selected: HTMLElement[]) => void;
-}
-
-export type TSelectableAreaStrategy = 'toggle' | 'select';
-
-export interface ISelectableAreaEntity extends IBaseEntity {
-  modifier: IModifier;
-  events?: ISelectableAreaEvents;
-  strategy?: TSelectableAreaStrategy;
-}
-
-export interface IConstraintsAreaEntity {
-  axis?: TDragAxis;
-  restrictToArea?: boolean;
-}
-
-export interface IDraggableEvents {
-  /** Dragged element(s) — identifies which element is being dragged */
-  onSelfDragStart?: (event: IDragEvent) => void;
-  onSelfDragMove?: (event: IDragEvent) => void;
-  onSelfDragEnd?: (event: IDragEvent) => void;
-  onSelfDragCancel?: (event: IDragEvent) => void;
-
-  /** Element under cursor during drag — when another element is dragged over this one */
-  onDragStart?: (event: IDragEvent) => void;
-  onDragMove?: (event: IDragEvent) => void;
-  onDragEnd?: (event: IDragEvent) => void;
-  onDragCancel?: (event: IDragEvent) => void;
-
-  /** Alias / shortcut: cursor enters this draggable during drag */
-  onHover?: (event: IDragEvent) => void;
-  /** Cursor leaves this draggable during drag */
-  onLeave?: (event: IDragEvent) => void;
-}
-
-export interface IDropValidateEvent {
-  /** Items whose groups are compatible with the zone's groups */
-  validItems: IDragItem[];
-  /** Items whose groups do NOT match the zone's groups */
-  invalidItems: IDragItem[];
-  dropZone: IDropZoneContext | undefined;
-  hoveredDraggable?: IHoveredDraggableContext;
-}
-
-export interface IDroppableEvents {
-  onEnter?: (event: IDragEvent) => void;
-  /**
-   * Called before `onDrop` when `groupMatch: 'some'` and some dragged items
-   * don't match the zone's groups. Receives valid/invalid item split.
-   *
-   * Return:
-   * - `void` — drop only `validItems` (default)
-   * - `false` — decline this drop (drag stays active)
-   * - `IDragItem[]` — drop exactly these items
-   * - `Promise<...>` — async (state becomes 'pending' while waiting)
-   */
-  onValidate?: (
-    event: IDropValidateEvent,
-  ) => void | false | IDragItem[] | Promise<void | false | IDragItem[]>;
-  onDrop?: (event: IDragEvent) => void | boolean | Promise<void | boolean>;
-  onLeave?: (event: IDragEvent) => void;
-}
-
-export interface IDragActivationOptions {
-  distance?:
-    | {
-        x?: number | Ref<number>;
-        y?: number | Ref<number>;
-        condition?: TCondition | Ref<TCondition>;
-      }
-    | number
-    | Ref<number>;
-  delay?: number | Ref<number>;
-}
-
-export interface IDragActivation {
-  distance?:
-    | {
-        x?: number;
-        y?: number;
-        condition?: TCondition;
-      }
-    | number;
-  delay?: number;
-  condition?: TCondition;
-}
-
-export type TCondition = 'any' | 'both';
-
-export interface IDraggableEntity extends IBaseEntity {
-  id?: string | number | symbol;
-  render?: Component;
-  events?: IDraggableEvents;
-  payload?: TDraggablePayload;
-  data?: () => unknown;
-  modifier?: IModifier;
-  dragHandle?: string;
-  activation?: IDragActivation;
-  /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
-  placementMargins?: IPlacementMargins;
-  hoveredPlacement?: IPlacement;
-}
-
-export interface IDraggingEntity extends IDraggableEntity {
-  initialHTML: string;
-  initialRect: DOMRect;
-  initialOuterHTML: string;
-}
-
-export interface IDroppableEntity extends IBaseEntity {
-  /** 'every' — all dragged items must match zone groups (default).
-   *  'some'  — zone is accessible if at least one item matches. */
-  groupMatch?: TModifierMethod;
-  events?: IDroppableEvents;
-  payload?: TDroppablePayload;
-  data?: () => unknown;
-  hoveredPlacement: IPlacement | undefined;
-}

package/dist/external/types/index.d.ts

@@ -1,5 +0,0 @@
-export type * from './pointer';
-export type * from './provider';
-export type * from './placement';
-export type * from './entities';
-export type * from './operations';