@gradio/gallery 0.4.0-beta.5 → 0.4.0-beta.7

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 +28 -31
  2. package/Gallery.stories.svelte +11 -11
  3. package/Gallery.test.ts +72 -0
  4. package/{static/StaticGallery.svelte → Index.svelte} +9 -5
  5. package/package.json +10 -13
  6. package/{static → shared}/Gallery.svelte +78 -59
  7. package/static/index.ts +0 -1
  8. /package/{static → shared}/utils.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,55 +1,52 @@
1
1
  # @gradio/gallery
2
2
 
3
- ## 0.4.0-beta.5
3
+ ## 0.4.0-beta.7
4
4
 
5
- ### Features
5
+ ### Patch Changes
6
6
 
7
- - [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
7
+ - Updated dependencies []:
8
+ - @gradio/image@0.3.0-beta.7
8
9
 
9
- ## 0.4.0-beta.4
10
+ ## 0.4.0-beta.6
10
11
 
11
- ### Patch Changes
12
+ ### Features
12
13
 
13
- - Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
14
- - @gradio/utils@0.2.0-beta.3
15
- - @gradio/atoms@0.2.0-beta.3
16
- - @gradio/image@0.3.0-beta.4
17
- - @gradio/statustracker@0.3.0-beta.4
18
- - @gradio/upload@0.3.0-beta.3
14
+ - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
15
+ - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
19
16
 
20
- ## 0.4.0-beta.3
17
+ ## 0.5.1
21
18
 
22
19
  ### Patch Changes
23
20
 
24
- - Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
25
- - @gradio/utils@0.2.0-beta.2
26
- - @gradio/atoms@0.2.0-beta.2
27
- - @gradio/image@0.3.0-beta.3
28
- - @gradio/statustracker@0.3.0-beta.3
29
- - @gradio/upload@0.3.0-beta.2
21
+ - Updated dependencies [[`b67115e8e`](https://github.com/gradio-app/gradio/commit/b67115e8e6e489fffd5271ea830211863241ddc5), [`8d909624f`](https://github.com/gradio-app/gradio/commit/8d909624f61a49536e3c0f71cb2d9efe91216219), [`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
22
+ - @gradio/image@0.4.0
23
+ - @gradio/atoms@0.2.0
24
+ - @gradio/statustracker@0.2.3
25
+ - @gradio/upload@0.3.3
30
26
 
31
- ## 0.4.0-beta.2
27
+ ## 0.5.0
32
28
 
33
29
  ### Features
34
30
 
35
- - [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
31
+ - [#5780](https://github.com/gradio-app/gradio/pull/5780) [`ed0f9a21b`](https://github.com/gradio-app/gradio/commit/ed0f9a21b04ad6b941b63d2ce45100dbd1abd5c5) - Adds `change()` event to `gr.Gallery`. Thanks [@abidlabs](https://github.com/abidlabs)!
32
+ - [#5783](https://github.com/gradio-app/gradio/pull/5783) [`4567788bd`](https://github.com/gradio-app/gradio/commit/4567788bd1fc25df9322902ba748012e392b520a) - Adds the ability to set the `selected_index` in a `gr.Gallery`. Thanks [@abidlabs](https://github.com/abidlabs)!
36
33
 
37
- ## 0.4.0-beta.1
34
+ ### Fixes
38
35
 
39
- ### Patch Changes
36
+ - [#5798](https://github.com/gradio-app/gradio/pull/5798) [`a0d3cc45c`](https://github.com/gradio-app/gradio/commit/a0d3cc45c6db48dc0db423c229b8fb285623cdc4) - Fix `gr.SelectData` so that the target attribute is correctly attached, and the filedata is included in the data attribute with `gr.Gallery`. Thanks [@abidlabs](https://github.com/abidlabs)!
40
37
 
41
- - Updated dependencies []:
42
- - @gradio/utils@0.2.0-beta.1
43
- - @gradio/atoms@0.2.0-beta.1
44
- - @gradio/image@0.3.0-beta.1
45
- - @gradio/statustracker@0.3.0-beta.1
46
- - @gradio/upload@0.3.0-beta.1
38
+ ## 0.4.1
39
+
40
+ ### Fixes
41
+
42
+ - [#5735](https://github.com/gradio-app/gradio/pull/5735) [`abb5e9df4`](https://github.com/gradio-app/gradio/commit/abb5e9df47989b2c56c2c312d74944678f9f2d4e) - Ensure images with no caption download in gallery. Thanks [@hannahblair](https://github.com/hannahblair)!
43
+ - [#5754](https://github.com/gradio-app/gradio/pull/5754) [`502054848`](https://github.com/gradio-app/gradio/commit/502054848fdbe39fc03ec42445242b4e49b7affc) - Fix Gallery `columns` and `rows` params. Thanks [@abidlabs](https://github.com/abidlabs)!
47
44
 
48
- ## 0.4.0-beta.0
45
+ ## 0.4.0
49
46
 
50
47
  ### Features
51
48
 
52
- - [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
49
+ - [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
53
50
 
54
51
  ## 0.3.4
55
52
 
@@ -123,4 +120,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
123
120
 
124
121
  ### Features
125
122
 
126
- - [#4995](https://github.com/gradio-app/gradio/pull/4995) [`3f8c210b`](https://github.com/gradio-app/gradio/commit/3f8c210b01ef1ceaaf8ee73be4bf246b5b745bbf) - Implement left and right click in `Gallery` component and show implicit images in `Gallery` grid. Thanks [@hannahblair](https://github.com/hannahblair)!
123
+ - [#4995](https://github.com/gradio-app/gradio/pull/4995) [`3f8c210b`](https://github.com/gradio-app/gradio/commit/3f8c210b01ef1ceaaf8ee73be4bf246b5b745bbf) - Implement left and right click in `Gallery` component and show implicit images in `Gallery` grid. Thanks [@hannahblair](https://github.com/hannahblair)!
package/Gallery.stories.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
- import Gallery from "./static/";
3
+ import Gallery from "./Index.svelte";
4
4
  </script>
5
5
 
6
6
  <Meta
@@ -19,13 +19,13 @@
19
19
  control: { type: "boolean" },
20
20
  defaultValue: true
21
21
  },
22
- grid_cols: {
22
+ columns: {
23
23
  options: [1, 2, 3, 4],
24
24
  description: "The number of columns to show in grid",
25
25
  control: { type: "select" },
26
26
  defaultValue: 2
27
27
  },
28
- grid_rows: {
28
+ rows: {
29
29
  options: [1, 2, 3, 4],
30
30
  description: "The number of rows to show in grid",
31
31
  control: { type: "select" },
@@ -91,20 +91,20 @@
91
91
  args={{ label: "My Cheetah Gallery", show_label: false }}
92
92
  />
93
93
  <Story
94
- name="Gallery with grid_rows=3 and grid_cols=3"
94
+ name="Gallery with rows=3 and columns=3"
95
95
  args={{
96
96
  label: "My Cheetah Gallery",
97
97
  show_label: true,
98
- grid_rows: 3,
99
- grid_cols: 3
98
+ rows: 3,
99
+ columns: 3
100
100
  }}
101
101
  />
102
102
  <Story
103
- name="Gallery with grid_cols=4"
103
+ name="Gallery with columns=4"
104
104
  args={{
105
105
  label: "My Cheetah Gallery",
106
106
  show_label: true,
107
- grid_cols: 4
107
+ columns: 4
108
108
  }}
109
109
  />
110
110
  <Story
@@ -184,8 +184,8 @@
184
184
  args={{
185
185
  label: "My Cheetah Gallery",
186
186
  show_label: true,
187
- grid_rows: 2,
188
- grid_cols: 2,
187
+ rows: 2,
188
+ columns: 2,
189
189
  height: 400,
190
190
  value: [
191
191
  "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
@@ -201,7 +201,7 @@
201
201
  name="Gallery with download button"
202
202
  args={{
203
203
  label: "My Cheetah Gallery",
204
- grid_rows: 2,
204
+ rows: 2,
205
205
  height: 400,
206
206
  show_download_button: true,
207
207
  value: ["https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"]
package/Gallery.test.ts ADDED
@@ -0,0 +1,72 @@
1
+ import { test, describe, assert, afterEach, vi } from "vitest";
2
+ import { cleanup, render } from "@gradio/tootils";
3
+ import { setupi18n } from "../app/src/i18n";
4
+
5
+ import Gallery from "./static";
6
+ import type { LoadingStatus } from "@gradio/statustracker";
7
+
8
+ const loading_status: LoadingStatus = {
9
+ eta: 0,
10
+ queue_position: 1,
11
+ queue_size: 1,
12
+ status: "complete" as LoadingStatus["status"],
13
+ scroll_to_output: false,
14
+ visible: true,
15
+ fn_index: 0,
16
+ show_progress: "full"
17
+ };
18
+
19
+ describe("Gallery", () => {
20
+ afterEach(() => {
21
+ cleanup();
22
+ vi.useRealTimers();
23
+ });
24
+ beforeEach(() => {
25
+ setupi18n();
26
+ });
27
+ test("renders the image provided", async () => {
28
+ const { getByTestId } = await render(Gallery, {
29
+ show_label: true,
30
+ label: "Gallery",
31
+ loading_status: loading_status,
32
+ preview: true,
33
+ root: "",
34
+ root_url: "",
35
+ value: [
36
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
37
+ ]
38
+ });
39
+ let item = getByTestId("detailed-image") as HTMLImageElement;
40
+ assert.equal(
41
+ item.src,
42
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
43
+ );
44
+ });
45
+
46
+ test("triggers the change event if and only if the images change", async () => {
47
+ const { listen, component } = await render(Gallery, {
48
+ show_label: true,
49
+ label: "Gallery",
50
+ loading_status: loading_status,
51
+ preview: true,
52
+ root: "",
53
+ root_url: "",
54
+ value: [
55
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
56
+ ]
57
+ });
58
+ const change_event = listen("change");
59
+
60
+ await component.$set({
61
+ value: [
62
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
63
+ ]
64
+ });
65
+ assert.equal(change_event.callCount, 0);
66
+
67
+ await component.$set({
68
+ value: ["https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg"]
69
+ });
70
+ assert.equal(change_event.callCount, 1);
71
+ });
72
+ });
package/{static/StaticGallery.svelte → Index.svelte} RENAMED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import type { Gradio, ShareData, SelectData } from "@gradio/utils";
3
3
  import { Block } from "@gradio/atoms";
4
- import Gallery from "./Gallery.svelte";
4
+ import Gallery from "./shared/Gallery.svelte";
5
5
  import type { LoadingStatus } from "@gradio/statustracker";
6
6
  import { StatusTracker } from "@gradio/statustracker";
7
7
  import type { FileData } from "@gradio/upload";
@@ -21,16 +21,18 @@
21
21
  export let container = true;
22
22
  export let scale: number | null = null;
23
23
  export let min_width: number | undefined = undefined;
24
- export let grid_cols: number | number[] | undefined = [2];
25
- export let grid_rows: number | number[] | undefined = undefined;
24
+ export let columns: number | number[] | undefined = [2];
25
+ export let rows: number | number[] | undefined = undefined;
26
26
  export let height: number | "auto" = "auto";
27
27
  export let preview: boolean;
28
28
  export let allow_preview = true;
29
+ export let selected_index: number | null = null;
29
30
  export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
30
31
  "cover";
31
32
  export let show_share_button = false;
32
33
  export let show_download_button = false;
33
34
  export let gradio: Gradio<{
35
+ change: typeof value;
34
36
  select: SelectData;
35
37
  share: ShareData;
36
38
  error: string;
@@ -55,6 +57,7 @@
55
57
  {...loading_status}
56
58
  />
57
59
  <Gallery
60
+ on:change={() => gradio.dispatch("change", value)}
58
61
  on:select={(e) => gradio.dispatch("select", e.detail)}
59
62
  on:share={(e) => gradio.dispatch("share", e.detail)}
60
63
  on:error={(e) => gradio.dispatch("error", e.detail)}
@@ -63,12 +66,13 @@
63
66
  {show_label}
64
67
  {root}
65
68
  {root_url}
66
- {grid_cols}
67
- {grid_rows}
69
+ {columns}
70
+ {rows}
68
71
  {height}
69
72
  {preview}
70
73
  {object_fit}
71
74
  {allow_preview}
75
+ bind:selected_index
72
76
  {show_share_button}
73
77
  {show_download_button}
74
78
  i18n={gradio.i18n}
package/package.json CHANGED
@@ -1,26 +1,23 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.4.0-beta.5",
3
+ "version": "0.4.0-beta.7",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
- "main": "./static/index.ts",
7
6
  "author": "",
8
7
  "license": "ISC",
9
8
  "private": false,
10
9
  "dependencies": {
11
- "@gradio/atoms": "^0.2.0-beta.3",
12
- "@gradio/icons": "^0.2.0-beta.0",
13
- "@gradio/image": "^0.3.0-beta.5",
14
- "@gradio/statustracker": "^0.3.0-beta.5",
15
- "@gradio/upload": "^0.3.0-beta.3",
16
- "@gradio/utils": "^0.2.0-beta.3"
10
+ "dequal": "^2.0.2",
11
+ "@gradio/atoms": "^0.2.0-beta.4",
12
+ "@gradio/icons": "^0.2.0-beta.1",
13
+ "@gradio/image": "^0.3.0-beta.7",
14
+ "@gradio/statustracker": "^0.3.0-beta.6",
15
+ "@gradio/upload": "^0.3.0-beta.4",
16
+ "@gradio/utils": "^0.2.0-beta.4"
17
17
  },
18
18
  "main_changeset": true,
19
19
  "exports": {
20
- ".": "./static/index.ts",
21
- "./package.json": "./package.json",
22
- "./interactive": "./interactive/index.ts",
23
- "./static": "./static/index.ts",
24
- "./example": "./example/index.ts"
20
+ ".": "./Index.svelte",
21
+ "./package.json": "./package.json"
25
22
  }
26
23
  }
package/{static → shared}/Gallery.svelte RENAMED
@@ -2,7 +2,7 @@
2
2
  import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
3
3
  import { ModifyUpload } from "@gradio/upload";
4
4
  import type { SelectData } from "@gradio/utils";
5
-
5
+ import { dequal } from "dequal";
6
6
  import { createEventDispatcher } from "svelte";
7
7
  import { tick } from "svelte";
8
8
 
@@ -18,8 +18,8 @@
18
18
  export let root = "";
19
19
  export let root_url: null | string = null;
20
20
  export let value: { image: FileData; caption: string | null }[] | null = null;
21
- export let grid_cols: number | number[] | undefined = [2];
22
- export let grid_rows: number | number[] | undefined = undefined;
21
+ export let columns: number | number[] | undefined = [2];
22
+ export let rows: number | number[] | undefined = undefined;
23
23
  export let height: number | "auto" = "auto";
24
24
  export let preview: boolean;
25
25
  export let allow_preview = true;
@@ -28,8 +28,10 @@
28
28
  export let show_share_button = false;
29
29
  export let show_download_button = false;
30
30
  export let i18n: I18nFormatter;
31
+ export let selected_index: number | null = null;
31
32
 
32
33
  const dispatch = createEventDispatcher<{
34
+ change: undefined;
33
35
  select: SelectData;
34
36
  }>();
35
37
 
@@ -49,31 +51,34 @@
49
51
 
50
52
  let prevValue: { image: FileData; caption: string | null }[] | null | null =
51
53
  value;
52
- let selected_image = preview && value?.length ? 0 : null;
53
- let old_selected_image: number | null = selected_image;
54
+ if (selected_index === null && preview && value?.length) {
55
+ selected_index = 0;
56
+ }
57
+ let old_selected_index: number | null = selected_index;
54
58
 
55
- $: if (prevValue !== value) {
59
+ $: if (!dequal(prevValue, value)) {
56
60
  // When value is falsy (clear button or first load),
57
61
  // preview determines the selected image
58
62
  if (was_reset) {
59
- selected_image = preview && value?.length ? 0 : null;
63
+ selected_index = preview && value?.length ? 0 : null;
60
64
  was_reset = false;
61
- // Otherwise we keep the selected_image the same if the
65
+ // Otherwise we keep the selected_index the same if the
62
66
  // gallery has at least as many elements as it did before
63
67
  } else {
64
- selected_image =
65
- selected_image !== null &&
68
+ selected_index =
69
+ selected_index !== null &&
66
70
  value !== null &&
67
- selected_image < value.length
68
- ? selected_image
71
+ selected_index < value.length
72
+ ? selected_index
69
73
  : null;
70
74
  }
75
+ dispatch("change");
71
76
  prevValue = value;
72
77
  }
73
78
 
74
79
  $: previous =
75
- ((selected_image ?? 0) + (_value?.length ?? 0) - 1) % (_value?.length ?? 0);
76
- $: next = ((selected_image ?? 0) + 1) % (_value?.length ?? 0);
80
+ ((selected_index ?? 0) + (_value?.length ?? 0) - 1) % (_value?.length ?? 0);
81
+ $: next = ((selected_index ?? 0) + 1) % (_value?.length ?? 0);
77
82
 
78
83
  function handle_preview_click(event: MouseEvent): void {
79
84
  const element = event.target as HTMLElement;
@@ -82,9 +87,9 @@
82
87
  const centerX = width / 2;
83
88
 
84
89
  if (x < centerX) {
85
- selected_image = previous;
90
+ selected_index = previous;
86
91
  } else {
87
- selected_image = next;
92
+ selected_index = next;
88
93
  }
89
94
  }
90
95
 
@@ -92,15 +97,15 @@
92
97
  switch (e.code) {
93
98
  case "Escape":
94
99
  e.preventDefault();
95
- selected_image = null;
100
+ selected_index = null;
96
101
  break;
97
102
  case "ArrowLeft":
98
103
  e.preventDefault();
99
- selected_image = previous;
104
+ selected_index = previous;
100
105
  break;
101
106
  case "ArrowRight":
102
107
  e.preventDefault();
103
- selected_image = next;
108
+ selected_index = next;
104
109
  break;
105
110
  default:
106
111
  break;
@@ -116,24 +121,26 @@
116
121
  return selected.data;
117
122
  } else if (typeof selected === "string") {
118
123
  return selected;
124
+ } else if (Array.isArray(selected)) {
125
+ return getHrefValue(selected[0]);
119
126
  }
120
127
  return "";
121
128
  }
122
129
 
123
130
  $: {
124
- if (selected_image !== old_selected_image) {
125
- old_selected_image = selected_image;
126
- if (selected_image !== null) {
131
+ if (selected_index !== old_selected_index) {
132
+ old_selected_index = selected_index;
133
+ if (selected_index !== null) {
127
134
  dispatch("select", {
128
- index: selected_image,
129
- value: _value?.[selected_image].caption
135
+ index: selected_index,
136
+ value: _value?.[selected_index]
130
137
  });
131
138
  }
132
139
  }
133
140
  }
134
141
 
135
142
  $: if (allow_preview) {
136
- scroll_to_img(selected_image);
143
+ scroll_to_img(selected_index);
137
144
  }
138
145
 
139
146
  let el: HTMLButtonElement[] = [];
@@ -157,10 +164,12 @@
157
164
  container_width / 2 +
158
165
  container_element.scrollLeft;
159
166
 
160
- container_element?.scrollTo({
161
- left: pos < 0 ? 0 : pos,
162
- behavior: "smooth"
163
- });
167
+ if (container_element && typeof container_element.scrollTo === "function") {
168
+ container_element.scrollTo({
169
+ left: pos < 0 ? 0 : pos,
170
+ behavior: "smooth"
171
+ });
172
+ }
164
173
  }
165
174
 
166
175
  let client_height = 0;
@@ -175,13 +184,12 @@
175
184
  {#if value === null || _value === null || _value.length === 0}
176
185
  <Empty unpadded_box={true} size="large"><Image /></Empty>
177
186
  {:else}
178
- {#if selected_image !== null && allow_preview}
179
- <!-- svelte-ignore a11y-no-static-element-interactions -->
180
- <div on:keydown={on_keydown} class="preview">
187
+ {#if selected_index !== null && allow_preview}
188
+ <button on:keydown={on_keydown} class="preview">
181
189
  <div class="icon-buttons">
182
190
  {#if show_download_button}
183
191
  <a
184
- href={getHrefValue(value[selected_image])}
192
+ href={getHrefValue(value[selected_index])}
185
193
  target={window.__is_colab__ ? "_blank" : null}
186
194
  download="image"
187
195
  >
@@ -192,27 +200,30 @@
192
200
  <ModifyUpload
193
201
  {i18n}
194
202
  absolute={false}
195
- on:clear={() => (selected_image = null)}
203
+ on:clear={() => (selected_index = null)}
196
204
  />
197
205
  </div>
198
- <!-- svelte-ignore a11y-click-events-have-key-events -->
199
- <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
200
- <img
201
- data-testid="detailed-image"
206
+ <button
207
+ class="image-button"
202
208
  on:click={(event) => handle_preview_click(event)}
203
- src={_value[selected_image].image.data}
204
- alt={_value[selected_image].caption || ""}
205
- title={_value[selected_image].caption || null}
206
- class:with-caption={!!_value[selected_image].caption}
207
- style="height: calc(100% - {_value[selected_image].caption}
209
+ style="height: calc(100% - {_value[selected_index].caption
208
210
  ? '80px'
209
211
  : '60px'})"
210
- loading="lazy"
211
- />
212
- {#if _value[selected_image].caption}
213
- <div class="caption">
214
- {_value[selected_image].caption}
215
- </div>
212
+ aria-label="detailed view of selected image"
213
+ >
214
+ <img
215
+ data-testid="detailed-image"
216
+ src={_value[selected_index].image.data}
217
+ alt={_value[selected_index].caption || ""}
218
+ title={_value[selected_index].caption || null}
219
+ class:with-caption={!!_value[selected_index].caption}
220
+ loading="lazy"
221
+ />
222
+ </button>
223
+ {#if _value[selected_index].caption}
224
+ <caption class="caption">
225
+ {_value[selected_index].caption}
226
+ </caption>
216
227
  {/if}
217
228
  <div
218
229
  bind:this={container_element}
@@ -222,20 +233,21 @@
222
233
  {#each _value as image, i}
223
234
  <button
224
235
  bind:this={el[i]}
225
- on:click={() => (selected_image = i)}
236
+ on:click={() => (selected_index = i)}
226
237
  class="thumbnail-item thumbnail-small"
227
- class:selected={selected_image === i}
238
+ class:selected={selected_index === i}
239
+ aria-label={"Thumbnail " + (i + 1) + " of " + _value.length}
228
240
  >
229
241
  <img
230
242
  src={image.image.data}
231
243
  title={image.caption || null}
232
- alt={image.caption || null}
244
+ alt=""
233
245
  loading="lazy"
234
246
  />
235
247
  </button>
236
248
  {/each}
237
249
  </div>
238
- </div>
250
+ </button>
239
251
  {/if}
240
252
 
241
253
  <div
@@ -245,7 +257,7 @@
245
257
  >
246
258
  <div
247
259
  class="grid-container"
248
- style="--grid-cols:{grid_cols}; --grid-rows:{grid_rows}; --object-fit: {object_fit}; height: {height};"
260
+ style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
249
261
  class:pt-6={show_label}
250
262
  >
251
263
  {#if show_share_button}
@@ -262,8 +274,9 @@
262
274
  {#each _value as entry, i}
263
275
  <button
264
276
  class="thumbnail-item thumbnail-lg"
265
- class:selected={selected_image === i}
266
- on:click={() => (selected_image = i)}
277
+ class:selected={selected_index === i}
278
+ on:click={() => (selected_index = i)}
279
+ aria-label={"Thumbnail " + (i + 1) + " of " + _value.length}
267
280
  >
268
281
  <img
269
282
  alt={entry.caption || ""}
@@ -309,14 +322,19 @@
309
322
  }
310
323
  }
311
324
 
325
+ .image-button {
326
+ height: calc(100% - 60px);
327
+ width: 100%;
328
+ display: flex;
329
+ }
312
330
  .preview img {
313
331
  width: var(--size-full);
314
- height: calc(var(--size-full) - 60px);
332
+ height: var(--size-full);
315
333
  object-fit: contain;
316
334
  }
317
335
 
318
336
  .preview img.with-caption {
319
- height: calc(var(--size-full) - 80px);
337
+ height: var(--size-full);
320
338
  }
321
339
 
322
340
  .caption {
@@ -327,6 +345,7 @@
327
345
  text-align: center;
328
346
  text-overflow: ellipsis;
329
347
  white-space: nowrap;
348
+ align-self: center;
330
349
  }
331
350
 
332
351
  .thumbnails {
@@ -447,4 +466,4 @@
447
466
  .icon-buttons a {
448
467
  margin: var(--size-1) 0;
449
468
  }
450
- </style>
469
+ </style>
package/static/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./StaticGallery.svelte";
/package/{static → shared}/utils.ts RENAMED
File without changes