@hkdigital/lib-sveltekit 0.2.3 → 0.2.5

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

@@ -8,8 +8,7 @@
     IDLE,
     DRAGGING,
     DRAG_PREVIEW,
-    DROPPING,
-    DRAG_DISABLED
+    DROPPING
   } from '../../constants/state-labels/drag-states.js';
 
 
@@ -99,14 +98,24 @@
   let customPreviewSet = $state(false);
   let elementRect = $state(null);
 
-  // Computed state object for CSS classes
-  let stateObject = $derived({
-    idle: currentState === IDLE,
-    dragging: currentState === DRAGGING,
-    'drag-preview': currentState === DRAG_PREVIEW,
-    dropping: currentState === DROPPING,
-    'drag-disabled': disabled || !canDrag(item)
-  });
+// Track if current draggable can drop in the active zone
+let canDropInActiveZone = $derived.by(() => {
+  if (currentState !== DRAGGING || !dragState.activeDropZone) return false;
+
+  const activeZone = dragState.dropZones.get(dragState.activeDropZone);
+  return activeZone?.canDrop || false;
+});
+
+// Computed state object for CSS classes
+let stateObject = $derived({
+  idle: currentState === IDLE,
+  dragging: currentState === DRAGGING,
+  'drag-preview': currentState === DRAG_PREVIEW,
+  dropping: currentState === DROPPING,
+  'drag-disabled': disabled || !canDrag(item),
+  'can-drop': currentState === DRAGGING && canDropInActiveZone,
+  'cannot-drop': currentState === DRAGGING && dragState.activeDropZone && !canDropInActiveZone
+});
 
   let stateClasses = $derived(toStateClasses(stateObject));
 
@@ -465,6 +474,7 @@ function handleTouchMove(event) {
 {#if draggingSnippet && showPreview && elementRect}
   <div
     data-companion="drag-preview-follower"
+    class={stateClasses}
     style="position: fixed; z-index: 9999; pointer-events: none;"
     style:left="{previewX}px"
     style:top="{previewY}px"

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

@@ -18,7 +18,7 @@
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
-   *   accepts?: (item: any) => boolean,
+   *   accepts?: (dragData: any, target: { zone:string, group: string }) => boolean,
    *   base?: string,
    *   classes?: string,
    *   minHeight?: string,
@@ -140,7 +140,8 @@
         accepts: (dragData) => {
           if (disabled) return false;
           if (!dragData) return false;
-          return accepts(dragData);
+
+          return accepts(dragData, { zone, group });
         },
         onDragEnter: (detail) => {
           currentState = detail.canDrop ? CAN_DROP : CANNOT_DROP;
@@ -197,8 +198,8 @@
   // Monitor drag state to update preview
   let showPreview = $derived(
     dragState.activeDropZone === dropZoneId &&
-    currentState === CAN_DROP &&
-    dropPreviewSnippet
+      currentState === CAN_DROP &&
+      dropPreviewSnippet
   );
 </script>
 
@@ -216,7 +217,7 @@
         class:relative={heightMode === 'flexible'}
         class:w-full={heightMode === 'flexible'}
       > -->
-        {@render children()}
+      {@render children()}
       <!-- </div> -->
     {/if}
 
@@ -229,13 +230,11 @@
 </div>
 
 <style>
-  [data-component="drop-zone"] {
+  [data-component='drop-zone'] {
     -webkit-tap-highlight-color: transparent;
-
-
   }
 
-/*  [data-layer='content']:not(.relative) {
+  /*  [data-layer='content']:not(.relative) {
     position: absolute;
     left: 0;
     right: 0;

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

@@ -6,7 +6,10 @@ type DropZone = {
         zone?: string;
         group?: string;
         disabled?: boolean;
-        accepts?: (item: any) => boolean;
+        accepts?: (dragData: any, target: {
+            zone: string;
+            group: string;
+        }) => boolean;
         base?: string;
         classes?: string;
         minHeight?: string;
@@ -50,7 +53,10 @@ declare const DropZone: import("svelte").Component<{
     zone?: string;
     group?: string;
     disabled?: boolean;
-    accepts?: (item: any) => boolean;
+    accepts?: (dragData: any, target: {
+        zone: string;
+        group: string;
+    }) => boolean;
     base?: string;
     classes?: string;
     minHeight?: string;

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -7,10 +7,9 @@
   }
 
   [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
-    cursor: grab;  /* Open hand when hovering draggable items */
+    cursor: grab; /* Open hand when hovering draggable items */
   }
 
-
   /*[data-component='draggable']:active {
     cursor: grabbing;
   }*/
@@ -42,6 +41,20 @@
     filter: grayscale(0.5);
   }
 
+  /* Preview follower */
+
+  [data-companion='drag-preview-follower'] {
+    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
+  }
+
+  [data-companion='drag-preview-follower'].state-can-drop {
+    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
+  }
+
+  [data-companion='drag-preview-follower'].state-cannot-drop {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  }
+
   /* Animations */
   @keyframes drop-finish {
     0% {
@@ -57,8 +70,4 @@
       opacity: 1;
     }
   }
-
-  & [data-companion="drag-preview-follower"] {
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-  }
 }

package/package.json

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