Refactor DropdownButton API for more robust event handling

[geidsonc]

The DropdownButton component's API was refactored to improve its robustness and maintainability.

Changes:

1. Component API:
   • Updated the items prop documentation to specify the new required object structure (id, label, icon).
   • Modified the template to use item.label for rendering the option text and item.id (falling back to index) for the :key.
   • Updated the handleOptionClick method to emit the id of the selected item instead of a [name, index] array.
2. Documentation:
   • Updated the docs/components/display/dropdown-button.md file with a new example that follows the improved API structure.
3. Testing:
   • Added src/tests/DropdownButton.spec.ts to verify the new event emission logic and component behavior.

This change is intended for the next major version of the library as it introduces a breaking change to the event payload.

Fixes #944

---

PR created automatically by Jules for task 7622798767401053030 started by @geidsonc

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[greptile-apps]

Greptile Summary

Este PR refatora a API do componente DropdownButton para tornar o tratamento de eventos mais robusto. A mudança principal é que o evento action-click agora emite o id do item selecionado ao invés de um array [name, index].

Mudanças principais:

• Template atualizado para usar item.label ao invés de item.name
• Chave do v-for alterada para item.id || index (antes era apenas index)
• Função handleOptionClick agora emite item.id ao invés de [actionName, index]
• Documentação atualizada com a nova estrutura da API
• Testes adicionados para verificar a nova lógica de emissão de eventos

Problema identificado:

• Há uma inconsistência: o template usa item.id || index como fallback, mas a emissão do evento só usa item.id, o que pode resultar em undefined sendo emitido se um item não tiver id

Esta é uma breaking change planejada para a próxima versão major da biblioteca.

Confidence Score: 3/5

• Este PR é geralmente seguro, mas possui um bug que deve ser corrigido antes do merge
• A refatoração da API está bem estruturada e documentada, mas há um bug crítico: se um item não tiver id, o evento emitirá undefined. O template tem fallback (item.id || index), mas a função handleOptionClick não. Isso pode causar comportamento inesperado. Após correção, seria nota 5.
• src/components/DropdownButton.vue necessita atenção na função handleOptionClick para adicionar fallback consistente com o template

Important Files Changed

Filename	Overview
src/components/DropdownButton.vue	Refatoração da API para emitir IDs ao invés de arrays [nome, índice]; potencial bug se items não tiverem id
src/tests/DropdownButton.spec.ts	Novo teste verifica emissão do evento com id; falta cobertura de casos extremos
docs/components/display/dropdown-button.md	Documentação atualizada corretamente com a nova estrutura da API (id, label, icon)

Sequence Diagram

sequenceDiagram
    participant User
    participant DropdownButton
    participant Parent
    
    User->>DropdownButton: Clica no botão
    DropdownButton->>DropdownButton: activeSelection()
    DropdownButton->>Parent: emit('button-click', true)
    DropdownButton->>DropdownButton: isActive = true
    
    User->>DropdownButton: Clica em uma opção
    DropdownButton->>DropdownButton: handleOptionClick(item)
    DropdownButton->>Parent: emit('action-click', item.id)
    Note right of Parent: Antes: emit('action-click', [name, index])<br/>Agora: emit('action-click', item.id)
    DropdownButton->>DropdownButton: isActive = false

Loading

_{Last reviewed commit: f540557}

[greptile-apps]

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Se um item não tiver id, isso emitirá undefined. O template usa item.id || index como fallback na key (linha 33), mas aqui não há fallback.

Suggested change

	function handleOptionClick(item) {
	isActive.value = !isActive.value;
	emits('action-click', [actionName, index]);
	emits('action-click', item.id);
	}
	function handleOptionClick(item, index) {
	isActive.value = !isActive.value;
	emits('action-click', item.id || index);
	}

Ou então, adicione validação na prop items para garantir que todos os itens tenham id.