@marianmeres/stuic 2.42.1 → 2.44.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -55,9 +55,14 @@
 	}
 
 	export interface Props {
-		class?: string;
 		assets: string[] | AssetPreview[];
 		classControls?: string;
+		//
+		modalClassBackdrop?: string;
+		modalClassInner?: string;
+		modalClass?: string;
+		modalClassMain?: string;
+		//
 		/** Optional translate function */
 		t?: TranslateFn;
 		/** Optional delete handler - receives the current asset and its index */
@@ -70,6 +75,8 @@
 		) => void;
 		/** optional "do not display file name" switch flag */
 		noName?: boolean;
+		/** When true (default), panning is clamped to keep image within bounds */
+		clampPan?: boolean;
 	}
 
 	export function getAssetIcon(ext?: string) {
@@ -167,12 +174,16 @@
 	const clog = createClog("AssetsPreview", { color: "auto" });
 
 	let {
-		class: classProp = "",
+		modalClassBackdrop = "",
+		modalClassInner = "",
+		modalClass = "",
+		modalClassMain = "",
 		assets: _assets,
 		t = t_default,
 		classControls = "",
 		onDelete,
 		noName,
+		clampPan = false,
 	}: Props = $props();
 
 	let assets: AssetPreviewNormalized[] = $derived(
@@ -248,7 +259,7 @@
 	}
 
 	// Clamp pan values to keep image within bounds
-	function clampPan(newPanX: number, newPanY: number): { x: number; y: number } {
+	function getClampedPan(newPanX: number, newPanY: number): { x: number; y: number } {
 		if (!imgEl || !containerEl) return { x: newPanX, y: newPanY };
 
 		const imgRect = imgEl.getBoundingClientRect();
@@ -318,9 +329,14 @@
 		const newPanX = startPanX + (clientX - startMouseX);
 		const newPanY = startPanY + (clientY - startMouseY);
 
-		const clamped = clampPan(newPanX, newPanY);
-		panX = clamped.x;
-		panY = clamped.y;
+		if (clampPan) {
+			const clamped = getClampedPan(newPanX, newPanY);
+			panX = clamped.x;
+			panY = clamped.y;
+		} else {
+			panX = newPanX;
+			panY = newPanY;
+		}
 	}
 
 	function panEnd() {
@@ -386,10 +402,10 @@
 	<Modal
 		bind:this={modal}
 		onEscape={modal?.close}
-		classBackdrop="p-4 md:p-4"
-		classInner="max-w-full h-full"
-		class="max-h-full md:max-h-full rounded-lg {classProp}"
-		classMain="flex items-center justify-center relative stuic-assets-preview stuic-assets-preview-open"
+		classBackdrop="p-4 md:p-4 {modalClassBackdrop}"
+		classInner="max-w-full h-full {modalClassInner}"
+		class="max-h-full md:max-h-full rounded-lg {modalClass}"
+		classMain="flex items-center justify-center relative stuic-assets-preview stuic-assets-preview-open {modalClassMain}"
 	>
 		{@const previewAsset = assets?.[previewIdx]}
 		{#if previewAsset}

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

@@ -10,9 +10,12 @@ export interface AssetPreview {
     type?: string;
 }
 export interface Props {
-    class?: string;
     assets: string[] | AssetPreview[];
     classControls?: string;
+    modalClassBackdrop?: string;
+    modalClassInner?: string;
+    modalClass?: string;
+    modalClassMain?: string;
     /** Optional translate function */
     t?: TranslateFn;
     /** Optional delete handler - receives the current asset and its index */
@@ -21,6 +24,8 @@ export interface Props {
     }) => void;
     /** optional "do not display file name" switch flag */
     noName?: boolean;
+    /** When true (default), panning is clamped to keep image within bounds */
+    clampPan?: boolean;
 }
 export declare function getAssetIcon(ext?: string): CallableFunction;
 declare const AssetsPreview: import("svelte").Component<Props, {

package/package.json

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