Rename settings change event for better consistency and add test

Refs: #1834

Author: sdvg

packages/components/src/components/table-stateless/component.tsx

@@ -191,7 +191,7 @@ export class KolTableStateless implements TableStatelessAPI {
 		}
 	}
 
-	@Listen('kolTableSettingsChange')
+	@Listen('settingsChange')
 	public handleSettingsChange(event: CustomEvent<TableSettings>) {
 		setState(this, '_tableSettings', event.detail);
 	}

packages/components/src/components/table-stateless/table-settings.e2e.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '@stencil/playwright';
-import type { TableHeaderCellsPropType } from '../../schema';
+import type { TableHeaderCellsPropType, TableSettings } from '../../schema';
+import { KolEvent } from '../../utils/events';
 
 const DATA = [
 	{ id: '1001', name: 'John', age: 30 },
@@ -63,6 +64,47 @@ test.describe('kol-table-settings', () => {
 			// Verify name column is still hidden
 			await expect(nameCheckbox).not.toBeChecked();
 		});
+
+		test('it emits an DOM event when settings change', async ({ page }) => {
+			const tableStateless = page.locator('kol-table-stateless');
+			const settingsButton = page.getByTestId('popover-button').locator('button');
+			await settingsButton.click();
+
+			const eventPromise = tableStateless.evaluate((element: HTMLKolTableStatelessElement, KolEvent) => {
+				return new Promise<TableSettings>((resolve) => {
+					element.addEventListener(KolEvent.settingsChange, (event: Event) => {
+						resolve((event as CustomEvent).detail as TableSettings);
+					});
+				});
+			}, KolEvent);
+
+			// Apply changes
+			const applyButton = page.getByTestId('table-settings-apply');
+			await applyButton.click();
+
+			await expect(eventPromise).resolves.toEqual({
+				columns: [
+					{
+						key: 'id',
+						label: 'ID',
+						position: 0,
+						visible: true,
+					},
+					{
+						key: 'name',
+						label: 'Name',
+						position: 1,
+						visible: true,
+					},
+					{
+						key: 'age',
+						label: 'Age',
+						position: 2,
+						visible: true,
+					},
+				],
+			});
+		});
 	});
 
 	test.describe('Column Visibility Management', () => {

packages/components/src/components/table-stateless/table-settings.tsx

@@ -87,7 +87,7 @@ export class KolTableSettings {
 			return;
 		} else if (this.host) {
 			this.errorMessage = null;
-			dispatchDomEvent(this.host, KolEvent.tableSettingsChange, this.tableSettings);
+			dispatchDomEvent(this.host, KolEvent.settingsChange, this.tableSettings);
 			void this.popoverRef?.hidePopover();
 		}
 	}

packages/components/src/utils/events.ts

@@ -14,7 +14,7 @@ enum KolEvent {
 	sort = 'kolSort',
 	submit = 'kolSubmit',
 	toggle = 'kolToggle',
-	tableSettingsChange = 'kolTableSettingsChange',
+	settingsChange = 'settingsChange',
 }
 
 function createKoliBriEvent<T>(event: KolEvent, detail?: T): CustomEvent {