@dnd-kit/vue 0.2.3 → 0.3.0-beta-20260210032016

package/composables.cjs

@@ -1,47 +1,24 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/composables/index.ts
-var composables_exports = {};
-__export(composables_exports, {
-  useDeepSignal: () => useDeepSignal
-});
-module.exports = __toCommonJS(composables_exports);
+var state = require('@dnd-kit/state');
+var vue = require('vue');
 
 // src/composables/useDeepSignal.ts
-var import_state = require("@dnd-kit/state");
-var import_vue = require("vue");
 function useDeepSignal(target) {
   const tracked = /* @__PURE__ */ new Map();
-  const dirty = (0, import_vue.ref)(0);
-  (0, import_vue.watchEffect)(() => {
-    const _target = (0, import_vue.toValue)(target);
+  const dirty = vue.ref(0);
+  vue.watchEffect(() => {
+    const _target = vue.toValue(target);
     if (!_target) {
       tracked.clear();
       return;
     }
-    (0, import_vue.onWatcherCleanup)(
-      (0, import_state.effect)(() => {
+    vue.onWatcherCleanup(
+      state.effect(() => {
         let stale = false;
         for (const entry of tracked) {
           const [key] = entry;
-          const value = (0, import_state.untracked)(() => entry[1]);
+          const value = state.untracked(() => entry[1]);
           const latestValue = _target[key];
           if (value !== latestValue) {
             stale = true;
@@ -53,9 +30,9 @@ function useDeepSignal(target) {
         }
       })
     );
-  });
-  return (0, import_vue.computed)(() => {
-    const _target = (0, import_vue.toValue)(target);
+  }, { flush: "post" });
+  return vue.computed(() => {
+    const _target = vue.toValue(target);
     void dirty.value;
     return _target ? new Proxy(_target, {
       get(target2, key) {
@@ -66,8 +43,7 @@ function useDeepSignal(target) {
     }) : _target;
   });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useDeepSignal
-});
+
+exports.useDeepSignal = useDeepSignal;
+//# sourceMappingURL=composables.cjs.map
 //# sourceMappingURL=composables.cjs.map

package/composables.js

@@ -1,6 +1,7 @@
+import { effect, untracked } from '@dnd-kit/state';
+import { ref, watchEffect, toValue, onWatcherCleanup, computed } from 'vue';
+
 // src/composables/useDeepSignal.ts
-import { effect, untracked } from "@dnd-kit/state";
-import { computed, onWatcherCleanup, ref, toValue, watchEffect } from "vue";
 function useDeepSignal(target) {
   const tracked = /* @__PURE__ */ new Map();
   const dirty = ref(0);
@@ -27,7 +28,7 @@ function useDeepSignal(target) {
         }
       })
     );
-  });
+  }, { flush: "post" });
   return computed(() => {
     const _target = toValue(target);
     void dirty.value;
@@ -40,7 +41,7 @@ function useDeepSignal(target) {
     }) : _target;
   });
 }
-export {
-  useDeepSignal
-};
+
+export { useDeepSignal };
+//# sourceMappingURL=composables.js.map
 //# sourceMappingURL=composables.js.map

package/index.cjs

@@ -1,49 +1,15 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/core/index.ts
-var core_exports = {};
-__export(core_exports, {
-  DragDropProvider: () => DragDropProvider_default,
-  KeyboardSensor: () => import_dom5.KeyboardSensor,
-  PointerSensor: () => import_dom5.PointerSensor,
-  useDragDropManager: () => useDragDropManager,
-  useDragDropMonitor: () => useDragDropMonitor,
-  useDragOperation: () => useDragOperation,
-  useDraggable: () => useDraggable,
-  useDroppable: () => useDroppable,
-  useInstance: () => useInstance
-});
-module.exports = __toCommonJS(core_exports);
+var dom = require('@dnd-kit/dom');
+var vue = require('vue');
+var state = require('@dnd-kit/state');
 
 // src/core/context/DragDropProvider.ts
-var import_dom = require("@dnd-kit/dom");
-var import_dom2 = require("@dnd-kit/dom");
-var import_vue5 = require("vue");
-
-// src/core/context/renderer.ts
-var import_vue = require("vue");
 function useRenderer() {
-  const transitionCount = (0, import_vue.ref)(0);
-  const rendering = (0, import_vue.ref)(null);
+  const transitionCount = vue.ref(0);
+  const rendering = vue.ref(null);
   let resolver = null;
-  (0, import_vue.watch)(
+  vue.watch(
     transitionCount,
     () => {
       resolver?.();
@@ -65,7 +31,7 @@ function useRenderer() {
       });
     }
     callback();
-    (0, import_vue.nextTick)(() => {
+    vue.nextTick(() => {
       transitionCount.value++;
     });
   }
@@ -74,16 +40,13 @@ function useRenderer() {
     trackRendering
   };
 }
-
-// src/utilities/context.ts
-var import_vue2 = require("vue");
 function createContext(componentName) {
   const injectionKey = Symbol(
     `${componentName}Context`
   );
   return [injectContext, provideContext];
   function injectContext(fallback) {
-    const context = (0, import_vue2.inject)(injectionKey, fallback);
+    const context = vue.inject(injectionKey, fallback);
     if (context) return context;
     if (context === null) return context;
     throw new Error(
@@ -91,23 +54,17 @@ function createContext(componentName) {
     );
   }
   function provideContext(contextValue) {
-    (0, import_vue2.provide)(injectionKey, contextValue);
+    vue.provide(injectionKey, contextValue);
     return contextValue;
   }
 }
-
-// src/utilities/element.ts
-var import_vue3 = require("vue");
 function unrefElement(elRef) {
-  const plain = (0, import_vue3.toValue)(elRef);
+  const plain = vue.toValue(elRef);
   return plain?.$el ?? plain ?? void 0;
 }
-
-// src/utilities/ref.ts
-var import_vue4 = require("vue");
 function toValueDeep(input) {
   return Object.fromEntries(
-    Object.entries(input).map(([key, value]) => [key, (0, import_vue4.toValue)(value)])
+    Object.entries(input).map(([key, value]) => [key, vue.toValue(value)])
   );
 }
 
@@ -115,7 +72,7 @@ function toValueDeep(input) {
 var [injectDragDropContext, provideDragDropContext] = createContext("DragDropProvider");
 
 // src/core/context/DragDropProvider.ts
-var DragDropProvider_default = /* @__PURE__ */ (0, import_vue5.defineComponent)({
+var DragDropProvider_default = /* @__PURE__ */ vue.defineComponent({
   props: [
     "manager",
     "plugins",
@@ -132,11 +89,11 @@ var DragDropProvider_default = /* @__PURE__ */ (0, import_vue5.defineComponent)(
   ],
   setup(props, { emit, slots }) {
     const { renderer, trackRendering } = useRenderer();
-    const manager = (0, import_vue5.shallowRef)(props.manager ?? new import_dom2.DragDropManager(props));
-    (0, import_vue5.watch)(
+    const manager = vue.shallowRef(props.manager ?? new dom.DragDropManager(props));
+    vue.watch(
       [() => props.manager],
       () => {
-        const _manager = props.manager ?? new import_dom2.DragDropManager(props);
+        const _manager = props.manager ?? new dom.DragDropManager(props);
         const cleanupFns = [];
         _manager.renderer = renderer;
         cleanupFns.push(
@@ -176,19 +133,19 @@ var DragDropProvider_default = /* @__PURE__ */ (0, import_vue5.defineComponent)(
           )
         );
         manager.value = _manager;
-        (0, import_vue5.onWatcherCleanup)(() => cleanupFns.forEach((fn) => fn()));
+        vue.onWatcherCleanup(() => cleanupFns.forEach((fn) => fn()));
       },
       {
         immediate: true
       }
     );
-    (0, import_vue5.watchEffect)(() => {
-      manager.value.plugins = props.plugins ?? import_dom.defaultPreset.plugins;
-      manager.value.sensors = props.sensors ?? import_dom.defaultPreset.sensors;
-      manager.value.modifiers = props.modifiers ?? import_dom.defaultPreset.modifiers;
+    vue.watchEffect(() => {
+      manager.value.plugins = props.plugins ?? dom.defaultPreset.plugins;
+      manager.value.sensors = props.sensors ?? dom.defaultPreset.sensors;
+      manager.value.modifiers = props.modifiers ?? dom.defaultPreset.modifiers;
     });
-    provideDragDropContext((0, import_vue5.computed)(() => manager.value));
-    (0, import_vue5.onUnmounted)(() => {
+    provideDragDropContext(vue.computed(() => manager.value));
+    vue.onUnmounted(() => {
       if (!props.manager) {
         manager.value.destroy();
       }
@@ -196,28 +153,21 @@ var DragDropProvider_default = /* @__PURE__ */ (0, import_vue5.defineComponent)(
     return () => slots.default?.();
   }
 });
-
-// src/core/draggable/useDraggable.ts
-var import_dom3 = require("@dnd-kit/dom");
-
-// src/composables/useDeepSignal.ts
-var import_state = require("@dnd-kit/state");
-var import_vue6 = require("vue");
 function useDeepSignal(target) {
   const tracked = /* @__PURE__ */ new Map();
-  const dirty = (0, import_vue6.ref)(0);
-  (0, import_vue6.watchEffect)(() => {
-    const _target = (0, import_vue6.toValue)(target);
+  const dirty = vue.ref(0);
+  vue.watchEffect(() => {
+    const _target = vue.toValue(target);
     if (!_target) {
       tracked.clear();
       return;
     }
-    (0, import_vue6.onWatcherCleanup)(
-      (0, import_state.effect)(() => {
+    vue.onWatcherCleanup(
+      state.effect(() => {
         let stale = false;
         for (const entry of tracked) {
           const [key] = entry;
-          const value = (0, import_state.untracked)(() => entry[1]);
+          const value = state.untracked(() => entry[1]);
           const latestValue = _target[key];
           if (value !== latestValue) {
             stale = true;
@@ -229,9 +179,9 @@ function useDeepSignal(target) {
         }
       })
     );
-  });
-  return (0, import_vue6.computed)(() => {
-    const _target = (0, import_vue6.toValue)(target);
+  }, { flush: "post" });
+  return vue.computed(() => {
+    const _target = vue.toValue(target);
     void dirty.value;
     return _target ? new Proxy(_target, {
       get(target2, key) {
@@ -243,12 +193,6 @@ function useDeepSignal(target) {
   });
 }
 
-// src/core/draggable/useDraggable.ts
-var import_vue8 = require("vue");
-
-// src/core/hooks/useInstance.ts
-var import_vue7 = require("vue");
-
 // src/core/hooks/useDragDropManager.ts
 function useDragDropManager() {
   return injectDragDropContext();
@@ -257,18 +201,18 @@ function useDragDropManager() {
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
   const manager = useDragDropManager();
-  const instance = (0, import_vue7.shallowRef)(initializer(manager.value));
-  (0, import_vue7.watchEffect)(() => {
+  const instance = vue.shallowRef(initializer(manager.value));
+  vue.watchEffect(() => {
     instance.value.manager = manager.value;
-    (0, import_vue7.onWatcherCleanup)(instance.value.register());
+    vue.onWatcherCleanup(instance.value.register());
   });
-  return (0, import_vue7.computed)(() => instance.value);
+  return vue.computed(() => instance.value);
 }
 
 // src/core/draggable/useDraggable.ts
 function useDraggable(input) {
   const draggable = useInstance(
-    (manager) => new import_dom3.Draggable(
+    (manager) => new dom.Draggable(
       {
         ...toValueDeep(input),
         register: false,
@@ -279,33 +223,29 @@ function useDraggable(input) {
     )
   );
   const trackedDraggable = useDeepSignal(draggable);
-  (0, import_vue8.watchEffect)(() => {
+  vue.watchEffect(() => {
     draggable.value.element = unrefElement(input.element) ?? void 0;
     draggable.value.handle = unrefElement(input.handle) ?? void 0;
-    draggable.value.id = (0, import_vue8.toValue)(input.id);
-    draggable.value.disabled = (0, import_vue8.toValue)(input.disabled) ?? false;
-    draggable.value.feedback = (0, import_vue8.toValue)(input.feedback) ?? "default";
-    draggable.value.alignment = (0, import_vue8.toValue)(input.alignment);
-    draggable.value.modifiers = (0, import_vue8.toValue)(input.modifiers);
-    draggable.value.sensors = (0, import_vue8.toValue)(input.sensors);
-    if ((0, import_vue8.toValue)(input.data)) {
-      draggable.value.data = (0, import_vue8.toValue)(input.data);
+    draggable.value.id = vue.toValue(input.id);
+    draggable.value.disabled = vue.toValue(input.disabled) ?? false;
+    draggable.value.feedback = vue.toValue(input.feedback) ?? "default";
+    draggable.value.alignment = vue.toValue(input.alignment);
+    draggable.value.modifiers = vue.toValue(input.modifiers);
+    draggable.value.sensors = vue.toValue(input.sensors);
+    if (vue.toValue(input.data)) {
+      draggable.value.data = vue.toValue(input.data);
     }
   });
   return {
-    draggable: (0, import_vue8.shallowReadonly)(draggable),
-    isDragging: (0, import_vue8.computed)(() => trackedDraggable.value.isDragging),
-    isDropping: (0, import_vue8.computed)(() => trackedDraggable.value.isDropping),
-    isDragSource: (0, import_vue8.computed)(() => trackedDraggable.value.isDragSource)
+    draggable: vue.shallowReadonly(draggable),
+    isDragging: vue.computed(() => trackedDraggable.value.isDragging),
+    isDropping: vue.computed(() => trackedDraggable.value.isDropping),
+    isDragSource: vue.computed(() => trackedDraggable.value.isDragSource)
   };
 }
-
-// src/core/droppable/useDroppable.ts
-var import_dom4 = require("@dnd-kit/dom");
-var import_vue9 = require("vue");
 function useDroppable(input) {
   const droppable = useInstance(
-    (manager) => new import_dom4.Droppable(
+    (manager) => new dom.Droppable(
       {
         ...toValueDeep(input),
         register: false,
@@ -315,30 +255,27 @@ function useDroppable(input) {
     )
   );
   const trackedDroppable = useDeepSignal(droppable);
-  (0, import_vue9.watchEffect)(() => {
+  vue.watchEffect(() => {
     droppable.value.element = unrefElement(input.element) ?? void 0;
-    droppable.value.id = (0, import_vue9.toValue)(input.id);
-    droppable.value.accept = (0, import_vue9.toValue)(input.accept);
-    droppable.value.type = (0, import_vue9.toValue)(input.type);
-    droppable.value.disabled = (0, import_vue9.toValue)(input.disabled) ?? false;
-    if ((0, import_vue9.toValue)(input.collisionDetector)) {
-      droppable.value.collisionDetector = (0, import_vue9.toValue)(input.collisionDetector);
+    droppable.value.id = vue.toValue(input.id);
+    droppable.value.accept = vue.toValue(input.accept);
+    droppable.value.type = vue.toValue(input.type);
+    droppable.value.disabled = vue.toValue(input.disabled) ?? false;
+    if (vue.toValue(input.collisionDetector)) {
+      droppable.value.collisionDetector = vue.toValue(input.collisionDetector);
     }
-    if ((0, import_vue9.toValue)(input.data)) {
-      droppable.value.data = (0, import_vue9.toValue)(input.data);
+    if (vue.toValue(input.data)) {
+      droppable.value.data = vue.toValue(input.data);
     }
   });
   return {
-    droppable: (0, import_vue9.shallowReadonly)(droppable),
-    isDropTarget: (0, import_vue9.computed)(() => trackedDroppable.value.isDropTarget)
+    droppable: vue.shallowReadonly(droppable),
+    isDropTarget: vue.computed(() => trackedDroppable.value.isDropTarget)
   };
 }
-
-// src/core/hooks/useDragDropMonitor.ts
-var import_vue10 = require("vue");
 function useDragDropMonitor(handlers) {
   const manager = useDragDropManager();
-  (0, import_vue10.watchEffect)(() => {
+  vue.watchEffect(() => {
     if (!manager) {
       if (process.env.NODE_ENV !== "production") {
         console.warn(
@@ -361,16 +298,13 @@ function useDragDropMonitor(handlers) {
       },
       []
     );
-    (0, import_vue10.onWatcherCleanup)(() => cleanupFns.forEach((cleanup) => cleanup()));
+    vue.onWatcherCleanup(() => cleanupFns.forEach((cleanup) => cleanup()));
   });
 }
-
-// src/core/hooks/useDragOperation.ts
-var import_vue11 = require("vue");
 function useDragOperation() {
   const manager = useDragDropManager();
   const trackedDragOperation = useDeepSignal(
-    (0, import_vue11.computed)(() => manager.value.dragOperation)
+    vue.computed(() => manager.value.dragOperation)
   );
   return {
     get source() {
@@ -385,18 +319,20 @@ function useDragOperation() {
   };
 }
 
-// src/core/index.ts
-var import_dom5 = require("@dnd-kit/dom");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DragDropProvider,
-  KeyboardSensor,
-  PointerSensor,
-  useDragDropManager,
-  useDragDropMonitor,
-  useDragOperation,
-  useDraggable,
-  useDroppable,
-  useInstance
+Object.defineProperty(exports, "KeyboardSensor", {
+  enumerable: true,
+  get: function () { return dom.KeyboardSensor; }
+});
+Object.defineProperty(exports, "PointerSensor", {
+  enumerable: true,
+  get: function () { return dom.PointerSensor; }
 });
+exports.DragDropProvider = DragDropProvider_default;
+exports.useDragDropManager = useDragDropManager;
+exports.useDragDropMonitor = useDragDropMonitor;
+exports.useDragOperation = useDragOperation;
+exports.useDraggable = useDraggable;
+exports.useDroppable = useDroppable;
+exports.useInstance = useInstance;
+//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/index.js

@@ -1,20 +1,9 @@
-// src/core/context/DragDropProvider.ts
-import {
-  defaultPreset
-} from "@dnd-kit/dom";
-import { DragDropManager } from "@dnd-kit/dom";
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  onWatcherCleanup,
-  shallowRef,
-  watch as watch2,
-  watchEffect
-} from "vue";
+import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
+export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
+import { inject, provide, defineComponent, shallowRef, watch, onWatcherCleanup, watchEffect, computed, onUnmounted, toValue, shallowReadonly, ref, nextTick } from 'vue';
+import { effect, untracked } from '@dnd-kit/state';
 
-// src/core/context/renderer.ts
-import { nextTick, ref, watch } from "vue";
+// src/core/context/DragDropProvider.ts
 function useRenderer() {
   const transitionCount = ref(0);
   const rendering = ref(null);
@@ -50,9 +39,6 @@ function useRenderer() {
     trackRendering
   };
 }
-
-// src/utilities/context.ts
-import { inject, provide } from "vue";
 function createContext(componentName) {
   const injectionKey = Symbol(
     `${componentName}Context`
@@ -71,19 +57,13 @@ function createContext(componentName) {
     return contextValue;
   }
 }
-
-// src/utilities/element.ts
-import { toValue } from "vue";
 function unrefElement(elRef) {
   const plain = toValue(elRef);
   return plain?.$el ?? plain ?? void 0;
 }
-
-// src/utilities/ref.ts
-import { toValue as toValue2 } from "vue";
 function toValueDeep(input) {
   return Object.fromEntries(
-    Object.entries(input).map(([key, value]) => [key, toValue2(value)])
+    Object.entries(input).map(([key, value]) => [key, toValue(value)])
   );
 }
 
@@ -109,7 +89,7 @@ var DragDropProvider_default = /* @__PURE__ */ defineComponent({
   setup(props, { emit, slots }) {
     const { renderer, trackRendering } = useRenderer();
     const manager = shallowRef(props.manager ?? new DragDropManager(props));
-    watch2(
+    watch(
       [() => props.manager],
       () => {
         const _manager = props.manager ?? new DragDropManager(props);
@@ -172,23 +152,16 @@ var DragDropProvider_default = /* @__PURE__ */ defineComponent({
     return () => slots.default?.();
   }
 });
-
-// src/core/draggable/useDraggable.ts
-import { Draggable } from "@dnd-kit/dom";
-
-// src/composables/useDeepSignal.ts
-import { effect, untracked } from "@dnd-kit/state";
-import { computed as computed2, onWatcherCleanup as onWatcherCleanup2, ref as ref2, toValue as toValue3, watchEffect as watchEffect2 } from "vue";
 function useDeepSignal(target) {
   const tracked = /* @__PURE__ */ new Map();
-  const dirty = ref2(0);
-  watchEffect2(() => {
-    const _target = toValue3(target);
+  const dirty = ref(0);
+  watchEffect(() => {
+    const _target = toValue(target);
     if (!_target) {
       tracked.clear();
       return;
     }
-    onWatcherCleanup2(
+    onWatcherCleanup(
       effect(() => {
         let stale = false;
         for (const entry of tracked) {
@@ -205,9 +178,9 @@ function useDeepSignal(target) {
         }
       })
     );
-  });
-  return computed2(() => {
-    const _target = toValue3(target);
+  }, { flush: "post" });
+  return computed(() => {
+    const _target = toValue(target);
     void dirty.value;
     return _target ? new Proxy(_target, {
       get(target2, key) {
@@ -219,12 +192,6 @@ function useDeepSignal(target) {
   });
 }
 
-// src/core/draggable/useDraggable.ts
-import { computed as computed4, shallowReadonly, toValue as toValue4, watchEffect as watchEffect4 } from "vue";
-
-// src/core/hooks/useInstance.ts
-import { computed as computed3, onWatcherCleanup as onWatcherCleanup3, shallowRef as shallowRef2, watchEffect as watchEffect3 } from "vue";
-
 // src/core/hooks/useDragDropManager.ts
 function useDragDropManager() {
   return injectDragDropContext();
@@ -233,12 +200,12 @@ function useDragDropManager() {
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
   const manager = useDragDropManager();
-  const instance = shallowRef2(initializer(manager.value));
-  watchEffect3(() => {
+  const instance = shallowRef(initializer(manager.value));
+  watchEffect(() => {
     instance.value.manager = manager.value;
-    onWatcherCleanup3(instance.value.register());
+    onWatcherCleanup(instance.value.register());
   });
-  return computed3(() => instance.value);
+  return computed(() => instance.value);
 }
 
 // src/core/draggable/useDraggable.ts
@@ -255,30 +222,26 @@ function useDraggable(input) {
     )
   );
   const trackedDraggable = useDeepSignal(draggable);
-  watchEffect4(() => {
+  watchEffect(() => {
     draggable.value.element = unrefElement(input.element) ?? void 0;
     draggable.value.handle = unrefElement(input.handle) ?? void 0;
-    draggable.value.id = toValue4(input.id);
-    draggable.value.disabled = toValue4(input.disabled) ?? false;
-    draggable.value.feedback = toValue4(input.feedback) ?? "default";
-    draggable.value.alignment = toValue4(input.alignment);
-    draggable.value.modifiers = toValue4(input.modifiers);
-    draggable.value.sensors = toValue4(input.sensors);
-    if (toValue4(input.data)) {
-      draggable.value.data = toValue4(input.data);
+    draggable.value.id = toValue(input.id);
+    draggable.value.disabled = toValue(input.disabled) ?? false;
+    draggable.value.feedback = toValue(input.feedback) ?? "default";
+    draggable.value.alignment = toValue(input.alignment);
+    draggable.value.modifiers = toValue(input.modifiers);
+    draggable.value.sensors = toValue(input.sensors);
+    if (toValue(input.data)) {
+      draggable.value.data = toValue(input.data);
     }
   });
   return {
     draggable: shallowReadonly(draggable),
-    isDragging: computed4(() => trackedDraggable.value.isDragging),
-    isDropping: computed4(() => trackedDraggable.value.isDropping),
-    isDragSource: computed4(() => trackedDraggable.value.isDragSource)
+    isDragging: computed(() => trackedDraggable.value.isDragging),
+    isDropping: computed(() => trackedDraggable.value.isDropping),
+    isDragSource: computed(() => trackedDraggable.value.isDragSource)
   };
 }
-
-// src/core/droppable/useDroppable.ts
-import { Droppable } from "@dnd-kit/dom";
-import { computed as computed5, shallowReadonly as shallowReadonly2, toValue as toValue5, watchEffect as watchEffect5 } from "vue";
 function useDroppable(input) {
   const droppable = useInstance(
     (manager) => new Droppable(
@@ -291,30 +254,27 @@ function useDroppable(input) {
     )
   );
   const trackedDroppable = useDeepSignal(droppable);
-  watchEffect5(() => {
+  watchEffect(() => {
     droppable.value.element = unrefElement(input.element) ?? void 0;
-    droppable.value.id = toValue5(input.id);
-    droppable.value.accept = toValue5(input.accept);
-    droppable.value.type = toValue5(input.type);
-    droppable.value.disabled = toValue5(input.disabled) ?? false;
-    if (toValue5(input.collisionDetector)) {
-      droppable.value.collisionDetector = toValue5(input.collisionDetector);
+    droppable.value.id = toValue(input.id);
+    droppable.value.accept = toValue(input.accept);
+    droppable.value.type = toValue(input.type);
+    droppable.value.disabled = toValue(input.disabled) ?? false;
+    if (toValue(input.collisionDetector)) {
+      droppable.value.collisionDetector = toValue(input.collisionDetector);
     }
-    if (toValue5(input.data)) {
-      droppable.value.data = toValue5(input.data);
+    if (toValue(input.data)) {
+      droppable.value.data = toValue(input.data);
     }
   });
   return {
-    droppable: shallowReadonly2(droppable),
-    isDropTarget: computed5(() => trackedDroppable.value.isDropTarget)
+    droppable: shallowReadonly(droppable),
+    isDropTarget: computed(() => trackedDroppable.value.isDropTarget)
   };
 }
-
-// src/core/hooks/useDragDropMonitor.ts
-import { onWatcherCleanup as onWatcherCleanup4, watchEffect as watchEffect6 } from "vue";
 function useDragDropMonitor(handlers) {
   const manager = useDragDropManager();
-  watchEffect6(() => {
+  watchEffect(() => {
     if (!manager) {
       if (process.env.NODE_ENV !== "production") {
         console.warn(
@@ -337,16 +297,13 @@ function useDragDropMonitor(handlers) {
       },
       []
     );
-    onWatcherCleanup4(() => cleanupFns.forEach((cleanup) => cleanup()));
+    onWatcherCleanup(() => cleanupFns.forEach((cleanup) => cleanup()));
   });
 }
-
-// src/core/hooks/useDragOperation.ts
-import { computed as computed6 } from "vue";
 function useDragOperation() {
   const manager = useDragDropManager();
   const trackedDragOperation = useDeepSignal(
-    computed6(() => manager.value.dragOperation)
+    computed(() => manager.value.dragOperation)
   );
   return {
     get source() {
@@ -361,17 +318,6 @@ function useDragOperation() {
   };
 }
 
-// src/core/index.ts
-import { KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
-export {
-  DragDropProvider_default as DragDropProvider,
-  KeyboardSensor,
-  PointerSensor,
-  useDragDropManager,
-  useDragDropMonitor,
-  useDragOperation,
-  useDraggable,
-  useDroppable,
-  useInstance
-};
+export { DragDropProvider_default as DragDropProvider, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/vue",
-  "version": "0.2.3",
+  "version": "0.3.0-beta-20260210032016",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -55,9 +55,9 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "^0.2.3",
-    "@dnd-kit/dom": "^0.2.3",
-    "@dnd-kit/state": "^0.2.3",
+    "@dnd-kit/abstract": "0.3.0-beta-20260210032016",
+    "@dnd-kit/dom": "0.3.0-beta-20260210032016",
+    "@dnd-kit/state": "0.3.0-beta-20260210032016",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -1,112 +1,87 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/sortable/index.ts
-var sortable_exports = {};
-__export(sortable_exports, {
-  isSortable: () => import_sortable2.isSortable,
-  useSortable: () => useSortable
-});
-module.exports = __toCommonJS(sortable_exports);
+var sortable = require('@dnd-kit/dom/sortable');
+var state = require('@dnd-kit/state');
+var composables = require('@dnd-kit/vue/composables');
+var utilities = require('@dnd-kit/vue/utilities');
+var vue$1 = require('@dnd-kit/vue');
+var vue = require('vue');
 
 // src/sortable/useSortable.ts
-var import_sortable = require("@dnd-kit/dom/sortable");
-var import_state = require("@dnd-kit/state");
-var import_composables = require("@dnd-kit/vue/composables");
-var import_utilities = require("@dnd-kit/vue/utilities");
-var import_vue = require("@dnd-kit/vue");
-var import_vue2 = require("vue");
 function useSortable(input) {
-  const transition = (0, import_vue2.computed)(() => ({
-    ...import_sortable.defaultSortableTransition,
-    ...(0, import_vue2.toValue)(input.transition)
+  const transition = vue.computed(() => ({
+    ...sortable.defaultSortableTransition,
+    ...vue.toValue(input.transition)
   }));
-  const sortable = (0, import_vue.useInstance)((manager) => {
-    const _input = (0, import_utilities.toValueDeep)(input);
-    return new import_sortable.Sortable(
+  const sortable$1 = vue$1.useInstance((manager) => {
+    const _input = utilities.toValueDeep(input);
+    return new sortable.Sortable(
       {
         ..._input,
         register: false,
         transition: transition.value,
-        element: (0, import_utilities.unrefElement)(input.element),
-        handle: (0, import_utilities.unrefElement)(input.handle),
-        target: (0, import_utilities.unrefElement)(input.target)
+        element: utilities.unrefElement(input.element),
+        handle: utilities.unrefElement(input.handle),
+        target: utilities.unrefElement(input.target)
       },
       manager
     );
   });
-  const trackedSortable = (0, import_composables.useDeepSignal)(sortable);
-  (0, import_vue2.watchEffect)(() => {
-    sortable.value.element = (0, import_utilities.unrefElement)(input.element);
-    sortable.value.handle = (0, import_utilities.unrefElement)(input.handle);
-    if ((0, import_utilities.unrefElement)(input.source)) {
-      sortable.value.source = (0, import_utilities.unrefElement)(input.source);
+  const trackedSortable = composables.useDeepSignal(sortable$1);
+  vue.watchEffect(() => {
+    sortable$1.value.element = utilities.unrefElement(input.element);
+    sortable$1.value.handle = utilities.unrefElement(input.handle);
+    if (utilities.unrefElement(input.source)) {
+      sortable$1.value.source = utilities.unrefElement(input.source);
     }
-    if ((0, import_utilities.unrefElement)(input.target)) {
-      sortable.value.target = (0, import_utilities.unrefElement)(input.target);
+    if (utilities.unrefElement(input.target)) {
+      sortable$1.value.target = utilities.unrefElement(input.target);
     }
-    sortable.value.id = (0, import_vue2.toValue)(input.id);
-    sortable.value.disabled = (0, import_vue2.toValue)(input.disabled) ?? false;
-    sortable.value.feedback = (0, import_vue2.toValue)(input.feedback) ?? "default";
-    sortable.value.alignment = (0, import_vue2.toValue)(input.alignment);
-    sortable.value.modifiers = (0, import_vue2.toValue)(input.modifiers);
-    sortable.value.sensors = (0, import_vue2.toValue)(input.sensors);
-    sortable.value.accept = (0, import_vue2.toValue)(input.accept);
-    sortable.value.type = (0, import_vue2.toValue)(input.type);
-    sortable.value.collisionPriority = (0, import_vue2.toValue)(input.collisionPriority);
-    sortable.value.transition = transition.value;
-    if ((0, import_vue2.toValue)(input.data)) {
-      sortable.value.data = (0, import_vue2.toValue)(input.data);
+    sortable$1.value.id = vue.toValue(input.id);
+    sortable$1.value.disabled = vue.toValue(input.disabled) ?? false;
+    sortable$1.value.feedback = vue.toValue(input.feedback) ?? "default";
+    sortable$1.value.alignment = vue.toValue(input.alignment);
+    sortable$1.value.modifiers = vue.toValue(input.modifiers);
+    sortable$1.value.sensors = vue.toValue(input.sensors);
+    sortable$1.value.accept = vue.toValue(input.accept);
+    sortable$1.value.type = vue.toValue(input.type);
+    sortable$1.value.collisionPriority = vue.toValue(input.collisionPriority);
+    sortable$1.value.transition = transition.value;
+    if (vue.toValue(input.data)) {
+      sortable$1.value.data = vue.toValue(input.data);
     }
   });
-  (0, import_vue2.watch)(
-    [() => (0, import_vue2.toValue)(input.group), () => (0, import_vue2.toValue)(input.index)],
+  vue.watch(
+    [() => vue.toValue(input.group), () => vue.toValue(input.index)],
     () => {
-      (0, import_state.batch)(() => {
-        sortable.value.group = (0, import_vue2.toValue)(input.group);
-        sortable.value.index = (0, import_vue2.toValue)(input.index);
+      state.batch(() => {
+        sortable$1.value.group = vue.toValue(input.group);
+        sortable$1.value.index = vue.toValue(input.index);
       });
     },
     { flush: "sync" }
   );
-  (0, import_vue2.watch)(
-    () => (0, import_vue2.toValue)(input.index),
+  vue.watch(
+    () => vue.toValue(input.index),
     () => {
-      if (sortable.value.manager?.dragOperation.status.idle && sortable.value.transition?.idle) {
-        sortable.value.refreshShape();
+      if (sortable$1.value.manager?.dragOperation.status.idle && sortable$1.value.transition?.idle) {
+        sortable$1.value.refreshShape();
       }
     }
   );
   return {
-    sortable: (0, import_vue2.shallowReadonly)(sortable),
-    isDragging: (0, import_vue2.computed)(() => trackedSortable.value.isDragging),
-    isDropping: (0, import_vue2.computed)(() => trackedSortable.value.isDropping),
-    isDragSource: (0, import_vue2.computed)(() => trackedSortable.value.isDragSource),
-    isDropTarget: (0, import_vue2.computed)(() => trackedSortable.value.isDropTarget)
+    sortable: vue.shallowReadonly(sortable$1),
+    isDragging: vue.computed(() => trackedSortable.value.isDragging),
+    isDropping: vue.computed(() => trackedSortable.value.isDropping),
+    isDragSource: vue.computed(() => trackedSortable.value.isDragSource),
+    isDropTarget: vue.computed(() => trackedSortable.value.isDropTarget)
   };
 }
 
-// src/sortable/index.ts
-var import_sortable2 = require("@dnd-kit/dom/sortable");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  isSortable,
-  useSortable
+Object.defineProperty(exports, "isSortable", {
+  enumerable: true,
+  get: function () { return sortable.isSortable; }
 });
+exports.useSortable = useSortable;
+//# sourceMappingURL=sortable.cjs.map
 //# sourceMappingURL=sortable.cjs.map

package/sortable.js

@@ -1,16 +1,12 @@
+import { defaultSortableTransition, Sortable } from '@dnd-kit/dom/sortable';
+export { isSortable } from '@dnd-kit/dom/sortable';
+import { batch } from '@dnd-kit/state';
+import { useDeepSignal } from '@dnd-kit/vue/composables';
+import { toValueDeep, unrefElement } from '@dnd-kit/vue/utilities';
+import { useInstance } from '@dnd-kit/vue';
+import { computed, toValue, watchEffect, watch, shallowReadonly } from 'vue';
+
 // src/sortable/useSortable.ts
-import { defaultSortableTransition, Sortable } from "@dnd-kit/dom/sortable";
-import { batch } from "@dnd-kit/state";
-import { useDeepSignal } from "@dnd-kit/vue/composables";
-import { toValueDeep, unrefElement } from "@dnd-kit/vue/utilities";
-import { useInstance } from "@dnd-kit/vue";
-import {
-  computed,
-  shallowReadonly,
-  toValue,
-  watch,
-  watchEffect
-} from "vue";
 function useSortable(input) {
   const transition = computed(() => ({
     ...defaultSortableTransition,
@@ -81,10 +77,6 @@ function useSortable(input) {
   };
 }
 
-// src/sortable/index.ts
-import { isSortable } from "@dnd-kit/dom/sortable";
-export {
-  isSortable,
-  useSortable
-};
+export { useSortable };
+//# sourceMappingURL=sortable.js.map
 //# sourceMappingURL=sortable.js.map

package/utilities.cjs

@@ -1,40 +1,15 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/utilities/index.ts
-var utilities_exports = {};
-__export(utilities_exports, {
-  createContext: () => createContext,
-  toValueDeep: () => toValueDeep,
-  unrefElement: () => unrefElement
-});
-module.exports = __toCommonJS(utilities_exports);
+var vue = require('vue');
 
 // src/utilities/context.ts
-var import_vue = require("vue");
 function createContext(componentName) {
   const injectionKey = Symbol(
     `${componentName}Context`
   );
   return [injectContext, provideContext];
   function injectContext(fallback) {
-    const context = (0, import_vue.inject)(injectionKey, fallback);
+    const context = vue.inject(injectionKey, fallback);
     if (context) return context;
     if (context === null) return context;
     throw new Error(
@@ -42,29 +17,22 @@ function createContext(componentName) {
     );
   }
   function provideContext(contextValue) {
-    (0, import_vue.provide)(injectionKey, contextValue);
+    vue.provide(injectionKey, contextValue);
     return contextValue;
   }
 }
-
-// src/utilities/element.ts
-var import_vue2 = require("vue");
 function unrefElement(elRef) {
-  const plain = (0, import_vue2.toValue)(elRef);
+  const plain = vue.toValue(elRef);
   return plain?.$el ?? plain ?? void 0;
 }
-
-// src/utilities/ref.ts
-var import_vue3 = require("vue");
 function toValueDeep(input) {
   return Object.fromEntries(
-    Object.entries(input).map(([key, value]) => [key, (0, import_vue3.toValue)(value)])
+    Object.entries(input).map(([key, value]) => [key, vue.toValue(value)])
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createContext,
-  toValueDeep,
-  unrefElement
-});
+
+exports.createContext = createContext;
+exports.toValueDeep = toValueDeep;
+exports.unrefElement = unrefElement;
+//# sourceMappingURL=utilities.cjs.map
 //# sourceMappingURL=utilities.cjs.map

package/utilities.js

@@ -1,5 +1,6 @@
+import { inject, provide, toValue } from 'vue';
+
 // src/utilities/context.ts
-import { inject, provide } from "vue";
 function createContext(componentName) {
   const injectionKey = Symbol(
     `${componentName}Context`
@@ -18,24 +19,16 @@ function createContext(componentName) {
     return contextValue;
   }
 }
-
-// src/utilities/element.ts
-import { toValue } from "vue";
 function unrefElement(elRef) {
   const plain = toValue(elRef);
   return plain?.$el ?? plain ?? void 0;
 }
-
-// src/utilities/ref.ts
-import { toValue as toValue2 } from "vue";
 function toValueDeep(input) {
   return Object.fromEntries(
-    Object.entries(input).map(([key, value]) => [key, toValue2(value)])
+    Object.entries(input).map(([key, value]) => [key, toValue(value)])
   );
 }
-export {
-  createContext,
-  toValueDeep,
-  unrefElement
-};
+
+export { createContext, toValueDeep, unrefElement };
+//# sourceMappingURL=utilities.js.map
 //# sourceMappingURL=utilities.js.map