Campos de formulário
mad-number-field pra quantidades inteiras — min + step=1 evitam valores invalidos.
Numero inteiro simples: min=1 e step=1 evitam quantidade zero ou fracionada.
<mad-number-field name="qtd_basico" label="Quantidade" :min="1" step="1" placeholder="1"
hint="Numero inteiro simples: min=1 e step=1 evitam quantidade zero ou fracionada." />
mad-number-field com step fracionario — peso, fator, medida (sem formatacao pt-BR).
mad-number-field tambem serve pra decimal sem mascara (peso, fator de conversao) — o step define as casas decimais aceitas.
<mad-number-field name="peso_kg" label="Peso" :min="0" step="0.001" suffix="kg"
hint="mad-number-field tambem serve pra decimal sem mascara (peso, fator de conversao) — o step define as casas decimais aceitas." />
mad-numeric-field com milhar e casas decimais configuraveis — cotacoes, indices.
mad-numeric-field formata em pt-BR (milhar com ponto, decimal com virgula) enquanto o usuario digita.
<mad-numeric-field name="cotacao_usd" label="Cotacao (USD)" :decimals="4" prefix="US$ "
hint="mad-numeric-field formata em pt-BR (milhar com ponto, decimal com virgula) enquanto o usuario digita." />
mad-money-field com prefixo R$ e a variante allow-negative pra estornos/ajustes.
Prefixo R$ e separadores pt-BR por padrao — o PHP recebe o valor cru (123.45), sem formatacao.
allow-negative libera valores negativos — util pra estornos e ajustes de caixa.
<mad-form-grid :cols="2">
<mad-money-field name="preco_venda" label="Preco de venda"
hint="Prefixo R$ e separadores pt-BR por padrao — o PHP recebe o valor cru (123.45), sem formatacao." />
<mad-money-field name="ajuste_caixa" label="Ajuste de caixa" allow-negative
hint="allow-negative libera valores negativos — util pra estornos e ajustes de caixa." />
</mad-form-grid>
mad-spinner-field com botoes de incremento/decremento ao lado do valor.
Botoes +/- ao lado do valor — ideal pra quantidades pequenas em carrinho/PDV.
<mad-spinner-field name="qtd_spinner" label="Quantidade" :value="1" :min="1" :max="20"
hint="Botoes +/- ao lado do valor — ideal pra quantidades pequenas em carrinho/PDV." />
mad-range-field pra percentuais e ajustes visuais rapidos.
Slider visual — bom pra percentuais e configuracoes (desconto, volume, opacidade).
<mad-range-field name="progresso" label="Progresso" :value="40" :min="0" :max="100" suffix="%"
hint="Slider visual — bom pra percentuais e configuracoes (desconto, volume, opacidade)." />
mad-form com submit real — calcula o total no servidor via TutorFormsNumeros::onSubmitDemo.
<mad-form submit="onSubmitDemo">
<mad-form-grid :cols="2">
<mad-number-field name="quantidade_wire" label="Quantidade" :min="1" step="1" required />
<mad-money-field name="valor_unit_wire" label="Valor unitario" required />
</mad-form-grid>
<mad-form-actions align="right">
<mad-btn type="submit" variant="primary" icon="calculator">Calcular (onSubmitDemo)</mad-btn>
</mad-form-actions>
</mad-form>
/**
* Submit do exemplo "Ação wire" — lê quantidade + valor unitário e
* calcula o total no servidor (prova que number-field/money-field chegam
* como número cru no PHP, sem máscara).
*/
public function onSubmitDemo(): MadResponse
{
$data = $this->form->getData();
$quantidade = (float) ($data->quantidade_wire ?? 0);
$valorUnit = (float) ($data->valor_unit_wire ?? 0);
$total = $quantidade * $valorUnit;
$msg = sprintf(
'Total calculado: %s x R$ %s = R$ %s',
rtrim(rtrim(number_format($quantidade, 3, ',', '.'), '0'), ','),
number_format($valorUnit, 2, ',', '.'),
number_format($total, 2, ',', '.')
);
return (new MadResponse())->toast($msg, 'success', 'onSubmitDemo');
}
Código-fonte completo da página
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;
/**
* TutorFormsNumeros — página "Números" do catálogo (mad-number-field,
* mad-numeric-field, mad-money-field, mad-spinner-field, mad-range-field).
*/
class TutorFormsNumeros extends TutorPage
{
protected string $catalogKey = 'forms_numeros';
public MadForm $form;
public function mount(array $params = []): void
{
$this->form = new MadForm('tutor_forms_numeros');
}
/**
* Submit do exemplo "Ação wire" — lê quantidade + valor unitário e
* calcula o total no servidor (prova que number-field/money-field chegam
* como número cru no PHP, sem máscara).
*/
public function onSubmitDemo(): MadResponse
{
$data = $this->form->getData();
$quantidade = (float) ($data->quantidade_wire ?? 0);
$valorUnit = (float) ($data->valor_unit_wire ?? 0);
$total = $quantidade * $valorUnit;
$msg = sprintf(
'Total calculado: %s x R$ %s = R$ %s',
rtrim(rtrim(number_format($quantidade, 3, ',', '.'), '0'), ','),
number_format($valorUnit, 2, ',', '.'),
number_format($total, 2, ',', '.')
);
return (new MadResponse())->toast($msg, 'success', 'onSubmitDemo');
}
}
<x-tutor-page page="forms_numeros">
<x-tutor-demo demo="tutor.examples.forms-numeros.basico"
title="Numero inteiro" desc="mad-number-field pra quantidades inteiras — min + step=1 evitam valores invalidos." />
<x-tutor-demo demo="tutor.examples.forms-numeros.decimal"
title="Decimal sem mascara" desc="mad-number-field com step fracionario — peso, fator, medida (sem formatacao pt-BR)." />
<x-tutor-demo demo="tutor.examples.forms-numeros.numeric-formatado"
title="Decimal formatado (pt-BR)" desc="mad-numeric-field com milhar e casas decimais configuraveis — cotacoes, indices." />
<x-tutor-demo demo="tutor.examples.forms-numeros.moeda"
title="Moeda (R$)" desc="mad-money-field com prefixo R$ e a variante allow-negative pra estornos/ajustes." />
<x-tutor-demo demo="tutor.examples.forms-numeros.spinner"
title="Spinner +/-" desc="mad-spinner-field com botoes de incremento/decremento ao lado do valor." />
<x-tutor-demo demo="tutor.examples.forms-numeros.range"
title="Slider (range)" desc="mad-range-field pra percentuais e ajustes visuais rapidos." />
<x-tutor-demo demo="tutor.examples.forms-numeros.wire-submit"
title="Acao wire" desc="mad-form com submit real — calcula o total no servidor via TutorFormsNumeros::onSubmitDemo."
php="TutorFormsNumeros::onSubmitDemo" />
</x-tutor-page>