vue-dnd-sortable 0.1.0

package/README.md

@@ -0,0 +1,15 @@
+# core
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.2.5. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/dist/activator.d.ts

@@ -0,0 +1,22 @@
+import type { Coords } from './types';
+interface ActivatorOptions {
+    element: HTMLElement;
+    onStart?: (coords: Coords) => void;
+    onMove?: (coords: Coords) => void;
+    onEnd?: (e: PointerEvent) => void;
+}
+export declare class Activator {
+    private document;
+    private listeners;
+    private documentListeners;
+    private options;
+    private windowListeners;
+    constructor(options: ActivatorOptions);
+    private deactivate;
+    private activate;
+    private handleStart;
+    private handleMove;
+    private handleEnd;
+    private clearSelection;
+}
+export {};

package/dist/collision.d.ts

@@ -0,0 +1,13 @@
+import type { UniqueIdentifier } from './types';
+import type { DomRectMap } from './utilities';
+interface CollisionResult {
+    id: UniqueIdentifier;
+    value: number;
+}
+export type CollisionDetector = (options: {
+    rect: DOMRect;
+    rects: DomRectMap;
+}) => CollisionResult[];
+export declare const rectangleIntersection: CollisionDetector;
+export declare const closestToCenter: CollisionDetector;
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as DndProvider } from './provider.vue';

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

@@ -0,0 +1,26 @@
+import type { CollisionDetector } from '../collision';
+import type { DndEndEvent } from '../context';
+import type { UniqueIdentifier } from '../types';
+interface Props {
+    items: UniqueIdentifier[];
+    collision?: CollisionDetector;
+    axis?: 'x' | 'y';
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: (event: DndEndEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onEnd?: ((event: DndEndEvent) => any) | undefined;
+}>, {
+    collision: CollisionDetector;
+}, {}, {}, {}, 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

@@ -0,0 +1,10 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { UniqueIdentifier } from './types';
+export interface SortableOptions {
+    id: UniqueIdentifier;
+    element: MaybeRefOrGetter<HTMLElement | null>;
+    handleElement?: MaybeRefOrGetter<HTMLElement | null>;
+}
+export declare function useSortable(options: SortableOptions): {
+    isDragging: import("vue").ComputedRef<boolean>;
+};

package/dist/context.d.ts

@@ -0,0 +1,21 @@
+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>>;
+    rects: Ref<DomRectMap>;
+    items: ComputedRef<UniqueIdentifier[]>;
+    translate: Ref<Coords | null>;
+    active: Ref<UniqueIdentifier | null>;
+    over: Ref<UniqueIdentifier | null>;
+    sortedRects: Ref<DOMRect[]>;
+    activeIndex: ComputedRef<number | null>;
+    overIndex: ComputedRef<number | null>;
+    activate: (id: UniqueIdentifier, handle: Nullable<HTMLElement>) => void;
+}
+export interface DndEndEvent {
+    active: UniqueIdentifier;
+    over: UniqueIdentifier | null;
+}
+export declare const injectDndContext: <T extends DndContext | null | undefined = DndContext>(fallback?: T | undefined) => T extends null ? DndContext | null : DndContext, provideDndContext: (contextValue: DndContext) => DndContext;
+export {};

package/dist/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { DndEndEvent } from './context';
+import type { UniqueIdentifier } from './types';
+export declare function arrayMove(arr: UniqueIdentifier[], event: DndEndEvent): UniqueIdentifier[];

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './collision';
+export * from './components';
+export * from './composables';
+export * from './helpers';

package/dist/sortable.d.ts

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

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export type UniqueIdentifier = string | number;
+export type Nullable<T> = T | null | undefined;
+export interface Coords {
+    x: number;
+    y: number;
+}

package/dist/utilities/context.d.ts

@@ -0,0 +1 @@
+export declare function createContext<TContextValue>(componentName: string): readonly [<T extends TContextValue | null | undefined = TContextValue>(fallback?: T) => T extends null ? TContextValue | null : TContextValue, (contextValue: TContextValue) => TContextValue];

package/dist/utilities/index.d.ts

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

package/dist/utilities/rects.d.ts

@@ -0,0 +1,3 @@
+import type { UniqueIdentifier } from '../types';
+export type DomRectMap = Map<UniqueIdentifier, DOMRect>;
+export declare function getSortedRects(items: UniqueIdentifier[], rects: DomRectMap): DOMRect[];

package/dist/vue-dnd.es.js

@@ -0,0 +1,268 @@
+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;
+}
+function $(s, e) {
+  return s.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));
+    }
+    return 0;
+  }
+  const r = [];
+  for (const [t, n] of e)
+    r.push({
+      id: t,
+      value: i(s, 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);
+  }
+  function r(n) {
+    return {
+      x: n.x + n.width / 2,
+      y: n.y + n.height / 2
+    };
+  }
+  const t = [];
+  for (const [n, o] of e)
+    t.push({
+      id: n,
+      value: i(r(o), r(s))
+    });
+  return t.sort($);
+};
+class M {
+  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 z {
+  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();
+  }
+  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 B(s) {
+  const e = Symbol(
+    `${s}Context`
+  );
+  return [i, r];
+  function i(t) {
+    const n = R(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 A(e, t), t;
+  }
+}
+function F(s, e) {
+  return s.reduce((i, r) => {
+    const t = e.get(r);
+    return t && i.push(t), i;
+  }, []);
+}
+function I(s) {
+  return s !== null && s >= 0;
+}
+const [T, V] = B("DndContext");
+function X(s) {
+  const {
+    rects: e,
+    activeIndex: i,
+    overIndex: r,
+    index: t
+  } = s, 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 o = Y(e, t, i);
+  return t > i && t <= r ? {
+    x: 0,
+    y: -n.height - o
+  } : t < i && t >= r ? {
+    x: 0,
+    y: n.height - o
+  } : {
+    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;
+}
+const K = /* @__PURE__ */ C({
+  __name: "provider",
+  props: {
+    items: {},
+    collision: { type: Function, default: j },
+    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({
+      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());
+    }
+    function y() {
+      if (!o.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
+      } : null;
+      return a ? i.collision({
+        rect: a,
+        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;
+          }
+        });
+    }
+    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;
+      }
+      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");
+      }
+    }), 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,
+            overIndex: x.value,
+            rects: p.value,
+            index: i.items.indexOf(l)
+          }), d && (a.style.transform = `translate(${d.x}px, ${d.y}px)`);
+        }
+    }), V({
+      rects: n,
+      activate: L,
+      elements: t,
+      translate: v,
+      active: o,
+      over: u,
+      activeIndex: m,
+      overIndex: x,
+      items: f(() => i.items),
+      sortedRects: p
+    }), (l, a) => b(l.$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);
+  }), {
+    isDragging: f(() => e.value === t)
+  };
+}
+function P(s, e) {
+  const { active: i, over: r } = e;
+  if (!r)
+    return s;
+  const t = s.indexOf(i), n = s.indexOf(r);
+  if (t === n)
+    return s;
+  const o = s.slice(), u = o.splice(t, 1)[0];
+  return u && o.splice(n, 0, u), o;
+}
+export {
+  K as DndProvider,
+  P as arrayMove,
+  j as closestToCenter,
+  G as rectangleIntersection,
+  N as useSortable
+};

package/dist/vue-dnd.umd.js

@@ -0,0 +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"})});

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "vue-dnd-sortable",
+  "version": "0.1.0",
+  "description": "Simple sortable for vue",
+  "type": "module",
+  "main": "dist/vue-dnd.umd.js",
+  "module": "dist/vue-dnd.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/vue-dnd.es.js",
+    "require": "./dist/vue-dnd.umd.js",
+    "types": "./dist/index.d.ts"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vue-tsc --declaration --emitDeclarationOnly && vite build"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^7.0.0",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "vue": "^3.5.17"
+  },
+  "keywords": [
+    "vue",
+    "dnd",
+    "drag",
+    "drop",
+    "sortable",
+    "component"
+  ],
+  "author": "Hodame <hodame04@gmail.com>",
+  "license": "MIT"
+}