@gradio/gallery 0.15.35-dev.0 → 0.15.35-dev.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @gradio/gallery
 
+## 0.15.35-dev.1
+
+### Fixes
+
+- [#12066](https://github.com/gradio-app/gradio/pull/12066) [`6a4757a`](https://github.com/gradio-app/gradio/commit/6a4757ab289e8e53b5503eb6887333d7ad26c9eb) - Gallery: Allow empty columns when items < columns.  Thanks @missionfloyd!
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
 ## 0.15.35-dev.0
 
 ### Dependency updates

package/Gallery.stories.svelte

@@ -62,6 +62,13 @@
 				description: "Whether to show the share button in the gallery",
 				control: { type: "boolean" },
 				defaultValue: false
+			},
+			fit_columns: {
+				options: [true, false],
+				description:
+					"Whether the columns should fit the width of the container",
+				control: { type: "boolean" },
+				defaultValue: true
 			}
 		},
 		parameters: {
@@ -277,3 +284,21 @@
 		show_download_button: true
 	}}
 />
+<Story
+	name="Gallery with fit_columns false"
+	args={{
+		label: "My Cheetah Gallery",
+		columns: 10,
+		show_download_button: true,
+		fit_columns: false
+	}}
+/>
+<Story
+	name="Gallery with fit_columns true"
+	args={{
+		label: "My Cheetah Gallery",
+		columns: 10,
+		show_download_button: true,
+		fit_columns: true
+	}}
+/>

package/Index.svelte

@@ -51,6 +51,7 @@
 		preview_close: never;
 	}>;
 	export let fullscreen = false;
+	export let fit_columns = true;
 
 	const dispatch = createEventDispatcher();
 
@@ -168,6 +169,7 @@
 			bind:value
 			show_share_button={buttons?.includes("share") ?? true}
 			show_download_button={buttons?.includes("download") ?? true}
+			{fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.client.fetch(...args)}
 			show_fullscreen_button={buttons?.includes("fullscreen") ?? true}

package/dist/Index.svelte

@@ -30,6 +30,7 @@ export let buttons = null;
 export let interactive;
 export let gradio;
 export let fullscreen = false;
+export let fit_columns = true;
 const dispatch = createEventDispatcher();
 $: no_value = value === null ? true : value.length === 0;
 function handle_delete(event) {
@@ -136,6 +137,7 @@ async function process_upload_files(files) {
 			bind:value
 			show_share_button={buttons?.includes("share") ?? true}
 			show_download_button={buttons?.includes("download") ?? true}
+			{fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.client.fetch(...args)}
 			show_fullscreen_button={buttons?.includes("fullscreen") ?? true}

package/dist/Index.svelte.d.ts

@@ -44,6 +44,7 @@ declare const __propDef: {
             preview_close: never;
         }>;
         fullscreen?: boolean;
+        fit_columns?: boolean;
     };
     events: {
         prop_change: CustomEvent<any>;

package/dist/shared/Gallery.svelte

@@ -45,6 +45,7 @@ export let file_types = ["image", "video"];
 export let max_file_size = null;
 export let upload = void 0;
 export let stream_handler = void 0;
+export let fit_columns = true;
 let is_full_screen = false;
 let image_container;
 const dispatch = createEventDispatcher();
@@ -64,7 +65,7 @@ $: resolved_value = value == null ? null : value.map((data) => {
 });
 let effective_columns = columns;
 $: {
-  if (resolved_value && columns) {
+  if (resolved_value && columns && fit_columns) {
     const item_count = resolved_value.length;
     if (Array.isArray(columns)) {
       effective_columns = columns.map((col) => Math.min(col, item_count));

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

@@ -30,6 +30,7 @@ declare const __propDef: {
         max_file_size?: number | null;
         upload?: Client["upload"] | undefined;
         stream_handler?: Client["stream"] | undefined;
+        fit_columns?: boolean;
     };
     events: {
         fullscreen: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.15.35-dev.0",
+  "version": "0.15.35-dev.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/client": "^2.0.0-dev.0",
+    "@gradio/client": "^2.0.0-dev.1",
     "@gradio/icons": "^0.14.0",
+    "@gradio/atoms": "^0.18.1",
     "@gradio/image": "^0.23.2-dev.0",
-    "@gradio/upload": "^0.17.2-dev.0",
     "@gradio/statustracker": "^0.11.1",
+    "@gradio/upload": "^0.17.2-dev.0",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.17.0-dev.0",
-    "@gradio/file": "^0.13.1-dev.0"
+    "@gradio/file": "^0.13.1-dev.0",
+    "@gradio/video": "^0.17.0-dev.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/Gallery.svelte

@@ -55,6 +55,7 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"] | undefined = undefined;
 	export let stream_handler: Client["stream"] | undefined = undefined;
+	export let fit_columns = true;
 
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -95,7 +96,7 @@
 	let effective_columns: number | number[] | undefined = columns;
 
 	$: {
-		if (resolved_value && columns) {
+		if (resolved_value && columns && fit_columns) {
 			const item_count = resolved_value.length;
 			if (Array.isArray(columns)) {
 				effective_columns = columns.map((col) => Math.min(col, item_count));