mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-12 10:34:32 +08:00
75ddeb390d
* allow remove token via keyboard * more a11y enhancements * upload + dataset a11y tweaks * add changeset * add webcam label * improve checkbox focus styling and allow interaction via keyboard * add changeset * improve radio focus color * tweak * add radio label * add changeset * add annotated image alt + use button for labels * button tweaks * add changeset * tweak * more changes * tiny tweaks * galley / image * label tweaks and add semantic tags to confidence * nit + docstring * tweak * add changeset * fix tests * unit test fix * range tweak * fix alignment in gallery * range tweak * slider test tweak * tweak * more test fixes * last? test tweak --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
69 lines
1.2 KiB
Svelte
69 lines
1.2 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(): void {
|
|
copied = true;
|
|
if (timer) clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
copied = false;
|
|
}, 2000);
|
|
}
|
|
|
|
async function handle_copy(): Promise<void> {
|
|
if ("clipboard" in navigator) {
|
|
await navigator.clipboard.writeText(value);
|
|
copy_feedback();
|
|
}
|
|
}
|
|
|
|
onDestroy(() => {
|
|
if (timer) clearTimeout(timer);
|
|
});
|
|
</script>
|
|
|
|
<button
|
|
on:click={handle_copy}
|
|
title="copy"
|
|
class:copied
|
|
aria-roledescription="Copy value"
|
|
aria-label="Copy"
|
|
>
|
|
<Copy />
|
|
{#if copied}
|
|
<span
|
|
class="check"
|
|
transition:fade
|
|
aria-roledescription="Value copied"
|
|
aria-label="Copied"><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>
|