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.