Aqui apenas descreveremos as configurações mais aprofundadas de inputs, porém se deseja entender sobre a utilização Leia mais sobre Resources
Vale lembrar que todos os campos abaixo exceto o card, possuem algumas configurações em comum, são elas :
- default (opcional), esse campo dará valor inicial ao input;
- description (opcional), descrição que aparecerá abaixo do nome do campo (label);
- field (obrigatório), é o índice que o valor do campo será adicionado ao form_data;
- custom_message (opcional), define as mensagens customizadas para regras de validação do input;
Card de agrupamento de fields
use marcusvbda\vstack\Fields\Card;
...
new Card('Informações',$fields),
...
Input comum de texto/número, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\Text;
...
new Text([
"label" => "Nome", //obrigatório
"type" => "text", //opcional, default 'text'
"field" => "name", //obrigatório
"description" => "Nome do veículo", //opcional
"prepend" => "depois", //opcional
"append" => "antes", //opcional
"mask" => ["##:##:##"], //opcional
"visible" => true, //opcional, default true
"show_value_length" => true, //opcional, default false
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
]),
...
- type, segue a nomenclatura de type input do HTML5;
- append, oque aparecerá no início do input;
- prepend, oque aparecerá no fim do input;
- mask, array de mascaras do VueMask;
- visible, define se o campo deve ser oculto ou não;
- show_value_length, define se o contado de caracteres até o limite máximo deve aparecer ou não abaixo do input;
Input textarea comum, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\TextArea;
...
new TextArea([
"label" => "Descrição", //obrigatório
"field" => "description", //obrigatório
"rows" => 6, //opcional, default 3
"description" => "Descrição do veículo", //opcional
"visible" => true, //opcional, default true
"show_value_length" => true, //opcional, default false
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
]),
...
- rows, define quantas linhas o input terá por padrão;
- visible, define se o campo deve ser oculto ou não;
- show_value_length, define se o contado de caracteres até o limite máximo deve aparecer ou não abaixo do input;
Input checkbox, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\Check;
...
new Check([
"label" => "Ativo", //obrigatório
"field" => "enabled", //obrigatório
"description" => "Descrição do campo", //obrigatório
]),
...
- field, é o índice que o valor do campo será adicionado ao form_data;
Input radio, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\Radio;
...
new Radio([
"label" => "Tipo", //obrigatório
"field" => "type", //obrigatório
"description" => "Descrição do campo", //obrigatório
// "options" => ["Carro", "Moto", "Caminhão"], //obrigatório
"options" => [
["value" => "car", "label" => "Carro"],
["value" => "bike", "label" => "Moto"],
["value" => "truck", "label" => "Caminhão"],
], //obrigatório
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
]),
...
- options, as opções que serão listadas ( pode ser listada das 2 formas apresentadas no exemplo );
HTML customizado, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\CustomComponent;
...
new CustomComponent("<h1>Teste</h1>"),
...
Input upload, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\Upload;
...
new Upload([
"label" => "Avatar", //obrigatório
"field" => "photo", //obrigatório
"description" => "Descrição do campo", //obrigatório
"preview" => true, //opcional, default true
"accept" => "image/*", //opcional, default "image/*"
// "multiple" => false, //opcional, default false
// "upload_route" => "upload", //opcional, default Config("vstack.default_upload_route")
"file_size_limit" => "1024", //opcional, default "2048"
//"style" => "gallery", //opcional, default "gallery" ou "file"
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default [],
//"auto_set_name" => true // opcional, default true
])
...
- preview, se ao clicado no link do input deve aparecer um preview de imagem;
- accept, arquivos aceitos para o input html 5;
- multiple, se o input aceitar multiplos arquivos/imagens;
- upload_route, rota que será feito upload, por padrão o sistema utilizará a rota vinda de Config("vstack.default_upload_route");
- file_size_limit, tamanho máximo aceito;
- style, define se o input aparecerá no modo galeria ou lista de arquivo (exemplo de cima é galeria, em baixo lista de arquivos);
- auto_set_name, define se antes de efetuar o upload vai ser perguntando o nome que deseja dar ao arquivo ou se irá definir uma hash unica para o nome do arquivo
Input Select, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\BelongsTo;
...
new BelongsTo([
"label" => "Categoria", //obrigatório
"description" => "Como gostaria de categorizar", //obrigatório
"field" => "category_id", //obrigatório
"multiple" => false, // opcional, default false
"model" => Category::class,
"model_fields" => ["id" => "id", "name" => "title"], // opcional, default ["id" => "id", "name" => "name"]
//"options" => [
// ["id" => 1, "value" => "Categoria 1"],
// ["id" => 2, "value" => "Categoria 2"],
//],
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
]),
...
- options, as opções que serão listadas ( no caso de usar options, o carregamento é síncrono, sendo assim, caso as opções venham da base de dados é preciso fazer a busca e converter para array no padrão do exemplo );
- model, desta forma o carregamento das opções acontece de forma assíncrona, ou seja, via ajax pós carregamento da página ( ideal para opções vindas da base de dados );
- model_fields é um gabarito do model, o componente precisa de um id e um name, caso esses atributos na tabela sejam diferentes deste padrão deve-se definir no gabarito qual será o id e qual será o name da opção;
Input Tags, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\Tags;
...
new Tags([
"label" => "Categorias", //obrigatório
"description" => "Como gostaria de categorizar", //opcional
"field" => "category_id", //obrigatório
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
])
...
Input HtmlEditor, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\HtmlEditor;
...
new HtmlEditor([
"label" => "Conteúdo da Página", //obrigatório
"field" => "body", //obrigatório
//"mode" => "webpage", //opcional, default webpage, pode ser newsletter
"description" => "Oque será exibido ao acessar a página",
//"blocks" => [
// "hello_world_test" => [
// "label" => "Hello World",
// "attributes" => [
// "class" => "class-test"
// ],
// "content" => "<h1>Hello World TESTE</h1>"
// ]
//], //opcional, default [], adiciona custom blocks no editor
"rules" => ["required"], //opcional, default []
"custom_message" => ["required" => "Campo obrigatório."] //opcional, default []
]),
...
- blocks, array de objetos com os atributos, label, attributes e content (html), que adicionará ao editor um bloco com as características definidas;
Input ResourceTree, abaixo um exemplo de utilização :
use marcusvbda\vstack\Fields\ResourceTree;
...
new ResourceTree([
'parent_resource' => 'cursos', //obrigatório
'resource' => 'questoes', // obrigatório
'relation' => 'questions',// obrigatório
'foreign_key' => 'courseId',// obrigatório
'label_index' => 'title',// opcional, default name
//'template' => 'seu conteúdo aqui' // opcional, default irá mostrar o valor do label_index
]),
...
- parent_resource, define para o componente qual é o nome do resource que está o iniciando;
- resource, define para o componente qual é o nome do resource que ele carregará os dados ( os inputs de cadastro/edição devem ser configurados normalmente em fields do resource em questão );
- foreign_key, fk do relacionamento do resource;
- label_index, o input que será mostrado como label na listagem;
- template, caso queira mostrar um elemento diferente e personalizado utilize este atributo