gradio

1
<script lang="ts">
2
	import { createEventDispatcher } from "svelte";
3
	import { type FileData } from "@gradio/client";
4
	import { BaseButton } from "@gradio/button";
5

6
	export let elem_id = "";
7
	export let elem_classes: string[] = [];
8
	export let visible = true;
9
	export let variant: "primary" | "secondary" | "stop" = "secondary";
10
	export let size: "sm" | "lg" = "lg";
11
	export let value: null | FileData;
12
	export let icon: null | FileData;
13
	export let disabled = false;
14
	export let scale: number | null = null;
15
	export let min_width: number | undefined = undefined;
16
	const dispatch = createEventDispatcher();
17

18
	function download_file(): void {
19
		if (!value?.url) {
20
			return;
21
		}
22
		let file_name;
23
		if (!value.orig_name && value.url) {
24
			const parts = value.url.split("/");
25
			file_name = parts[parts.length - 1];
26
			file_name = file_name.split("?")[0].split("#")[0];
27
		} else {
28
			file_name = value.orig_name;
29
		}
30
		const a = document.createElement("a");
31
		a.href = value.url;
32
		a.download = file_name || "file";
33
		document.body.appendChild(a);
34
		a.click();
35
		document.body.removeChild(a);
36
		dispatch("click");
37
	}
38
</script>
39

40
<BaseButton
41
	{size}
42
	{variant}
43
	{elem_id}
44
	{elem_classes}
45
	{visible}
46
	on:click={download_file}
47
	{scale}
48
	{min_width}
49
	{disabled}
50
>
51
	{#if icon}
52
		<img class="button-icon" src={icon.url} alt={`${value} icon`} />
53
	{/if}
54
	<slot />
55
</BaseButton>
56

57
<style>
58
	.button-icon {
59
		width: var(--text-xl);
60
		height: var(--text-xl);
61
		margin-right: var(--spacing-xl);
62
	}
63
</style>
64