ozi-paste

Version: 1.0.0 (v1) — Discontinued in v2

⛔ Discontinued in v2

ozi-paste is not part of ozi-ui v2. The replacement is a short Alpine or vanilla JS recipe — dispatching input+change so reactive frameworks (including Livewire via wire:model) notice the change:

<input type="text" x-ref="target">

<button type="button"
        x-data
        @click="
            $refs.target.value = 'pasted-text';
            $refs.target.dispatchEvent(new Event('input',  { bubbles: true }));
            $refs.target.dispatchEvent(new Event('change', { bubbles: true }));
        ">
    Paste
</button>

Delegated version, for dynamic DOM:

<input id="target" type="text">
<button type="button" data-paste-value="pasted-text" data-paste-target="#target">Paste</button>

<script>
document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-paste-value]');
    if (!btn) return;
    var target = document.querySelector(btn.getAttribute('data-paste-target'));
    if (!target) return;
    target.value = btn.getAttribute('data-paste-value');
    target.dispatchEvent(new Event('input',  { bubbles: true }));
    target.dispatchEvent(new Event('change', { bubbles: true }));
});
</script>

The plugin remains available in the frozen v1 (tag v1-final) and receives no further updates. The documentation below refers to that version. See the migration guide.

Conceito

Plugin IIFE que cola texto em um elemento destino ao clicar em qualquer gatilho HTML. O bind é feito via delegação no document — funciona automaticamente em HTML injetado por ZLD, modais ou offcanvas, sem necessidade de reinicialização.

Dependência: ozi.js (OZI.lang) Exposição: window.OziPaste | OZI.behaviors.paste

Examples

[1] Paste to input

<button data-ozi-paste-value="example@email.com"
        data-ozi-paste-destiny="#my-input">
    Paste email
</button>

<input type="text" id="my-input">

[2] Paste to textarea

<button data-ozi-paste-value="Text automatically pasted."
        data-ozi-paste-destiny="#my-textarea">
    Paste text
</button>

<textarea id="my-textarea"></textarea>

[3] Anchor as trigger

<a href="#"
   data-ozi-paste-value="TOKEN-ABC-12345"
   data-ozi-paste-destiny="#token-field">
    Use this token
</a>

<input type="text" id="token-field">

Estrutura mínima

<button data-ozi-paste-value="TEXTO-A-COLAR"
        data-ozi-paste-destiny="#meu-input">
    Colar
</button>

<input type="text" id="meu-input">

Atributos

Quando o seletor retornar múltiplos elementos, usa-se .first() internamente.

Destinos suportados

Gatilhos suportados

Qualquer elemento clicável funciona — o bind escuta click via delegação.

{{-- button --}}
<button class="btn btn-secondary"
        data-ozi-paste-value="ABCDE-12345-FGHIJ"
        data-ozi-paste-destiny="#meu-input">
    Colar
</button>

{{-- anchor --}}
<a href="#"
   data-ozi-paste-value="TOKEN-XYZ"
   data-ozi-paste-destiny=".campo-token">
    Usar este token
</a>

{{-- qualquer elemento --}}
<span data-ozi-paste-value="código-promo"
      data-ozi-paste-destiny="#cupom"
      style="cursor:pointer;">
    Aplicar cupom
</span>

Feedback visual

Tooltip lateral injetado no próprio trigger com fadeOut jQuery — mesmo padrão do ozi-copy.

Eventos JavaScript

$('#meu-trigger').on('ozi:pasted', function(e, payload) {
    console.log(payload.value);    // texto colado
    console.log(payload.destiny);  // elemento DOM destino
});

$('#meu-trigger').on('ozi:paste-error', function(e, payload) {
    console.warn(payload.error);
});

API JavaScript OziPaste

// Colar via API
var ok = OziPaste.paste('#meu-input', 'valor aqui'); // → true/false

// Simular clique no trigger
OziPaste.trigger('#btn-colar');

// Via OZI.behaviors
OZI.behaviors.paste.paste('#meu-input', 'valor');

Integração com ZLD / afterRender

O bind é por delegação no document — nenhuma ação necessária após renders dinâmicos. O hook afterRender está registrado mas é no-op por design.

// Já configurado — nenhum código extra necessário
OZI.hooks.afterRender.register('behavior:paste', function () {
    // bind delegado no document — sem ação necessária
});

Integração com Livewire 4

Ao colar em <input wire:model>, os eventos input e change são disparados automaticamente — o Livewire intercepta normalmente.

<input type="text" id="campo-livewire" wire:model.live="form.codigo">

<button data-ozi-paste-value="{{ $codigoGerado }}"
        data-ozi-paste-destiny="#campo-livewire">
    Aplicar código
</button>

I18n

Via OZI.lang com fallback PT-BR embutido:

Checklist

✅ data-ozi-paste-value  — texto a colar
✅ data-ozi-paste-destiny — seletor CSS válido
✅ Destino é input, textarea ou contenteditable
✅ Seletor resolve ao menos um elemento no DOM