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

package/README.md

@@ -106,10 +106,104 @@ 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.
-
-## 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.
+
+## 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
 
 Exemplo