svelte-dnd-action - npm Package Compare versions

Comparing version 0.7.4 to 0.8.0

dist/index.d.ts

@@ -28,2 +28,3 @@ /**
     dropFromOthersDisabled?: boolean;
+    dropTargetClasses?: [string]
     dropTargetStyle?: Record<string, string>;
@@ -30,0 +31,0 @@ transformDraggedElement?: TransformDraggedElementFunction;

package.json

@@ -43,3 +43,3 @@ {
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.7.4",
+    "version": "0.8.0",
     "repository": {
@@ -46,0 +46,0 @@ "type": "git",

README.md

@@ -108,3 +108,3 @@ # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 | ------------------------- | -------------- | ------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------ |
-| `items` | Array<Object> | Yes. Each object in the array **has to have** an `id` property (key name can be overridden globally) with a unique value (within all dnd-zones of the same type) | N/A | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on) |
+| `items` | Array&lt;Object&gt; | Yes. Each object in the array **has to have** an `id` property (key name can be overridden globally) with a unique value (within all dnd-zones of the same type) | N/A | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on) |
 | `flipDurationMs` | Number | No | `0` | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations |
@@ -114,3 +114,4 @@ | `type` | String | No | Internal | dnd-zones that share the same type can have elements from one dragged into another. By default, all dnd-zones have the same type |
 | `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 |
-| `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 in to 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 |
+| `dropTargetStyle` | Object&lt;String&gt; | 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&lt;String&gt; | 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. |
@@ -117,0 +118,0 @@ | `autoAriaDisabled` | Boolean | No | `false` | Setting it to true will disable all the automatically added aria attributes and aria alerts (for example when the user starts/ stops dragging using the keyboard).<br /> **Use it only if you intend to implement your own custom instructions, roles and alerts.** In such a case, you might find the exported function `alertToScreenReader(string)` useful. |

src/action.js

@@ -12,4 +12,4 @@ import {dndzone as pointerDndZone} from "./pointerAction";
  *
- * @typedef {Object} Options
- * @property {Array} items - the list of items that was used to generate the children of the given node (the list used in the #each block
+ * @typedef {object} Options
+ * @property {array} items - the list of items that was used to generate the children of the given node (the list used in the #each block
  * @property {string} [type] - the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, default to a base type
@@ -19,4 +19,5 @@ * @property {number} [flipDurationMs] - if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict, defaults to zero
  * @property {boolean} [dropFromOthersDisabled]
- * @property {Object} [dropTargetStyle]
- * @property {Function} [transformDraggedElement]
+ * @property {object} [dropTargetStyle]
+ * @property {string[]} [dropTargetClasses]
+ * @property {function} [transformDraggedElement]
  * @param {HTMLElement} node - the element to enhance
@@ -52,2 +53,3 @@ * @param {Options} options
         dropTargetStyle,
+        dropTargetClasses,
         transformDraggedElement,
@@ -68,2 +70,5 @@ autoAriaDisabled,
     }
+    if (dropTargetClasses && !Array.isArray(dropTargetClasses)) {
+        throw new Error(`dropTargetClasses should be an array but instead it is a ${typeof dropTargetClasses}, ${toString(dropTargetClasses)}`);
+    }
 }

src/helpers/styler.js

@@ -153,4 +153,5 @@ import {SHADOW_ELEMENT_ATTRIBUTE_NAME} from "../constants";
  * @param {Function} getStyles - maps a dropzone to a styles object (so the styles can be removed)
+ * @param {Function} getClasses - maps a dropzone to a classList
  */
-export function styleActiveDropZones(dropZones, getStyles = () => {}) {
+export function styleActiveDropZones(dropZones, getStyles = () => {}, getClasses = () => []) {
     dropZones.forEach(dz => {
@@ -161,2 +162,3 @@ const styles = getStyles(dz);
         });
+        getClasses(dz).forEach(c => dz.classList.add(c));
     });
@@ -169,4 +171,5 @@ }
  * @param {Function} getStyles - maps a dropzone to a styles object
+ * @param {Function} getClasses - maps a dropzone to a classList
  */
-export function styleInactiveDropZones(dropZones, getStyles = () => {}) {
+export function styleInactiveDropZones(dropZones, getStyles = () => {}, getClasses = () => []) {
     dropZones.forEach(dz => {
@@ -177,2 +180,3 @@ const styles = getStyles(dz);
         });
+        getClasses(dz).forEach(c => dz.classList.contains(c) && dz.classList.remove(c));
     });
@@ -179,0 +183,0 @@ }

src/helpers/util.js

@@ -44,1 +44,19 @@ /**
 }
+
+/**
+ * Shallow compares two arrays
+ * @param arrA
+ * @param arrB
+ * @return {boolean} - whether the arrays are shallow equal
+ */
+export function areArraysShallowEqualSameOrder(arrA, arrB) {
+    if (arrA.length !== arrB.length) {
+        return false;
+    }
+    for (let i = 0; i < arrA.length; i++) {
+        if (arrA[i] !== arrB[i]) {
+            return false;
+        }
+    }
+    return true;
+}

src/keyboardAction.js

@@ -136,3 +136,7 @@ import {decrementActiveDropZoneCount, incrementActiveDropZoneCount, ITEM_ID_KEY, SOURCES, TRIGGERS} from "./constants";
     }
-    styleInactiveDropZones(typeToDropZones.get(draggedItemType), dz => dzToConfig.get(dz).dropTargetStyle);
+    styleInactiveDropZones(
+        typeToDropZones.get(draggedItemType),
+        dz => dzToConfig.get(dz).dropTargetStyle,
+        dz => dzToConfig.get(dz).dropTargetClasses
+    );
     focusedItem = null;
@@ -228,3 +232,7 @@ focusedItemId = null;
         const dropTargets = Array.from(typeToDropZones.get(config.type)).filter(dz => dz === focusedDz || !dzToConfig.get(dz).dropFromOthersDisabled);
-        styleActiveDropZones(dropTargets, dz => dzToConfig.get(dz).dropTargetStyle);
+        styleActiveDropZones(
+            dropTargets,
+            dz => dzToConfig.get(dz).dropTargetStyle,
+            dz => dzToConfig.get(dz).dropTargetClasses
+        );
         if (!config.autoAriaDisabled) {
@@ -231,0 +239,0 @@ let msg = `Started dragging item ${focusedItemLabel}. Use the arrow keys to move it within its list ${focusedDzLabel}`;

src/pointerAction.js

@@ -34,3 +34,3 @@ import {
 } from "./helpers/dispatcher";
-import {areObjectsShallowEqual, toString} from "./helpers/util";
+import {areArraysShallowEqualSameOrder, areObjectsShallowEqual, toString} from "./helpers/util";
 import {getBoundingRectNoTransforms} from "./helpers/intersection";
@@ -233,3 +233,7 @@
     let {items, type} = dzToConfig.get(shadowElDropZone);
-    styleInactiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
+    styleInactiveDropZones(
+        typeToDropZones.get(type),
+        dz => dzToConfig.get(dz).dropTargetStyle,
+        dz => dzToConfig.get(dz).dropTargetClasses
+    );
     let shadowElIdx = findShadowElementIdx(items);
@@ -302,2 +306,3 @@ // the handler might remove the shadow element, ex: dragula like copy on drag
         dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
+        dropTargetClasses: [],
         transformDraggedElement: () => {}
@@ -396,3 +401,4 @@ };
             Array.from(typeToDropZones.get(config.type)).filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled),
-            dz => dzToConfig.get(dz).dropTargetStyle
+            dz => dzToConfig.get(dz).dropTargetStyle,
+            dz => dzToConfig.get(dz).dropTargetClasses
         );
@@ -420,2 +426,3 @@
         dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
+        dropTargetClasses = [],
         transformDraggedElement = () => {}
@@ -435,7 +442,21 @@ }) {
         // realtime update for dropTargetStyle
-        if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && !areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle)) {
-            styleInactiveDropZones([node], () => config.dropTargetStyle);
-            styleActiveDropZones([node], () => dropTargetStyle);
+        if (
+            isWorkingOnPreviousDrag &&
+            !finalizingPreviousDrag &&
+            (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) ||
+                !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))
+        ) {
+            styleInactiveDropZones(
+                [node],
+                () => config.dropTargetStyle,
+                () => dropTargetClasses
+            );
+            styleActiveDropZones(
+                [node],
+                () => dropTargetStyle,
+                () => dropTargetClasses
+            );
         }
         config.dropTargetStyle = dropTargetStyle;
+        config.dropTargetClasses = [...dropTargetClasses];
 
@@ -445,5 +466,13 @@ // realtime update for dropFromOthersDisabled
             if (dropFromOthersDisabled) {
-                styleInactiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
+                styleInactiveDropZones(
+                    [node],
+                    dz => dzToConfig.get(dz).dropTargetStyle,
+                    dz => dzToConfig.get(dz).dropTargetClasses
+                );
             } else {
-                styleActiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
+                styleActiveDropZones(
+                    [node],
+                    dz => dzToConfig.get(dz).dropTargetStyle,
+                    dz => dzToConfig.get(dz).dropTargetClasses
+                );
             }
@@ -450,0 +479,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

258383

increased by3.01%

Lines of code

6070

increased by3.44%

Number of lines in readme file

281

increased by0.36%

No dependency changes