@hkdigital/lib-sveltekit 0.1.1 → 0.1.3

package/dist/components/image/EnhancedImage.svelte__

@@ -1,162 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  /**
-   * @example
-   * import { EnhancedImage }
-   *   from '$lib/components/EnhancedImage/index.js';
-   *
-   * <EnhancedImage
-   *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
-   *   src={NeonLightsOff}
-   *   onload={() => {
-   *     console.log('loaded');
-   *   }}
-   * />
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   overflow?: string,
-   *   aspect?: string,
-   *   fit?: string,
-   *   position?: string,
-   *   src: string | import('$lib/typedef/image.js').Picture,
-   *   alt?: string,
-   *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   loading?: string
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    classes,
-
-    overflow = 'overflow-clip',
-    aspect,
-
-    fit = 'contain',
-    position = 'left top',
-
-    src,
-    alt = '',
-    onload,
-    onerror,
-    loading,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  // let show = $state(false);
-
-  /** @type {HTMLDivElement|undefined} */
-  let imgBoxElem = $state();
-
-  /** @type {HTMLImageElement|undefined} */
-  let imgElem = $state();
-
-  /** @type {string | import('$lib/typedef/image.js').Picture} */
-  let src_;
-
-  $effect(() => {
-    if (src_ && src !== src_) {
-      throw new Error('Property [src] change is not supported');
-    }
-  });
-
-  let aspectStyle = $state('');
-
-  // > Event names
-  const LOAD = 'load';
-  const ERROR = 'error';
-
-  // > onMount
-
-  onMount(() => {
-    // show = true;
-
-    imgElem = imgBoxElem?.getElementsByTagName('img')[0];
-
-    if (!imgElem) {
-      throw new Error('Missing IMG element');
-    }
-
-    // > Auto set box aspect to same as image aspect if not set
-
-    if (!aspect) {
-      aspectStyle = `${imgElem.width / imgElem.height}`;
-    } else {
-      aspectStyle = '';
-    }
-
-    // > Register image onload and onerror handlers
-
-    /** @type {( e: Event ) => void} */
-    let onloadFn;
-
-    if (onload) {
-      if (imgElem?.complete) {
-        onload({ type: LOAD, target: imgElem });
-      } else {
-        onloadFn = onload;
-        imgElem?.addEventListener(LOAD, onloadFn);
-      }
-    }
-
-    /** @type {( e: Event ) => void} */
-    let onerrorFn;
-
-    if (onerror) {
-      onerrorFn = onerror;
-      imgElem?.addEventListener(ERROR, onerrorFn);
-    }
-
-    return () => {
-      if (onloadFn) {
-        imgElem?.removeEventListener(LOAD, onloadFn);
-      }
-
-      if (onerrorFn) {
-        imgElem?.removeEventListener(ERROR, onerrorFn);
-      }
-    };
-  });
-</script>
-
-<div
-  data-hk-enhanced-image
-  bind:this={imgBoxElem}
-  class="{base} {bg} {aspect} {overflow} {classes}"
-  style:--fit={fit}
-  style:--pos={position}
-  style:aspect-ratio={aspectStyle}
-  {...attrs}
->
-  <enhanced:img {src} {alt} />
-</div>
-
-<style>
-  [data-hk-enhanced-image],
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  :global([data-hk-enhanced-image] img) {
-    object-fit: var(--fit);
-    object-position: var(--pos);
-  }
-</style>

package/dist/components/image/ImageBox.svelte__

@@ -1,242 +0,0 @@
-<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___

@@ -1,241 +0,0 @@
-<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>