@dnd-kit/vue 0.2.3

package/README.md

@@ -0,0 +1,17 @@
+# @dnd-kit/vue
+
+[![Stable release](https://img.shields.io/npm/v/@dnd-kit/vue.svg)](https://npm.im/@dnd-kit/vue)
+
+The Vue layer for @dnd-kit, built on top of @dnd-kit/dom.
+
+## Installation
+
+To get started, install the `@dnd-kit/vue` package via npm or yarn:
+
+```
+npm install @dnd-kit/vue
+```
+
+## Usage
+
+Visit [docs.dndkit.com](https://docs.dndkit.com) to learn how to get started with @dnd-kit.

package/composables.cjs

@@ -0,0 +1,73 @@
+"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);
+
+// src/composables/index.ts
+var composables_exports = {};
+__export(composables_exports, {
+  useDeepSignal: () => useDeepSignal
+});
+module.exports = __toCommonJS(composables_exports);
+
+// 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);
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    (0, import_vue.onWatcherCleanup)(
+      (0, import_state.effect)(() => {
+        let stale = false;
+        for (const entry of tracked) {
+          const [key] = entry;
+          const value = (0, import_state.untracked)(() => entry[1]);
+          const latestValue = _target[key];
+          if (value !== latestValue) {
+            stale = true;
+            tracked.set(key, latestValue);
+          }
+        }
+        if (stale) {
+          dirty.value++;
+        }
+      })
+    );
+  });
+  return (0, import_vue.computed)(() => {
+    const _target = (0, import_vue.toValue)(target);
+    void dirty.value;
+    return _target ? new Proxy(_target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.set(key, value);
+        return value;
+      }
+    }) : _target;
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDeepSignal
+});
+//# sourceMappingURL=composables.cjs.map

package/composables.d.ts

@@ -0,0 +1,6 @@
+import { MaybeRefOrGetter, ComputedRef } from 'vue';
+
+/** Trigger a recompute when reading signal properties of an object. */
+declare function useDeepSignal<T extends object | null | undefined>(target: MaybeRefOrGetter<T>): ComputedRef<T>;
+
+export { useDeepSignal };

package/composables.js

@@ -0,0 +1,46 @@
+// 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);
+  watchEffect(() => {
+    const _target = toValue(target);
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    onWatcherCleanup(
+      effect(() => {
+        let stale = false;
+        for (const entry of tracked) {
+          const [key] = entry;
+          const value = untracked(() => entry[1]);
+          const latestValue = _target[key];
+          if (value !== latestValue) {
+            stale = true;
+            tracked.set(key, latestValue);
+          }
+        }
+        if (stale) {
+          dirty.value++;
+        }
+      })
+    );
+  });
+  return computed(() => {
+    const _target = toValue(target);
+    void dirty.value;
+    return _target ? new Proxy(_target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.set(key, value);
+        return value;
+      }
+    }) : _target;
+  });
+}
+export {
+  useDeepSignal
+};
+//# sourceMappingURL=composables.js.map

package/index.cjs

@@ -0,0 +1,402 @@
+"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);
+
+// 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);
+
+// 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);
+  let resolver = null;
+  (0, import_vue.watch)(
+    transitionCount,
+    () => {
+      resolver?.();
+      rendering.value = null;
+    },
+    {
+      flush: "post"
+    }
+  );
+  const renderer = {
+    get rendering() {
+      return rendering.value ?? Promise.resolve();
+    }
+  };
+  function trackRendering(callback) {
+    if (!rendering.value) {
+      rendering.value = new Promise((resolve) => {
+        resolver = resolve;
+      });
+    }
+    callback();
+    (0, import_vue.nextTick)(() => {
+      transitionCount.value++;
+    });
+  }
+  return {
+    renderer,
+    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);
+    if (context) return context;
+    if (context === null) return context;
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within \`${componentName}\``
+    );
+  }
+  function provideContext(contextValue) {
+    (0, import_vue2.provide)(injectionKey, contextValue);
+    return contextValue;
+  }
+}
+
+// src/utilities/element.ts
+var import_vue3 = require("vue");
+function unrefElement(elRef) {
+  const plain = (0, import_vue3.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)])
+  );
+}
+
+// src/core/context/context.ts
+var [injectDragDropContext, provideDragDropContext] = createContext("DragDropProvider");
+
+// src/core/context/DragDropProvider.ts
+var DragDropProvider_default = /* @__PURE__ */ (0, import_vue5.defineComponent)({
+  props: [
+    "manager",
+    "plugins",
+    "sensors",
+    "modifiers"
+  ],
+  emits: [
+    "beforeDragStart",
+    "collision",
+    "dragStart",
+    "dragMove",
+    "dragOver",
+    "dragEnd"
+  ],
+  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)(
+      [() => props.manager],
+      () => {
+        const _manager = props.manager ?? new import_dom2.DragDropManager(props);
+        const cleanupFns = [];
+        _manager.renderer = renderer;
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "beforedragstart",
+            (event, manager2) => trackRendering(() => emit("beforeDragStart", event, manager2))
+          )
+        );
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "dragstart",
+            (event, manager2) => emit("dragStart", event, manager2)
+          )
+        );
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "dragover",
+            (event, manager2) => trackRendering(() => emit("dragOver", event, manager2))
+          )
+        );
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "dragmove",
+            (event, manager2) => trackRendering(() => emit("dragMove", event, manager2))
+          )
+        );
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "dragend",
+            (event, manager2) => trackRendering(() => emit("dragEnd", event, manager2))
+          )
+        );
+        cleanupFns.push(
+          _manager.monitor.addEventListener(
+            "collision",
+            (event, manager2) => emit("collision", event, manager2)
+          )
+        );
+        manager.value = _manager;
+        (0, import_vue5.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;
+    });
+    provideDragDropContext((0, import_vue5.computed)(() => manager.value));
+    (0, import_vue5.onUnmounted)(() => {
+      if (!props.manager) {
+        manager.value.destroy();
+      }
+    });
+    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);
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    (0, import_vue6.onWatcherCleanup)(
+      (0, import_state.effect)(() => {
+        let stale = false;
+        for (const entry of tracked) {
+          const [key] = entry;
+          const value = (0, import_state.untracked)(() => entry[1]);
+          const latestValue = _target[key];
+          if (value !== latestValue) {
+            stale = true;
+            tracked.set(key, latestValue);
+          }
+        }
+        if (stale) {
+          dirty.value++;
+        }
+      })
+    );
+  });
+  return (0, import_vue6.computed)(() => {
+    const _target = (0, import_vue6.toValue)(target);
+    void dirty.value;
+    return _target ? new Proxy(_target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.set(key, value);
+        return value;
+      }
+    }) : _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();
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager();
+  const instance = (0, import_vue7.shallowRef)(initializer(manager.value));
+  (0, import_vue7.watchEffect)(() => {
+    instance.value.manager = manager.value;
+    (0, import_vue7.onWatcherCleanup)(instance.value.register());
+  });
+  return (0, import_vue7.computed)(() => instance.value);
+}
+
+// src/core/draggable/useDraggable.ts
+function useDraggable(input) {
+  const draggable = useInstance(
+    (manager) => new import_dom3.Draggable(
+      {
+        ...toValueDeep(input),
+        register: false,
+        element: unrefElement(input.element) ?? void 0,
+        handle: unrefElement(input.handle) ?? void 0
+      },
+      manager
+    )
+  );
+  const trackedDraggable = useDeepSignal(draggable);
+  (0, import_vue8.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);
+    }
+  });
+  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)
+  };
+}
+
+// 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(
+      {
+        ...toValueDeep(input),
+        register: false,
+        element: unrefElement(input.element) ?? void 0
+      },
+      manager
+    )
+  );
+  const trackedDroppable = useDeepSignal(droppable);
+  (0, import_vue9.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);
+    }
+    if ((0, import_vue9.toValue)(input.data)) {
+      droppable.value.data = (0, import_vue9.toValue)(input.data);
+    }
+  });
+  return {
+    droppable: (0, import_vue9.shallowReadonly)(droppable),
+    isDropTarget: (0, import_vue9.computed)(() => trackedDroppable.value.isDropTarget)
+  };
+}
+
+// src/core/hooks/useDragDropMonitor.ts
+var import_vue10 = require("vue");
+function useDragDropMonitor(handlers) {
+  const manager = useDragDropManager();
+  (0, import_vue10.watchEffect)(() => {
+    if (!manager) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          "useDragDropMonitor composable was called outside of a DragDropProvider. Make sure your app is wrapped in a DragDropProvider component."
+        );
+      }
+      return;
+    }
+    const cleanupFns = Object.entries(handlers).reduce(
+      (acc, [handlerName, handler]) => {
+        if (handler) {
+          const eventName = handlerName.replace(/^on/, "").toLowerCase();
+          const unsubscribe = manager.value.monitor.addEventListener(
+            eventName,
+            handler
+          );
+          acc.push(unsubscribe);
+        }
+        return acc;
+      },
+      []
+    );
+    (0, import_vue10.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)
+  );
+  return {
+    get source() {
+      return trackedDragOperation.value.source;
+    },
+    get target() {
+      return trackedDragOperation.value.target;
+    },
+    get status() {
+      return trackedDragOperation.value.status;
+    }
+  };
+}
+
+// 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
+});
+//# sourceMappingURL=index.cjs.map

package/index.d.ts

@@ -0,0 +1,76 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter, ComponentPublicInstance } from 'vue';
+import * as _dnd_kit_abstract from '@dnd-kit/abstract';
+import { DragDropEvents, Data } from '@dnd-kit/abstract';
+import * as _dnd_kit_dom from '@dnd-kit/dom';
+import { DragDropManagerInput, DragDropManager, Draggable, Droppable, DraggableInput, DroppableInput } from '@dnd-kit/dom';
+export { DragDropManager, KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
+import { CleanupFunction } from '@dnd-kit/state';
+
+type NamedTuple<T extends (...args: any) => any> = T extends (...args: infer A) => any ? A : never;
+type ToVueEmits<T extends Record<string, (...args: any) => any>> = {
+    [K in keyof T]: NamedTuple<T[K]>;
+};
+type Events$1 = ToVueEmits<DragDropEvents<Draggable, Droppable, DragDropManager>>;
+interface DragDropProviderProps extends DragDropManagerInput {
+    manager?: DragDropManager;
+}
+type DragDropProviderEmits = {
+    beforeDragStart: Events$1['beforedragstart'];
+    collision: Events$1['collision'];
+    dragStart: Events$1['dragstart'];
+    dragMove: Events$1['dragmove'];
+    dragOver: Events$1['dragover'];
+    dragEnd: Events$1['dragend'];
+};
+declare const _default: vue.DefineComponent<DragDropProviderProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<DragDropProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+type MaybeRefsOrGetters<T> = {
+    [K in keyof T]: MaybeRefOrGetter<T[K]>;
+};
+type MaybeElement = HTMLElement | ComponentPublicInstance | undefined | null;
+
+interface UseDraggableInput<T extends Data = Data> extends MaybeRefsOrGetters<Omit<DraggableInput<T>, 'handle' | 'element'>> {
+    handle?: MaybeRefOrGetter<MaybeElement>;
+    element?: MaybeRefOrGetter<MaybeElement>;
+}
+declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
+    draggable: Readonly<vue.ComputedRef<any>>;
+    isDragging: vue.ComputedRef<any>;
+    isDropping: vue.ComputedRef<any>;
+    isDragSource: vue.ComputedRef<any>;
+};
+
+interface UseDroppableInput<T extends Data = Data> extends MaybeRefsOrGetters<Omit<DroppableInput<T>, 'element'>> {
+    element?: MaybeRefOrGetter<MaybeElement>;
+}
+declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>): {
+    droppable: Readonly<vue.ComputedRef<any>>;
+    isDropTarget: vue.ComputedRef<any>;
+};
+
+declare function useDragDropManager(): vue.ComputedRef<_dnd_kit_dom.DragDropManager<_dnd_kit_abstract.Data, _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>>>;
+
+type DragDropEventMap = {
+    beforedragstart: 'onBeforeDragStart';
+};
+type EventHandlerName<T extends string> = T extends keyof DragDropEventMap ? DragDropEventMap[T] : T extends `drag${infer Second}${infer Rest}` ? `onDrag${Uppercase<Second>}${Rest}` : `on${Capitalize<T>}`;
+type Events<T extends Data, U extends Draggable<T>, V extends Droppable<T>, W extends DragDropManager<T, U, V>> = DragDropEvents<U, V, W>;
+type EventHandlers<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> = {
+    [K in keyof Events<T, U, V, W> as EventHandlerName<K>]?: Events<T, U, V, W>[K];
+};
+declare function useDragDropMonitor<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(handlers: EventHandlers<T, U, V, W>): void;
+
+declare function useDragOperation(): {
+    readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null;
+    readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null;
+    readonly status: _dnd_kit_abstract.DragOperationStatus;
+};
+
+interface Instance<T extends DragDropManager = DragDropManager> {
+    manager: T | undefined;
+    register(): CleanupFunction | void;
+}
+declare function useInstance<T extends Instance>(initializer: (manager: DragDropManager | undefined) => T): vue.ComputedRef<any>;
+
+export { type EventHandlers as DragDropEventHandlers, _default as DragDropProvider, type DragDropProviderEmits, type DragDropProviderProps, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };