svelte-dnd-action - npm Package Compare versions

Comparing version 0.6.13 to 0.6.14

package.json

@@ -6,2 +6,3 @@ {
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
@@ -22,3 +23,4 @@ "test": "cypress run",
     "rollup": "^1.20.0",
-    "rollup-plugin-babel": "^4.3.2"
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-copy": "^3.3.0"
   },
@@ -39,3 +41,3 @@ "keywords": [
   "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.6.13",
+  "version": "0.6.14",
   "repository": {
@@ -42,0 +44,0 @@ "type": "git",

README.md

@@ -186,2 +186,54 @@ # 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)
 
+### Typescript
+If you are using Typescript, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
+```typescript
+declare type DndEvent = import('svelte-dnd-action').DndEvent;
+declare namespace svelte.JSX {
+    interface HTMLAttributes<T> {
+        onconsider?:  (event: CustomEvent<DndEvent> & { target: EventTarget & T }) => void;
+        onfinalize?:  (event: CustomeEvent<DndEvent> & { target: EventTarget & T }) => void;
+    }
+}
+```
+You may need to edit `tsconfig.json` to include `global.d.ts` if it doesn't already: "include": ["src/**/*", "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
+<style>
+	section {
+		width: 12em;
+		padding: 1em;
+		height: 7.5em;
+	}
+	div {
+		height: 1.5em;
+		width: 10em;
+		text-align: center;
+		border: 1px solid black;
+		margin: 0.2em;
+		padding: 0.3em;
+	}
+</style>
+<script lang="ts">
+    import {dndzone} from 'svelte-dnd-action';
+	import {flip} from 'svelte/animate';
+	
+	const flipDurationMs = 200;
+	function handleSort(e: CustomEvent<DndEvent>) {
+        items = e.detail.items as {id: number, title:string}[];
+	}
+	
+	let items = [
+		{id:1, title: 'I'},
+		{id:2, title: 'Am'},
+		{id:3, title: 'Yoda'}
+	];
+</script>
+<section use:dndzone={{items, flipDurationMs}} on:consider={handleSort} on:finalize={handleSort}>
+	{#each items as item(item.id)}
+		<div animate:flip={{duration:flipDurationMs}}>
+			{item.title}	
+		</div>
+	{/each}
+</section>
+```
 
@@ -188,0 +240,0 @@ ### Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/isaacHagoel/svelte-dnd-action/issues)

src/action.js

@@ -42,6 +42,15 @@ import {dndzone as pointerDndZone} from "./pointerAction";
 function validateOptions(options) {
+    /*eslint-disable*/
     const {
         items,
+        flipDurationMs,
+        type,
+        dragDisabled,
+        dropFromOthersDisabled,
+        dropTargetStyle,
+        transformDraggedElement,
+        autoAriaDisabled,
         ...rest
     } = options;
+    /*eslint-enable*/
     if (Object.keys(rest).length > 0) {
@@ -48,0 +57,0 @@ console.warn(`dndzone will ignore unknown options`, rest);

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

227000

increased by2.69%

Number of package files

20

increased by5.26%

Lines of code

5179

increased by1.73%

Number of lines in readme file

243

increased by27.23%

Worsened metrics

Dev dependency count

9

increased by12.5%

No dependency changes