@hkdigital/lib-sveltekit 0.1.86 → 0.1.87

package/dist/components/drag-drop/Draggable.svelte

@@ -174,24 +174,22 @@ function startDrag(event) {
   dragOffsetX = event.clientX - rect.left;
   dragOffsetY = event.clientY - rect.top;
 
-  // Create drag data with your preferred structure
+  // Create drag data with draggableId included
   const dragData = {
+    draggableId,
     offsetX: dragOffsetX,
     offsetY: dragOffsetY,
     item,
     source,
-    group,
-    metadata: {
-      timestamp: Date.now()
-    }
+    group
   };
 
   // Set shared drag state
   dragState.start(draggableId, dragData);
 
-  // Set data transfer for browser drag and drop API
+  // Set minimal data transfer for browser drag and drop API
   event.dataTransfer.effectAllowed = 'move';
-  event.dataTransfer.setData('application/json', JSON.stringify(dragData));
+  event.dataTransfer.setData('application/json', JSON.stringify({ draggableId }));
 
   // Create the preview controller
   const previewController = new DragController(event);
@@ -308,7 +306,6 @@ function startDrag(event) {
 
 <div
   data-component="draggable"
-  data-id={draggableId}
   bind:this={draggableElement}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}

package/dist/components/drag-drop/DropZone.svelte

@@ -6,18 +6,11 @@
 
   import { GridLayers } from '../layout';
 
-  import {
-    // findDraggableSource,
-    getDraggableIdFromEvent
-    // processDropWithData
-  } from './util.js';
-
   import {
     READY,
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP
-    // DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
   /** @typedef {import('../../typedef').DragData} DragData */
@@ -92,8 +85,6 @@
 
   const dragState = createOrGetDragState(contextKey);
 
-  // console.debug('DropZone contextKey:', contextKey);
-
   let currentState = $state(READY);
   let dropzoneElement; // Reference to the dropzone DOM element
 
@@ -148,15 +139,47 @@
    * @returns {boolean}
    */
   function canAcceptDrop(data) {
-    // console.debug('canAcceptDrop', data, {group});
-
     if (disabled) return false;
     if (!data) return false;
-    if (data.group !== group) return false;
-    if (!accepts(data.item)) return false;
+    if (!accepts(data)) return false;
     return true;
   }
 
+  /**
+   * Get drag data from either drag state or handle file drops
+   * @param {DragEvent} event
+   * @returns {Object|null} The drag data, or null for file drops
+   */
+  function getDragData(event) {
+    // Check if this is a file drop
+    if (event.dataTransfer.types.includes('Files')) {
+      // Handle file drop - you can extend this based on your needs
+      console.log('File drop detected:', event.dataTransfer.files);
+      return null; // Return null to indicate this is not an internal drag
+    }
+
+    // Handle internal drag operations
+    try {
+      const jsonData = event.dataTransfer.getData('application/json');
+      if (jsonData) {
+        const transferData = JSON.parse(jsonData);
+        const draggableId = transferData.draggableId;
+
+        if (draggableId) {
+          // Get the original instance from drag state
+          const dragData = dragState.getDraggable(draggableId);
+          if (dragData) {
+            return dragData;
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error getting drag data:', error);
+    }
+
+    return null;
+  }
+
   /**
    * Handle drag enter with improved DOM traversal check
    * @param {DragEvent} event
@@ -171,28 +194,14 @@
     // Now we're over this dropzone
     isCurrentlyOver = true;
 
-    // Get the draggable ID from the event
-    const draggableId = getDraggableIdFromEvent(event);
-
-    if (draggableId) {
-      // Get the drag data for this specific draggable
-      const dragData = dragState.getDraggable(draggableId);
+    // Get the drag data
+    const dragData = getDragData(event);
 
-      // Update state based on acceptance
-      if (dragData) {
-        currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
-      } else {
-        currentState = DRAG_OVER;
-      }
+    // Update state based on acceptance
+    if (dragData) {
+      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
     } else {
-      // Fallback to the current drag data (for compatibility)
-      const dragData = dragState.current;
-
-      if (dragData) {
-        currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
-      } else {
-        currentState = DRAG_OVER;
-      }
+      currentState = DRAG_OVER;
     }
 
     // Notify listeners
@@ -214,17 +223,8 @@
       return;
     }
 
-    // Get the draggable ID from the event
-    const draggableId = getDraggableIdFromEvent(event);
-    let dragData;
-
-    if (draggableId) {
-      // Get the drag data for this specific draggable
-      dragData = dragState.getDraggable(draggableId);
-    } else {
-      // Fallback to the current drag data (for compatibility)
-      dragData = dragState.current;
-    }
+    // Get the drag data
+    const dragData = getDragData(event);
 
     // Re-evaluate acceptance
     if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
@@ -276,23 +276,20 @@
     isCurrentlyOver = false;
 
     try {
-      // First try to get the draggable ID from the event
-      const draggableId = getDraggableIdFromEvent(event);
-      let dragData;
-
-      if (draggableId) {
-        // Get the drag data from state using the draggable ID
-        dragData = dragState.getDraggable(draggableId);
+      // Check if this is a file drop first
+      if (event.dataTransfer.types.includes('Files')) {
+        // Handle file drops
+        const files = Array.from(event.dataTransfer.files);
+        console.log('Files dropped:', files);
+
+        // You can add custom file handling here
+        // For now, just reset state and return
+        currentState = READY;
+        return;
       }
 
-      // If we couldn't get it from the element attribute, try dataTransfer
-      if (!dragData) {
-        // Parse the JSON data from the dataTransfer object (only works during drop)
-        const jsonData = event.dataTransfer.getData('application/json');
-        if (jsonData) {
-          dragData = JSON.parse(jsonData);
-        }
-      }
+      // Get drag data for internal drag operations
+      const dragData = getDragData(event);
 
       // Check if we can accept this drop
       if (dragData && canAcceptDrop(dragData)) {
@@ -309,7 +306,6 @@
         const dropzoneRect = dropzoneElement.getBoundingClientRect();
 
         // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        // This combines your current approach with the border adjustment
         const offsetX =
           event.clientX -
           dropzoneRect.left -
@@ -322,16 +318,13 @@
           borderTopWidth -
           (dragData.offsetY ?? 0);
 
-        // console.debug("dragData", dragData);
-
         const dropResult = onDrop?.({
           event,
           offsetX,
           offsetY,
           zone,
           item: dragData.item,
-          source: dragData.source,
-          metadata: dragData.metadata
+          source: dragData.source
         });
 
         // Handle async or sync results

package/dist/typedef/drag.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {};
 export default _default;
 export type DragData = {
+    draggableId: string;
     offsetX: number;
     offsetY: number;
     /**
@@ -11,12 +12,4 @@ export type DragData = {
      * - Source identifier
      */
     source?: string;
-    /**
-     * - Drag group
-     */
-    group?: string;
-    /**
-     * - Additional metadata
-     */
-    metadata?: any;
 };

package/dist/typedef/drag.js

@@ -1,11 +1,10 @@
 /**
  * @typedef {Object} DragData
+ * @property {string} draggableId
  * @property {number} offsetX
  * @property {number} offsetY
  * @property {any} item - The item being dragged
  * @property {string} [source] - Source identifier
- * @property {string} [group] - Drag group
- * @property {any} [metadata] - Additional metadata
  */
 
 export default {}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.86",
+	"version": "0.1.87",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -57,8 +57,10 @@
 		"./typedef": "./dist/typedef/index.js"
 	},
 	"peerDependencies": {
+		"@eslint/js": "^9.27.0",
 		"@steeze-ui/heroicons": "^2.4.2",
 		"@sveltejs/kit": "^2.15.2",
+		"eslint-plugin-import": "^2.31.0",
 		"pino": "^9.6.0",
 		"pino-pretty": "^13.0.0",
 		"runed": "^0.23.0",
@@ -68,6 +70,7 @@
 		"zod": "^3.24.2"
 	},
 	"devDependencies": {
+		"@eslint/js": "^9.27.0",
 		"@playwright/test": "^1.50.1",
 		"@skeletonlabs/skeleton": "3.0.0-next.2",
 		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
@@ -82,6 +85,7 @@
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.21.0",
 		"eslint-config-prettier": "^10.0.2",
+		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-svelte": "^3.0.2",
 		"fake-indexeddb": "^6.0.0",
 		"globals": "^16.0.0",