fluid-dnd 2.2.1 → 2.4.0

package/dist/index.cjs

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

package/dist/index.mjs

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

package/dist/react/index.cjs

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

package/dist/react/index.mjs

@@ -1,6 +1,6 @@
 import { useState as S, useRef as h, useEffect as E } from "react";
-import { H as b } from "../HandlerPublisher-CRBvk0J7.js";
-import { i as A, d as C } from "../index-Dc95WWpv.js";
+import { H as b } from "../HandlerPublisher-pcX0Zmas.js";
+import { i as A, d as C } from "../index-DFXw7kYo.js";
 import { flushSync as p } from "react-dom";
 function L(l, c) {
   const [t, n] = S(l), a = h(t);
@@ -9,20 +9,13 @@ function L(l, c) {
   }, [t]);
   function f(e, r = !1) {
     const s = a.current[e], o = () => {
-      n((i) => [
-        ...i.slice(0, e),
-        ...i.slice(e + 1)
-      ]);
+      n((i) => [...i.slice(0, e), ...i.slice(e + 1)]);
     };
     return r ? p(o) : o(), s;
   }
   function m(e, r, s = !1) {
     const o = () => {
-      n((i) => [
-        ...i.slice(0, e),
-        r,
-        ...i.slice(e)
-      ]);
+      n((i) => [...i.slice(0, e), r, ...i.slice(e)]);
     };
     s ? p(o) : o();
   }

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

@@ -1,3 +1,3 @@
-import { RefObject } from "react";
-import { ListCondig } from "../../core";
+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

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

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-DGYFIYDd.cjs"),o=require("../index-DxKyk1TO.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-B68XPAcH.cjs"),o=require("../index-2hBSSK9_.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.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-CRBvk0J7.js";
-import { i as m, d as u } from "../index-Dc95WWpv.js";
+import { H as c } from "../HandlerPublisher-pcX0Zmas.js";
+import { i as m, d as u } from "../index-DFXw7kYo.js";
 class h {
   constructor(t) {
     r(this, "items");

package/dist/svelte/utils/SvelteListCondig.js

@@ -1,4 +1,4 @@
-import { insertToListEmpty } from '../../core/utils/events/emitEvents';
+import { insertToListEmpty } from '../../core/events/insert';
 export class SvelteListCondig {
     items;
     parent;

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-DGYFIYDd.cjs"),u=require("../index-DxKyk1TO.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-B68XPAcH.cjs"),u=require("../index-2hBSSK9_.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.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-CRBvk0J7.js";
-import { i as p, d as v } from "../index-Dc95WWpv.js";
+import { H as h } from "../HandlerPublisher-pcX0Zmas.js";
+import { i as p, d as v } from "../index-DFXw7kYo.js";
 const g = (n, t) => {
   const e = n.value;
   if (e.length <= 0)

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

@@ -1,6 +1,6 @@
-import { CoreConfig } from "../../core";
-import { 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

@@ -1,5 +1,5 @@
-import { getLength, getValue, onInsertEventOnList, removeAtEventOnList } from "./DropMethods";
-import { insertToListEmpty } from "../../core/utils/events/emitEvents";
+import { getLength, getValue, onInsertEventOnList, removeAtEventOnList } from './DropMethods';
+import { insertToListEmpty } from '../../core/events/insert';
 export class VueListCondig {
     items;
     parent;
@@ -10,15 +10,12 @@ export class VueListCondig {
     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);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluid-dnd",
-  "version": "2.2.1",
+  "version": "2.4.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",

package/dist/core/utils/config.d.ts

@@ -1,5 +0,0 @@
-import { ListCondig, MapFrom } from '..';
-import { Config, CoreConfig } from '..';
-import { DroppableConfig } from '../configHandler';
-export declare const getConfig: <T>(listCondig: ListCondig<T>, config?: Config<T>) => CoreConfig<T>;
-export declare const MapConfig: <T>(coreConfig: DroppableConfig<any>, mapFrom: MapFrom<T>) => CoreConfig<any>;

package/dist/core/utils/config.js

@@ -1,57 +0,0 @@
-import { VERTICAL } from '..';
-import { DRAGGABLE_CLASS } from './classes';
-export const getConfig = (listCondig, config) => {
-    const onRemoveAtEvent = (index, sync) => {
-        return listCondig.removeAtEvent(index, sync);
-    };
-    const onInsertEvent = (index, value, sync) => {
-        return listCondig.insertEvent(index, value, sync);
-    };
-    const onGetLegth = () => {
-        return listCondig.getLength();
-    };
-    const onGetValue = (index) => {
-        return listCondig.getValue(index);
-    };
-    const defaultMapFrom = (object) => {
-        return object;
-    };
-    return {
-        direction: config?.direction ?? VERTICAL,
-        handlerSelector: config?.handlerSelector ?? DRAGGABLE_CLASS,
-        draggingClass: config?.draggingClass ?? 'dragging',
-        droppableClass: config?.droppableClass ?? 'droppable-hover',
-        isDraggable: config?.isDraggable ?? (() => true),
-        onDragStart: config?.onDragStart ?? (() => { }),
-        onDragEnd: config?.onDragEnd ?? (() => { }),
-        droppableGroup: config?.droppableGroup,
-        onRemoveAtEvent,
-        onInsertEvent,
-        onGetLegth,
-        onGetValue,
-        animationDuration: config?.animationDuration ?? 200,
-        removingClass: config?.removingClass ?? 'removing',
-        insertingFromClass: config?.insertingFromClass ?? 'from-inserting',
-        delayBeforeRemove: config?.delayBeforeRemove ?? 200,
-        delayBeforeInsert: config?.delayBeforeInsert ?? 200,
-        mapFrom: config?.mapFrom ?? defaultMapFrom,
-        delayBeforeTouchMoveEvent: config?.delayBeforeTouchMoveEvent ?? 150,
-        coordinateTransform: config?.coordinateTransform ?? [(coordinate) => coordinate]
-    };
-};
-export const MapConfig = (coreConfig, mapFrom) => {
-    const { config, droppable } = coreConfig;
-    const { onInsertEvent, onDragEnd } = config;
-    const mapOnInsertEvent = (index, value) => {
-        return onInsertEvent(index, mapFrom(value, droppable), true);
-    };
-    const mapOnDragEnd = (eventData) => {
-        const { index, value } = eventData;
-        onDragEnd({ index, value: mapFrom(value, droppable) });
-    };
-    return {
-        ...config,
-        onDragEnd: mapOnDragEnd,
-        onInsertEvent: mapOnInsertEvent
-    };
-};

package/dist/core/utils/events/emitEvents.d.ts

@@ -1,11 +0,0 @@
-import { WindowScroll } from "../../../../index";
-import { CoreConfig } from "../..";
-import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from "..";
-import { DroppableConfig } from "../../configHandler";
-import HandlerPublisher from '../../HandlerPublisher';
-type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
-type DragAndDropEvent = DraggingEvent | DropEvent;
-type DropEvent = "drop" | typeof START_DROP_EVENT;
-export default function useEmitEvents<T>(currentConfig: CoreConfig<T>, index: number, parent: HTMLElement, droppableGroupClass: string | null, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(draggedElement: HTMLElement, event: DragAndDropEvent, initialWindowScroll: WindowScroll, droppableConfig: DroppableConfig<T> | undefined, positionOnSourceDroppable?: number) => void, (targetIndex: number, draggedElement: HTMLElement, droppableConfig: DroppableConfig<T>, onFinishRemoveEvent: (element: HTMLElement) => void) => void, (targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, startInserting: () => void) => void, (draggedElement: HTMLElement) => void, (element: Element, force: boolean) => void];
-export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined | null, targetIndex: number, value: T) => void;
-export {};

package/dist/core/utils/scroll.d.ts

@@ -1,4 +0,0 @@
-import { ElementScroll } from "index";
-import { Direction } from "..";
-export declare const scrollByDirection: (element: HTMLElement, direction: Direction, scrollAmount: number) => void;
-export declare const scrollPercent: (direction: Direction, droppable: HTMLElement, droppableScroll: ElementScroll) => number;

package/dist/core/utils/scroll.js

@@ -1,17 +0,0 @@
-import { getPropByDirection } from "./GetStyles";
-export const scrollByDirection = (element, direction, scrollAmount) => {
-    if (scrollAmount == 0) {
-        return;
-    }
-    if (direction === "vertical") {
-        element.scrollBy(0, scrollAmount);
-    }
-    else {
-        element.scrollBy(scrollAmount, 0);
-    }
-};
-export const scrollPercent = (direction, droppable, droppableScroll) => {
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
-    return (droppableScroll[scrollElement] /
-        (droppable[scrollDistance] - droppable[clientDistance]));
-};