@hkdigital/lib-sveltekit 0.1.88 → 0.1.90

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

@@ -86,9 +86,9 @@
   const dragState = createOrGetDragState(contextKey);
 
   let currentState = $state(READY);
-  let dropzoneElement; // Reference to the dropzone DOM element
+  let dropZoneElement; // Reference to the drop zone DOM element
 
-  // We'll use a flag to track if we're currently in the dropzone
+  // We'll use a flag to track if we're currently in the drop zone
   // without relying on a counter approach
   let isCurrentlyOver = $state(false);
 
@@ -191,7 +191,7 @@
     // If we're already in a drag-over state, don't reset anything
     if (isCurrentlyOver) return;
 
-    // Now we're over this dropzone
+    // Now we're over this drop zone
     isCurrentlyOver = true;
 
     // Get the drag data
@@ -216,7 +216,7 @@
     // Prevent default to allow drop
     event.preventDefault();
 
-    // If we're not currently over this dropzone (despite dragover firing),
+    // If we're not currently over this drop zone (despite dragover firing),
     // treat it as an enter event
     if (!isCurrentlyOver) {
       handleDragEnter(event);
@@ -247,15 +247,15 @@
    * @param {DragEvent} event
    */
   function handleDragLeave(event) {
-    // We need to check if we're actually leaving the dropzone or just
-    // entering a child element within the dropzone
+    // We need to check if we're actually leaving the drop zone or just
+    // entering a child element within the drop zone
 
     // relatedTarget is the element we're moving to
     const relatedTarget = event.relatedTarget;
 
-    // If relatedTarget is null or outside our dropzone, we're truly leaving
+    // If relatedTarget is null or outside our drop zone, we're truly leaving
     const isActuallyLeaving =
-      !relatedTarget || !dropzoneElement.contains(relatedTarget);
+      !relatedTarget || !dropZoneElement.contains(relatedTarget);
 
     if (isActuallyLeaving) {
       isCurrentlyOver = false;
@@ -296,35 +296,41 @@
         // Notify listener
         onDropStart?.({ event, zone, data: dragData });
 
-        const style = window.getComputedStyle(dropzoneElement);
+        const style = window.getComputedStyle(dropZoneElement);
 
         // Parse border widths from computed style
         const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
         const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
 
-        // Get dropzone rectangle
-        const dropzoneRect = dropzoneElement.getBoundingClientRect();
+        // Get drop zone rectangle
+        const dropZoneRect = dropZoneElement.getBoundingClientRect();
 
         // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        const offsetX =
+        const dropOffsetX =
           event.clientX -
-          dropzoneRect.left -
-          borderLeftWidth -
-          (dragData.offsetX ?? 0);
+          dropZoneRect.left -
+          borderLeftWidth;
 
-        const offsetY =
+        const dropOffsetY =
           event.clientY -
-          dropzoneRect.top -
-          borderTopWidth -
-          (dragData.offsetY ?? 0);
+          dropZoneRect.top -
+          borderTopWidth;
+
+        const x = dropOffsetX - (dragData.offsetX ?? 0);
+        const y = dropOffsetY - (dragData.offsetY ?? 0);
 
         const dropResult = onDrop?.({
-          event,
-          offsetX,
-          offsetY,
           zone,
+          source: dragData.source,
           item: dragData.item,
-          source: dragData.source
+          x,
+          y,
+          drag: dragData,
+          drop: {
+            offsetX: dropOffsetX,
+            offsetY: dropOffsetY,
+            event
+          }
         });
 
         // Handle async or sync results
@@ -350,8 +356,8 @@
 </script>
 
 <div
-  data-component="dropzone"
-  bind:this={dropzoneElement}
+  data-component="drop-zone"
+  bind:this={dropZoneElement}
   ondragenter={handleDragEnter}
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}

package/dist/themes/hkdev/components/drag-drop/{dropzone.css → drop-zone.css}

@@ -1,6 +1,6 @@
-@define-mixin component-dropzone {
+@define-mixin component-drop-zone {
   /* Visual styling and customizable aspects */
-  [data-component='dropzone'] {
+  [data-component='drop-zone'] {
     /*min-height: 100px;*/
     border: 1px dashed rgb(var(--color-surface-400));
     border-radius: var(--theme-rounded-container);

package/dist/themes/hkdev/components.css

@@ -12,7 +12,7 @@
 /*@import "./components/buttons/skip-button.css";*/
 
 @import './components/drag-drop/draggable.css';
-@import './components/drag-drop/dropzone.css';
+@import './components/drag-drop/drop-zone.css';
 
 /* Icons */
 @import './components/icons/icon-steeze.css';
@@ -40,7 +40,7 @@
   /*  @mixin buttons-skip-button;*/
 
   @mixin component-draggable;
-  @mixin component-dropzone;
+  @mixin component-drop-zone;
 
   @mixin component-icon-steeze;
 

package/dist/typedef/drop.d.ts

@@ -1,11 +1,15 @@
 declare const _default: {};
 export default _default;
 export type DropData = {
-    event: DragEvent;
-    offsetX: number;
-    offsetY: number;
+    x: number;
+    y: number;
     zone: string;
-    item: any;
     source: string;
-    metadata?: any;
+    item: any;
+    drag: import("./drag").DragData;
+    drop: {
+        offsetX: number;
+        offsetY: number;
+        event: DragEvent;
+    };
 };

package/dist/typedef/drop.js

@@ -1,12 +1,12 @@
 /**
  * @typedef {Object} DropData
- * @property {DragEvent} event
- * @property {number} offsetX
- * @property {number} offsetY
+ * @property {number} x
+ * @property {number} y
  * @property {string} zone
- * @property {any} item
  * @property {string} source
- * @property {any} [metadata]
+ * @property {any} item
+ * @property {import('./drag').DragData} drag
+ * @property {{offsetX: number, offsetY: number, event: DragEvent}} drop
  */
 
 export default {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.88",
+	"version": "0.1.90",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"