@comercti/global-header-vue

Componente de header global para aplicações Vue 3.

Instalação

npm install @comercti/global-header-vue

Uso Básico

<template>
  <GlobalHeader
    :showHomeButton="true"
    :userServicesState="userServicesState"
    :userProfileMenuConfig="userProfileConfig"
  >
    <template #action-buttons>
      <button
        class="gh:flex gh:h-9 gh:w-10 gh:shrink-0 gh:cursor-pointer gh:flex-col gh:items-center gh:justify-center gh:p-2"
        title="Notificações"
      >
        <!-- Ícone de notificação -->
      </button>
    </template>
  </GlobalHeader>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GlobalHeader } from '@comercti/global-header-vue'
import type { UserServicesState, UserProfileMenuConfig } from '@comercti/global-header-vue'

// Estado dos serviços do usuário
const userServicesState = ref<UserServicesState>({
  services: [
    {
      active: true,
      display_name: 'Mercado Livre de Energia',
      url: 'https://powerview.comerc.com.br/',
      _id: '0',
    },
    {
      active: true,
      display_name: 'Telemetria',
      url: 'https://www.comerc.com.br/eficiencia-energetica#telemetria',
      _id: '1',
    },
    {
      active: true,
      display_name: 'Assinatura de Energia Solar',
      url: 'https://www.comerc.com.br/energia-solar',
      _id: '2',
    },
  ],
  loading: false,
  error: false,
})

// Configuração do menu do usuário
const userProfileConfig: UserProfileMenuConfig = {
  userName: 'João Silva',
  userEmail: '[email protected]',
  myAccountLink: {
    show: true,
    url: '/minha-conta',
  },
  onLogout: () => {
    // Implementar logout da aplicação
    console.log('Fazendo logout...')
  },
}
</script>

Props

GlobalHeaderProps

| Prop | Tipo | Padrão | Descrição | | ----------------------- | ----------------------- | ------------------------------------------------ | ----------------------------------------- | | showHomeButton | boolean | true | Exibe o botão de home | | userServicesState | UserServicesState | { services: [], loading: false, error: false } | Estado dos serviços do usuário | | userProfileMenuConfig | UserProfileMenuConfig | Configuração padrão | Configuração do menu do perfil do usuário |

Slots

action-buttons

Slot para adicionar botões de ação personalizados na área direita do header, como notificações ou outros controles.

<template>
  <GlobalHeader>
    <template #action-buttons>
      <button title="Notificações">
        <!-- Ícone de notificação -->
      </button>
      <button title="Configurações">
        <!-- Ícone de configurações -->
      </button>
    </template>
  </GlobalHeader>
</template>

Tipos

UserServicesState

interface UserServicesState {
  services: UserServicesItem[]
  loading: boolean
  error?: boolean
}

UserServicesItem

interface UserServicesItem {
  active: boolean
  display_name: string
  icon?: string
  url: string
  _id: string
}

UserProfileMenuConfig

interface UserProfileMenuConfig {
  userName: string
  userEmail: string
  myAccountLink: {
    show: boolean
    url?: string
  }
  onLogout: () => void
}

SolutionsMegaMenuConfig

interface SolutionsMegaMenuConfig {
  columns: SolutionsMegaMenuColumn[]
}

interface SolutionsMegaMenuColumn {
  title: string
  items: SolutionsMegaMenuItem[]
}

interface SolutionsMegaMenuItem {
  id: string
  title: string
  description?: string
  displayDescription?: boolean
  url: string
  icon?: IconName
}

Funcionalidades

• Responsivo: Adapta-se automaticamente para dispositivos móveis
• Mega Menu: Menu de soluções com layout em colunas
• Dropdown de Serviços: Lista os serviços disponíveis para o usuário com estados de loading e tratamento de erros
• Menu do Usuário: Acesso ao perfil e logout
• Slots Personalizáveis: Adicione botões de ação customizados

Styling

O componente utiliza Tailwind CSS internamente e não requer configuração adicional no projeto consumidor. Os estilos são automaticamente incluídos quando o componente é importado.

Compatibilidade

• Vue: 3.5.0+
• Node.js: 18+
• TypeScript: 5.0+

Tipos TypeScript

A biblioteca exporta todos os tipos necessários para uso com TypeScript:

import type {
  GlobalHeaderProps,
  UserServicesItem,
  UserServicesState,
  UserProfileMenuConfig,
  SolutionsMegaMenuConfig,
  SolutionsMegaMenuColumn,
  SolutionsMegaMenuItem,
} from '@comercti/global-header-vue'

Configuração Padrão

O componente vem com uma configuração padrão para o mega menu de soluções. Você pode importar e usar as constantes:

import { defaultSolutions } from '@comercti/global-header-vue'

Troubleshooting

Problemas Comuns

1. Componente não renderiza: Verifique se o Vue 3 está instalado e configurado corretamente
2. Estilos não aplicados: Os estilos são injetados automaticamente, não é necessário importar CSS adicional
3. Tipos TypeScript: Certifique-se de importar os tipos corretos do pacote

Suporte

Para reportar problemas ou sugestões, entre em contato com a equipe de desenvolvimento do Powerview.

Desenvolvimento

Scripts Disponíveis

# Desenvolvimento
npm run dev              # Servidor de desenvolvimento
npm run build            # Build para produção
npm run preview          # Preview da build

# Testes e qualidade
npm run test             # Executar testes
npm run lint             # Linting
npm run format           # Formatação

# Versionamento e Release
npm run commit           # Commit padronizado (commitizen)
npm run release          # Gera nova versão + changelog
npm run release:dry      # Preview da próxima versão
npm run publish:release  # Release + push + publish no npm (apenas na main)

Fluxo de Release

Para mudanças que afetam consumidores (features, fixes, etc.):

git add .
npm run commit           # Commit padronizado
npm run publish:release  # Release completo automatizado

Para mudanças internas (docs, tooling, etc.):

git add .
npm run commit           # Ex: chore -> "update build tools"
npm run release          # Versiona localmente
git push --follow-tags   # Push sem publicar no npm

📖 Guia completo: docs/VERSIONING_GUIDE.md

Licença

Este projeto é propriedade da ComercTI.