@gradio/gallery 0.14.1 → 0.15.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 (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/Index.svelte +5 -0
  3. package/dist/Index.svelte +3 -0
  4. package/dist/Index.svelte.d.ts +2 -0
  5. package/dist/shared/Gallery.svelte +11 -10
  6. package/dist/shared/Gallery.svelte.d.ts +2 -0
  7. package/package.json +9 -9
  8. package/shared/Gallery.svelte +13 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.15.1
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/video@0.13.1
8
+ - @gradio/atoms@0.13.1
9
+ - @gradio/statustracker@0.10.1
10
+ - @gradio/client@1.10.0
11
+ - @gradio/icons@0.10.0
12
+ - @gradio/upload@0.14.5
13
+ - @gradio/image@0.20.1
14
+ - @gradio/file@0.12.1
15
+
16
+ ## 0.15.0
17
+
18
+ ### Features
19
+
20
+ - [#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!
21
+
3
22
  ## 0.14.1
4
23
 
5
24
  ### Fixes
package/Index.svelte CHANGED
@@ -46,6 +46,8 @@
46
46
  error: string;
47
47
  prop_change: Record<string, any>;
48
48
  clear_status: LoadingStatus;
49
+ preview_open: never;
50
+ preview_close: never;
49
51
  }>;
50
52
  export let show_fullscreen_button = true;
51
53
 
@@ -112,6 +114,7 @@
112
114
  const files = Array.isArray(e.detail) ? e.detail : [e.detail];
113
115
  value = await process_upload_files(files);
114
116
  gradio.dispatch("upload", value);
117
+ gradio.dispatch("change", value);
115
118
  }}
116
119
  on:error={({ detail }) => {
117
120
  loading_status = loading_status || {};
@@ -127,6 +130,8 @@
127
130
  on:select={(e) => gradio.dispatch("select", e.detail)}
128
131
  on:share={(e) => gradio.dispatch("share", e.detail)}
129
132
  on:error={(e) => gradio.dispatch("error", e.detail)}
133
+ on:preview_open={() => gradio.dispatch("preview_open")}
134
+ on:preview_close={() => gradio.dispatch("preview_close")}
130
135
  {label}
131
136
  {show_label}
132
137
  {columns}
package/dist/Index.svelte CHANGED
@@ -88,6 +88,7 @@ async function process_upload_files(files) {
88
88
  const files = Array.isArray(e.detail) ? e.detail : [e.detail];
89
89
  value = await process_upload_files(files);
90
90
  gradio.dispatch("upload", value);
91
+ gradio.dispatch("change", value);
91
92
  }}
92
93
  on:error={({ detail }) => {
93
94
  loading_status = loading_status || {};
@@ -103,6 +104,8 @@ async function process_upload_files(files) {
103
104
  on:select={(e) => gradio.dispatch("select", e.detail)}
104
105
  on:share={(e) => gradio.dispatch("share", e.detail)}
105
106
  on:error={(e) => gradio.dispatch("error", e.detail)}
107
+ on:preview_open={() => gradio.dispatch("preview_open")}
108
+ on:preview_close={() => gradio.dispatch("preview_close")}
106
109
  {label}
107
110
  {show_label}
108
111
  {columns}
package/dist/Index.svelte.d.ts CHANGED
@@ -35,6 +35,8 @@ declare const __propDef: {
35
35
  error: string;
36
36
  prop_change: Record<string, any>;
37
37
  clear_status: LoadingStatus;
38
+ preview_open: never;
39
+ preview_close: never;
38
40
  }>;
39
41
  show_fullscreen_button?: boolean | undefined;
40
42
  };
package/dist/shared/Gallery.svelte CHANGED
@@ -12,14 +12,7 @@ import { Video } from "@gradio/video/shared";
12
12
  import { dequal } from "dequal";
13
13
  import { createEventDispatcher, onMount } from "svelte";
14
14
  import { tick } from "svelte";
15
- import {
16
- Download,
17
- Image as ImageIcon,
18
- Maximize,
19
- Minimize,
20
- Clear,
21
- Play
22
- } from "@gradio/icons";
15
+ import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
23
16
  import { FileData } from "@gradio/client";
24
17
  import { format_gallery_for_sharing } from "./utils";
25
18
  export let show_label = true;
@@ -229,7 +222,10 @@ onMount(() => {
229
222
  <IconButton
230
223
  Icon={Clear}
231
224
  label="Close"
232
- on:click={() => (selected_index = null)}
225
+ on:click={() => {
226
+ selected_index = null;
227
+ dispatch("preview_close");
228
+ }}
233
229
  />
234
230
  {/if}
235
231
  </IconButtonWrapper>
@@ -330,7 +326,12 @@ onMount(() => {
330
326
  <button
331
327
  class="thumbnail-item thumbnail-lg"
332
328
  class:selected={selected_index === i}
333
- on:click={() => (selected_index = i)}
329
+ on:click={() => {
330
+ if (selected_index === null && allow_preview) {
331
+ dispatch("preview_open");
332
+ }
333
+ selected_index = i;
334
+ }}
334
335
  aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
335
336
  >
336
337
  {#if "image" in entry}
package/dist/shared/Gallery.svelte.d.ts CHANGED
@@ -28,6 +28,8 @@ declare const __propDef: {
28
28
  error: CustomEvent<string>;
29
29
  change: CustomEvent<undefined>;
30
30
  select: CustomEvent<SelectData>;
31
+ preview_open: CustomEvent<undefined>;
32
+ preview_close: CustomEvent<undefined>;
31
33
  } & {
32
34
  [evt: string]: CustomEvent<any>;
33
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.14.1",
3
+ "version": "0.15.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": "^1.9.0",
12
- "@gradio/atoms": "^0.13.0",
13
- "@gradio/icons": "^0.9.0",
14
- "@gradio/image": "^0.20.0",
15
- "@gradio/statustracker": "^0.10.0",
11
+ "@gradio/atoms": "^0.13.1",
12
+ "@gradio/icons": "^0.10.0",
13
+ "@gradio/client": "^1.10.0",
14
+ "@gradio/image": "^0.20.1",
15
+ "@gradio/statustracker": "^0.10.1",
16
16
  "@gradio/utils": "^0.10.0",
17
- "@gradio/video": "^0.13.0",
18
- "@gradio/upload": "^0.14.4",
19
- "@gradio/file": "^0.12.0"
17
+ "@gradio/file": "^0.12.1",
18
+ "@gradio/upload": "^0.14.5",
19
+ "@gradio/video": "^0.13.1"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.13.0"
package/shared/Gallery.svelte CHANGED
@@ -16,14 +16,7 @@
16
16
  import { tick } from "svelte";
17
17
  import type { GalleryImage, GalleryVideo } from "../types";
18
18
 
19
- import {
20
- Download,
21
- Image as ImageIcon,
22
- Maximize,
23
- Minimize,
24
- Clear,
25
- Play
26
- } from "@gradio/icons";
19
+ import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
27
20
  import { FileData } from "@gradio/client";
28
21
  import { format_gallery_for_sharing } from "./utils";
29
22
  import type { I18nFormatter } from "@gradio/utils";
@@ -56,6 +49,8 @@
56
49
  const dispatch = createEventDispatcher<{
57
50
  change: undefined;
58
51
  select: SelectData;
52
+ preview_open: undefined;
53
+ preview_close: undefined;
59
54
  }>();
60
55
 
61
56
  // tracks whether the value of the gallery was reset
@@ -287,7 +282,10 @@
287
282
  <IconButton
288
283
  Icon={Clear}
289
284
  label="Close"
290
- on:click={() => (selected_index = null)}
285
+ on:click={() => {
286
+ selected_index = null;
287
+ dispatch("preview_close");
288
+ }}
291
289
  />
292
290
  {/if}
293
291
  </IconButtonWrapper>
@@ -388,7 +386,12 @@
388
386
  <button
389
387
  class="thumbnail-item thumbnail-lg"
390
388
  class:selected={selected_index === i}
391
- on:click={() => (selected_index = i)}
389
+ on:click={() => {
390
+ if (selected_index === null && allow_preview) {
391
+ dispatch("preview_open");
392
+ }
393
+ selected_index = i;
394
+ }}
392
395
  aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
393
396
  >
394
397
  {#if "image" in entry}