@hkdigital/lib-sveltekit 0.0.97 → 0.0.99

package/dist/components/image/ImageBox.svelte__

@@ -0,0 +1,242 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
+
+	import { toSingleImageMeta } from '$lib/util/image/index.js';
+
+	/**
+	 * @example
+	 * import { ImageBox } from '/path/to/ImageBox/index.js';
+	 *
+	 * // @note 'as=metadata' is set by the preset
+	 * import NeonLightsOff from '$lib/img/NeonLightsOff.jpg?preset=gradient';
+	 *
+	 * <!-- Example that fits in an outer-box -->
+	 *
+	 * <div class="outer-box">
+	 *   <ImageBox image={ArmyGreen} fit="contain" position="center center" />
+	 * </div>
+	 *
+	 * <!-- Examples that has have width, height or aspect set -->
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   width="w-[200px]"
+	 *   height="h-[200px]"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   width="w-[200px]"
+	 *   aspect="aspect-square"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   height="h-[200px]"
+	 *   aspect="aspect-square"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <!-- Or hack it using !important -->
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   classes="!w-[200px] !h-[200px] border-8 border-green-500"
+	 * />
+	 */
+
+	/**
+	 * @typedef {import('./typedef.js').ObjectFit} ObjectFit
+	 * @typedef {import('./typedef.js').ObjectPosition} ObjectPosition
+	 *
+	 * @typedef {import('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
+	 *
+	 * @typedef {import('$lib/config/typedef.js').ImageMeta} ImageMeta
+	 *
+	 * @typedef {Object} Props
+	 * @property {string} [base] - Base styling class
+	 * @property {string} [bg] - Background styling class
+	 * @property {string} [classes] - Additional CSS classes
+	 * @property {string} [width] - Width of the image container
+	 * @property {string} [height] - Height of the image container
+	 * @property {string} [aspect] - Aspect ratio of the image container
+	 * @property {string} [overflow] - Overflow behavior
+	 * @property {ObjectFit} [fit] - Object-fit property
+	 * @property {ObjectPosition} [position] - Object-position property
+	 *
+	 * @property {ImageMeta|ImageMeta[]} [imageMeta]
+	 *   Image metadata, TODO: array of image metadata for responsive image
+	 *
+	 * @property {ImageLoader} [imageLoader]
+	 *   Image loader
+	 *
+	 * @property {string} [alt] - Alternative text for the image
+	 * @property {() => LoadingProgress} [onProgress] - Progress callback function
+	 * @property {*} [attr] - Additional arbitrary attributes
+	 */
+
+	/** @type {Props} */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Single image or responsive image meta data
+		imageMeta,
+
+		imageLoader,
+
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
+
+	// let show = $state(false);
+
+	/** @type {HTMLImageElement|undefined} */
+	let imgElem = $state();
+
+	let aspectStyle = $state('');
+
+	// > Loading
+
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	let imageMeta_ = $state();
+
+	$effect(() => {
+		//
+		// Is imageMeta is a list of responsive options: pick one
+		//
+		if (imageMeta) {
+			imageMeta_ = toSingleImageMeta(imageMeta);
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height
+		//
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
+			}
+
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		//
+		// User supplied imageLoader instead of imageMeta
+		//
+		if (!imageMeta && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	/** @type {string|null} */
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Create image loader
+		//
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		//
+		// Start loading if imageLoader_ is in state 'initial'
+		//
+		// TODO: implement lazy flag
+		//
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		//
+		// Get objectUrl when the image has finished loading
+		//
+		if (imageLoader_.loaded) {
+			// @ts-ignore
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-image="box"
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:aspect-ratio={aspectStyle}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-image='box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/components/image/ImageBox.svelte___

@@ -0,0 +1,241 @@
+<script>
+	import { onMount } from 'svelte';
+	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
+	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
+	import { toSingleImageMeta } from '$lib/util/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: string,
+	 *   imageMeta: import('$lib/config/typedef.js').ImageMeta | import('$lib/config/typedef.js').ImageMeta[],
+	 *   imageLoader?: import('$lib/classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   onProgress?: () => import('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress,
+	 *   debug?: boolean,
+	 *   [attr: string]: any
+	 * }}
+	 */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Single image or responsive image meta data
+		imageMeta,
+		imageLoader,
+
+		// Accessibility
+		alt = '',
+
+		// Development
+		debug = false,
+
+		// Additional attributes
+		...attrs
+	} = $props();
+
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
+
+	/** @type {HTMLDivElement|undefined} */
+	let containerElem = $state();
+
+	/** @type {HTMLImageElement|undefined} */
+	let imgElem = $state();
+
+	let aspectStyle = $state('');
+
+	// > Loading
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Is imageMeta is a list of responsive options:
+		// => setup variants loader
+		//
+		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
+			// $inspect(imageMeta, 'Creating variantsLoader');
+
+			variantsLoader = new ImageVariantsLoader(imageMeta, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		//
+		// Single image meta (only if not using variants)
+		//
+		else if (imageMeta && !variantsLoader) {
+			// Only run if there is no variantsLoader
+
+			//$inspect(imageMeta, 'Using single imageMeta');
+
+			imageMeta_ = toSingleImageMeta(imageMeta);
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height for single image
+		//
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
+			}
+
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		//
+		// User supplied imageLoader instead of imageMeta
+		//
+		if (!imageMeta && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	$effect(() => {
+		//
+		// Create image loader for single image
+		//
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		//
+		// Start loading if imageLoader_ is in state 'initial'
+		//
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		//
+		// Get objectUrl when the single image has finished loading
+		//
+		if (imageLoader_?.loaded) {
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		//
+		// Setup resize observer for variants loading
+		//
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	$effect(() => {
+		//
+		// Get variantObjectUrl when a variant has finished loading
+		//
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-image="box"
+	bind:this={containerElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:aspect-ratio={aspectStyle}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-image='box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/components/image/ResponsiveImage.svelte

@@ -37,7 +37,7 @@
 	let imageVariant = $state(null);
 
 	$effect(() => {
-		variantsLoader.updateOptimalImageMeta(containerWidth);
+		variantsLoader.updateOptimalImageMeta({ containerWidth });
 	});
 
 	// $effect(() => {
@@ -53,22 +53,9 @@
 		if (variantsLoader.loaded) {
 			// @ts-ignore
 			imageUrl = variantsLoader.getObjectURL();
-
-			// image = new Image();
-			// image.src = url;
-
-			// image.onload = () => {
-			//   console.log('loaded');
-			//   imageUrl = url;
-			// };
 		}
 
 		return () => {
-			// if (image) {
-			//   image.onload = null;
-			//   image = undefined;
-			// }
-
 			if (imageUrl) {
 				URL.revokeObjectURL(imageUrl);
 				imageUrl = null;
@@ -81,6 +68,7 @@
 	// let image = $derived(variantsLoader.image);
 </script>
 
+™
 <div
 	bind:clientWidth={containerWidth}
 	class="{boxBase} {boxClasses}"

package/dist/components/image/ResponsiveImage.svelte__

@@ -0,0 +1,90 @@
+<script>
+	/** @typedef {import('$lib/config/typedef.js').ImageMeta} ImageMeta */
+
+	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   classes?: string
+	 *   boxBase?: string,
+	 *   boxClasses?: string
+	 *   boxAttrs?: { [attr: string]: * },
+	 *   images: ImageMeta[],
+	 *   alt?: string
+	 * } & { [attr: string]: * }}
+	 */
+	const {
+		base,
+		classes,
+		boxBase,
+		boxClasses,
+		boxAttrs,
+
+		// Functional
+		images,
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	let variantsLoader = new ImageVariantsLoader(images);
+
+	let containerWidth = $state(0);
+
+	/** @type {ImageMeta|null} */
+	let imageVariant = $state(null);
+
+	$effect(() => {
+		variantsLoader.updateOptimalImageMeta({ containerWidth });
+	});
+
+	// $effect(() => {
+	//   console.log('imageVariant', $state.snapshot(imageVariant));
+	// });
+
+	/** @type {string|null} */
+	let imageUrl = $state(null);
+
+	$effect(() => {
+		let image;
+
+		if (variantsLoader.loaded) {
+			// @ts-ignore
+			imageUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (imageUrl) {
+				URL.revokeObjectURL(imageUrl);
+				imageUrl = null;
+			}
+		};
+	});
+
+	let variant = $derived(variantsLoader.variant);
+
+	// let image = $derived(variantsLoader.image);
+</script>
+
+™
+<div
+	bind:clientWidth={containerWidth}
+	class="{boxBase} {boxClasses}"
+	{...boxAttrs}
+>
+	<!-- <p class="p text-white">variant: {JSON.stringify(variant)}</p> -->
+
+	{#if variant}
+		<img
+			data-image="responsive"
+			src={imageUrl ? imageUrl : ''}
+			width={variant.width}
+			height={variant.height}
+			{alt}
+			class="{boxBase} {boxClasses}"
+			{...attrs}
+		/>
+	{/if}
+</div>

package/dist/components/image/index.d.ts

@@ -1,5 +1,4 @@
 export { default as ImageBox } from "./ImageBox.svelte";
-export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
 declare const _default: {};
 export default _default;
 export type ImageMeta = import("../../config/typedef.js").ImageMeta;

package/dist/components/image/index.js

@@ -1,6 +1,5 @@
 /** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
 export { default as ImageBox } from './ImageBox.svelte';
-export { default as ResponsiveImage } from './ResponsiveImage.svelte';
 
 export default {};

package/dist/components/inputs/text-input/TextInput.svelte

@@ -15,7 +15,7 @@
     INVALID,
     REQUIRED,
     DISABLED
-  } from '../../../constants/css-states/index.js';
+  } from '../../../constants/state-labels/input-states.js';
 
   /**
    * @type {{
@@ -136,7 +136,7 @@
     //
     // Return CSS classes that indicate the component's state
     //
-    // @see $lib/constants/css-states
+    // @see $lib/constants/state-labels
     //
     const outArr = [];
 

package/dist/config/tailwind.extend.d.ts

@@ -47,3 +47,10 @@ export const borderWidth: {
     '2p': string;
     '4p': string;
 };
+export const strokeWidth: {
+    '1p': string;
+    '2p': string;
+    '4p': string;
+    '6p': string;
+    '8p': string;
+};

package/dist/config/tailwind.extend.js

@@ -54,3 +54,11 @@ export const borderWidth = {
   '2p': '0.125rem',
   '4p': '0.250rem'
 };
+
+export const strokeWidth = {
+  '1p': '0.0625rem',
+  '2p': '0.125rem',
+  '4p': '0.250rem',
+  '6p': '0.375rem',
+  '8p': '0.5rem'
+};

package/dist/constants/index.js

@@ -1,3 +1,3 @@
 export * as regexp from './regexp/index.js';
 export * as time from './time.js';
-//export * as cssStates from './css-states/index.js';
+//export * as stateLabels from './state-labels/index.js';

package/dist/constants/state-labels/submit-states.d.ts

@@ -0,0 +1,4 @@
+export const IDLE: "idle";
+export const SUBMITTING: "submitting";
+export const SUBMIT_OK: "submit-ok";
+export const SUBMIT_FAILED: "submit-failed";

package/dist/constants/state-labels/submit-states.js

@@ -0,0 +1,4 @@
+export const IDLE = 'idle';
+export const SUBMITTING = 'submitting';
+export const SUBMIT_OK = 'submit-ok';
+export const SUBMIT_FAILED = 'submit-failed';

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

@@ -7,3 +7,19 @@
  * @param {ImageMeta|ImageMeta[]} imageMeta
  */
 export function toSingleImageMeta(imageMeta: ImageMeta | ImageMeta[]): import("../../config/typedef").ImageMeta;
+/**
+ * Calculate effective width based on container dimensions and fit mode
+ *
+ * @param {object} params
+ * @param {number} [params.containerWidth] Container width in pixels
+ * @param {number} [params.containerHeight] Container height in pixels
+ * @param {number} params.imageAspectRatio Original image aspect ratio (width/height)
+ * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
+ * @returns {number} Effective width needed
+ */
+export function calculateEffectiveWidth({ containerWidth, containerHeight, imageAspectRatio, fit }: {
+    containerWidth?: number;
+    containerHeight?: number;
+    imageAspectRatio: number;
+    fit?: "cover" | "contain" | "fill";
+}): number;