@hkdigital/lib-sveltekit 0.1.85 → 0.1.87

package/dist/classes/data/Selector.d.ts

@@ -23,8 +23,8 @@ export default class Selector {
      * @template {object} T
      * @param {T[]|null} items
      *
-     * @returns {T|null} item or null if not found
+     * @returns {T[]|null} item or null if not found
      */
-    findAll<T extends unknown>(items: T[] | null): T | null;
+    findAll<T extends unknown>(items: T[] | null): T[] | null;
     #private;
 }

package/dist/classes/data/Selector.js

@@ -80,7 +80,7 @@ export default class Selector {
 	 * @template {object} T
 	 * @param {T[]|null} items
 	 *
-	 * @returns {T|null} item or null if not found
+	 * @returns {T[]|null} item or null if not found
 	 */
 	findAll(items) {
 		const result = [];

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

@@ -174,24 +174,22 @@ function startDrag(event) {
   dragOffsetX = event.clientX - rect.left;
   dragOffsetY = event.clientY - rect.top;
 
-  // Create drag data with your preferred structure
+  // Create drag data with draggableId included
   const dragData = {
+    draggableId,
     offsetX: dragOffsetX,
     offsetY: dragOffsetY,
     item,
     source,
-    group,
-    metadata: {
-      timestamp: Date.now()
-    }
+    group
   };
 
   // Set shared drag state
   dragState.start(draggableId, dragData);
 
-  // Set data transfer for browser drag and drop API
+  // Set minimal data transfer for browser drag and drop API
   event.dataTransfer.effectAllowed = 'move';
-  event.dataTransfer.setData('application/json', JSON.stringify(dragData));
+  event.dataTransfer.setData('application/json', JSON.stringify({ draggableId }));
 
   // Create the preview controller
   const previewController = new DragController(event);
@@ -308,7 +306,6 @@ function startDrag(event) {
 
 <div
   data-component="draggable"
-  data-id={draggableId}
   bind:this={draggableElement}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}

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

@@ -6,18 +6,11 @@
 
   import { GridLayers } from '../layout';
 
-  import {
-    // findDraggableSource,
-    getDraggableIdFromEvent
-    // processDropWithData
-  } from './util.js';
-
   import {
     READY,
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP
-    // DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
   /** @typedef {import('../../typedef').DragData} DragData */
@@ -92,8 +85,6 @@
 
   const dragState = createOrGetDragState(contextKey);
 
-  // console.debug('DropZone contextKey:', contextKey);
-
   let currentState = $state(READY);
   let dropzoneElement; // Reference to the dropzone DOM element
 
@@ -148,15 +139,47 @@
    * @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 (!accepts(data)) return false;
     return true;
   }
 
+  /**
+   * Get drag data from either drag state or handle file drops
+   * @param {DragEvent} event
+   * @returns {Object|null} The drag data, or null for file drops
+   */
+  function getDragData(event) {
+    // Check if this is a file drop
+    if (event.dataTransfer.types.includes('Files')) {
+      // Handle file drop - you can extend this based on your needs
+      console.log('File drop detected:', event.dataTransfer.files);
+      return null; // Return null to indicate this is not an internal drag
+    }
+
+    // Handle internal drag operations
+    try {
+      const jsonData = event.dataTransfer.getData('application/json');
+      if (jsonData) {
+        const transferData = JSON.parse(jsonData);
+        const draggableId = transferData.draggableId;
+
+        if (draggableId) {
+          // Get the original instance from drag state
+          const dragData = dragState.getDraggable(draggableId);
+          if (dragData) {
+            return dragData;
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error getting drag data:', error);
+    }
+
+    return null;
+  }
+
   /**
    * Handle drag enter with improved DOM traversal check
    * @param {DragEvent} event
@@ -171,28 +194,14 @@
     // 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);
+    // Get the drag data
+    const dragData = getDragData(event);
 
-      // Update state based on acceptance
-      if (dragData) {
-        currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
-      } else {
-        currentState = DRAG_OVER;
-      }
+    // Update state based on acceptance
+    if (dragData) {
+      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
     } 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;
-      }
+      currentState = DRAG_OVER;
     }
 
     // Notify listeners
@@ -214,17 +223,8 @@
       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;
-    }
+    // Get the drag data
+    const dragData = getDragData(event);
 
     // Re-evaluate acceptance
     if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
@@ -276,23 +276,20 @@
     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);
+      // Check if this is a file drop first
+      if (event.dataTransfer.types.includes('Files')) {
+        // Handle file drops
+        const files = Array.from(event.dataTransfer.files);
+        console.log('Files dropped:', files);
+
+        // You can add custom file handling here
+        // For now, just reset state and return
+        currentState = READY;
+        return;
       }
 
-      // 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);
-        }
-      }
+      // Get drag data for internal drag operations
+      const dragData = getDragData(event);
 
       // Check if we can accept this drop
       if (dragData && canAcceptDrop(dragData)) {
@@ -309,7 +306,6 @@
         const dropzoneRect = dropzoneElement.getBoundingClientRect();
 
         // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        // This combines your current approach with the border adjustment
         const offsetX =
           event.clientX -
           dropzoneRect.left -
@@ -322,16 +318,13 @@
           borderTopWidth -
           (dragData.offsetY ?? 0);
 
-        // console.debug("dragData", dragData);
-
         const dropResult = onDrop?.({
           event,
           offsetX,
           offsetY,
           zone,
           item: dragData.item,
-          source: dragData.source,
-          metadata: dragData.metadata
+          source: dragData.source
         });
 
         // Handle async or sync results

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

@@ -1,6 +1,6 @@
-export const createOrGetDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
-export const createDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
-export const getDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+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>;
     /**

package/dist/components/tab-bar/HkTabBar.state.svelte.d.ts

@@ -48,7 +48,7 @@ export class HkTabBarState {
      */
     linkTab(index: number, tabElement: HTMLElement): void;
 }
-export const createOrGetState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
-export const createState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
-export const getState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createOrGetState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const getState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
 export type Tab = import("./typedef.js").Tab;

package/dist/components/tab-bar/HkTabBarSelector.state.svelte.d.ts

@@ -14,6 +14,6 @@ export class HkTabBarSelectorState {
     tabBarState: any;
     #private;
 }
-export const createOrGetState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
-export const createState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
-export const getState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const createOrGetState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const createState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const getState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;

package/dist/features/hk-app-layout/HkAppLayout.state.svelte.d.ts

@@ -1,6 +1,6 @@
 export class AppLayoutState {
     landscapeOnSmallScreen: boolean;
 }
-export const createOrGetState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;
-export const createState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;
-export const getState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;
+export const createOrGetState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;
+export const createState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;
+export const getState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;

package/dist/themes/hkdev/components/buttons/button.css

@@ -10,9 +10,11 @@
     --btn-primary-bg: var(--color-primary-500);
     --btn-primary-text: var(--color-primary-50);
     --btn-primary-border: var(--color-primary-500);
+
     --btn-primary-selected-bg: var(--color-primary-700);
-    --btn-primary-selected-border: var(--color-primary-800);
     --btn-primary-selected-text: var(--color-primary-50);
+    --btn-primary-selected-border: var(--color-primary-800);
+
     --btn-primary-hover-bg: var(--color-primary-600);
     --btn-primary-hover-border: var(--color-primary-600);
     --btn-primary-focus-outline: var(--color-primary-800);
@@ -21,9 +23,11 @@
     --btn-secondary-bg: transparent;
     --btn-secondary-text: var(--color-secondary-500);
     --btn-secondary-border: var(--color-secondary-500);
+
     --btn-secondary-selected-bg: var(--color-secondary-100);
-    --btn-secondary-selected-border: var(--color-secondary-600);
     --btn-secondary-selected-text: var(--color-secondary-800);
+    --btn-secondary-selected-border: var(--color-secondary-600);
+
     --btn-secondary-hover-bg: var(--color-secondary-50);
     --btn-secondary-hover-border: var(--color-secondary-500);
     --btn-secondary-focus-outline: var(--color-secondary-800);

package/dist/typedef/drag.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {};
 export default _default;
 export type DragData = {
+    draggableId: string;
     offsetX: number;
     offsetY: number;
     /**
@@ -11,12 +12,4 @@ export type DragData = {
      * - Source identifier
      */
     source?: string;
-    /**
-     * - Drag group
-     */
-    group?: string;
-    /**
-     * - Additional metadata
-     */
-    metadata?: any;
 };

package/dist/typedef/drag.js

@@ -1,11 +1,10 @@
 /**
  * @typedef {Object} DragData
+ * @property {string} draggableId
  * @property {number} offsetX
  * @property {number} offsetY
  * @property {any} item - The item being dragged
  * @property {string} [source] - Source identifier
- * @property {string} [group] - Drag group
- * @property {any} [metadata] - Additional metadata
  */
 
 export default {}

package/dist/util/array/index.d.ts

@@ -27,12 +27,12 @@ export function toArray(value: any, start?: number, end?: number): any[];
  * Convert an async iterator to an array
  * - If no async iterator is passed, the value will be processed by `from()`
  *
- * @param {AsyncIterator|mixed} value
+ * @param {AsyncIterator|any} value
  *   Async iterator or value to convert to array
  *
- * @returns {Array} list of items returned by the iterator
+ * @returns {Promise<Array>} list of items returned by the iterator
  */
-export function toArrayAsync(value: AsyncIterator<any, any, any> | mixed): any[];
+export function toArrayAsync(value: AsyncIterator<any, any, any> | any): Promise<any[]>;
 /**
  * Convert a path string to an array path
  * - The path string will be spit at the `pathSeparator` token
@@ -51,13 +51,13 @@ export function toArrayPath(path: string | string[], pathSeparator?: string): st
 /**
  * Push a value to an array if it is not null, undefined or an empty string
  *
- * @template {arrray} T
+ * @template {array} T
  * @param {T} arr
  * @param {any} value
  *
  * @returns {T} arr
  */
-export function pushNotEmpty<T extends arrray>(arr: T, value: any): T;
+export function pushNotEmpty<T extends any[]>(arr: T, value: any): T;
 /**
  * Loop over the supplied array and call the callback for every element
  * - The callback will receive the current element of the array as
@@ -86,12 +86,12 @@ export function loop(arr: any[], callback: Function, additionalArguments: any[])
  *
  *
  *
- * @returns {mixed[]} values
+ * @returns {any[]|Set<any>} values
  */
 export function pathValues(items: object[], path: any, options?: {
     outputAsSet?: boolean;
     pathSeparator?: string;
-}): mixed[];
+}): any[] | Set<any>;
 /**
  * Sort function that sorts a list of objects by values encountered at the
  * specified key values of the object.

package/dist/util/array/index.js

@@ -21,8 +21,6 @@ export { smallestFirst, largestFirst };
 
 export { arraySlice, arrayConcat };
 
-// -----------------------------------------------------------------------------
-
 /**
  * Convert a value to an array
  * - Converts an Arguments object to plain JS array
@@ -83,23 +81,24 @@ export function toArray(value, start, end) {
 		//
 		return Array.from(value);
 	} else {
-		return arraySlice(value, start, end);
+		return arraySlice.call(value, start, end);
 	}
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Convert an async iterator to an array
  * - If no async iterator is passed, the value will be processed by `from()`
  *
- * @param {AsyncIterator|mixed} value
+ * @param {AsyncIterator|any} value
  *   Async iterator or value to convert to array
  *
- * @returns {Array} list of items returned by the iterator
+ * @returns {Promise<Array>} list of items returned by the iterator
  */
 export async function toArrayAsync(value) {
-	if (value instanceof Object && typeof value[Symbol.asyncIterator] === 'function') {
+	if (
+		value instanceof Object &&
+		typeof value[Symbol.asyncIterator] === 'function'
+	) {
 		// value is an async iterator
 
 		const arr = [];
@@ -116,8 +115,6 @@ export async function toArrayAsync(value) {
 	}
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Convert a path string to an array path
  * - The path string will be spit at the `pathSeparator` token
@@ -139,16 +136,16 @@ export function toArrayPath(path, pathSeparator = PATH_SEPARATOR) {
 		// path is already an array
 		return path;
 	} else {
-		throw new Error('Missing or invalid parameter [path] (expected string or array)');
+		throw new Error(
+			'Missing or invalid parameter [path] (expected string or array)'
+		);
 	}
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Push a value to an array if it is not null, undefined or an empty string
  *
- * @template {arrray} T
+ * @template {array} T
  * @param {T} arr
  * @param {any} value
  *
@@ -164,8 +161,6 @@ export function pushNotEmpty(arr, value) {
 	return arr;
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Loop over the supplied array and call the callback for every element
  * - The callback will receive the current element of the array as
@@ -213,8 +208,6 @@ export function loop(arr, callback, additionalArguments) {
 	}
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Get a list of all values from the items in the array at the
  * specified path
@@ -231,7 +224,7 @@ export function loop(arr, callback, additionalArguments) {
  *
  *
  *
- * @returns {mixed[]} values
+ * @returns {any[]|Set<any>} values
  */
 export function pathValues(items, path, options = {}) {
 	// == Process parameters
@@ -277,8 +270,6 @@ export function pathValues(items, path, options = {}) {
 	return values;
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Sort function that sorts a list of objects by values encountered at the
  * specified key values of the object.
@@ -306,8 +297,6 @@ export function sortByKeyValue(items, key, compareFn = smallestFirst) {
 	});
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Sort function that sorts a list of objects by values encountered at the
  * specified key values of the object.
@@ -335,8 +324,6 @@ export function sortByKeyValueReversed(items, key, compareFn = largestFirst) {
 	});
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Sort function that sorts a list of objects by values encountered at the
  * specified object path.
@@ -393,8 +380,6 @@ export function sortByPathValue(items, path, compareFn = smallestFirst) {
 	cache.clear();
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Find the first item in the list of objects that matches the selector
  * - All items in the supplied array must be objects
@@ -411,8 +396,6 @@ export function findFirst(arr, selector) {
 	return selectorObj.findFirst(arr);
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Returns all items from the list of items that match the selector
  * - All items in the supplied array must be objects
@@ -429,8 +412,6 @@ export function findAll(arr, selector) {
 	return selectorObj.findAll(arr);
 }
 
-// -----------------------------------------------------------------------------
-
 /**
  * Convert array to an object using a list of keys for each index
  *

package/dist/util/svelte/state-context/index.d.ts

@@ -14,5 +14,5 @@
  *   getState
  * ]}
  */
-export function defineStateContext<T>(State: new () => T): [(contextKey: import("../../../typedef").ContextKey) => T, (contextKey: import("../../../typedef").ContextKey) => T, (contextKey: import("../../../typedef").ContextKey) => T];
+export function defineStateContext<T>(State: new () => T): [(contextKey?: import("../../../typedef").ContextKey) => T, (contextKey?: import("../../../typedef").ContextKey) => T, (contextKey?: import("../../../typedef").ContextKey) => T];
 export const DEFAULT_CONTEXT_KEY: "default";

package/dist/util/svelte/state-context/index.js

@@ -30,7 +30,7 @@ export function defineStateContext(State) {
   /**
    * Internal function to get the supplied key or the shared key
    *
-   * @param {import('../../../typedef').ContextKey} contextKey
+   * @param {import('../../../typedef').ContextKey} [contextKey]
    *
    * @returns {Symbol} key
    */
@@ -55,7 +55,7 @@ export function defineStateContext(State) {
   /**
    * Create component state
    *
-   * @param {import('../../../typedef').ContextKey} contextKey
+   * @param {import('../../../typedef').ContextKey} [contextKey]
    *
    * @returns {T} state
    */
@@ -80,7 +80,7 @@ export function defineStateContext(State) {
   /**
    * Get component state or create a new state if it does not yet exist
    *
-   * @param {import('../../../typedef').ContextKey} contextKey
+   * @param {import('../../../typedef').ContextKey} [contextKey]
    *
    * @returns {T} state
    */
@@ -99,7 +99,7 @@ export function defineStateContext(State) {
    *
    * @throws Will throw an error if the state-context does not exist
    *
-   * @param {import('../../../typedef').ContextKey} contextKey
+   * @param {import('../../../typedef').ContextKey} [contextKey]
    *
    * @returns {T} state
    */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.85",
+	"version": "0.1.87",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -57,8 +57,10 @@
 		"./typedef": "./dist/typedef/index.js"
 	},
 	"peerDependencies": {
+		"@eslint/js": "^9.27.0",
 		"@steeze-ui/heroicons": "^2.4.2",
 		"@sveltejs/kit": "^2.15.2",
+		"eslint-plugin-import": "^2.31.0",
 		"pino": "^9.6.0",
 		"pino-pretty": "^13.0.0",
 		"runed": "^0.23.0",
@@ -68,6 +70,7 @@
 		"zod": "^3.24.2"
 	},
 	"devDependencies": {
+		"@eslint/js": "^9.27.0",
 		"@playwright/test": "^1.50.1",
 		"@skeletonlabs/skeleton": "3.0.0-next.2",
 		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
@@ -82,6 +85,7 @@
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.21.0",
 		"eslint-config-prettier": "^10.0.2",
+		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-svelte": "^3.0.2",
 		"fake-indexeddb": "^6.0.0",
 		"globals": "^16.0.0",