@hkdigital/lib-sveltekit 0.1.6 → 0.1.7

package/dist/components/image/ImageBox.svelte

@@ -1,208 +1,208 @@
-<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?: string,
-	 *   imageMeta: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
-	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
-	 *   alt?: string,
-	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => 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 = '',
-
-		// 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);
-		}
-		// Report progress from single image loader
-		else if (imageLoader_) {
-			onProgress(imageLoader_.progress);
-		}
-	});
-
-	$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-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-image='box'] {
-		max-width: 100%;
-		max-height: 100%;
-	}
-
-	img {
-		display: block;
-		width: 100%;
-		height: 100%;
-		max-width: 100%;
-		max-height: 100%;
-		-o-object-fit: var(--fit);
-		   object-fit: var(--fit);
-		-o-object-position: var(--pos);
-		   object-position: var(--pos);
-	}
-</style>
+<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?: string,
+	 *   imageMeta: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
+	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => 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 = '',
+
+		// 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);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress);
+		}
+	});
+
+	$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-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-image='box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		-o-object-fit: var(--fit);
+		   object-fit: var(--fit);
+		-o-object-position: var(--pos);
+		   object-position: var(--pos);
+	}
+</style>

package/dist/components/image/ImageBox.svelte.d.ts

@@ -1,4 +1,23 @@
 export default ImageBox;
+type ImageBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        aspect?: string;
+        overflow?: string;
+        fit?: "fill" | "contain" | "cover";
+        position?: string;
+        imageMeta: ImageMeta | ImageMeta[];
+        imageLoader?: ImageLoader;
+        alt?: string;
+        onProgress?: (progress: LoadingProgress) => void;
+    }>): void;
+};
 declare const ImageBox: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/dist/components/image/index.js

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

package/dist/components/image/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/index.js

@@ -1,2 +1,2 @@
-// export * as area from "./area/index.js";
-// export * as icon from "./icon/index.js";
+// export * as area from "./area/index.js";
+// export * as icon from "./icon/index.js";

package/dist/components/inputs/index.js

@@ -1 +1 @@
-export { default as TextInput } from './text-input/TextInput.svelte';
+export { default as TextInput } from './text-input/TextInput.svelte';