Refactor DropdownButton API for more robust event handling

docs/components/display/dropdown-button.md

@@ -68,15 +68,18 @@ const events = [
 
 const items = ref([
 	{
-		name: 'Cancelar solicitação',
+		id: 'cancelar',
+		label: 'Cancelar solicitação',
 		icon: 'block-outline',
 	},
 	{
-		name: 'Indeferir solicitação',
+		id: 'indeferir',
+		label: 'Indeferir solicitação',
 		icon: 'alert-outline',
 	},
 	{
-		name: 'Deferir solicitação',
+		id: 'deferir',
+		label: 'Deferir solicitação',
 		icon: 'check-outline',
 	},
 ]);

src/components/DropdownButton.vue

@@ -30,7 +30,7 @@
 		>
 			<div
 				v-for="(item, index) in items"
-				:key="index"
+				:key="item.id || index"
 			>
 				<!--
 					Evento emitido quando as ações do Dropdown são clicadas.
@@ -39,15 +39,15 @@
 				-->
 				<div
 					class="dropdown__container"
-					@click="handleOptionClick(item.name, index)"
+					@click="handleOptionClick(item)"
 				>
 					<CdsIcon
 						class="dropdown__icon"
 						height="22"
 						width="22"
 						:name="item.icon"
 					/>
-					<span class="dropdown__text">{{ item.name }}</span>
+					<span class="dropdown__text">{{ item.label }}</span>
 				</div>
 			</div>
 		</div>
@@ -76,9 +76,9 @@ const emits = defineEmits([
 
 const props = defineProps({
 	/**
-	* Define a lista dos itens do DropdownButton a serem
-	* mostrados. Os itens da lista devem ser
-	* objetos com path ou route, e com uma label
+	* Define a lista dos itens do DropdownButton a serem mostrados.
+	* Os itens da lista devem ser objetos contendo as chaves:
+	* `id`, `label` e `icon`.
 	*/
 	items: {
 		type: Array,
@@ -203,9 +203,9 @@ function hide() {
 	isActive.value = false;
 }
 
-function handleOptionClick(actionName, index) {
+function handleOptionClick(item) {
 	isActive.value = !isActive.value;
-	emits('action-click', [actionName, index]);
+	emits('action-click', item.id);
 }
 
 function closeDropdownButton(event) {

src/tests/DateInput.spec.js

@@ -1,12 +1,20 @@
-import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { describe, test, expect, beforeEach, beforeAll, afterAll, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import DateInput from '../components/DateInput.vue'; // Ajuste o caminho conforme necessário
 import CdsBaseInput from '../components/BaseInput.vue';
-import { DateTime } from 'luxon';
 
 describe('DateInput', () => {
 	let wrapper;
 
+	beforeAll(() => {
+		vi.useFakeTimers();
+		vi.setSystemTime(new Date('2026-02-01'));
+	});
+
+	afterAll(() => {
+		vi.useRealTimers();
+	});
+
 	beforeEach(() => {
 		wrapper = mount(DateInput, {
 			props: {

src/tests/DropdownButton.spec.ts

@@ -0,0 +1,45 @@
+import { describe, test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DropdownButton from '../components/DropdownButton.vue';
+
+describe('DropdownButton', () => {
+	test('renders correctly and emits event with id when an option is clicked', async () => {
+		const items = [
+			{ id: 'opt-1', label: 'Option 1', icon: 'box-outline' },
+			{ id: 'opt-2', label: 'Option 2', icon: 'box-outline' },
+		];
+		const wrapper = mount(DropdownButton, {
+			props: {
+				items,
+				text: 'Click me',
+			},
+			global: {
+				stubs: {
+					CdsIcon: true,
+					CdsChevron: true,
+					CdsButton: {
+						template: '<button><slot name="append"></slot><slot></slot></button>'
+					}
+				},
+				directives: {
+					cdstip: () => {}
+				}
+			}
+		});
+
+		// Open dropdown
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.vm.isActive).toBe(true);
+
+		// Find options
+		const options = wrapper.findAll('.dropdown__container');
+		expect(options.length).toBe(2);
+
+		// Click first option
+		await options[0].trigger('click');
+
+		// Check event
+		expect(wrapper.emitted('action-click')).toBeTruthy();
+		expect(wrapper.emitted('action-click')[0]).toEqual(['opt-1']);
+	});
+});