@gradio/gallery 0.17.0 → 0.17.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 (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/Gallery.stories.svelte +52 -20
  3. package/dist/shared/Gallery.svelte +8 -4
  4. package/package.json +8 -8
  5. package/shared/Gallery.svelte +8 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.17.1
4
+
5
+ ### Fixes
6
+
7
+ - [#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!
8
+ - [#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!
9
+
10
+ ### Dependency updates
11
+
12
+ - @gradio/utils@0.11.3
13
+ - @gradio/atoms@0.22.0
14
+ - @gradio/statustracker@0.12.4
15
+ - @gradio/upload@0.17.6
16
+ - @gradio/video@0.20.3
17
+ - @gradio/file@0.14.3
18
+ - @gradio/image@0.25.3
19
+
3
20
  ## 0.17.0
4
21
 
5
22
  ### Features
package/Gallery.stories.svelte CHANGED
@@ -154,13 +154,16 @@
154
154
  args={{
155
155
  label: "My Cheetah Gallery",
156
156
  show_label: true,
157
- buttons: ["fullscreen", "download", "share"]
157
+ buttons: ["fullscreen", "download", "share"],
158
+ sources: ["upload"]
158
159
  }}
159
160
  play={async ({ canvasElement }) => {
160
161
  const canvas = within(canvasElement);
161
- const image = canvas.getByLabelText("Thumbnail 1 of 8");
162
+ const image = await canvas.findByLabelText("Thumbnail 1 of 8");
162
163
  await userEvent.click(image);
163
- const expand_btn = canvas.getByRole("button", { name: "Fullscreen" });
164
+ const expand_btn = await canvas.findByRole("button", {
165
+ name: "Fullscreen"
166
+ });
164
167
  await userEvent.click(expand_btn);
165
168
  }}
166
169
  >
@@ -171,7 +174,12 @@
171
174
 
172
175
  <Story
173
176
  name="Gallery without label"
174
- args={{ label: "My Cheetah Gallery", show_label: false, buttons: [] }}
177
+ args={{
178
+ label: "My Cheetah Gallery",
179
+ show_label: false,
180
+ buttons: [],
181
+ sources: ["upload"]
182
+ }}
175
183
  >
176
184
  {#snippet template(args)}
177
185
  <Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -185,7 +193,8 @@
185
193
  show_label: true,
186
194
  rows: 3,
187
195
  columns: 3,
188
- buttons: []
196
+ buttons: [],
197
+ sources: ["upload"]
189
198
  }}
190
199
  >
191
200
  {#snippet template(args)}
@@ -199,7 +208,8 @@
199
208
  label: "My Cheetah Gallery",
200
209
  show_label: true,
201
210
  columns: 4,
202
- buttons: []
211
+ buttons: [],
212
+ sources: ["upload"]
203
213
  }}
204
214
  >
205
215
  {#snippet template(args)}
@@ -209,7 +219,12 @@
209
219
 
210
220
  <Story
211
221
  name="Gallery with height=600"
212
- args={{ label: "My Cheetah Gallery", height: 600, buttons: [] }}
222
+ args={{
223
+ label: "My Cheetah Gallery",
224
+ height: 600,
225
+ buttons: [],
226
+ sources: ["upload"]
227
+ }}
213
228
  >
214
229
  {#snippet template(args)}
215
230
  <Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -222,7 +237,8 @@
222
237
  label: "My Cheetah Gallery",
223
238
  show_label: true,
224
239
  allow_preview: false,
225
- buttons: []
240
+ buttons: [],
241
+ sources: ["upload"]
226
242
  }}
227
243
  >
228
244
  {#snippet template(args)}
@@ -236,7 +252,8 @@
236
252
  label: "My Cheetah Gallery",
237
253
  show_label: true,
238
254
  preview: true,
239
- buttons: []
255
+ buttons: [],
256
+ sources: ["upload"]
240
257
  }}
241
258
  >
242
259
  {#snippet template(args)}
@@ -250,7 +267,8 @@
250
267
  label: "My Cheetah Gallery",
251
268
  show_label: true,
252
269
  object_fit: "scale-down",
253
- buttons: []
270
+ buttons: [],
271
+ sources: ["upload"]
254
272
  }}
255
273
  >
256
274
  {#snippet template(args)}
@@ -264,7 +282,8 @@
264
282
  label: "My Cheetah Gallery",
265
283
  show_label: true,
266
284
  object_fit: "contain",
267
- buttons: []
285
+ buttons: [],
286
+ sources: ["upload"]
268
287
  }}
269
288
  >
270
289
  {#snippet template(args)}
@@ -278,7 +297,8 @@
278
297
  label: "My Cheetah Gallery",
279
298
  show_label: true,
280
299
  object_fit: "cover",
281
- buttons: []
300
+ buttons: [],
301
+ sources: ["upload"]
282
302
  }}
283
303
  >
284
304
  {#snippet template(args)}
@@ -292,7 +312,8 @@
292
312
  label: "My Cheetah Gallery",
293
313
  show_label: true,
294
314
  object_fit: "none",
295
- buttons: []
315
+ buttons: [],
316
+ sources: ["upload"]
296
317
  }}
297
318
  >
298
319
  {#snippet template(args)}
@@ -306,7 +327,8 @@
306
327
  label: "My Cheetah Gallery",
307
328
  show_label: true,
308
329
  object_fit: "fill",
309
- buttons: []
330
+ buttons: [],
331
+ sources: ["upload"]
310
332
  }}
311
333
  >
312
334
  {#snippet template(args)}
@@ -316,7 +338,12 @@
316
338
 
317
339
  <Story
318
340
  name="Gallery with share button"
319
- args={{ label: "My Cheetah Gallery", show_label: true, buttons: ["share"] }}
341
+ args={{
342
+ label: "My Cheetah Gallery",
343
+ show_label: true,
344
+ buttons: ["share"],
345
+ sources: ["upload"]
346
+ }}
320
347
  >
321
348
  {#snippet template(args)}
322
349
  <Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -331,7 +358,8 @@
331
358
  rows: 2,
332
359
  columns: 2,
333
360
  height: 400,
334
- buttons: []
361
+ buttons: [],
362
+ sources: ["upload"]
335
363
  }}
336
364
  >
337
365
  {#snippet template(args)}
@@ -347,7 +375,8 @@
347
375
  rows: 2,
348
376
  columns: 2,
349
377
  height: 200,
350
- buttons: []
378
+ buttons: [],
379
+ sources: ["upload"]
351
380
  }}
352
381
  >
353
382
  {#snippet template(args)}
@@ -361,7 +390,8 @@
361
390
  label: "My Cheetah Gallery",
362
391
  rows: 2,
363
392
  height: 400,
364
- buttons: ["download"]
393
+ buttons: ["download"],
394
+ sources: ["upload"]
365
395
  }}
366
396
  >
367
397
  {#snippet template(args)}
@@ -375,7 +405,8 @@
375
405
  label: "My Cheetah Gallery",
376
406
  columns: 10,
377
407
  buttons: ["download"],
378
- fit_columns: false
408
+ fit_columns: false,
409
+ sources: ["upload"]
379
410
  }}
380
411
  >
381
412
  {#snippet template(args)}
@@ -389,7 +420,8 @@
389
420
  label: "My Cheetah Gallery",
390
421
  columns: 10,
391
422
  buttons: ["download"],
392
- fit_columns: true
423
+ fit_columns: true,
424
+ sources: ["upload"]
393
425
  }}
394
426
  >
395
427
  {#snippet template(args)}
package/dist/shared/Gallery.svelte CHANGED
@@ -157,9 +157,9 @@
157
157
  );
158
158
 
159
159
  let prev_value: GalleryData[] | null = $state(value);
160
- // if (selected_index == null && preview && value?.length) {
161
- // selected_index = 0;
162
- // }
160
+ if (selected_index == null && preview && value?.length) {
161
+ selected_index = 0;
162
+ }
163
163
  let old_selected_index: number | null = $state(selected_index);
164
164
 
165
165
  $effect(() => {
@@ -414,7 +414,11 @@
414
414
  {/if}
415
415
 
416
416
  {#if show_fullscreen_button}
417
- <FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
417
+ <FullscreenButton
418
+ {fullscreen}
419
+ onclick={(is_fullscreen) =>
420
+ onfullscreen({ detail: is_fullscreen })}
421
+ />
418
422
  {/if}
419
423
 
420
424
  {#if show_share_button}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.17.0",
3
+ "version": "0.17.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.3",
11
- "@gradio/atoms": "^0.21.0",
11
+ "@gradio/atoms": "^0.22.0",
12
12
  "@gradio/client": "^2.0.4",
13
- "@gradio/file": "^0.14.2",
14
- "@gradio/image": "^0.25.2",
15
- "@gradio/statustracker": "^0.12.3",
13
+ "@gradio/file": "^0.14.3",
14
+ "@gradio/image": "^0.25.3",
16
15
  "@gradio/icons": "^0.15.1",
17
- "@gradio/utils": "^0.11.2",
18
- "@gradio/video": "^0.20.2",
19
- "@gradio/upload": "^0.17.5"
16
+ "@gradio/statustracker": "^0.12.4",
17
+ "@gradio/upload": "^0.17.6",
18
+ "@gradio/utils": "^0.11.3",
19
+ "@gradio/video": "^0.20.3"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.15.2"
package/shared/Gallery.svelte CHANGED
@@ -157,9 +157,9 @@
157
157
  );
158
158
 
159
159
  let prev_value: GalleryData[] | null = $state(value);
160
- // if (selected_index == null && preview && value?.length) {
161
- // selected_index = 0;
162
- // }
160
+ if (selected_index == null && preview && value?.length) {
161
+ selected_index = 0;
162
+ }
163
163
  let old_selected_index: number | null = $state(selected_index);
164
164
 
165
165
  $effect(() => {
@@ -414,7 +414,11 @@
414
414
  {/if}
415
415
 
416
416
  {#if show_fullscreen_button}
417
- <FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
417
+ <FullscreenButton
418
+ {fullscreen}
419
+ onclick={(is_fullscreen) =>
420
+ onfullscreen({ detail: is_fullscreen })}
421
+ />
418
422
  {/if}
419
423
 
420
424
  {#if show_share_button}