svelte-dnd-action 0.9.37 → 0.9.39

package/README.md

@@ -183,6 +183,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   [Customizing the placeholder(shadow) element](https://svelte.dev/repl/9c8db8b91b2142d19dcf9bc963a27838?version=3)
 
 -   [Copy on drag, simple and Dragula like](https://svelte.dev/repl/924b4cc920524065a637fa910fe10193?version=3)
+-   [Copy on drop and a drop area with a single slot](https://svelte.dev/repl/b4e120c45c3e48e49a0d637f0cf097d9?version=3)
 -   [Drag handles](https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3), courtesy of @gleuch
 -   [Interaction (save/get items) with an asynchronous server](https://svelte.dev/repl/964fdac31cb9496da9ded35002300abb?version=3)
 -   [Unsortable lists with custom aria instructions](https://svelte.dev/repl/e020ea1051dc4ae3ac2b697064f234bc?version=3)
@@ -280,6 +281,21 @@ declare namespace svelteHTML {
 ```
 
 You may need to edit `tsconfig.json` to include `global.d.ts` if it doesn't already: "include": ["src/**/*", "global.d.ts"].
+
+> Note: If you are using Sveltekit you should use `svelte.config.js` to modify the generated `tsconfig.json` rather than adding the `include` element to the root `tsconfig.json`.  Adding `include` to the root file will cause issues because it will [override](https://www.typescriptlang.org/tsconfig#extends) the `include` array defined in `.svelte-kit/tsconfig.json`. Example:
+> ```javascript
+> const config = {
+>   kit: {
+>     typescript: {
+>       config(config) {
+>          // This path is relative to the ".svelte-kit" folder
+>         config.include.push('../global.d.ts');
+>       },
+>     },
+>   },
+> };
+> ```
+
 Then you will be able to use the library with type safety as follows (Typescript gurus out there, improvements are welcome :smile:):
 
 ```html

package/dist/index.js

@@ -1344,6 +1344,10 @@
       return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
     });
   }
+  function createShadowElData(draggedElData) {
+    var _objectSpread2$1;
+    return _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
+  }
 
   /* custom drag-events handlers */
   function handleDraggedEntered(e) {
@@ -1406,7 +1410,9 @@
       return;
     }
     var shadowElIdx = findShadowElementIdx(items);
-    var shadowItem = items.splice(shadowElIdx, 1)[0];
+    if (shadowElIdx !== -1) {
+      items.splice(shadowElIdx, 1);
+    }
     shadowElDropZone = undefined;
     var _e$detail = e.detail,
       type = _e$detail.type,
@@ -1418,7 +1424,7 @@
       isDraggedOutsideOfAnyDz = true;
       shadowElDropZone = originDropZone;
       var originZoneItems = dzToConfig.get(originDropZone).items;
-      originZoneItems.splice(originIndex, 0, shadowItem);
+      originZoneItems.splice(originIndex, 0, shadowElData);
       dispatchConsiderEvent(originDropZone, originZoneItems, {
         trigger: TRIGGERS.DRAGGED_LEFT_ALL,
         id: draggedElData[ITEM_ID_KEY],
@@ -1448,7 +1454,9 @@
     isDraggedOutsideOfAnyDz = false;
     var index = e.detail.indexObj.index;
     var shadowElIdx = findShadowElementIdx(items);
-    items.splice(shadowElIdx, 1);
+    if (shadowElIdx !== -1) {
+      items.splice(shadowElIdx, 1);
+    }
     items.splice(index, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {
       trigger: TRIGGERS.DRAGGED_OVER_INDEX,
@@ -1498,7 +1506,13 @@
     });
     var shadowElIdx = findShadowElementIdx(items);
     // the handler might remove the shadow element, ex: dragula like copy on drag
-    if (shadowElIdx === -1) shadowElIdx = originIndex;
+    if (shadowElIdx === -1) {
+      if (shadowElDropZone === originDropZone) {
+        shadowElIdx = originIndex;
+      } else if (shadowElDropZone.children.length > 0) {
+        shadowElIdx = shadowElDropZone.children.length - 1;
+      }
+    }
     items = items.map(function (item) {
       return item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item;
     });
@@ -1517,10 +1531,10 @@
           source: SOURCES.POINTER
         });
       }
-      unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
+      if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
       cleanupPostDrop();
     }
-    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+    if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
   }
 
   // helper function for handleDrop
@@ -1669,7 +1683,6 @@
       addMaybeListeners();
     }
     function handleDragStart() {
-      var _objectSpread2$1;
       printDebug(function () {
         return ["drag start config: ".concat(toString(config)), originalDragTarget];
       });
@@ -1687,7 +1700,7 @@
         centreDraggedOnCursor = config.centreDraggedOnCursor;
       draggedElData = items[currentIdx];
       draggedElType = type;
-      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
+      shadowElData = createShadowElData(draggedElData);
 
       // creating the draggable element
       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);

package/dist/index.mjs

@@ -1338,6 +1338,10 @@ function findShadowElementIdx(items) {
     return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
   });
 }
+function createShadowElData(draggedElData) {
+  var _objectSpread2$1;
+  return _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
+}
 
 /* custom drag-events handlers */
 function handleDraggedEntered(e) {
@@ -1400,7 +1404,9 @@ function handleDraggedLeft(e) {
     return;
   }
   var shadowElIdx = findShadowElementIdx(items);
-  var shadowItem = items.splice(shadowElIdx, 1)[0];
+  if (shadowElIdx !== -1) {
+    items.splice(shadowElIdx, 1);
+  }
   shadowElDropZone = undefined;
   var _e$detail = e.detail,
     type = _e$detail.type,
@@ -1412,7 +1418,7 @@ function handleDraggedLeft(e) {
     isDraggedOutsideOfAnyDz = true;
     shadowElDropZone = originDropZone;
     var originZoneItems = dzToConfig.get(originDropZone).items;
-    originZoneItems.splice(originIndex, 0, shadowItem);
+    originZoneItems.splice(originIndex, 0, shadowElData);
     dispatchConsiderEvent(originDropZone, originZoneItems, {
       trigger: TRIGGERS.DRAGGED_LEFT_ALL,
       id: draggedElData[ITEM_ID_KEY],
@@ -1442,7 +1448,9 @@ function handleDraggedIsOverIndex(e) {
   isDraggedOutsideOfAnyDz = false;
   var index = e.detail.indexObj.index;
   var shadowElIdx = findShadowElementIdx(items);
-  items.splice(shadowElIdx, 1);
+  if (shadowElIdx !== -1) {
+    items.splice(shadowElIdx, 1);
+  }
   items.splice(index, 0, shadowElData);
   dispatchConsiderEvent(e.currentTarget, items, {
     trigger: TRIGGERS.DRAGGED_OVER_INDEX,
@@ -1492,7 +1500,13 @@ function handleDrop() {
   });
   var shadowElIdx = findShadowElementIdx(items);
   // the handler might remove the shadow element, ex: dragula like copy on drag
-  if (shadowElIdx === -1) shadowElIdx = originIndex;
+  if (shadowElIdx === -1) {
+    if (shadowElDropZone === originDropZone) {
+      shadowElIdx = originIndex;
+    } else if (shadowElDropZone.children.length > 0) {
+      shadowElIdx = shadowElDropZone.children.length - 1;
+    }
+  }
   items = items.map(function (item) {
     return item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item;
   });
@@ -1511,10 +1525,10 @@ function handleDrop() {
         source: SOURCES.POINTER
       });
     }
-    unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
+    if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
     cleanupPostDrop();
   }
-  animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+  if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
 }
 
 // helper function for handleDrop
@@ -1663,7 +1677,6 @@ function dndzone(node, options) {
     addMaybeListeners();
   }
   function handleDragStart() {
-    var _objectSpread2$1;
     printDebug(function () {
       return ["drag start config: ".concat(toString(config)), originalDragTarget];
     });
@@ -1681,7 +1694,7 @@ function dndzone(node, options) {
       centreDraggedOnCursor = config.centreDraggedOnCursor;
     draggedElData = items[currentIdx];
     draggedElType = type;
-    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
+    shadowElData = createShadowElData(draggedElData);
 
     // creating the draggable element
     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.37",
+    "version": "0.9.39",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/pointerAction.js

@@ -117,6 +117,9 @@ function unWatchDraggedElement() {
 function findShadowElementIdx(items) {
     return items.findIndex(item => !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
 }
+function createShadowElData(draggedElData) {
+    return {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
+}
 
 /* custom drag-events handlers */
 function handleDraggedEntered(e) {
@@ -157,7 +160,9 @@ function handleDraggedLeft(e) {
         return;
     }
     const shadowElIdx = findShadowElementIdx(items);
-    const shadowItem = items.splice(shadowElIdx, 1)[0];
+    if (shadowElIdx !== -1) {
+        items.splice(shadowElIdx, 1);
+    }
     shadowElDropZone = undefined;
     const {type, theOtherDz} = e.detail;
     if (
@@ -168,7 +173,7 @@ function handleDraggedLeft(e) {
         isDraggedOutsideOfAnyDz = true;
         shadowElDropZone = originDropZone;
         const originZoneItems = dzToConfig.get(originDropZone).items;
-        originZoneItems.splice(originIndex, 0, shadowItem);
+        originZoneItems.splice(originIndex, 0, shadowElData);
         dispatchConsiderEvent(originDropZone, originZoneItems, {
             trigger: TRIGGERS.DRAGGED_LEFT_ALL,
             id: draggedElData[ITEM_ID_KEY],
@@ -192,7 +197,9 @@ function handleDraggedIsOverIndex(e) {
     isDraggedOutsideOfAnyDz = false;
     const {index} = e.detail.indexObj;
     const shadowElIdx = findShadowElementIdx(items);
-    items.splice(shadowElIdx, 1);
+    if (shadowElIdx !== -1) {
+        items.splice(shadowElIdx, 1);
+    }
     items.splice(index, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_OVER_INDEX, id: draggedElData[ITEM_ID_KEY], source: SOURCES.POINTER});
 }
@@ -231,7 +238,13 @@ function handleDrop() {
     );
     let shadowElIdx = findShadowElementIdx(items);
     // the handler might remove the shadow element, ex: dragula like copy on drag
-    if (shadowElIdx === -1) shadowElIdx = originIndex;
+    if (shadowElIdx === -1) {
+        if (shadowElDropZone === originDropZone) {
+            shadowElIdx = originIndex;
+        } else if (shadowElDropZone.children.length > 0) {
+            shadowElIdx = shadowElDropZone.children.length - 1;
+        }
+    }
 
     items = items.map(item => (item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item));
     function finalizeWithinZone() {
@@ -249,10 +262,10 @@ function handleDrop() {
                 source: SOURCES.POINTER
             });
         }
-        unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
+        if (shadowElIdx !== -1) unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
         cleanupPostDrop();
     }
-    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
+    if (shadowElIdx !== -1) animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
 }
 
 // helper function for handleDrop
@@ -389,7 +402,7 @@ export function dndzone(node, options) {
         const {items, type, centreDraggedOnCursor} = config;
         draggedElData = items[currentIdx];
         draggedElType = type;
-        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
+        shadowElData = createShadowElData(draggedElData);
 
         // creating the draggable element
         draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);