InputNumber

src/components/number/InputNumber.vue

Form Low 15 usos

Input numérico com botões de incremento e decremento. Layout inline-flex: [−][label?][input][+]. Pill shape cinza com botões azuis. Suporta limites min/max com clamping automático, step configurável, tamanhos (small/default/large) e estado disabled. Atenção: a prop color é declarada mas não aplicada — botões sempre usam #2979ff hardcoded no CSS scoped.

Padrão

Sem label, sem limites, step 1. Padrão dominante no admin: :min="1" + v-model para controle de quantidade.

<input-number :min="1" :step="1" v-model="quantity" />

Com Limites

min e max definidos. Botões ficam disabled nos extremos (opacity 0.5). Valor é clampeado automaticamente ao digitar fora do range.

No mínimo (min=0)

No máximo (max=99)

Meio (ambos ativos)

<input-number min="0" max="99" v-model="percentageLimit" />

Com Label

Label inline exibida entre o botão − e o input. Font 12px, cor #555. Uso real: indicar unidade ou contexto da métrica.

Qtd /

<input-number
  :min="1"
  :max="parseInt(campaign.instance.messaging_limit)"
  v-model="spamIntervalLimit"
  :label="limitLabel + '/'"
/>

Desabilitado

Botões e input desabilitados. Uso comum: campo condicional dependente de outra configuração (ex: instância ativa).

<input-number
  :min="1"
  :max="parseInt(limitSpamIntervalMessages)"
  v-model="spamIntervalMessages"
  :disabled="campaign.instance.activated === false"
/>

Tamanhos (small / default / large)

Prop size: 'small' (28px, font 11px), 'default' (36px, font 14px), 'large' (44px, font 16px). Sem uso real de small/large no admin — apenas o tamanho default foi encontrado no codebase.

small

default

large

<!-- Exemplos sintéticos — size small/large sem uso real no admin -->
<input-number :min="1" v-model="qty" size="small" />
<input-number :min="1" v-model="qty" size="default" />
<input-number :min="1" v-model="qty" size="large" />

API

Exemplo completo

<!-- value (required): v-model numérico. min/max: limites. step: incremento. -->
<!-- label: texto inline. size: 'small'|'default'|'large'. disabled -->
<input-number
  v-model="quantity"
  :min="1"
  :max="100"
  :step="1"
  label="Qtd"
  size="default"
  :disabled="false"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`value`	Number \| String	—	Sim	v-model. Valor clampeado automaticamente entre min e max. Se NaN, retorna ao min.
`min`	Number \| String	`-Infinity`	Não	Valor mínimo. Botão decrement fica disabled quando valor ≤ min.
`max`	Number \| String	`Infinity`	Não	Valor máximo. Botão increment fica disabled quando valor ≥ max.
`step`	Number \| String	`1`	Não	Quantidade incrementada/decrementada por clique. Pode ser decimal (ex: 0.5).
`size`	String	`'default'`	Não	Tamanho: `'small'` (28px), `'default'` (36px), `'large'` (44px).
`label`	String	`''`	Não	Texto exibido entre o botão − e o input. Font 12px, cor #555.
`disabled`	Boolean	false	Não	Desabilita botões e input completamente.
`color`	String	`'#2979ff'`	Não	⚠️ Declarada mas não aplicada — botões usam `#2979ff` hardcoded no CSS scoped. Não tem efeito.

Eventos

Evento	Payload	Descrição
`@input`	Number	v-model event. Emitido ao clicar nos botões ou digitar no input. Payload sempre dentro de min–max. Nunca emite NaN.

Onde é usado

src/views/chat-attendance/products/Quantity.vue
src/views/chat-attendance/products/Discount.vue
src/views/chat-attendance/payments/Payment.vue
src/views/customers/CustomersDownload.vue
src/views/roles/RolesForm.vue

Bug conhecido — prop color: A prop color é declarada no componente mas nunca vinculada ao template. Os botões + e − sempre renderizam com background-color: #2979ff hardcoded no CSS scoped. Para alterar a cor dos botões é necessário override de CSS externo.