97 lines
2.4 KiB
Svelte
97 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
|
|
interface Props {
|
|
log_lvl?: number;
|
|
value: any;
|
|
success?: boolean;
|
|
btn_text?: string;
|
|
btn_title?: string;
|
|
btn_class?: string;
|
|
hide_icon?: boolean;
|
|
}
|
|
|
|
let {
|
|
log_lvl = 0,
|
|
value = $bindable(''),
|
|
success = $bindable(false),
|
|
btn_text = 'Copy to Clipboard',
|
|
btn_title = 'Copy to Clipboard',
|
|
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
|
|
hide_icon = false,
|
|
}: Props = $props();
|
|
|
|
// *** Import Svelte specific
|
|
import { browser } from '$app/environment';
|
|
|
|
// *** Import other supporting libraries
|
|
import {
|
|
// ArrowBigRight,
|
|
// CircleX,
|
|
Copy,
|
|
// Eye, EyeOff,
|
|
// Key,
|
|
// LogIn, LogOut, LockKeyhole,
|
|
// Mail, MailCheck,
|
|
// Menu,
|
|
// RefreshCw, RefreshCcw, RefreshCcwDot,
|
|
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
|
// User, UserCheck
|
|
} from '@lucide/svelte';
|
|
|
|
if (log_lvl) {
|
|
console.log(`Clipboard component initialized with value:`, value);
|
|
}
|
|
|
|
// Select your trigger element
|
|
// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
|
|
|
|
// Add a click event handler to the trigger
|
|
// elemButton?.addEventListener('click', () => {
|
|
// // Call the Clipboard API
|
|
// navigator.clipboard
|
|
// // Use the `writeText` method write content to the clipboard
|
|
// .writeText(value)
|
|
// // Handle confirmation
|
|
// .then(() => {
|
|
// if (log_lvl) {
|
|
// console.log(`Clipboard write successful: ${value}`);
|
|
// }
|
|
// success = true;
|
|
// });
|
|
// });
|
|
</script>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
data-button
|
|
onclick={() => {
|
|
// if (browser) {
|
|
// Call the Clipboard API
|
|
navigator.clipboard
|
|
// Use the `writeText` method write content to the clipboard
|
|
.writeText(value)
|
|
// Handle confirmation
|
|
.then(() => {
|
|
if (log_lvl) {
|
|
console.log(`Clipboard write successful: ${value}`);
|
|
}
|
|
success = true;
|
|
});
|
|
// } else {
|
|
// if (log_lvl) {
|
|
// console.log(`Clipboard write attempted in non-browser environment.`);
|
|
// }
|
|
// }
|
|
}}
|
|
class={btn_class}
|
|
title={btn_title}
|
|
>
|
|
<!-- {@render btn_text} -->
|
|
<Copy
|
|
class="inline-block mx-1 {hide_icon ? 'hidden' : '' }"
|
|
/>
|
|
{btn_text}
|
|
|
|
</button>
|