@gradio/gallery 0.15.34 → 0.15.35-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/Gallery.stories.svelte +25 -0
  3. package/Index.svelte +6 -6
  4. package/dist/Index.svelte +6 -6
  5. package/dist/Index.svelte.d.ts +2 -3
  6. package/dist/shared/Gallery.svelte +2 -1
  7. package/dist/shared/Gallery.svelte.d.ts +1 -0
  8. package/package.json +7 -7
  9. package/shared/Gallery.svelte +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.15.35-dev.1
4
+
5
+ ### Fixes
6
+
7
+ - [#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!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/client@2.0.0-dev.1
12
+
13
+ ## 0.15.35-dev.0
14
+
15
+ ### Dependency updates
16
+
17
+ - @gradio/upload@0.17.2-dev.0
18
+ - @gradio/client@2.0.0-dev.0
19
+ - @gradio/image@0.23.2-dev.0
20
+ - @gradio/file@0.13.1-dev.0
21
+ - @gradio/video@0.17.0-dev.0
22
+
23
+ ## 0.15.34
24
+
25
+ ### Dependency updates
26
+
27
+ - @gradio/client@1.19.1
28
+
29
+ ## 0.15.34
30
+
31
+ ### Dependency updates
32
+
33
+ - @gradio/image@0.23.1
34
+ - @gradio/upload@0.17.1
35
+ - @gradio/atoms@0.18.1
36
+
3
37
  ## 0.15.34
4
38
 
5
39
  ### Fixes
package/Gallery.stories.svelte CHANGED
@@ -62,6 +62,13 @@
62
62
  description: "Whether to show the share button in the gallery",
63
63
  control: { type: "boolean" },
64
64
  defaultValue: false
65
+ },
66
+ fit_columns: {
67
+ options: [true, false],
68
+ description:
69
+ "Whether the columns should fit the width of the container",
70
+ control: { type: "boolean" },
71
+ defaultValue: true
65
72
  }
66
73
  },
67
74
  parameters: {
@@ -277,3 +284,21 @@
277
284
  show_download_button: true
278
285
  }}
279
286
  />
287
+ <Story
288
+ name="Gallery with fit_columns false"
289
+ args={{
290
+ label: "My Cheetah Gallery",
291
+ columns: 10,
292
+ show_download_button: true,
293
+ fit_columns: false
294
+ }}
295
+ />
296
+ <Story
297
+ name="Gallery with fit_columns true"
298
+ args={{
299
+ label: "My Cheetah Gallery",
300
+ columns: 10,
301
+ show_download_button: true,
302
+ fit_columns: true
303
+ }}
304
+ />
package/Index.svelte CHANGED
@@ -36,9 +36,8 @@
36
36
  export let selected_index: number | null = null;
37
37
  export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
38
38
  "cover";
39
- export let show_share_button = false;
39
+ export let buttons: string[] | null = null;
40
40
  export let interactive: boolean;
41
- export let show_download_button = false;
42
41
  export let gradio: Gradio<{
43
42
  change: typeof value;
44
43
  upload: typeof value;
@@ -51,8 +50,8 @@
51
50
  preview_open: never;
52
51
  preview_close: never;
53
52
  }>;
54
- export let show_fullscreen_button = true;
55
53
  export let fullscreen = false;
54
+ export let fit_columns = true;
56
55
 
57
56
  const dispatch = createEventDispatcher();
58
57
 
@@ -168,11 +167,12 @@
168
167
  {allow_preview}
169
168
  bind:selected_index
170
169
  bind:value
171
- {show_share_button}
172
- {show_download_button}
170
+ show_share_button={buttons?.includes("share") ?? true}
171
+ show_download_button={buttons?.includes("download") ?? true}
172
+ {fit_columns}
173
173
  i18n={gradio.i18n}
174
174
  _fetch={(...args) => gradio.client.fetch(...args)}
175
- {show_fullscreen_button}
175
+ show_fullscreen_button={buttons?.includes("fullscreen") ?? true}
176
176
  {fullscreen}
177
177
  {root}
178
178
  {file_types}
package/dist/Index.svelte CHANGED
@@ -26,12 +26,11 @@ export let preview;
26
26
  export let allow_preview = true;
27
27
  export let selected_index = null;
28
28
  export let object_fit = "cover";
29
- export let show_share_button = false;
29
+ export let buttons = null;
30
30
  export let interactive;
31
- export let show_download_button = false;
32
31
  export let gradio;
33
- export let show_fullscreen_button = true;
34
32
  export let fullscreen = false;
33
+ export let fit_columns = true;
35
34
  const dispatch = createEventDispatcher();
36
35
  $: no_value = value === null ? true : value.length === 0;
37
36
  function handle_delete(event) {
@@ -136,11 +135,12 @@ async function process_upload_files(files) {
136
135
  {allow_preview}
137
136
  bind:selected_index
138
137
  bind:value
139
- {show_share_button}
140
- {show_download_button}
138
+ show_share_button={buttons?.includes("share") ?? true}
139
+ show_download_button={buttons?.includes("download") ?? true}
140
+ {fit_columns}
141
141
  i18n={gradio.i18n}
142
142
  _fetch={(...args) => gradio.client.fetch(...args)}
143
- {show_fullscreen_button}
143
+ show_fullscreen_button={buttons?.includes("fullscreen") ?? true}
144
144
  {fullscreen}
145
145
  {root}
146
146
  {file_types}
package/dist/Index.svelte.d.ts CHANGED
@@ -26,9 +26,8 @@ declare const __propDef: {
26
26
  allow_preview?: boolean;
27
27
  selected_index?: number | null;
28
28
  object_fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
29
- show_share_button?: boolean;
29
+ buttons?: string[] | null;
30
30
  interactive: boolean;
31
- show_download_button?: boolean;
32
31
  gradio: Gradio<{
33
32
  change: (GalleryImage | GalleryVideo)[] | null;
34
33
  upload: (GalleryImage | GalleryVideo)[] | null;
@@ -44,8 +43,8 @@ declare const __propDef: {
44
43
  preview_open: never;
45
44
  preview_close: never;
46
45
  }>;
47
- show_fullscreen_button?: boolean;
48
46
  fullscreen?: boolean;
47
+ fit_columns?: boolean;
49
48
  };
50
49
  events: {
51
50
  prop_change: CustomEvent<any>;
package/dist/shared/Gallery.svelte CHANGED
@@ -45,6 +45,7 @@ export let file_types = ["image", "video"];
45
45
  export let max_file_size = null;
46
46
  export let upload = void 0;
47
47
  export let stream_handler = void 0;
48
+ export let fit_columns = true;
48
49
  let is_full_screen = false;
49
50
  let image_container;
50
51
  const dispatch = createEventDispatcher();
@@ -64,7 +65,7 @@ $: resolved_value = value == null ? null : value.map((data) => {
64
65
  });
65
66
  let effective_columns = columns;
66
67
  $: {
67
- if (resolved_value && columns) {
68
+ if (resolved_value && columns && fit_columns) {
68
69
  const item_count = resolved_value.length;
69
70
  if (Array.isArray(columns)) {
70
71
  effective_columns = columns.map((col) => Math.min(col, item_count));
package/dist/shared/Gallery.svelte.d.ts CHANGED
@@ -30,6 +30,7 @@ declare const __propDef: {
30
30
  max_file_size?: number | null;
31
31
  upload?: Client["upload"] | undefined;
32
32
  stream_handler?: Client["stream"] | undefined;
33
+ fit_columns?: boolean;
33
34
  };
34
35
  events: {
35
36
  fullscreen: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.15.34",
3
+ "version": "0.15.35-dev.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,15 +8,15 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.2",
11
+ "@gradio/client": "^2.0.0-dev.1",
11
12
  "@gradio/icons": "^0.14.0",
12
- "@gradio/atoms": "^0.18.0",
13
- "@gradio/image": "^0.23.0",
14
- "@gradio/client": "^1.19.0",
15
- "@gradio/upload": "^0.17.0",
13
+ "@gradio/atoms": "^0.18.1",
14
+ "@gradio/image": "^0.23.2-dev.0",
16
15
  "@gradio/statustracker": "^0.11.1",
16
+ "@gradio/upload": "^0.17.2-dev.0",
17
17
  "@gradio/utils": "^0.10.2",
18
- "@gradio/video": "^0.16.0",
19
- "@gradio/file": "^0.13.0"
18
+ "@gradio/file": "^0.13.1-dev.0",
19
+ "@gradio/video": "^0.17.0-dev.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.14.0"
package/shared/Gallery.svelte CHANGED
@@ -55,6 +55,7 @@
55
55
  export let max_file_size: number | null = null;
56
56
  export let upload: Client["upload"] | undefined = undefined;
57
57
  export let stream_handler: Client["stream"] | undefined = undefined;
58
+ export let fit_columns = true;
58
59
 
59
60
  let is_full_screen = false;
60
61
  let image_container: HTMLElement;
@@ -95,7 +96,7 @@
95
96
  let effective_columns: number | number[] | undefined = columns;
96
97
 
97
98
  $: {
98
- if (resolved_value && columns) {
99
+ if (resolved_value && columns && fit_columns) {
99
100
  const item_count = resolved_value.length;
100
101
  if (Array.isArray(columns)) {
101
102
  effective_columns = columns.map((col) => Math.min(col, item_count));