Sidebar Attachments

Versão: 1.0.0 Data: 13/03/2026

---

Visão Geral

O componente Sidebar Attachments oferece uma interface de upload de arquivos posicionada na sidebar direita do stepper. Funciona como alternativa ao campo de arquivo tradicional dentro do formulário principal, mantendo os anexos visíveis e acessíveis durante todo o preenchimento. Utiliza o prefixo .sidebar-attachments__ para suas classes.

---

Estrutura HTML

<aside class="sidebar-attachments">
    <div class="sidebar-attachments__header">
        <span class="sidebar-attachments__icon">
            <svg>...</svg> <!-- Ícone de anexo -->
        </span>
        <h3 class="sidebar-attachments__title">Anexos</h3>
    </div>

    <div class="sidebar-attachments__body">
        <!-- Área de upload -->
        <div class="sidebar-attachments__dropzone">
            <span>Arraste arquivos aqui ou clique para selecionar</span>
            <input type="file" class="sidebar-attachments__input" multiple>
        </div>

        <!-- Lista de arquivos -->
        <ul class="sidebar-attachments__list">
            <li class="sidebar-attachments__item">
                <span class="sidebar-attachments__filename">documento.pdf</span>
                <span class="sidebar-attachments__size">2.4 MB</span>
                <button type="button" class="sidebar-attachments__remove">&times;</button>
            </li>
        </ul>
    </div>
</aside>

---

Funcionalidades

1. Upload de arquivos: Suporte a seleção via clique e drag-and-drop na área de dropzone.
2. Múltiplos arquivos: Permite o envio de vários arquivos simultaneamente.
3. Lista de anexos: Exibe os arquivos adicionados com nome, tamanho e botão de remoção.
4. Posicionamento na sidebar: Integra-se à sidebar direita do stepper, mantendo os anexos sempre visíveis.
5. Alternativa ao campo de arquivo: Substitui o input file convencional dentro do formulário principal.

---

JavaScript

$('.sidebar-attachments').sidebarAttachments({
    maxFileSize: 10 * 1024 * 1024, // 10 MB
    allowedTypes: ['pdf', 'jpg', 'png', 'doc', 'docx'],
    uploadEndpoint: '/api/upload',
    onUpload: function (arquivo) {
        console.log('Arquivo enviado:', arquivo.name);
    },
    onRemove: function (arquivo) {
        console.log('Arquivo removido:', arquivo.name);
    }
});

---

Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo da sidebar, bordas da dropzone, lista de arquivos e botões de remoção.

---

Mantido por: Equipe Ipeweb