From 633431d8a38bab5b757d309fce39ce7451719b29 Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 22:45:37 +0530 Subject: [PATCH 1/7] update README and package files for Cloudflare adapter and version bump --- README.md | 2 +- package-lock.json | 18 ++---------------- package.json | 1 - 3 files changed, 3 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index fe06905..fe03b5f 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ npm install @thisux/sveltednd ```typescript import { draggable, droppable, type DragDropState } from '@thisux/sveltednd'; -import '@thisux/sveltednd/styles.css'; +import '@thisux/sveltednd/styles.css'; // optional // Create a list of items let items = $state(['Item 1', 'Item 2', 'Item 3']); diff --git a/package-lock.json b/package-lock.json index 18a4b9d..d5bab68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,14 @@ { "name": "@thisux/sveltednd", - "version": "0.0.4", + "version": "0.0.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@thisux/sveltednd", - "version": "0.0.4", + "version": "0.0.6", "license": "MIT", "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-cloudflare": "^4.7.4", "@sveltejs/kit": "^2.0.0", "@sveltejs/package": "^2.0.0", @@ -1225,19 +1224,6 @@ "win32" ] }, - "node_modules/@sveltejs/adapter-auto": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.3.1.tgz", - "integrity": "sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "import-meta-resolve": "^4.1.0" - }, - "peerDependencies": { - "@sveltejs/kit": "^2.0.0" - } - }, "node_modules/@sveltejs/adapter-cloudflare": { "version": "4.7.4", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-4.7.4.tgz", diff --git a/package.json b/package.json index fc98129..2750deb 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "svelte": "^5.0.0" }, "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-cloudflare": "^4.7.4", "@sveltejs/kit": "^2.0.0", "@sveltejs/package": "^2.0.0", From e5a5eb9ae8ad2a1356e6ccad453aea34356dfde2 Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 22:45:49 +0530 Subject: [PATCH 2/7] bump version to 0.0.7 in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2750deb..856f615 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thisux/sveltednd", - "version": "0.0.6", + "version": "0.0.7", "private": false, "description": "A lightweight, flexible drag and drop library for Svelte 5 applications.", "author": "sanju ", From 8086412460fec6df058e06a522610746681d41eb Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 23:31:40 +0530 Subject: [PATCH 3/7] refactor: enhance drag-and-drop functionality with typed items and validation --- README.md | 96 +++++++++++++++++++++++++++------- package.json | 2 +- src/lib/actions/draggable.ts | 11 ++-- src/lib/actions/droppable.ts | 16 +++--- src/routes/+page.svelte | 4 ++ src/routes/nested/+page.svelte | 2 +- 6 files changed, 96 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index fe03b5f..6bac584 100644 --- a/README.md +++ b/README.md @@ -145,9 +145,18 @@ interface DragDropState {
+ {#each items as item} +
+ {item.name} +
+ {/each} +
``` ### Additional Examples diff --git a/package.json b/package.json index 856f615..fd7ecbb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thisux/sveltednd", - "version": "0.0.7", + "version": "0.0.8", "private": false, "description": "A lightweight, flexible drag and drop library for Svelte 5 applications.", "author": "sanju ", diff --git a/src/lib/actions/draggable.ts b/src/lib/actions/draggable.ts index 636a280..fc420ea 100644 --- a/src/lib/actions/draggable.ts +++ b/src/lib/actions/draggable.ts @@ -1,11 +1,10 @@ import { dndState } from '$lib/stores/dnd.svelte.js'; -import type { DragDropOptions } from '$lib/types/index.js'; +import type { DragDropOptions, DragDropState } from '$lib/types/index.js'; -export function draggable(node: HTMLElement, options: DragDropOptions) { +export function draggable(node: HTMLElement, options: DragDropOptions) { function handleDragStart(event: DragEvent) { if (options.disabled) return; - // Update state using assignment (Svelte 5 style) dndState.isDragging = true; dndState.draggedItem = options.dragData; dndState.sourceContainer = options.container; @@ -17,12 +16,12 @@ export function draggable(node: HTMLElement, options: DragDropOptions) { } node.classList.add('dragging'); - options.callbacks?.onDragStart?.(dndState); + options.callbacks?.onDragStart?.(dndState as DragDropState); } function handleDragEnd() { node.classList.remove('dragging'); - options.callbacks?.onDragEnd?.(dndState); + options.callbacks?.onDragEnd?.(dndState as DragDropState); // Reset state dndState.isDragging = false; @@ -36,7 +35,7 @@ export function draggable(node: HTMLElement, options: DragDropOptions) { node.addEventListener('dragend', handleDragEnd); return { - update(newOptions: DragDropOptions) { + update(newOptions: DragDropOptions) { options = newOptions; node.draggable = !options.disabled; }, diff --git a/src/lib/actions/droppable.ts b/src/lib/actions/droppable.ts index 132b40a..a59f50e 100644 --- a/src/lib/actions/droppable.ts +++ b/src/lib/actions/droppable.ts @@ -1,14 +1,14 @@ import { dndState } from '$lib/stores/dnd.svelte.js'; -import type { DragDropOptions } from '$lib/types/index.js'; +import type { DragDropOptions, DragDropState } from '$lib/types/index.js'; -export function droppable(node: HTMLElement, options: DragDropOptions) { +export function droppable(node: HTMLElement, options: DragDropOptions) { function handleDragEnter(event: DragEvent) { if (options.disabled) return; event.preventDefault(); dndState.targetContainer = options.container; node.classList.add('drag-over'); - options.callbacks?.onDragEnter?.(dndState); + options.callbacks?.onDragEnter?.(dndState as DragDropState); } function handleDragLeave(event: DragEvent) { @@ -18,7 +18,7 @@ export function droppable(node: HTMLElement, options: DragDropOptions) { if (!node.contains(target)) { dndState.targetContainer = null; node.classList.remove('drag-over'); - options.callbacks?.onDragLeave?.(dndState); + options.callbacks?.onDragLeave?.(dndState as DragDropState); } } @@ -30,7 +30,7 @@ export function droppable(node: HTMLElement, options: DragDropOptions) { event.dataTransfer.dropEffect = 'move'; } - options.callbacks?.onDragOver?.(dndState); + options.callbacks?.onDragOver?.(dndState as DragDropState); } async function handleDrop(event: DragEvent) { @@ -41,11 +41,11 @@ export function droppable(node: HTMLElement, options: DragDropOptions) { try { if (event.dataTransfer) { - const dragData = JSON.parse(event.dataTransfer.getData('text/plain')); + const dragData = JSON.parse(event.dataTransfer.getData('text/plain')) as T; dndState.draggedItem = dragData; } - await options.callbacks?.onDrop?.(dndState); + await options.callbacks?.onDrop?.(dndState as DragDropState); } catch (error) { console.error('Drop handling failed:', error); } @@ -57,7 +57,7 @@ export function droppable(node: HTMLElement, options: DragDropOptions) { node.addEventListener('drop', handleDrop); return { - update(newOptions: DragDropOptions) { + update(newOptions: DragDropOptions) { options = newOptions; }, diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b9a59b3..aa5e114 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -93,7 +93,9 @@
@@ -110,7 +112,9 @@ {#each items as task (task.id)}
handleItemDrop(group.id, state) + onDrop: (state: DragDropState) => handleItemDrop(group.id, state) } }} > From a7d9fbe80675390f719bd2e14bec78cd4b474b06 Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 23:35:01 +0530 Subject: [PATCH 4/7] fix: update npm version badge in README for improved display --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6bac584..d24284c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # SvelteDnD -[![npm version](https://badge.fury.io/js/%40thisux%2Fsveltednd.svg)](https://www.npmjs.com/package/@thisux/sveltednd) +[![npm version](https://img.shields.io/npm/v/@thisux/sveltednd.svg)](https://www.npmjs.com/package/@thisux/sveltednd) A lightweight drag and drop library for Svelte 5 applications. Built with TypeScript and Svelte's new runes system. From c89f8c06f40abc3a7216b7ae06f4d14082985af5 Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 23:35:29 +0530 Subject: [PATCH 5/7] bump version to 0.0.9 in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fd7ecbb..5db884e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thisux/sveltednd", - "version": "0.0.8", + "version": "0.0.9", "private": false, "description": "A lightweight, flexible drag and drop library for Svelte 5 applications.", "author": "sanju ", From 61789c8e8462313f9fc7adf64679db94bfff017d Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 23:37:06 +0530 Subject: [PATCH 6/7] fix: update README formatting and improve code readability --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index d24284c..4b1535c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # SvelteDnD -[![npm version](https://img.shields.io/npm/v/@thisux/sveltednd.svg)](https://www.npmjs.com/package/@thisux/sveltednd) - A lightweight drag and drop library for Svelte 5 applications. Built with TypeScript and Svelte's new runes system. ## Installation @@ -264,19 +262,21 @@ interface DragDropState { // Handle the drop action // For example, move the item to a different category or list - items = items.map(item => + items = items.map((item) => item.id === draggedItem.id ? { ...item, category: targetContainer } : item ); } -
+
{#each items as item}
{item.name} From bdab8a7088e8d499cd27afd47d2c61ad1a270fb3 Mon Sep 17 00:00:00 2001 From: SpikeySanju Date: Sun, 10 Nov 2024 23:37:38 +0530 Subject: [PATCH 7/7] bump version to 0.0.10 in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5db884e..c333bef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thisux/sveltednd", - "version": "0.0.9", + "version": "0.0.10", "private": false, "description": "A lightweight, flexible drag and drop library for Svelte 5 applications.", "author": "sanju ",