@dnd-kit/vue 0.2.3

package/index.js

@@ -0,0 +1,377 @@
+// 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";
+
+// src/core/context/renderer.ts
+import { nextTick, ref, watch } from "vue";
+function useRenderer() {
+  const transitionCount = ref(0);
+  const rendering = ref(null);
+  let resolver = null;
+  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();
+    nextTick(() => {
+      transitionCount.value++;
+    });
+  }
+  return {
+    renderer,
+    trackRendering
+  };
+}
+
+// src/utilities/context.ts
+import { inject, provide } from "vue";
+function createContext(componentName) {
+  const injectionKey = Symbol(
+    `${componentName}Context`
+  );
+  return [injectContext, provideContext];
+  function injectContext(fallback) {
+    const context = 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) {
+    provide(injectionKey, contextValue);
+    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)])
+  );
+}
+
+// src/core/context/context.ts
+var [injectDragDropContext, provideDragDropContext] = createContext("DragDropProvider");
+
+// src/core/context/DragDropProvider.ts
+var DragDropProvider_default = /* @__PURE__ */ defineComponent({
+  props: [
+    "manager",
+    "plugins",
+    "sensors",
+    "modifiers"
+  ],
+  emits: [
+    "beforeDragStart",
+    "collision",
+    "dragStart",
+    "dragMove",
+    "dragOver",
+    "dragEnd"
+  ],
+  setup(props, { emit, slots }) {
+    const { renderer, trackRendering } = useRenderer();
+    const manager = shallowRef(props.manager ?? new DragDropManager(props));
+    watch2(
+      [() => props.manager],
+      () => {
+        const _manager = props.manager ?? new 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;
+        onWatcherCleanup(() => cleanupFns.forEach((fn) => fn()));
+      },
+      {
+        immediate: true
+      }
+    );
+    watchEffect(() => {
+      manager.value.plugins = props.plugins ?? defaultPreset.plugins;
+      manager.value.sensors = props.sensors ?? defaultPreset.sensors;
+      manager.value.modifiers = props.modifiers ?? defaultPreset.modifiers;
+    });
+    provideDragDropContext(computed(() => manager.value));
+    onUnmounted(() => {
+      if (!props.manager) {
+        manager.value.destroy();
+      }
+    });
+    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);
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    onWatcherCleanup2(
+      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 computed2(() => {
+    const _target = toValue3(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
+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();
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager();
+  const instance = shallowRef2(initializer(manager.value));
+  watchEffect3(() => {
+    instance.value.manager = manager.value;
+    onWatcherCleanup3(instance.value.register());
+  });
+  return computed3(() => instance.value);
+}
+
+// src/core/draggable/useDraggable.ts
+function useDraggable(input) {
+  const draggable = useInstance(
+    (manager) => new Draggable(
+      {
+        ...toValueDeep(input),
+        register: false,
+        element: unrefElement(input.element) ?? void 0,
+        handle: unrefElement(input.handle) ?? void 0
+      },
+      manager
+    )
+  );
+  const trackedDraggable = useDeepSignal(draggable);
+  watchEffect4(() => {
+    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);
+    }
+  });
+  return {
+    draggable: shallowReadonly(draggable),
+    isDragging: computed4(() => trackedDraggable.value.isDragging),
+    isDropping: computed4(() => trackedDraggable.value.isDropping),
+    isDragSource: computed4(() => 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(
+      {
+        ...toValueDeep(input),
+        register: false,
+        element: unrefElement(input.element) ?? void 0
+      },
+      manager
+    )
+  );
+  const trackedDroppable = useDeepSignal(droppable);
+  watchEffect5(() => {
+    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);
+    }
+    if (toValue5(input.data)) {
+      droppable.value.data = toValue5(input.data);
+    }
+  });
+  return {
+    droppable: shallowReadonly2(droppable),
+    isDropTarget: computed5(() => trackedDroppable.value.isDropTarget)
+  };
+}
+
+// src/core/hooks/useDragDropMonitor.ts
+import { onWatcherCleanup as onWatcherCleanup4, watchEffect as watchEffect6 } from "vue";
+function useDragDropMonitor(handlers) {
+  const manager = useDragDropManager();
+  watchEffect6(() => {
+    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;
+      },
+      []
+    );
+    onWatcherCleanup4(() => 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)
+  );
+  return {
+    get source() {
+      return trackedDragOperation.value.source;
+    },
+    get target() {
+      return trackedDragOperation.value.target;
+    },
+    get status() {
+      return trackedDragOperation.value.status;
+    }
+  };
+}
+
+// src/core/index.ts
+import { KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
+export {
+  DragDropProvider_default as DragDropProvider,
+  KeyboardSensor,
+  PointerSensor,
+  useDragDropManager,
+  useDragDropMonitor,
+  useDragOperation,
+  useDraggable,
+  useDroppable,
+  useInstance
+};
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@dnd-kit/vue",
+  "version": "0.2.3",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "index.d.ts",
+    "index.cjs",
+    "composables.js",
+    "composables.d.ts",
+    "composables.cjs",
+    "sortable.js",
+    "sortable.d.ts",
+    "sortable.cjs",
+    "utilities.js",
+    "utilities.d.ts",
+    "utilities.cjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./composables": {
+      "types": "./composables.d.ts",
+      "import": "./composables.js",
+      "require": "./composables.cjs"
+    },
+    "./sortable": {
+      "types": "./sortable.d.ts",
+      "import": "./sortable.js",
+      "require": "./sortable.cjs"
+    },
+    "./utilities": {
+      "types": "./utilities.d.ts",
+      "import": "./utilities.js",
+      "require": "./utilities.cjs"
+    }
+  },
+  "scripts": {
+    "build": "bun build:utilities && bun build:composables && bun build:core && bun build:sortable",
+    "build:core": "tsup src/core/index.ts",
+    "build:composables": "tsup --entry.composables src/composables/index.ts",
+    "build:sortable": "tsup --entry.sortable src/sortable/index.ts",
+    "build:utilities": "tsup --entry.utilities src/utilities/index.ts",
+    "dev": "bun build:utilities --watch & bun build:composables --watch & bun build:core --watch & bun build:sortable --watch",
+    "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",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "tsup": "8.3.0",
+    "typescript": "^5.5.2",
+    "vue": "^3.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/clauderic/dnd-kit"
+  }
+}

package/sortable.cjs

@@ -0,0 +1,112 @@
+"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/sortable/index.ts
+var sortable_exports = {};
+__export(sortable_exports, {
+  isSortable: () => import_sortable2.isSortable,
+  useSortable: () => useSortable
+});
+module.exports = __toCommonJS(sortable_exports);
+
+// 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 sortable = (0, import_vue.useInstance)((manager) => {
+    const _input = (0, import_utilities.toValueDeep)(input);
+    return new import_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)
+      },
+      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);
+    }
+    if ((0, import_utilities.unrefElement)(input.target)) {
+      sortable.value.target = (0, import_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);
+    }
+  });
+  (0, import_vue2.watch)(
+    [() => (0, import_vue2.toValue)(input.group), () => (0, import_vue2.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);
+      });
+    },
+    { flush: "sync" }
+  );
+  (0, import_vue2.watch)(
+    () => (0, import_vue2.toValue)(input.index),
+    () => {
+      if (sortable.value.manager?.dragOperation.status.idle && sortable.value.transition?.idle) {
+        sortable.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)
+  };
+}
+
+// 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
+});
+//# sourceMappingURL=sortable.cjs.map

package/sortable.d.ts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+import { MaybeRefOrGetter, ComponentPublicInstance } from 'vue';
+import { Data } from '@dnd-kit/abstract';
+import { SortableInput } from '@dnd-kit/dom/sortable';
+export { isSortable } from '@dnd-kit/dom/sortable';
+
+type MaybeRefsOrGetters<T> = {
+    [K in keyof T]: MaybeRefOrGetter<T[K]>;
+};
+type MaybeElement = HTMLElement | ComponentPublicInstance | undefined | null;
+
+interface UseSortableInput<T extends Data = Data> extends MaybeRefsOrGetters<Omit<SortableInput<T>, 'handle' | 'element' | 'source' | 'target'>> {
+    handle?: MaybeRefOrGetter<MaybeElement>;
+    element?: MaybeRefOrGetter<MaybeElement>;
+    source?: MaybeRefOrGetter<MaybeElement>;
+    target?: MaybeRefOrGetter<MaybeElement>;
+}
+declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
+    sortable: Readonly<vue.ComputedRef<any>>;
+    isDragging: vue.ComputedRef<any>;
+    isDropping: vue.ComputedRef<any>;
+    isDragSource: vue.ComputedRef<any>;
+    isDropTarget: vue.ComputedRef<any>;
+};
+
+export { type UseSortableInput, useSortable };

package/sortable.js

@@ -0,0 +1,90 @@
+// 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,
+    ...toValue(input.transition)
+  }));
+  const sortable = useInstance((manager) => {
+    const _input = toValueDeep(input);
+    return new Sortable(
+      {
+        ..._input,
+        register: false,
+        transition: transition.value,
+        element: unrefElement(input.element),
+        handle: unrefElement(input.handle),
+        target: unrefElement(input.target)
+      },
+      manager
+    );
+  });
+  const trackedSortable = useDeepSignal(sortable);
+  watchEffect(() => {
+    sortable.value.element = unrefElement(input.element);
+    sortable.value.handle = unrefElement(input.handle);
+    if (unrefElement(input.source)) {
+      sortable.value.source = unrefElement(input.source);
+    }
+    if (unrefElement(input.target)) {
+      sortable.value.target = unrefElement(input.target);
+    }
+    sortable.value.id = toValue(input.id);
+    sortable.value.disabled = toValue(input.disabled) ?? false;
+    sortable.value.feedback = toValue(input.feedback) ?? "default";
+    sortable.value.alignment = toValue(input.alignment);
+    sortable.value.modifiers = toValue(input.modifiers);
+    sortable.value.sensors = toValue(input.sensors);
+    sortable.value.accept = toValue(input.accept);
+    sortable.value.type = toValue(input.type);
+    sortable.value.collisionPriority = toValue(input.collisionPriority);
+    sortable.value.transition = transition.value;
+    if (toValue(input.data)) {
+      sortable.value.data = toValue(input.data);
+    }
+  });
+  watch(
+    [() => toValue(input.group), () => toValue(input.index)],
+    () => {
+      batch(() => {
+        sortable.value.group = toValue(input.group);
+        sortable.value.index = toValue(input.index);
+      });
+    },
+    { flush: "sync" }
+  );
+  watch(
+    () => toValue(input.index),
+    () => {
+      if (sortable.value.manager?.dragOperation.status.idle && sortable.value.transition?.idle) {
+        sortable.value.refreshShape();
+      }
+    }
+  );
+  return {
+    sortable: shallowReadonly(sortable),
+    isDragging: computed(() => trackedSortable.value.isDragging),
+    isDropping: computed(() => trackedSortable.value.isDropping),
+    isDragSource: computed(() => trackedSortable.value.isDragSource),
+    isDropTarget: computed(() => trackedSortable.value.isDropTarget)
+  };
+}
+
+// src/sortable/index.ts
+import { isSortable } from "@dnd-kit/dom/sortable";
+export {
+  isSortable,
+  useSortable
+};
+//# sourceMappingURL=sortable.js.map