PhasesPanel

Usage

Pensado para o slot nav-area do MeLayout (o MeDocumentView repassa esse slot como #nav-area), que tem largura fixa e não é colapsável nesse nível — ver Layout. Por isso o MePhasesPanel nunca redimensiona esse slot: o rail fica sempre do tamanho do nav-area, e "expandir" abre um flyout teleportado para body, por cima do conteúdo, sem afetar o resto do chassi.

<template>
  <MeLayout>
    <template #nav-area>
      <MePhasesPanel
        title="Fases"
        create-label="Criar novo"
        :phases="phases"
        @phase-change="(key) => console.log('selecionou', key)"
        @create="() => console.log('criar nova fase')"
      />
    </template>

    <template #default>
      Conteúdo do documento aqui.
    </template>
  </MeLayout>
</template>

<script setup lang="ts">
import type { PhasesPanelPhase } from '@mercadoeletronico/eds-next'

const phases: PhasesPanelPhase[] = [
  {
    key: 'rfq',
    label: 'RFQ - Requisição de cotação',
    subtitle: 'Arquivo inicial',
    badge: '2 rodadas',
    active: true,
    children: [
      { key: 'rodada-1', label: '1ª Rodada de negociação', subtitle: 'Avaliação das propostas recebidas' },
      { key: 'rodada-2', label: '2ª Rodada de negociação', subtitle: 'Avaliação das propostas recebidas' }
    ]
  }
]
</script>

Rail

Sempre mostra um ícone por fase, pai e filhos achatados na mesma lista sequencial — sem indentação de hierarquia, porque o organismo de referência (Figma "SNOW FLAKES", Phases) não modela isso visualmente. Passe o mouse num ícone pra ver o rótulo via tooltip.

<template>
  <MePhasesPanel :phases="phases" />
</template>

Flyout

Clique no botão de recolher/expandir, ou clique fora do flyout, pra abrir e fechar. Cada fase no flyout é um UCard (variant="outline"), não uma casca customizada — a fase ativa só troca o ring/fundo via ui.root.

O flyout mede a posição do rail com ResizeObserver e se teleporta para body: o slot nav-area do MeLayout tem ancestrais com overflow-hidden e position: relative que cortavam, ou pintavam atrás do conteúdo principal, um position: absolute comum.

API

Props

Events

Notas

• Feito para o slot nav-area do MeLayout/MeDocumentView — não é um painel de propósito geral, não use fora desse contexto sem revisar o posicionamento do flyout.
• Sem evidência de como o rail deveria ficar recolhido no material de origem: hoje "recolher" esconde a lista inteira e deixa só o botão de reabrir.