@gradio/gallery 0.10.9 → 0.11.0

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 (3) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/package.json +12 -11
  3. package/shared/Gallery.svelte +28 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.11.0
4
+
5
+ ### Features
6
+
7
+ - [#8131](https://github.com/gradio-app/gradio/pull/8131) [`bb504b4`](https://github.com/gradio-app/gradio/commit/bb504b494947a287d6386e0e7ead3860c0f15223) - Gradio components in `gr.Chatbot()`. Thanks @dawoodkhan82!
8
+
9
+ ### Fixes
10
+
11
+ - [#8594](https://github.com/gradio-app/gradio/pull/8594) [`530f8a0`](https://github.com/gradio-app/gradio/commit/530f8a0b056b35dabe9bdd148e1ab7c4577f017d) - chatbot component tweaks. Thanks @pngwn!
12
+
13
+ ### Dependency updates
14
+
15
+ - @gradio/atoms@0.7.5
16
+ - @gradio/image@0.12.0
17
+ - @gradio/utils@0.5.0
18
+ - @gradio/icons@0.5.0
19
+ - @gradio/client@1.2.0
20
+ - @gradio/statustracker@0.7.0
21
+ - @gradio/file@0.8.3
22
+ - @gradio/upload@0.11.3
23
+
24
+ ## 0.10.10
25
+
26
+ ### Dependency updates
27
+
28
+ - @gradio/client@1.1.1
29
+ - @gradio/upload@0.11.2
30
+ - @gradio/file@0.8.2
31
+ - @gradio/image@0.11.10
32
+
3
33
  ## 0.10.9
4
34
 
5
35
  ### Dependency updates
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.10.9",
3
+ "version": "0.11.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,22 +8,23 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.2",
11
- "@gradio/atoms": "^0.7.4",
12
- "@gradio/client": "^1.1.0",
13
- "@gradio/icons": "^0.4.1",
14
- "@gradio/image": "^0.11.9",
15
- "@gradio/statustracker": "^0.6.0",
16
- "@gradio/upload": "^0.11.1",
17
- "@gradio/file": "^0.8.1",
18
- "@gradio/utils": "^0.4.2"
11
+ "@gradio/atoms": "^0.7.5",
12
+ "@gradio/client": "^1.2.0",
13
+ "@gradio/icons": "^0.5.0",
14
+ "@gradio/image": "^0.12.0",
15
+ "@gradio/statustracker": "^0.7.0",
16
+ "@gradio/upload": "^0.11.3",
17
+ "@gradio/utils": "^0.5.0",
18
+ "@gradio/file": "^0.8.3"
19
19
  },
20
20
  "devDependencies": {
21
- "@gradio/preview": "^0.9.1"
21
+ "@gradio/preview": "^0.10.0"
22
22
  },
23
23
  "main": "./Index.svelte",
24
24
  "main_changeset": true,
25
25
  "exports": {
26
26
  ".": "./Index.svelte",
27
- "./package.json": "./package.json"
27
+ "./package.json": "./package.json",
28
+ "./base": "./shared/Gallery.svelte"
28
29
  }
29
30
  }
package/shared/Gallery.svelte CHANGED
@@ -32,6 +32,7 @@
32
32
  export let selected_index: number | null = null;
33
33
  export let interactive: boolean;
34
34
  export let _fetch: typeof fetch;
35
+ export let mode: "normal" | "minimal" = "normal";
35
36
 
36
37
  const dispatch = createEventDispatcher<{
37
38
  change: undefined;
@@ -205,7 +206,11 @@
205
206
  <Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
206
207
  {:else}
207
208
  {#if selected_image && allow_preview}
208
- <button on:keydown={on_keydown} class="preview">
209
+ <button
210
+ on:keydown={on_keydown}
211
+ class="preview"
212
+ class:minimal={mode === "minimal"}
213
+ >
209
214
  <div class="icon-buttons">
210
215
  {#if show_download_button}
211
216
  <div class="download-button-container">
@@ -262,7 +267,7 @@
262
267
  bind:this={el[i]}
263
268
  on:click={() => (selected_index = i)}
264
269
  class="thumbnail-item thumbnail-small"
265
- class:selected={selected_index === i}
270
+ class:selected={selected_index === i && mode !== "minimal"}
266
271
  aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
267
272
  >
268
273
  <Image
@@ -278,7 +283,11 @@
278
283
  </button>
279
284
  {/if}
280
285
 
281
- <div class="grid-wrap" class:fixed-height={!height || height == "auto"}>
286
+ <div
287
+ class="grid-wrap"
288
+ class:minimal={mode === "minimal"}
289
+ class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
290
+ >
282
291
  <div
283
292
  class="grid-container"
284
293
  style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
@@ -342,6 +351,11 @@
342
351
  height: var(--size-full);
343
352
  }
344
353
 
354
+ .preview.minimal {
355
+ width: fit-content;
356
+ height: fit-content;
357
+ }
358
+
345
359
  .preview::before {
346
360
  content: "";
347
361
  position: absolute;
@@ -382,6 +396,10 @@
382
396
  height: var(--size-full);
383
397
  }
384
398
 
399
+ .preview.minimal :global(img.with-caption) {
400
+ height: auto;
401
+ }
402
+
385
403
  .caption {
386
404
  padding: var(--size-2) var(--size-3);
387
405
  overflow: hidden;
@@ -409,7 +427,7 @@
409
427
  --ring-color: transparent;
410
428
  position: relative;
411
429
  box-shadow:
412
- 0 0 0 2px var(--ring-color),
430
+ inset 0 0 0 1px var(--ring-color),
413
431
  var(--shadow-drop);
414
432
  border: 1px solid var(--border-color-primary);
415
433
  border-radius: var(--button-small-radius);
@@ -422,11 +440,13 @@
422
440
 
423
441
  .thumbnail-item:hover {
424
442
  --ring-color: var(--color-accent);
443
+ border-color: var(--color-accent);
425
444
  filter: brightness(1.1);
426
445
  }
427
446
 
428
447
  .thumbnail-item.selected {
429
448
  --ring-color: var(--color-accent);
449
+ border-color: var(--color-accent);
430
450
  }
431
451
 
432
452
  .thumbnail-small {
@@ -511,4 +531,8 @@
511
531
  .icon-buttons .download-button-container {
512
532
  margin: var(--size-1) 0;
513
533
  }
534
+
535
+ .grid-wrap.minimal {
536
+ padding: 0;
537
+ }
514
538
  </style>