vue-dnd-sortable 0.1.3 → 0.1.5

package/README.md

@@ -1,15 +1,81 @@
-# core
+# vue-dnd-sortable
 
-To install dependencies:
+A minimal drag-and-drop sortable list component library for Vue 3.  
+**⚠️ Warning: This package is experimental and poorly tested. Use at your own risk.**
+
+## Features
+
+- Lightweight and flexible
+- Built with Vue 3 Composition API
+- Supports drag handles and custom spacing
+- Simple API using `<SortableContext>`, `<SortableItem>`, and `<SortableHandle>`
+
+---
+
+## Installation
 
 ```bash
-bun install
-```
+bun add vue-dnd-sortable
+````
 
-To run:
+or
 
 ```bash
-bun run index.ts
+npm install vue-dnd-sortable
 ```
 
-This project was created using `bun init` in bun v1.2.5. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+---
+
+## Usage Example
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  arrayMove,
+  SortableContext,
+  SortableItem,
+  SortableHandle
+} from 'vue-dnd-sortable'
+
+const items = ref([1, 2, 3, 4, 5, 6])
+</script>
+
+<template>
+  <SortableContext axis="y" :items @end="items = arrayMove(items, $event)">
+    <div
+      style="display: flex; flex-direction: column; gap: 16px; width: 400px; margin: 0 auto;"
+    >
+      <SortableItem
+        v-for="(item, index) in items"
+        :id="item"
+        :key="item"
+      >
+        <SortableHandle>
+          handle
+        </SortableHandle>
+
+        {{ item }}
+      </SortableItem>
+    </div>
+  </SortableContext>
+</template>
+```
+
+---
+
+## Disclaimer
+
+This library is still in an **experimental** state.
+
+* ❌ No comprehensive test coverage
+* ❌ May contain unexpected bugs or breaking changes
+* ❌ API is unstable and subject to change
+
+Please test thoroughly before using in production.
+
+---
+
+## License
+
+MIT

package/dist/activator.d.ts

@@ -1,6 +1,6 @@
 import type { Coords } from './types';
 interface ActivatorOptions {
-    element: HTMLElement;
+    element: Element;
     onStart?: (coords: Coords) => void;
     onMove?: (coords: Coords) => void;
     onEnd?: (e: PointerEvent) => void;

package/dist/components/handle.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    as?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+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, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/index.d.ts

@@ -1 +1,3 @@
-export { default as DndProvider } from './provider.vue';
+export { default as SortableContext } from './context.vue';
+export { default as SortableHandle } from './handle.vue';
+export { default as SortableItem } from './sortable.vue';

package/dist/components/sortable.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    as?: string;
+    id: number;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+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, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables.d.ts

@@ -1,10 +1,18 @@
-import type { MaybeRefOrGetter } from 'vue';
 import type { UniqueIdentifier } from './types';
+import type { MaybeComputedElementRef } from './utilities';
 export interface SortableOptions {
     id: UniqueIdentifier;
-    element: MaybeRefOrGetter<HTMLElement | null>;
-    handleElement?: MaybeRefOrGetter<HTMLElement | null>;
+    element: MaybeComputedElementRef;
+    handle?: MaybeComputedElementRef;
 }
+interface SortableContext {
+    setHandleRef: (el: MaybeComputedElementRef) => void;
+}
+declare const injectSortableContext: <T extends SortableContext | null | undefined = SortableContext>(fallback?: T | undefined) => T extends null ? SortableContext | null : SortableContext;
+export { injectSortableContext };
 export declare function useSortable(options: SortableOptions): {
     isDragging: import("vue").ComputedRef<boolean>;
+    elementRef: import("vue").Ref<Element | HTMLElement | SVGElement | null | undefined, Element | HTMLElement | SVGElement | null | undefined>;
+    setHandleRef: (el: MaybeComputedElementRef) => void;
 };
+export declare function useSetHandleRef(): (el: MaybeComputedElementRef) => void;

package/dist/context.d.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, Ref } from 'vue';
 import type { Coords, Nullable, UniqueIdentifier } from './types';
 import type { DomRectMap } from './utilities/rects';
 interface DndContext {
-    elements: Ref<Map<UniqueIdentifier, HTMLElement>>;
+    elements: Ref<Map<UniqueIdentifier, Element>>;
     rects: Ref<DomRectMap>;
     items: ComputedRef<UniqueIdentifier[]>;
     translate: Ref<Coords | null>;
@@ -11,7 +11,7 @@ interface DndContext {
     sortedRects: Ref<DOMRect[]>;
     activeIndex: ComputedRef<number | null>;
     overIndex: ComputedRef<number | null>;
-    activate: (id: UniqueIdentifier, handle: Nullable<HTMLElement>) => void;
+    activate: (id: UniqueIdentifier, handle: Nullable<Element>) => void;
 }
 export interface DndEndEvent {
     active: UniqueIdentifier;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './collision';
 export * from './components';
 export * from './composables';
 export * from './helpers';
+export type { MaybeElement } from './utilities';

package/dist/utilities/index.d.ts

@@ -1,3 +1,4 @@
 export * from './context';
 export * from './rects';
+export * from './vue';
 export declare function isValidIndex(index: number | null): index is number;

package/dist/utilities/vue.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter } from 'vue';
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
+export type MaybeElement = Element | HTMLElement | SVGElement | VueInstance | undefined | null;
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
+export declare function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T>;

package/dist/vue-dnd.es.js

@@ -1,52 +1,52 @@
-import { inject as R, provide as A, defineComponent as C, ref as w, computed as f, watch as S, renderSlot as b, onMounted as D, toValue as E, onUnmounted as O } from "vue";
-function _(s, e) {
-  return e.value - s.value;
+import { inject as H, provide as B, toValue as z, defineComponent as L, ref as p, computed as y, watch as C, renderSlot as M, onMounted as T, onUnmounted as k, watchEffect as F, createBlock as I, openBlock as A, resolveDynamicComponent as $, unref as V, withCtx as D, useTemplateRef as X } from "vue";
+function Y(o, e) {
+  return e.value - o.value;
 }
-function $(s, e) {
-  return s.value - e.value;
+function q(o, e) {
+  return o.value - e.value;
 }
-const G = ({ rect: s, rects: e }) => {
-  function i(t, n) {
-    const o = Math.max(t.x, n.x), u = Math.min(t.x + t.width, n.x + n.width), c = Math.max(t.y, n.y), v = Math.min(t.y + t.height, n.y + n.height), m = u - o, x = v - c;
-    if (o < u && c < v) {
-      const p = m * x, g = t.width * t.height, y = n.width * n.height, L = p / (g + y - p);
-      return Number(L.toFixed(4));
+const se = ({ rect: o, rects: e }) => {
+  function s(t, n) {
+    const l = Math.max(t.x, n.x), r = Math.min(t.x + t.width, n.x + n.width), c = Math.max(t.y, n.y), u = Math.min(t.y + t.height, n.y + n.height), h = r - l, f = u - c;
+    if (l < r && c < u) {
+      const x = h * f, g = t.width * t.height, S = n.width * n.height, b = x / (g + S - x);
+      return Number(b.toFixed(4));
     }
     return 0;
   }
-  const r = [];
+  const i = [];
   for (const [t, n] of e)
-    r.push({
+    i.push({
       id: t,
-      value: i(s, n)
+      value: s(o, n)
     });
-  return r.sort(_);
-}, j = ({ rect: s, rects: e }) => {
-  function i(n, o) {
-    return Math.sqrt((n.x - o.x) ** 2 + (n.y - o.y) ** 2);
+  return i.sort(Y);
+}, G = ({ rect: o, rects: e }) => {
+  function s(n, l) {
+    return Math.sqrt((n.x - l.x) ** 2 + (n.y - l.y) ** 2);
   }
-  function r(n) {
+  function i(n) {
     return {
       x: n.x + n.width / 2,
       y: n.y + n.height / 2
     };
   }
   const t = [];
-  for (const [n, o] of e)
+  for (const [n, l] of e)
     t.push({
       id: n,
-      value: i(r(o), r(s))
+      value: s(i(l), i(o))
     });
-  return t.sort($);
+  return t.sort(q);
 };
-class M {
+class _ {
   listeners = [];
   element;
   constructor(e) {
     this.element = e;
   }
-  add(e, i) {
-    this.element.addEventListener(e, i), this.listeners.push([e, i]);
+  add(e, s) {
+    this.element.addEventListener(e, s), this.listeners.push([e, s]);
   }
   removeAll() {
     this.listeners.forEach((e) => {
@@ -54,15 +54,15 @@ class M {
     });
   }
 }
-class z {
+class K {
   document;
   listeners;
   documentListeners;
   options;
   windowListeners;
   constructor(e) {
-    const { element: i } = e;
-    this.options = e, this.document = i.ownerDocument, this.listeners = new M(i), this.documentListeners = new M(this.document), this.windowListeners = new M(this.document?.defaultView ?? window), this.handleStart = this.handleStart.bind(this), this.handleMove = this.handleMove.bind(this), this.handleEnd = this.handleEnd.bind(this), this.deactivate();
+    const { element: s } = e;
+    this.options = e, this.document = s.ownerDocument, this.listeners = new _(s), this.documentListeners = new _(this.document), this.windowListeners = new _(this.document?.defaultView ?? window), this.handleStart = this.handleStart.bind(this), this.handleMove = this.handleMove.bind(this), this.handleEnd = this.handleEnd.bind(this), this.deactivate();
   }
   deactivate() {
     this.listeners.removeAll(), this.documentListeners.removeAll(), this.windowListeners.removeAll(), this.listeners.add("pointerdown", this.handleStart);
@@ -89,180 +89,237 @@ class z {
     this.document?.getSelection()?.removeAllRanges();
   }
 }
-function B(s) {
+function j(o) {
   const e = Symbol(
-    `${s}Context`
+    `${o}Context`
   );
-  return [i, r];
-  function i(t) {
-    const n = R(e, t);
-    if (n || n === null) return n;
+  function s(t) {
+    const n = H(e, t);
+    if (n || n === null)
+      return n;
     throw new Error(
-      `Injection \`${e.toString()}\` not found. Component must be used within \`${s}\``
+      `Injection \`${e.toString()}\` not found. Component must be used within \`${o}\``
     );
   }
-  function r(t) {
-    return A(e, t), t;
+  function i(t) {
+    return B(e, t), t;
   }
+  return [s, i];
 }
-function F(s, e) {
-  return s.reduce((i, r) => {
-    const t = e.get(r);
-    return t && i.push(t), i;
+function N(o, e) {
+  return o.reduce((s, i) => {
+    const t = e.get(i);
+    return t && s.push(t), s;
   }, []);
 }
-function I(s) {
-  return s !== null && s >= 0;
+function w(o) {
+  const e = z(o);
+  return e?.$el ?? e;
 }
-const [T, V] = B("DndContext");
-function X(s) {
+function E(o) {
+  return o !== null && o >= 0;
+}
+const [U, J] = j("DndContext");
+function P(o) {
   const {
     rects: e,
-    activeIndex: i,
-    overIndex: r,
+    activeIndex: s,
+    overIndex: i,
     index: t
-  } = s, n = e[i];
+  } = o, n = e[s];
   if (!n)
     return null;
-  if (t === i) {
-    const u = e[r];
-    return u ? {
+  if (t === s) {
+    const r = e[i];
+    return r ? {
       x: 0,
-      y: i > r ? n.top - u.top : u.top - n.top
+      y: s > i ? n.top - r.top : r.top - n.top
     } : null;
   }
-  const o = Y(e, t, i);
-  return t > i && t <= r ? {
+  const l = Q(e, t, s);
+  return t > s && t <= i ? {
     x: 0,
-    y: -n.height - o
-  } : t < i && t >= r ? {
+    y: -n.height - l
+  } : t < s && t >= i ? {
     x: 0,
-    y: n.height - o
+    y: n.height - l
   } : {
     x: 0,
     y: 0
   };
 }
-function Y(s, e, i) {
-  const r = s[e], t = s[e - 1], n = s[e + 1];
-  return !r || !t && !n ? 0 : i < e ? t ? r.top - (t.top + t.height) : n ? n.top - (r.top + r.height) : 0 : n ? r.top - (n.top - n.height) : t ? t.top - (r.top + r.height) : 0;
+function Q(o, e, s) {
+  const i = o[e], t = o[e - 1], n = o[e + 1];
+  return !i || !t && !n ? 0 : s < e ? t ? i.top - (t.top + t.height) : n ? n.top - (i.top + i.height) : 0 : n ? i.top - (n.top - n.height) : t ? t.top - (i.top + i.height) : 0;
 }
-const K = /* @__PURE__ */ C({
-  __name: "provider",
+const oe = /* @__PURE__ */ L({
+  __name: "context",
   props: {
     items: {},
-    collision: { type: Function, default: j },
+    collision: { type: Function, default: G },
     axis: {}
   },
   emits: ["end"],
-  setup(s, { emit: e }) {
-    const i = s, r = e, t = w(/* @__PURE__ */ new Map()), n = w(/* @__PURE__ */ new Map()), o = w(null), u = w(null), c = w({
+  setup(o, { emit: e }) {
+    const s = o, i = e, t = p(/* @__PURE__ */ new Map()), n = p(/* @__PURE__ */ new Map()), l = p(/* @__PURE__ */ new Map()), r = p(null), c = p(null), u = p({
       start: null,
       current: { x: 0, y: 0 }
-    }), v = f(() => c.value.start ? {
-      x: i.axis === "y" ? 0 : c.value.current.x - c.value.start.x,
-      y: i.axis === "x" ? 0 : c.value.current.y - c.value.start.y
-    } : null), m = f(() => o.value ? i.items.indexOf(o.value) : null), x = f(() => u.value ? i.items.indexOf(u.value) : null), p = f(() => F(i.items, n.value));
-    function g() {
-      for (const [l, a] of t.value)
-        n.value.set(l, a.getBoundingClientRect());
+    }), h = y(() => u.value.start ? {
+      x: s.axis === "y" ? 0 : u.value.current.x - u.value.start.x,
+      y: s.axis === "x" ? 0 : u.value.current.y - u.value.start.y
+    } : null), f = y(() => r.value ? s.items.indexOf(r.value) : null), x = y(() => c.value ? s.items.indexOf(c.value) : null), g = y(() => N(s.items, n.value));
+    function S() {
+      for (const [a, d] of t.value)
+        n.value.set(a, d.getBoundingClientRect());
     }
-    function y() {
-      if (!o.value)
+    function b() {
+      if (!r.value)
         return null;
-      const l = n.value.get(o.value), a = l && v.value ? {
-        ...l,
-        width: l.width,
-        height: l.height,
-        x: l.x + v.value?.x,
-        y: l.y + v.value?.y
+      const a = n.value.get(r.value), d = a && h.value ? {
+        ...a,
+        width: a.width,
+        height: a.height,
+        x: a.x + h.value?.x,
+        y: a.y + h.value?.y
       } : null;
-      return a ? i.collision({
-        rect: a,
+      return d ? s.collision({
+        rect: d,
         rects: n.value
       })[0]?.id ?? null : null;
     }
-    function L(l, a) {
-      const d = t.value.get(l);
-      if (d)
-        return new z({
-          element: a ?? d,
-          onStart(h) {
-            g(), c.value.start = h;
-          },
-          onMove(h) {
-            c.value.start && (o.value || (o.value = l), c.value.current.x = h.x, c.value.current.y = h.y, u.value = y());
-          },
-          onEnd() {
-            o.value && r("end", {
-              active: o.value,
-              over: u.value
-            }), o.value = null, u.value = null, c.value.start = null;
-          }
-        });
+    function O(a, d) {
+      const v = t.value.get(a);
+      if (!v)
+        return;
+      const m = new K({
+        element: d ?? v,
+        onStart(R) {
+          S(), u.value.start = R;
+        },
+        onMove(R) {
+          u.value.start && (r.value || (r.value = a), u.value.current.x = R.x, u.value.current.y = R.y, c.value = b());
+        },
+        onEnd() {
+          r.value && i("end", {
+            active: r.value,
+            over: c.value
+          }), r.value = null, c.value = null, u.value.start = null;
+        }
+      });
+      l.value.set(a, m);
     }
-    return S(t, g, { deep: !0 }), S([o, u], ([l]) => {
-      if (!l) {
-        for (const [d, h] of t.value)
-          h.style.transition = "", h.style.position = "", h.style.zIndex = "", h.style.transform = "";
+    return C(t, S, { deep: !0 }), C([r, c], ([a]) => {
+      if (!a) {
+        for (const [v, m] of t.value)
+          m.style.transition = "", m.style.position = "", m.style.zIndex = "", m.style.transform = "";
         return;
       }
-      const a = t.value.get(l);
-      if (a) {
-        a.style.position = "relative", a.style.zIndex = "1";
-        for (const [d, h] of t.value)
-          d !== l && (h.style.transition = "0.2s transform");
+      const d = t.value.get(a);
+      if (d) {
+        d.style.position = "relative", d.style.zIndex = "1";
+        for (const [v, m] of t.value)
+          v !== a && (m.style.transition = "0.2s transform");
       }
-    }), S(v, () => {
-      if (!(!I(m.value) || !I(x.value)) && !(!o.value || !v.value))
-        for (const [l, a] of t.value) {
-          let d = null;
-          l === o.value ? d = v.value : d = X({
-            activeIndex: m.value,
+    }), C(h, () => {
+      if (!(!E(f.value) || !E(x.value)) && !(!r.value || !h.value))
+        for (const [a, d] of t.value) {
+          let v = null;
+          a === r.value ? v = h.value : v = P({
+            activeIndex: f.value,
             overIndex: x.value,
-            rects: p.value,
-            index: i.items.indexOf(l)
-          }), d && (a.style.transform = `translate(${d.x}px, ${d.y}px)`);
+            rects: g.value,
+            index: s.items.indexOf(a)
+          }), v && (d.style.transform = `translate(${v.x}px, ${v.y}px)`);
         }
-    }), V({
+    }), J({
       rects: n,
-      activate: L,
+      activate: O,
       elements: t,
-      translate: v,
-      active: o,
-      over: u,
-      activeIndex: m,
+      translate: h,
+      active: r,
+      over: c,
+      activeIndex: f,
       overIndex: x,
-      items: f(() => i.items),
-      sortedRects: p
-    }), (l, a) => b(l.$slots, "default");
+      items: y(() => s.items),
+      sortedRects: g
+    }), (a, d) => M(a.$slots, "default");
   }
-});
-function N(s) {
-  const { active: e, elements: i, activate: r } = T(), { id: t, element: n, handleElement: o } = s;
-  return D(() => {
-    const c = E(n);
-    c && (i.value.set(t, c), r(t, E(o)));
-  }), O(() => {
-    i.value.delete(t);
+}), [
+  W,
+  Z
+] = j("SortableContext");
+function ee(o) {
+  const { active: e, elements: s, activate: i } = U(), { id: t, element: n, handle: l } = o, r = p(w(l)), c = p(w(n));
+  T(() => {
+    const f = w(n);
+    f && s.value.set(t, f);
+  }), k(() => {
+    s.value.delete(t);
+  }), F(() => {
+    n && (c.value = w(n)), l && (r.value = w(l)), i(t, r.value);
+  });
+  const u = y(() => e.value === t), h = (f) => {
+    r.value = w(f);
+  };
+  return Z({
+    setHandleRef: h
   }), {
-    isDragging: f(() => e.value === t)
+    isDragging: u,
+    elementRef: c,
+    setHandleRef: h
   };
 }
-function P(s, e) {
-  const { active: i, over: r } = e;
-  if (!r)
-    return s;
-  const t = s.indexOf(i), n = s.indexOf(r);
+function te() {
+  return W().setHandleRef;
+}
+const ie = /* @__PURE__ */ L({
+  __name: "handle",
+  props: {
+    as: { default: "button" }
+  },
+  setup(o) {
+    const e = te();
+    return (s, i) => (A(), I($(s.as), { ref: V(e) }, {
+      default: D(() => [
+        M(s.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+}), re = /* @__PURE__ */ L({
+  __name: "sortable",
+  props: {
+    as: { default: "div" },
+    id: {}
+  },
+  setup(o) {
+    const e = X("el");
+    return ee({ id: o.id, element: e }), (s, i) => (A(), I($(s.as), { ref: "el" }, {
+      default: D(() => [
+        M(s.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+function le(o, e) {
+  const { active: s, over: i } = e;
+  if (!i)
+    return o;
+  const t = o.indexOf(s), n = o.indexOf(i);
   if (t === n)
-    return s;
-  const o = s.slice(), u = o.splice(t, 1)[0];
-  return u && o.splice(n, 0, u), o;
+    return o;
+  const l = o.slice(), r = l.splice(t, 1)[0];
+  return r && l.splice(n, 0, r), l;
 }
 export {
-  K as DndProvider,
-  P as arrayMove,
-  j as closestToCenter,
-  G as rectangleIntersection,
-  N as useSortable
+  oe as SortableContext,
+  ie as SortableHandle,
+  re as SortableItem,
+  le as arrayMove,
+  G as closestToCenter,
+  W as injectSortableContext,
+  se as rectangleIntersection,
+  te as useSetHandleRef,
+  ee as useSortable
 };

package/dist/vue-dnd.umd.js

@@ -1 +1 @@
-(function(h,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(h=typeof globalThis<"u"?globalThis:h||self,l(h.VueDnD={},h.Vue))})(this,function(h,l){"use strict";function I(o,e){return e.value-o.value}function b(o,e){return o.value-e.value}const C=({rect:o,rects:e})=>{function i(t,n){const s=Math.max(t.x,n.x),u=Math.min(t.x+t.width,n.x+n.width),a=Math.max(t.y,n.y),m=Math.min(t.y+t.height,n.y+n.height),p=u-s,x=m-a;if(s<u&&a<m){const w=p*x,y=t.width*t.height,S=n.width*n.height,L=w/(y+S-w);return Number(L.toFixed(4))}return 0}const r=[];for(const[t,n]of e)r.push({id:t,value:i(o,n)});return r.sort(I)},M=({rect:o,rects:e})=>{function i(n,s){return Math.sqrt((n.x-s.x)**2+(n.y-s.y)**2)}function r(n){return{x:n.x+n.width/2,y:n.y+n.height/2}}const t=[];for(const[n,s]of e)t.push({id:n,value:i(r(s),r(o))});return t.sort(b)};class g{listeners=[];element;constructor(e){this.element=e}add(e,i){this.element.addEventListener(e,i),this.listeners.push([e,i])}removeAll(){this.listeners.forEach(e=>{this.element.removeEventListener(...e)})}}class R{document;listeners;documentListeners;options;windowListeners;constructor(e){const{element:i}=e;this.options=e,this.document=i.ownerDocument,this.listeners=new g(i),this.documentListeners=new g(this.document),this.windowListeners=new g(this.document?.defaultView??window),this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.deactivate()}deactivate(){this.listeners.removeAll(),this.documentListeners.removeAll(),this.windowListeners.removeAll(),this.listeners.add("pointerdown",this.handleStart)}activate(){this.windowListeners.add("selectionchange",this.clearSelection),this.windowListeners.add("resize",this.handleEnd),this.windowListeners.add("visibilitychange",this.handleEnd),this.windowListeners.add("dragstart",e=>e.preventDefault()),this.windowListeners.add("contextmenu",e=>e.preventDefault()),this.documentListeners.add("pointermove",this.handleMove),this.documentListeners.add("pointerup",this.handleEnd)}handleStart(e){e.button===0&&(this.options.onStart?.({x:e.clientX,y:e.clientY}),this.activate())}handleMove(e){this.options.onMove?.({x:e.clientX,y:e.clientY}),this.clearSelection()}handleEnd(e){this.options.onEnd?.(e),this.deactivate()}clearSelection(){this.document?.getSelection()?.removeAllRanges()}}function A(o){const e=Symbol(`${o}Context`);return[i,r];function i(t){const n=l.inject(e,t);if(n||n===null)return n;throw new Error(`Injection \`${e.toString()}\` not found. Component must be used within \`${o}\``)}function r(t){return l.provide(e,t),t}}function D(o,e){return o.reduce((i,r)=>{const t=e.get(r);return t&&i.push(t),i},[])}function E(o){return o!==null&&o>=0}const[j,O]=A("DndContext");function T(o){const{rects:e,activeIndex:i,overIndex:r,index:t}=o,n=e[i];if(!n)return null;if(t===i){const u=e[r];return u?{x:0,y:i>r?n.top-u.top:u.top-n.top}:null}const s=_(e,t,i);return t>i&&t<=r?{x:0,y:-n.height-s}:t<i&&t>=r?{x:0,y:n.height-s}:{x:0,y:0}}function _(o,e,i){const r=o[e],t=o[e-1],n=o[e+1];return!r||!t&&!n?0:i<e?t?r.top-(t.top+t.height):n?n.top-(r.top+r.height):0:n?r.top-(n.top-n.height):t?t.top-(r.top+r.height):0}const $=l.defineComponent({__name:"provider",props:{items:{},collision:{type:Function,default:M},axis:{}},emits:["end"],setup(o,{emit:e}){const i=o,r=e,t=l.ref(new Map),n=l.ref(new Map),s=l.ref(null),u=l.ref(null),a=l.ref({start:null,current:{x:0,y:0}}),m=l.computed(()=>a.value.start?{x:i.axis==="y"?0:a.value.current.x-a.value.start.x,y:i.axis==="x"?0:a.value.current.y-a.value.start.y}:null),p=l.computed(()=>s.value?i.items.indexOf(s.value):null),x=l.computed(()=>u.value?i.items.indexOf(u.value):null),w=l.computed(()=>D(i.items,n.value));function y(){for(const[c,d]of t.value)n.value.set(c,d.getBoundingClientRect())}function S(){if(!s.value)return null;const c=n.value.get(s.value),d=c&&m.value?{...c,width:c.width,height:c.height,x:c.x+m.value?.x,y:c.y+m.value?.y}:null;return d?i.collision({rect:d,rects:n.value})[0]?.id??null:null}function L(c,d){const f=t.value.get(c);if(f)return new R({element:d??f,onStart(v){y(),a.value.start=v},onMove(v){a.value.start&&(s.value||(s.value=c),a.value.current.x=v.x,a.value.current.y=v.y,u.value=S())},onEnd(){s.value&&r("end",{active:s.value,over:u.value}),s.value=null,u.value=null,a.value.start=null}})}return l.watch(t,y,{deep:!0}),l.watch([s,u],([c])=>{if(!c){for(const[f,v]of t.value)v.style.transition="",v.style.position="",v.style.zIndex="",v.style.transform="";return}const d=t.value.get(c);if(d){d.style.position="relative",d.style.zIndex="1";for(const[f,v]of t.value)f!==c&&(v.style.transition="0.2s transform")}}),l.watch(m,()=>{if(!(!E(p.value)||!E(x.value))&&!(!s.value||!m.value))for(const[c,d]of t.value){let f=null;c===s.value?f=m.value:f=T({activeIndex:p.value,overIndex:x.value,rects:w.value,index:i.items.indexOf(c)}),f&&(d.style.transform=`translate(${f.x}px, ${f.y}px)`)}}),O({rects:n,activate:L,elements:t,translate:m,active:s,over:u,activeIndex:p,overIndex:x,items:l.computed(()=>i.items),sortedRects:w}),(c,d)=>l.renderSlot(c.$slots,"default")}});function V(o){const{active:e,elements:i,activate:r}=j(),{id:t,element:n,handleElement:s}=o;return l.onMounted(()=>{const a=l.toValue(n);a&&(i.value.set(t,a),r(t,l.toValue(s)))}),l.onUnmounted(()=>{i.value.delete(t)}),{isDragging:l.computed(()=>e.value===t)}}function z(o,e){const{active:i,over:r}=e;if(!r)return o;const t=o.indexOf(i),n=o.indexOf(r);if(t===n)return o;const s=o.slice(),u=s.splice(t,1)[0];return u&&s.splice(n,0,u),s}h.DndProvider=$,h.arrayMove=z,h.closestToCenter=M,h.rectangleIntersection=C,h.useSortable=V,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(u,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(u=typeof globalThis<"u"?globalThis:u||self,i(u.VueDnD={},u.Vue))})(this,function(u,i){"use strict";function D(s,e){return e.value-s.value}function $(s,e){return s.value-e.value}const j=({rect:s,rects:e})=>{function o(t,n){const a=Math.max(t.x,n.x),l=Math.min(t.x+t.width,n.x+n.width),f=Math.max(t.y,n.y),d=Math.min(t.y+t.height,n.y+n.height),v=l-a,p=d-f;if(a<l&&f<d){const y=v*p,g=t.width*t.height,S=n.width*n.height,R=y/(g+S-y);return Number(R.toFixed(4))}return 0}const r=[];for(const[t,n]of e)r.push({id:t,value:o(s,n)});return r.sort(D)},M=({rect:s,rects:e})=>{function o(n,a){return Math.sqrt((n.x-a.x)**2+(n.y-a.y)**2)}function r(n){return{x:n.x+n.width/2,y:n.y+n.height/2}}const t=[];for(const[n,a]of e)t.push({id:n,value:o(r(a),r(s))});return t.sort($)};class b{listeners=[];element;constructor(e){this.element=e}add(e,o){this.element.addEventListener(e,o),this.listeners.push([e,o])}removeAll(){this.listeners.forEach(e=>{this.element.removeEventListener(...e)})}}class O{document;listeners;documentListeners;options;windowListeners;constructor(e){const{element:o}=e;this.options=e,this.document=o.ownerDocument,this.listeners=new b(o),this.documentListeners=new b(this.document),this.windowListeners=new b(this.document?.defaultView??window),this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.deactivate()}deactivate(){this.listeners.removeAll(),this.documentListeners.removeAll(),this.windowListeners.removeAll(),this.listeners.add("pointerdown",this.handleStart)}activate(){this.windowListeners.add("selectionchange",this.clearSelection),this.windowListeners.add("resize",this.handleEnd),this.windowListeners.add("visibilitychange",this.handleEnd),this.windowListeners.add("dragstart",e=>e.preventDefault()),this.windowListeners.add("contextmenu",e=>e.preventDefault()),this.documentListeners.add("pointermove",this.handleMove),this.documentListeners.add("pointerup",this.handleEnd)}handleStart(e){e.button===0&&(this.options.onStart?.({x:e.clientX,y:e.clientY}),this.activate())}handleMove(e){this.options.onMove?.({x:e.clientX,y:e.clientY}),this.clearSelection()}handleEnd(e){this.options.onEnd?.(e),this.deactivate()}clearSelection(){this.document?.getSelection()?.removeAllRanges()}}function _(s){const e=Symbol(`${s}Context`);function o(t){const n=i.inject(e,t);if(n||n===null)return n;throw new Error(`Injection \`${e.toString()}\` not found. Component must be used within \`${s}\``)}function r(t){return i.provide(e,t),t}return[o,r]}function T(s,e){return s.reduce((o,r)=>{const t=e.get(r);return t&&o.push(t),o},[])}function w(s){const e=i.toValue(s);return e?.$el??e}function L(s){return s!==null&&s>=0}const[B,H]=_("DndContext");function k(s){const{rects:e,activeIndex:o,overIndex:r,index:t}=s,n=e[o];if(!n)return null;if(t===o){const l=e[r];return l?{x:0,y:o>r?n.top-l.top:l.top-n.top}:null}const a=V(e,t,o);return t>o&&t<=r?{x:0,y:-n.height-a}:t<o&&t>=r?{x:0,y:n.height-a}:{x:0,y:0}}function V(s,e,o){const r=s[e],t=s[e-1],n=s[e+1];return!r||!t&&!n?0:o<e?t?r.top-(t.top+t.height):n?n.top-(r.top+r.height):0:n?r.top-(n.top-n.height):t?t.top-(r.top+r.height):0}const z=i.defineComponent({__name:"context",props:{items:{},collision:{type:Function,default:M},axis:{}},emits:["end"],setup(s,{emit:e}){const o=s,r=e,t=i.ref(new Map),n=i.ref(new Map),a=i.ref(new Map),l=i.ref(null),f=i.ref(null),d=i.ref({start:null,current:{x:0,y:0}}),v=i.computed(()=>d.value.start?{x:o.axis==="y"?0:d.value.current.x-d.value.start.x,y:o.axis==="x"?0:d.value.current.y-d.value.start.y}:null),p=i.computed(()=>l.value?o.items.indexOf(l.value):null),y=i.computed(()=>f.value?o.items.indexOf(f.value):null),g=i.computed(()=>T(o.items,n.value));function S(){for(const[c,h]of t.value)n.value.set(c,h.getBoundingClientRect())}function R(){if(!l.value)return null;const c=n.value.get(l.value),h=c&&v.value?{...c,width:c.width,height:c.height,x:c.x+v.value?.x,y:c.y+v.value?.y}:null;return h?o.collision({rect:h,rects:n.value})[0]?.id??null:null}function G(c,h){const m=t.value.get(c);if(!m)return;const x=new O({element:h??m,onStart(C){S(),d.value.start=C},onMove(C){d.value.start&&(l.value||(l.value=c),d.value.current.x=C.x,d.value.current.y=C.y,f.value=R())},onEnd(){l.value&&r("end",{active:l.value,over:f.value}),l.value=null,f.value=null,d.value.start=null}});a.value.set(c,x)}return i.watch(t,S,{deep:!0}),i.watch([l,f],([c])=>{if(!c){for(const[m,x]of t.value)x.style.transition="",x.style.position="",x.style.zIndex="",x.style.transform="";return}const h=t.value.get(c);if(h){h.style.position="relative",h.style.zIndex="1";for(const[m,x]of t.value)m!==c&&(x.style.transition="0.2s transform")}}),i.watch(v,()=>{if(!(!L(p.value)||!L(y.value))&&!(!l.value||!v.value))for(const[c,h]of t.value){let m=null;c===l.value?m=v.value:m=k({activeIndex:p.value,overIndex:y.value,rects:g.value,index:o.items.indexOf(c)}),m&&(h.style.transform=`translate(${m.x}px, ${m.y}px)`)}}),H({rects:n,activate:G,elements:t,translate:v,active:l,over:f,activeIndex:p,overIndex:y,items:i.computed(()=>o.items),sortedRects:g}),(c,h)=>i.renderSlot(c.$slots,"default")}}),[E,q]=_("SortableContext");function I(s){const{active:e,elements:o,activate:r}=B(),{id:t,element:n,handle:a}=s,l=i.ref(w(a)),f=i.ref(w(n));i.onMounted(()=>{const p=w(n);p&&o.value.set(t,p)}),i.onUnmounted(()=>{o.value.delete(t)}),i.watchEffect(()=>{n&&(f.value=w(n)),a&&(l.value=w(a)),r(t,l.value)});const d=i.computed(()=>e.value===t),v=p=>{l.value=w(p)};return q({setHandleRef:v}),{isDragging:d,elementRef:f,setHandleRef:v}}function A(){return E().setHandleRef}const F=i.defineComponent({__name:"handle",props:{as:{default:"button"}},setup(s){const e=A();return(o,r)=>(i.openBlock(),i.createBlock(i.resolveDynamicComponent(o.as),{ref:i.unref(e)},{default:i.withCtx(()=>[i.renderSlot(o.$slots,"default")]),_:3},512))}}),X=i.defineComponent({__name:"sortable",props:{as:{default:"div"},id:{}},setup(s){const e=i.useTemplateRef("el");return I({id:s.id,element:e}),(o,r)=>(i.openBlock(),i.createBlock(i.resolveDynamicComponent(o.as),{ref:"el"},{default:i.withCtx(()=>[i.renderSlot(o.$slots,"default")]),_:3},512))}});function Y(s,e){const{active:o,over:r}=e;if(!r)return s;const t=s.indexOf(o),n=s.indexOf(r);if(t===n)return s;const a=s.slice(),l=a.splice(t,1)[0];return l&&a.splice(n,0,l),a}u.SortableContext=z,u.SortableHandle=F,u.SortableItem=X,u.arrayMove=Y,u.closestToCenter=M,u.injectSortableContext=E,u.rectangleIntersection=j,u.useSetHandleRef=A,u.useSortable=I,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-dnd-sortable",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Simple sortable for vue",
   "type": "module",
   "main": "dist/vue-dnd.umd.js",