@gradio/gallery 0.17.0 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @gradio/gallery
 
+## 0.17.2
+
+### Fixes
+
+- [#12927](https://github.com/gradio-app/gradio/pull/12927) [`ca84f3e`](https://github.com/gradio-app/gradio/commit/ca84f3e36c6a3f3c3f0b57084b6f514d6cded1d4) - Fix Gallery CSS Issue.  Thanks @freddyaboulton!
+
+## 0.17.1
+
+### Dependency updates
+
+- @gradio/client@2.1.0
+
+## 0.17.1
+
+### Fixes
+
+- [#12865](https://github.com/gradio-app/gradio/pull/12865) [`db7ab39`](https://github.com/gradio-app/gradio/commit/db7ab39c7e6ea3d1a2f0ce1991b5dbc0483b1e27) - Fix Gallery fullscreen button not working in preview mode.  Thanks @veeceey!
+- [#12866](https://github.com/gradio-app/gradio/pull/12866) [`9810396`](https://github.com/gradio-app/gradio/commit/981039647a4212c649a33dc4b56a4714980519eb) - Fix Gallery preview=True parameter not working on initial load.  Thanks @veeceey!
+
+### Dependency updates
+
+- @gradio/utils@0.11.3
+- @gradio/atoms@0.22.0
+- @gradio/statustracker@0.12.4
+- @gradio/upload@0.17.6
+- @gradio/video@0.20.3
+- @gradio/file@0.14.3
+- @gradio/image@0.25.3
+
 ## 0.17.0
 
 ### Features

package/Gallery.stories.svelte

@@ -154,13 +154,16 @@
 	args={{
 		label: "My Cheetah Gallery",
 		show_label: true,
-		buttons: ["fullscreen", "download", "share"]
+		buttons: ["fullscreen", "download", "share"],
+		sources: ["upload"]
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const image = canvas.getByLabelText("Thumbnail 1 of 8");
+		const image = await canvas.findByLabelText("Thumbnail 1 of 8");
 		await userEvent.click(image);
-		const expand_btn = canvas.getByRole("button", { name: "Fullscreen" });
+		const expand_btn = await canvas.findByRole("button", {
+			name: "Fullscreen"
+		});
 		await userEvent.click(expand_btn);
 	}}
 >
@@ -171,7 +174,12 @@
 
 <Story
 	name="Gallery without label"
-	args={{ label: "My Cheetah Gallery", show_label: false, buttons: [] }}
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: false,
+		buttons: [],
+		sources: ["upload"]
+	}}
 >
 	{#snippet template(args)}
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -185,7 +193,8 @@
 		show_label: true,
 		rows: 3,
 		columns: 3,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -199,7 +208,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		columns: 4,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -209,7 +219,12 @@
 
 <Story
 	name="Gallery with height=600"
-	args={{ label: "My Cheetah Gallery", height: 600, buttons: [] }}
+	args={{
+		label: "My Cheetah Gallery",
+		height: 600,
+		buttons: [],
+		sources: ["upload"]
+	}}
 >
 	{#snippet template(args)}
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -222,7 +237,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		allow_preview: false,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -236,7 +252,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		preview: true,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -250,7 +267,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		object_fit: "scale-down",
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -264,7 +282,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		object_fit: "contain",
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -278,7 +297,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		object_fit: "cover",
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -292,7 +312,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		object_fit: "none",
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -306,7 +327,8 @@
 		label: "My Cheetah Gallery",
 		show_label: true,
 		object_fit: "fill",
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -316,7 +338,12 @@
 
 <Story
 	name="Gallery with share button"
-	args={{ label: "My Cheetah Gallery", show_label: true, buttons: ["share"] }}
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		buttons: ["share"],
+		sources: ["upload"]
+	}}
 >
 	{#snippet template(args)}
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -331,7 +358,8 @@
 		rows: 2,
 		columns: 2,
 		height: 400,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -347,7 +375,8 @@
 		rows: 2,
 		columns: 2,
 		height: 200,
-		buttons: []
+		buttons: [],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -361,7 +390,8 @@
 		label: "My Cheetah Gallery",
 		rows: 2,
 		height: 400,
-		buttons: ["download"]
+		buttons: ["download"],
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -375,7 +405,8 @@
 		label: "My Cheetah Gallery",
 		columns: 10,
 		buttons: ["download"],
-		fit_columns: false
+		fit_columns: false,
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}
@@ -389,7 +420,8 @@
 		label: "My Cheetah Gallery",
 		columns: 10,
 		buttons: ["download"],
-		fit_columns: true
+		fit_columns: true,
+		sources: ["upload"]
 	}}
 >
 	{#snippet template(args)}

package/Index.svelte

@@ -158,9 +158,7 @@
 	scale={gradio.shared.scale}
 	min_width={gradio.shared.min_width}
 	allow_overflow={false}
-	height={typeof gradio.props.height === "number"
-		? gradio.props.height
-		: undefined}
+	height={gradio.props.height || undefined}
 	bind:fullscreen
 >
 	<StatusTracker
@@ -175,7 +173,7 @@
 			class={!gradio.props.value ||
 			(active_source && active_source.includes("webcam"))
 				? "hidden-upload-input"
-				: ""}
+				: "upload-wrapper"}
 		>
 			<BaseFileUpload
 				bind:upload_promise
@@ -328,4 +326,7 @@
 	.hidden-upload-input {
 		display: none;
 	}
+	.upload-wrapper {
+		height: 100%;
+	}
 </style>

package/dist/Index.svelte

@@ -158,9 +158,7 @@
 	scale={gradio.shared.scale}
 	min_width={gradio.shared.min_width}
 	allow_overflow={false}
-	height={typeof gradio.props.height === "number"
-		? gradio.props.height
-		: undefined}
+	height={gradio.props.height || undefined}
 	bind:fullscreen
 >
 	<StatusTracker
@@ -175,7 +173,7 @@
 			class={!gradio.props.value ||
 			(active_source && active_source.includes("webcam"))
 				? "hidden-upload-input"
-				: ""}
+				: "upload-wrapper"}
 		>
 			<BaseFileUpload
 				bind:upload_promise
@@ -328,4 +326,7 @@
 	.hidden-upload-input {
 		display: none;
 	}
+	.upload-wrapper {
+		height: 100%;
+	}
 </style>

package/dist/shared/Gallery.svelte

@@ -77,7 +77,7 @@
 		value: GalleryData[] | null;
 		columns: number | number[] | undefined;
 		rows: number | number[] | undefined;
-		height: number | "auto";
+		height: number | string;
 		preview: boolean;
 		allow_preview: boolean;
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
@@ -157,9 +157,9 @@
 	);
 
 	let prev_value: GalleryData[] | null = $state(value);
-	// if (selected_index == null && preview && value?.length) {
-	// 	selected_index = 0;
-	// }
+	if (selected_index == null && preview && value?.length) {
+		selected_index = 0;
+	}
 	let old_selected_index: number | null = $state(selected_index);
 
 	$effect(() => {
@@ -414,7 +414,11 @@
 					{/if}
 
 					{#if show_fullscreen_button}
-						<FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
+						<FullscreenButton
+							{fullscreen}
+							onclick={(is_fullscreen) =>
+								onfullscreen({ detail: is_fullscreen })}
+						/>
 					{/if}
 
 					{#if show_share_button}
@@ -535,7 +539,11 @@
 			class:minimal={mode === "minimal"}
 			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
 			class:hidden={is_full_screen}
-			style:height={height !== "auto" ? height + "px" : null}
+			style:height={height !== "auto"
+				? typeof height === "number"
+					? height + "px"
+					: height
+				: null}
 		>
 			{#if interactive && selected_index === null}
 				<ModifyUpload
@@ -659,11 +667,11 @@
 {/if}
 
 <style lang="postcss">
-	.image-container {
+	.gallery-container {
 		height: 100%;
 		position: relative;
 	}
-	.image-container :global(img),
+	.gallery-container :global(img),
 	button {
 		width: var(--size-full);
 		height: var(--size-full);

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

@@ -10,7 +10,7 @@ type $$ComponentProps = {
     value: GalleryData[] | null;
     columns: number | number[] | undefined;
     rows: number | number[] | undefined;
-    height: number | "auto";
+    height: number | string;
     preview: boolean;
     allow_preview: boolean;
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export interface GalleryProps {
     file_types: string[] | null;
     columns: number | number[] | undefined;
     rows: number | number[] | undefined;
-    height: number | "auto";
+    height: number | string;
     preview: boolean;
     allow_preview: boolean;
     selected_index: number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.21.0",
-    "@gradio/client": "^2.0.4",
-    "@gradio/file": "^0.14.2",
-    "@gradio/image": "^0.25.2",
-    "@gradio/statustracker": "^0.12.3",
+    "@gradio/atoms": "^0.22.1",
+    "@gradio/client": "^2.1.0",
+    "@gradio/file": "^0.14.3",
+    "@gradio/statustracker": "^0.12.4",
+    "@gradio/upload": "^0.17.6",
+    "@gradio/image": "^0.25.3",
     "@gradio/icons": "^0.15.1",
-    "@gradio/utils": "^0.11.2",
-    "@gradio/video": "^0.20.2",
-    "@gradio/upload": "^0.17.5"
+    "@gradio/utils": "^0.11.3",
+    "@gradio/video": "^0.20.3"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.2"

package/shared/Gallery.svelte

@@ -77,7 +77,7 @@
 		value: GalleryData[] | null;
 		columns: number | number[] | undefined;
 		rows: number | number[] | undefined;
-		height: number | "auto";
+		height: number | string;
 		preview: boolean;
 		allow_preview: boolean;
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
@@ -157,9 +157,9 @@
 	);
 
 	let prev_value: GalleryData[] | null = $state(value);
-	// if (selected_index == null && preview && value?.length) {
-	// 	selected_index = 0;
-	// }
+	if (selected_index == null && preview && value?.length) {
+		selected_index = 0;
+	}
 	let old_selected_index: number | null = $state(selected_index);
 
 	$effect(() => {
@@ -414,7 +414,11 @@
 					{/if}
 
 					{#if show_fullscreen_button}
-						<FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
+						<FullscreenButton
+							{fullscreen}
+							onclick={(is_fullscreen) =>
+								onfullscreen({ detail: is_fullscreen })}
+						/>
 					{/if}
 
 					{#if show_share_button}
@@ -535,7 +539,11 @@
 			class:minimal={mode === "minimal"}
 			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
 			class:hidden={is_full_screen}
-			style:height={height !== "auto" ? height + "px" : null}
+			style:height={height !== "auto"
+				? typeof height === "number"
+					? height + "px"
+					: height
+				: null}
 		>
 			{#if interactive && selected_index === null}
 				<ModifyUpload
@@ -659,11 +667,11 @@
 {/if}
 
 <style lang="postcss">
-	.image-container {
+	.gallery-container {
 		height: 100%;
 		position: relative;
 	}
-	.image-container :global(img),
+	.gallery-container :global(img),
 	button {
 		width: var(--size-full);
 		height: var(--size-full);

package/types.ts

@@ -18,7 +18,7 @@ export interface GalleryProps {
 	file_types: string[] | null;
 	columns: number | number[] | undefined;
 	rows: number | number[] | undefined;
-	height: number | "auto";
+	height: number | string;
 	preview: boolean;
 	allow_preview: boolean;
 	selected_index: number | null;