@gradio/gallery 0.19.0 → 0.19.2

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @gradio/gallery
 
+## 0.19.2
+
+### Dependency updates
+
+- @gradio/upload@0.19.0
+- @gradio/statustracker@0.15.4
+- @gradio/client@2.7.1
+- @gradio/image@0.28.4
+- @gradio/file@0.16.1
+- @gradio/video@0.23.2
+
+## 0.19.1
+
+### Dependency updates
+
+- @gradio/utils@0.14.2
+- @gradio/client@2.7.0
+
+## 0.19.1
+
+### Dependency updates
+
+- @gradio/client@2.6.0
+- @gradio/atoms@0.26.2
+- @gradio/utils@0.14.1
+- @gradio/upload@0.18.3
+- @gradio/image@0.28.3
+- @gradio/video@0.23.1
+
+## 0.19.1
+
+### Dependency updates
+
+- @gradio/client@2.5.1
+
+## 0.19.1
+
+### Dependency updates
+
+- @gradio/client@2.5.0
+
+## 0.19.1
+
+### Dependency updates
+
+- @gradio/client@2.4.0
+- @gradio/utils@0.14.0
+- @gradio/atoms@0.26.1
+- @gradio/statustracker@0.15.2
+- @gradio/upload@0.18.2
+- @gradio/file@0.16.0
+- @gradio/image@0.28.1
+- @gradio/video@0.23.0
+
 ## 0.19.0
 
 ### Features

package/Example.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { GalleryImage, GalleryVideo } from "./types";
 
-	export let value: (GalleryImage | GalleryVideo)[] | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: (GalleryImage | GalleryVideo)[] | null;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/Gallery.stories.svelte

@@ -153,7 +153,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		buttons: ["fullscreen", "download", "share"],
-		sources: ["upload"]
+		sources: ["upload"],
+		allow_preview: true
 	}}
 >
 	{#snippet template(args)}

package/Gallery.test.ts

@@ -630,20 +630,6 @@ describe("Props: sources", () => {
 	});
 });
 
-describe("Props: visual-only", () => {
-	test.todo(
-		"VISUAL: object_fit='contain' vs 'cover' changes image display in thumbnails — needs Playwright visual regression screenshot comparison"
-	);
-
-	test.todo(
-		"VISUAL: height prop sets gallery container height — needs Playwright visual regression screenshot comparison"
-	);
-
-	test.todo(
-		"VISUAL: rows prop controls grid row count — needs Playwright visual regression screenshot comparison"
-	);
-});
-
 describe("Events: change", () => {
 	afterEach(() => cleanup());
 

package/Index.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseGallery } from "./shared/Gallery.svelte";
 	export { default as BaseExample } from "./Example.svelte";
 </script>

package/dist/Example.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { GalleryImage, GalleryVideo } from "./types";
 
-	export let value: (GalleryImage | GalleryVideo)[] | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: (GalleryImage | GalleryVideo)[] | null;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { GalleryImage, GalleryVideo } from "./types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: (GalleryImage | GalleryVideo)[] | null;
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseGallery } from "./shared/Gallery.svelte";
 	export { default as BaseExample } from "./Example.svelte";
 </script>

package/dist/shared/Gallery.svelte

@@ -558,7 +558,7 @@
 	<div class="gallery-container" bind:this={image_container}>
 		{#if selected_media && allow_preview}
 			<span
-				on:keydown={on_keydown}
+				onkeydown={on_keydown}
 				class="preview"
 				class:minimal={mode === "minimal"}
 			>
@@ -623,7 +623,7 @@
 				</IconButtonWrapper>
 				<button
 					class="media-button"
-					on:click={"image" in selected_media
+					onclick={"image" in selected_media
 						? (event) => handle_preview_click(event)
 						: null}
 					style="height: calc(100% - {selected_media.caption
@@ -671,7 +671,7 @@
 					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
-							on:click={() => {
+							onclick={() => {
 								selected_index = i;
 								dispatch_select(i);
 							}}
@@ -805,7 +805,7 @@
 						<button
 							class="thumbnail-item thumbnail-lg"
 							class:selected={selected_index === i}
-							on:click={() => {
+							onclick={() => {
 								if (selected_index === null && allow_preview) {
 									onpreview_open();
 								}
@@ -846,7 +846,10 @@
 						{#if interactive}
 							<button
 								class="delete-button"
-								on:click|stopPropagation={() => handle_item_delete(i)}
+								onclick={(event) => {
+									event.stopPropagation();
+									handle_item_delete(i);
+								}}
 								aria-label="Delete image"
 							>
 								<Clear />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,18 +8,18 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.26.0",
-    "@gradio/client": "^2.3.1",
-    "@gradio/file": "^0.15.1",
+    "@gradio/client": "^2.7.1",
+    "@gradio/atoms": "^0.26.2",
+    "@gradio/file": "^0.16.1",
+    "@gradio/image": "^0.28.4",
+    "@gradio/statustracker": "^0.15.4",
+    "@gradio/upload": "^0.19.0",
     "@gradio/icons": "^0.16.0",
-    "@gradio/image": "^0.28.0",
-    "@gradio/statustracker": "^0.15.1",
-    "@gradio/upload": "^0.18.1",
-    "@gradio/utils": "^0.13.0",
-    "@gradio/video": "^0.22.0"
+    "@gradio/utils": "^0.14.2",
+    "@gradio/video": "^0.23.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@gradio/preview": "^0.17.1"
   },
   "main": "./Index.svelte",
   "main_changeset": true,

package/shared/Gallery.svelte

@@ -558,7 +558,7 @@
 	<div class="gallery-container" bind:this={image_container}>
 		{#if selected_media && allow_preview}
 			<span
-				on:keydown={on_keydown}
+				onkeydown={on_keydown}
 				class="preview"
 				class:minimal={mode === "minimal"}
 			>
@@ -623,7 +623,7 @@
 				</IconButtonWrapper>
 				<button
 					class="media-button"
-					on:click={"image" in selected_media
+					onclick={"image" in selected_media
 						? (event) => handle_preview_click(event)
 						: null}
 					style="height: calc(100% - {selected_media.caption
@@ -671,7 +671,7 @@
 					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
-							on:click={() => {
+							onclick={() => {
 								selected_index = i;
 								dispatch_select(i);
 							}}
@@ -805,7 +805,7 @@
 						<button
 							class="thumbnail-item thumbnail-lg"
 							class:selected={selected_index === i}
-							on:click={() => {
+							onclick={() => {
 								if (selected_index === null && allow_preview) {
 									onpreview_open();
 								}
@@ -846,7 +846,10 @@
 						{#if interactive}
 							<button
 								class="delete-button"
-								on:click|stopPropagation={() => handle_item_delete(i)}
+								onclick={(event) => {
+									event.stopPropagation();
+									handle_item_delete(i);
+								}}
 								aria-label="Delete image"
 							>
 								<Clear />