@marianmeres/stuic 2.40.0 → 2.41.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -30,6 +30,7 @@
 	import { tooltip } from "../../actions/index.js";
 	import { X } from "../X/index.js";
 	import { preloadImgs } from "../../utils/preload-img.js";
+	import { fade } from "svelte/transition";
 
 	export type AssetPreviewUrlObj = {
 		// o
@@ -59,7 +60,13 @@
 		/** Optional translate function */
 		t?: TranslateFn;
 		/** Optional delete handler - receives the current asset and its index */
-		onDelete?: (asset: AssetPreview, index: number) => void;
+		onDelete?: (
+			asset: AssetPreview,
+			index: number,
+			controls: {
+				close: () => void;
+			}
+		) => void;
 	}
 
 	export function getAssetIcon(ext?: string) {
@@ -163,6 +170,7 @@
 	);
 	let previewIdx = $state<number>(0);
 	let modal: Modal | undefined = $state();
+	let dotTooltip: string | undefined = $state();
 
 	// Zoom state
 	const ZOOM_LEVELS = [1, 1.5, 2, 3, 4] as const;
@@ -187,6 +195,9 @@
 	$effect(() => {
 		const visible = modal?.visibility().visible;
 		if (visible) {
+			// Reset preview index on modal open
+			previewIdx = 0;
+
 			// perhaps we should have some upper limit here...
 			const toPreload = (assets ?? [])
 				.map((asset) => (asset.isImage ? String(asset.url.full) : ""))
@@ -341,6 +352,10 @@
 		resetZoom();
 	}
 
+	function preview(idx: number) {
+		previewIdx = idx % assets.length;
+	}
+
 	// $inspect(assets).with(clog);
 </script>
 
@@ -454,7 +469,7 @@
 					<button
 						class={twMerge(TOP_BUTTON_CLS, classControls)}
 						type="button"
-						onclick={() => onDelete(previewAsset, previewIdx)}
+						onclick={() => onDelete(previewAsset, previewIdx, { close })}
 						aria-label={t("delete")}
 						use:tooltip
 					>
@@ -493,8 +508,19 @@
 			{/if}
 
 			{#if assets.length > 1}
+				{#if dotTooltip}
+					<div
+						class="absolute bottom-10 left-0 right-0 text-center"
+						transition:fade={{ duration: 100 }}
+					>
+						<span class="bg-white p-1 rounded opacity/75">
+							{dotTooltip}
+						</span>
+					</div>
+				{/if}
 				<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3">
 					{#each assets as _, i}
+						<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 						<button
 							type="button"
 							class={twMerge(
@@ -505,7 +531,13 @@
 								previewIdx = i;
 								resetZoom();
 							}}
-							aria-label={`Go to image ${i + 1}`}
+							aria-label={assets[i]?.name}
+							onmouseover={() => {
+								dotTooltip = assets[i]?.name;
+							}}
+							onmouseout={() => {
+								dotTooltip = undefined;
+							}}
 						></button>
 					{/each}
 				</div>

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

@@ -15,7 +15,9 @@ export interface Props {
     /** Optional translate function */
     t?: TranslateFn;
     /** Optional delete handler - receives the current asset and its index */
-    onDelete?: (asset: AssetPreview, index: number) => void;
+    onDelete?: (asset: AssetPreview, index: number, controls: {
+        close: () => void;
+    }) => void;
 }
 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.40.0",
+  "version": "2.41.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",