@gradio/imageslider 0.2.0 → 0.2.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/Index.svelte +6 -0
  3. package/dist/Index.svelte +6 -0
  4. package/dist/shared/SliderPreview.svelte +5 -5
  5. package/dist/shared/SliderPreview.svelte.d.ts +2 -0
  6. package/package.json +5 -5
  7. package/shared/SliderPreview.svelte +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @gradio/imageslider
2
2
 
3
+ ## 0.2.2
4
+
5
+ ### Features
6
+
7
+ - [#11177](https://github.com/gradio-app/gradio/pull/11177) [`3068196`](https://github.com/gradio-app/gradio/commit/3068196d47234fd1c1634f33b9ddfc089f5cbbe0) - Improved, smoother fullscreen mode for components. Thanks @aliabid94!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/statustracker@0.10.11
12
+ - @gradio/atoms@0.16.1
13
+ - @gradio/client@1.15.0
14
+ - @gradio/upload@0.16.5
15
+
16
+ ## 0.2.1
17
+
18
+ ### Dependency updates
19
+
20
+ - @gradio/upload@0.16.4
21
+
3
22
  ## 0.2.0
4
23
 
5
24
  ### Features
package/Index.svelte CHANGED
@@ -33,6 +33,7 @@
33
33
  export let interactive: boolean;
34
34
  export let placeholder: string | undefined = undefined;
35
35
  export let show_fullscreen_button: boolean;
36
+ let fullscreen = false;
36
37
  export let input_ready: boolean;
37
38
  export let slider_position: number;
38
39
  export let upload_count = 1;
@@ -117,6 +118,7 @@
117
118
  {container}
118
119
  {scale}
119
120
  {min_width}
121
+ bind:fullscreen
120
122
  >
121
123
  <StatusTracker
122
124
  autoscroll={gradio.autoscroll}
@@ -128,6 +130,10 @@
128
130
  on:share={({ detail }) => gradio.dispatch("share", detail)}
129
131
  on:error={({ detail }) => gradio.dispatch("error", detail)}
130
132
  on:clear={() => gradio.dispatch("clear")}
133
+ on:fullscreen={({ detail }) => {
134
+ fullscreen = detail;
135
+ }}
136
+ {fullscreen}
131
137
  {interactive}
132
138
  bind:value
133
139
  {label}
package/dist/Index.svelte CHANGED
@@ -26,6 +26,7 @@ export let loading_status;
26
26
  export let interactive;
27
27
  export let placeholder = void 0;
28
28
  export let show_fullscreen_button;
29
+ let fullscreen = false;
29
30
  export let input_ready;
30
31
  export let slider_position;
31
32
  export let upload_count = 1;
@@ -89,6 +90,7 @@ const handle_drop = (event) => {
89
90
  {container}
90
91
  {scale}
91
92
  {min_width}
93
+ bind:fullscreen
92
94
  >
93
95
  <StatusTracker
94
96
  autoscroll={gradio.autoscroll}
@@ -100,6 +102,10 @@ const handle_drop = (event) => {
100
102
  on:share={({ detail }) => gradio.dispatch("share", detail)}
101
103
  on:error={({ detail }) => gradio.dispatch("error", detail)}
102
104
  on:clear={() => gradio.dispatch("clear")}
105
+ on:fullscreen={({ detail }) => {
106
+ fullscreen = detail;
107
+ }}
108
+ {fullscreen}
103
109
  {interactive}
104
110
  bind:value
105
111
  {label}
package/dist/shared/SliderPreview.svelte CHANGED
@@ -24,6 +24,7 @@ export let layer_images = true;
24
24
  export let show_single = false;
25
25
  export let slider_color;
26
26
  export let show_fullscreen_button = true;
27
+ export let fullscreen = false;
27
28
  export let el_width = 0;
28
29
  export let max_height;
29
30
  export let interactive = true;
@@ -92,7 +93,6 @@ onMount(() => {
92
93
  observer?.disconnect();
93
94
  };
94
95
  });
95
- let is_full_screen = false;
96
96
  let slider_wrap_parent;
97
97
  let image_size = { top: 0, left: 0, width: 0, height: 0 };
98
98
  function handle_image_load(event) {
@@ -113,7 +113,7 @@ function handle_image_load(event) {
113
113
  on:click={() => zoomable_image?.reset_zoom()}
114
114
  />
115
115
  {#if show_fullscreen_button}
116
- <FullscreenButton container={image_container} bind:is_full_screen />
116
+ <FullscreenButton {fullscreen} on:fullscreen />
117
117
  {/if}
118
118
 
119
119
  {#if show_download_button}
@@ -140,7 +140,7 @@ function handle_image_load(event) {
140
140
  class="slider-wrap"
141
141
  bind:this={slider_wrap_parent}
142
142
  bind:clientWidth={el_width}
143
- class:limit_height={!is_full_screen}
143
+ class:limit_height={!fullscreen}
144
144
  >
145
145
  <Slider
146
146
  bind:position
@@ -156,7 +156,7 @@ function handle_image_load(event) {
156
156
  bind:img_el={img}
157
157
  variant="preview"
158
158
  transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
159
- fullscreen={is_full_screen}
159
+ {fullscreen}
160
160
  {max_height}
161
161
  on:load={handle_image_load}
162
162
  />
@@ -169,7 +169,7 @@ function handle_image_load(event) {
169
169
  loading="lazy"
170
170
  {style}
171
171
  transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
172
- fullscreen={is_full_screen}
172
+ {fullscreen}
173
173
  {max_height}
174
174
  on:load={handle_image_load}
175
175
  />
package/dist/shared/SliderPreview.svelte.d.ts CHANGED
@@ -13,11 +13,13 @@ declare const __propDef: {
13
13
  show_single?: boolean | undefined;
14
14
  slider_color: string;
15
15
  show_fullscreen_button?: boolean | undefined;
16
+ fullscreen?: boolean | undefined;
16
17
  el_width?: number | undefined;
17
18
  max_height: number;
18
19
  interactive?: boolean | undefined;
19
20
  };
20
21
  events: {
22
+ fullscreen: CustomEvent<boolean>;
21
23
  clear: CustomEvent<void>;
22
24
  } & {
23
25
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageslider",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,11 +11,11 @@
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.16.0",
15
- "@gradio/client": "^1.14.2",
14
+ "@gradio/atoms": "^0.16.1",
15
+ "@gradio/statustracker": "^0.10.11",
16
+ "@gradio/client": "^1.15.0",
16
17
  "@gradio/icons": "^0.12.0",
17
- "@gradio/statustracker": "^0.10.10",
18
- "@gradio/upload": "^0.16.3",
18
+ "@gradio/upload": "^0.16.5",
19
19
  "@gradio/utils": "^0.10.2",
20
20
  "@gradio/wasm": "^0.18.1"
21
21
  },
package/shared/SliderPreview.svelte CHANGED
@@ -27,6 +27,7 @@
27
27
  export let show_single = false;
28
28
  export let slider_color: string;
29
29
  export let show_fullscreen_button = true;
30
+ export let fullscreen = false;
30
31
  export let el_width = 0;
31
32
  export let max_height: number;
32
33
  export let interactive = true;
@@ -117,7 +118,6 @@
117
118
  };
118
119
  });
119
120
 
120
- let is_full_screen = false;
121
121
  let slider_wrap_parent: HTMLDivElement;
122
122
 
123
123
  let image_size: { top: number; left: number; width: number; height: number } =
@@ -141,7 +141,7 @@
141
141
  on:click={() => zoomable_image?.reset_zoom()}
142
142
  />
143
143
  {#if show_fullscreen_button}
144
- <FullscreenButton container={image_container} bind:is_full_screen />
144
+ <FullscreenButton {fullscreen} on:fullscreen />
145
145
  {/if}
146
146
 
147
147
  {#if show_download_button}
@@ -168,7 +168,7 @@
168
168
  class="slider-wrap"
169
169
  bind:this={slider_wrap_parent}
170
170
  bind:clientWidth={el_width}
171
- class:limit_height={!is_full_screen}
171
+ class:limit_height={!fullscreen}
172
172
  >
173
173
  <Slider
174
174
  bind:position
@@ -184,7 +184,7 @@
184
184
  bind:img_el={img}
185
185
  variant="preview"
186
186
  transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
187
- fullscreen={is_full_screen}
187
+ {fullscreen}
188
188
  {max_height}
189
189
  on:load={handle_image_load}
190
190
  />
@@ -197,7 +197,7 @@
197
197
  loading="lazy"
198
198
  {style}
199
199
  transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
200
- fullscreen={is_full_screen}
200
+ {fullscreen}
201
201
  {max_height}
202
202
  on:load={handle_image_load}
203
203
  />