vue-dnd-sortable 0.1.7 → 0.1.9

package/README.md

@@ -60,7 +60,7 @@ const items = ref([1, 2, 3, 4, 5, 6])
 
 <template>
   <SortableContext 
-        axis="x"
+        lock-axis="x"
         :items
         :strategy="horizontalListSortingStrategy"
         @end="items = arrayMove(items, $event)">
@@ -82,6 +82,41 @@ const items = ref([1, 2, 3, 4, 5, 6])
 </template>
 ```
 
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useSortable } from 'vue-dnd-sortable'
+
+const { id } = defineProps<{
+  id: number
+}>()
+
+const element = useTemplateRef('el')
+
+useSortable({ id, element })
+</script>
+
+<template>
+  <div ref="el">
+    <slot />
+  </div>
+</template>
+```
+
+```vue 
+<script setup lang="ts">
+import { useSetHandleRef } from 'vue-dnd-sortable'
+
+const setHandleRef = useSetHandleRef()
+</script>
+
+<template>
+  <button :ref="setHandleRef">
+    handle
+  </button>
+</template>
+```
+
 ---
 
 ## License

package/dist/composables.d.ts

@@ -12,7 +12,7 @@ declare const injectSortableContext: <T extends SortableContext | null | undefin
 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>;
+    setElementRef: (el: MaybeComputedElementRef) => void;
     setHandleRef: (el: MaybeComputedElementRef) => void;
 };
 export declare function useSetHandleRef(): (el: MaybeComputedElementRef) => void;

package/dist/vue-dnd.es.js

@@ -1,4 +1,4 @@
-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";
+import { inject as z, provide as H, toValue as B, defineComponent as _, ref as x, computed as y, watch as C, renderSlot as E, onMounted as F, onUnmounted as T, watchEffect as N, createBlock as M, 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;
 }
@@ -7,9 +7,9 @@ function q(o, e) {
 }
 const se = ({ rect: o, rects: e }) => {
   function s(t, n) {
-    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;
+    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), h = i - l, p = 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);
+      const d = h * p, g = t.width * t.height, S = n.width * n.height, b = d / (g + S - d);
       return Number(b.toFixed(4));
     }
     return 0;
@@ -116,7 +116,7 @@ function w(o) {
   const e = B(o);
   return e?.$el ?? e;
 }
-function M(o) {
+function I(o) {
   return o !== null && o >= 0;
 }
 const [J, P] = j("DndContext"), Q = (o) => {
@@ -191,35 +191,35 @@ const oe = (o) => {
     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 }
-    }), v = y(() => c.value.start ? {
+    }), h = 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));
+    } : null), p = y(() => i.value ? s.items.indexOf(i.value) : null), d = y(() => a.value ? s.items.indexOf(a.value) : null), g = y(() => U(s.items, n.value));
     function S() {
-      for (const [u, d] of t.value)
-        n.value.set(u, d.getBoundingClientRect());
+      for (const [u, v] of t.value)
+        n.value.set(u, v.getBoundingClientRect());
     }
     function b() {
       if (!i.value)
         return null;
-      const u = n.value.get(i.value), d = u && v.value ? {
+      const u = n.value.get(i.value), v = u && h.value ? {
         ...u,
         width: u.width,
         height: u.height,
-        x: u.x + v.value?.x,
-        y: u.y + v.value?.y
+        x: u.x + h.value?.x,
+        y: u.y + h.value?.y
       } : null;
-      return d ? s.collision({
-        rect: d,
+      return v ? s.collision({
+        rect: v,
         rects: n.value
       })[0]?.id ?? null : null;
     }
-    function k(u, d) {
-      const h = t.value.get(u);
-      if (!h)
+    function k(u, v) {
+      const f = t.value.get(u);
+      if (!f)
         return;
       const m = new K({
-        element: d ?? h,
+        element: v ?? f,
         onStart(R) {
           S(), c.value.start = R;
         },
@@ -237,39 +237,39 @@ const oe = (o) => {
     }
     return C(t, S, { deep: !0 }), C([i, a], ([u]) => {
       if (!u) {
-        for (const [h, m] of t.value)
+        for (const [f, m] of t.value)
           m.style.transition = "", m.style.position = "", m.style.zIndex = "", m.style.transform = "";
         return;
       }
-      const d = t.value.get(u);
-      if (d) {
-        d.style.position = "relative", d.style.zIndex = "1";
-        for (const [h, m] of t.value)
-          h !== u && (m.style.transition = "0.2s transform");
+      const v = t.value.get(u);
+      if (v) {
+        v.style.position = "relative", v.style.zIndex = "1";
+        for (const [f, m] of t.value)
+          f !== u && (m.style.transition = "0.2s transform");
       }
-    }), 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: p.value,
+    }), C(h, () => {
+      if (!(!I(p.value) || !I(d.value)) && !(!i.value || !h.value))
+        for (const [u, v] of t.value) {
+          let f = null;
+          u === i.value ? f = h.value : f = s.strategy({
+            activeIndex: p.value,
+            overIndex: d.value,
             rects: g.value,
             index: s.items.indexOf(u)
-          }), h && (d.style.transform = `translate(${h.x}px, ${h.y}px)`);
+          }), f && (v.style.transform = `translate(${f.x}px, ${f.y}px)`);
         }
     }), P({
       rects: n,
       activate: k,
       elements: t,
-      translate: v,
+      translate: h,
       active: i,
       over: a,
-      activeIndex: f,
-      overIndex: p,
+      activeIndex: p,
+      overIndex: d,
       items: y(() => s.items),
       sortedRects: g
-    }), (u, d) => I(u.$slots, "default");
+    }), (u, v) => E(u.$slots, "default");
   }
 }), [
   W,
@@ -278,22 +278,24 @@ const oe = (o) => {
 function ee(o) {
   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);
+    const d = w(n);
+    d && s.value.set(t, d);
   }), T(() => {
     s.value.delete(t);
   }), N(() => {
     n && (a.value = w(n)), l && (i.value = w(l)), r(t, i.value);
   });
-  const c = y(() => e.value === t), v = (f) => {
-    i.value = w(f);
+  const c = y(() => e.value === t), h = (d) => {
+    i.value = w(d);
+  }, p = (d) => {
+    a.value = w(d);
   };
   return Z({
-    setHandleRef: v
+    setHandleRef: h
   }), {
     isDragging: c,
-    elementRef: a,
-    setHandleRef: v
+    setElementRef: p,
+    setHandleRef: h
   };
 }
 function te() {
@@ -306,9 +308,9 @@ const re = /* @__PURE__ */ _({
   },
   setup(o) {
     const e = te();
-    return (s, r) => (E(), A($(s.as), { ref: V(e) }, {
+    return (s, r) => (A(), M($(s.as), { ref: V(e) }, {
       default: D(() => [
-        I(s.$slots, "default")
+        E(s.$slots, "default")
       ]),
       _: 3
     }, 512));
@@ -321,9 +323,9 @@ const re = /* @__PURE__ */ _({
   },
   setup(o) {
     const e = X("el");
-    return ee({ id: o.id, element: e }), (s, r) => (E(), A($(s.as), { ref: "el" }, {
+    return ee({ id: o.id, element: e }), (s, r) => (A(), M($(s.as), { ref: "el" }, {
       default: D(() => [
-        I(s.$slots, "default")
+        E(s.$slots, "default")
       ]),
       _: 3
     }, 512));

package/dist/vue-dnd.umd.js

@@ -1 +1 @@
-(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"})});
+(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),m=r-c,w=f-a;if(c<r&&a<f){const h=m*w,g=e.width*e.height,S=n.width*n.height,b=h/(g+S-h);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=E(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 E(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=E(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}}),m=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),w=i.computed(()=>r.value?o.items.indexOf(r.value):null),h=i.computed(()=>a.value?o.items.indexOf(a.value):null),g=i.computed(()=>z(o.items,n.value));function S(){for(const[u,v]of e.value)n.value.set(u,v.getBoundingClientRect())}function b(){if(!r.value)return null;const u=n.value.get(r.value),v=u&&m.value?{...u,width:u.width,height:u.height,x:u.x+m.value?.x,y:u.y+m.value?.y}:null;return v?o.collision({rect:v,rects:n.value})[0]?.id??null:null}function G(u,v){const p=e.value.get(u);if(!p)return;const x=new T({element:v??p,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[p,x]of e.value)x.style.transition="",x.style.position="",x.style.zIndex="",x.style.transform="";return}const v=e.value.get(u);if(v){v.style.position="relative",v.style.zIndex="1";for(const[p,x]of e.value)p!==u&&(x.style.transition="0.2s transform")}}),i.watch(m,()=>{if(!(!_(w.value)||!_(h.value))&&!(!r.value||!m.value))for(const[u,v]of e.value){let p=null;u===r.value?p=m.value:p=o.strategy({activeIndex:w.value,overIndex:h.value,rects:g.value,index:o.items.indexOf(u)}),p&&(v.style.transform=`translate(${p.x}px, ${p.y}px)`)}}),H({rects:n,activate:G,elements:e,translate:m,active:r,over:a,activeIndex:w,overIndex:h,items:i.computed(()=>o.items),sortedRects:g}),(u,v)=>i.renderSlot(u.$slots,"default")}}),[A,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 h=y(n);h&&o.value.set(e,h)}),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),m=h=>{r.value=y(h)},w=h=>{a.value=y(h)};return q({setHandleRef:m}),{isDragging:f,setElementRef:w,setHandleRef:m}}function $(){return A().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=A,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.7",
+  "version": "0.1.9",
   "description": "Simple sortable for vue",
   "type": "module",
   "main": "dist/vue-dnd.umd.js",