@topjoao/top-design-system 0.1.0 → 0.1.1-beta.0

package/README.md

@@ -21,6 +21,7 @@ TopSolutions.
 | `TopDatePicker` | Campo de data, múltiplas datas ou intervalo. | `Date`/array de `Date` |
 | `TopFileUpload` | Escolha, validação e prévia de arquivos; não faz upload. | `File`/`File[]`/`null` |
 | `TopInputText` | Campo textual com label, erro e acessibilidade. | `string` |
+| `TopInputNumber` | Campo numérico localizado, com moeda, limites e incrementos. | `number \| null` |
 | `TopNavBar` | Navegação responsiva, breadcrumbs, favoritos e Drawer. | `searchValue` e `mobileOpen` opcionais |
 | `TopSelect` | Autocomplete pesquisável com paginação virtual. | opção/opções |
 | `TopTabs` | Abas com painéis nomeados. | `string \| number` |
@@ -258,7 +259,7 @@ sendo explorado recebem destaque.
 | `aiaActive` | `boolean` / `false` | Estado visual do botão Aia. |
 | `aiaLabel`, `supportLabel` | `string` | Textos acessíveis e rótulos do Drawer. |
 | `actions` | `TopNavAction[]` / `[]` | Ações genéricas, como integrações, emitidas por `action`. |
-| `client` | `TopNavClient` | Organização, cliente ou escopo ativo exibido no cabeçalho; não cria ação nem seletor. |
+| `client` | `TopNavClient` | Organização, cliente ou escopo ativo exibido no cabeçalho e como contexto do usuário no rodapé do Drawer; não cria ação nem seletor. |
 | `user` | `TopNavUser` | Dados exclusivamente visuais do usuário. |
 | `userMenuItems` | `TopNavUserMenuItem[]` | Opções emitidas por `user-action`; suporta separadores. |
 | `favoriteItems` | `TopNavItem[]` / `[]` | Favoritos fornecidos pelo pai para dropdown e Drawer. |
@@ -304,7 +305,7 @@ atalho abre primeiro o Drawer e foca a busca móvel. `Escape` fecha os painéis.
 | `drawer-actions` | Ações; recebe `{ actions, select, close }`. |
 | `drawer-before-menu`, `drawer-after-menu` | Conteúdo antes/depois do trilho rolável. |
 | `drawer-menu` | Substitui a árvore; recebe `{ sections, select, close }`. |
-| `drawer-user` | Rodapé de usuário; recebe `{ user, open, toggle }`. |
+| `drawer-user` | Rodapé de usuário; recebe `{ user, client, open, toggle }`. |
 | `drawer-footer` | Conteúdo final adicional; recebe `{ close }`. |
 
 ### Faixa de favoritos
@@ -382,7 +383,9 @@ quiser controlar exatamente o que permanece visível.
 
 Abaixo de `1024px`, a navegação desktop desaparece e o Drawer do PrimeVue assume.
 Ele mantém cabeçalho, busca, ações, trilho translúcido rolável, árvore recursiva,
-favoritos e usuário. A transição `menu-expand` existe somente dentro do Drawer;
+favoritos e usuário. No rodapé, a foto e o nome do usuário formam a primeira
+linha; o cliente atual aparece abaixo e o subtítulo do cliente recebe uma
+etiqueta quando houver. A transição `menu-expand` existe somente dentro do Drawer;
 os dropdowns desktop abrem sem animação e suas áreas de hover incluem o espaço
 entre gatilho e painel. Nessa largura, os breadcrumbs deixam de rolar
 horizontalmente: eles quebram em linhas e o bloco da página atual ocupa sua
@@ -614,7 +617,95 @@ MIME (`image/*`), separados por vírgula. `maxFileSize` é contado em bytes. Em
 modo simples, a última seleção válida substitui a anterior; com `multiple`,
 arquivos válidos são acumulados sem duplicar nome, tipo e tamanho.
 
-## TopInputText
+## TopInputNumber
+
+Campo numérico baseado no `InputNumber` do PrimeVue, com a mesma estrutura de
+label, erro e acessibilidade dos demais campos. Por padrão usa `pt-BR`. No modo
+`decimal`, o usuário informa explicitamente o separador decimal; no modo
+`currency`, a máscara de centavos vem habilitada e transforma `12345` em
+`R$ 123,45`. O `v-model` permanece sempre numérico (`number`) ou `null` quando
+vazio.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TopInputNumber } from '@topjoao/top-design-system'
+
+const quantidade = ref<number | null>(null)
+const valorUnitario = ref<number | null>(null)
+</script>
+
+<template>
+  <TopInputNumber
+    v-model="quantidade"
+    label="Quantidade"
+    :min="1"
+    :min-fraction-digits="2"
+    :max-fraction-digits="4"
+    required
+  />
+
+  <TopInputNumber
+    v-model="valorUnitario"
+    label="Valor unitário"
+    mode="currency"
+    currency="BRL"
+    :min-fraction-digits="2"
+    :max-fraction-digits="2"
+  />
+</template>
+```
+
+| Prop | Tipo | Padrão | Finalidade |
+|---|---|---|---|
+| `modelValue` | `number \| null` | `null` | Valor numérico controlado. |
+| `label` / `placeholder` | `string` | `''` / `''` | Rótulo e texto auxiliar do campo. |
+| `required` | `boolean` | `false` | Asterisco visual e atributo nativo obrigatório. |
+| `error` | `string` | `''` | Mensagem e estado inválido. |
+| `invalid` | `boolean` | `false` | Força estado inválido sem mostrar mensagem. |
+| `disabled` / `readonly` | `boolean` | `false` / `false` | Remove interação / preserva leitura sem desabilitar. |
+| `locale` | `string` | `'pt-BR'` | Locale para separadores e moeda. |
+| `mode` | `'decimal' \| 'currency'` | `'decimal'` | Formatação decimal ou monetária. |
+| `currency` / `currencyDisplay` | `string` / `'symbol' \| 'code' \| 'name'` | `undefined` / `'symbol'` | Código ISO 4217 e modo de exibição da moeda. |
+| `currencyInputMode` | `'decimal' \| 'cents'` | `'cents'` | Controla a entrada monetária; `decimal` desliga a máscara mesmo quando `cents` é `true`. Não afeta `mode="decimal"`. |
+| `cents` | `boolean` | `true` | Habilita a máscara automática somente em `mode="currency"`; `false` usa o `InputNumber` padrão. |
+| `centsFractionDigits` | `number` | `undefined` (efetivo: `2`) | Primeira opção para definir as casas da máscara monetária. |
+| `currencyFractionDigits` | `number` | `undefined` | Fallback de casas da máscara, usado depois de `centsFractionDigits`. |
+| `useGrouping` / `format` | `boolean` | `true` / `true` | Separadores de milhar e formatação do valor. |
+| `minFractionDigits` / `maxFractionDigits` | `number` | `undefined` | Precisão do PrimeVue. Sem `maxFractionDigits`, o modo decimal aceita até 20 casas; a máscara monetária usa esse valor como último fallback antes de `2`. |
+| `min` / `max` / `step` | `number` | `undefined` / `undefined` / `1` | Limites e passo dos botões/teclado. |
+| `showButtons` / `buttonLayout` | `boolean` / `'stacked' \| 'horizontal' \| 'vertical'` | `false` / `'stacked'` | Exibe e organiza os controles de incremento. |
+| `allowEmpty` / `showClear` / `highlightOnFocus` | `boolean` | `true` / `false` / `false` | Permite limpar, mostra ícone de limpeza e seleciona valor ao focar. |
+
+Eventos: `update:modelValue` (`number | null`), `input`, `focus` e `blur`. No
+fluxo padrão do `InputNumber`, o componente também repassa `value-change`.
+Atributos adicionais, como `name`, `autocomplete`, `aria-*` e `data-*`, são
+repassados ao controle interno.
+
+Quando a máscara de centavos não está ativa, os slots do `InputNumber` também
+são repassados: `incrementbutton` e
+`decrementbutton` recebem `{ listeners }`; `incrementicon` e `decrementicon`
+substituem os ícones; `clearicon` recebe `{ clearCallback }`.
+
+Para reproduzir a digitação monetária do TopLicita, a máscara de centavos já
+vem ativa em `mode="currency"`. O usuário digita somente dígitos: `12345`
+resulta em `R$ 123,45` e o `v-model` recebe `123.45`. Para exigir a vírgula
+decimal digitada pelo usuário, passe `:cents="false"` ou
+`currency-input-mode="decimal"`.
+Como a máscara controla o texto enquanto o usuário digita, nesse modo os
+botões incrementais, o ícone de limpeza e seus slots do `InputNumber` não são
+renderizados.
+
+```vue
+<TopInputNumber
+  v-model="valorUnitario"
+  label="Valor unitário"
+  mode="currency"
+  currency="BRL"
+/>
+```
+
+## TopInputText
 
 Campo textual baseado no `InputText` do PrimeVue. O `v-model` é sempre
 `string`, inclusive para códigos, documentos e identificadores compostos
@@ -863,6 +954,10 @@ import {
   type TopDatePickerValue,
   type TopFileUploadError,
   type TopFileUploadValue,
+  type TopInputNumberValue,
+  type TopInputNumberMode,
+  type TopInputNumberButtonLayout,
+  type TopInputNumberCurrencyInputMode,
   type TopNavItem,
   type TopNavSection,
   type TopTabItem,
@@ -878,7 +973,11 @@ obrigatório. `TopNavAction`, `TopNavUser`, `TopNavClient` e
 `TopNavBarColors`, `TopNavBarSurfaces`, `TopNavBarBorders`, `TopNavBarShape` e
 `TopNavBarFocus`.
 
-`colors` expõe as escalas imutáveis `primary`, `secondary`, `success`, `warn` e
+`TopInputNumberValue`, `TopInputNumberMode`, `TopInputNumberButtonLayout` e
+`TopInputNumberCurrencyInputMode`
+tipam, respectivamente, o valor, o modo de formatação, o layout dos botões e o
+modo de entrada monetária do campo numérico. `colors` expõe as escalas
+imutáveis `primary`, `secondary`, `success`, `warn` e
 `danger`, cada uma com tons de `50` a `950`.
 
 ## Desenvolvimento da biblioteca
@@ -907,7 +1006,7 @@ npm run storybook
 ```
 
 Abra `http://localhost:6006` para acessar as histórias de `TopButton`,
-`TopConfirmDialog`, `TopDatePicker`, `TopInputText`, `TopSelect` e `TopTabs`. Use o botão de
+`TopConfirmDialog`, `TopDatePicker`, `TopInputText`, `TopInputNumber`, `TopSelect` e `TopTabs`. Use o botão de
 contraste na barra superior para alternar o preview entre tema claro e escuro.
 Para gerar a versão estática da documentação, execute: