BaseUserMenuItem

Uma ação no painel que abre do nome da pessoa conectada, no cabeçalho do BaseAppShell: sair, trocar de perfil. O painel já desenha o item; o componente só entrega o botão certo, com ícone opcional.

Última ação: Nenhuma ação escolhida ainda.

Uso

• Use dentro do slot user-menu do BaseAppShell, para ações da pessoa que não levam a outra página: sair, trocar de perfil.
• Para ir a outra página (perfil, preferências), use um link, não este componente. Para a escolha do tema, use o BaseThemeSwitch, que fica no mesmo painel.
• O componente é o próprio <button>, e o painel estiliza os filhos diretos dele. Por isso não ponha um <div> em volta, nem use o BaseButton aqui: ele traria o visual de botão de página.
• Escolher o item fecha o painel e devolve o foco ao botão do nome.
• Para separar grupos, ponha um <hr> entre os itens, como no BaseAppShell.

Anatomia

1. Ícone: opcional, antes do texto, em cinza secundário.
2. Texto: o slot, ou label quando o slot está vazio.

Faça e não faça

Faça	Não faça
Use para ações da pessoa: sair, trocar de perfil.	Usar para ir a outra página; para isso, ponha um link.
Ponha um ícone que todo mundo reconhece, como a porta de saída.	Pôr ícone em alguns itens e deixar outros sem.
Deixe "Sair" por último, depois de um <hr>.	Misturar "Sair" com as ações de perfil.
Use o texto do slot, curto e no infinitivo: "Sair".	Usar o BaseButton dentro do painel.

Estilo

Propriedade	Token
Altura mínima	--tj-control-md
Espaço entre ícone e texto	--tj-space-3
Espaço interno horizontal	--tj-space-3
Cor do texto	--tj-text-primary
Cor do ícone	--tj-icon-secondary
Fundo ao passar o mouse	--tj-layer-hover-01
Fundo ao pressionar	--tj-layer-accent-01
Raio	--tj-radius-md

Esses valores vêm do painel do BaseAppShell (.tj-user-panel), não do item.

Código

<script setup lang="ts">
import { BaseAppShell, BaseUserMenuItem } from '@lab-inovacao-tjes/design-system'
</script>

<template>
  <BaseAppShell product="Obras e Imóveis" user-name="Marta Coelho" user-role="Fiscal de contrato">
    <template #user-menu>
      <a href="/perfil">Meu perfil</a>
      <hr>
      <BaseUserMenuItem icon="box-arrow-right" @click="signOut">Sair</BaseUserMenuItem>
    </template>
  </BaseAppShell>
</template>

Propriedades

Propriedade	Tipo	Padrão	Descrição
icon	string	—	Nome do ícone do Bootstrap Icons, sem bi-, mostrado antes do texto
label	string	—	Texto do item quando não há conteúdo no slot

Evento: click, com o evento do clique. Slot: default, o texto do item.

Acessibilidade

• É um <button type="button"> nativo: entra na ordem do Tab, dentro do painel, e abre com Enter e Espaço.
• O painel segue o padrão de divulgação do WAI-ARIA APG: o botão do nome tem aria-expanded e aria-controls. O painel não é role="menu", então não promete navegação por setas.
• O foco aparece com contorno de 2 px. Esc fecha o painel e devolve o foco ao botão do nome.
• O ícone é decorativo: o nome do item é o texto.

Tecla	O que faz
Tab	Vai ao próximo item do painel; ao sair do painel, ele fecha
Enter ou Espaço	Aciona o item e fecha o painel
Esc	Fecha o painel e devolve o foco ao botão do nome