svelte-dnd-action - npm Package Compare versions

Comparing version 0.9.39 to 0.9.40

dist/index.d.ts

@@ -0,1 +1,3 @@
+import type {ActionReturn} from "svelte/action";
+
 /**
@@ -7,7 +9,9 @@ * A custom action to turn any container to a dnd zone and all of its direct children to draggables
  */
-export declare function dndzone(
+export declare function dndzone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
+
+export declare function dndzone<T extends Item>(
     node: HTMLElement,
-    options: Options
+    options: Options<T>
 ): {
-    update: (newOptions: Options) => void;
+    update: (newOptions: Options<T>) => void;
     destroy: () => void;
@@ -23,4 +27,4 @@ };
 export declare type Item = Record<string, any>;
-export interface Options {
-    items: Item[]; // the list of items that was used to generate the children of the given node
+export interface Options<T extends Item = Item> {
+    items: T[]; // the list of items that was used to generate the children of the given node
     type?: string; // the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, defaults to a base type
@@ -40,2 +44,9 @@ flipDurationMs?: number; // if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict
 
+export interface DndZoneAttributes<T> {
+    "on:consider"?: (e: CustomEvent<DndEvent<T>>) => void;
+    "on:finalize"?: (e: CustomEvent<DndEvent<T>>) => void;
+    onconsider?: (e: CustomEvent<DndEvent<T>>) => void;
+    onfinalize?: (e: CustomEvent<DndEvent<T>>) => void;
+}
+
 /**
@@ -42,0 +53,0 @@ * Will make the screen reader alert the provided text to the user

package.json

 {
     "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.39",
+    "version": "0.9.40",
     "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.md

@@ -255,6 +255,8 @@ # 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)
 
-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):
+#### Setup (Optional)
 
-#### Svelte 3 or below
+TypeScript support has been added since version 0.9.40 and you do not need to set up any custom typings. However, in case you are using some older version or face some types issue, 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):
 
+##### Svelte 3 or below
+
 ```typescript
@@ -271,3 +273,3 @@ declare type Item = import("svelte-dnd-action").Item;
 
-#### Svelte 4:
+##### Svelte 4:
 
@@ -287,13 +289,14 @@ ```typescript
 
-> 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:
+> 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');
->       },
->     },
->   },
+>     kit: {
+>         typescript: {
+>             config(config) {
+>                 // This path is relative to the ".svelte-kit" folder
+>                 config.include.push("../global.d.ts");
+>             }
+>         }
+>     }
 > };
@@ -300,0 +303,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

297447

increased by0.24%

Lines of code

6892

increased by0.12%

Number of lines in readme file

401

increased by0.75%

No dependency changes