@marianmeres/stuic 3.37.0 → 3.38.0

package/dist/components/ImageCycler/ImageCycler.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ImageCyclerImage {
+		src: string;
+		alt?: string;
+		title?: string;
+		description?: string;
+		[key: string]: unknown;
+	}
+
+	export type ImageCyclerFit = "cover" | "contain" | "fill";
+
+	export interface Props {
+		images: ImageCyclerImage[];
+		fit?: ImageCyclerFit;
+		minWait?: number;
+		transitionDuration?: number;
+		onclick?: (image: ImageCyclerImage, index: number) => void;
+		title?: Snippet<[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]>;
+		description?: Snippet<[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]>;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { preloadImg } from "../../utils/preload-img.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	let {
+		images,
+		fit = "cover",
+		minWait = 3000,
+		transitionDuration = 500,
+		onclick,
+		title,
+		description,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+	}: Props = $props();
+
+	let currentIndex = $state(0);
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-image-cycler", classProp));
+
+	let _onclick = $derived(onclick ? () => onclick(images[currentIndex], currentIndex) : undefined);
+
+	$effect(() => {
+		const idx = currentIndex;
+		if (images.length <= 1) return;
+		let cancelled = false;
+		const nextIndex = (idx + 1) % images.length;
+		Promise.all([
+			preloadImg({ src: images[nextIndex].src }),
+			new Promise<void>((resolve) => setTimeout(resolve, minWait)),
+		]).then(() => {
+			if (!cancelled) currentIndex = nextIndex;
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+</script>
+
+<div bind:this={el} class={_class}>
+	{#key currentIndex}
+		<div
+			class="stuic-image-cycler-bg"
+			data-fit={!unstyled ? fit : undefined}
+			style:background-image="url({images[currentIndex].src})"
+			role="img"
+			aria-label={images[currentIndex].alt ?? images[currentIndex].title ?? ""}
+			in:fade={{ duration: transitionDuration }}
+			out:fade={{ duration: transitionDuration }}
+		></div>
+	{/key}
+
+	{#if title || description}
+		{#key currentIndex}
+			<div
+				class="stuic-image-cycler-meta"
+				in:fade={{ duration: transitionDuration }}
+				out:fade={{ duration: transitionDuration }}
+			>
+				{#if title}
+					{@render title({ image: images[currentIndex], index: currentIndex, onclick: _onclick })}
+				{/if}
+				{#if description}
+					{@render description({ image: images[currentIndex], index: currentIndex, onclick: _onclick })}
+				{/if}
+			</div>
+		{/key}
+	{/if}
+</div>

package/dist/components/ImageCycler/ImageCycler.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from "svelte";
+export interface ImageCyclerImage {
+    src: string;
+    alt?: string;
+    title?: string;
+    description?: string;
+    [key: string]: unknown;
+}
+export type ImageCyclerFit = "cover" | "contain" | "fill";
+export interface Props {
+    images: ImageCyclerImage[];
+    fit?: ImageCyclerFit;
+    minWait?: number;
+    transitionDuration?: number;
+    onclick?: (image: ImageCyclerImage, index: number) => void;
+    title?: Snippet<[{
+        image: ImageCyclerImage;
+        index: number;
+        onclick: (() => void) | undefined;
+    }]>;
+    description?: Snippet<[{
+        image: ImageCyclerImage;
+        index: number;
+        onclick: (() => void) | undefined;
+    }]>;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLElement;
+}
+declare const ImageCycler: import("svelte").Component<Props, {}, "el">;
+type ImageCycler = ReturnType<typeof ImageCycler>;
+export default ImageCycler;

package/dist/components/ImageCycler/index.css

@@ -0,0 +1,28 @@
+:root {
+  --stuic-image-cycler-transition-duration: 500ms;
+}
+
+@layer components {
+  .stuic-image-cycler {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .stuic-image-cycler-bg {
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .stuic-image-cycler-bg[data-fit="cover"]   { background-size: cover; }
+  .stuic-image-cycler-bg[data-fit="contain"] { background-size: contain; }
+  .stuic-image-cycler-bg[data-fit="fill"]    { background-size: 100% 100%; }
+
+  .stuic-image-cycler-meta {
+    position: absolute;
+    inset: 0;
+  }
+}

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

@@ -0,0 +1 @@
+export { default as ImageCycler, type Props as ImageCyclerProps, type ImageCyclerImage, type ImageCyclerFit, } from "./ImageCycler.svelte";

package/dist/components/ImageCycler/index.js

@@ -0,0 +1 @@
+export { default as ImageCycler, } from "./ImageCycler.svelte";

package/dist/index.css

@@ -41,6 +41,7 @@ In practice:
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
 @import "./components/H/index.css";
+@import "./components/ImageCycler/index.css";
 @import "./components/IconSwap/index.css";
 @import "./components/Input/index.css";
 @import "./components/KbdShortcut/index.css";

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/H/index.js";
+export * from "./components/ImageCycler/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/IconSwap/index.js";
 export * from "./components/Input/index.js";

package/dist/index.js

@@ -43,6 +43,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/H/index.js";
+export * from "./components/ImageCycler/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/IconSwap/index.js";
 export * from "./components/Input/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.37.0",
+  "version": "3.38.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",