oziCopy

Versão: 3.1.0 (v1) — Descontinuado na v2

⛔ Descontinuado na v2

O ozi-copy não faz parte do ozi-ui v2. Era um comportamento trivial que não justificava código de biblioteca — e trazia dependência de ícones FontAwesome.

Substituto: duas linhas de Alpine ou JS puro, sem dependência nenhuma.

<button type="button"
        x-data="{ copied: false }"
        @click="navigator.clipboard.writeText('ABC-123').then(() => { copied = true; setTimeout(() => copied = false, 1500) })">
    <span x-text="copied ? '✓ copiado' : 'Copiar'"></span>
</button>

Precisa que funcione com DOM dinâmico (injetado por ZLD, modal, offcanvas)? Use um único listener delegado no document — equivalente ao bind do behavior v1:

<span data-copy="chave-api-123">chave-api-123</span>
<button type="button" data-copy-trigger="chave-api-123">Copiar</button>

<script>
document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-copy-trigger]');
    if (!btn) return;
    var key = btn.getAttribute('data-copy-trigger');
    var src = document.querySelector('[data-copy="' + key + '"]');
    var text = btn.getAttribute('data-copy') || (src && src.textContent) || '';
    navigator.clipboard.writeText(text).then(function () {
        var old = btn.textContent;
        btn.textContent = '✓ copiado';
        setTimeout(function () { btn.textContent = old; }, 1500);
    });
});
</script>

O plugin continua disponível na v1 congelada (tag v1-final) e não recebe mais atualizações. A documentação abaixo se refere a essa versão. Veja o guia de migração.

Descrição

Plugin para copiar texto para o clipboard com retorno visual de sucesso ou erro. Suporta cópia por valor direto no atributo, por referência a um elemento de conteúdo separado, por valor de input e por HTML decodificado. Utiliza navigator.clipboard com fallback automático via execCommand('copy').

Exemplos

[1] Valor direto

O texto a copiar é definido diretamente no atributo data-ozi-copy-value.

<div data-ozi-copy-value="ABCDE-12345-FGHIJ">
    Copiar código
</div>

[2] Trigger + content — texto

O trigger referencia um elemento de conteúdo separado pelo mesmo identificador.

<button type="button" data-ozi-copy="codigoA">
    Copiar código
</button>

<div data-ozi-copy-content="codigoA">
    ABCDE-12345-FGHIJ
</div>

[3] Trigger + input — copia o value

Quando o elemento referenciado é um <input>, o plugin copia automaticamente o value do campo.

<input type="text"
    data-ozi-copy-content="codigoB"
    value="ABCDE-12345-FGHIJ">

<button type="button" data-ozi-copy="codigoB">
    Copiar valor do input
</button>

[4] HTML decodificado — data-ozi-copy-mode="html-decode"

Quando o conteúdo está em HTML escapado, o modo html-decode decodifica antes de copiar.

<button type="button" data-ozi-copy="codigoC">
    Copiar HTML decodificado
</button>

<div data-ozi-copy-content="codigoC" data-ozi-copy-mode="html-decode">
    &lt;div class="box"&gt;Olá&lt;/div&gt;
</div>

O conteúdo copiado será <div class="box">Olá</div> — já decodificado.

Recursos

• Cópia por valor direto — texto definido no próprio atributo
• Cópia por referência — trigger vinculado a elemento de conteúdo separado
• Cópia de input — copia o value de campos <input> automaticamente
• HTML decode — decodifica entidades HTML antes de copiar
• Retorno visual de sucesso — feedback ao usuário após cópia bem-sucedida
• Retorno visual de erro — feedback em caso de falha
• navigator.clipboard — API moderna com suporte a HTTPS
• Fallback execCommand — compatibilidade com navegadores legados

Atributos HTML

[1] Modos de Cópia

Fluxo de Ação

Modo valor direto:

1. Usuário clica no elemento com data-ozi-copy-value
2. O valor do atributo é copiado para o clipboard
3. Retorno visual de sucesso ou erro é exibido

Modo trigger + content:

1. Usuário clica no trigger com data-ozi-copy
2. O plugin localiza o elemento data-ozi-copy-content de mesmo identificador
3. Lê o texto, value (se input) ou HTML decodificado (se html-decode)
4. Copia para o clipboard
5. Retorno visual de sucesso ou erro é exibido