@gradio/gallery 0.17.1 → 0.17.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.17.2
4
+
5
+ ### Fixes
6
+
7
+ - [#12927](https://github.com/gradio-app/gradio/pull/12927) [`ca84f3e`](https://github.com/gradio-app/gradio/commit/ca84f3e36c6a3f3c3f0b57084b6f514d6cded1d4) - Fix Gallery CSS Issue. Thanks @freddyaboulton!
8
+
9
+ ## 0.17.1
10
+
11
+ ### Dependency updates
12
+
13
+ - @gradio/client@2.1.0
14
+
3
15
  ## 0.17.1
4
16
 
5
17
  ### Fixes
package/Index.svelte CHANGED
@@ -158,9 +158,7 @@
158
158
  scale={gradio.shared.scale}
159
159
  min_width={gradio.shared.min_width}
160
160
  allow_overflow={false}
161
- height={typeof gradio.props.height === "number"
162
- ? gradio.props.height
163
- : undefined}
161
+ height={gradio.props.height || undefined}
164
162
  bind:fullscreen
165
163
  >
166
164
  <StatusTracker
@@ -175,7 +173,7 @@
175
173
  class={!gradio.props.value ||
176
174
  (active_source && active_source.includes("webcam"))
177
175
  ? "hidden-upload-input"
178
- : ""}
176
+ : "upload-wrapper"}
179
177
  >
180
178
  <BaseFileUpload
181
179
  bind:upload_promise
@@ -328,4 +326,7 @@
328
326
  .hidden-upload-input {
329
327
  display: none;
330
328
  }
329
+ .upload-wrapper {
330
+ height: 100%;
331
+ }
331
332
  </style>
package/dist/Index.svelte CHANGED
@@ -158,9 +158,7 @@
158
158
  scale={gradio.shared.scale}
159
159
  min_width={gradio.shared.min_width}
160
160
  allow_overflow={false}
161
- height={typeof gradio.props.height === "number"
162
- ? gradio.props.height
163
- : undefined}
161
+ height={gradio.props.height || undefined}
164
162
  bind:fullscreen
165
163
  >
166
164
  <StatusTracker
@@ -175,7 +173,7 @@
175
173
  class={!gradio.props.value ||
176
174
  (active_source && active_source.includes("webcam"))
177
175
  ? "hidden-upload-input"
178
- : ""}
176
+ : "upload-wrapper"}
179
177
  >
180
178
  <BaseFileUpload
181
179
  bind:upload_promise
@@ -328,4 +326,7 @@
328
326
  .hidden-upload-input {
329
327
  display: none;
330
328
  }
329
+ .upload-wrapper {
330
+ height: 100%;
331
+ }
331
332
  </style>
@@ -77,7 +77,7 @@
77
77
  value: GalleryData[] | null;
78
78
  columns: number | number[] | undefined;
79
79
  rows: number | number[] | undefined;
80
- height: number | "auto";
80
+ height: number | string;
81
81
  preview: boolean;
82
82
  allow_preview: boolean;
83
83
  object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
@@ -539,7 +539,11 @@
539
539
  class:minimal={mode === "minimal"}
540
540
  class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
541
541
  class:hidden={is_full_screen}
542
- style:height={height !== "auto" ? height + "px" : null}
542
+ style:height={height !== "auto"
543
+ ? typeof height === "number"
544
+ ? height + "px"
545
+ : height
546
+ : null}
543
547
  >
544
548
  {#if interactive && selected_index === null}
545
549
  <ModifyUpload
@@ -663,11 +667,11 @@
663
667
  {/if}
664
668
 
665
669
  <style lang="postcss">
666
- .image-container {
670
+ .gallery-container {
667
671
  height: 100%;
668
672
  position: relative;
669
673
  }
670
- .image-container :global(img),
674
+ .gallery-container :global(img),
671
675
  button {
672
676
  width: var(--size-full);
673
677
  height: var(--size-full);
@@ -10,7 +10,7 @@ type $$ComponentProps = {
10
10
  value: GalleryData[] | null;
11
11
  columns: number | number[] | undefined;
12
12
  rows: number | number[] | undefined;
13
- height: number | "auto";
13
+ height: number | string;
14
14
  preview: boolean;
15
15
  allow_preview: boolean;
16
16
  object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
package/dist/types.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface GalleryProps {
14
14
  file_types: string[] | null;
15
15
  columns: number | number[] | undefined;
16
16
  rows: number | number[] | undefined;
17
- height: number | "auto";
17
+ height: number | string;
18
18
  preview: boolean;
19
19
  allow_preview: boolean;
20
20
  selected_index: number | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.17.1",
3
+ "version": "0.17.2",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,13 +8,13 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.3",
11
- "@gradio/atoms": "^0.22.0",
12
- "@gradio/client": "^2.0.4",
11
+ "@gradio/atoms": "^0.22.1",
12
+ "@gradio/client": "^2.1.0",
13
13
  "@gradio/file": "^0.14.3",
14
- "@gradio/image": "^0.25.3",
15
- "@gradio/icons": "^0.15.1",
16
14
  "@gradio/statustracker": "^0.12.4",
17
15
  "@gradio/upload": "^0.17.6",
16
+ "@gradio/image": "^0.25.3",
17
+ "@gradio/icons": "^0.15.1",
18
18
  "@gradio/utils": "^0.11.3",
19
19
  "@gradio/video": "^0.20.3"
20
20
  },
@@ -77,7 +77,7 @@
77
77
  value: GalleryData[] | null;
78
78
  columns: number | number[] | undefined;
79
79
  rows: number | number[] | undefined;
80
- height: number | "auto";
80
+ height: number | string;
81
81
  preview: boolean;
82
82
  allow_preview: boolean;
83
83
  object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
@@ -539,7 +539,11 @@
539
539
  class:minimal={mode === "minimal"}
540
540
  class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
541
541
  class:hidden={is_full_screen}
542
- style:height={height !== "auto" ? height + "px" : null}
542
+ style:height={height !== "auto"
543
+ ? typeof height === "number"
544
+ ? height + "px"
545
+ : height
546
+ : null}
543
547
  >
544
548
  {#if interactive && selected_index === null}
545
549
  <ModifyUpload
@@ -663,11 +667,11 @@
663
667
  {/if}
664
668
 
665
669
  <style lang="postcss">
666
- .image-container {
670
+ .gallery-container {
667
671
  height: 100%;
668
672
  position: relative;
669
673
  }
670
- .image-container :global(img),
674
+ .gallery-container :global(img),
671
675
  button {
672
676
  width: var(--size-full);
673
677
  height: var(--size-full);
package/types.ts CHANGED
@@ -18,7 +18,7 @@ export interface GalleryProps {
18
18
  file_types: string[] | null;
19
19
  columns: number | number[] | undefined;
20
20
  rows: number | number[] | undefined;
21
- height: number | "auto";
21
+ height: number | string;
22
22
  preview: boolean;
23
23
  allow_preview: boolean;
24
24
  selected_index: number | null;