@gradio/imageslider 0.2.14 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @gradio/imageslider
 
+## 0.3.0
+
+### Features
+
+- [#11858](https://github.com/gradio-app/gradio/pull/11858) [`3f8ea13`](https://github.com/gradio-app/gradio/commit/3f8ea13a8ca92abf0ad34392e403a449fda3c6c2) - remove lite.  Thanks @pngwn!
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+- @gradio/atoms@0.18.0
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+
 ## 0.2.14
 
 ### Dependency updates

package/Index.svelte

@@ -17,7 +17,7 @@
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: [FileData | null, FileData | null] = [null, null];
 	let old_value: [FileData | null, FileData | null] = [null, null];
 	export let label: string;

package/dist/Index.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         value_is_output?: boolean;
         elem_id?: string;
         elem_classes?: string[];
-        visible?: boolean;
+        visible?: boolean | "hidden";
         value?: [FileData | null, FileData | null];
         label: string;
         show_label: boolean;
@@ -62,12 +62,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get elem_classes(): string[] | undefined;
     /**accessor*/
     set elem_classes(_: string[] | undefined);
-    get visible(): boolean | undefined;
+    get visible(): boolean | "hidden" | undefined;
     /**accessor*/
-    set visible(_: boolean | undefined);
-    get value(): [FileData | null, FileData | null] | undefined;
+    set visible(_: boolean | "hidden" | undefined);
+    get value(): [any, any] | undefined;
     /**accessor*/
-    set value(_: [FileData | null, FileData | null] | undefined);
+    set value(_: [any, any] | undefined);
     get label(): string;
     /**accessor*/
     set label(_: string);

package/dist/shared/Image.svelte

@@ -1,13 +1,12 @@
 <script>import Slider from "./Slider.svelte";
 import { createEventDispatcher, tick } from "svelte";
-import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
 import { Download } from "@gradio/icons";
 import { Image } from "@gradio/icons";
 import {} from "@gradio/utils";
 import ClearImage from "./ClearImage.svelte";
 import ImageEl from "./ImageEl.svelte";
 import { Upload } from "@gradio/upload";
-import { DownloadLink } from "@gradio/wasm/svelte";
 import {} from "@gradio/client";
 export let value;
 export let label = void 0;

package/dist/shared/Image.svelte.d.ts

@@ -24,7 +24,7 @@ declare const __propDef: {
         edit: CustomEvent<undefined>;
         clear: CustomEvent<undefined>;
         drag: CustomEvent<boolean>;
-        upload: CustomEvent<[FileData | null, FileData | null]>;
+        upload: CustomEvent<[any, any]>;
         select: CustomEvent<SelectData>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/shared/ImageEl.svelte

@@ -1,25 +1,12 @@
 <script>import { createEventDispatcher, onMount, tick } from "svelte";
-import { resolve_wasm_src } from "@gradio/wasm/svelte";
 export let src = void 0;
 export let fullscreen = false;
-let resolved_src;
 export let fixed = false;
 export let transform = "translate(0px, 0px) scale(1)";
 export let img_el = null;
 export let hidden = false;
 export let variant = "upload";
 export let max_height = 500;
-let latest_src;
-$: {
-  resolved_src = src;
-  latest_src = src;
-  const resolving_src = src;
-  resolve_wasm_src(resolving_src).then((s) => {
-    if (latest_src === resolving_src) {
-      resolved_src = s;
-    }
-  });
-}
 const dispatch = createEventDispatcher();
 function get_image_size(img) {
   if (!img) return { top: 0, left: 0, width: 0, height: 0 };
@@ -60,7 +47,7 @@ onMount(() => {
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-	src={resolved_src}
+	{src}
 	{...$$restProps}
 	class:fixed
 	style:transform

package/dist/shared/SliderPreview.svelte

@@ -5,11 +5,11 @@ import {
   Empty,
   IconButton,
   IconButtonWrapper,
-  FullscreenButton
+  FullscreenButton,
+  DownloadLink
 } from "@gradio/atoms";
 import { Image, Download, Undo, Clear } from "@gradio/icons";
 import {} from "@gradio/client";
-import { DownloadLink } from "@gradio/wasm/svelte";
 import { ZoomableImage } from "./zoom";
 import { onMount } from "svelte";
 import { tweened } from "svelte/motion";

package/dist/shared/SliderUpload.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         edit: CustomEvent<undefined>;
         clear: CustomEvent<undefined>;
         stream: CustomEvent<string | null>;
-        upload: CustomEvent<[FileData | null, FileData | null]>;
+        upload: CustomEvent<[any, any]>;
         select: CustomEvent<import("@gradio/utils").SelectData>;
         share: CustomEvent<any>;
     } & {
@@ -36,15 +36,15 @@ export type SliderUploadProps = typeof __propDef.props;
 export type SliderUploadEvents = typeof __propDef.events;
 export type SliderUploadSlots = typeof __propDef.slots;
 export default class SliderUpload extends SvelteComponent<SliderUploadProps, SliderUploadEvents, SliderUploadSlots> {
-    get value(): [FileData | null, FileData | null] | undefined;
+    get value(): [any, any] | undefined;
     /**accessor*/
-    set value(_: [FileData | null, FileData | null] | undefined);
-    get upload(): (file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number) => Promise<(FileData | null)[] | null>;
+    set value(_: [any, any] | undefined);
+    get upload(): Client;
     /**accessor*/
-    set upload(_: (file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number) => Promise<(FileData | null)[] | null>);
-    get stream_handler(): (url: URL) => EventSource;
+    set upload(_: Client);
+    get stream_handler(): Client;
     /**accessor*/
-    set stream_handler(_: (url: URL) => EventSource);
+    set stream_handler(_: Client);
     get label(): string;
     /**accessor*/
     set label(_: string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageslider",
-  "version": "0.2.14",
+  "version": "0.3.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,13 +11,12 @@
     "@types/d3-selection": "^3.0.11",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@gradio/atoms": "^0.17.0",
-    "@gradio/client": "^1.18.0",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/client": "^1.19.0",
+    "@gradio/statustracker": "^0.11.1",
     "@gradio/icons": "^0.14.0",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.17",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/upload": "^0.17.0",
+    "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {

package/shared/Image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Slider from "./Slider.svelte";
 	import { createEventDispatcher, tick } from "svelte";
-	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { Image } from "@gradio/icons";
 	import { type SelectData, type I18nFormatter } from "@gradio/utils";
@@ -9,7 +9,6 @@
 	import ImageEl from "./ImageEl.svelte";
 
 	import { Upload } from "@gradio/upload";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import { type FileData, type Client } from "@gradio/client";
 

package/shared/ImageEl.svelte

@@ -13,39 +13,15 @@
 	}
 	type $$Props = Props;
 
-	import { resolve_wasm_src } from "@gradio/wasm/svelte";
-
 	export let src: HTMLImgAttributes["src"] = undefined;
 	export let fullscreen = false;
 
-	let resolved_src: typeof src;
-
 	export let fixed = false;
 	export let transform = "translate(0px, 0px) scale(1)";
 	export let img_el: HTMLImageElement | null = null;
 	export let hidden = false;
 	export let variant = "upload";
 	export let max_height = 500;
-	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
-	// In such a case, the resolved value for the old `src` has to be discarded,
-	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
-	let latest_src: typeof src;
-	$: {
-		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
-		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a blank image is displayed until the async task finishes
-		// and it leads to undesirable flickering.
-		// So set `src` to `resolved_src` here.
-		resolved_src = src;
-
-		latest_src = src;
-		const resolving_src = src;
-		resolve_wasm_src(resolving_src).then((s) => {
-			if (latest_src === resolving_src) {
-				resolved_src = s;
-			}
-		});
-	}
 
 	const dispatch = createEventDispatcher<{
 		load: {
@@ -108,7 +84,7 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-	src={resolved_src}
+	{src}
 	{...$$restProps}
 	class:fixed
 	style:transform

package/shared/SliderPreview.svelte

@@ -6,12 +6,12 @@
 		Empty,
 		IconButton,
 		IconButtonWrapper,
-		FullscreenButton
+		FullscreenButton,
+		DownloadLink
 	} from "@gradio/atoms";
 	import { Image, Download, Undo, Clear } from "@gradio/icons";
 	import { type FileData } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 	import { ZoomableImage } from "./zoom";
 	import { onMount } from "svelte";
 	import { tweened, type Tweened } from "svelte/motion";