@topjoao/top-design-system 0.1.0-beta.17 → 0.1.0-beta.19

package/README.md

@@ -106,112 +106,18 @@ import App from './App.vue'
 createApp(App).use(TopSolutionsDesignSystem).mount('#app')
 ```
 
-Após o registro, os componentes podem ser utilizados sem importação manual. A
-entrada `/plugin` também fornece as declarações globais usadas pela IDE.
-
-## TopNavBar
-
-Barra de navegação corporativa com breadcrumbs, menu hierárquico, busca e
-ações opcionais. A aplicação consumidora fornece os dados do menu, define a
-página ativa e decide o que acontece em cada evento.
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TopNavBar, type TopNavItem } from '@topjoao/top-design-system'
-
-const clienteAtual = ref('prefeitura-a')
-
-const secoes = [
-  {
-    id: 'planejamento',
-    label: 'Planejamento',
-    icon: 'pi pi-book',
-    children: [
-      {
-        id: 'programacao',
-        label: 'Programação',
-        children: [
-          { id: 'calendario', label: 'Calendário', to: '/programacao/calendario' },
-        ],
-      },
-    ],
-  },
-]
-
-function navegar(item: TopNavItem) {
-  // Ex.: router.push(item.to)
-}
-
-function buscarNoMenu(query: string) {
-  // Filtre ou consulte os itens permitidos para este usuário.
-}
-
-function alternarAssistente() {}
-function abrirSuporte() {}
-</script>
-
-<template>
-  <TopNavBar
-    :sections="secoes"
-    active-item-id="calendario"
-    searchable
-    show-aia
-    show-support
-    @navigate="navegar"
-    @search="buscarNoMenu"
-    @toggle-aia="alternarAssistente"
-    @open-support="abrirSuporte"
-  >
-    <template #brand>
-      <img src="/logo.svg" alt="Minha organização">
-    </template>
-
-    <template #context>
-      <select v-model="clienteAtual" aria-label="Cliente atual">
-        <option value="prefeitura-a">Prefeitura A</option>
-        <option value="prefeitura-b">Prefeitura B</option>
-      </select>
-    </template>
-  </TopNavBar>
-</template>
-```
-
-`activeItemId` gera automaticamente o breadcrumb da página ativa, incluindo os
-ancestrais e dropdowns de cada nível. Por exemplo, um item `calendario` dentro
-de `Programação` em `Planejamento` resulta em `Início / Navegação /
-Planejamento / Programação / Calendário`.
-
-Para personalizar a aparência, use nomes orientados ao que é exibido: `textColor`
-para textos e ícones principais, `mutedTextColor` para detalhes secundários,
-`menuTextColor` para o conteúdo dos dropdowns, além de `headerBackground`,
-`breadcrumbBackground`, `menuBackground`, `accentColor`, `borderColor`, `radius`
-e `height`.
-
-| Slot | Uso |
-|---|---|
-| `brand` | Marca, logo ou nome do sistema. |
-| `context` | Contexto de operação: cliente, órgão, ambiente, exercício ou escopo. |
-| `actions` | Ações adicionais à direita da barra. |
-| `user-menu` | Conteúdo adicional ou substituto para a área de usuário. |
-| `search-results` | Apresentação personalizada dos resultados da busca. |
-| `breadcrumb-actions` | Ações junto à página atual, como favoritos. |
-| `mobile-footer` | Conteúdo adicional no menu mobile. |
-
-Eventos: `navigate`, `search`, `toggle-aia`, `open-support`,
-`toggle-favorite` e `user-action`. A barra não navega, persiste estado ou chama
-serviços por conta própria. Quando `searchable` está ativo, `Ctrl+K` (ou `⌘K`
-no macOS) move o foco para a pesquisa; `Escape` fecha o painel de busca.
-
-## TopButton
+Após o registro, os componentes podem ser utilizados sem importação manual. A
+entrada `/plugin` também fornece as declarações globais usadas pela IDE.
+
+## TopButton
 
 Exemplo 
 
 ```vue
 <template>
-  <TopButton label="Salvar" icon="pi pi-save" @click="salvar" />
-  <TopButton label="Cancelar" secondary />
-  <TopButton label="Excluir" severity="danger" />
+  <TopButton label="Salvar" icon="pi pi-save" @click="salvar" />
+  <TopButton label="Cancelar" secondary />
+  <TopButton label="Excluir" severity="danger" />
 
   <TopButton label="Consultar" outlined>
     <template #icon>
@@ -229,15 +135,15 @@ Exemplo
 | `icon` | `string` | `''` |
 | `loading` | `boolean` | `false` |
 | `class` | `string` | `''` |
-| `outlined` | `boolean` | `false` |
-| `severity` | `'primary' \| 'secondary' \| 'success' \| 'warn' \| 'danger'` | `'primary'` |
-| `secondary` | `boolean` | `false` |
+| `outlined` | `boolean` | `false` |
+| `severity` | `'primary' \| 'secondary' \| 'success' \| 'warn' \| 'danger'` | `'primary'` |
+| `secondary` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `unstyled` | `boolean` | `false` |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
 
-O componente emite `click` sem payload e oferece o slot nomeado `icon`.
-`secondary` permanece como atalho compatível para `severity="secondary"`.
+O componente emite `click` sem payload e oferece o slot nomeado `icon`.
+`secondary` permanece como atalho compatível para `severity="secondary"`.
 
 ## TopConfirmDialog
 
@@ -286,76 +192,76 @@ não fecha automaticamente o diálogo, permitindo que a aplicação aguarde uma
 operação assíncrona. Os slots `message` e default permitem substituir a mensagem
 textual.
 
-## TopDatePicker
-
-Seletor de datas baseado no `DatePicker` do PrimeVue. O valor permanece como
-`Date` (ou arrays de `Date` nos modos `multiple` e `range`); `dateFormat` altera
-somente a apresentação no campo e não converte o `v-model` para texto.
-No modo padrão (`single` com `dd/mm/yy`), a digitação recebe automaticamente a
-máscara brasileira `dd/mm/aaaa`.
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TopDatePicker } from '@topjoao/top-design-system'
-
-const dataNascimento = ref<Date | null>(null)
-</script>
-
-<template>
-  <TopDatePicker
-    v-model="dataNascimento"
-    label="Data de nascimento"
-    placeholder="Selecione a data"
-    :max-date="new Date()"
-    required
-    error="Informe uma data válida."
-    @date-select="validarData"
-  />
-</template>
-```
-
-| Prop | Tipo | Padrão |
-|---|---|---|
-| `modelValue` | `Date \| Date[] \| (Date \| null)[] \| null` | `null` |
-| `label` | `string` | `''` |
-| `placeholder` | `string` | `'dd/mm/aaaa'` |
-| `required` | `boolean` | `false` |
-| `error` | `string` | `''` |
-| `invalid` | `boolean` | `false` |
-| `disabled` | `boolean` | `false` |
-| `readonly` | `boolean` | `false` |
-| `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` |
-| `dateFormat` | `string` | `'dd/mm/yy'` |
-| `minDate` / `maxDate` | `Date` | `undefined` |
-| `showIcon` | `boolean` | `true` |
-| `iconDisplay` | `'button' \| 'input'` | `'input'` |
-| `manualInput` | `boolean` | `true` |
-| `showButtonBar` | `boolean` | `false` |
-| `appendTo` | `'body' \| 'self' \| HTMLElement` | `'body'` |
-
-Eventos: `update:modelValue`, `input`, `change`, `date-select`, `show`, `hide`,
-`today-click`, `clear-click`, `month-change`, `year-change`, `focus`, `blur` e
-`keydown`. Os slots do `DatePicker` do PrimeVue são repassados pelo wrapper,
-incluindo `date`, `header`, `footer`, `buttonbar`, `inputicon`, `dropdownicon`,
-`previcon` e `nexticon`.
-
-`required` adiciona o atributo nativo e o asterisco visual; a validação continua
-sob responsabilidade da aplicação. `error` ativa o estado inválido, associa a
-mensagem ao input com atributos ARIA e a exibe abaixo do campo. `readonly`
-impede edição e seleção sem desabilitar o controle, enquanto `disabled` remove a
-interação. No modo escuro, o campo usa os tokens públicos `--top-field-*`.
-
-## TopFileUpload
-
-Seletor de arquivos baseado no `FileUpload` do PrimeVue. O componente valida e
-apresenta os arquivos, mas não os envia: a aplicação consumidora controla o
-upload por `v-model` e pelos eventos.
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TopFileUpload } from '@topjoao/top-design-system'
+## TopDatePicker
+
+Seletor de datas baseado no `DatePicker` do PrimeVue. O valor permanece como
+`Date` (ou arrays de `Date` nos modos `multiple` e `range`); `dateFormat` altera
+somente a apresentação no campo e não converte o `v-model` para texto.
+No modo padrão (`single` com `dd/mm/yy`), a digitação recebe automaticamente a
+máscara brasileira `dd/mm/aaaa`.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TopDatePicker } from '@topjoao/top-design-system'
+
+const dataNascimento = ref<Date | null>(null)
+</script>
+
+<template>
+  <TopDatePicker
+    v-model="dataNascimento"
+    label="Data de nascimento"
+    placeholder="Selecione a data"
+    :max-date="new Date()"
+    required
+    error="Informe uma data válida."
+    @date-select="validarData"
+  />
+</template>
+```
+
+| Prop | Tipo | Padrão |
+|---|---|---|
+| `modelValue` | `Date \| Date[] \| (Date \| null)[] \| null` | `null` |
+| `label` | `string` | `''` |
+| `placeholder` | `string` | `'dd/mm/aaaa'` |
+| `required` | `boolean` | `false` |
+| `error` | `string` | `''` |
+| `invalid` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `readonly` | `boolean` | `false` |
+| `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` |
+| `dateFormat` | `string` | `'dd/mm/yy'` |
+| `minDate` / `maxDate` | `Date` | `undefined` |
+| `showIcon` | `boolean` | `true` |
+| `iconDisplay` | `'button' \| 'input'` | `'input'` |
+| `manualInput` | `boolean` | `true` |
+| `showButtonBar` | `boolean` | `false` |
+| `appendTo` | `'body' \| 'self' \| HTMLElement` | `'body'` |
+
+Eventos: `update:modelValue`, `input`, `change`, `date-select`, `show`, `hide`,
+`today-click`, `clear-click`, `month-change`, `year-change`, `focus`, `blur` e
+`keydown`. Os slots do `DatePicker` do PrimeVue são repassados pelo wrapper,
+incluindo `date`, `header`, `footer`, `buttonbar`, `inputicon`, `dropdownicon`,
+`previcon` e `nexticon`.
+
+`required` adiciona o atributo nativo e o asterisco visual; a validação continua
+sob responsabilidade da aplicação. `error` ativa o estado inválido, associa a
+mensagem ao input com atributos ARIA e a exibe abaixo do campo. `readonly`
+impede edição e seleção sem desabilitar o controle, enquanto `disabled` remove a
+interação. No modo escuro, o campo usa os tokens públicos `--top-field-*`.
+
+## TopFileUpload
+
+Seletor de arquivos baseado no `FileUpload` do PrimeVue. O componente valida e
+apresenta os arquivos, mas não os envia: a aplicação consumidora controla o
+upload por `v-model` e pelos eventos.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TopFileUpload } from '@topjoao/top-design-system'
 
 const anexos = ref<File[]>([])
 
@@ -372,15 +278,15 @@ function enviarArquivos(files: File[]) {
     multiple
     :max-file-size="5 * 1024 * 1024"
     :max-files="5"
-    required
-    @select="enviarArquivos"
-  />
+    required
+    @select="enviarArquivos"
+  />
 </template>
 ```
 
 | Prop | Tipo | Padrão |
 |---|---|---|
-| `modelValue` | `File \| File[] \| null` | `null` |
+| `modelValue` | `File \| File[] \| null` | `null` |
 | `label` | `string` | `''` |
 | `placeholder` | `string` | `'Arraste e solte o arquivo aqui'` |
 | `required` | `boolean` | `false` |
@@ -397,8 +303,8 @@ function enviarArquivos(files: File[]) {
 Eventos: `update:modelValue`, `select`, `change`, `remove`, `clear` e `error`.
 Erros de tipo, tamanho e quantidade possuem `code`, `message` e o `file`
 relacionado. Os slots `empty` e `preview` permitem customizar a área vazia e a
-pré-visualização. Os métodos `choose()` e `clear()` ficam disponíveis pela ref
-do componente.
+pré-visualização. Os métodos `choose()` e `clear()` ficam disponíveis pela ref
+do componente.
 
 ## TopInputText
 
@@ -507,6 +413,59 @@ O texto das opções é limitado visualmente pela largura disponível do painel,
 sem corte por quantidade fixa de caracteres; o tooltip padrão exibe o valor
 completo quando `showTooltip` está ativo.
 
+## TopTabs
+
+Navegação em abas baseada em `Tabs`, `TabList`, `Tab`, `TabPanels` e `TabPanel`
+do PrimeVue, com estrutura simplificada e estilos dos temas claro e escuro do
+Design System.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  TopTabs,
+  type TopTabItem,
+  type TopTabValue,
+} from '@topjoao/top-design-system'
+
+const activeTab = ref<TopTabValue>('dados')
+const tabs: TopTabItem[] = [
+  { value: 'dados', label: 'Dados' },
+  { value: 'documentos', label: 'Documentos' },
+  { value: 'auditoria', label: 'Auditoria', disabled: true },
+]
+</script>
+
+<template>
+  <TopTabs v-model="activeTab" :tabs="tabs">
+    <template #dados>
+      Dados gerais do processo
+    </template>
+
+    <template #documentos>
+      Documentos anexados
+    </template>
+
+    <template #auditoria>
+      Histórico de auditoria
+    </template>
+  </TopTabs>
+</template>
+```
+
+| Prop | Tipo | Padrão |
+|---|---|---|
+| `modelValue` | `string \| number` | obrigatório |
+| `tabs` | `TopTabItem[]` | obrigatório |
+| `lazy` | `boolean` | `false` |
+| `scrollable` | `boolean` | `true` |
+
+Cada `TopTabItem` possui `value`, `label` e `disabled?`. O `value` deve ser
+único e identifica tanto a seleção quanto o slot do painel; por exemplo,
+`value: 'documentos'` utiliza `#documentos`. Cada slot recebe `tab` e `active`.
+O componente emite somente `update:modelValue`. Atributos adicionais, incluindo
+as opções de passthrough do PrimeVue, são repassados ao componente `Tabs`.
+
 ## Desenvolvimento da biblioteca
 
 ```bash
@@ -533,7 +492,7 @@ npm run storybook
 ```
 
 Abra `http://localhost:6006` para acessar as histórias de `TopButton`,
-`TopConfirmDialog`, `TopDatePicker`, `TopInputText` e `TopSelect`. Use o botão de
+`TopConfirmDialog`, `TopDatePicker`, `TopInputText`, `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: