@hkdigital/lib-core 0.3.9 → 0.3.11

package/dist/{components → ui/components}/image-box/ImageBox.svelte

@@ -1,210 +1,210 @@
-<script>
-	import { ImageLoader } from '../../classes/svelte/image/index.js';
-	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
-	import { toSingleImageMeta } from '../../util/image/index.js';
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   classes?: string,
-	 *   width?: string,
-	 *   height?: string,
-	 *   aspect?: string,
-	 *   overflow?: string,
-	 *   fit?: 'contain' | 'cover' | 'fill',
-	 *   position?: import('../../typedef/image.js').ObjectPosition,
-	 *   imageMeta?: import('../../typedef').ImageSource,
-	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
-	 *   alt?: string,
-	 *   id?: string|Symbol
-	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress, id: string|Symbol) => void,
-	 *   [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',
-
-		// Image data
-		imageMeta,
-		imageLoader,
-
-		// Accessibility
-		alt = '',
-
-		// Identification
-		id = Symbol('ImageBox'),
-
-		// Events
-		onProgress,
-
-		// Additional attributes
-		...attrs
-	} = $props();
-
-	// if (!imageMeta) {
-	// 	throw new Error('Missing [imageMeta]');
-	// }
-
-	/** @type {HTMLDivElement|undefined} */
-	let containerElem = $state();
-
-	let imageMeta_ = $state();
-	let variantsLoader = $state();
-	let variantObjectUrl = $state(null);
-	let objectUrl = $state(null);
-
-	// For single image meta
-	let metaWidth = $state(0);
-	let metaHeight = $state(0);
-
-	/** @type {ImageLoader|undefined} */
-	let imageLoader_ = $state();
-
-	$effect(() => {
-		// Setup variants loader for responsive images
-		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
-			variantsLoader = new ImageVariantsLoader(imageMeta, {
-				devicePixelRatio: window.devicePixelRatio
-			});
-		}
-		// Handle single image meta
-		else if (imageMeta && !variantsLoader) {
-			imageMeta_ = toSingleImageMeta(imageMeta);
-		}
-	});
-
-	// Handle progress reporting
-	$effect(() => {
-		if (!onProgress) return;
-
-		// Report progress from variants loader
-		if (variantsLoader) {
-			onProgress(variantsLoader.progress, id);
-		}
-		// Report progress from single image loader
-		else if (imageLoader_) {
-			onProgress(imageLoader_.progress, id);
-		}
-	});
-
-	$effect(() => {
-		if (imageMeta_) {
-			metaWidth = imageMeta_.width ?? 0;
-			metaHeight = imageMeta_.height ?? 0;
-		}
-	});
-
-	$effect(() => {
-		if (!imageMeta && imageLoader && !imageLoader_) {
-			imageLoader_ = imageLoader;
-			imageMeta_ = imageLoader.imageMeta;
-		}
-	});
-
-	$effect(() => {
-		if (imageMeta_ && !imageLoader_) {
-			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
-		}
-	});
-
-	$effect(() => {
-		if (imageLoader_?.initial) {
-			imageLoader_.load();
-		}
-	});
-
-	$effect(() => {
-		if (imageLoader_?.loaded) {
-			objectUrl = imageLoader_.getObjectURL();
-		}
-
-		return () => {
-			if (objectUrl) {
-				URL.revokeObjectURL(objectUrl);
-				objectUrl = null;
-			}
-		};
-	});
-
-	$effect(() => {
-		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(() => {
-		if (variantsLoader?.loaded) {
-			variantObjectUrl = variantsLoader.getObjectURL();
-		}
-
-		return () => {
-			if (variantObjectUrl) {
-				URL.revokeObjectURL(variantObjectUrl);
-				variantObjectUrl = null;
-			}
-		};
-	});
-</script>
-
-<div
-	data-component="image-box"
-	bind:this={containerElem}
-	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
-	style:--fit={fit}
-	style:--pos={position}
-	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-component='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>
+<script>
+	import { ImageLoader } from '../../../network/loaders.js';
+	import { ImageVariantsLoader } from '../../../network/loaders.js';
+	import { toSingleImageMeta } from '../../../network/loaders/image/utils/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: import('../../../network/typedef.js').ObjectPosition,
+	 *   imageSource?: import('../../../network/typedef.js').ImageSource,
+	 *   imageLoader?: import('../../../network/loaders.js').ImageLoader,
+	 *   alt?: string,
+	 *   id?: string|Symbol
+	 *   onProgress?: (progress: import('../../../network/typedef.js').LoadingProgress, id: string|Symbol) => void,
+	 *   [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',
+
+		// Image data
+		imageSource,
+		imageLoader,
+
+		// Accessibility
+		alt = '',
+
+		// Identification
+		id = Symbol('ImageBox'),
+
+		// Events
+		onProgress,
+
+		// Additional attributes
+		...attrs
+	} = $props();
+
+	// if (!imageMeta) {
+	// 	throw new Error('Missing [imageMeta]');
+	// }
+
+	/** @type {HTMLDivElement|undefined} */
+	let containerElem = $state();
+
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
+
+	// For single image meta
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		// Setup variants loader for responsive images
+		if (Array.isArray(imageSource) && !imageLoader && !variantsLoader) {
+			variantsLoader = new ImageVariantsLoader(imageSource, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		// Handle single image meta
+		else if (imageSource && !variantsLoader) {
+			imageMeta_ = toSingleImageMeta(imageSource);
+		}
+	});
+
+	// Handle progress reporting
+	$effect(() => {
+		if (!onProgress) return;
+
+		// Report progress from variants loader
+		if (variantsLoader) {
+			onProgress(variantsLoader.progress, id);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress, id);
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_) {
+			metaWidth = imageMeta_.width ?? 0;
+			metaHeight = imageMeta_.height ?? 0;
+		}
+	});
+
+	$effect(() => {
+		if (!imageSource && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader(imageMeta_);
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.loaded) {
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		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(() => {
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-component="image-box"
+	bind:this={containerElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	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-component='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 → ui/components}/image-box/ImageBox.svelte.d.ts

@@ -10,9 +10,9 @@ type ImageBox = {
         height?: string;
         aspect?: string;
         overflow?: string;
-        fit?: "fill" | "cover" | "contain";
+        fit?: "fill" | "contain" | "cover";
         position?: string;
-        imageMeta?: ImageSource;
+        imageSource?: ImageSource;
         imageLoader?: ImageLoader;
         alt?: string;
         id?: string | Symbol;
@@ -29,10 +29,10 @@ declare const ImageBox: import("svelte").Component<{
     aspect?: string;
     overflow?: string;
     fit?: "contain" | "cover" | "fill";
-    position?: import("../../typedef/image.js").ObjectPosition;
-    imageMeta?: import("../../typedef").ImageSource;
-    imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
+    position?: import("../../../network/typedef.js").ObjectPosition;
+    imageSource?: import("../../../network/typedef.js").ImageSource;
+    imageLoader?: import("../../../network/loaders.js").ImageLoader;
     alt?: string;
     id?: string | Symbol;
-    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress, id: string | Symbol) => void;
+    onProgress?: (progress: import("../../../network/typedef.js").LoadingProgress, id: string | Symbol) => void;
 }, {}, "">;

package/dist/ui/components/image-box/index.js

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

package/dist/{components → ui/components}/image-box/typedef.js

@@ -1,32 +1,32 @@
-/**
- * @typedef {(
- *   'contain' |
- *   'cover' |
- *   'fill' |
- *   'none' |
- *   'scale-down'
- * )} ObjectFit
- */
-
-/**
- * @typedef {(
- *   'left' |
- *   'center' |
- *   'right' |
- *   'top' |
- *   'bottom' |
- *   'left top' |
- *   'left center' |
- *   'left bottom' |
- *   'center top' |
- *   'center center' |
- *   'center bottom' |
- *   'right top' |
- *   'right center' |
- *   'right bottom' |
- *   `${number}% ${number}%` |
- *   `${number}px ${number}px`
- * )} ObjectPosition
- */
-
-export default {};
+/**
+ * @typedef {(
+ *   'contain' |
+ *   'cover' |
+ *   'fill' |
+ *   'none' |
+ *   'scale-down'
+ * )} ObjectFit
+ */
+
+/**
+ * @typedef {(
+ *   'left' |
+ *   'center' |
+ *   'right' |
+ *   'top' |
+ *   'bottom' |
+ *   'left top' |
+ *   'left center' |
+ *   'left bottom' |
+ *   'center top' |
+ *   'center center' |
+ *   'center bottom' |
+ *   'right top' |
+ *   'right center' |
+ *   'right bottom' |
+ *   `${number}% ${number}%` |
+ *   `${number}px ${number}px`
+ * )} ObjectPosition
+ */
+
+export default {};

package/dist/{components → ui/components}/index.js

@@ -1,23 +1,23 @@
-export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
-export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
-export { default as GameBox } from './game-box/GameBox.svelte';
-
-export {
-  createOrGetState as createOrGetAppLayoutState,
-  createState as createAppLayoutState,
-  getState as getAppLayoutState
-} from './hk-app-layout/HkAppLayout.state.svelte.js';
-
-export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
-
-export { default as ImageBox } from './image-box/ImageBox.svelte';
-
-export { default as Presenter } from './presenter/Presenter.svelte';
-export { default as ImageSlide } from './presenter/ImageSlide.svelte';
-
-export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
-
-// > Types
-
-export * from './button-group/typedef.js';
-export * from './presenter/typedef.js';
+export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
+export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
+export { default as GameBox } from './game-box/GameBox.svelte';
+
+export {
+  createOrGetState as createOrGetAppLayoutState,
+  createState as createAppLayoutState,
+  getState as getAppLayoutState
+} from './hk-app-layout/HkAppLayout.state.svelte.js';
+
+export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
+
+export { default as ImageBox } from './image-box/ImageBox.svelte';
+
+export { default as Presenter } from './presenter/Presenter.svelte';
+export { default as ImageSlide } from './presenter/ImageSlide.svelte';
+
+export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
+
+// > Types
+
+export * from './button-group/typedef.js';
+export * from './presenter/typedef.js';