🔑 Guia de Uso: Componente FK (Foreign Key)
Design System SIDASP (Fork Gales)Versão: 2.1.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O Componente FK é utilizado para gerenciar relacionamentos de Chave Estrangeira (Foreign Key). Ele permite que o usuário selecione um item de outra tabela através de um modal de pesquisa e exiba os dados selecionados em um card (ficha).
📁 Arquivos CSS
Este componente é composto por múltiplos arquivos de estilo para garantir compatibilidade e modularidade:
fk.css: Estilos base do componente (Trigger, Ficha, Dropdown de ações).fk-modal.css: Estilos para o modal de pesquisa (Layout interno, tabela de resultados).fk-dark-modal.css: Adaptações de Dark Mode específicas para modais (tanto Flowbite quanto jQuery UI legados).fk-v2-panel.css: (Opcional) Estilos para o painel deslizante lateral (ver guia específico).
🚦 Estados
1. Vazio (Trigger)
Quando nenhum item foi selecionado, exibe-se o "Gatilho" para adicionar.
2. Preenchido (Ficha)
Quando um item é selecionado, o gatilho é substituído (ou complementado) pela "Ficha" do item.
🔘 Gatilho (Trigger)
O card que convida o usuário a adicionar um vínculo.
<div class="fk-trigger">
<div class="fk-trigger__header">
<h4 class="fk-trigger__title">Responsável Técnico</h4>
<button class="fk-trigger__button" title="Adicionar">
<i class="material-icons">add</i>
</button>
</div>
<p class="fk-trigger__description">
Selecione o profissional responsável por esta atividade.
</p>
</div>📄 Ficha (Item Selecionado)
Exibe os dados do registro selecionado.
<div class="fk-ficha">
<div class="fk-ficha__content">
<h4 class="fk-ficha__primary">Dr. João da Silva</h4>
<div class="fk-ficha__secondary">
<i class="material-icons">badge</i>
<span>CRMV-GO 12345</span>
</div>
<div class="fk-ficha__tertiary">
<i class="material-icons">email</i>
<span>joao.silva@email.com</span>
</div>
</div>
<div class="fk-ficha__actions">
<button class="fk-ficha__menu-button">
<i class="material-icons">more_vert</i>
</button>
</div>
</div>🔍 Modais de Pesquisa
O sistema suporta dois tipos de modal para a pesquisa de registros. O arquivo fk-dark-modal.css garante que ambos funcionem corretamente no tema escuro.
Modal Flowbite (Recomendado)
Utiliza a estrutura de Dialog do Flowbite/Tailwind.
<div id="flowbite-dialog-fk" class="fixed inset-0 z-50 ...">
<div class="relative w-full max-w-5xl ...">
<div class="bg-white rounded-lg shadow ds-fk-modal-content">
<!-- Header -->
<div class="flex justify-between items-center p-5 border-b ds-fk-modal-header">
<h3 class="text-xl font-medium ...">Pesquisar Responsável</h3>
<button type="button" class="ds-fk-modal-close">
<i class="material-icons">close</i>
</button>
</div>
<!-- Body -->
<div class="p-6 space-y-6 ds-fk-modal-body">
<!-- Filtros e Tabela -->
</div>
</div>
</div>
</div>Modal Legado (jQuery UI)
Para sistemas legados que utilizam .ui-dialog. O CSS fk-dark-modal.css sobrescreve os estilos padrão do jQuery UI para que se pareçam com o Design System.
<div class="ui-dialog ui-widget ...">
<div class="ui-dialog-titlebar ...">
<span class="ui-dialog-title">Pesquisar</span>
</div>
<div class="ui-dialog-content ...">
<!-- Conteúdo -->
</div>
</div>Nota: As correções de Dark Mode para .ui-dialog incluem:
- Fundo escuro (
#10141D) em vez de branco. - Bordas cinza-escuro (
#212533). - Textos claros (
#E0E2EB). - Inputs e selects com fundo escuro.
🌓 Dark Mode
O componente possui suporte completo ao modo escuro:
- Trigger/Ficha: Ajuste automático de bordas e fundos.
- Modais: O arquivo
fk-dark-modal.cssé crítico aqui, garantindo que modais sobrepostos tenham o contraste correto e que componentes internos (tabelas, inputs) herdem as cores do tema.
Mantido por: Equipe Ipeweb