@hkdigital/lib-sveltekit 0.2.8 → 0.2.10

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

@@ -1,119 +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>
+<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/DropZoneList.svelte

@@ -1,125 +1,125 @@
-<script>
-  import { DropZone } from './index.js';
-
-  /**
-   * @type {{
-   *   zone?: string,
-   *   group?: string,
-   *   disabled?: boolean,
-   *   accepts?: (item: any) => boolean,
-   *   minHeight?: string,
-   *   maxHeight?: string,
-   *   gap?: string,
-   *   direction?: 'vertical' | 'horizontal',
-   *   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,
-    minHeight = 'min-h-[200px]',
-    maxHeight = '',
-    gap = 'gap-2',
-    direction = 'vertical',
-    base = '',
-    classes = '',
-    children,
-    contextKey,
-    dropPreviewSnippet,
-    isDragOver = $bindable(false),
-    canDrop = $bindable(false),
-    onDragEnter,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-    onDropStart,
-    onDropEnd,
-    ...attrs
-  } = $props();
-
-  // Build flex layout classes based on direction
-  let layoutClasses = $derived.by(() => {
-    const layoutParts = ['flex'];
-
-    if (direction === 'vertical') {
-      layoutParts.push('flex-col');
-    } else {
-      layoutParts.push('flex-row', 'flex-wrap');
-    }
-
-    if (gap) {
-      layoutParts.push(gap);
-    }
-
-    return layoutParts.join(' ');
-  });
-
-  // Combine all classes for the drop zone
-  let combinedClasses = $derived(
-    `${layoutClasses} ${classes}`.trim()
-  );
-</script>
-
-<DropZone
-  data-component="drop-zone"
-  data-type="list"
-  {zone}
-  {group}
-  {disabled}
-  {accepts}
-  {minHeight}
-  {maxHeight}
-  heightMode="flexible"
-  {base}
-  classes={combinedClasses}
-  {contextKey}
-  {dropPreviewSnippet}
-  bind:isDragOver
-  bind:canDrop
-  {onDragEnter}
-  {onDragOver}
-  {onDragLeave}
-  {onDrop}
-  {onDropStart}
-  {onDropEnd}
-  {...attrs}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</DropZone>
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   gap?: string,
+   *   direction?: 'vertical' | 'horizontal',
+   *   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,
+    minHeight = 'min-h-[200px]',
+    maxHeight = '',
+    gap = 'gap-2',
+    direction = 'vertical',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build flex layout classes based on direction
+  let layoutClasses = $derived.by(() => {
+    const layoutParts = ['flex'];
+
+    if (direction === 'vertical') {
+      layoutParts.push('flex-col');
+    } else {
+      layoutParts.push('flex-row', 'flex-wrap');
+    }
+
+    if (gap) {
+      layoutParts.push(gap);
+    }
+
+    return layoutParts.join(' ');
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${layoutClasses} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="list"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  {minHeight}
+  {maxHeight}
+  heightMode="flexible"
+  {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/actions.d.ts

@@ -0,0 +1,9 @@
+export function activeTouchMove(node: any, handler: any): {
+    destroy(): void;
+};
+export function activeDragOver(node: any, handler: any): {
+    destroy(): void;
+};
+export function activeDrop(node: any, handler: any): {
+    destroy(): void;
+};

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

@@ -0,0 +1,26 @@
+export function activeTouchMove(node, handler) {
+  node.addEventListener('touchmove', handler, { passive: false });
+  return {
+    destroy() {
+      node.removeEventListener('touchmove', handler, { passive: false });
+    }
+  };
+}
+
+export function activeDragOver(node, handler) {
+  node.addEventListener('dragover', handler, { passive: false });
+  return {
+    destroy() {
+      node.removeEventListener('dragover', handler, { passive: false });
+    }
+  };
+}
+
+export function activeDrop(node, handler) {
+  node.addEventListener('drop', handler, { passive: false });
+  return {
+    destroy() {
+      node.removeEventListener('drop', handler, { passive: false });
+    }
+  };
+}

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

@@ -5,6 +5,7 @@ export type SimulatedDragEvent = import("../../typedef").SimulatedDragEvent;
 /** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 declare class DragState {
     draggables: Map<any, any>;
+    draggableIdCount: number;
     dropZones: Map<any, any>;
     activeDropZone: any;
     lastActiveDropZone: any;
@@ -67,6 +68,7 @@ declare class DragState {
      * @param {string} draggableId
      */
     end(draggableId: string): void;
+    newDraggableId(): string;
     /**
      * Get a drag data by draggable id
      *
@@ -79,7 +81,7 @@ declare class DragState {
      *
      * @param {DragEvent|SimulatedDragEvent} event
      *
-     * @returns {Object|null} The drag data, or null for file drops
+     * @returns {Object|null} The drag data, or null for file drops or not found
      */
     getDraggable(event: DragEvent | SimulatedDragEvent): any | null;
     /**