vue-dnd-sortable 0.1.6 → 0.1.7

package/README.md

@@ -48,7 +48,8 @@ npm install vue-dnd-sortable
 <script setup lang="ts">
 import { ref } from 'vue'
 import {
-  arrayMove,
+  arrayMove, 
+  horizontalListSortingStrategy,
   SortableContext,
   SortableItem,
   SortableHandle
@@ -58,17 +59,18 @@ const items = ref([1, 2, 3, 4, 5, 6])
 </script>
 
 <template>
-  <SortableContext axis="y" :items @end="items = arrayMove(items, $event)">
+  <SortableContext 
+        axis="x"
+        :items
+        :strategy="horizontalListSortingStrategy"
+        @end="items = arrayMove(items, $event)">
     <div
-      style="display: flex; flex-direction: column; gap: 16px; width: 400px; margin: 0 auto;"
+      style="display: flex; gap: 16px; width: 400px; margin: 0 auto;"
     >
       <SortableItem
         v-for="(item, index) in items"
         :id="item"
         :key="item"
-        :style="{
-          marginBottom: index % 2 === 0 ? '20px' : '50px',
-        }"
       >
         <SortableHandle>
           handle

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

@@ -1,10 +1,12 @@
 import type { CollisionDetector } from '../collision';
 import type { DndEndEvent } from '../context';
+import type { AxisSortingStrategy } from '../sortable';
 import type { UniqueIdentifier } from '../types';
 interface Props {
     items: UniqueIdentifier[];
+    strategy?: AxisSortingStrategy;
     collision?: CollisionDetector;
-    axis?: 'x' | 'y';
+    lockAxis?: 'x' | 'y';
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -15,6 +17,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onEnd?: ((event: DndEndEvent) => any) | undefined;
 }>, {
+    strategy: AxisSortingStrategy;
     collision: CollisionDetector;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export * from './collision';
 export * from './components';
 export * from './composables';
 export * from './helpers';
+export { type AxisSortingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy } from './sortable';
 export type { MaybeElement } from './utilities';

package/dist/sortable.d.ts

@@ -1,7 +1,9 @@
 import type { Coords } from './types';
-export declare function verticalListSortingStrategy(args: {
+export type AxisSortingStrategy = (args: {
     rects: DOMRect[];
     activeIndex: number;
     overIndex: number;
     index: number;
-}): Coords | null;
+}) => Coords | null;
+export declare const verticalListSortingStrategy: AxisSortingStrategy;
+export declare const horizontalListSortingStrategy: AxisSortingStrategy;

package/dist/vue-dnd.es.js

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

package/dist/vue-dnd.umd.js

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

package/package.json

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