Compositor E-PROC

Opções

Habilitar fluxoLimpar

Projeto

Interno — E-PROC

Tipo de tela

Index (listagem)

Tipo de Index

Transações

Alvo (stack)

EletroDS + Nuxt

Tipo de prompt

Estruturado — gera a tela

Cria a tela inteira do zero a partir do gabarito. Saída: a TELA pronta para visualizar/rodar. É o prompt mais completo.

Entidade ou assunto da tela

Descreva a tela

Estrutura da tela

Tipo de layout

EletroDS (MeLayout)Header · Toolbar · Nav · Main · Right · Footer

Header

Toolbar

Nav-area

Left-area

Main

Right-area

Footer

Fonte do produto (PDD / ticket) — opcional

Afinar detalhes da tela (opcional)

Seu prompt no padrão ME

Copiar

CONTEXTO Você é um(a) engenheiro(a) de front-end do ME. Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME). ALVO (STACK) — EletroDS + Nuxt - Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide. - Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima. - Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens. - Saída: um componente Vue (Composition API). TAREFA Gere a tela de index de transações do zero, seguindo o PADRÃO ME abaixo. PADRÃO ME — Estrutura de Index A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado. Anatomia, nesta ordem: Header · Subheader (título + CTA primário) · Filter bar · Área de dados (tabela | cards | lista de foreheads). Componentes obrigatórios: Header (block EletroDS), Subheader (block EletroDS — CTA, busca, filtros), barra de filtros: MeFilterBar se existir no projeto, senão componha com Subheader + MeCriterionInput, TableView · CardView · ListView (blocks EletroDS; na view lista cada registro é um MeForehead empilhado), MeButtonBar (ações + “Mais ações”), UBadge (Nuxt UI — status). Status como UBadge semântico: Pendente/Em análise/Em aprovação/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. Layout: EletroDS (MeLayout). Estrutura: Header, Toolbar, Left-area, Main, Right-area, Footer. Header — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente MeHeader (ativo=Transações, navItens=[{"l":"Dashboard","i":"layout-dashboard","u":"#"},{"l":"Transações","i":"file-input","u":"#"},{"l":"Fornecedores","i":"store","u":"#"},{"l":"Catálogos","i":"shopping-bag","u":"#"},{"l":"Usuários","i":"users","u":"#"},{"l":"Mais","i":"ellipsis"}], transversais=Mensagens, Genius, Carrinho, menuUsuario=Meu perfil, Idioma, Substituição, Configurações, Novidades e Atualizações, Sair, headerMaisItens=Compras, Fornecedores, Configurações, brandBg=Azul ME (padrão), brandIconColor=Branco (padrão), msgBadge=10, cartBadge=60, userNome=Marina Lopes, sigla=ML, cargo=Compradora) Header — seção ativa: Transações. Toolbar — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente MeSubheader (variant=primary, toggleSidebar=true, createActions.label=«Ação principal (campo da tela)», createActions.icon=plus, createActions.items=«Opções do botão split (campo da tela)», buttonBar.actions=«Ações da tela (campo da tela)», search.placeholder=«Filter Search — busca (campo da tela)», toggleChart=«state.viewAtiva === "tabela"», gridMode.icon=«state.viewAtiva === "tabela" ? "table-2" : state.viewAtiva === "lista" ? "list" : state.viewAtiva === "cards" ? "layout-grid" : state.viewAtiva === "preview" ? "panel-right" : "table-2"», gridMode.items=«Views disponíveis (campo da tela)») Left-area — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente Menu lateral do index (composição: busca + tabs-âncora + collapsibles com lista/faceta/árvore/slider) (contexto=Transações, contextoState=contexto) Main — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente UModal (openState=modalColunas, title=Editar colunas, description=Escolha e ordene as colunas exibidas na grid., size=lg) { Componente MeDualList (itens=«Colunas (campo da tela)», leftBoxLabel=Colunas disponíveis, rightBoxLabel=Colunas exibidas, draggable=true) · footer: Componente UButton (label=Cancelar, color=neutral, variant=ghost); Componente UButton (label=Aplicar, color=primary, variant=solid) }; Componente UModal (openState=modalExportar, title=Exportar, description=Escolha o formato e o que será exportado.) { Componente URadioGroup (legend=Formato, itens=Excel (.xlsx), CSV (.csv), PDF (.pdf), orientation=vertical) · Componente UCheckbox (label=Somente os registros selecionados) · footer: Componente UButton (label=Cancelar, color=neutral, variant=ghost); Componente UButton (label=Exportar, color=primary, variant=solid) }; Componente MeTableView (colunas=«Colunas (campo da tela)», selectable=true, acoesLinha=favoritar, mais, acoesLinhaItens=«Ações por linha (campo da tela)», headerBlocos=[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"fill"},"blocos":[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"fill","overflow":"scroll","scrollbar":"hover"},"blocos":[{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount","cfg":{"label":{"$expr":"state.selCount + \" Selecionados\""},"color":"neutral","variant":"outline","size":"sm","class":"h-8 shrink-0"},"on":{"clique":[{"acao":"toggle","alvo":"selAcoes"}]}},{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount && state.selAcoes","cfg":{"label":"Salvar seleção","color":"primary","variant":"link","size":"sm","class":"h-8"},"on":{"clique":[{"acao":"set","alvo":"selecaoSalva","valor":true}]}},{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount && state.selAcoes","cfg":{"label":"Limpar seleção","color":"primary","variant":"link","size":"sm","class":"h-8"},"on":{"clique":[{"acao":"set","alvo":"selecao","valor":{}},{"acao":"set","alvo":"selCount","valor":0},{"acao":"set","alvo":"selAcoes","valor":false}]}},{"tipo":"Componente","comp":"MeFilterBar","visivelSe":"!(state.selCount && state.selAcoes)","cfg":{"campos":"Status, Tipo","class":"min-w-0 flex-1"},"filhos":[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"hug"},"blocos":[{"tipo":"Componente","comp":"UDropdownMenu","cfg":{"align":"start","itens":[{"l":"Todos os processos","acao":"set","alvo":"filtroProcesso","valor":"Todos os processos"},{"l":"Meus processos","acao":"set","alvo":"filtroProcesso","valor":"Meus processos"}]},"filhos":[{"tipo":"Componente","comp":"UButton","cfg":{"label":{"$expr":"state.filtroProcesso || \"Todos os processos\""},"color":"neutral","variant":"outline","size":"sm","trailingIcon":"chevron-down","class":"h-8 shrink-0"}}]},{"tipo":"Componente","comp":"UDropdownMenu","cfg":{"align":"start","itens":[{"l":"Todo período","acao":"set","alvo":"filtroPeriodo","valor":"Todo período"},{"l":"Últimos 15 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 15 dias"},{"l":"Últimos 30 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 30 dias"},{"l":"Últimos 60 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 60 dias"},{"l":"Últimos 90 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 90 dias"}]},"filhos":[{"tipo":"Componente","comp":"UButton","cfg":{"label":{"$expr":"state.filtroPeriodo || \"Todo período\""},"color":"neutral","variant":"outline","size":"sm","trailingIcon":"chevron-down","class":"h-8 shrink-0"}}]}]}]}]},{"tipo":"Componente","comp":"VibeTableMoreMenu","cfg":{"configuracoes":true}}]}], analyticsState=chartOpen); Componente MeCardView (headerBlocos=[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"fill"},"blocos":[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"fill","overflow":"scroll","scrollbar":"hover"},"blocos":[{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount","cfg":{"label":{"$expr":"state.selCount + \" Selecionados\""},"color":"neutral","variant":"outline","size":"sm","class":"h-8 shrink-0"},"on":{"clique":[{"acao":"toggle","alvo":"selAcoes"}]}},{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount && state.selAcoes","cfg":{"label":"Salvar seleção","color":"primary","variant":"link","size":"sm","class":"h-8"},"on":{"clique":[{"acao":"set","alvo":"selecaoSalva","valor":true}]}},{"tipo":"Componente","comp":"UButton","visivelSe":"state.selCount && state.selAcoes","cfg":{"label":"Limpar seleção","color":"primary","variant":"link","size":"sm","class":"h-8"},"on":{"clique":[{"acao":"set","alvo":"selecao","valor":{}},{"acao":"set","alvo":"selCount","valor":0},{"acao":"set","alvo":"selAcoes","valor":false}]}},{"tipo":"Componente","comp":"MeFilterBar","visivelSe":"!(state.selCount && state.selAcoes)","cfg":{"campos":"Status, Tipo","class":"min-w-0 flex-1"},"filhos":[{"tipo":"Bloco (grupo)","sty":{"dir":"row","gap":"2","av":"center","wMode":"hug"},"blocos":[{"tipo":"Componente","comp":"UDropdownMenu","cfg":{"align":"start","itens":[{"l":"Todos os processos","acao":"set","alvo":"filtroProcesso","valor":"Todos os processos"},{"l":"Meus processos","acao":"set","alvo":"filtroProcesso","valor":"Meus processos"}]},"filhos":[{"tipo":"Componente","comp":"UButton","cfg":{"label":{"$expr":"state.filtroProcesso || \"Todos os processos\""},"color":"neutral","variant":"outline","size":"sm","trailingIcon":"chevron-down","class":"h-8 shrink-0"}}]},{"tipo":"Componente","comp":"UDropdownMenu","cfg":{"align":"start","itens":[{"l":"Todo período","acao":"set","alvo":"filtroPeriodo","valor":"Todo período"},{"l":"Últimos 15 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 15 dias"},{"l":"Últimos 30 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 30 dias"},{"l":"Últimos 60 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 60 dias"},{"l":"Últimos 90 dias","acao":"set","alvo":"filtroPeriodo","valor":"Últimos 90 dias"}]},"filhos":[{"tipo":"Componente","comp":"UButton","cfg":{"label":{"$expr":"state.filtroPeriodo || \"Todo período\""},"color":"neutral","variant":"outline","size":"sm","trailingIcon":"chevron-down","class":"h-8 shrink-0"}}]}]}]}]},{"tipo":"Componente","comp":"VibeTableMoreMenu","cfg":{"configuracoes":true}}]}]); Grupo (visível quando: state.viewAtiva === "lista") { Grupo { Grupo { Grupo { Componente UCheckbox (class=w-9 shrink-0 justify-center) · Componente UButton (label=«state.selCount + " Selecionados"», color=neutral, variant=outline, size=sm, class=h-8 shrink-0) · Componente UButton (label=Salvar seleção, color=primary, variant=link, size=sm, class=h-8) · Componente UButton (label=Limpar seleção, color=primary, variant=link, size=sm, class=h-8) · Componente MeFilterBar (campos=Status, Tipo, class=min-w-0 flex-1) { Grupo { Componente UDropdownMenu (align=start, itens=Todos os processos · Meus processos) { Componente UButton (label=«state.filtroProcesso || "Todos os processos"», color=neutral, variant=outline, size=sm, trailingIcon=chevron-down, class=h-8 shrink-0) } · Componente UDropdownMenu (align=start, itens=Todo período · Últimos 15 dias · Últimos 30 dias · Últimos 60 dias · Últimos 90 dias) { Componente UButton (label=«state.filtroPeriodo || "Todo período"», color=neutral, variant=outline, size=sm, trailingIcon=chevron-down, class=h-8 shrink-0) } } } } } } · Divisor (solid) · Componente MeListView }; Grupo (visível quando: state.viewAtiva === "preview") { Grupo { Grupo { Grupo { Componente UCheckbox (class=w-9 shrink-0 justify-center) · Componente UButton (label=«state.selCount + " Selecionados"», color=neutral, variant=outline, size=sm, class=h-8 shrink-0) · Componente UButton (label=Salvar seleção, color=primary, variant=link, size=sm, class=h-8) · Componente UButton (label=Limpar seleção, color=primary, variant=link, size=sm, class=h-8) · Componente MeFilterBar (campos=Status, Tipo, class=min-w-0 flex-1) { Grupo { Componente UDropdownMenu (align=start, itens=Todos os processos · Meus processos) { Componente UButton (label=«state.filtroProcesso || "Todos os processos"», color=neutral, variant=outline, size=sm, trailingIcon=chevron-down, class=h-8 shrink-0) } · Componente UDropdownMenu (align=start, itens=Todo período · Últimos 15 dias · Últimos 30 dias · Últimos 60 dias · Últimos 90 dias) { Componente UButton (label=«state.filtroPeriodo || "Todo período"», color=neutral, variant=outline, size=sm, trailingIcon=chevron-down, class=h-8 shrink-0) } } } } } } · Divisor (solid) · Componente MePreview } Right-area — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente Painel transversal (Mensagens · Genius · Carrinho) na right-area/drawer Footer — layout (o corpo é montado por ÁREAS empilhadas → colunas → peças; reproduza na ordem): • Área 1: Componente MeNavBar (itens=[{"l":"Dashboard","i":"layout-dashboard"},{"l":"Transações","i":"file-input"},{"l":"Fornecedores","i":"store"},{"l":"Catálogos","i":"shopping-bag"}], sitemap=true) Ação principal: Novo documento. A ação primária é um botão split (divide-se em opções por tipo). Opções do botão split: Requisição, Cotação, Pedido, Contrato. Ações da tela: Gerar Pré-Pedido, Gerar Cotação, Cancelar itens (em massa), Excluir selecionados (em massa, abre modal). Ações "em massa" aplicam-se aos itens selecionados (somem/desabilitam sem seleção); "abre modal" confirma num modal/painel antes de executar; as demais rodam inline com toast (destrutivas sempre confirmam). As que não couberem no subheader colapsam em "Mais ações". Sidebar — seções: Pendências [itens: Aprovações | Confirmação | Contratos], Itens [itens: Todos | Não recebidos], Transações [itens: Requisições | Cotações | Pedidos | Contratos | Nota Fiscal], Filtros salvos [itens: Em aberto | Vencendo hoje], Meus links [itens: Portal do comprador | Central de ajuda], Meus widgets [itens: Gastos por mês (gráfico)]. Cada seção da sidebar declara seu tipo de exibição (Lista/Checkbox-faceta/Seleção múltipla/Seleção única/Árvore/Card/Slider) — respeite-o ao montar (ex.: faceta = checkbox com contagem; slider = faixa de dois thumbs). Use exatamente os itens listados em cada seção da sidebar — não misture itens/facetas de outra entidade (ex.: não traga facetas de Fornecedores num index de Transações). Sidebar — switcher de contexto (TROCA os filtros): {Meus X ↔ Y}. Filtros rápidos (select): Processo, Período. Filtros: Status, Tipo. Filter Search — busca por: número, título, solicitante, fornecedor, categoria, responsável. Views disponíveis: tabela, lista, preview. View padrão: tabela. Colunas: Número, Tipo, Solicitante, Departamento, Criado em, Valor, Status. Ações por linha: editar, excluir. ⛔ REPRODUZA O PADRÃO EXATO (não reinterprete) — evite estes desvios recorrentes: (1) Subheader: ações em ghost (NÃO outline), CTA primário à ESQUERDA, SEM botão "Opções", COM botão de gráficos (ícone chart-column, modo tabela); (2) UMA filter bar, SEM checkbox líder no modo tabela (só lista/card), NÃO duplicada; (3) Sidebar: campo de busca no topo + tabs-âncora + seções AGRUPADAS (nunca itens soltos) — tamanhos normais (não encolha itens/tree); (4) SEM padding externo na área de dados (tabela/lista/card/preview ocupam a área inteira); (5) Lista = só checkbox / Preview = avatar; (6) Mensagens·Genius·Carrinho ABREM painel à direita (#right-area/drawer); (7) Mobile: MESMA estrutura do desk, com FAB, nav bar com "Mais", e subheader SEM busca/hambúrguer (foram pro header/FAB); (8) fundo BRANCO (bg-default) nas zonas; scrollbar fina padrão ME. Se algum aparecer, você reinterpretou — corrija antes de entregar. Afordâncias de index: ao clicar numa linha/card, abre o documento em página inteira — o identificador (1ª coluna) é o LINK principal; colunas ordenáveis (chevron no cabeçalho); realce da linha selecionada; paginação com seletor de itens por página no rodapé da área de dados. Busca e filtros: a Filter Search abre por um ícone de funil (overlay com drill-down Critério › Operador › Valor); a Filter Bar rola horizontalmente por baixo do cluster de ações fixo à direita. Sidebar de navegação agrupada (ex.: Pendências · Itens · Transações · Filtros salvos · Meus links), com contagens por grupo — distinta das facetas (Segmento/Localização) de Fornecedores/Catálogo. Faceta de tipo na sidebar (grupo Transações: Requisições/Cotações/Pedidos/Contratos/Nota Fiscal): selecioná-la filtra a lista para só aquele tipo (o número reflete o prefixo — REQ/COT/PED…). Faixa de widgets/gráficos (view "Meus widgets"): grade no desktop; no mobile empilha em 1 coluna full-width e a tela rola até a tabela (área de dados com altura mínima). App bar: ao lado do "Mais" ficam os transversais Mensagens · Genius · Carrinho — o Carrinho é item rotulado e um divisor separa "Mais" dos transversais; o subheader inclui a ação "Enviar para o Genius". Sidebar, Filter Bar e paginação NÃO existem prontas no EletroDS — componha-as (regra EDS-first → Nuxt UI → compor); use os blocks reais (MeTableView/MeFilterBar) onde existirem. A sidebar fica sempre VISÍVEL quando a zona está ligada — NÃO use v-show/condicional sobre o slot dela (isso reserva uma coluna vazia que espreme a tabela); se precisar recolher, use o colapso nativo do rail (ícone), não escondendo o slot. View "preview" (master-detail): lista à esquerda + painel de detalhe à direita; o subheader do detalhe traz, ao lado de "Opções", um ícone "abrir em outra janela" (afordância para a página única do documento). Sem seleção, o painel mostra um empty state ("Abrir documento" / "Perguntar ao Genius"). Tabela configurável (persiste por conta): densidade das linhas Compacto 40px · Regular 48px (padrão) · Espaçoso 64px (a célula do cabeçalho é SEMPRE 40px); "linhas por registro" 1/2/3 truncam (line-clamp) e "Ajustar ao texto" cresce sem truncar; "itens por tela" 10/20/50/100 (só na tabela — lista/card usam scroll infinito). Rodapé "X–Y de Z registros" (PT-BR) + paginação, 56px; listagens com menos de 10 registros NÃO exibem rodapé. Cabeçalho de coluna = botão (ícone de ordenação à esquerda, sem chevron) e arrastável para reordenar; clicar abre menu: Ordenar A→Z/Z→A · Fixar/Desafixar coluna · Ocultar coluna · [só em coluna agregável] Criar gráfico / Criar métrica. FIXAR = REORDENAR (a coluna vai para o início, logo após o checkbox, agrupada às demais fixadas) — NÃO é sticky-on-scroll nem o column-pinning nativo do UTable. Checkbox é sempre a 1ª coluna. "Mais ações" (⋮) da filter bar SÓ na tabela: Exportar · Configurações da tabela (Editar colunas = modal transfer-list MeDualList inativas↔ativas com busca/mover/arrastar-para-ordenar + Restaurar padrão) · Densidade · Linhas por registro · Paginação · Itens por tela. Filter Bar (peça custom, ainda não é block do EDS): altura 48px; esquerda→direita = checkbox líder (lista/card) · chip "N selecionados" (toggle: desabilita os filtros e expõe Salvar lista / Limpar seleção) · filtros de contexto (escopo/período, radios cor primary) · critérios MeCriterionInput (campo·operador·valor, removíveis, rolam no wheel) · grupo [+][salvar (só com dirty)][limpar (danger)] · ⋮. No mobile colapsa num funil (bottom-sheet) com ponto vermelho quando há filtro ativo. Widgets/gráficos: nascem da agregação de uma coluna (menu do cabeçalho) ou do Dashboard; faixa "Meus widgets" colapsável no topo do conteúdo (só no modo Tabela), com contagem + Restaurar padrão + Limpar todos; grade auto-ajustável de ~4 por linha; ao abrir, a tabela vira "hug" (mostra a página, sem scroll interno) e o CORPO INTEIRO rola junto (widgets + tabela + footer). Cores por série chart-1…chart-10 (Blue/Orange/Teal/Pink/Yellow/Purple/Red/Cyan/Lime/Slate 600) — NUNCA as cores semânticas de status. Abrir/fechar a faixa de widgets é do BOTÃO de gráficos: um clique abre (botão fica pressed), outro fecha — mesmo havendo widgets na tela. Ter widget só define a abertura INICIAL (tela que nasce com gráficos abre aberta; gerar gráfico/métrica pelo cabeçalho da coluna também abre). O PONTO no botão aparece SÓ quando existe widget nesta tabela. Sidebar (peça custom): moldura fixa na ordem busca → tabs 1 (pill = switcher de contexto, quando houver) → tabs 2 (link = âncora das seções) → collapsibles. Tipos de item: link/ativo (azul) · árvore/pasta (contagem) · faceta-checkbox (count) · radio de período (+ date) · slider de métrica (USlider range) · switcher (troca universo E filtros) · box especial (endereço "Destino de compra" = 1º collapsible do Catálogo; banner promo acima da busca) · Favoritos (estrela sólida amarela) · "Ver mais". Mobile: app bar vira BRANCO (bg-default) com logo ME azul — hambúrguer→drawer da sidebar (w-80), busca→painel, transversais→drawer à direita, avatar→drawer inferior; CTA primário vira FAB acima da nav bar (drawer inferior "Novo documento"); nav bar inferior AZUL com as funções + "Mais" (drawer). Alturas: header 64px · subheader 56px · nav bar 56px. No Preview mobile, tocar num registro abre o documento em TELA CHEIA. LAYOUT (block MeLayout — preencha só os slots usados) - #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais (Mensagens, Genius, Carrinho) + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar. - #toolbar → Subheader (MeSubheader): a ação primária (botão split azul) fica à ESQUERDA; em seguida até 3 ações da tabela + "Mais ações" (overflow). À direita: Filter Search (busca) + toggle de gráficos + troca de visão (tabela/cards/lista). - #left-area → sidebar de navegação/filtros (Pendências/Itens/Filtros salvos). Quando há switcher de contexto (ex.: Meus fornecedores ↔ Fornecedores ME), ele TROCA os filtros/facetas da sidebar — facetas: checkbox com contagem, árvore País › Estado › Cidade e "Ver mais". - #analytics → área de gráficos — visível só pelos gatilhos (toggle da toolbar OU gráfico no header de uma coluna) e com botão de fechar. - #default → área de dados (tabela | cards | lista) com a Filter Bar no HEADER da grid: filtros rápidos + critérios campo · operador · valor (MeFilterBar/MeCriterionInput — peças encostadas, removíveis), NÃO Selects soltos. Tipo = TEXTO; só Status é badge semântico. Seleção em massa = badge "N selecionados" na Filter Bar (toggle que filtra os selecionados e desabilita os filtros aplicados), NÃO o rodapé padrão "N de M linha(s) selecionada(s)". - #right-area → painel dos transversais (Mensagens · Genius · Carrinho) — abre pelo ícone do header e fecha quando nenhum está ativo. - #footer → nav bar inferior (MeNavBar) — só no mobile/tablet. CONVENÇÕES DO ME (padrões do guide — valem para toda tela) - Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente. - Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação. - Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações". - Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand. - Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo. - Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90". - Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa). - Cabeçalho de TODA tabela (qualquer tela): a célula tem 40px e o rótulo é o gatilho de ordenação — botão ghost neutro na escala md (rótulo 14px semibold em text-muted + ícone de ordenação de 20px à esquerda, gap 6px). Coluna de serviço (checkbox, chevron, ação de linha) tem cabeçalho VAZIO. O rótulo NÃO trunca: é ele que define a largura mínima da coluna. - Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro. - Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente. - Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal. - Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece. - Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual). - Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps. - "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor. - Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados". - Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas). - Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte. - Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual. - Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app. - Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais. - Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira. DIRETRIZES - Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR. - Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas. - CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual. - Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado. - Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado). - Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente. RESTRIÇÕES Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME. Status sempre como badge semântico. Ações por linha no menu de mais ações. Seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto ativa). CTA primário "Novo X" (cadastro de entidade) vs "Adicionar X" (item existente em lista). Switcher de contexto na sidebar (quando houver) TROCA o conjunto de filtros/facetas — não é um filtro adicional.. PRONTO QUANDO - A seleção de linhas habilita/desabilita as ações em lote (sem seleção = desabilitadas). - A área de gráficos só aparece pelos gatilhos (toggle da toolbar ou gráfico no header de coluna) e tem como fechar. - Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista. - Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens. - A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura. SAÍDA ESPERADA A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Os trechos entre { } são os pontos que você altera — preencha os campos ao lado ou edite o prompt direto aqui, a qualquer momento. Cole em Claude, Cursor, v0…

Pré-visualização 1:1 — como a IA deve montar

MaqueteReal (eds-next)

EletroDS + Nuxt

Dashboard

Transações

Fornecedores

Catálogos

Usuários

Mais

10

Mensagens

Genius

3

CarrinhoML

Como o Compositor monta a tela

O Compositor não gera só texto — ele monta um preview real da tela com componentes do ME e, do mesmo estado, deriva o prompt. A tela é organizada por slots e cada slot tem a mesma estrutura:

Slot → áreas → colunas → peças. Cada slot do layout (Header, Toolbar, Main, Footer e, quando ligados, Nav-area / Left / Right) é montado empilhando áreas (linhas); cada área se divide em colunas; cada célula recebe peças — um componente real, um grupo ou um repetidor.

• O default de cada slot é um componente real com a config pronta (Header = app bar do ME; Toolbar = button bar; Footer = navbar). Selecionar o bloco abre a config do próprio componente — você edita, não recria.
• Hierarquia das peças: EletroDS (Me*) → Nuxt UI (U*) → Código custom só quando não existe componente para o papel.
• Config dirigida pelo componente: o editor mostra as props reais do componente, já preenchidas com os defaults dele; listas de itens (ex.: passos de um stepper, ações de uma button bar) têm editor próprio.

Exemplos do que dá pra montar assim:

• Formulário — seções (cards) com perguntas configuráveis, ações no subheader, modais de compartilhar e diálogos de excluir.
• Wizard — o Stepper é uma peça do Main (editável: passos, ícones, cor), com o conteúdo de cada etapa aparecendo conforme o passo ativo.

Documento: tipo, sub-tela e a visão de cenários

No Documento, duas escolhas mudam a tela inteira (e o prompt junto):

• Tipo de Documento — Pedido · Cotação · Pré-Pedido · Contrato · Requisição · Nota Fiscal · Fornecedor · Produto. Cada um traz forehead, abas e ações próprias.
• Sub-tela da cotação — a cotação são seis documentos (RFQ · RFP · RFI, cada um com a rodada de negociação dele). Escolher aqui é o mesmo que clicar naquele nó no rail de fases: o preview troca o documento inteiro (forehead, abas, barra de ações, alertas). A lista traz também “Otimização (cenários)”, que não é um sétimo documento: é a terceira visão do alternador do subheader — mesma tela, corpo trocado pelos cenários. O Mapa não está na lista porque ainda não tem desenho.

Uma zona a mais no Documento: além dos slots do MeLayout, a Estrutura oferece a zona Otimização. Ela não é slot: ocupa o corpo quando o alternador está na visão de cenários, e é montada por áreas como as outras. Nessa visão o rail de fases fica oculto (ele é do documento, não do processo) e a barra passa a ser de cenário.

O preview é a fonte visual; o prompt gerado descreve a mesma anatomia para colar na IA (ou montar com a skill do bundle) — e, quando existe kit drop-in (index e documento), o prompt manda copiar o código real em vez de reconstruir a tela.

Veja tambémModelos de prompt Gabaritos Glossário