68 lines
1.6 KiB
Svelte
68 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
|
|
interface Props {
|
|
log_lvl?: number;
|
|
value: any;
|
|
success?: boolean;
|
|
btn_text?: string;
|
|
btn_title?: string;
|
|
btn_class?: string;
|
|
}
|
|
|
|
let {
|
|
log_lvl = 1,
|
|
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'
|
|
}: Props = $props();
|
|
|
|
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={() => {
|
|
// 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;
|
|
});
|
|
}}
|
|
class={btn_class}
|
|
title={btn_title}
|
|
>
|
|
<!-- {@render btn_text} -->
|
|
{btn_text}
|
|
|
|
</button>
|