@gradio/imageslider 0.5.0 → 0.7.0

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>

package/types.ts

@@ -4,7 +4,7 @@ import type {
 	ShareData,
 	CustomButton
 } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
 
 export interface ImageSliderEvents {