Campos de formulário
mad-cep-field
mad-cnpj-field
mad-scanner-field
mad-color-field
mad-icon-field
CEP com auto-preenchimento
mad-cep-field busca o endereco na API do madbuilder e preenche os campos ligados via fill-fields.
Busca a API do madbuilder ao completar 8 digitos e preenche os campos ao lado (fill-fields).
resources/views/tutor/examples/forms-mascaras/cep.blade.php
<mad-form-grid :cols="2">
<mad-cep-field name="cep_demo" label="CEP"
:fill-fields="['rua_demo' => 'rua', 'bairro_demo' => 'bairro', 'uf_demo' => 'uf']"
hint="Busca a API do madbuilder ao completar 8 digitos e preenche os campos ao lado (fill-fields)." />
<mad-input-field name="rua_demo" label="Rua" placeholder="Preenchido automaticamente" />
</mad-form-grid>
<mad-form-grid :cols="2">
<mad-input-field name="bairro_demo" label="Bairro" placeholder="Preenchido automaticamente" />
<mad-input-field name="uf_demo" label="UF" placeholder="Preenchido automaticamente" />
</mad-form-grid>
CNPJ com auto-preenchimento
mad-cnpj-field busca a Receita e preenche razao social/telefone/endereco via fill-fields.
Busca a Receita ao completar 14 digitos e preenche razao social, telefone e endereco (fill-fields).
resources/views/tutor/examples/forms-mascaras/cnpj.blade.php
<mad-form-grid :cols="2">
<mad-cnpj-field name="cnpj_demo" label="CNPJ"
:fill-fields="['razao_demo' => 'razao_social', 'fone_demo' => 'ddd_telefone_1', 'endereco_demo' => 'logradouro']"
hint="Busca a Receita ao completar 14 digitos e preenche razao social, telefone e endereco (fill-fields)." />
<mad-input-field name="razao_demo" label="Razao social" placeholder="Preenchido automaticamente" />
</mad-form-grid>
<mad-form-grid :cols="2">
<mad-input-field name="fone_demo" label="Telefone" placeholder="Preenchido automaticamente" />
<mad-input-field name="endereco_demo" label="Endereco" placeholder="Preenchido automaticamente" />
</mad-form-grid>
Seletor de cor
mad-color-field — input #rrggbb com swatch e color picker.
resources/views/tutor/examples/forms-mascaras/color.blade.php
<mad-form-grid :cols="2">
<mad-color-field name="cor_categoria" label="Cor da categoria" value="#3b82f6" />
<mad-color-field name="cor_obrigatoria" label="Cor (obrigatoria)" required />
</mad-form-grid>
Seletor de icone
mad-icon-field — busca entre os icones Lucide com preview.
Busca entre todos os icones Lucide; allowClear (default true) mostra o X pra limpar a selecao.
resources/views/tutor/examples/forms-mascaras/icon.blade.php
<mad-icon-field name="icone_categoria" label="Icone da categoria" value="tag" placeholder="Selecione um icone"
hint="Busca entre todos os icones Lucide; allowClear (default true) mostra o X pra limpar a selecao." />
Scanner (codigo de barras/QR)
mad-scanner-field abre a camera e dispara uma acao wire ao detectar um codigo.
Scanner ativo
Abre a camera (html5-qrcode) pra ler codigo de barras ou QR; tambem aceita digitar manualmente. Ao detectar, dispara onCodeScan.
resources/views/tutor/examples/forms-mascaras/scanner.blade.php
<mad-scanner-field name="codigo_produto" type="both" mad:change="onCodeScan"
hint="Abre a camera (html5-qrcode) pra ler codigo de barras ou QR; tambem aceita digitar manualmente. Ao detectar, dispara onCodeScan." />
app/control/Tutor/TutorFormsMascaras.php
/**
* Handler do mad:change do mad-scanner-field — o JS chama
* MadWire.call(wrapper, action, [valorLido]) ao detectar um código, ou
* seja, o código chega como 1º parâmetro POSICIONAL (não via $this->form).
*/
public function onCodeScan(string $codigo): MadResponse
{
return (new MadResponse())->toast("Código lido: {$codigo}", 'success', 'onCodeScan');
}
Acao wire
mad-form com submit real — devolve os campos mascarados recebidos via TutorFormsMascaras::onSubmitDemo.
resources/views/tutor/examples/forms-mascaras/wire-submit.blade.php
<mad-form submit="onSubmitDemo">
<mad-form-grid :cols="2">
<mad-cep-field name="cep_wire" label="CEP" required />
<mad-color-field name="cor_wire" label="Cor" value="#16a34a" />
</mad-form-grid>
<mad-form-actions align="right">
<mad-btn type="submit" variant="primary" icon="send">Enviar (onSubmitDemo)</mad-btn>
</mad-form-actions>
</mad-form>
app/control/Tutor/TutorFormsMascaras.php
/**
* Submit do exemplo "Ação wire" — mostra os campos mascarados recebidos
* (CEP/cor chegam crus no PHP; a máscara é só de exibição no browser).
*/
public function onSubmitDemo(): MadResponse
{
$data = $this->form->getData();
$preenchidos = [];
foreach ((array) $data as $campo => $valor) {
$valor = trim((string) $valor);
if ($valor !== '') {
$preenchidos[] = "{$campo}={$valor}";
}
}
$resumo = $preenchidos !== [] ? implode(' | ', $preenchidos) : 'nenhum campo preenchido';
return (new MadResponse())->toast("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
}
Código-fonte completo da página
app/control/Tutor/TutorFormsMascaras.php
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;
/**
* TutorFormsMascaras — página "Máscaras e widgets" do catálogo
* (mad-cep-field, mad-cnpj-field, mad-scanner-field, mad-color-field,
* mad-icon-field).
*/
class TutorFormsMascaras extends TutorPage
{
protected string $catalogKey = 'forms_mascaras';
public MadForm $form;
public function mount(array $params = []): void
{
$this->form = new MadForm('tutor_forms_mascaras');
}
/**
* Handler do mad:change do mad-scanner-field — o JS chama
* MadWire.call(wrapper, action, [valorLido]) ao detectar um código, ou
* seja, o código chega como 1º parâmetro POSICIONAL (não via $this->form).
*/
public function onCodeScan(string $codigo): MadResponse
{
return (new MadResponse())->toast("Código lido: {$codigo}", 'success', 'onCodeScan');
}
/**
* Submit do exemplo "Ação wire" — mostra os campos mascarados recebidos
* (CEP/cor chegam crus no PHP; a máscara é só de exibição no browser).
*/
public function onSubmitDemo(): MadResponse
{
$data = $this->form->getData();
$preenchidos = [];
foreach ((array) $data as $campo => $valor) {
$valor = trim((string) $valor);
if ($valor !== '') {
$preenchidos[] = "{$campo}={$valor}";
}
}
$resumo = $preenchidos !== [] ? implode(' | ', $preenchidos) : 'nenhum campo preenchido';
return (new MadResponse())->toast("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
}
}
resources/views/tutor/forms/mascaras.blade.php
<x-tutor-page page="forms_mascaras">
<x-tutor-demo demo="tutor.examples.forms-mascaras.cep"
title="CEP com auto-preenchimento" desc="mad-cep-field busca o endereco na API do madbuilder e preenche os campos ligados via fill-fields." />
<x-tutor-demo demo="tutor.examples.forms-mascaras.cnpj"
title="CNPJ com auto-preenchimento" desc="mad-cnpj-field busca a Receita e preenche razao social/telefone/endereco via fill-fields." />
<x-tutor-demo demo="tutor.examples.forms-mascaras.color"
title="Seletor de cor" desc="mad-color-field — input #rrggbb com swatch e color picker." />
<x-tutor-demo demo="tutor.examples.forms-mascaras.icon"
title="Seletor de icone" desc="mad-icon-field — busca entre os icones Lucide com preview." />
<x-tutor-demo demo="tutor.examples.forms-mascaras.scanner"
title="Scanner (codigo de barras/QR)" desc="mad-scanner-field abre a camera e dispara uma acao wire ao detectar um codigo."
php="TutorFormsMascaras::onCodeScan" />
<x-tutor-demo demo="tutor.examples.forms-mascaras.wire-submit"
title="Acao wire" desc="mad-form com submit real — devolve os campos mascarados recebidos via TutorFormsMascaras::onSubmitDemo."
php="TutorFormsMascaras::onSubmitDemo" />
</x-tutor-page>