Ações Quantidade

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

---

Visão Geral

O componente Ações Quantidade funciona como componente "slave" do Multiselect Categorizado. Ele exibe as ações selecionadas no multiselect acompanhadas de um campo de quantidade editável, permitindo que o usuário defina valores numéricos para cada item escolhido. Utiliza o prefixo .aq- para suas classes e requer multiselect-categorizado.js.

---

Estrutura HTML

<div class="acoes-quantidade" id="minhasAcoesQuantidade">
    <div class="aq-header">
        <span class="aq-header-title">Ações selecionadas</span>
    </div>

    <div class="aq-body">
        <!-- Estado vazio -->
        <div class="aq-empty">
            Nenhuma ação selecionada.
        </div>

        <!-- Itens (gerados dinamicamente) -->
        <div class="aq-items">
            <div class="aq-item">
                <span class="aq-item-label">Nome da Ação</span>
                <input type="number" class="aq-item-qty" min="1" value="1">
            </div>
        </div>
    </div>

    <div class="aq-footer">
        <span class="aq-total">Total: 0</span>
    </div>
</div>

---

Funcionalidades

1. Sincronização automática: Reflete em tempo real os itens selecionados no Multiselect Categorizado vinculado.
2. Campo de quantidade: Cada ação exibe um input numérico para definir a quantidade desejada.
3. Estado vazio: Mensagem informativa quando nenhuma ação está selecionada.
4. Totalização: Rodapé exibe o total acumulado das quantidades informadas.
5. Remoção automática: Ao desmarcar um item no multiselect, a linha correspondente é removida.

---

JavaScript

O componente é inicializado automaticamente pelo Multiselect Categorizado quando o parâmetro acoesQuantidade é informado.

// Inicialização via multiselect-categorizado
$('#meuMultiselect').multiselectCategorizado({
    acoesQuantidade: '#minhasAcoesQuantidade'
});

// Acesso direto aos valores
var dados = $('#minhasAcoesQuantidade').acoesQuantidade('getData');
// Retorna: [{ id: 1, label: 'Ação X', quantidade: 5 }, ...]

---

Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo, bordas dos itens, inputs de quantidade e texto do estado vazio.

---

Mantido por: Equipe Ipeweb