@hkdigital/lib-core 0.3.1

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

@@ -0,0 +1,95 @@
+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<[{
+            element: HTMLElement;
+            rect: DOMRect;
+            isDragging: boolean;
+        }]>;
+        draggingSnippet?: Snippet<[{
+            element: HTMLElement;
+            rect: DOMRect;
+        }]>;
+        contextKey?: ContextKey;
+        isDragging?: boolean;
+        isDropping?: boolean;
+        isDragPreview?: boolean;
+        onDragStart?: (detail: {
+            event: DragEvent;
+            item: any;
+            source: string;
+            group: string;
+            getController: () => DragController;
+        }) => 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<[{
+        element: HTMLElement;
+        rect: DOMRect;
+        isDragging: boolean;
+    }]>;
+    draggingSnippet?: import("svelte").Snippet<[{
+        element: HTMLElement;
+        rect: DOMRect;
+    }]>;
+    contextKey?: import("../../typedef").ContextKey;
+    isDragging?: boolean;
+    isDropping?: boolean;
+    isDragPreview?: boolean;
+    onDragStart?: (detail: {
+        event: DragEvent;
+        item: any;
+        source: string;
+        group: string;
+        getController: () => DragController;
+    }) => 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">;
+import { DragController } from './DragController.js';

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

@@ -0,0 +1,258 @@
+<script>
+  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,
+    CAN_DROP,
+    CANNOT_DROP
+  } from '../../constants/state-labels/drop-states.js';
+
+  /** @typedef {import('../../typedef').DragData} DragData */
+  /** @typedef {import('../../typedef').DropData} DropData */
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (dragData: any, target: { zone:string, group: string }) => boolean,
+   *   base?: string,
+   *   classes?: string,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   heightMode?: 'fixed' | 'flexible' | 'fill',
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').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 | 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,
+    base = '',
+    classes = '',
+    minHeight = '',
+    maxHeight = '',
+    heightMode = 'fixed',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  const dragState = createOrGetDragState(contextKey);
+  const dropZoneId = generateLocalId();
+
+  let currentState = $state(READY);
+  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;
+    }
+
+    return classes.join(' ');
+  });
+
+  // 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
+  });
+
+  let stateClasses = $derived(toStateClasses(stateObject));
+
+  // Update bindable props
+  $effect(() => {
+    isDragOver = [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState);
+    canDrop = currentState === CAN_DROP;
+  });
+
+  // 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, { zone, group });
+        },
+        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;
+          }
+        },
+        element: dropZoneElement
+      });
+
+      // Cleanup on unmount
+      return () => {
+        dragState.unregisterDropZone(dropZoneId);
+      };
+    }
+  });
+
+  // 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}
+  class="{base} {heightClasses} {classes} {stateClasses}"
+  data-zone={zone}
+  {...attrs}
+>
+  <GridLayers heightFrom={heightMode === 'flexible' ? 'content' : null}>
+    {#if children}
+      <!-- <div
+        data-layer="content"
+        class:relative={heightMode === 'flexible'}
+        class:w-full={heightMode === 'flexible'}
+      > -->
+      {@render children()}
+      <!-- </div> -->
+    {/if}
+
+    {#if showPreview && dropPreviewSnippet}
+      <div data-layer="preview">
+        {@render dropPreviewSnippet(dragState.current)}
+      </div>
+    {/if}
+  </GridLayers>
+</div>
+
+<style>
+  [data-component='drop-zone'] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /*  [data-layer='content']:not(.relative) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  [data-layer='content'].relative {
+    position: relative;
+    width: 100%;
+  }
+*/
+  [data-layer='preview'] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,96 @@
+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?: (dragData: any, target: {
+            zone: string;
+            group: string;
+        }) => boolean;
+        base?: string;
+        classes?: string;
+        minHeight?: string;
+        maxHeight?: string;
+        heightMode?: "fill" | "fixed" | "flexible";
+        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 DropZone: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (dragData: any, target: {
+        zone: string;
+        group: string;
+    }) => boolean;
+    base?: string;
+    classes?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    heightMode?: "fixed" | "flexible" | "fill";
+    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">;

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">;