You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.2 KiB
77 lines
2.2 KiB
<script lang="ts"> |
|
import { icons_misc } from './icons' |
|
|
|
export let label: string = '' |
|
export let content: string = '' |
|
export let border_color = 'primary' |
|
export let no_border = false |
|
export let icon: undefined | string[] = undefined |
|
export let truncate: undefined | [number, number] = undefined |
|
const truncatedContent = () => { |
|
if (truncate && content.length > truncate[0] + truncate[1] + 3) { |
|
return `${content.substring(0, truncate[0])}...${content.substring(content.length - 1 - truncate[1])}` |
|
} |
|
return content |
|
} |
|
let copied = false |
|
</script> |
|
|
|
<!-- eslint-disable-next-line svelte/valid-compile --> |
|
<!-- svelte-ignore a11y-click-events-have-key-events --> |
|
<!-- svelte-ignore a11y-no-static-element-interactions --> |
|
<div |
|
class="group cursor-pointer" |
|
class:mt-3={!no_border} |
|
on:click={async () => { |
|
try { |
|
await navigator.clipboard.writeText(content) |
|
copied = true |
|
setTimeout(() => { |
|
copied = false |
|
}, 2000) |
|
} catch {} |
|
}} |
|
> |
|
{#if label.length > 0} |
|
{label} |
|
{#if copied}<span class="text-sm text-success opacity-50"> |
|
(copied to clipboard)</span |
|
>{/if} |
|
{/if} |
|
<div |
|
class="items flex w-full items-center rounded-lg border border-{border_color} opacity-50" |
|
class:mt-1={no_border && label.length === 0} |
|
class:border={!no_border} |
|
class:p-3={!no_border} |
|
class:text-success={copied} |
|
> |
|
{#if icon}<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
viewBox="0 0 16 16" |
|
class="mr-1 mt-1 inline h-4 w-4 flex-none fill-base-content opacity-50" |
|
class:fill-success={copied} |
|
> |
|
{#each icon as d} |
|
<path {d} /> |
|
{/each} |
|
</svg>{/if} |
|
<div |
|
class="truncate text-sm" |
|
class:flex-auto={!no_border} |
|
class:flex-none={no_border} |
|
> |
|
{truncatedContent()} |
|
</div> |
|
<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
viewBox="0 0 16 16" |
|
class="ml-1 inline h-4 w-4 flex-none fill-base-content opacity-50 group-hover:opacity-100" |
|
class:opacity-100={copied} |
|
class:fill-success={copied} |
|
> |
|
{#each icons_misc.copy as d} |
|
<path {d} /> |
|
{/each} |
|
</svg> |
|
</div> |
|
</div>
|
|
|