@hkdigital/lib-sveltekit 0.1.75 → 0.1.77

package/dist/assets/autospuiten/car-paint-picker.d.ts

@@ -1,11 +1,11 @@
 export const carPaintImages: {
-    rusty: import("../../config/typedef.js").ImageMeta[];
-    "army-green": import("../../config/typedef.js").ImageMeta[];
-    "electric-blue": import("../../config/typedef.js").ImageMeta[];
-    "lemon-yellow": import("../../config/typedef.js").ImageMeta[];
-    "opaque-purple": import("../../config/typedef.js").ImageMeta[];
-    "sunset-orange": import("../../config/typedef.js").ImageMeta[];
-    "tomato-red": import("../../config/typedef.js").ImageMeta[];
+    rusty: import("../../typedef/image.js").ImageMeta[];
+    "army-green": import("../../typedef/image.js").ImageMeta[];
+    "electric-blue": import("../../typedef/image.js").ImageMeta[];
+    "lemon-yellow": import("../../typedef/image.js").ImageMeta[];
+    "opaque-purple": import("../../typedef/image.js").ImageMeta[];
+    "sunset-orange": import("../../typedef/image.js").ImageMeta[];
+    "tomato-red": import("../../typedef/image.js").ImageMeta[];
 };
 import Rusty from './car-paint-picker/rusty.jpg?preset=render&responsive';
 import ArmyGreen from './car-paint-picker/army-green.jpg?preset=render&responsive';

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

@@ -0,0 +1,217 @@
+<script>
+  import { toStateClasses } from '../../util/design-system/index.js';
+  import { useDragState } from './drag-state.svelte.js';
+
+  import {
+    IDLE,
+    DRAGGING,
+    DRAG_PREVIEW,
+    DROPPING,
+    DRAG_DISABLED
+  } from '../../constants/state-labels/drag-states.js';
+
+  const dragState = useDragState();
+
+  /**
+   * @type {{
+   *   item: any,
+   *   group?: string,
+   *   source?: string,
+   *   disabled?: boolean,
+   *   dragDelay?: number,
+   *   base?: string,
+   *   classes?: string,
+   *   children: import('svelte').Snippet,
+   *   isDragging?: boolean,
+   *   isDropping?: boolean,
+   *   isDragPreview?: boolean,
+   *   onDragStart?: (detail: {
+   *     event: DragEvent,
+   *     item: any,
+   *     source: string,
+   *     group: string
+   *   }) => void,
+   *   onDragging?: (detail: {
+   *     event: DragEvent,
+   *     item: any
+   *   }) => void,
+   *   onDragEnd?: (detail: {
+   *     event: DragEvent,
+   *     item: any,
+   *     wasDropped: boolean
+   *   }) => void,
+   *   onDrop?: (detail: {
+   *     event: DragEvent,
+   *     item: any,
+   *     wasDropped: boolean
+   *   }) => void,
+   *   canDrag?: (item: any) => boolean,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    item,
+    group = 'default',
+    source = 'default',
+    disabled = false,
+    dragDelay = 0,
+    base = '',
+    classes = '',
+    children,
+    isDragging = $bindable(false),
+    isDropping = $bindable(false),
+    isDragPreview = $bindable(false),
+    onDragStart,
+    onDragging,
+    onDragEnd,
+    onDrop,
+    canDrag = () => true,
+    ...attrs
+  } = $props();
+
+  let dragTimeout = null;
+  let currentState = $state(IDLE);
+
+  // 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)
+  });
+
+  let stateClasses = $derived(toStateClasses(stateObject));
+
+  // Update bindable props
+  $effect(() => {
+    isDragging = currentState === DRAGGING;
+    isDropping = currentState === DROPPING;
+    isDragPreview = currentState === DRAG_PREVIEW;
+  });
+
+  /**
+   * Handle drag start
+   * @param {DragEvent} event
+   */
+  function handleDragStart(event) {
+    if (disabled || !canDrag(item)) {
+      event.preventDefault();
+      return;
+    }
+
+    // Handle drag delay
+    if (dragDelay > 0) {
+      event.preventDefault();
+      currentState = DRAG_PREVIEW;
+
+      dragTimeout = setTimeout(() => {
+        currentState = DRAGGING;
+        startDrag(event);
+      }, dragDelay);
+      return;
+    }
+
+    currentState = DRAGGING;
+    startDrag(event);
+  }
+
+  /**
+   * Start the drag operation
+   * @param {DragEvent} event
+   */
+  function startDrag(event) {
+    const dragData = {
+      item,
+      source,
+      group,
+      metadata: { timestamp: Date.now() }
+    };
+
+    // Set global drag state
+    dragState.start(item, source, group);
+
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('application/json', JSON.stringify(dragData));
+
+    // Set custom drag image if needed
+    if (event.dataTransfer.setDragImage) {
+      // Could set custom drag image here
+    }
+
+    onDragStart?.({ event, item, source, group });
+  }
+
+  /**
+   * Handle during drag
+   * @param {DragEvent} event
+   */
+  function handleDrag(event) {
+    if (currentState === DRAGGING) {
+      onDragging?.({ event, item });
+    }
+  }
+
+  /**
+   * Handle drag end
+   * @param {DragEvent} event
+   */
+  function handleDragEnd(event) {
+    clearTimeout(dragTimeout);
+
+    // Clear global drag state
+    dragState.end();
+
+    // Check if drop was successful
+    const wasDropped = event.dataTransfer.dropEffect !== 'none';
+
+    if (wasDropped) {
+      currentState = DROPPING;
+      onDrop?.({ event, item, wasDropped: true });
+
+      // Brief dropping state before returning to idle
+      setTimeout(() => {
+        currentState = IDLE;
+      }, 100);
+    } else {
+      currentState = IDLE;
+    }
+
+    onDragEnd?.({ event, item, wasDropped });
+  }
+
+  /**
+   * Handle mouse down for drag delay
+   * @param {MouseEvent} event
+   */
+  function handleMouseDown(event) {
+    if (dragDelay > 0 && !disabled && canDrag(item)) {
+      // Could add visual feedback here
+    }
+  }
+
+  /**
+   * Handle mouse up to cancel drag delay
+   * @param {MouseEvent} event
+   */
+  function handleMouseUp(event) {
+    if (dragTimeout) {
+      clearTimeout(dragTimeout);
+      currentState = IDLE;
+    }
+  }
+</script>
+
+<div
+  data-component="draggable"
+  draggable={!disabled && canDrag(item)}
+  ondragstart={handleDragStart}
+  ondrag={handleDrag}
+  ondragend={handleDragEnd}
+  onmousedown={handleMouseDown}
+  onmouseup={handleMouseUp}
+  class="{base} {classes} {stateClasses}"
+  {...attrs}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,74 @@
+export default Draggable;
+type Draggable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        item: any;
+        group?: string;
+        source?: string;
+        disabled?: boolean;
+        dragDelay?: number;
+        base?: string;
+        classes?: string;
+        children: Snippet<[]>;
+        isDragging?: boolean;
+        isDropping?: boolean;
+        isDragPreview?: boolean;
+        onDragStart?: (detail: {
+            event: DragEvent;
+            item: any;
+            source: string;
+            group: string;
+        }) => void;
+        onDragging?: (detail: {
+            event: DragEvent;
+            item: any;
+        }) => void;
+        onDragEnd?: (detail: {
+            event: DragEvent;
+            item: any;
+            wasDropped: boolean;
+        }) => void;
+        onDrop?: (detail: {
+            event: DragEvent;
+            item: any;
+            wasDropped: boolean;
+        }) => void;
+        canDrag?: (item: any) => boolean;
+    }>): void;
+};
+declare const Draggable: import("svelte").Component<{
+    [key: string]: any;
+    item: any;
+    group?: string;
+    source?: string;
+    disabled?: boolean;
+    dragDelay?: number;
+    base?: string;
+    classes?: string;
+    children: import("svelte").Snippet;
+    isDragging?: boolean;
+    isDropping?: boolean;
+    isDragPreview?: boolean;
+    onDragStart?: (detail: {
+        event: DragEvent;
+        item: any;
+        source: string;
+        group: string;
+    }) => void;
+    onDragging?: (detail: {
+        event: DragEvent;
+        item: any;
+    }) => void;
+    onDragEnd?: (detail: {
+        event: DragEvent;
+        item: any;
+        wasDropped: boolean;
+    }) => void;
+    onDrop?: (detail: {
+        event: DragEvent;
+        item: any;
+        wasDropped: boolean;
+    }) => void;
+    canDrag?: (item: any) => boolean;
+}, {}, "isDragging" | "isDropping" | "isDragPreview">;

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

@@ -0,0 +1,320 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { toStateClasses } from '../../util/design-system/index.js';
+  import { useDragState } from './drag-state.svelte.js';
+
+  import {
+    READY,
+    DRAG_OVER,
+    CAN_DROP,
+    CANNOT_DROP,
+    DROP_DISABLED,
+    ACTIVE_DROP
+  } from '../../constants/state-labels/drop-states.js';
+
+  const dragState = useDragState();
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   maxItems?: number,
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   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,
+    empty,
+    preview,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    isDropping = $bindable(false),
+    itemCount = $bindable(0),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  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) {
+    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 current drag data
+    const dragData = dragState.current;
+
+    // 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 dropzone (despite dragover firing),
+    // treat it as an enter event
+    if (!isCurrentlyOver) {
+      handleDragEnter(event);
+      return;
+    }
+
+    // Re-evaluate acceptance on each dragover in case state changed
+    const dragData = dragState.current;
+
+    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 {
+      // Parse the JSON data from the dataTransfer object
+      const data = JSON.parse(event.dataTransfer.getData('application/json'));
+
+      // Check if we can accept this drop
+      if (canAcceptDrop(data)) {
+        // Update state and notify listeners
+        currentState = ACTIVE_DROP;
+        onDropStart?.({ event, zone, data });
+
+        // Call the onDrop handler and handle Promise resolution
+        const dropResult = onDrop?.({
+          event,
+          zone,
+          item: data.item,
+          source: data.source,
+          metadata: data.metadata
+        });
+
+        // Handle async or sync results
+        Promise.resolve(dropResult).then(() => {
+          currentState = READY;
+          onDropEnd?.({ event, zone, data, success: true });
+        }).catch((error) => {
+          currentState = READY;
+          onDropEnd?.({ event, zone, data, 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>