@gradio/imageslider 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageslider",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,12 +11,12 @@
     "@types/d3-selection": "^3.0.11",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@gradio/atoms": "^0.25.0",
-    "@gradio/client": "^2.3.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.15.0",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/statustracker": "^0.15.1",
     "@gradio/utils": "^0.13.0",
-    "@gradio/upload": "^0.18.0"
+    "@gradio/upload": "^0.18.1",
+    "@gradio/client": "^2.3.1"
   },
   "exports": {
     ".": {

package/shared/ClearImage.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
 	import { Clear } from "@gradio/icons";
 
-	const dispatch = createEventDispatcher();
+	let { onremove_image }: { onremove_image?: () => void } = $props();
 </script>
 
 <div>
@@ -11,7 +10,7 @@
 		Icon={Clear}
 		label="Remove Image"
 		onclick={(event) => {
-			dispatch("remove_image");
+			onremove_image?.();
 			event.stopPropagation();
 		}}
 	/>

package/shared/Image.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import Slider from "./Slider.svelte";
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick, type Snippet } from "svelte";
 	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";
+	import { type I18nFormatter } from "@gradio/utils";
 	import ClearImage from "./ClearImage.svelte";
 	import ImageEl from "./ImageEl.svelte";
 
@@ -12,65 +12,87 @@
 
 	import { type FileData, type Client } from "@gradio/client";
 
-	export let value: [FileData | null, FileData | null];
+	let {
+		value = $bindable<[FileData | null, FileData | null]>([null, null]),
+		label = undefined,
+		show_label,
+		root,
+		position = $bindable(0.5),
+		upload_count = 2,
+		show_download_button = true,
+		slider_color,
+		upload,
+		stream_handler,
+		max_file_size = null,
+		i18n,
+		max_height,
+		upload_promise = $bindable(),
+		dragging = $bindable(false),
+		onclear,
+		ondrag,
+		onupload,
+		children
+	}: {
+		value?: [FileData | null, FileData | null];
+		label?: string;
+		show_label: boolean;
+		root: string;
+		position?: number;
+		upload_count?: number;
+		show_download_button?: boolean;
+		slider_color: string;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		max_file_size?: number | null;
+		i18n: I18nFormatter;
+		max_height: number;
+		upload_promise?: Promise<any>;
+		dragging?: boolean;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: (value: [FileData | null, FileData | null]) => void;
+		children?: Snippet;
+	} = $props();
 
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let root: string;
-	export let position: number;
-	export let upload_count = 2;
-
-	export let show_download_button = true;
-	export let slider_color: string;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let max_file_size: number | null = null;
-	export let i18n: I18nFormatter;
-	export let max_height: number;
-	export let upload_promise: Promise<any> | null = null;
-
-	let value_: [FileData | null, FileData | null] = value || [null, null];
+	let value_ = $state<[FileData | null, FileData | null]>(
+		value || [null, null]
+	);
 
 	let img: HTMLImageElement;
-	let el_width: number;
-	let el_height: number;
+	let el_width = $state(0);
+	let el_height = $state(0);
 
-	async function handle_upload(detail: FileData[], n: number): Promise<void> {
+	async function handle_upload(
+		detail: Blob | File | FileData | FileData[],
+		n: number
+	): Promise<void> {
+		const file_data = Array.isArray(detail) ? detail : [detail as FileData];
 		const new_value = [value[0], value[1]] as [
 			FileData | null,
 			FileData | null
 		];
-		if (detail.length > 1) {
-			new_value[n] = detail[0];
+		if (file_data.length > 1) {
+			new_value[n] = file_data[0];
 		} else {
-			new_value[n] = detail[n];
+			new_value[n] = file_data[n];
 		}
 		value = new_value;
 		await tick();
 
-		dispatch("upload", new_value);
+		onupload?.(new_value);
 	}
 
 	let old_value = "";
 
-	$: if (JSON.stringify(value) !== old_value) {
+	$effect(() => {
+		if (JSON.stringify(value) === old_value) return;
 		old_value = JSON.stringify(value);
 		value_ = value;
-	}
-
-	const dispatch = createEventDispatcher<{
-		change: string | null;
-		stream: string | null;
-		edit: undefined;
-		clear: undefined;
-		drag: boolean;
-		upload: [FileData | null, FileData | null];
-		select: SelectData;
-	}>();
-
-	export let dragging = false;
+	});
 
-	$: dispatch("drag", dragging);
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
@@ -83,10 +105,10 @@
 >
 	{#if value?.[0]?.url || value?.[1]?.url}
 		<ClearImage
-			on:remove_image={() => {
+			onremove_image={() => {
 				position = 0.5;
 				value = [null, null];
-				dispatch("clear");
+				onclear?.();
 			}}
 		/>
 	{/if}
@@ -126,7 +148,7 @@
 						{stream_handler}
 						{max_file_size}
 					>
-						<slot />
+						{#if children}{@render children()}{/if}
 					</Upload>
 				</div>
 			{:else}
@@ -152,7 +174,7 @@
 					{stream_handler}
 					{max_file_size}
 				>
-					<slot />
+					{#if children}{@render children()}{/if}
 				</Upload>
 			{:else if !value_?.[1] && upload_count === 1}
 				<div

package/shared/ImageEl.svelte

@@ -1,36 +1,35 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from "svelte/elements";
-	import { createEventDispatcher, onMount, tick } from "svelte";
-	interface Props extends HTMLImgAttributes {
+	import { onMount, tick } from "svelte";
+	interface Props extends Omit<HTMLImgAttributes, "onload"> {
 		"data-testid"?: string;
 		fixed?: boolean;
 		transform?: string;
-		img_el?: HTMLImageElement;
+		img_el?: HTMLImageElement | null;
 		hidden?: boolean;
 		variant?: "preview" | "upload";
 		max_height?: number;
 		fullscreen?: boolean;
-	}
-	type $$Props = Props;
-
-	export let src: HTMLImgAttributes["src"] = undefined;
-	export let fullscreen = false;
-
-	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;
-
-	const dispatch = createEventDispatcher<{
-		load: {
+		onload?: (size: {
 			top: number;
 			left: number;
 			width: number;
 			height: number;
-		};
-	}>();
+		}) => void;
+	}
+
+	let {
+		src = undefined,
+		fullscreen = false,
+		fixed = false,
+		transform = "translate(0px, 0px) scale(1)",
+		img_el = $bindable<HTMLImageElement | null>(),
+		hidden = false,
+		variant = "upload",
+		max_height = 500,
+		onload,
+		...restProps
+	}: Props = $props();
 
 	function get_image_size(img: HTMLImageElement | null): {
 		top: number;
@@ -70,7 +69,7 @@
 		const resizer = new ResizeObserver(async (entries) => {
 			for (const entry of entries) {
 				await tick();
-				dispatch("load", get_image_size(img_el));
+				onload?.(get_image_size(img_el));
 			}
 		});
 
@@ -86,7 +85,7 @@
 <img
 	{src}
 	data-testid="imageslider-image"
-	{...$$restProps}
+	{...restProps}
 	class:fixed
 	style:transform
 	bind:this={img_el}
@@ -96,7 +95,7 @@
 	style:max-height={max_height && !fullscreen ? `${max_height}px` : null}
 	class:fullscreen
 	class:small={!fullscreen}
-	on:load={() => dispatch("load", get_image_size(img_el))}
+	onload={() => onload?.(get_image_size(img_el))}
 />
 
 <style>

package/shared/Slider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount, type Snippet } from "svelte";
 	import { drag } from "d3-drag";
 	import { select } from "d3-selection";
 
@@ -7,22 +7,33 @@
 		return Math.min(Math.max(value, min), max);
 	}
 
-	export let position = 0.5;
-	export let disabled = false;
+	let {
+		position = $bindable(0.5),
+		disabled = false,
+		slider_color = "var(--border-color-primary)",
+		image_size = { top: 0, left: 0, width: 0, height: 0 },
+		el = $bindable<HTMLDivElement | undefined>(undefined),
+		parent_el = $bindable<HTMLDivElement | undefined>(undefined),
+		children
+	}: {
+		position?: number;
+		disabled?: boolean;
+		slider_color?: string;
+		image_size?: {
+			top: number;
+			left: number;
+			width: number;
+			height: number;
+		};
+		el?: HTMLDivElement;
+		parent_el?: HTMLDivElement;
+		children?: Snippet;
+	} = $props();
 
-	export let slider_color = "var(--border-color-primary)";
-	export let image_size: {
-		top: number;
-		left: number;
-		width: number;
-		height: number;
-	} = { top: 0, left: 0, width: 0, height: 0 };
-	export let el: HTMLDivElement | undefined = undefined;
-	export let parent_el: HTMLDivElement | undefined = undefined;
 	let inner: Element;
-	let px = 0;
-	let active = false;
-	let container_width = 0;
+	let px = $state(0);
+	let active = $state(false);
+	let container_width = $state(0);
 
 	function set_position(width: number): void {
 		container_width = parent_el?.getBoundingClientRect().width || 0;
@@ -67,8 +78,12 @@
 		px = clamp(image_size.width * pc + image_size.left, 0, container_width);
 	}
 
-	$: set_position(image_size.width);
-	$: update_position_from_pc(position);
+	$effect(() => {
+		set_position(image_size.width);
+	});
+	$effect(() => {
+		update_position_from_pc(position);
+	});
 
 	onMount(() => {
 		set_position(image_size.width);
@@ -80,11 +95,11 @@
 	});
 </script>
 
-<svelte:window on:resize={() => set_position(image_size.width)} />
+<svelte:window onresize={() => set_position(image_size.width)} />
 
 <div class="wrap" role="none" bind:this={parent_el}>
 	<div class="content" bind:this={el}>
-		<slot />
+		{#if children}{@render children()}{/if}
 	</div>
 	<div
 		class="outer"

package/shared/SliderPreview.svelte

@@ -16,31 +16,49 @@
 	import { ZoomableImage } from "./zoom";
 	import { onMount } from "svelte";
 	import { tweened, type Tweened } from "svelte/motion";
-	import { createEventDispatcher } from "svelte";
-
-	export let value: [null | FileData, null | FileData] = [null, null];
-	export let label: string | undefined = undefined;
-	export let show_download_button = true;
-	export let show_label: boolean;
-	export let i18n: I18nFormatter;
-	export let position: number;
-	export let layer_images = true;
-	export let show_single = false;
-	export let slider_color: string;
-	export let show_fullscreen_button = true;
-	export let fullscreen = false;
-	export let buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
-	export let el_width = 0;
-	export let max_height: number;
-	export let interactive = true;
-	const dispatch = createEventDispatcher<{
-		clear: void;
-		fullscreen: boolean;
-	}>();
-
-	let img: HTMLImageElement;
-	let slider_wrap: HTMLDivElement;
+
+	let {
+		value = $bindable<[null | FileData, null | FileData]>([null, null]),
+		label = undefined,
+		show_download_button = true,
+		show_label,
+		i18n,
+		position = $bindable(0.5),
+		layer_images = true,
+		show_single = false,
+		slider_color,
+		show_fullscreen_button = true,
+		fullscreen = $bindable(false),
+		buttons = null,
+		on_custom_button_click = null,
+		el_width = $bindable(0),
+		max_height,
+		interactive = true,
+		onclear,
+		onfullscreen
+	}: {
+		value?: [null | FileData, null | FileData];
+		label?: string;
+		show_download_button?: boolean;
+		show_label: boolean;
+		i18n: I18nFormatter;
+		position?: number;
+		layer_images?: boolean;
+		show_single?: boolean;
+		slider_color: string;
+		show_fullscreen_button?: boolean;
+		fullscreen?: boolean;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+		el_width?: number;
+		max_height: number;
+		interactive?: boolean;
+		onclear?: () => void;
+		onfullscreen?: (fullscreen: boolean) => void;
+	} = $props();
+
+	let img = $state<HTMLImageElement>();
+	let slider_wrap = $state<HTMLDivElement>();
 	let image_container: HTMLDivElement;
 
 	let transform: Tweened<{ x: number; y: number; z: number }> = tweened(
@@ -50,18 +68,28 @@
 		}
 	);
 	let parent_el: HTMLDivElement;
+	let img_width = $state(0);
+	let viewport_width = $state(0);
+	let image_size = $state<{
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	}>({ top: 0, left: 0, width: 0, height: 0 });
 
-	$: coords_at_viewport = get_coords_at_viewport(
-		position,
-		viewport_width,
-		image_size.width,
-		image_size.left,
-		$transform.x,
-		$transform.z
+	let coords_at_viewport = $derived(
+		get_coords_at_viewport(
+			position,
+			viewport_width,
+			image_size.width,
+			image_size.left,
+			$transform.x,
+			$transform.z
+		)
+	);
+	let style = $derived(
+		layer_images ? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)` : ""
 	);
-	$: style = layer_images
-		? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)`
-		: "";
 
 	function get_coords_at_viewport(
 		viewport_percent_x: number, // 0-1
@@ -80,15 +108,12 @@
 		return percent_position;
 	}
 
-	let img_width = 0;
-	let viewport_width = 0;
-
 	let zoomable_image: ZoomableImage | null = null;
 	let observer: ResizeObserver | null = null;
 
 	function init_image(
-		img: HTMLImageElement,
-		slider_wrap: HTMLDivElement
+		img: HTMLImageElement | undefined,
+		slider_wrap: HTMLDivElement | undefined
 	): void {
 		if (!img || !slider_wrap) return;
 		zoomable_image?.destroy();
@@ -115,7 +140,9 @@
 		observer.observe(img);
 	}
 
-	$: init_image(img, slider_wrap);
+	$effect(() => {
+		init_image(img, slider_wrap);
+	});
 
 	onMount(() => {
 		return () => {
@@ -126,11 +153,13 @@
 
 	let slider_wrap_parent: HTMLDivElement;
 
-	let image_size: { top: number; left: number; width: number; height: number } =
-		{ top: 0, left: 0, width: 0, height: 0 };
-
-	function handle_image_load(event: CustomEvent): void {
-		image_size = event.detail;
+	function handle_image_load(size: {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	}): void {
+		image_size = size;
 	}
 </script>
 
@@ -151,7 +180,7 @@
 					{fullscreen}
 					onclick={(is_fullscreen) => {
 						fullscreen = is_fullscreen;
-						dispatch("fullscreen", is_fullscreen);
+						onfullscreen?.(is_fullscreen);
 					}}
 				/>
 			{/if}
@@ -170,7 +199,7 @@
 					label="Remove Image"
 					onclick={(event) => {
 						value = [null, null];
-						dispatch("clear");
+						onclear?.();
 						event.stopPropagation();
 					}}
 				/>
@@ -198,7 +227,7 @@
 					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
 					{fullscreen}
 					{max_height}
-					on:load={handle_image_load}
+					onload={handle_image_load}
 				/>
 				<ImageEl
 					variant="preview"
@@ -211,7 +240,7 @@
 					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
 					{fullscreen}
 					{max_height}
-					on:load={handle_image_load}
+					onload={handle_image_load}
 				/>
 			</Slider>
 		</div>

package/shared/SliderUpload.svelte

@@ -1,24 +1,48 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 	import Image from "./Image.svelte";
 	import { type Client } from "@gradio/client";
 
 	import type { FileData } from "@gradio/client";
 
-	export let value: [FileData | null, FileData | null] = [null, null];
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let label: string;
-	export let show_label: boolean;
-	export let i18n: I18nFormatter;
-	export let root: string;
-	export let upload_count = 1;
-	export let dragging: boolean;
-	export let max_height: number;
-	export let max_file_size: number | null = null;
-	export let upload_promise: Promise<any> | null = null;
+	let {
+		value = $bindable<[FileData | null, FileData | null]>([null, null]),
+		upload,
+		stream_handler,
+		label,
+		show_label,
+		i18n,
+		root,
+		upload_count = 1,
+		dragging = $bindable(false),
+		max_height,
+		max_file_size = null,
+		upload_promise = $bindable(),
+		onclear,
+		ondrag,
+		onupload,
+		children
+	}: {
+		value?: [FileData | null, FileData | null];
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		label: string;
+		show_label: boolean;
+		i18n: I18nFormatter;
+		root: string;
+		upload_count?: number;
+		dragging?: boolean;
+		max_height: number;
+		max_file_size?: number | null;
+		upload_promise?: Promise<any>;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: (value: [FileData | null, FileData | null]) => void;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <Image
@@ -28,13 +52,12 @@
 	bind:value
 	bind:dragging
 	{root}
-	on:edit
-	on:clear
-	on:stream
-	on:drag={({ detail }) => (dragging = detail)}
-	on:upload
-	on:select
-	on:share
+	{onclear}
+	ondrag={(detail) => {
+		dragging = detail;
+		ondrag?.(detail);
+	}}
+	{onupload}
 	{label}
 	{show_label}
 	{upload_count}
@@ -44,5 +67,5 @@
 	{max_height}
 	{i18n}
 >
-	<slot />
+	{#if children}{@render children()}{/if}
 </Image>