fluid-dnd 2.0.1 → 2.1.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DNmnvxhi.cjs");exports.dragAndDrop=e.dragAndDrop;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DE3X7xW4.cjs");exports.dragAndDrop=e.dragAndDrop;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { DragEndEventData, DragStartEventData, Direction } from "./core";
+import dragAndDrop from "./core/dragAndDrop";
+export type { DragStartEventData, DragEndEventData, Direction };
+export { dragAndDrop };

package/dist/index.js

@@ -0,0 +1,2 @@
+import dragAndDrop from "./core/dragAndDrop";
+export { dragAndDrop };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { d as o } from "./index-BQUYvZRn.js";
+import { d as o } from "./index-D_kOy-fH.js";
 export {
   o as dragAndDrop
 };

package/dist/react/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),y=require("../HandlerPublisher-C-jTncuG.cjs"),b=require("../index-DNmnvxhi.cjs"),S=require("react-dom");function A(a,f){const[e,n]=s.useState(a),i=s.useRef(e);s.useEffect(()=>{i.current=e},[e]);function g(t,r=!1){const c=i.current[t],o=()=>{n(u=>[...u.slice(0,t),...u.slice(t+1)])};return r?S.flushSync(o):o(),c}function d(t,r,c=!1){const o=()=>{n(u=>[...u.slice(0,t),r,...u.slice(t)])};c?S.flushSync(o):o()}function h(){return e.length}function m(t){return e[t]}function l(t,r,c){b.insertToListEmpty(t,f.current,r,c)}return[e,n,{removeAtEvent:g,insertEvent:d,getLength:h,getValue:m,insertToListEmpty:l}]}const D=new y.HandlerPublisher;function E(a,f){const e=s.useRef(null),[n,i,g]=A(a,e),[d,h,m]=s.useMemo(()=>b.dragAndDrop(g,D,f,"data-index"),[n.length]);return s.useEffect(()=>{const l=m(e.current);return()=>{l&&(console.log("disconnect"),l.disconnect())}},[n.length]),[e,n,i,h,d]}exports.useDragAndDrop=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),y=require("../HandlerPublisher-CsD6p60X.cjs"),b=require("../index-DE3X7xW4.cjs"),S=require("react-dom");function A(a,f){const[e,n]=s.useState(a),i=s.useRef(e);s.useEffect(()=>{i.current=e},[e]);function g(t,r=!1){const c=i.current[t],o=()=>{n(u=>[...u.slice(0,t),...u.slice(t+1)])};return r?S.flushSync(o):o(),c}function d(t,r,c=!1){const o=()=>{n(u=>[...u.slice(0,t),r,...u.slice(t)])};c?S.flushSync(o):o()}function h(){return e.length}function m(t){return e[t]}function l(t,r,c){b.insertToListEmpty(t,f.current,r,c)}return[e,n,{removeAtEvent:g,insertEvent:d,getLength:h,getValue:m,insertToListEmpty:l}]}const D=new y.HandlerPublisher;function E(a,f){const e=s.useRef(null),[n,i,g]=A(a,e),[d,h,m]=s.useMemo(()=>b.dragAndDrop(g,D,f,"data-index"),[n.length]);return s.useEffect(()=>{const l=m(e.current);return()=>{l&&(console.log("disconnect"),l.disconnect())}},[n.length]),[e,n,i,h,d]}exports.useDragAndDrop=E;

package/dist/react/index.d.ts

@@ -1,3 +1,2 @@
-import { default as useDragAndDrop } from './useDragAndDrop';
-
+import useDragAndDrop from "./useDragAndDrop";
 export { useDragAndDrop };

package/dist/react/index.js

@@ -0,0 +1,2 @@
+import useDragAndDrop from "./useDragAndDrop";
+export { useDragAndDrop };

package/dist/react/index.mjs

@@ -1,6 +1,6 @@
 import { useState as S, useRef as p, useEffect as E, useMemo as b } from "react";
-import { H as A } from "../HandlerPublisher-BYI2bw4n.js";
-import { i as C, d as L } from "../index-BQUYvZRn.js";
+import { H as A } from "../HandlerPublisher-LAmM6gCQ.js";
+import { i as C, d as L } from "../index-D_kOy-fH.js";
 import { flushSync as h } from "react-dom";
 function v(a, l) {
   const [t, n] = S(a), i = p(t);

package/dist/react/useDragAndDrop.d.ts

@@ -1,3 +1,2 @@
-import { Config } from '../core';
-
-export default function useDragAndDrop<T, E extends HTMLElement>(items: T[], config?: Config<T>): readonly [import('react').RefObject<E>, T[], import('react').Dispatch<import('react').SetStateAction<T[]>>, (index: number, value: T) => void, (index: number) => void];
+import { Config } from "../core";
+export default function useDragAndDrop<T, E extends HTMLElement>(items: T[], config?: Config<T>): readonly [import("react").RefObject<E>, T[], import("react").Dispatch<import("react").SetStateAction<T[]>>, (index: number, value: T) => void, (index: number) => void];

package/dist/react/useDragAndDrop.js

@@ -0,0 +1,28 @@
+import { useEffect, useMemo, useRef } from "react";
+import HandlerPublisher from "../core/HandlerPublisher";
+import { dragAndDrop } from "../index";
+import { useReactListConfig } from "./utils/ReactLilstConfig";
+/**
+ * Create the parent element of the draggable children and all the drag and drop events and styles.
+ *
+ * @template T - Type of the items.
+ * @param items - List of data to drag and drop.
+ * @param config - Configuration of drag and drop tool.
+ * @returns The reference of the parent element and function to remove an element.
+ */
+const handlerPublisher = new HandlerPublisher();
+export default function useDragAndDrop(items, config) {
+    const parent = useRef(null);
+    const [itemsState, setItemsState, listCondig] = useReactListConfig(items, parent);
+    const [removeAt, insertAt, onChangeParent] = useMemo(() => dragAndDrop(listCondig, handlerPublisher, config, 'data-index'), [itemsState.length]);
+    useEffect(() => {
+        const observer = onChangeParent(parent.current);
+        return () => {
+            if (observer) {
+                console.log('disconnect');
+                observer.disconnect();
+            }
+        };
+    }, [itemsState.length]);
+    return [parent, itemsState, setItemsState, insertAt, removeAt];
+}

package/dist/react/utils/ReactLilstConfig.d.ts

@@ -1,4 +1,3 @@
-import { RefObject } from 'react';
-import { ListCondig } from '../../core';
-
-export declare function useReactListConfig<T, E extends HTMLElement>(items: T[], parent: RefObject<E>): readonly [T[], import('react').Dispatch<import('react').SetStateAction<T[]>>, ListCondig<T>];
+import { RefObject } from "react";
+import { ListCondig } from "../../core";
+export declare function useReactListConfig<T, E extends HTMLElement>(items: T[], parent: RefObject<E>): readonly [T[], import("react").Dispatch<import("react").SetStateAction<T[]>>, ListCondig<T>];

package/dist/react/utils/ReactLilstConfig.js

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+import { insertToListEmpty as insertToListEmptyEvent } from "../../core/utils/events/emitEvents";
+// @ts-ignore  
+import { flushSync } from "react-dom";
+export function useReactListConfig(items, parent) {
+    const [itemsState, setItemsState] = useState(items);
+    const stateRef = useRef(itemsState);
+    useEffect(() => {
+        stateRef.current = itemsState;
+    }, [itemsState]);
+    function removeAtEvent(index, sync = false) {
+        const deletedItem = stateRef.current[index];
+        const removeCallback = () => {
+            setItemsState(prevItems => [
+                ...prevItems.slice(0, index),
+                ...prevItems.slice(index + 1)
+            ]);
+        };
+        if (sync) {
+            flushSync(removeCallback);
+        }
+        else {
+            removeCallback();
+        }
+        return deletedItem;
+    }
+    ;
+    function insertEvent(index, value, sync = false) {
+        const insertCallback = () => {
+            setItemsState(prevItems => {
+                return [
+                    ...prevItems.slice(0, index),
+                    value,
+                    ...prevItems.slice(index)
+                ];
+            });
+        };
+        if (sync) {
+            flushSync(insertCallback);
+        }
+        else {
+            insertCallback();
+        }
+    }
+    ;
+    function getLength() {
+        return itemsState.length;
+    }
+    ;
+    function getValue(index) {
+        return itemsState[index];
+    }
+    function insertToListEmpty(config, index, value) {
+        insertToListEmptyEvent(config, parent.current, index, value);
+    }
+    const actions = {
+        removeAtEvent,
+        insertEvent,
+        getLength,
+        getValue,
+        insertToListEmpty
+    };
+    return [itemsState, setItemsState, actions];
+}

package/dist/svelte/index.cjs

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var d=(n,t,e)=>t in n?u(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var s=(n,t,e)=>d(n,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../HandlerPublisher-C-jTncuG.cjs"),o=require("../index-DNmnvxhi.cjs");class g{constructor(t){s(this,"items");s(this,"parent");this.items=t}setParent(t){this.parent=t}removeAtEvent(t){const e=this.items;if(e.length<=0)return;const[r]=e.splice(t,1);return r}insertEvent(t,e){this.items.splice(t,0,e)}getLength(){return this.items.length}getValue(t){return this.items[t]}insertToListEmpty(t,e,r){o.insertToListEmpty(t,this.parent,e,r)}}const h=new c.HandlerPublisher;function m(n,t){const e=new g(n),[r,l,a]=o.dragAndDrop(e,h,t,"data-index");return[i=>(e.setParent(i),a(i),{destroy(){}}),l,r]}exports.useDragAndDrop=m;
+"use strict";var u=Object.defineProperty;var d=(n,t,e)=>t in n?u(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var s=(n,t,e)=>d(n,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../HandlerPublisher-CsD6p60X.cjs"),o=require("../index-DE3X7xW4.cjs");class g{constructor(t){s(this,"items");s(this,"parent");this.items=t}setParent(t){this.parent=t}removeAtEvent(t){const e=this.items;if(e.length<=0)return;const[r]=e.splice(t,1);return r}insertEvent(t,e){this.items.splice(t,0,e)}getLength(){return this.items.length}getValue(t){return this.items[t]}insertToListEmpty(t,e,r){o.insertToListEmpty(t,this.parent,e,r)}}const h=new c.HandlerPublisher;function m(n,t){const e=new g(n),[r,l,a]=o.dragAndDrop(e,h,t,"data-index");return[i=>(e.setParent(i),a(i),{destroy(){}}),l,r]}exports.useDragAndDrop=m;

package/dist/svelte/index.d.ts

@@ -1,3 +1,2 @@
-import { default as useDragAndDrop } from './useDragAndDrop';
-
+import useDragAndDrop from "./useDragAndDrop";
 export { useDragAndDrop };

package/dist/svelte/index.js

@@ -0,0 +1,2 @@
+import useDragAndDrop from "./useDragAndDrop";
+export { useDragAndDrop };

package/dist/svelte/index.mjs

@@ -1,8 +1,8 @@
 var l = Object.defineProperty;
 var d = (n, t, e) => t in n ? l(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var r = (n, t, e) => d(n, typeof t != "symbol" ? t + "" : t, e);
-import { H as c } from "../HandlerPublisher-BYI2bw4n.js";
-import { i as m, d as u } from "../index-BQUYvZRn.js";
+import { H as c } from "../HandlerPublisher-LAmM6gCQ.js";
+import { i as m, d as u } from "../index-D_kOy-fH.js";
 class h {
   constructor(t) {
     r(this, "items");

package/dist/svelte/useDragAndDrop.d.ts

@@ -1,5 +1,4 @@
-import { Config } from '../core';
-
+import { Config } from "../core";
 export default function useDragAndDrop<T>(items: T[], config?: Config<T>): readonly [(parent: HTMLElement) => {
     destroy(): void;
 }, (index: number, value: T) => void, (index: number) => void];

package/dist/svelte/useDragAndDrop.js

@@ -0,0 +1,25 @@
+import HandlerPublisher from "../core/HandlerPublisher";
+import { dragAndDrop } from "../index";
+import { SvelteListCondig } from "./utils/SvelteListCondig";
+/**
+ * Create the parent element of the draggable children and all the drag and drop events and styles.
+ *
+ * @template T - Type of the items.
+ * @param items - List of data to drag and drop.
+ * @param config - Configuration of drag and drop tool.
+ * @returns The reference of the parent element and function to remove an element.
+ */
+const handlerPublisher = new HandlerPublisher();
+export default function useDragAndDrop(items, config) {
+    const listCondig = new SvelteListCondig(items);
+    const [removeAt, insertAt, onChangeParent] = dragAndDrop(listCondig, handlerPublisher, config, 'data-index');
+    const dragAndDropAction = (parent) => {
+        listCondig.setParent(parent);
+        onChangeParent(parent);
+        return {
+            destroy() {
+            }
+        };
+    };
+    return [dragAndDropAction, insertAt, removeAt];
+}

package/dist/svelte/utils/SvelteListCondig.d.ts

@@ -1,5 +1,5 @@
-import { CoreConfig, ListCondig } from '../../core';
-
+import { CoreConfig } from "../../core";
+import { ListCondig } from "../../core";
 export declare class SvelteListCondig<T> implements ListCondig<T> {
     private items;
     private parent;

package/dist/svelte/utils/SvelteListCondig.js

@@ -0,0 +1,36 @@
+import { insertToListEmpty } from "../../core/utils/events/emitEvents";
+export class SvelteListCondig {
+    items;
+    parent;
+    constructor(items) {
+        this.items = items;
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    ;
+    removeAtEvent(index) {
+        const listValue = this.items;
+        if (listValue.length <= 0) {
+            return;
+        }
+        const [deletedItem] = listValue.splice(index, 1);
+        return deletedItem;
+    }
+    ;
+    insertEvent(index, value) {
+        const listValue = this.items;
+        listValue.splice(index, 0, value);
+    }
+    ;
+    getLength() {
+        return this.items.length;
+    }
+    ;
+    getValue(index) {
+        return this.items[index];
+    }
+    insertToListEmpty(config, index, value) {
+        insertToListEmpty(config, this.parent, index, value);
+    }
+}

package/dist/vue/index.cjs

@@ -1 +1 @@
-"use strict";var c=Object.defineProperty;var h=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>h(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),g=require("../HandlerPublisher-C-jTncuG.cjs"),u=require("../index-DNmnvxhi.cjs"),v=(n,e)=>{const t=n.value;if(t.length<=0)return;const[r]=t.splice(e,1);return r},d=(n,e,t)=>{n.value.splice(e,0,t)},m=n=>n.value.length,p=(n,e)=>n.value[e];class V{constructor(e,t){s(this,"items");s(this,"parent");this.items=e,this.parent=t}removeAtEvent(e){return v(this.items,e)}insertEvent(e,t){return d(this.items,e,t)}getLength(){return m(this.items)}getValue(e){return p(this.items,e)}insertToListEmpty(e,t,r){u.insertToListEmpty(e,this.parent.value,t,r)}}const A=new g.HandlerPublisher;function L(n,e){const t=i.ref();var r=new V(n,t);const[l,o,a]=u.dragAndDrop(r,A,e);return i.watch(t,()=>{a(t.value)}),[t,o,l]}exports.useDragAndDrop=L;
+"use strict";var c=Object.defineProperty;var h=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>h(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),g=require("../HandlerPublisher-CsD6p60X.cjs"),u=require("../index-DE3X7xW4.cjs"),v=(n,e)=>{const t=n.value;if(t.length<=0)return;const[r]=t.splice(e,1);return r},d=(n,e,t)=>{n.value.splice(e,0,t)},m=n=>n.value.length,p=(n,e)=>n.value[e];class V{constructor(e,t){s(this,"items");s(this,"parent");this.items=e,this.parent=t}removeAtEvent(e){return v(this.items,e)}insertEvent(e,t){return d(this.items,e,t)}getLength(){return m(this.items)}getValue(e){return p(this.items,e)}insertToListEmpty(e,t,r){u.insertToListEmpty(e,this.parent.value,t,r)}}const A=new g.HandlerPublisher;function L(n,e){const t=i.ref();var r=new V(n,t);const[l,o,a]=u.dragAndDrop(r,A,e);return i.watch(t,()=>{a(t.value)}),[t,o,l]}exports.useDragAndDrop=L;

package/dist/vue/index.d.ts

@@ -1,3 +1,2 @@
-import { default as useDragAndDrop } from './useDragAndDrop';
-
+import useDragAndDrop from "./useDragAndDrop";
 export { useDragAndDrop };

package/dist/vue/index.js

@@ -0,0 +1,2 @@
+import useDragAndDrop from "./useDragAndDrop";
+export { useDragAndDrop };

package/dist/vue/index.mjs

@@ -2,8 +2,8 @@ var l = Object.defineProperty;
 var u = (n, t, e) => t in n ? l(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var r = (n, t, e) => u(n, typeof t != "symbol" ? t + "" : t, e);
 import { ref as c, watch as m } from "vue";
-import { H as h } from "../HandlerPublisher-BYI2bw4n.js";
-import { i as p, d as v } from "../index-BQUYvZRn.js";
+import { H as h } from "../HandlerPublisher-LAmM6gCQ.js";
+import { i as p, d as v } from "../index-D_kOy-fH.js";
 const g = (n, t) => {
   const e = n.value;
   if (e.length <= 0)

package/dist/vue/useDragAndDrop.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from 'vue';
-import { Config } from '../core';
-
+import { Ref } from "vue";
+import { Config } from "../core";
 export default function useDragAndDrop<T>(items: Ref<T[]>, config?: Config<T>): readonly [Ref<HTMLElement | undefined, HTMLElement | undefined>, (index: number, value: T) => void, (index: number) => void];

package/dist/vue/useDragAndDrop.js

@@ -0,0 +1,23 @@
+// @ts-ignore  
+import { ref, watch } from "vue";
+import HandlerPublisher from "../core/HandlerPublisher";
+import { VueListCondig } from "./utils/VueListCondig";
+import { dragAndDrop } from "../index";
+/**
+ * Create the parent element of the draggable children and all the drag and drop events and styles.
+ *
+ * @template T - Type of the items.
+ * @param items - List of data to drag and drop.
+ * @param config - Configuration of drag and drop tool.
+ * @returns The reference of the parent element and function to remove an element.
+ */
+const handlerPublisher = new HandlerPublisher();
+export default function useDragAndDrop(items, config) {
+    const parent = ref();
+    var listCondig = new VueListCondig(items, parent);
+    const [removeAt, insertAt, onChangeParent] = dragAndDrop(listCondig, handlerPublisher, config);
+    watch(parent, () => {
+        onChangeParent(parent.value);
+    });
+    return [parent, insertAt, removeAt];
+}

package/dist/vue/utils/DropMethods.d.ts

@@ -1,5 +1,4 @@
-import { Ref } from 'vue';
-
+import { Ref } from "vue";
 export declare const removeAtEventOnList: <T>(list: Ref<T[]>, index: number) => T | undefined;
 export declare const onInsertEventOnList: <T>(list: Ref<T[]>, index: number, value: T) => void;
 export declare const getLength: <T>(list: Ref<T[]>) => number;

package/dist/vue/utils/DropMethods.js

@@ -0,0 +1,19 @@
+export const removeAtEventOnList = (list, index) => {
+    const listValue = list.value;
+    if (listValue.length <= 0) {
+        return;
+    }
+    const [deletedItem] = listValue.splice(index, 1);
+    return deletedItem;
+};
+export const onInsertEventOnList = (list, index, value) => {
+    const listValue = list.value;
+    listValue.splice(index, 0, value);
+};
+export const getLength = (list) => {
+    const listValue = list.value;
+    return listValue.length;
+};
+export const getValue = (list, index) => {
+    return list.value[index];
+};

package/dist/vue/utils/VueListCondig.d.ts

@@ -1,6 +1,6 @@
-import { CoreConfig, ListCondig } from '../../core';
-import { Ref } from 'vue';
-
+import { CoreConfig } from "../../core";
+import { ListCondig } from "../../core";
+import { Ref } from "vue";
 export declare class VueListCondig<T> implements ListCondig<T> {
     private items;
     private parent;

package/dist/vue/utils/VueListCondig.js

@@ -0,0 +1,28 @@
+import { getLength, getValue, onInsertEventOnList, removeAtEventOnList } from "./DropMethods";
+import { insertToListEmpty } from "../../core/utils/events/emitEvents";
+export class VueListCondig {
+    items;
+    parent;
+    constructor(items, parent) {
+        this.items = items;
+        this.parent = parent;
+    }
+    removeAtEvent(index) {
+        return removeAtEventOnList(this.items, index);
+    }
+    ;
+    insertEvent(index, value) {
+        return onInsertEventOnList(this.items, index, value);
+    }
+    ;
+    getLength() {
+        return getLength(this.items);
+    }
+    ;
+    getValue(index) {
+        return getValue(this.items, index);
+    }
+    insertToListEmpty(config, index, value) {
+        insertToListEmpty(config, this.parent.value, index, value);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluid-dnd",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte",
   "type": "module",
   "homepage": "https://fluid-dnd.netlify.app",
@@ -58,9 +58,7 @@
   "license": "MIT",
   "devDependencies": {
     "@playwright/test": "^1.43.0",
-    "eslint-plugin-vue": "^9.33.0",
     "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^4.5.2",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^19.1.2",
     "jsdom": "^24.0.0",
@@ -68,14 +66,13 @@
     "vite": "^5.0.8",
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.2.2",
-    "vue-tsc": "^2.2.8",
     "prettier-plugin-svelte": "^3.3.3",
     "svelte": "^5.0.0",
     "vue": ">=3.4.0"
   },
   "scripts": {
     "dev": "cd my-test-examples && vite",
-    "build": "vite build",
+    "build": "vite build && tsc",
     "preview": "vite preview",
     "test": "vitest"
   }