@hkdigital/lib-core 0.4.65 → 0.4.67

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

@@ -18,7 +18,8 @@
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
-   *   accepts?: (dragData: any, target: { zone:string, group: string }) => boolean,
+   *   accepts?: (dragData: DragData, target: { zone:string, group: string }) => boolean,
+   *   enableDebug?: boolean,
    *   base?: string,
    *   classes?: string,
    *   minHeight?: string,
@@ -63,6 +64,7 @@
     group = 'default',
     disabled = false,
     accepts = () => true,
+    enableDebug = false,
     base = '',
     classes = '',
     minHeight = '',
@@ -86,7 +88,9 @@
   const dropZoneId = generateLocalId();
 
   let currentState = $state(READY);
-  let dropZoneElement = $state(null);
+
+  /** @type {HTMLElement|undefined} */
+  let dropZoneElement = $state();
 
   // Computed height classes based on mode
   let heightClasses = $derived.by(() => {
@@ -137,24 +141,91 @@
       dragState.registerDropZone(dropZoneId, {
         zone,
         group,
-        accepts: (dragData) => {
-          if (disabled) return false;
-          if (!dragData) return false;
+        accepts: (/** @type {DragData} */ dragData) => {
+          if (enableDebug) {
+            console.debug(
+              `[DropZone] accepts() called for zone="${zone}", group="${group}"`,
+              {
+                disabled,
+                dragData: dragData
+                  ? {
+                      group: dragData.group,
+                      source: dragData.source,
+                      item: dragData.item
+                    }
+                  : null
+              }
+            );
+          }
+
+          if (disabled) {
+            if (enableDebug) console.debug(`[DropZone] Rejected: disabled`);
+            return false;
+          }
+          if (!dragData) {
+            if (enableDebug) console.debug(`[DropZone] Rejected: no dragData`);
+            return false;
+          }
+
+          const result = accepts(dragData, { zone, group });
+
+          if (enableDebug) {
+            console.debug(`[DropZone] User accepts() result: ${result}`, {
+              dragGroup: dragData.group,
+              targetGroup: group,
+              groupsMatch: dragData.group === group
+            });
+          }
 
-          return accepts(dragData, { zone, group });
+          return result;
         },
-        onDragEnter: (detail) => {
+        onDragEnter: (
+          /** @type {{ event: DragEvent, zone: string, canDrop: boolean }} */ detail
+        ) => {
+          if (enableDebug) {
+            console.debug(
+              `[DropZone] onDragEnter zone="${zone}", group="${group}"`,
+              {
+                canDrop: detail.canDrop,
+                newState: detail.canDrop ? 'CAN_DROP' : 'CANNOT_DROP'
+              }
+            );
+          }
           currentState = detail.canDrop ? CAN_DROP : CANNOT_DROP;
           onDragEnter?.(detail);
         },
-        onDragOver: (detail) => {
+        onDragOver: (
+          /** @type {{ event: DragEvent, zone: string }} */ detail
+        ) => {
           onDragOver?.(detail);
         },
-        onDragLeave: (detail) => {
+        onDragLeave: (
+          /** @type {{ event: DragEvent, zone: string }} */ detail
+        ) => {
+          if (enableDebug) {
+            console.debug(
+              `[DropZone] onDragLeave zone="${zone}", group="${group}"`
+            );
+          }
           currentState = READY;
           onDragLeave?.(detail);
         },
         onDrop: async (dropData) => {
+          if (enableDebug) {
+            console.debug(
+              `[DropZone] onDrop zone="${zone}", group="${group}"`,
+              {
+                dropData: {
+                  zone: dropData.zone,
+                  source: dropData.source,
+                  item: dropData.item,
+                  x: dropData.x,
+                  y: dropData.y
+                }
+              }
+            );
+          }
+
           currentState = READY;
 
           try {
@@ -166,6 +237,10 @@
 
             const result = await onDrop?.(dropData);
 
+            if (enableDebug) {
+              console.debug(`[DropZone] onDrop completed successfully`);
+            }
+
             onDropEnd?.({
               event: dropData.drop.event,
               zone: dropData.zone,
@@ -175,13 +250,18 @@
 
             return result;
           } catch (error) {
+            if (enableDebug) {
+              console.debug(`[DropZone] onDrop failed:`, error);
+            }
+
             onDropEnd?.({
               event: dropData.drop.event,
               zone: dropData.zone,
               data: dropData.drag,
               success: false,
-              error
+              error: /** @type {Error} */ (error)
             });
+
             throw error;
           }
         },

package/dist/ui/components/drag-drop/DropZone.svelte.d.ts

@@ -6,10 +6,11 @@ type DropZone = {
         zone?: string | undefined;
         group?: string | undefined;
         disabled?: boolean | undefined;
-        accepts?: ((dragData: any, target: {
+        accepts?: ((dragData: DragData, target: {
             zone: string;
             group: string;
         }) => boolean) | undefined;
+        enableDebug?: boolean | undefined;
         base?: string | undefined;
         classes?: string | undefined;
         minHeight?: string | undefined;
@@ -53,10 +54,11 @@ declare const DropZone: import("svelte").Component<{
     zone?: string;
     group?: string;
     disabled?: boolean;
-    accepts?: (dragData: any, target: {
+    accepts?: (dragData: import("../../typedef.js").DragData, target: {
         zone: string;
         group: string;
     }) => boolean;
+    enableDebug?: boolean;
     base?: string;
     classes?: string;
     minHeight?: string;

package/dist/ui/components/drag-drop/DropZoneArea.svelte

@@ -6,7 +6,8 @@
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
-   *   accepts?: (item: any) => boolean,
+   *   accepts?: (dragData: import('./typedef.js').DragData, target: { zone: string, group: string }) => boolean,
+   *   enableDebug?: boolean,
    *   fillContainer?: boolean,
    *   aspectRatio?: string,
    *   overflow?: 'auto' | 'hidden' | 'visible' | 'scroll',
@@ -51,6 +52,7 @@
     group = 'default',
     disabled = false,
     accepts = () => true,
+    enableDebug = false,
     fillContainer = true,
     aspectRatio = '',
     overflow = 'hidden',
@@ -98,6 +100,7 @@
   {group}
   {disabled}
   {accepts}
+  {enableDebug}
   heightMode={fillContainer ? 'fill' : 'fixed'}
   {base}
   classes={combinedClasses}

package/dist/ui/components/drag-drop/DropZoneArea.svelte.d.ts

@@ -6,7 +6,11 @@ type DropZoneArea = {
         zone?: string | undefined;
         group?: string | undefined;
         disabled?: boolean | undefined;
-        accepts?: ((item: any) => boolean) | undefined;
+        accepts?: ((dragData: DragData, target: {
+            zone: string;
+            group: string;
+        }) => boolean) | undefined;
+        enableDebug?: boolean | undefined;
         fillContainer?: boolean | undefined;
         aspectRatio?: string | undefined;
         overflow?: "scroll" | "auto" | "hidden" | "visible" | undefined;
@@ -50,7 +54,11 @@ declare const DropZoneArea: import("svelte").Component<{
     zone?: string;
     group?: string;
     disabled?: boolean;
-    accepts?: (item: any) => boolean;
+    accepts?: (dragData: import("./typedef.js").DragData, target: {
+        zone: string;
+        group: string;
+    }) => boolean;
+    enableDebug?: boolean;
     fillContainer?: boolean;
     aspectRatio?: string;
     overflow?: "auto" | "hidden" | "visible" | "scroll";

package/dist/ui/components/drag-drop/DropZoneList.svelte

@@ -6,7 +6,8 @@
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
-   *   accepts?: (item: any) => boolean,
+   *   accepts?: (dragData: import('./typedef.js').DragData, target: { zone: string, group: string }) => boolean,
+   *   enableDebug?: boolean,
    *   minHeight?: string,
    *   maxHeight?: string,
    *   gap?: string,
@@ -52,6 +53,7 @@
     group = 'default',
     disabled = false,
     accepts = () => true,
+    enableDebug = false,
     minHeight = 'min-h-[200px]',
     maxHeight = '',
     gap = 'gap-2',
@@ -102,6 +104,7 @@
   {group}
   {disabled}
   {accepts}
+  {enableDebug}
   {minHeight}
   {maxHeight}
   heightMode="flexible"

package/dist/ui/components/drag-drop/DropZoneList.svelte.d.ts

@@ -6,7 +6,11 @@ type DropZoneList = {
         zone?: string | undefined;
         group?: string | undefined;
         disabled?: boolean | undefined;
-        accepts?: ((item: any) => boolean) | undefined;
+        accepts?: ((dragData: DragData, target: {
+            zone: string;
+            group: string;
+        }) => boolean) | undefined;
+        enableDebug?: boolean | undefined;
         minHeight?: string | undefined;
         maxHeight?: string | undefined;
         gap?: string | undefined;
@@ -51,7 +55,11 @@ declare const DropZoneList: import("svelte").Component<{
     zone?: string;
     group?: string;
     disabled?: boolean;
-    accepts?: (item: any) => boolean;
+    accepts?: (dragData: import("./typedef.js").DragData, target: {
+        zone: string;
+        group: string;
+    }) => boolean;
+    enableDebug?: boolean;
     minHeight?: string;
     maxHeight?: string;
     gap?: string;

package/dist/ui/components/drag-drop/typedef/drag.d.ts

@@ -12,6 +12,10 @@ export type DragData = {
      * - Source identifier
      */
     source?: string | undefined;
+    /**
+     * - Group identifier
+     */
+    group?: string | undefined;
 };
 export type SimulatedDragEvent = {
     type: "dragstart" | "dragover" | "dragleave" | "drop" | "dragend";

package/dist/ui/components/drag-drop/typedef/drag.js

@@ -5,6 +5,7 @@
  * @property {number} offsetY
  * @property {any} item - The item being dragged
  * @property {string} [source] - Source identifier
+ * @property {string} [group] - Group identifier
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.4.65",
+	"version": "0.4.67",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"