Download the PHP package vesperabr/laravel-form-components without Composer
On this page you can find all versions of the php package vesperabr/laravel-form-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download vesperabr/laravel-form-components
More information about vesperabr/laravel-form-components
Files in vesperabr/laravel-form-components
Package laravel-form-components
Short Description Componentes Blade para desenvolvimento rápido de formulários
License MIT
Informations about the package laravel-form-components
Laravel Components
Conjunto de componentes Blade para desenvolvimento rápido de formulários com suporte ao Monalisa e em breve a outros frameworks CSS.
Funcionalidades
- Componentes para form, input, textarea, select, multi-select, checkbox e radio.
- Gerenciamento automático do Form Method Spoofing
- Gerenciamento automático do CSRF Protection
- Suporte ao Monalisa e em breve outros frameworks CSS.
- Atribuição automática de valores.
- Re-população de valores via old input.
- Classes dos componentes e views totalmente customizáveis.
Requisitos
- PHP 7.3
- Laravel 7
Instalação
Você pode instalar este pacote pelo composer:
Exemplo rápido
Componentes
Form
Por padrão o componente <x-form> utiliza o verbo GET no atributo method.
Você pode informar qualquer outro verbo e o componente irá lidar automaticamente com o method spoofing e controle de CSRF para você.
Você pode informar normalmente qualquer outro atributo da tag <form>, como por exemplo action, class, id, etc.
Você pode informar também o atributo multipart, que irá configurar automaticamente o formulário para enviar arquivos. Exemplo:
Label
Na maioria dos componetes deste pacote você pode informar o atributo label, com isto o componente irá renderizar uma tag <label> com o valor especificado.
Input
Por padrão o componente <x-input /> gera uma tag <input /> com o atributo type="text", mas você pode informar qualquer outro type padrão do HTML como por exemplo password, email, tel, url, number, etc.
Você pode informar outros atributos como required, placeholder, class, id, etc.
Tipos especiais
O componente <x-input /> aceita alguns tipos especiais como cpf, cnpj, cpfcnpj, cep, float e money. Isso irá aplicar máscaras de formatação ao campo.
Inserindo valores antes e depois do campo
Você pode informar também os atributos append e prepend. Isto irá exibir valores antes ou depois do campo.
Textarea
Este componente é bem parecido com o <x-input />, com exceção ao suporte de máscaras e valores antes e depois.
Select
O componente <x-select /> precisa que você informe o atributo options para que ele popule os valores que o usuário pode escolher. Este atributo deve ser um array no formato chave => valor.
Você pode definir qual(is) o(s) valor(es) que deverão vir selecionado(s) através do atributo selected. Se você adicionar o atributo multiple ao componente, lembre-se de passar um array simples com as chaves que deverão ser selecionadas.
Checkbox
Você pode criar um conjunto de checkboxes utilizando o componente <x-checkboxes />. Assim como o componente <x-select /> você deve informar o atributo options contendo um array no formato chave => valor.
Você pode informar os valores que devem vir selecionados através do atributo selected que pode ser uma string ou um array contendo as chaves que devem ser selecionadas.
Há também o componente <x-checkbox /> que irá criar um único checkbox. Ele deve ser usado para criar campos de aceite ou ativo/inativo.
Você pode informar o atributo default que irá prover um input hidden com o valor padrão caso o campo não seja selecionado.
Radio
O componente <x-radios /> prove um conjuto de radios. Você deve informar o atributo options contendo um array no formato chave => valor.
Para definir o valor que deve vir selecionado, utilize o atributo selected.
Buttons
O componente <x-buttons /> gera os botões para controle do formulário.
Você pode informar o atributo submit que será o texto do botão de envio do formulário.
Se você informar também o atributo cancel-url, o componente irá exibir um link cancelar apontando para o valor informado.
Você pode informar também o atributo loader, que exibe um loader ao clicar no botão de enviar. Somente a presença deste atributo já habilita loader. Se você definir um valor para o atributo, o texto do botão será alterado enquanto ele estiver com o loader ativo.
Slots
Os componentes <x-input>, <x-checkbox>, <x-checkboxes>, <x-radios>, <x-select> e <x-textarea> permitem que você informe conteúdos adicionais, os chamados Slots. Por exemplo:
Atribuição de valores
Como visto, você pode definir os valores dos campos atráves do atributo value (para o componente <x-input />) ou através do atributo selected (para os componentes <x-select />, <x-radios />, <x-checkboxes /> e <x-checkbox />).
Model binding
Ao invés de definir os atributos value e selected, há também a possibilidade de pegar o valor de um campo automaticamente de um model Eloquent ou de um array associativo. Basta utilizar o atributo :bind.
No exemplo abaixo o componente irá procurar na variável $usuario (que deve ser uma instância de um model Eloquent ou um array associativo) a propriedade nome que foi definida através do atributo name. Neste caso o valor do campo seria o valor de $usuario->nome.
Você pode fazer o bind em vários campos de uma só vez informando o atributo bind no componente <x-form> ou utilizando as diretivas @bind e @endbind.
Você pode inclusive intercalar bindings.
Você pode também desabilitar o bind definindo o atributo :bind ou a diretiva @bind como false.
Old input data
Quando ocorre um erro de validação e o Laravel redireciona você de volta ao formulário, os campos continuarão com os valores digitados. Isto irá sempre sobrescrever qualquer valor padrão.
Customização
Você pode publicar o arquivo de configuração e também as views com o seguinte comando:
O arquivo de configuração form-components.php estará disponível na pasta config e as views serão publicadas na pasta resources/views/vendor/form-components.
No arquivo de configuração você pode definir qual framework CSS você irá utilizar e também a localização de cada view utilizada em cada componente.
Créditos
- Este pacote é inspirado no ótimo trabalho do Pascal Baljet.