fluid-dnd 2.0.1 → 2.0.2

package/dist/core/utils/translate/GetTranslateBeforeDropping.js

@@ -0,0 +1,129 @@
+import { HORIZONTAL, VERTICAL } from "../..";
+import { getPropByDirection, getValueFromProperty, } from "../GetStyles";
+import { gapAndDisplayInformation, getBeforeStyles } from "../ParseStyles";
+const getContentPosition = (direction, droppable) => {
+    const { borderBeforeWidth, paddingBefore, axis, getRect } = getPropByDirection(direction);
+    const borderBeforeWidthDroppable = getValueFromProperty(droppable, borderBeforeWidth);
+    const paddingBeforeDroppable = getValueFromProperty(droppable, paddingBefore);
+    const axisValue = getRect(droppable)[axis];
+    return borderBeforeWidthDroppable + paddingBeforeDroppable + axisValue;
+};
+const getGroupTranslate = (droppable, draggable) => {
+    const [top, left] = getBeforeStyles(draggable);
+    const verticalContentPosition = getContentPosition(VERTICAL, droppable);
+    const horizontalContentPosition = getContentPosition(HORIZONTAL, droppable);
+    return [
+        horizontalContentPosition - left,
+        verticalContentPosition - top
+    ];
+};
+export default function getTranslateBeforeDropping(direction, siblings, sourceIndex, targetIndex, scroll, previousScroll, initialWindowScroll, droppable, draggable) {
+    let height = 0;
+    let width = 0;
+    const isGroupDropping = Boolean(sourceIndex < 0 && draggable);
+    if (sourceIndex === targetIndex && !isGroupDropping) {
+        return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
+    }
+    const [sourceElement, targetElement, siblingsBetween, isDraggedFoward] = getElementsRange(siblings, sourceIndex, targetIndex, draggable);
+    if (isGroupDropping) {
+        const [x, y] = getGroupTranslate(droppable, draggable);
+        height += y;
+        width += x;
+    }
+    const { scrollElement, beforeMargin: beforeMarginProp, afterMargin: afterMarginProp, distance: spaceProp, gap: gapStyle, } = getPropByDirection(direction);
+    const [gap, hasGaps] = gapAndDisplayInformation(droppable, gapStyle);
+    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement,] = getBeforeAfterMarginBaseOnDraggedDirection(beforeMarginProp, afterMarginProp, sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping);
+    const [beforeSpace, space, afterSpace] = spaceWithMargins(beforeMarginProp, afterMarginProp, spaceProp, siblingsBetween, gap, hasGaps);
+    const spaceBetween = getSpaceBetween(space, beforeSpace, afterSpace, beforeMarginOutside, afterMarginOutside, gap);
+    const scrollChange = isGroupDropping
+        ? droppable[scrollElement]
+        : getScrollChange(scrollElement, droppable, previousScroll);
+    const spaceCalc = isDraggedFoward
+        ? spaceBetween - spaceBeforeDraggedElement
+        : spaceBeforeDraggedElement - spaceBetween;
+    const translate = spaceCalc - scrollChange;
+    if (direction === VERTICAL) {
+        height += translate;
+    }
+    else if (direction === HORIZONTAL) {
+        width += translate;
+    }
+    return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
+}
+const getScrollChange = (scrollElement, parentElement, previousScroll) => {
+    const scrollParent = parentElement[scrollElement];
+    const previousScrollValue = previousScroll[scrollElement];
+    return scrollParent - previousScrollValue;
+};
+const getSpaceBetween = (innerSpace, beforeMarginSpace, afterMarginSpace, beforeMarginOutside, afterMarginOutside, gap) => {
+    const beforeMarginCalc = Math.max(beforeMarginSpace, afterMarginOutside);
+    const afterMarginCalc = Math.max(afterMarginSpace, beforeMarginOutside);
+    return afterMarginCalc + innerSpace + beforeMarginCalc + gap;
+};
+const getElementsRange = (siblings, sourceIndex, targetIndex, draggable) => {
+    const isDraggedFoward = sourceIndex < targetIndex;
+    const [firstIndex, secondIndex] = [sourceIndex, targetIndex].toSorted((a, b) => a - b);
+    const sourceElement = siblings[sourceIndex] ?? draggable;
+    const targetElement = siblings[targetIndex];
+    let siblingsBetween = isDraggedFoward
+        ? siblings.slice(firstIndex + 1, secondIndex + 1)
+        : siblings.slice(firstIndex, secondIndex);
+    if (firstIndex < 0 && draggable) {
+        siblingsBetween = siblings.slice(firstIndex + 1, secondIndex);
+    }
+    return [
+        sourceElement,
+        targetElement,
+        siblingsBetween,
+        isDraggedFoward,
+    ];
+};
+const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, hasGaps) => {
+    if (siblings.length == 0) {
+        return [0, 0, 0];
+    }
+    const beforeSpace = getValueFromProperty(siblings[0], beforeMargin);
+    let afterSpace = 0;
+    let space = -beforeSpace;
+    for (const [index, sibling] of siblings.entries()) {
+        const siblingSpace = sibling.getBoundingClientRect()[distance];
+        const siblingBeforeMargin = getValueFromProperty(sibling, beforeMargin);
+        if (hasGaps) {
+            afterSpace += siblingBeforeMargin;
+        }
+        if (hasGaps && index > 0) {
+            afterSpace += gap;
+        }
+        else {
+            afterSpace = Math.max(afterSpace, siblingBeforeMargin);
+        }
+        space += afterSpace + siblingSpace;
+        afterSpace = getValueFromProperty(sibling, afterMargin);
+    }
+    return [beforeSpace, space, afterSpace];
+};
+const addScrollToTranslate = (translate, direction, initialScroll, initialWindowScroll, isGroupDropping) => {
+    const { scroll, distance } = getPropByDirection(direction);
+    const actualWindowScroll = window[scroll];
+    const initialScrollProp = initialScroll[scroll];
+    const scrollChange = isGroupDropping
+        ? 0
+        : initialScrollProp - 2 * actualWindowScroll + initialWindowScroll[scroll];
+    translate[distance] += scrollChange;
+    return translate;
+};
+const getBeforeAfterMarginBaseOnDraggedDirection = (beforeMarginProp, afterMarginProp, draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping) => {
+    const previousElementByDirection = isDraggedFoward
+        ? draggedElement.previousElementSibling
+        : previousElement;
+    return getBeforeAfterMargin(beforeMarginProp, afterMarginProp, previousElementByDirection, draggedElement, hasGaps, isGroupDropping);
+};
+const getBeforeAfterMargin = (beforeMarginProp, afterMarginProp, previousElement, nextElement, hasGaps, isGroupDropping) => {
+    if (hasGaps) {
+        return [0, 0, 0];
+    }
+    const afterMargin = getValueFromProperty(isGroupDropping ? null : previousElement, afterMarginProp);
+    const beforeMargin = getValueFromProperty(nextElement, beforeMarginProp);
+    let spaceBeforeDraggedElement = Math.max(afterMargin, beforeMargin);
+    return [afterMargin, beforeMargin, spaceBeforeDraggedElement];
+};

package/dist/core/utils/translate/GetTranslationByDraggingAndEvent.d.ts

@@ -1,6 +1,5 @@
-import { Direction } from '../..';
-import { DragAndDropEvent } from '..';
-
+import { Direction } from "../..";
+import { DragAndDropEvent } from "..";
 export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction, droppable: HTMLElement, previousElement?: Element | null, nextElement?: Element | null): {
     height: number;
     width: number;

package/dist/core/utils/translate/GetTranslationByDraggingAndEvent.js

@@ -0,0 +1,48 @@
+import { HORIZONTAL } from "../..";
+import { DRAG_EVENT } from "..";
+import { draggableIsOutside, getPropByDirection, getValueFromProperty, } from "../GetStyles";
+import { gapAndDisplayInformation } from "../ParseStyles";
+export default function getTranslationByDraggingAndEvent(current, event, direction, droppable, previousElement = current.previousElementSibling, nextElement = current.nextElementSibling) {
+    let { height, width } = getTranslationByDragging(direction, current, previousElement, nextElement);
+    const intersection = draggableIsOutside(current, droppable);
+    if (intersection && event == DRAG_EVENT) {
+        height = 0;
+        width = 0;
+    }
+    return { height, width };
+}
+const getTranslationByDragging = (direction, current, previous, nextElement) => {
+    const { afterMargin, beforeMargin, distance, gap: gapStyle, getRect } = getPropByDirection(direction);
+    const after = getValueFromProperty(current, afterMargin);
+    const before = getValueFromProperty(current, beforeMargin);
+    const nextBefore = getValueFromProperty(nextElement, beforeMargin);
+    const [gap, hasGaps] = gapAndDisplayInformation(current.parentElement, gapStyle);
+    const space = getRect(current)[distance];
+    if (hasGaps) {
+        return getTranslation(space, before, after, gap, 0, direction);
+    }
+    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, afterMargin);
+    return getTranslation(space, beforeScace, afterSpace, 0, rest, direction);
+};
+const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, afterMargin) => {
+    const afterSpace = Math.max(nextBeforeMargin, currentAfterMargin);
+    let beforeScace = currentBeforeMargin;
+    let rest = nextBeforeMargin;
+    if (previousElement) {
+        const previousAfterMargin = getValueFromProperty(previousElement, afterMargin);
+        beforeScace = Math.max(previousAfterMargin, currentBeforeMargin);
+        rest = Math.max(rest, previousAfterMargin);
+    }
+    return [afterSpace, beforeScace, rest];
+};
+const getTranslation = (size, before, after, gap, rest, direction) => {
+    return getDistancesByDirection(direction, size + before + after + gap - rest);
+};
+const getDistancesByDirection = (direction, value) => {
+    if (direction == HORIZONTAL) {
+        return { width: value, height: 0 };
+    }
+    else {
+        return { width: 0, height: value };
+    }
+};

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/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/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.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/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.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/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.0.2",
   "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"
   }