@hkdigital/lib-sveltekit 0.1.76 → 0.1.78

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

@@ -0,0 +1,377 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { toStateClasses } from '../../util/design-system/index.js';
+
+  import { createOrGetDragState } from './drag-state.svelte.js';
+
+  import {
+    findDraggableSource,
+    getDraggableIdFromEvent,
+    processDropWithData
+  } from './util.js';
+
+  import {
+    READY,
+    DRAG_OVER,
+    CAN_DROP,
+    CANNOT_DROP,
+    DROP_DISABLED,
+    ACTIVE_DROP
+  } from '../../constants/state-labels/drop-states.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   maxItems?: number,
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   empty?: import('svelte').Snippet,
+   *   preview?: import('svelte').Snippet<[{
+   *     item: any,
+   *     source: string,
+   *     group: string,
+   *     metadata?: any
+   *   }]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   isDropping?: boolean,
+   *   itemCount?: number,
+   *   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: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     item: any,
+   *     source: string,
+   *     metadata?: any
+   *   }) => 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,
+    maxItems = Infinity,
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    empty,
+    preview,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    isDropping = $bindable(false),
+    itemCount = $bindable(0),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+
+  const dragState = createOrGetDragState(contextKey);
+
+  // console.debug('DropZone contextKey:', contextKey);
+
+  let currentState = $state(READY);
+  let dropzoneElement; // Reference to the dropzone DOM element
+
+  // We'll use a flag to track if we're currently in the dropzone
+  // 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);
+    };
+  });
+
+  onDestroy(() => {
+    cleanup?.();
+  });
+
+  // Computed state object for CSS classes
+  let stateObject = $derived({
+    ready: currentState === READY,
+    'drag-over': currentState === DRAG_OVER,
+    'can-drop': currentState === CAN_DROP,
+    'cannot-drop': currentState === CANNOT_DROP,
+    'drop-disabled': disabled,
+    'active-drop': currentState === ACTIVE_DROP
+  });
+
+  let stateClasses = $derived(toStateClasses(stateObject));
+
+  // Update bindable props
+  $effect(() => {
+    isDragOver = [
+      DRAG_OVER,
+      CAN_DROP,
+      CANNOT_DROP
+    ].includes(currentState);
+
+    canDrop = currentState === CAN_DROP;
+    isDropping = currentState === ACTIVE_DROP;
+  });
+
+  /**
+   * Check if we can accept the dragged item
+   *
+   * @param {Object} data
+   *
+   * @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 (itemCount >= maxItems) return false;
+    return true;
+  }
+
+/**
+ * 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 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);
+
+    // Update state based on acceptance
+    if (dragData) {
+      currentState = canAcceptDrop(dragData)
+        ? CAN_DROP
+        : CANNOT_DROP;
+    } else {
+      currentState = DRAG_OVER;
+    }
+  } 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;
+    }
+  }
+
+  // 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 dropzone (despite dragover firing),
+  // treat it as an enter event
+  if (!isCurrentlyOver) {
+    handleDragEnter(event);
+    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;
+  }
+
+  // Re-evaluate acceptance
+  if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
+    currentState = canAcceptDrop(dragData)
+      ? CAN_DROP
+      : CANNOT_DROP;
+  }
+
+  // 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 dropzone or just
+    // entering a child element within the dropzone
+
+    // relatedTarget is the element we're moving to
+    const relatedTarget = event.relatedTarget;
+
+    // If relatedTarget is null or outside our dropzone, 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 {
+    // 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);
+    }
+
+    // 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);
+      }
+    }
+
+    // Check if we can accept this drop
+    if (dragData && canAcceptDrop(dragData)) {
+      // Update state and notify listeners
+      currentState = ACTIVE_DROP;
+      onDropStart?.({ event, zone, data: dragData });
+
+      // Call the onDrop handler and handle Promise resolution
+      const dropResult = onDrop?.({
+        event,
+        zone,
+        item: dragData.item,
+        source: dragData.source,
+        metadata: dragData.metadata
+      });
+
+      // 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;
+  }
+}
+</script>
+
+<div
+  data-component="dropzone"
+  bind:this={dropzoneElement}
+  ondragenter={handleDragEnter}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  class="{base} {classes} {stateClasses}"
+  data-zone={zone}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {:else if currentState === CAN_DROP && preview}
+    {@render preview(dragState.current)}
+  {:else if itemCount === 0 && empty}
+    {@render empty()}
+  {:else}
+    <div data-element="drop-zone-empty">Drop items here</div>
+  {/if}
+</div>

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

@@ -0,0 +1,114 @@
+export default DropZone;
+type DropZone = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        maxItems?: number;
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        empty?: Snippet<[]>;
+        preview?: Snippet<[{
+            item: any;
+            source: string;
+            group: string;
+            metadata?: any;
+        }]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        isDropping?: boolean;
+        itemCount?: number;
+        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: {
+            event: DragEvent;
+            zone: string;
+            item: any;
+            source: string;
+            metadata?: any;
+        }) => 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 DropZone: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    maxItems?: number;
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    empty?: import("svelte").Snippet;
+    preview?: import("svelte").Snippet<[{
+        item: any;
+        source: string;
+        group: string;
+        metadata?: any;
+    }]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    isDropping?: boolean;
+    itemCount?: number;
+    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: {
+        event: DragEvent;
+        zone: string;
+        item: any;
+        source: string;
+        metadata?: any;
+    }) => 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;
+}, {}, "isDropping" | "isDragOver" | "canDrop" | "itemCount">;

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

@@ -0,0 +1,30 @@
+export const createOrGetDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+export const createDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+export const getDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+declare class DragState {
+    draggables: Map<any, any>;
+    /**
+     * @param {string} draggableId
+     * @param {import('../../typedef/drag.js').DragData} dragData
+     */
+    start(draggableId: string, dragData: import("../../typedef/drag.js").DragData): void;
+    /**
+     * @param {string} draggableId
+     */
+    end(draggableId: string): void;
+    /**
+     * @param {string} draggableId
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    getDraggable(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * Get the most recently started drag operation (convenience method)
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    get current(): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * @returns {boolean}
+     */
+    isDragging(): boolean;
+}
+export {};

package/dist/components/drag-drop/drag-state.svelte.js

@@ -0,0 +1,50 @@
+// drag-state.svelte.js
+import { defineStateContext } from '../../util/svelte/state-context/index.js';
+
+class DragState {
+  // Replace the single 'current' with a Map of draggable IDs
+  draggables = $state(new Map());
+
+  /**
+   * @param {string} draggableId
+   * @param {import('../../typedef/drag.js').DragData} dragData
+   */
+  start(draggableId, dragData) {
+    this.draggables.set(draggableId, dragData);
+  }
+
+  /**
+   * @param {string} draggableId
+   */
+  end(draggableId) {
+    this.draggables.delete(draggableId);
+  }
+
+  /**
+   * @param {string} draggableId
+   * @returns {import('../../typedef/drag.js').DragData|undefined}
+   */
+  getDraggable(draggableId) {
+    return this.draggables.get(draggableId);
+  }
+
+  /**
+   * Get the most recently started drag operation (convenience method)
+   * @returns {import('../../typedef/drag.js').DragData|undefined}
+   */
+  get current() {
+    // For backward compatibility with existing code
+    const entries = Array.from(this.draggables.entries());
+    return entries.length > 0 ? entries[entries.length - 1][1] : undefined;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.draggables.size > 0;
+  }
+}
+
+export const [createOrGetDragState, createDragState, getDragState] =
+  defineStateContext(DragState);

package/dist/components/drag-drop/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Draggable } from "./Draggable.svelte";
+export { default as DropZone } from "./DropZone.svelte";
+export { default as DragDropContext } from "./DragDropContext.svelte";
+export * from "./drag-state.svelte.js";

package/dist/components/drag-drop/index.js

@@ -0,0 +1,5 @@
+export { default as Draggable } from './Draggable.svelte';
+export { default as DropZone } from './DropZone.svelte';
+export { default as DragDropContext } from './DragDropContext.svelte';
+
+export * from './drag-state.svelte.js';

package/dist/components/drag-drop/util.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Find the source draggable element from an event
+ *
+ * @param {DragEvent} event
+ * @returns {HTMLElement|null}
+ */
+export function findDraggableSource(event: DragEvent): HTMLElement | null;
+/**
+ * Get draggable ID from an event, if available
+ * @param {DragEvent} event
+ * @returns {string|null}
+ */
+export function getDraggableIdFromEvent(event: DragEvent): string | null;
+/**
+ * Process a drop event with the provided data and handlers
+ * @param {DragEvent} event
+ * @param {any} data The drag data
+ * @param {Object} options
+ * @param {Function} options.onDropStart Optional drop start handler
+ * @param {Function} options.onDrop Main drop handler
+ * @param {Function} options.onDropEnd Optional drop end handler
+ * @param {string} options.zone The drop zone identifier
+ * @param {Function} options.setState Function to update component state
+ * @returns {Promise<boolean>} Success status
+ */
+export function processDropWithData(event: DragEvent, data: any, { onDropStart, onDrop, onDropEnd, zone, setState }: {
+    onDropStart: Function;
+    onDrop: Function;
+    onDropEnd: Function;
+    zone: string;
+    setState: Function;
+}): Promise<boolean>;

package/dist/components/drag-drop/util.js

@@ -0,0 +1,85 @@
+/**
+ * Find the source draggable element from an event
+ *
+ * @param {DragEvent} event
+ * @returns {HTMLElement|null}
+ */
+export function findDraggableSource(event) {
+  const target = /** @type {Element|EventTarget|null} */ (event.target);
+
+  if (!(target instanceof Element)) {
+    return null;
+  }
+
+  let element = /** @type {Element|null} */ (target);
+
+  // Walk up the DOM tree
+  while (element !== null && element !== document.body) {
+    if (element.hasAttribute('data-id')) {
+      // Return as HTMLElement if needed
+      return /** @type {HTMLElement} */ (element);
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
+}
+
+/**
+ * Get draggable ID from an event, if available
+ * @param {DragEvent} event
+ * @returns {string|null}
+ */
+export function getDraggableIdFromEvent(event) {
+  const element = findDraggableSource(event);
+  return element ? element.getAttribute('data-id') : null;
+}
+
+/**
+ * Process a drop event with the provided data and handlers
+ * @param {DragEvent} event
+ * @param {any} data The drag data
+ * @param {Object} options
+ * @param {Function} options.onDropStart Optional drop start handler
+ * @param {Function} options.onDrop Main drop handler
+ * @param {Function} options.onDropEnd Optional drop end handler
+ * @param {string} options.zone The drop zone identifier
+ * @param {Function} options.setState Function to update component state
+ * @returns {Promise<boolean>} Success status
+ */
+export async function processDropWithData(event, data, {
+  onDropStart,
+  onDrop,
+  onDropEnd,
+  zone,
+  setState
+}) {
+  try {
+    // Update state and notify listeners
+    setState('ACTIVE_DROP');
+    onDropStart?.({ event, zone, data });
+
+    // Call the onDrop handler
+    const dropResult = onDrop?.({
+      event,
+      zone,
+      item: data.item,
+      source: data.source,
+      metadata: data.metadata
+    });
+
+    // Handle async or sync results
+    await Promise.resolve(dropResult);
+
+    // Success path
+    setState('READY');
+    onDropEnd?.({ event, zone, data, success: true });
+    return true;
+  } catch (error) {
+    // Error path
+    setState('READY');
+    onDropEnd?.({ event, zone, data, success: false, error });
+    return false;
+  }
+}