@gradio/gallery 0.15.17 → 0.15.19

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 +25 -0
  2. package/Gallery.stories.svelte +1 -1
  3. package/Index.svelte +6 -0
  4. package/dist/Index.svelte +6 -0
  5. package/dist/Index.svelte.d.ts +1 -0
  6. package/dist/shared/Gallery.svelte +2 -1
  7. package/dist/shared/Gallery.svelte.d.ts +2 -0
  8. package/package.json +8 -8
  9. package/shared/Gallery.svelte +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.15.19
4
+
5
+ ### Features
6
+
7
+ - [#11177](https://github.com/gradio-app/gradio/pull/11177) [`3068196`](https://github.com/gradio-app/gradio/commit/3068196d47234fd1c1634f33b9ddfc089f5cbbe0) - Improved, smoother fullscreen mode for components. Thanks @aliabid94!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/statustracker@0.10.11
12
+ - @gradio/atoms@0.16.1
13
+ - @gradio/client@1.15.0
14
+ - @gradio/upload@0.16.5
15
+ - @gradio/image@0.22.6
16
+ - @gradio/video@0.14.14
17
+ - @gradio/file@0.12.18
18
+
19
+ ## 0.15.18
20
+
21
+ ### Dependency updates
22
+
23
+ - @gradio/video@0.14.13
24
+ - @gradio/upload@0.16.4
25
+ - @gradio/image@0.22.5
26
+ - @gradio/file@0.12.17
27
+
3
28
  ## 0.15.17
4
29
 
5
30
  ### Dependency updates
package/Gallery.stories.svelte CHANGED
@@ -150,7 +150,7 @@
150
150
  const image = canvas.getByLabelText("Thumbnail 1 of 8");
151
151
  await userEvent.click(image);
152
152
  const expand_btn = canvas.getByRole("button", {
153
- name: "View in full screen"
153
+ name: "Fullscreen"
154
154
  });
155
155
  await userEvent.click(expand_btn);
156
156
  }}
package/Index.svelte CHANGED
@@ -50,6 +50,7 @@
50
50
  preview_close: never;
51
51
  }>;
52
52
  export let show_fullscreen_button = true;
53
+ export let fullscreen = false;
53
54
 
54
55
  const dispatch = createEventDispatcher();
55
56
 
@@ -92,6 +93,7 @@
92
93
  {min_width}
93
94
  allow_overflow={false}
94
95
  height={typeof height === "number" ? height : undefined}
96
+ bind:fullscreen
95
97
  >
96
98
  <StatusTracker
97
99
  autoscroll={gradio.autoscroll}
@@ -132,6 +134,9 @@
132
134
  on:error={(e) => gradio.dispatch("error", e.detail)}
133
135
  on:preview_open={() => gradio.dispatch("preview_open")}
134
136
  on:preview_close={() => gradio.dispatch("preview_close")}
137
+ on:fullscreen={({ detail }) => {
138
+ fullscreen = detail;
139
+ }}
135
140
  {label}
136
141
  {show_label}
137
142
  {columns}
@@ -148,6 +153,7 @@
148
153
  i18n={gradio.i18n}
149
154
  _fetch={(...args) => gradio.client.fetch(...args)}
150
155
  {show_fullscreen_button}
156
+ {fullscreen}
151
157
  />
152
158
  {/if}
153
159
  </Block>
package/dist/Index.svelte CHANGED
@@ -30,6 +30,7 @@ export let interactive;
30
30
  export let show_download_button = false;
31
31
  export let gradio;
32
32
  export let show_fullscreen_button = true;
33
+ export let fullscreen = false;
33
34
  const dispatch = createEventDispatcher();
34
35
  $:
35
36
  no_value = value === null ? true : value.length === 0;
@@ -66,6 +67,7 @@ async function process_upload_files(files) {
66
67
  {min_width}
67
68
  allow_overflow={false}
68
69
  height={typeof height === "number" ? height : undefined}
70
+ bind:fullscreen
69
71
  >
70
72
  <StatusTracker
71
73
  autoscroll={gradio.autoscroll}
@@ -106,6 +108,9 @@ async function process_upload_files(files) {
106
108
  on:error={(e) => gradio.dispatch("error", e.detail)}
107
109
  on:preview_open={() => gradio.dispatch("preview_open")}
108
110
  on:preview_close={() => gradio.dispatch("preview_close")}
111
+ on:fullscreen={({ detail }) => {
112
+ fullscreen = detail;
113
+ }}
109
114
  {label}
110
115
  {show_label}
111
116
  {columns}
@@ -122,6 +127,7 @@ async function process_upload_files(files) {
122
127
  i18n={gradio.i18n}
123
128
  _fetch={(...args) => gradio.client.fetch(...args)}
124
129
  {show_fullscreen_button}
130
+ {fullscreen}
125
131
  />
126
132
  {/if}
127
133
  </Block>
package/dist/Index.svelte.d.ts CHANGED
@@ -39,6 +39,7 @@ declare const __propDef: {
39
39
  preview_close: never;
40
40
  }>;
41
41
  show_fullscreen_button?: boolean | undefined;
42
+ fullscreen?: boolean | undefined;
42
43
  };
43
44
  events: {
44
45
  prop_change: CustomEvent<any>;
package/dist/shared/Gallery.svelte CHANGED
@@ -33,6 +33,7 @@ export let _fetch;
33
33
  export let mode = "normal";
34
34
  export let show_fullscreen_button = true;
35
35
  export let display_icon_button_wrapper_top_corner = false;
36
+ export let fullscreen = false;
36
37
  let is_full_screen = false;
37
38
  let image_container;
38
39
  const dispatch = createEventDispatcher();
@@ -217,7 +218,7 @@ onMount(() => {
217
218
  {/if}
218
219
 
219
220
  {#if show_fullscreen_button}
220
- <FullscreenButton container={image_container} />
221
+ <FullscreenButton {fullscreen} on:fullscreen />
221
222
  {/if}
222
223
 
223
224
  {#if show_share_button}
package/dist/shared/Gallery.svelte.d.ts CHANGED
@@ -22,8 +22,10 @@ declare const __propDef: {
22
22
  mode?: ("normal" | "minimal") | undefined;
23
23
  show_fullscreen_button?: boolean | undefined;
24
24
  display_icon_button_wrapper_top_corner?: boolean | undefined;
25
+ fullscreen?: boolean | undefined;
25
26
  };
26
27
  events: {
28
+ fullscreen: CustomEvent<any>;
27
29
  share: CustomEvent<import("@gradio/utils").ShareData>;
28
30
  error: CustomEvent<string>;
29
31
  change: CustomEvent<undefined>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.15.17",
3
+ "version": "0.15.19",
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/atoms": "^0.16.0",
12
- "@gradio/image": "^0.22.4",
13
- "@gradio/client": "^1.14.2",
11
+ "@gradio/atoms": "^0.16.1",
14
12
  "@gradio/icons": "^0.12.0",
15
- "@gradio/statustracker": "^0.10.10",
16
- "@gradio/upload": "^0.16.3",
13
+ "@gradio/image": "^0.22.6",
14
+ "@gradio/client": "^1.15.0",
15
+ "@gradio/statustracker": "^0.10.11",
17
16
  "@gradio/utils": "^0.10.2",
18
- "@gradio/video": "^0.14.12",
19
- "@gradio/file": "^0.12.16"
17
+ "@gradio/upload": "^0.16.5",
18
+ "@gradio/video": "^0.14.14",
19
+ "@gradio/file": "^0.12.18"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.13.0"
package/shared/Gallery.svelte CHANGED
@@ -42,6 +42,7 @@
42
42
  export let mode: "normal" | "minimal" = "normal";
43
43
  export let show_fullscreen_button = true;
44
44
  export let display_icon_button_wrapper_top_corner = false;
45
+ export let fullscreen = false;
45
46
 
46
47
  let is_full_screen = false;
47
48
  let image_container: HTMLElement;
@@ -51,6 +52,7 @@
51
52
  select: SelectData;
52
53
  preview_open: undefined;
53
54
  preview_close: undefined;
55
+ fullscreen: boolean;
54
56
  }>();
55
57
 
56
58
  // tracks whether the value of the gallery was reset
@@ -274,7 +276,7 @@
274
276
  {/if}
275
277
 
276
278
  {#if show_fullscreen_button}
277
- <FullscreenButton container={image_container} />
279
+ <FullscreenButton {fullscreen} on:fullscreen />
278
280
  {/if}
279
281
 
280
282
  {#if show_share_button}