Inputs (Formularios)

Label

Rotulo padronizado para campos.

Input texto

Exemplos:

1	`<x-w2o-inputs::label for="nome" label="Nome Completo" :obrigatorio="true"/>`

Hint

Dica/ajuda para campos.

Input texto

Exemplos:

1	`<x-w2o-inputs::hint hint="Digite seu e-mail corporativo">`

Texto

Input de texto com suporte a mascaras automaticas para formatos comuns ou máscaras customizadas.

Input texto

Exemplo:

1	`<x-w2o-inputs::texto wire:model="nome" />`

Máscaras:

Os inputs de texto aceitam o parâmetro x-mask para máscaras do AlpineJS

1	`<x-w2o-inputs::texto wire:model="cep" x-mask="99999-999" />`

Máscaras prontas

Os inputs de texto já possuem algumas máscaras prontas para serem utilizadas:

Dinheiro (Para valores monetários)

1	`<x-w2o-inputs::texto wire:model="valor" dinheiro />`

Inteiro (Para números inteiros)

1	`<x-w2o-inputs::texto wire:model="numero" inteiro />`

Hora (Para campos de hora - HH:MM)

1	`<x-w2o-inputs::texto wire:model="hora" hora />`

Hora (Para campos de hora - HH:MM)

1	`<x-w2o-inputs::texto wire:model="hora" hora />`

Ano (Para campos de ano - YYYY)

1	`<x-w2o-inputs::texto wire:model="ano" ano />`

Referência (Para campos de referência - MM/YYYY)

1	`<x-w2o-inputs::texto wire:model="referencia" referencia />`

Referência (Para campos de CEP)

1	`<x-w2o-inputs::texto wire:model="cep" cep />`

Senha

Input de senha com toggle de visibilidade.

Exemplos:

1	`<x-w2o-inputs::senha wire:model="senha" />`

Textarea

Area de texto para multiplas linhas. Aceita um parâmetro limite que exibe um contador de caracteres e não permite mais digitar ao atingir o limite.

Input texto

Exemplos:

1	`<x-w2o-inputs::textarea wire:model="observacoes" />`

1	`<x-w2o-inputs::textarea wire:model="descricao" limite="50" />`

Textarea Editor

Editor rico de texto (QuillJS) com versoes completa e simplificada.

Input texto

Exemplos:

1	`<x-w2o-inputs::textarea-editor wire:model="conteudo" />`

1	`<x-w2o-inputs::textarea-editor-simples wire:model="descricao_formatada" />`

Select

Select com autocomplete usando TomSelect.

Input texto

SelectV2

No Livewire deve ser criado:

Uma propriedade para receber o valor do select
- string ou int para selects únicos
- array para selects múltiplos

Uma propriedade para conter as opções do select

Deve estar em um dos formatos:

Um array de items com campo value e campo text

    $enumeracao = [
        ['value' => 1, 'text' => 'Opção 1'],
        ['value' => 2, 'text' => 'Opção 2'],
    ]

Um array de items value => text

    $enumeracao = [
        1 => 'Opção 1',
        2 => 'Opção 2',
    ]

<?php

class Formulario extends Component
{
    public ?int $categoria_id = null;

    public array $enumeracao = [
        'categorias' => [],
        'usuarios' => [],
        'tags' => [],
    ];

    public function mount(): void
    {
        // Enumeração deve ser um array de items com campo "value" e campo "text"
        $this->enumeracao['categorias'] = Categoria::query()
            ->orderBy('nome')
            ->get()
            ->map(fn ($item) => ['value' => $item->id, 'text' => $item->nome])
            ->toArray();
    }
}

Ao inserir nas blades, apontar wire:model para a propriedade que irá receber o valor do select e apontar wire:enumeracao para a propriedade que contém as opções do select. Além disso, o select também pode receber os seguintes parâmetros opcionais:

url
- url para qual o select vai pedir novas opções ao digitar
preload
- Faz com que o select dispare uma busca de autocompleta inicial com uma string vazia na primeira vez que for aberto

<x-w2o-inputs::select-v2
    wire:model="categoria_id"
    wire:enumeracao="enumeracao.categorias"
    url={{ route('categoria.autocompleta') }}
    preload
/>

SelectV3

No livewire deve ser incluído:

Se existir autocompleta:
- A trait WithAutocompleta
- Um método autocompleta(string $field, string $query)
Uma propriedade tipada como SelectV3;

<?php

use W2oBladeComponents\W2OBladeComponents\Traits\WithAutocompleta;
use W2oBladeComponents\W2OBladeComponents\Inputs\SelectV3;

class Formulario extends Component
{
    use WithAutocompleta;

    public SelectV3 $cliente;
    public SelectV3 $fornecedor;

    public function mount(): void
    {
        $this->clientes = Cliente::query()
            ->orderBy('nome')
            ->get()
            ->map(fn ($item) => ['value' => $item->id, 'text' => $item->nome])
            ->toArray();
    }

    public function autocompleta(string $property, string $query): array
    {
        switch ($property) {
            case: 'cliente':
                return Cliente::query()
                    ->where('nome', 'like', "%{$query}%")
                    ->limit(20)
                    ->get()
                    ->map(fn ($item) => ['value' => $item->id, 'text' => $item->nome])
                    ->toArray();
                break;

            case 'fornecedor':
                return Fornecedor::query()
                    ->where('nome', 'like', "%{$query}%")
                    ->limit(20)
                    ->get()
                    ->map(fn ($item) => ['value' => $item->id, 'text' => $item->nome])
                    ->toArray();
                break;
        }
    }
}

<x-w2o-inputs::select-v3
    wire:model="cliente"
    :enumeracao="$clientes"
/>

Checkbox

Checkbox para valores booleanos ou selecao multipla.

Input texto

Parâmetros:

switch (boolean)
- Controla se o checkbox irá renderizar como checkbox ou switch
- <x-w2o-inputs::checkbox wire:model="ativo" :switch="false"/>
radio (boolean)
- Controla se o checkbox irá renderizar com type="radio" ou type="checkbox"
- <x-w2o-inputs::checkbox wire:model="tipo_acidente" :radio="true"/>
label (string)
- Exibe uma label ao lado do checkbox
- <x-w2o-inputs::checkbox wire:model="tipo_acidente" label="Apple"/>
size (string xs|sm|md|lg)
- Controla o tamanho do switch (Funciona apenas no modo switch=true)
- <x-w2o-inputs::checkbox wire:model="tipo_acidente" size="xs"/>

Data

Seletor de data com calendario.

Input texto

Parâmetros:

data-min-date (Y-m-d)
- Limita data mínima para seleção no calendário
- Não impede o usuário de digitar uma data menor, lembre-se de validar ao salvar
data-max-date (Y-m-d)
- Limita data máxima para seleção no calendário
- Não impede o usuário de digitar uma data maior, lembre-se de validar ao salvar

Exemplos:

1	`<x-w2o-inputs::data wire:model="data_nascimento" />`

1	`<x-w2o-inputs::data wire:model="data_evento" data-max-date="{{ date('Y-m-d') }}" />`

Cor

Seletor de cores com preview.

Input texto

Exemplos:

1	`<x-w2o-inputs::cor wire:model="cor_fundo" />`

Arquivo

Upload de arquivo simples.

Input texto

Exemplos:

1	`<x-w2o-inputs::arquivo wire:model="documento" />`

1	`<x-w2o-inputs::arquivo wire:model="foto" multiple accept="image/*" />`

Dropzone

Upload de arquivo com drag-and-drop e preview.

Input texto

Parâmetros:

download-disabled (boolean)
- Desabilita os botões de download de arquivos <x-w2o-inputs::dropzone wire:model="anexos" :download-disabled="true"/>
delete-disabled (boolean)
- Desabilita os botões de excluir arquivos <x-w2o-inputs::dropzone wire:model="anexos" :delete-disabled="true"/>

Exemplos:

1	`<x-w2o-inputs::dropzone wire:model="anexos" />`

1	`<x-w2o-inputs::dropzone wire:model="imagens" accept="image/*" />`

Slider

Controle deslizante para valores numericos.

Input texto

Exemplos:

1	`<x-w2o-inputs::slider wire:model="volume" />`

1	`<x-w2o-inputs::slider wire:model="prioridade" min="1" max="10" step="1" />`

Range Slider

Controle deslizante de intervalo (min, max).

Input texto

Exemplos:

1	`<x-w2o-inputs::rangeslider wire:model="faixa_preco" />`

1	`<x-w2o-inputs::rangeslider wire:model="faixa_preco" min="0" max="100" />`

← Voltar ao Indice