ladill-qr-plus/resources/js/ladill-clipboard.js

const COPY_FEEDBACK_MS = 2000;

export async function writeClipboardText(text) {
    const value = String(text ?? '');
    if (!value) {
        return false;
    }

    try {
        if (navigator.clipboard?.writeText) {
            await navigator.clipboard.writeText(value);

            return true;
        }
    } catch {
        // fall through to legacy copy
    }

    try {
        const textarea = document.createElement('textarea');
        textarea.value = value;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        const ok = document.execCommand('copy');
        document.body.removeChild(textarea);

        return ok;
    } catch {
        return false;
    }
}

export function registerLadillClipboard(Alpine) {
    Alpine.data('copyButton', (text = '') => ({
        copied: false,
        text: text ?? '',
        resetTimer: null,
        async copy() {
            const ok = await writeClipboardText(this.text);
            if (!ok) {
                return;
            }

            this.copied = true;

            if (this.resetTimer) {
                clearTimeout(this.resetTimer);
            }

            this.resetTimer = setTimeout(() => {
                this.copied = false;
            }, COPY_FEEDBACK_MS);
        },
    }));
}