@hkdigital/lib-sveltekit 0.2.21 → 0.2.22

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

@@ -1,85 +1,85 @@
-// import { createOrGetDragState } from './drag-state.svelte.js';
-
-// /**
-//  * Find the source draggable element from an event
-//  *
-//  * @param {DragEvent} event
-//  * @returns {HTMLElement|null}
-//  */
-// export function findDraggableSource(event) {
-//   const target = /** @type {Element|EventTarget|null} */ (event.target);
-
-//   if (!(target instanceof Element)) {
-//     return null;
-//   }
-
-//   let element = /** @type {Element|null} */ (target);
-
-//   // Walk up the DOM tree
-//   while (element !== null && element !== document.body) {
-//     if (element.hasAttribute('data-id')) {
-//       // Return as HTMLElement if needed
-//       return /** @type {HTMLElement} */ (element);
-//     }
-
-//     element = element.parentElement;
-//   }
-
-//   return null;
-// }
-
-// /**
-//  * Get draggable ID from an event, if available
-//  * @param {DragEvent} event
-//  * @returns {string|null}
-//  */
-// export function getDraggableIdFromEvent(event) {
-//   const element = findDraggableSource(event);
-//   return element ? element.getAttribute('data-id') : null;
-// }
-
-// /**
-//  * Process a drop event with the provided data and handlers
-//  * @param {DragEvent} event
-//  * @param {any} data The drag data
-//  * @param {Object} options
-//  * @param {Function} options.onDropStart Optional drop start handler
-//  * @param {Function} options.onDrop Main drop handler
-//  * @param {Function} options.onDropEnd Optional drop end handler
-//  * @param {string} options.zone The drop zone identifier
-//  * @param {Function} options.setState Function to update component state
-//  * @returns {Promise<boolean>} Success status
-//  */
-// export async function processDropWithData(
-//   event,
-//   data,
-//   { onDropStart, onDrop, onDropEnd, zone, setState }
-// ) {
-//   try {
-//     // Update state and notify listeners
-//     setState('ACTIVE_DROP');
-//     onDropStart?.({ event, zone, data });
-
-//     // Call the onDrop handler
-//     const dropResult = onDrop?.({
-//       event,
-//       zone,
-//       item: data.item,
-//       source: data.source,
-//       metadata: data.metadata
-//     });
-
-//     // Handle async or sync results
-//     await Promise.resolve(dropResult);
-
-//     // Success path
-//     setState('READY');
-//     onDropEnd?.({ event, zone, data, success: true });
-//     return true;
-//   } catch (error) {
-//     // Error path
-//     setState('READY');
-//     onDropEnd?.({ event, zone, data, success: false, error });
-//     return false;
-//   }
-// }
+// import { createOrGetDragState } from './drag-state.svelte.js';
+
+// /**
+//  * Find the source draggable element from an event
+//  *
+//  * @param {DragEvent} event
+//  * @returns {HTMLElement|null}
+//  */
+// export function findDraggableSource(event) {
+//   const target = /** @type {Element|EventTarget|null} */ (event.target);
+
+//   if (!(target instanceof Element)) {
+//     return null;
+//   }
+
+//   let element = /** @type {Element|null} */ (target);
+
+//   // Walk up the DOM tree
+//   while (element !== null && element !== document.body) {
+//     if (element.hasAttribute('data-id')) {
+//       // Return as HTMLElement if needed
+//       return /** @type {HTMLElement} */ (element);
+//     }
+
+//     element = element.parentElement;
+//   }
+
+//   return null;
+// }
+
+// /**
+//  * Get draggable ID from an event, if available
+//  * @param {DragEvent} event
+//  * @returns {string|null}
+//  */
+// export function getDraggableIdFromEvent(event) {
+//   const element = findDraggableSource(event);
+//   return element ? element.getAttribute('data-id') : null;
+// }
+
+// /**
+//  * Process a drop event with the provided data and handlers
+//  * @param {DragEvent} event
+//  * @param {any} data The drag data
+//  * @param {Object} options
+//  * @param {Function} options.onDropStart Optional drop start handler
+//  * @param {Function} options.onDrop Main drop handler
+//  * @param {Function} options.onDropEnd Optional drop end handler
+//  * @param {string} options.zone The drop zone identifier
+//  * @param {Function} options.setState Function to update component state
+//  * @returns {Promise<boolean>} Success status
+//  */
+// export async function processDropWithData(
+//   event,
+//   data,
+//   { onDropStart, onDrop, onDropEnd, zone, setState }
+// ) {
+//   try {
+//     // Update state and notify listeners
+//     setState('ACTIVE_DROP');
+//     onDropStart?.({ event, zone, data });
+
+//     // Call the onDrop handler
+//     const dropResult = onDrop?.({
+//       event,
+//       zone,
+//       item: data.item,
+//       source: data.source,
+//       metadata: data.metadata
+//     });
+
+//     // Handle async or sync results
+//     await Promise.resolve(dropResult);
+
+//     // Success path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: true });
+//     return true;
+//   } catch (error) {
+//     // Error path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: false, error });
+//     return false;
+//   }
+// }

package/dist/components/hkdev/blocks/TextBlock.svelte

@@ -1,47 +1,47 @@
-<script>
-    /**
-     * @type {{
-     *   base?: string,
-     *   bg?: string,
-     *   classes?: string,
-     *   title?: import('svelte').Snippet,
-     *   content?: import('svelte').Snippet,
-     *   footer?: import('svelte').Snippet
-     * } & { [attr: string]: * }}
-     */
-    let {
-      // Style
-      base,
-      bg,
-      classes,
-  
-      // Content
-      title,
-      content,
-      footer,
-  
-      // Attributes
-      ...attrs
-    } = $props();
-  </script>
-  
-  <div data-title-text-button-block class="{base} {bg} {classes}" {...attrs}>
-    {#if title}
-      <h1 class="title-box h1">
-        {@render title()}
-      </h1>
-    {/if}
-  
-    {#if content}
-      <div class="content-box">
-        {@render content()}
-      </div>
-    {/if}
-  
-    {#if footer}
-      <div class="footer-box">
-        {@render footer()}
-      </div>
-    {/if}
-  </div>
+<script>
+    /**
+     * @type {{
+     *   base?: string,
+     *   bg?: string,
+     *   classes?: string,
+     *   title?: import('svelte').Snippet,
+     *   content?: import('svelte').Snippet,
+     *   footer?: import('svelte').Snippet
+     * } & { [attr: string]: * }}
+     */
+    let {
+      // Style
+      base,
+      bg,
+      classes,
+  
+      // Content
+      title,
+      content,
+      footer,
+  
+      // Attributes
+      ...attrs
+    } = $props();
+  </script>
+  
+  <div data-title-text-button-block class="{base} {bg} {classes}" {...attrs}>
+    {#if title}
+      <h1 class="title-box h1">
+        {@render title()}
+      </h1>
+    {/if}
+  
+    {#if content}
+      <div class="content-box">
+        {@render content()}
+      </div>
+    {/if}
+  
+    {#if footer}
+      <div class="footer-box">
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
   

package/dist/components/hkdev/buttons/CheckButton.svelte

@@ -1,63 +1,63 @@
-<script>
-    /**
-     *
-     * @type {{
-     *   checked?: boolean,
-     *   activeChild?: boolean,
-     *   inactiveChild?: boolean,
-     *   iconActiveBase?: string,
-     *   classes?: string
-     *   disabled?: boolean,
-     *   title: string,
-     *   iconInactiveBase?: string,
-     *   inactiveClasses?: string,
-     *   activeClasses: string,
-     *   onclick?: () => void,
-     *   onchange?: () => void,
-     *   topic?: string,
-     * }}
-     */
-    let {
-      classes,
-      checked = $bindable(false),
-      iconInactiveBase = 'pointer-events-none',
-      iconActiveBase = 'pointer-events-none',
-      disabled = false,
-      topic,
-      title,
-      onchange = () => {},
-      inactiveChild,
-      activeChild,
-      activeClasses,
-      inactiveClasses,
-      onclick = () => {}
-    } = $props();
-  
-  
-  </script>
-  
-  <button
-    class="variant-filled btn {classes} {checked
-      ? activeClasses
-      : inactiveClasses}"
-  >
-    {title}
-    {#if checked && activeChild}
-      <svg
-        width="10"
-        height="10"
-        viewBox="0 0 10 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M1 9L9 1M1 1L9 9"
-          stroke="white"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    {/if}
-  </button>
+<script>
+    /**
+     *
+     * @type {{
+     *   checked?: boolean,
+     *   activeChild?: boolean,
+     *   inactiveChild?: boolean,
+     *   iconActiveBase?: string,
+     *   classes?: string
+     *   disabled?: boolean,
+     *   title: string,
+     *   iconInactiveBase?: string,
+     *   inactiveClasses?: string,
+     *   activeClasses: string,
+     *   onclick?: () => void,
+     *   onchange?: () => void,
+     *   topic?: string,
+     * }}
+     */
+    let {
+      classes,
+      checked = $bindable(false),
+      iconInactiveBase = 'pointer-events-none',
+      iconActiveBase = 'pointer-events-none',
+      disabled = false,
+      topic,
+      title,
+      onchange = () => {},
+      inactiveChild,
+      activeChild,
+      activeClasses,
+      inactiveClasses,
+      onclick = () => {}
+    } = $props();
+  
+  
+  </script>
+  
+  <button
+    class="variant-filled btn {classes} {checked
+      ? activeClasses
+      : inactiveClasses}"
+  >
+    {title}
+    {#if checked && activeChild}
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 9L9 1M1 1L9 9"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {/if}
+  </button>
   

package/dist/components/icons/HkIcon.svelte

@@ -1,86 +1,86 @@
-<script>
-  /**
-   * Icon component
-   *
-   * Source code adapted from
-   * @see https://github.com/steeze-ui/icons
-   *
-   *
-   * Install icons
-   * For icon packs @see https://github.com/steeze-ui/icons
-   *
-   * @eg install Hero Icons
-   *
-   * pnpm add -D @steeze-ui/heroicons
-   */
-
-  /**
-   * Properties
-   * ----------
-   * src - icon component
-   * size - width and height of the icon as percentage (..%) or in pixels
-   * theme - name of the icon set theme (e.g. 'solid' or 'outline')
-   *
-   * @type {{
-   *   src: import('./typedef.js').IconSource,
-   *   size?: string,
-   *   theme?: string,
-   *   base?: string,
-   *   classes?: string
-   * } & { [attr: string]: any }}
-   */
-  let {
-    src,
-    size = '100%',
-    theme = 'default',
-    base,
-    classes,
-    ...attrs
-  } = $props();
-
-  /** @type {any} */
-  let icon = $state();
-
-  $effect(() => {
-    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
-  });
-
-  if (size !== '100%') {
-    if (size.slice(-1) !== '%') {
-      try {
-        size = parseInt(size, 10) + 'px';
-      } catch (error) {
-        size = '100%';
-      }
-    }
-  }
-</script>
-
-<svg
-  data-hk-icon
-  {...icon?.a}
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  class="{base} {classes}"
-  {...attrs}
->
-  {#each icon?.path ?? [] as a}
-    <path {...a} />
-  {/each}
-  {#each icon?.rect ?? [] as a}
-    <rect {...a} />
-  {/each}
-  {#each icon?.circle ?? [] as a}
-    <circle {...a} />
-  {/each}
-  {#each icon?.polygon ?? [] as a}
-    <polygon {...a} />
-  {/each}
-  {#each icon?.polyline ?? [] as a}
-    <polyline {...a} />
-  {/each}
-  {#each icon?.line ?? [] as a}
-    <line {...a} />
-  {/each}
-</svg>
+<script>
+  /**
+   * Icon component
+   *
+   * Source code adapted from
+   * @see https://github.com/steeze-ui/icons
+   *
+   *
+   * Install icons
+   * For icon packs @see https://github.com/steeze-ui/icons
+   *
+   * @eg install Hero Icons
+   *
+   * pnpm add -D @steeze-ui/heroicons
+   */
+
+  /**
+   * Properties
+   * ----------
+   * src - icon component
+   * size - width and height of the icon as percentage (..%) or in pixels
+   * theme - name of the icon set theme (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./typedef.js').IconSource,
+   *   size?: string,
+   *   theme?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    src,
+    size = '100%',
+    theme = 'default',
+    base,
+    classes,
+    ...attrs
+  } = $props();
+
+  /** @type {any} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
+  });
+
+  if (size !== '100%') {
+    if (size.slice(-1) !== '%') {
+      try {
+        size = parseInt(size, 10) + 'px';
+      } catch (error) {
+        size = '100%';
+      }
+    }
+  }
+</script>
+
+<svg
+  data-hk-icon
+  {...icon?.a}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class="{base} {classes}"
+  {...attrs}
+>
+  {#each icon?.path ?? [] as a}
+    <path {...a} />
+  {/each}
+  {#each icon?.rect ?? [] as a}
+    <rect {...a} />
+  {/each}
+  {#each icon?.circle ?? [] as a}
+    <circle {...a} />
+  {/each}
+  {#each icon?.polygon ?? [] as a}
+    <polygon {...a} />
+  {/each}
+  {#each icon?.polyline ?? [] as a}
+    <polyline {...a} />
+  {/each}
+  {#each icon?.line ?? [] as a}
+    <line {...a} />
+  {/each}
+</svg>