Chassi (MeLayout)
Toda tela interna do ME nasce no mesmo shell — o block MeLayout. Ele expõe slots, e cada tipo de tela preenche só os que usa; por isso Index, Documento, Dashboard e Formulário parecem da mesma família.
Anatomia
Os slots do MeLayout, na ordem de composição da tela:
(sidebar)
(carrinho / msg)
#header
App bar do ME — barra azul me-brand full-width: marca "me." branca à esquerda, navegação principal HORIZONTAL no topo, transversais + avatar à direita. É aqui que fica o menu de áreas — nunca numa sidebar.
#nav-area
Rail lateral estreito (5.5rem), opcional — atalhos por etapa/rodada (ex.: Cotação). NÃO é o menu principal de áreas (esse é horizontal, no #header).
#toolbar
Subheader — CTA, busca, filtros e ações da tela.
#left-area
Rail esquerdo — hoje sempre com Sidebar dentro.
#analytics
Gráficos gerados das colunas da tabela (index).
#default
Conteúdo principal da tela.
#right-area
Rail direito — Carrinho ou Mensagens (um por vez).
#footer
Rodapé — só em tablet/mobile.
Regras
Invariantes do chassi — valem em qualquer tela.
#right-area = Carrinho ou Mensagens
Um por vez: ativar um troca o conteúdo do outro; nunca abrem juntos. Pode receber outro contexto que faça sentido ao documento.
#footer só em tablet/mobile
Junto do favicon; no mobile/tablet o header vira a versão mobile.
Modal nunca mostra o #header
Detalhe de documento abre em modal (e expande); index abre em modal para seleção (item, fornecedor, contrato).
Anexos abrem em drawer
Por cima do conteúdo. Outros detalhes também podem, sob especificação do usuário.
Navegação principal é HORIZONTAL no #header
O menu de áreas (Dashboard, Transações, Fornecedores, Catálogos, Usuários) fica na app bar azul, no topo — nunca vira rail/sidebar de ícones à esquerda.
#nav-area (rail lateral) é opcional
Entra por necessidade — ex.: documentos com rodadas/etapas (Cotação). É atalho, não o menu principal de áreas.
Projeto externo pode dispensar o chassi
Fora do E-PROC, mantendo a identidade ME (marca, tokens, voz). Confirme com o usuário.
Matriz
Quais slots cada tipo de tela usa.
| Slot | Index | Documento | Dashboard | Config gerais | Formulário |
|---|---|---|---|---|---|
#header | |||||
#nav-area | |||||
#toolbar | |||||
#left-area | |||||
#analytics | |||||
#default | |||||
#right-area | |||||
#footer |
Notas
- Index —
#analytics= gráficos das colunas; view modes: tabela · lista · card · preview. - Documento —
#nav-areaaparece em docs com rodadas/etapas (ex.: Cotação). - Dashboard —
#toolbarcom abas + botão "mais" + "mais ações". - Config gerais — sem
#toolbar; usa#left-area(sidebar de seções). - #footer — só em tablet/mobile.
Responsividade
Abaixo de lg, os rails viram slideover e o footer aparece.
Desktop (≥ lg)
Rails (nav / left / right) ficam inline na linha; footer oculto. App bar AZUL me-brand, logo "me." branca.
Tablet / mobile (< lg)
Os rails viram slideover; o footer aparece; favicon + header na versão mobile.
App bar mobile é BRANCO (não azul)
No mobile a app bar vira bg-background: hambúrguer à esquerda da logo azul/primary (a marca branca sumiria no claro), lupa (busca sob demanda), transversais e avatar como ícones escuros. A navbar inferior segue AZUL e o CTA primário vira FAB. Header claro no desktop = erro; no mobile = correto.