@gradio/imageslider 0.6.0 → 0.7.0

package/dist/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/dist/shared/ImageEl.svelte.d.ts

@@ -1,35 +1,20 @@
 import type { HTMLImgAttributes } from "svelte/elements";
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ImageEl: $$__sveltets_2_IsomorphicComponent<HTMLImgAttributes & {
+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;
-}, {
-    load: CustomEvent<{
+    onload?: (size: {
         top: number;
         left: number;
         width: number;
         height: number;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ImageEl = InstanceType<typeof ImageEl>;
+    }) => void;
+}
+declare const ImageEl: import("svelte").Component<Props, {}, "img_el">;
+type ImageEl = ReturnType<typeof ImageEl>;
 export default ImageEl;

package/dist/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/dist/shared/Slider.svelte.d.ts

@@ -1,22 +1,5 @@
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Slider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
     position?: number;
     disabled?: boolean;
     slider_color?: string;
@@ -26,14 +9,10 @@ declare const Slider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
         width: number;
         height: number;
     };
-    el?: HTMLDivElement | undefined;
-    parent_el?: HTMLDivElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
+    el?: HTMLDivElement;
+    parent_el?: HTMLDivElement;
+    children?: Snippet;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "position" | "el" | "parent_el">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/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/dist/shared/SliderPreview.svelte.d.ts

@@ -1,26 +1,13 @@
 import type { CustomButton as CustomButtonType } from "@gradio/utils";
 import { type FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SliderPreview: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value?: [null | FileData, null | FileData];
-    label?: string | undefined;
+    label?: string;
     show_download_button?: boolean;
     show_label: boolean;
     i18n: I18nFormatter;
-    position: number;
+    position?: number;
     layer_images?: boolean;
     show_single?: boolean;
     slider_color: string;
@@ -31,11 +18,9 @@ declare const SliderPreview: $$__sveltets_2_IsomorphicComponent<{
     el_width?: number;
     max_height: number;
     interactive?: boolean;
-}, {
-    clear: CustomEvent<void>;
-    fullscreen: CustomEvent<boolean>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SliderPreview = InstanceType<typeof SliderPreview>;
+    onclear?: () => void;
+    onfullscreen?: (fullscreen: boolean) => void;
+};
+declare const SliderPreview: import("svelte").Component<$$ComponentProps, {}, "value" | "position" | "fullscreen" | "el_width">;
+type SliderPreview = ReturnType<typeof SliderPreview>;
 export default SliderPreview;

package/dist/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>

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

@@ -1,25 +1,8 @@
+import type { Snippet } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import { type Client } from "@gradio/client";
 import type { FileData } from "@gradio/client";
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SliderUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     value?: [FileData | null, FileData | null];
     upload: Client["upload"];
     stream_handler: Client["stream"];
@@ -28,36 +11,15 @@ declare const SliderUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     i18n: I18nFormatter;
     root: string;
     upload_count?: number;
-    dragging: boolean;
+    dragging?: boolean;
     max_height: number;
     max_file_size?: number | null;
-    upload_promise?: Promise<any> | null;
-}, {
-    default: {};
-}>, {
-    edit: CustomEvent<undefined>;
-    clear: CustomEvent<undefined>;
-    stream: CustomEvent<string | null>;
-    upload: CustomEvent<[FileData | null, FileData | null]>;
-    select: CustomEvent<import("@gradio/utils").SelectData>;
-    share: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    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> | null;
-}, string>;
-type SliderUpload = InstanceType<typeof SliderUpload>;
+    upload_promise?: Promise<any>;
+    onclear?: () => void;
+    ondrag?: (dragging: boolean) => void;
+    onupload?: (value: [FileData | null, FileData | null]) => void;
+    children?: Snippet;
+};
+declare const SliderUpload: import("svelte").Component<$$ComponentProps, {}, "value" | "dragging" | "upload_promise">;
+type SliderUpload = ReturnType<typeof SliderUpload>;
 export default SliderUpload;