@gradio/downloadbutton 0.4.15 → 0.4.17

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gradio/downloadbutton
 
+## 0.4.17
+
+### Fixes
+
+- [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/button@0.6.3
+- @gradio/utils@0.11.2
+- @gradio/client@2.0.3
+
+## 0.4.16
+
+### Fixes
+
+- [#12689](https://github.com/gradio-app/gradio/pull/12689) [`be89f8c`](https://github.com/gradio-app/gradio/commit/be89f8c4272a2d2c3da9345c3e26df5505307428) - Migrate DownloadButton to Svelte 5.  Thanks @dawoodkhan82!
+- [#12681](https://github.com/gradio-app/gradio/pull/12681) [`ba46c2d`](https://github.com/gradio-app/gradio/commit/ba46c2df1405c11e495304af8f91acfdf69d0b18) - Migrate Button to Svelte 5.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/button@0.6.2
+- @gradio/client@2.0.2
+
 ## 0.4.15
 
 ### Dependency updates

package/DownloadButton.stories.svelte

@@ -1,69 +1,75 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import DownloadButton from "./Index.svelte";
-</script>
+	import { wrapProps } from "../storybook/wrapProps";
 
-<Meta
-	title="Components/DownloadButton"
-	component={DownloadButton}
-	argTypes={{
-		label: {
-			control: "text",
-			description: "The text to display on the button",
-			name: "label",
-			value: "Gradio Button"
-		},
-		variant: {
-			options: ["primary", "secondary", "stop"],
-			description: "The variant of the button",
-			control: { type: "select" },
-			defaultValue: "primary"
-		},
-		size: {
-			options: ["sm", "lg"],
-			description: "The size of the button",
-			control: { type: "select" },
-			defaultValue: "lg"
-		},
-		visible: {
-			options: [true, false],
-			description: "Sets the visibility of the button",
-			control: { type: "boolean" },
-			defaultValue: true
-		},
-		interactive: {
-			options: [true, false],
-			description: "If false, the button will be in a disabled state",
-			control: { type: "boolean" },
-			defaultValue: true
-		},
-		disabled: {
-			options: [true, false],
-			control: { type: "boolean" },
-			defaultValue: false
-		},
-		scale: {
-			options: [null, 0.5, 1, 2],
-			description:
-				"relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. Only applies in Rows, or top-level Components in Blocks where fill_height=True. ",
-			control: { type: "select" }
+	const { Story } = defineMeta({
+		title: "Components/DownloadButton",
+		component: DownloadButton,
+		argTypes: {
+			label: {
+				control: "text",
+				description: "The text to display on the button",
+				name: "label",
+				value: "Gradio Button"
+			},
+			variant: {
+				options: ["primary", "secondary", "stop"],
+				description: "The variant of the button",
+				control: { type: "select" },
+				defaultValue: "primary"
+			},
+			size: {
+				options: ["sm", "lg"],
+				description: "The size of the button",
+				control: { type: "select" },
+				defaultValue: "lg"
+			},
+			visible: {
+				options: [true, false],
+				description: "Sets the visibility of the button",
+				control: { type: "boolean" },
+				defaultValue: true
+			},
+			interactive: {
+				options: [true, false],
+				description: "If false, the button will be in a disabled state",
+				control: { type: "boolean" },
+				defaultValue: true
+			},
+			disabled: {
+				options: [true, false],
+				control: { type: "boolean" },
+				defaultValue: false
+			},
+			scale: {
+				options: [null, 0.5, 1, 2],
+				description: "relative size compared to adjacent Components.",
+				control: { type: "select" }
+			}
 		}
-	}}
-/>
+	});
+</script>
 
-<Template let:args>
-	<DownloadButton value="" interactive="true" {...args} />
-</Template>
+{#snippet template(args)}
+	<DownloadButton {...wrapProps({ value: "", interactive: true, ...args })} />
+{/snippet}
 
 <Story
 	name="Primary"
 	args={{ label: "Download", variant: "primary", size: "lg", scale: 1 }}
+	{template}
 />
 <Story
 	name="Secondary"
 	args={{ label: "Download", variant: "secondary", size: "lg" }}
+	{template}
+/>
+<Story
+	name="Stop"
+	args={{ label: "Download", variant: "stop", size: "lg" }}
+	{template}
 />
-<Story name="Stop" args={{ label: "Download", variant: "stop", size: "lg" }} />
 <Story
 	name="Button with external image icon"
 	args={{
@@ -73,17 +79,15 @@
 			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
 		}
 	}}
+	{template}
 />
 <Story
 	name="Button with visible equal to false"
-	args={{
-		label: "Download",
-		visible: false
-	}}
+	args={{ label: "Download", visible: false }}
+	{template}
 />
 <Story
 	name="Button with null label (should be collapsed)"
-	args={{
-		label: null
-	}}
+	args={{ label: null }}
+	{template}
 />

package/Index.svelte

@@ -22,7 +22,7 @@
 	min_width={gradio.shared.min_width}
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
-	on:click={() => gradio.dispatch("click")}
+	on_click={() => gradio.dispatch("click")}
 >
 	{gradio.shared.label ?? ""}
 </DownloadButton>

package/dist/Index.svelte

@@ -22,7 +22,7 @@
 	min_width={gradio.shared.min_width}
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
-	on:click={() => gradio.dispatch("click")}
+	on_click={() => gradio.dispatch("click")}
 >
 	{gradio.shared.label ?? ""}
 </DownloadButton>

package/dist/shared/DownloadButton.svelte

@@ -1,22 +1,38 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { type FileData } from "@gradio/client";
 	import { BaseButton } from "@gradio/button";
+	import { type Snippet } from "svelte";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: null | FileData;
-	export let icon: null | FileData;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	const dispatch = createEventDispatcher();
+	let {
+		elem_id = "",
+		elem_classes = [],
+		visible = true,
+		variant = "secondary",
+		size = "lg",
+		value,
+		icon,
+		disabled = false,
+		scale = null,
+		min_width = undefined,
+		on_click,
+		children
+	}: {
+		elem_id?: string;
+		elem_classes?: string[];
+		visible?: boolean | "hidden";
+		variant?: "primary" | "secondary" | "stop";
+		size?: "sm" | "md" | "lg";
+		value: FileData | null;
+		icon: FileData | null;
+		disabled?: boolean;
+		scale?: number | null;
+		min_width?: number | undefined;
+		on_click?: () => void;
+		children?: Snippet;
+	} = $props();
 
 	function download_file(): void {
-		dispatch("click");
+		on_click?.();
 		if (!value?.url) {
 			return;
 		}
@@ -43,7 +59,7 @@
 	{elem_id}
 	{elem_classes}
 	{visible}
-	on:click={download_file}
+	onclick={download_file}
 	{scale}
 	{min_width}
 	{disabled}
@@ -51,7 +67,9 @@
 	{#if icon}
 		<img class="button-icon" src={icon.url} alt={`${value} icon`} />
 	{/if}
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </BaseButton>
 
 <style>

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

@@ -1,41 +1,19 @@
 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 DownloadButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
     elem_id?: string;
     elem_classes?: string[];
     visible?: boolean | "hidden";
     variant?: "primary" | "secondary" | "stop";
     size?: "sm" | "md" | "lg";
-    value: null | FileData;
-    icon: null | FileData;
+    value: FileData | null;
+    icon: FileData | null;
     disabled?: boolean;
     scale?: number | null;
     min_width?: number | undefined;
-}, {
-    default: {};
-}>, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type DownloadButton = InstanceType<typeof DownloadButton>;
+    on_click?: () => void;
+    children?: Snippet;
+};
+declare const DownloadButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type DownloadButton = ReturnType<typeof DownloadButton>;
 export default DownloadButton;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@gradio/downloadbutton",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/client": "^2.0.1",
-    "@gradio/utils": "^0.11.0",
-    "@gradio/button": "^0.6.1"
+    "@gradio/button": "^0.6.3",
+    "@gradio/client": "^2.0.3",
+    "@gradio/utils": "^0.11.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.1"
+    "@gradio/preview": "^0.15.2"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
@@ -25,7 +25,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": "^5.43.4"
+    "svelte": "^5.48.0"
   },
   "repository": {
     "type": "git",

package/shared/DownloadButton.svelte

@@ -1,22 +1,38 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { type FileData } from "@gradio/client";
 	import { BaseButton } from "@gradio/button";
+	import { type Snippet } from "svelte";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: null | FileData;
-	export let icon: null | FileData;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	const dispatch = createEventDispatcher();
+	let {
+		elem_id = "",
+		elem_classes = [],
+		visible = true,
+		variant = "secondary",
+		size = "lg",
+		value,
+		icon,
+		disabled = false,
+		scale = null,
+		min_width = undefined,
+		on_click,
+		children
+	}: {
+		elem_id?: string;
+		elem_classes?: string[];
+		visible?: boolean | "hidden";
+		variant?: "primary" | "secondary" | "stop";
+		size?: "sm" | "md" | "lg";
+		value: FileData | null;
+		icon: FileData | null;
+		disabled?: boolean;
+		scale?: number | null;
+		min_width?: number | undefined;
+		on_click?: () => void;
+		children?: Snippet;
+	} = $props();
 
 	function download_file(): void {
-		dispatch("click");
+		on_click?.();
 		if (!value?.url) {
 			return;
 		}
@@ -43,7 +59,7 @@
 	{elem_id}
 	{elem_classes}
 	{visible}
-	on:click={download_file}
+	onclick={download_file}
 	{scale}
 	{min_width}
 	{disabled}
@@ -51,7 +67,9 @@
 	{#if icon}
 		<img class="button-icon" src={icon.url} alt={`${value} icon`} />
 	{/if}
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </BaseButton>
 
 <style>