@hkdigital/lib-sveltekit 0.1.91 → 0.1.93

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

@@ -1,11 +1,8 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
   import { toStateClasses } from '../../util/design-system/index.js';
-
   import { createOrGetDragState } from './drag-state.svelte.js';
-
   import { GridLayers } from '../layout';
-
+  import { generateLocalId } from '../../util/unique';
   import {
     READY,
     DRAG_OVER,
@@ -24,8 +21,9 @@
    *   accepts?: (item: any) => boolean,
    *   base?: string,
    *   classes?: string,
-   *   height?: string,
-   *   autoHeight?: boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   heightMode?: 'fixed' | 'flexible' | 'fill',
    *   children?: import('svelte').Snippet,
    *   contextKey?: import('../../typedef').ContextKey,
    *   dropPreviewSnippet?: import('svelte').Snippet<[DragData]>,
@@ -67,8 +65,9 @@
     accepts = () => true,
     base = '',
     classes = '',
-    height = 'h-min',
-    autoHeight = false,
+    minHeight = '',
+    maxHeight = '',
+    heightMode = 'fixed',
     children,
     contextKey,
     dropPreviewSnippet,
@@ -84,33 +83,34 @@
   } = $props();
 
   const dragState = createOrGetDragState(contextKey);
+  const dropZoneId = generateLocalId();
 
   let currentState = $state(READY);
-  let dropZoneElement; // Reference to the drop zone DOM element
-
-  // 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);
-
-  // Cleanup function
-  let cleanup;
-
-  onMount(() => {
-    // Global dragend listener to ensure state cleanup
-    const handleGlobalDragEnd = () => {
-      isCurrentlyOver = false;
-      currentState = READY;
-    };
-
-    document.addEventListener('dragend', handleGlobalDragEnd);
-
-    cleanup = () => {
-      document.removeEventListener('dragend', handleGlobalDragEnd);
-    };
-  });
+  let dropZoneElement = $state(null);
+
+  // Computed height classes based on mode
+  let heightClasses = $derived.by(() => {
+    const classes = [];
+
+    switch (heightMode) {
+      case 'flexible':
+        if (minHeight) classes.push(minHeight);
+        else classes.push('min-h-[100px]');
+        if (maxHeight) {
+          classes.push(maxHeight);
+          classes.push('overflow-y-auto');
+        }
+        break;
+      case 'fill':
+        classes.push('h-full');
+        break;
+      case 'fixed':
+      default:
+        classes.push('h-min');
+        break;
+    }
 
-  onDestroy(() => {
-    cleanup?.();
+    return classes.join(' ');
   });
 
   // Computed state object for CSS classes
@@ -127,253 +127,100 @@
   // Update bindable props
   $effect(() => {
     isDragOver = [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState);
-
     canDrop = currentState === CAN_DROP;
   });
 
-  /**
-   * Check if we can accept the dragged item
-   *
-   * @param {Object} data
-   *
-   * @returns {boolean}
-   */
-  function canAcceptDrop(data) {
-    if (disabled) return false;
-    if (!data) 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;
+  // Register/unregister with drag state
+  $effect(() => {
+    if (dropZoneElement) {
+      // Register this dropzone
+      dragState.registerDropZone(dropZoneId, {
+        zone,
+        group,
+        accepts: (dragData) => {
+          if (disabled) return false;
+          if (!dragData) return false;
+          return accepts(dragData);
+        },
+        onDragEnter: (detail) => {
+          currentState = detail.canDrop ? CAN_DROP : CANNOT_DROP;
+          onDragEnter?.(detail);
+        },
+        onDragOver: (detail) => {
+          onDragOver?.(detail);
+        },
+        onDragLeave: (detail) => {
+          currentState = READY;
+          onDragLeave?.(detail);
+        },
+        onDrop: async (dropData) => {
+          currentState = READY;
+
+          try {
+            onDropStart?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag
+            });
+
+            const result = await onDrop?.(dropData);
+
+            onDropEnd?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag,
+              success: true
+            });
+
+            return result;
+          } catch (error) {
+            onDropEnd?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag,
+              success: false,
+              error
+            });
+            throw error;
           }
-        }
-      }
-    } catch (error) {
-      console.error('Error getting drag data:', error);
-    }
-
-    return null;
-  }
-
-  /**
-   * Handle drag enter with improved DOM traversal check
-   * @param {DragEvent} event
-   */
-  function handleDragEnter(event) {
-    // Prevent default to allow drop
-    event.preventDefault();
-
-    // If we're already in a drag-over state, don't reset anything
-    if (isCurrentlyOver) return;
-
-    // Now we're over this drop zone
-    isCurrentlyOver = true;
-
-    // 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;
-    }
-
-    // Notify listeners
-    onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
-  }
-
-  /**
-   * Handle drag over
-   * @param {DragEvent} event
-   */
-  function handleDragOver(event) {
-    // Prevent default to allow drop
-    event.preventDefault();
-
-    // If we're not currently over this drop zone (despite dragover firing),
-    // treat it as an enter event
-    if (!isCurrentlyOver) {
-      handleDragEnter(event);
-      return;
-    }
-
-    // Get the drag data
-    const dragData = getDragData(event);
-
-    // Re-evaluate acceptance
-    if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
-      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
+        },
+        element: dropZoneElement
+      });
+
+      // Cleanup on unmount
+      return () => {
+        dragState.unregisterDropZone(dropZoneId);
+      };
     }
+  });
 
-    // Set visual feedback based on drop acceptance
-    if (currentState === CAN_DROP) {
-      event.dataTransfer.dropEffect = 'move';
-    } else if (currentState === CANNOT_DROP) {
-      event.dataTransfer.dropEffect = 'none';
-    }
-
-    // Notify listeners
-    onDragOver?.({ event, zone });
-  }
-
-  /**
-   * Handle drag leave with improved DOM traversal check
-   * @param {DragEvent} event
-   */
-  function handleDragLeave(event) {
-    // 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 drop zone, we're truly leaving
-    const isActuallyLeaving =
-      !relatedTarget || !dropZoneElement.contains(relatedTarget);
-
-    if (isActuallyLeaving) {
-      isCurrentlyOver = false;
-      currentState = READY;
-      onDragLeave?.({ event, zone });
-    }
-  }
-
-  /**
-   * Handle drop
-   * @param {DragEvent} event
-   */
-  function handleDrop(event) {
-    // Prevent default browser actions
-    event.preventDefault();
-
-    // Reset our tracking state
-    isCurrentlyOver = false;
-
-    try {
-      // 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;
-      }
-
-      // Get drag data for internal drag operations
-      const dragData = getDragData(event);
-
-      // Check if we can accept this drop
-      if (dragData && canAcceptDrop(dragData)) {
-        // Notify listener
-        onDropStart?.({ event, zone, data: dragData });
-
-        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 drop zone rectangle
-        const dropZoneRect = dropZoneElement.getBoundingClientRect();
-
-        // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        const dropOffsetX =
-          event.clientX -
-          dropZoneRect.left -
-          borderLeftWidth;
-
-        const dropOffsetY =
-          event.clientY -
-          dropZoneRect.top -
-          borderTopWidth;
-
-        const x = dropOffsetX - (dragData.offsetX ?? 0);
-        const y = dropOffsetY - (dragData.offsetY ?? 0);
-
-        const dropResult = onDrop?.({
-          zone,
-          source: dragData.source,
-          item: dragData.item,
-          x,
-          y,
-          drag: dragData,
-          drop: {
-            offsetX: dropOffsetX,
-            offsetY: dropOffsetY,
-            event
-          }
-        });
-
-        // Handle async or sync results
-        Promise.resolve(dropResult)
-          .then(() => {
-            currentState = READY;
-            onDropEnd?.({ event, zone, data: dragData, success: true });
-          })
-          .catch((error) => {
-            currentState = READY;
-            onDropEnd?.({ event, zone, data: dragData, success: false, error });
-          });
-      } else {
-        // Not a valid drop, reset state
-        currentState = READY;
-      }
-    } catch (error) {
-      // Handle parsing errors
-      console.error('Drop error:', error);
-      currentState = READY;
-    }
-  }
+  // Monitor drag state to update preview
+  let showPreview = $derived(
+    dragState.activeDropZone === dropZoneId &&
+    currentState === CAN_DROP &&
+    dropPreviewSnippet
+  );
 </script>
 
 <div
   data-component="drop-zone"
   bind:this={dropZoneElement}
-  ondragenter={handleDragEnter}
-  ondragover={handleDragOver}
-  ondragleave={handleDragLeave}
-  ondrop={handleDrop}
-  class="{base} {height} {classes} {stateClasses}"
+  class="{base} {heightClasses} {classes} {stateClasses}"
   data-zone={zone}
   {...attrs}
 >
-  <GridLayers heightFrom={autoHeight ? 'content' : null}>
+  <GridLayers heightFrom={heightMode === 'flexible' ? 'content' : null}>
     {#if children}
-      <div data-layer="content" class:auto-height={autoHeight}>
+      <div
+        data-layer="content"
+        class:relative={heightMode === 'flexible'}
+        class:w-full={heightMode === 'flexible'}
+      >
         {@render children()}
       </div>
     {/if}
 
-    {#if currentState === CAN_DROP && dropPreviewSnippet}
+    {#if showPreview && dropPreviewSnippet}
       <div data-layer="preview">
         {@render dropPreviewSnippet(dragState.current)}
       </div>
@@ -382,7 +229,11 @@
 </div>
 
 <style>
-  [data-layer='content']:not(.auto-height) {
+  [data-component="drop-zone"] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  [data-layer='content']:not(.relative) {
     position: absolute;
     left: 0;
     right: 0;
@@ -390,7 +241,7 @@
     bottom: 0;
   }
 
-  [data-layer='content'].auto-height {
+  [data-layer='content'].relative {
     position: relative;
     width: 100%;
   }

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

@@ -9,8 +9,9 @@ type DropZone = {
         accepts?: (item: any) => boolean;
         base?: string;
         classes?: string;
-        height?: string;
-        autoHeight?: boolean;
+        minHeight?: string;
+        maxHeight?: string;
+        heightMode?: "fill" | "fixed" | "flexible";
         children?: Snippet<[]>;
         contextKey?: ContextKey;
         dropPreviewSnippet?: Snippet<[DragData]>;
@@ -52,8 +53,9 @@ declare const DropZone: import("svelte").Component<{
     accepts?: (item: any) => boolean;
     base?: string;
     classes?: string;
-    height?: string;
-    autoHeight?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    heightMode?: "fixed" | "flexible" | "fill";
     children?: import("svelte").Snippet;
     contextKey?: import("../../typedef").ContextKey;
     dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;

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

@@ -0,0 +1,119 @@
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   fillContainer?: boolean,
+   *   aspectRatio?: string,
+   *   overflow?: 'auto' | 'hidden' | 'visible' | 'scroll',
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[import('../../typedef').DragData]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   onDragEnter?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     canDrop: boolean
+   *   }) => void,
+   *   onDragOver?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDragLeave?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDrop?: (detail: import('../../typedef').DropData) => any | Promise<any>,
+   *   onDropStart?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any
+   *   }) => void,
+   *   onDropEnd?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any,
+   *     success: boolean,
+   *     error?: Error
+   *   }) => void,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    zone = 'default',
+    group = 'default',
+    disabled = false,
+    accepts = () => true,
+    fillContainer = true,
+    aspectRatio = '',
+    overflow = 'hidden',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build overflow classes based on prop
+  let overflowClasses = $derived.by(() => {
+    switch (overflow) {
+      case 'auto':
+        return 'overflow-auto';
+      case 'scroll':
+        return 'overflow-scroll';
+      case 'visible':
+        return 'overflow-visible';
+      case 'hidden':
+      default:
+        return 'overflow-hidden';
+    }
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${overflowClasses} ${aspectRatio} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="area"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  heightMode={fillContainer ? 'fill' : 'fixed'}
+  {base}
+  classes={combinedClasses}
+  {contextKey}
+  {dropPreviewSnippet}
+  bind:isDragOver
+  bind:canDrop
+  {onDragEnter}
+  {onDragOver}
+  {onDragLeave}
+  {onDrop}
+  {onDropStart}
+  {onDropEnd}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</DropZone>

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

@@ -0,0 +1,90 @@
+export default DropZoneArea;
+type DropZoneArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        fillContainer?: boolean;
+        aspectRatio?: string;
+        overflow?: "scroll" | "auto" | "hidden" | "visible";
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        dropPreviewSnippet?: Snippet<[DragData]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        onDragEnter?: (detail: {
+            event: DragEvent;
+            zone: string;
+            canDrop: boolean;
+        }) => void;
+        onDragOver?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDragLeave?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDrop?: (detail: DropData) => any;
+        onDropStart?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+        }) => void;
+        onDropEnd?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+            success: boolean;
+            error?: Error;
+        }) => void;
+    }>): void;
+};
+declare const DropZoneArea: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    fillContainer?: boolean;
+    aspectRatio?: string;
+    overflow?: "auto" | "hidden" | "visible" | "scroll";
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    onDragEnter?: (detail: {
+        event: DragEvent;
+        zone: string;
+        canDrop: boolean;
+    }) => void;
+    onDragOver?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDragLeave?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
+    onDropStart?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+    }) => void;
+    onDropEnd?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+        success: boolean;
+        error?: Error;
+    }) => void;
+}, {}, "isDragOver" | "canDrop">;