@hkdigital/lib-sveltekit 0.1.76 → 0.1.78

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

@@ -1,11 +1,11 @@
 export const carPaintImages: {
-    rusty: import("../../typedef/image-meta.js").ImageMeta[];
-    "army-green": import("../../typedef/image-meta.js").ImageMeta[];
-    "electric-blue": import("../../typedef/image-meta.js").ImageMeta[];
-    "lemon-yellow": import("../../typedef/image-meta.js").ImageMeta[];
-    "opaque-purple": import("../../typedef/image-meta.js").ImageMeta[];
-    "sunset-orange": import("../../typedef/image-meta.js").ImageMeta[];
-    "tomato-red": import("../../typedef/image-meta.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/DragDropContext.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { createDragState } from './drag-state.svelte.js';
+
+  /**
+   * @type {{
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   base?: string,
+   *   classes?: string,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  let { contextKey, base = '', classes = '', children, ...attrs } = $props();
+
+  // Create the state context at this level to ensure all children
+  // have access to the same state instance
+  const dragState = createDragState(contextKey);
+</script>
+
+<div
+  data-component="drag-drop-context"
+  class="{base} {classes}"
+  {...attrs}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,18 @@
+export default DragDropContext;
+type DragDropContext = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        contextKey?: ContextKey;
+        base?: string;
+        classes?: string;
+        children: Snippet<[]>;
+    }>): void;
+};
+declare const DragDropContext: import("svelte").Component<{
+    [key: string]: any;
+    contextKey?: import("../../typedef").ContextKey;
+    base?: string;
+    classes?: string;
+    children: import("svelte").Snippet;
+}, {}, "">;

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

@@ -0,0 +1,227 @@
+<script>
+  import { toStateClasses } from '../../util/design-system/index.js';
+
+  import { createOrGetDragState } from './drag-state.svelte.js';
+
+  import { generateLocalId } from '../../util/unique';
+
+  import {
+    IDLE,
+    DRAGGING,
+    DRAG_PREVIEW,
+    DROPPING,
+    DRAG_DISABLED
+  } from '../../constants/state-labels/drag-states.js';
+
+  /**
+   * @type {{
+   *   item: any,
+   *   group?: string,
+   *   source?: string,
+   *   disabled?: boolean,
+   *   dragDelay?: number,
+   *   base?: string,
+   *   classes?: string,
+   *   children: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   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,
+    contextKey,
+    isDragging = $bindable(false),
+    isDropping = $bindable(false),
+    isDragPreview = $bindable(false),
+    onDragStart,
+    onDragging,
+    onDragEnd,
+    onDrop,
+    canDrag = () => true,
+    ...attrs
+  } = $props();
+
+  const dragState = createOrGetDragState(contextKey);
+
+  const draggableId = generateLocalId();
+
+  // console.debug('Draggable contextKey:', contextKey);
+
+  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 shared drag state
+    dragState.start(draggableId, dragData);
+
+    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( draggableId );
+
+    // 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"
+  data-id={draggableId}
+  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,76 @@
+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<[]>;
+        contextKey?: ContextKey;
+        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;
+    contextKey?: import("../../typedef").ContextKey;
+    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">;