File size: 1,488 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { type FileData } from "@gradio/client";
import { BaseButton } from "@gradio/button";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let variant: "primary" | "secondary" | "stop" = "secondary";
export let size: "sm" | "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();
function download_file(): void {
dispatch("click");
if (!value?.url) {
return;
}
let file_name;
if (!value.orig_name && value.url) {
const parts = value.url.split("/");
file_name = parts[parts.length - 1];
file_name = file_name.split("?")[0].split("#")[0];
} else {
file_name = value.orig_name;
}
const a = document.createElement("a");
a.href = value.url;
a.download = file_name || "file";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
<BaseButton
{size}
{variant}
{elem_id}
{elem_classes}
{visible}
on:click={download_file}
{scale}
{min_width}
{disabled}
>
{#if icon}
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
{/if}
<slot />
</BaseButton>
<style>
.button-icon {
width: var(--text-xl);
height: var(--text-xl);
margin-right: var(--spacing-xl);
}
</style>
|