{{--
Abas reutilizáveis — Etapa 2A (infraestrutura de UX, ainda não aplicado
em nenhuma tela real — ver relatório).
Uso:
... conteúdo da aba ...... conteúdo da aba ...
Estado ativo é 100% client-side (Alpine `abaAtiva`, sem round-trip ao
servidor só para trocar de aba) e é espelhado na URL via
`?aba=` (history.replaceState, sem recarregar a página) — é
assim que a aba sobrevive a um F5 ou a um redirect de volta pra mesma
tela depois de salvar. Prioridade pra decidir a aba inicial: prop
`ativa` (explícita) > query string atual > primeira aba da lista.
Para telas Livewire que precisam SABER server-side qual aba está
ativa (ex.: só validar os campos da aba atual antes de salvar), passe
`:ativa="$abaAtiva"` a partir de uma property pública do componente e
sincronize no clique com `wire:click="$set('abaAtiva', '...')"` além
do comportamento client-side padrão — isso é decisão de cada tela na
hora de aplicar, não deste componente genérico.
Acessibilidade: role="tablist"/"tab"/"tabpanel", aria-selected,
aria-controls, navegação por setas (⇦/⇨) entre abas. Responsivo: lista
de abas rola horizontalmente em telas estreitas (overflow-x auto) em
vez de quebrar linha ou cortar.
--}}
@props([
'abas' => [],
'ativa' => null,
'parametro' => 'aba',
])
@php
$chaves = collect($abas)->pluck('chave');
$chaveInicial = $ativa ?? request()->query($parametro);
if (! $chaves->contains($chaveInicial)) {
$chaveInicial = $abas[0]['chave'] ?? null;
}
@endphp