vue-dnd-sortable 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/context.d.ts +1 -0
- package/dist/vue-dnd.es.js +16 -15
- package/dist/vue-dnd.umd.js +1 -1
- package/package.json +22 -22
package/dist/context.d.ts
CHANGED
package/dist/vue-dnd.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { inject as z, provide as H, toValue as B, defineComponent as _, ref as x, computed as
|
|
1
|
+
import { inject as z, provide as H, toValue as B, defineComponent as _, ref as x, computed as g, 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";
|
|
2
2
|
function Y(o, e) {
|
|
3
3
|
return e.value - o.value;
|
|
4
4
|
}
|
|
@@ -9,7 +9,7 @@ const se = ({ rect: o, rects: e }) => {
|
|
|
9
9
|
function s(t, n) {
|
|
10
10
|
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;
|
|
11
11
|
if (l < i && a < c) {
|
|
12
|
-
const d = h * p,
|
|
12
|
+
const d = h * p, S = t.width * t.height, R = n.width * n.height, b = d / (S + R - d);
|
|
13
13
|
return Number(b.toFixed(4));
|
|
14
14
|
}
|
|
15
15
|
return 0;
|
|
@@ -191,11 +191,11 @@ const oe = (o) => {
|
|
|
191
191
|
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({
|
|
192
192
|
start: null,
|
|
193
193
|
current: { x: 0, y: 0 }
|
|
194
|
-
}), h =
|
|
194
|
+
}), h = g(() => c.value.start ? {
|
|
195
195
|
x: s.lockAxis === "y" ? 0 : c.value.current.x - c.value.start.x,
|
|
196
196
|
y: s.lockAxis === "x" ? 0 : c.value.current.y - c.value.start.y
|
|
197
|
-
} : null), p =
|
|
198
|
-
function
|
|
197
|
+
} : null), p = g(() => i.value ? s.items.indexOf(i.value) : null), d = g(() => a.value ? s.items.indexOf(a.value) : null), S = g(() => U(s.items, n.value));
|
|
198
|
+
function R() {
|
|
199
199
|
n.value.clear();
|
|
200
200
|
for (const [u, v] of t.value)
|
|
201
201
|
n.value.set(u, v.getBoundingClientRect());
|
|
@@ -221,14 +221,15 @@ const oe = (o) => {
|
|
|
221
221
|
return;
|
|
222
222
|
const m = new K({
|
|
223
223
|
element: v ?? f,
|
|
224
|
-
onStart(
|
|
225
|
-
|
|
224
|
+
onStart(y) {
|
|
225
|
+
R(), c.value.start = y;
|
|
226
226
|
},
|
|
227
|
-
onMove(
|
|
228
|
-
c.value.start && (i.value || (i.value = u), c.value.current.x =
|
|
227
|
+
onMove(y) {
|
|
228
|
+
c.value.start && (i.value || (i.value = u), c.value.current.x = y.x, c.value.current.y = y.y, a.value = b());
|
|
229
229
|
},
|
|
230
|
-
onEnd() {
|
|
230
|
+
onEnd(y) {
|
|
231
231
|
i.value && r("end", {
|
|
232
|
+
originalEvent: y,
|
|
232
233
|
active: i.value,
|
|
233
234
|
over: a.value
|
|
234
235
|
}), i.value = null, a.value = null, c.value.start = null;
|
|
@@ -237,7 +238,7 @@ const oe = (o) => {
|
|
|
237
238
|
l.value.set(u, m);
|
|
238
239
|
}
|
|
239
240
|
return C(t, () => {
|
|
240
|
-
|
|
241
|
+
R();
|
|
241
242
|
}, { deep: !0 }), C([i, a], ([u]) => {
|
|
242
243
|
if (!u) {
|
|
243
244
|
for (const [f, m] of t.value)
|
|
@@ -257,7 +258,7 @@ const oe = (o) => {
|
|
|
257
258
|
u === i.value ? f = h.value : f = s.strategy({
|
|
258
259
|
activeIndex: p.value,
|
|
259
260
|
overIndex: d.value,
|
|
260
|
-
rects:
|
|
261
|
+
rects: S.value,
|
|
261
262
|
index: s.items.indexOf(u)
|
|
262
263
|
}), f && (v.style.transform = `translate(${f.x}px, ${f.y}px)`);
|
|
263
264
|
}
|
|
@@ -270,8 +271,8 @@ const oe = (o) => {
|
|
|
270
271
|
over: a,
|
|
271
272
|
activeIndex: p,
|
|
272
273
|
overIndex: d,
|
|
273
|
-
items:
|
|
274
|
-
sortedRects:
|
|
274
|
+
items: g(() => s.items),
|
|
275
|
+
sortedRects: S
|
|
275
276
|
}), (u, v) => E(u.$slots, "default");
|
|
276
277
|
}
|
|
277
278
|
}), [
|
|
@@ -288,7 +289,7 @@ function ee(o) {
|
|
|
288
289
|
}), N(() => {
|
|
289
290
|
n && (a.value = w(n)), l && (i.value = w(l)), r(t, i.value);
|
|
290
291
|
});
|
|
291
|
-
const c =
|
|
292
|
+
const c = g(() => e.value === t), h = (d) => {
|
|
292
293
|
i.value = w(d);
|
|
293
294
|
}, p = (d) => {
|
|
294
295
|
a.value = w(d);
|
package/dist/vue-dnd.umd.js
CHANGED
|
@@ -1 +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),m=r-c,w=f-a;if(c<r&&a<f){const h=m*w,
|
|
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),m=r-c,w=f-a;if(c<r&&a<f){const h=m*w,S=e.width*e.height,C=n.width*n.height,b=h/(S+C-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"),E=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=I(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 I(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=I(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:E},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),S=i.computed(()=>z(o.items,n.value));function C(){n.value.clear();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(g){C(),f.value.start=g},onMove(g){f.value.start&&(r.value||(r.value=u),f.value.current.x=g.x,f.value.current.y=g.y,a.value=b())},onEnd(g){r.value&&l("end",{originalEvent:g,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,()=>{C()},{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:S.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:S}),(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=E,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-dnd-sortable",
|
|
3
|
-
"version": "0.1.11",
|
|
4
|
-
"description": "Simple sortable for vue",
|
|
5
3
|
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
4
|
+
"version": "0.1.12",
|
|
5
|
+
"description": "Simple sortable for vue",
|
|
6
|
+
"author": "Hodame <hodame04@gmail.com>",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"vue",
|
|
10
|
+
"dnd",
|
|
11
|
+
"drag",
|
|
12
|
+
"drop",
|
|
13
|
+
"sortable",
|
|
14
|
+
"component"
|
|
15
|
+
],
|
|
9
16
|
"exports": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
10
18
|
"import": "./dist/vue-dnd.es.js",
|
|
11
|
-
"require": "./dist/vue-dnd.umd.js"
|
|
12
|
-
"types": "./dist/index.d.ts"
|
|
19
|
+
"require": "./dist/vue-dnd.umd.js"
|
|
13
20
|
},
|
|
21
|
+
"main": "dist/vue-dnd.umd.js",
|
|
22
|
+
"module": "dist/vue-dnd.es.js",
|
|
23
|
+
"types": "dist/index.d.ts",
|
|
14
24
|
"files": [
|
|
15
25
|
"dist"
|
|
16
26
|
],
|
|
17
27
|
"scripts": {
|
|
18
28
|
"build": "vue-tsc --declaration --emitDeclarationOnly && vite build"
|
|
19
29
|
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"typescript": "^5.8.3",
|
|
32
|
+
"vue": "^3.5"
|
|
33
|
+
},
|
|
20
34
|
"devDependencies": {
|
|
21
35
|
"@types/bun": "latest",
|
|
22
36
|
"@vitejs/plugin-vue": "^6.0.0",
|
|
23
37
|
"vite": "^7.0.0",
|
|
24
38
|
"vue-tsc": "^2.2.10"
|
|
25
|
-
}
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"typescript": "^5.8.3",
|
|
28
|
-
"vue": "^3.5"
|
|
29
|
-
},
|
|
30
|
-
"keywords": [
|
|
31
|
-
"vue",
|
|
32
|
-
"dnd",
|
|
33
|
-
"drag",
|
|
34
|
-
"drop",
|
|
35
|
-
"sortable",
|
|
36
|
-
"component"
|
|
37
|
-
],
|
|
38
|
-
"author": "Hodame <hodame04@gmail.com>",
|
|
39
|
-
"license": "MIT"
|
|
39
|
+
}
|
|
40
40
|
}
|