@gradio/imageslider 0.3.1-dev.2 → 0.4.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 (9) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/Index.svelte +11 -3
  3. package/dist/Index.svelte +11 -3
  4. package/dist/shared/SliderPreview.svelte +4 -1
  5. package/dist/shared/SliderPreview.svelte.d.ts +3 -0
  6. package/dist/types.d.ts +5 -2
  7. package/package.json +8 -8
  8. package/shared/SliderPreview.svelte +4 -1
  9. package/types.ts +8 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @gradio/imageslider
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Features
6
+
7
+ - [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components. Thanks @abidlabs!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.20.0
12
+ - @gradio/utils@0.11.0
13
+ - @gradio/client@2.0.1
14
+ - @gradio/statustracker@0.12.1
15
+ - @gradio/upload@0.17.3
16
+
17
+ ## 0.3.1
18
+
19
+ ### Dependency updates
20
+
21
+ - @gradio/utils@0.10.4
22
+
23
+ ## 0.3.1
24
+
25
+ ### Features
26
+
27
+ - [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Clear Error statuses
28
+ - [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
29
+
30
+ ### Dependencies
31
+
32
+ - @gradio/atoms@0.19.0
33
+ - @gradio/client@2.0.0
34
+ - @gradio/icons@0.15.0
35
+ - @gradio/statustracker@0.12.0
36
+ - @gradio/upload@0.17.2
37
+ - @gradio/utils@0.10.3
38
+
3
39
  ## 0.3.1-dev.2
4
40
 
5
41
  ### Dependency updates
package/Index.svelte CHANGED
@@ -110,9 +110,17 @@
110
110
  bind:value={gradio.props.value}
111
111
  label={gradio.shared.label}
112
112
  show_label={gradio.shared.show_label}
113
- show_download_button={gradio.props.buttons.includes("download")}
113
+ show_download_button={gradio.props.buttons.some(
114
+ (btn) => typeof btn === "string" && btn === "download"
115
+ )}
114
116
  i18n={gradio.i18n}
115
- show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
117
+ show_fullscreen_button={gradio.props.buttons.some(
118
+ (btn) => typeof btn === "string" && btn === "fullscreen"
119
+ )}
120
+ buttons={gradio.props.buttons}
121
+ on_custom_button_click={(id) => {
122
+ gradio.dispatch("custom_button_click", { id });
123
+ }}
116
124
  position={normalised_slider_position}
117
125
  slider_color={gradio.props.slider_color}
118
126
  max_height={gradio.props.max_height}
@@ -141,7 +149,7 @@
141
149
  autoscroll={gradio.shared.autoscroll}
142
150
  i18n={gradio.i18n}
143
151
  {...gradio.shared.loading_status}
144
- on:clear_status={() =>
152
+ on_clear_status={() =>
145
153
  gradio.dispatch("clear_status", gradio.shared.loading_status)}
146
154
  />
147
155
 
package/dist/Index.svelte CHANGED
@@ -110,9 +110,17 @@
110
110
  bind:value={gradio.props.value}
111
111
  label={gradio.shared.label}
112
112
  show_label={gradio.shared.show_label}
113
- show_download_button={gradio.props.buttons.includes("download")}
113
+ show_download_button={gradio.props.buttons.some(
114
+ (btn) => typeof btn === "string" && btn === "download"
115
+ )}
114
116
  i18n={gradio.i18n}
115
- show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
117
+ show_fullscreen_button={gradio.props.buttons.some(
118
+ (btn) => typeof btn === "string" && btn === "fullscreen"
119
+ )}
120
+ buttons={gradio.props.buttons}
121
+ on_custom_button_click={(id) => {
122
+ gradio.dispatch("custom_button_click", { id });
123
+ }}
116
124
  position={normalised_slider_position}
117
125
  slider_color={gradio.props.slider_color}
118
126
  max_height={gradio.props.max_height}
@@ -141,7 +149,7 @@
141
149
  autoscroll={gradio.shared.autoscroll}
142
150
  i18n={gradio.i18n}
143
151
  {...gradio.shared.loading_status}
144
- on:clear_status={() =>
152
+ on_clear_status={() =>
145
153
  gradio.dispatch("clear_status", gradio.shared.loading_status)}
146
154
  />
147
155
 
package/dist/shared/SliderPreview.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  FullscreenButton,
10
10
  DownloadLink
11
11
  } from "@gradio/atoms";
12
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
12
13
  import { Image, Download, Undo, Clear } from "@gradio/icons";
13
14
  import { type FileData } from "@gradio/client";
14
15
  import type { I18nFormatter } from "@gradio/utils";
@@ -28,6 +29,8 @@
28
29
  export let slider_color: string;
29
30
  export let show_fullscreen_button = true;
30
31
  export let fullscreen = false;
32
+ export let buttons: (string | CustomButtonType)[] | null = null;
33
+ export let on_custom_button_click: ((id: number) => void) | null = null;
31
34
  export let el_width = 0;
32
35
  export let max_height: number;
33
36
  export let interactive = true;
@@ -133,7 +136,7 @@
133
136
  <Empty unpadded_box={true} size="large"><Image /></Empty>
134
137
  {:else}
135
138
  <div class="image-container" bind:this={image_container}>
136
- <IconButtonWrapper>
139
+ <IconButtonWrapper {buttons} {on_custom_button_click}>
137
140
  <IconButton
138
141
  Icon={Undo}
139
142
  label={i18n("common.undo")}
package/dist/shared/SliderPreview.svelte.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
1
2
  import { type FileData } from "@gradio/client";
2
3
  import type { I18nFormatter } from "@gradio/utils";
3
4
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -25,6 +26,8 @@ declare const SliderPreview: $$__sveltets_2_IsomorphicComponent<{
25
26
  slider_color: string;
26
27
  show_fullscreen_button?: boolean;
27
28
  fullscreen?: boolean;
29
+ buttons?: (string | CustomButtonType)[] | null;
30
+ on_custom_button_click?: ((id: number) => void) | null;
28
31
  el_width?: number;
29
32
  max_height: number;
30
33
  interactive?: boolean;
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { SelectData, ValueData, ShareData } from "@gradio/utils";
1
+ import type { SelectData, ValueData, ShareData, CustomButton } from "@gradio/utils";
2
2
  import type { LoadingStatus } from "@gradio/statustracker";
3
3
  import type { FileData } from "@gradio/client";
4
4
  export interface ImageSliderEvents {
@@ -14,13 +14,16 @@ export interface ImageSliderEvents {
14
14
  share: ShareData;
15
15
  clear_status: LoadingStatus;
16
16
  close_stream: string;
17
+ custom_button_click: {
18
+ id: number;
19
+ };
17
20
  }
18
21
  export interface ImageSliderProps {
19
22
  value: [FileData | null, FileData | null];
20
23
  height: number | undefined;
21
24
  width: number | undefined;
22
25
  placeholder: string | undefined;
23
- buttons: string[];
26
+ buttons: (string | CustomButton)[];
24
27
  input_ready: boolean;
25
28
  slider_position: number;
26
29
  upload_count: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageslider",
3
- "version": "0.3.1-dev.2",
3
+ "version": "0.4.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,12 +11,12 @@
11
11
  "@types/d3-selection": "^3.0.11",
12
12
  "d3-drag": "^3.0.0",
13
13
  "d3-selection": "^3.0.0",
14
- "@gradio/atoms": "^0.19.0-dev.1",
15
- "@gradio/client": "^2.0.0-dev.2",
16
- "@gradio/statustracker": "^0.12.0-dev.1",
17
- "@gradio/upload": "^0.17.2-dev.2",
18
- "@gradio/utils": "^0.10.3-dev.0",
19
- "@gradio/icons": "^0.15.0-dev.0"
14
+ "@gradio/atoms": "^0.20.0",
15
+ "@gradio/client": "^2.0.1",
16
+ "@gradio/icons": "^0.15.0",
17
+ "@gradio/statustracker": "^0.12.1",
18
+ "@gradio/utils": "^0.11.0",
19
+ "@gradio/upload": "^0.17.3"
20
20
  },
21
21
  "exports": {
22
22
  ".": {
@@ -32,7 +32,7 @@
32
32
  "./package.json": "./package.json"
33
33
  },
34
34
  "devDependencies": {
35
- "@gradio/preview": "^0.15.0-dev.0"
35
+ "@gradio/preview": "^0.15.1"
36
36
  },
37
37
  "main_changeset": true,
38
38
  "peerDependencies": {
package/shared/SliderPreview.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  FullscreenButton,
10
10
  DownloadLink
11
11
  } from "@gradio/atoms";
12
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
12
13
  import { Image, Download, Undo, Clear } from "@gradio/icons";
13
14
  import { type FileData } from "@gradio/client";
14
15
  import type { I18nFormatter } from "@gradio/utils";
@@ -28,6 +29,8 @@
28
29
  export let slider_color: string;
29
30
  export let show_fullscreen_button = true;
30
31
  export let fullscreen = false;
32
+ export let buttons: (string | CustomButtonType)[] | null = null;
33
+ export let on_custom_button_click: ((id: number) => void) | null = null;
31
34
  export let el_width = 0;
32
35
  export let max_height: number;
33
36
  export let interactive = true;
@@ -133,7 +136,7 @@
133
136
  <Empty unpadded_box={true} size="large"><Image /></Empty>
134
137
  {:else}
135
138
  <div class="image-container" bind:this={image_container}>
136
- <IconButtonWrapper>
139
+ <IconButtonWrapper {buttons} {on_custom_button_click}>
137
140
  <IconButton
138
141
  Icon={Undo}
139
142
  label={i18n("common.undo")}
package/types.ts CHANGED
@@ -1,4 +1,9 @@
1
- import type { SelectData, ValueData, ShareData } from "@gradio/utils";
1
+ import type {
2
+ SelectData,
3
+ ValueData,
4
+ ShareData,
5
+ CustomButton
6
+ } from "@gradio/utils";
2
7
  import type { LoadingStatus } from "@gradio/statustracker";
3
8
  import type { FileData } from "@gradio/client";
4
9
 
@@ -15,6 +20,7 @@ export interface ImageSliderEvents {
15
20
  share: ShareData;
16
21
  clear_status: LoadingStatus;
17
22
  close_stream: string;
23
+ custom_button_click: { id: number };
18
24
  }
19
25
 
20
26
  export interface ImageSliderProps {
@@ -22,7 +28,7 @@ export interface ImageSliderProps {
22
28
  height: number | undefined;
23
29
  width: number | undefined;
24
30
  placeholder: string | undefined;
25
- buttons: string[];
31
+ buttons: (string | CustomButton)[];
26
32
  input_ready: boolean;
27
33
  slider_position: number;
28
34
  upload_count: number;