mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-12 10:34:32 +08:00
ae4277a9a8
* move files * commit the rest of the files * fix lockfile * fix workflow * fix type errors * fix tests * only run ci when certain files change * run correct test command in ci * version * fix pypi script --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
60 lines
1.1 KiB
Svelte
60 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy } from "svelte";
|
|
import { fade } from "svelte/transition";
|
|
import { Copy, Check } from "@gradio/icons";
|
|
|
|
let copied = false;
|
|
export let value: string;
|
|
let timer: NodeJS.Timeout;
|
|
|
|
function copy_feedback() {
|
|
copied = true;
|
|
if (timer) clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
copied = false;
|
|
}, 2000);
|
|
}
|
|
|
|
async function handle_copy() {
|
|
if ("clipboard" in navigator) {
|
|
await navigator.clipboard.writeText(value);
|
|
copy_feedback();
|
|
}
|
|
}
|
|
|
|
onDestroy(() => {
|
|
if (timer) clearTimeout(timer);
|
|
});
|
|
</script>
|
|
|
|
<button on:click={handle_copy} title="copy">
|
|
<!-- {#if !copied} -->
|
|
<span class="copy-text" class:copied><Copy /> </span>
|
|
<!-- {/if} -->
|
|
{#if copied}
|
|
<span class="check" transition:fade><Check /></span>
|
|
{/if}
|
|
</button>
|
|
|
|
<style>
|
|
button {
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.check {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: var(--layer-top);
|
|
background: var(--background-fill-primary);
|
|
padding: var(--size-1);
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--body-text-color);
|
|
}
|
|
</style>
|