svelte-dnd-action 0.9.30 → 0.9.32

package/README.md

@@ -112,6 +112,7 @@ An options-object with the following attributes:
 | `morphDisabled` | Boolean | No | `false` | By default, when dragging over a zone, the dragged element is morphed to look like it would if dropped. You can prevent it by setting this option. |
 | `dropFromOthersDisabled` | Boolean | No | `false` | Setting it to true will make it impossible to drop elements from other dnd-zones of the same type. Can be useful if you want to limit the max number of items for example. You can change it at any time, and the zone will adjust on the fly |
 | `zoneTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container when not dragging. Can be useful if you want to make the screen reader to skip the list container. You can change it at any time. |
+| `zoneItemTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container items when not dragging. Can be useful if you use [Drag handles](https://github.com/isaacHagoel/svelte-dnd-action#examples-and-recipes). You can change it at any time. |
 | `dropTargetStyle` | Object<String> | No | `{outline: 'rgba(255, 255, 102, 0.7) solid 2px'}` | An object of styles to apply to the dnd-zone when items can be dragged into it. Note: the styles override any inline styles applied to the dnd-zone. When the styles are removed, any original inline styles will be lost |
 | `dropTargetClasses`| Array<String> | No | `[]` | A list of classes to apply to the dnd-zone when items can be dragged into it. Note: make sure the classes you use are global. |
 | `transformDraggedElement` | Function | No | `() => {}` | A function that is invoked when the draggable element enters the dnd-zone or hover overs a new index in the current dnd-zone. <br />Signature:<br />function(element, data, index) {}<br />**element**: The dragged element. <br />**data**: The data of the item from the items array.<br />**index**: The index the dragged element will become in the new dnd-zone.<br /><br />This allows you to override properties on the dragged element, such as innerHTML to change how it displays. If what you are after is altering styles, do it to the children, not to the dragged element itself |

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export interface Options {
     morphDisabled?: boolean;
     dropFromOthersDisabled?: boolean;
     zoneTabIndex?: number; // set the tabindex of the list container when not dragging
+    zoneItemTabIndex?: number; // set the tabindex of the list container items when not dragging
     dropTargetClasses?: string[];
     dropTargetStyle?: Record<string, string>;
     transformDraggedElement?: TransformDraggedElementFunction;

package/dist/index.js

@@ -972,16 +972,27 @@
     } finally {
       _iterator.f();
     }
-    if (selects.length <= 0) {
-      return cloned;
-    }
-    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
-    for (var i = 0; i < clonedSelects.length; i++) {
-      var select = clonedSelects[i];
-      var value = values[i];
-      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
-      if (optionEl) {
-        optionEl.setAttribute("selected", true);
+    if (selects.length > 0) {
+      var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
+      for (var i = 0; i < clonedSelects.length; i++) {
+        var select = clonedSelects[i];
+        var value = values[i];
+        var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+        if (optionEl) {
+          optionEl.setAttribute("selected", true);
+        }
+      }
+    }
+    var elIsCanvas = el.tagName === "CANVAS";
+    var canvases = elIsCanvas ? [el] : _toConsumableArray(el.querySelectorAll("canvas"));
+    if (canvases.length > 0) {
+      var clonedCanvases = elIsCanvas ? [cloned] : _toConsumableArray(cloned.querySelectorAll("canvas"));
+      for (var _i = 0; _i < clonedCanvases.length; _i++) {
+        var canvas = canvases[_i];
+        var clonedCanvas = clonedCanvases[_i];
+        clonedCanvas.width = canvas.width;
+        clonedCanvas.height = canvas.height;
+        clonedCanvas.getContext("2d").drawImage(canvas, 0, 0);
       }
     }
     return cloned;
@@ -2118,6 +2129,7 @@
       type: undefined,
       dragDisabled: false,
       zoneTabIndex: 0,
+      zoneItemTabIndex: 0,
       dropFromOthersDisabled: false,
       dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
       dropTargetClasses: [],
@@ -2247,7 +2259,7 @@
       var children = Array.from(node.children);
       var focusedItemIdx = children.indexOf(draggableEl);
       focusedItem = draggableEl;
-      focusedItem.tabIndex = 0;
+      focusedItem.tabIndex = config.zoneItemTabIndex;
       focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
       focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
     }
@@ -2260,6 +2272,8 @@
         dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
         _ref2$zoneTabIndex = _ref2.zoneTabIndex,
         zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
+        _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
+        zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
         _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
         dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
         _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2272,6 +2286,7 @@
       config.dragDisabled = dragDisabled;
       config.dropFromOthersDisabled = dropFromOthersDisabled;
       config.zoneTabIndex = zoneTabIndex;
+      config.zoneItemTabIndex = zoneItemTabIndex;
       config.dropTargetStyle = dropTargetStyle;
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
@@ -2295,7 +2310,7 @@
       var _loop = function _loop(i) {
         var draggableEl = node.children[i];
         allDragTargets.add(draggableEl);
-        draggableEl.tabIndex = isDragging ? -1 : 0;
+        draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
         if (!autoAriaDisabled) {
           draggableEl.setAttribute("role", "listitem");
         }
@@ -2316,7 +2331,7 @@
           });
           // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
           focusedItem = draggableEl;
-          focusedItem.tabIndex = 0;
+          focusedItem.tabIndex = config.zoneItemTabIndex;
           // without this the element loses focus if it moves backwards in the list
           draggableEl.focus();
         }
@@ -2346,7 +2361,7 @@
     return handles;
   }
 
-  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
+  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
 
   /**
    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2362,6 +2377,7 @@
    * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
    * @property {boolean} [dropFromOthersDisabled]
    * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
+   * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
    * @property {object} [dropTargetStyle]
    * @property {string[]} [dropTargetClasses]
    * @property {function} [transformDraggedElement]
@@ -2410,6 +2426,7 @@
       morphDisabled = options.morphDisabled,
       dropFromOthersDisabled = options.dropFromOthersDisabled,
       zoneTabIndex = options.zoneTabIndex,
+      zoneItemTabIndex = options.zoneItemTabIndex,
       dropTargetStyle = options.dropTargetStyle,
       dropTargetClasses = options.dropTargetClasses,
       transformDraggedElement = options.transformDraggedElement,
@@ -2435,6 +2452,9 @@
     if (zoneTabIndex && !isInt(zoneTabIndex)) {
       throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
     }
+    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+      throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
+    }
   }
   function isInt(value) {
     return !isNaN(value) && function (x) {

package/dist/index.mjs

@@ -966,16 +966,27 @@ function svelteNodeClone(el) {
   } finally {
     _iterator.f();
   }
-  if (selects.length <= 0) {
-    return cloned;
-  }
-  var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
-  for (var i = 0; i < clonedSelects.length; i++) {
-    var select = clonedSelects[i];
-    var value = values[i];
-    var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
-    if (optionEl) {
-      optionEl.setAttribute("selected", true);
+  if (selects.length > 0) {
+    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
+    for (var i = 0; i < clonedSelects.length; i++) {
+      var select = clonedSelects[i];
+      var value = values[i];
+      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+      if (optionEl) {
+        optionEl.setAttribute("selected", true);
+      }
+    }
+  }
+  var elIsCanvas = el.tagName === "CANVAS";
+  var canvases = elIsCanvas ? [el] : _toConsumableArray(el.querySelectorAll("canvas"));
+  if (canvases.length > 0) {
+    var clonedCanvases = elIsCanvas ? [cloned] : _toConsumableArray(cloned.querySelectorAll("canvas"));
+    for (var _i = 0; _i < clonedCanvases.length; _i++) {
+      var canvas = canvases[_i];
+      var clonedCanvas = clonedCanvases[_i];
+      clonedCanvas.width = canvas.width;
+      clonedCanvas.height = canvas.height;
+      clonedCanvas.getContext("2d").drawImage(canvas, 0, 0);
     }
   }
   return cloned;
@@ -2112,6 +2123,7 @@ function dndzone$1(node, options) {
     type: undefined,
     dragDisabled: false,
     zoneTabIndex: 0,
+    zoneItemTabIndex: 0,
     dropFromOthersDisabled: false,
     dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
     dropTargetClasses: [],
@@ -2241,7 +2253,7 @@ function dndzone$1(node, options) {
     var children = Array.from(node.children);
     var focusedItemIdx = children.indexOf(draggableEl);
     focusedItem = draggableEl;
-    focusedItem.tabIndex = 0;
+    focusedItem.tabIndex = config.zoneItemTabIndex;
     focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
     focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
   }
@@ -2254,6 +2266,8 @@ function dndzone$1(node, options) {
       dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
       _ref2$zoneTabIndex = _ref2.zoneTabIndex,
       zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
+      _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
+      zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
       _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
       dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
       _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2266,6 +2280,7 @@ function dndzone$1(node, options) {
     config.dragDisabled = dragDisabled;
     config.dropFromOthersDisabled = dropFromOthersDisabled;
     config.zoneTabIndex = zoneTabIndex;
+    config.zoneItemTabIndex = zoneItemTabIndex;
     config.dropTargetStyle = dropTargetStyle;
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
@@ -2289,7 +2304,7 @@ function dndzone$1(node, options) {
     var _loop = function _loop(i) {
       var draggableEl = node.children[i];
       allDragTargets.add(draggableEl);
-      draggableEl.tabIndex = isDragging ? -1 : 0;
+      draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
       if (!autoAriaDisabled) {
         draggableEl.setAttribute("role", "listitem");
       }
@@ -2310,7 +2325,7 @@ function dndzone$1(node, options) {
         });
         // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0;
+        focusedItem.tabIndex = config.zoneItemTabIndex;
         // without this the element loses focus if it moves backwards in the list
         draggableEl.focus();
       }
@@ -2340,7 +2355,7 @@ function dndzone$1(node, options) {
   return handles;
 }
 
-var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
+var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
 
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2356,6 +2371,7 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
  * @property {boolean} [dropFromOthersDisabled]
  * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
+ * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -2404,6 +2420,7 @@ function validateOptions(options) {
     morphDisabled = options.morphDisabled,
     dropFromOthersDisabled = options.dropFromOthersDisabled,
     zoneTabIndex = options.zoneTabIndex,
+    zoneItemTabIndex = options.zoneItemTabIndex,
     dropTargetStyle = options.dropTargetStyle,
     dropTargetClasses = options.dropTargetClasses,
     transformDraggedElement = options.transformDraggedElement,
@@ -2429,6 +2446,9 @@ function validateOptions(options) {
   if (zoneTabIndex && !isInt(zoneTabIndex)) {
     throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
   }
+  if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+    throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
+  }
 }
 function isInt(value) {
   return !isNaN(value) && function (x) {

package/package.json

@@ -43,7 +43,7 @@
         "dist"
     ],
     "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.30",
+    "version": "0.9.32",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -17,6 +17,7 @@ import {toString} from "./helpers/util";
  * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
  * @property {boolean} [dropFromOthersDisabled]
  * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
+ * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -67,6 +68,7 @@ function validateOptions(options) {
         morphDisabled,
         dropFromOthersDisabled,
         zoneTabIndex,
+        zoneItemTabIndex,
         dropTargetStyle,
         dropTargetClasses,
         transformDraggedElement,
@@ -91,6 +93,9 @@ function validateOptions(options) {
     if (zoneTabIndex && !isInt(zoneTabIndex)) {
         throw new Error(`zoneTabIndex should be a number but instead it is a ${typeof zoneTabIndex}, ${toString(zoneTabIndex)}`);
     }
+    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+        throw new Error(`zoneItemTabIndex should be a number but instead it is a ${typeof zoneItemTabIndex}, ${toString(zoneItemTabIndex)}`);
+    }
 }
 
 function isInt(value) {

package/src/helpers/svelteNodeClone.js

@@ -17,17 +17,29 @@ export function svelteNodeClone(el) {
         values.push(select.value);
     }
 
-    if (selects.length <= 0) {
-        return cloned;
+    if (selects.length > 0) {
+        const clonedSelects = elIsSelect ? [cloned] : [...cloned.querySelectorAll("select")];
+        for (let i = 0; i < clonedSelects.length; i++) {
+            const select = clonedSelects[i];
+            const value = values[i];
+            const optionEl = select.querySelector(`option[value="${value}"`);
+            if (optionEl) {
+                optionEl.setAttribute("selected", true);
+            }
+        }
     }
 
-    const clonedSelects = elIsSelect ? [cloned] : [...cloned.querySelectorAll("select")];
-    for (let i = 0; i < clonedSelects.length; i++) {
-        const select = clonedSelects[i];
-        const value = values[i];
-        const optionEl = select.querySelector(`option[value="${value}"`);
-        if (optionEl) {
-            optionEl.setAttribute("selected", true);
+    const elIsCanvas = el.tagName === "CANVAS";
+    const canvases = elIsCanvas ? [el] : [...el.querySelectorAll("canvas")];
+    if(canvases.length > 0)
+    {
+        const clonedCanvases = elIsCanvas ? [cloned] : [...cloned.querySelectorAll("canvas")];
+        for (let i = 0; i < clonedCanvases.length; i++) {
+            const canvas = canvases[i];
+            const clonedCanvas = clonedCanvases[i];
+            clonedCanvas.width = canvas.width;
+            clonedCanvas.height = canvas.height;
+            clonedCanvas.getContext("2d").drawImage(canvas,0,0);
         }
     }
 

package/src/keyboardAction.js

@@ -157,6 +157,7 @@ export function dndzone(node, options) {
         type: undefined,
         dragDisabled: false,
         zoneTabIndex: 0,
+        zoneItemTabIndex: 0,
         dropFromOthersDisabled: false,
         dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses: [],
@@ -261,7 +262,7 @@ export function dndzone(node, options) {
         const children = Array.from(node.children);
         const focusedItemIdx = children.indexOf(draggableEl);
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0;
+        focusedItem.tabIndex = config.zoneItemTabIndex;
         focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
         focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
     }
@@ -271,6 +272,7 @@ export function dndzone(node, options) {
         type: newType = DEFAULT_DROP_ZONE_TYPE,
         dragDisabled = false,
         zoneTabIndex = 0,
+        zoneItemTabIndex = 0,
         dropFromOthersDisabled = false,
         dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses = [],
@@ -280,6 +282,7 @@ export function dndzone(node, options) {
         config.dragDisabled = dragDisabled;
         config.dropFromOthersDisabled = dropFromOthersDisabled;
         config.zoneTabIndex = zoneTabIndex;
+        config.zoneItemTabIndex = zoneItemTabIndex;
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
@@ -312,7 +315,7 @@ export function dndzone(node, options) {
         for (let i = 0; i < node.children.length; i++) {
             const draggableEl = node.children[i];
             allDragTargets.add(draggableEl);
-            draggableEl.tabIndex = isDragging ? -1 : 0;
+            draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
             if (!autoAriaDisabled) {
                 draggableEl.setAttribute("role", "listitem");
             }
@@ -328,7 +331,7 @@ export function dndzone(node, options) {
                 printDebug(() => ["focusing on", {i, focusedItemId}]);
                 // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
                 focusedItem = draggableEl;
-                focusedItem.tabIndex = 0;
+                focusedItem.tabIndex = config.zoneItemTabIndex;
                 // without this the element loses focus if it moves backwards in the list
                 draggableEl.focus();
             }