@gradio/gallery 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/gallery
 
+## 0.15.0
+
+### Features
+
+- [#10303](https://github.com/gradio-app/gradio/pull/10303) [`f19ca89`](https://github.com/gradio-app/gradio/commit/f19ca89cdd4040dbaa41bbc3b9915edc032603a0) - Add preview_open and preview_close events to Gallery.  Thanks @freddyaboulton!
+
 ## 0.14.1
 
 ### Fixes

package/Index.svelte

@@ -46,6 +46,8 @@
 		error: string;
 		prop_change: Record<string, any>;
 		clear_status: LoadingStatus;
+		preview_open: never;
+		preview_close: never;
 	}>;
 	export let show_fullscreen_button = true;
 
@@ -112,6 +114,7 @@
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
 				value = await process_upload_files(files);
 				gradio.dispatch("upload", value);
+				gradio.dispatch("change", value);
 			}}
 			on:error={({ detail }) => {
 				loading_status = loading_status || {};
@@ -127,6 +130,8 @@
 			on:select={(e) => gradio.dispatch("select", e.detail)}
 			on:share={(e) => gradio.dispatch("share", e.detail)}
 			on:error={(e) => gradio.dispatch("error", e.detail)}
+			on:preview_open={() => gradio.dispatch("preview_open")}
+			on:preview_close={() => gradio.dispatch("preview_close")}
 			{label}
 			{show_label}
 			{columns}

package/dist/Index.svelte

@@ -88,6 +88,7 @@ async function process_upload_files(files) {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
 				value = await process_upload_files(files);
 				gradio.dispatch("upload", value);
+				gradio.dispatch("change", value);
 			}}
 			on:error={({ detail }) => {
 				loading_status = loading_status || {};
@@ -103,6 +104,8 @@ async function process_upload_files(files) {
 			on:select={(e) => gradio.dispatch("select", e.detail)}
 			on:share={(e) => gradio.dispatch("share", e.detail)}
 			on:error={(e) => gradio.dispatch("error", e.detail)}
+			on:preview_open={() => gradio.dispatch("preview_open")}
+			on:preview_close={() => gradio.dispatch("preview_close")}
 			{label}
 			{show_label}
 			{columns}

package/dist/Index.svelte.d.ts

@@ -35,6 +35,8 @@ declare const __propDef: {
             error: string;
             prop_change: Record<string, any>;
             clear_status: LoadingStatus;
+            preview_open: never;
+            preview_close: never;
         }>;
         show_fullscreen_button?: boolean | undefined;
     };

package/dist/shared/Gallery.svelte

@@ -12,14 +12,7 @@ import { Video } from "@gradio/video/shared";
 import { dequal } from "dequal";
 import { createEventDispatcher, onMount } from "svelte";
 import { tick } from "svelte";
-import {
-  Download,
-  Image as ImageIcon,
-  Maximize,
-  Minimize,
-  Clear,
-  Play
-} from "@gradio/icons";
+import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
 import { FileData } from "@gradio/client";
 import { format_gallery_for_sharing } from "./utils";
 export let show_label = true;
@@ -229,7 +222,10 @@ onMount(() => {
 						<IconButton
 							Icon={Clear}
 							label="Close"
-							on:click={() => (selected_index = null)}
+							on:click={() => {
+								selected_index = null;
+								dispatch("preview_close");
+							}}
 						/>
 					{/if}
 				</IconButtonWrapper>
@@ -330,7 +326,12 @@ onMount(() => {
 					<button
 						class="thumbnail-item thumbnail-lg"
 						class:selected={selected_index === i}
-						on:click={() => (selected_index = i)}
+						on:click={() => {
+							if (selected_index === null && allow_preview) {
+								dispatch("preview_open");
+							}
+							selected_index = i;
+						}}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
 						{#if "image" in entry}

package/dist/shared/Gallery.svelte.d.ts

@@ -28,6 +28,8 @@ declare const __propDef: {
         error: CustomEvent<string>;
         change: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;
+        preview_open: CustomEvent<undefined>;
+        preview_close: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,14 +8,14 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/client": "^1.9.0",
     "@gradio/atoms": "^0.13.0",
     "@gradio/icons": "^0.9.0",
-    "@gradio/image": "^0.20.0",
     "@gradio/statustracker": "^0.10.0",
+    "@gradio/image": "^0.20.0",
+    "@gradio/upload": "^0.14.4",
     "@gradio/utils": "^0.10.0",
     "@gradio/video": "^0.13.0",
-    "@gradio/upload": "^0.14.4",
+    "@gradio/client": "^1.9.0",
     "@gradio/file": "^0.12.0"
   },
   "devDependencies": {

package/shared/Gallery.svelte

@@ -16,14 +16,7 @@
 	import { tick } from "svelte";
 	import type { GalleryImage, GalleryVideo } from "../types";
 
-	import {
-		Download,
-		Image as ImageIcon,
-		Maximize,
-		Minimize,
-		Clear,
-		Play
-	} from "@gradio/icons";
+	import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import type { I18nFormatter } from "@gradio/utils";
@@ -56,6 +49,8 @@
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
+		preview_open: undefined;
+		preview_close: undefined;
 	}>();
 
 	// tracks whether the value of the gallery was reset
@@ -287,7 +282,10 @@
 						<IconButton
 							Icon={Clear}
 							label="Close"
-							on:click={() => (selected_index = null)}
+							on:click={() => {
+								selected_index = null;
+								dispatch("preview_close");
+							}}
 						/>
 					{/if}
 				</IconButtonWrapper>
@@ -388,7 +386,12 @@
 					<button
 						class="thumbnail-item thumbnail-lg"
 						class:selected={selected_index === i}
-						on:click={() => (selected_index = i)}
+						on:click={() => {
+							if (selected_index === null && allow_preview) {
+								dispatch("preview_open");
+							}
+							selected_index = i;
+						}}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
 						{#if "image" in entry}