mad-color-field

Componentes de selecao de cor (<mad-color-field>) e slider numerico (<mad-range-field>).

---

<mad-color-field> — Seletor de cor#

Input de cor com swatch clicavel que abre color picker (Pickr). Aceita digitacao manual em hex.

Props#

Prop	Tipo	Default	Descricao
name	string	''	Nome do campo (obrigatorio)
label	string	''	Label do campo
value	string	'#000000'	Cor inicial em hex
width / max-width	string	''	Largura / largura maxima do campo (CSS: px, %, calc())
hint	string	''	Texto de ajuda
error	string	''	Mensagem de erro
required	bool	false	Campo obrigatorio
disabled	bool	false	Campo desabilitado
attrs	string	''	Atributos HTML extras
id	string	name	ID do elemento

Uso basico#

<mad-color-field name="cor" label="Cor" />

Com valor inicial#

<mad-color-field name="cor_marca" label="Cor da marca" value="#a78bfa" />

Dentro de formulario#

<mad-form submit="onSave">
    <mad-form-grid :cols="2">
        <mad-input-field name="nome" label="Nome" required />
        <mad-color-field name="cor" label="Cor" required />
    </mad-form-grid>
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Com callback ao mudar#

<mad-color-field name="cor" label="Cor" mad:change="onCorChange" />

public function onCorChange(string $cor): void
{
    $this->form->set('preview_estilo', "background:{$cor}");
}

NUNCA fazer#

{{-- ERRADO: input nativo type="color" — visual nao bate com o tema --}}
<input type="color" name="cor">

{{-- CERTO --}}
<mad-color-field name="cor" label="Cor" />

{{-- ERRADO: usar mad-input-field para hex --}}
<mad-input-field name="cor" label="Cor" placeholder="#000000" />

{{-- CERTO --}}
<mad-color-field name="cor" label="Cor" />

---

<mad-range-field> — Slider numerico#

Slider HTML5 com display do valor atual no canto superior direito e marcadores min/max abaixo.

Props#

Prop	Tipo	Default	Descricao
name	string	''	Nome do campo (obrigatorio)
label	string	''	Label do campo
value	number	50	Valor inicial
min	number	0	Valor minimo
max	number	100	Valor maximo
step	number	1	Incremento
suffix	string	''	Sufixo exibido (ex: %, px, kg)
width / max-width	string	''	Largura / largura maxima do campo (CSS: px, %, calc())
hint	string	''	Texto de ajuda
error	string	''	Mensagem de erro
disabled	bool	false	Campo desabilitado
attrs	string	''	Atributos HTML extras
id	string	name	ID do elemento

Uso basico#

<mad-range-field name="volume" label="Volume" />

Com min/max/step e sufixo#

<mad-range-field name="desconto" label="Desconto"
    :min="0" :max="100" :step="5" suffix="%" :value="10" />

Slider de preco#

<mad-range-field name="preco_max" label="Preco maximo"
    :min="0" :max="5000" :step="50" suffix=" R$" :value="1000" />

Slider de peso#

<mad-range-field name="peso" label="Peso"
    :min="0" :max="200" :step="0.1" suffix=" kg" :value="70" />

Dentro de formulario#

<mad-form submit="onSave">
    <mad-range-field name="qualidade" label="Qualidade JPEG"
        :min="1" :max="100" :step="1" suffix="%" :value="85" />
    <mad-range-field name="largura_max" label="Largura maxima"
        :min="100" :max="4000" :step="100" suffix="px" :value="1920" />
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Reativo via mad:model.live#

O range usa mad:model.live automaticamente — o valor e propagado ao backend a cada mudanca, util para auto-bind:

<mad-range-field name="desconto" label="Desconto" :min="0" :max="50" suffix="%" />

// Toda alteracao no slider chama onUpdate via auto-bind se houver dependencias
public function onUpdated(string $name): void
{
    if ($name === 'desconto') {
        $this->form->set('valor_final', $this->valor * (1 - $this->desconto / 100));
    }
}

NUNCA fazer#

{{-- ERRADO: input range nativo sem visual customizado --}}
<input type="range" min="0" max="100" name="volume">

{{-- CERTO --}}
<mad-range-field name="volume" label="Volume" :min="0" :max="100" />

{{-- ERRADO: passar min/max como string sem : --}}
<mad-range-field name="vol" min="0" max="100" />
{{-- Blade trata atributo sem `:` como string literal — usar bind PHP --}}

{{-- CERTO: usar : para passar como numero --}}
<mad-range-field name="vol" :min="0" :max="100" />

{{-- ERRADO: usar mad-numeric-field para slider --}}
<mad-numeric-field name="desconto" label="Desconto" />

{{-- CERTO: range para selecao visual em escala --}}
<mad-range-field name="desconto" label="Desconto" :min="0" :max="100" suffix="%" />