Menu de notificações

AlpopNotificationsDropdown é o sino da navbar: um botão com badge de não lidas que abre uma lista rolável de notificações.

É totalmente desacoplado: o host é dono dos dados e da navegação. Passe notifications, unread-count e loading; clicar em um item emite select (o host marca como lida / navega), rolar até o fim emite load-more, e abrir / fechar emitem open / close. Cada notificação: { id, title, message, read, createdAt }. Os horários passam pela prop format-time.

alpop-notifications-dropdown(
  :notifications="notifications",
  :unread-count="unreadCount",
  :loading="loading",
  :format-time="fromNow",
  @select="onSelect",
  @load-more="fetchNext"
)

Props

Prop	Tipo	Padrão	Descrição
notifications	Array	[]	Notificações { id, title, message, read, createdAt }
unreadCount	Number	0	Quantidade exibida no badge (9+ acima de 9)
loading	Boolean	false	Exibe os skeletons de carregamento
clickable	Boolean	true	Habilita cursor/hover e o evento select
formatTime	Function	identidade	Formata o createdAt de cada item
title	String	Notificações	Título do cabeçalho / aria-label do botão
emptyLabel	String	Nenhuma…	Texto exibido quando a lista está vazia

Eventos

Evento	Payload	Descrição
open	—	Emitido ao abrir o menu
close	—	Emitido ao fechar (inclui clique fora)
select	notification	Emitido ao clicar em um item (quando clicável)
load-more	—	Emitido ao rolar até o fim da lista