@keenthemes/ktui 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenthemes/ktui",
-	"version": "1.1.5",
+	"version": "1.1.6",
 	"description": "Free & Open-Source Tailwind UI Components by Keenthemes",
 	"homepage": "https://ktui.io",
 	"repository": {
@@ -79,7 +79,7 @@
 		"build:css": "npx @tailwindcss/cli -i ./styles/main.css -o ./dist/styles.css --watch",
 		"build:css:once": "npx @tailwindcss/cli -i ./styles/main.css -o ./dist/styles.css",
 		"dev": "concurrently \"npm run build:webpack:watch\" \"npm run build:css\"",
-		"lint": "npx eslint 'src/**/*.ts' --max-warnings 100",
+		"lint": "npx eslint 'src/**/*.ts' --max-warnings 110",
 		"lint:fix": "npx eslint 'src/**/*.ts' --fix",
 		"format": "npx prettier --write 'src/**/*.ts'",
 		"format:check": "npx prettier --check 'src/**/*.ts'",
@@ -98,24 +98,31 @@
 		"@vitest/ui": "^4.0.16",
 		"autoprefixer": "^10.4.21",
 		"babel-loader": "^10.0.0",
-		"clean-webpack-plugin": "^4.0.0",
 		"concurrently": "^9.1.2",
-		"eslint": "^9.27.0",
-		"eslint-plugin-prettier": "^5.5.4",
+		"eslint": "^10.0.0",
+		"eslint-plugin-prettier": "^5.4.0",
 		"jsdom": "^25.0.1",
 		"mini-svg-data-uri": "^1.4.4",
 		"prettier": "^3.5.3",
 		"source-map-loader": "^5.0.0",
 		"tailwindcss": "^4.1.11",
-		"terser-webpack-plugin": "^5.3.14",
+		"terser-webpack-plugin": "^5.3.17",
 		"ts-loader": "^9.5.2",
 		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.18.0",
 		"vitest": "^4.0.16",
 		"webpack": "^5.99.9",
 		"webpack-cli": "^6.0.1",
-		"webpack-merge-and-include-globally": "^2.3.4"
+		"webpack-merge-and-include-globally": "^1.0.7"
 	},
 	"dependencies": {
 		"@popperjs/core": "^2.11.8"
+	},
+	"overrides": {
+		"ajv": "^8.0.0",
+		"minimatch": "^10.2.3",
+		"rollup": "^4.59.0",
+		"serialize-javascript": "^7.0.3",
+		"terser-webpack-plugin": "^5.3.17"
 	}
 }

package/src/components/collapse/collapse.ts

@@ -3,9 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
-/* eslint-disable require-jsdoc */
-
 import KTData from '../../helpers/data';
 import KTDom from '../../helpers/dom';
 import KTComponent from '../component';

package/src/components/component.ts

@@ -3,10 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable guard-for-in */
-/* eslint-disable max-len */
-/* eslint-disable require-jsdoc */
-
 declare global {
 	interface Window {
 		KTGlobalComponentsConfig: object;
@@ -144,7 +140,11 @@ export default class KTComponent {
 	 * already-initialized instance so handlers that hold a reference to _config see updates.
 	 */
 	protected _mergeConfig(config: object): void {
-		if (config && typeof config === 'object' && Object.keys(config).length > 0) {
+		if (
+			config &&
+			typeof config === 'object' &&
+			Object.keys(config).length > 0
+		) {
 			Object.assign(this._config, config);
 		}
 	}

package/src/components/datatable/__tests__/currency-sort.test.ts

@@ -0,0 +1,108 @@
+/**
+ * currency-sort.test.ts
+ * Tests that price/currency columns sort by numeric value, not lexicographically.
+ *
+ * Spec: fix-datatable-sort-arrow-and-numeric-sort
+ * Requirement: Numeric and Custom Column Sort Configuration
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createSortHandler } from '../datatable-sort';
+
+describe('KTDataTable - Currency/numeric sort', () => {
+	let thead: HTMLTableSectionElement;
+	const noop = vi.fn();
+
+	beforeEach(() => {
+		thead = document.createElement('thead');
+		const tr = document.createElement('tr');
+		const th = document.createElement('th');
+		th.setAttribute('data-kt-datatable-column', 'price');
+		tr.appendChild(th);
+		thead.appendChild(tr);
+	});
+
+	it('sorts currency column by numeric value ascending (e.g. £5, £20, £123)', () => {
+		const config = {
+			columns: {
+				price: { sortType: 'numeric' as const },
+			},
+		};
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£123' },
+			{ price: '£20' },
+			{ price: '£5' },
+			{ price: '£9.99' },
+		];
+		const sorted = handler.sortData(data, 'price', 'asc');
+
+		// Must be numeric order: 5, 9.99, 20, 123 (not lexicographic £123, £20, £5)
+		const values = sorted.map((row) => row.price);
+		expect(values).toEqual(['£5', '£9.99', '£20', '£123']);
+	});
+
+	it('sorts currency column by numeric value descending', () => {
+		const config = {
+			columns: {
+				price: { sortType: 'numeric' as const },
+			},
+		};
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£5' },
+			{ price: '£20' },
+			{ price: '£123' },
+		];
+		const sorted = handler.sortData(data, 'price', 'desc');
+
+		const numericOrder = sorted.map((row) =>
+			parseFloat(String(row.price).replace(/[^0-9.-]/g, '')),
+		);
+		expect(numericOrder).toEqual([123, 20, 5]);
+	});
+
+	it('without sortType numeric, sorts lexicographically (e.g. £123 before £20)', () => {
+		const config = { columns: {} };
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£123' },
+			{ price: '£20' },
+			{ price: '£5' },
+		];
+		const sorted = handler.sortData(data, 'price', 'asc');
+
+		// String sort: "£123" < "£20" < "£5" (1 < 2 < 5)
+		const values = sorted.map((row) => row.price);
+		expect(values[0]).toBe('£123');
+		expect(values[1]).toBe('£20');
+		expect(values[2]).toBe('£5');
+	});
+});

package/src/components/datatable/__tests__/multi-row-headers.test.ts

@@ -0,0 +1,121 @@
+/**
+ * multi-row-headers.test.ts
+ * Tests for datatable column count with multi-row (grouped) headers.
+ *
+ * Spec: openspec/changes/fix-datatable-multi-row-header-column-count
+ * Requirement: Multi-Row (Grouped) Header Column Count
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { KTDataTable } from '../datatable';
+
+describe('KTDataTable - Multi-row header column count', () => {
+	let container: HTMLElement;
+	let tableElement: HTMLTableElement;
+
+	/**
+	 * Create a table with multi-row thead (no data-kt-datatable-column) and 17 data columns.
+	 * Row 1: Person (rowspan=2), Backlog (colspan=3), Floater2 (colspan=3), Floater1 (colspan=3), CL2025 (colspan=3), LWP (colspan=3), Action (rowspan=2) = 7 th
+	 * Row 2: 15 leaf th (Assigned, Used, Balance × 5)
+	 * Total 22 th in DOM but only 17 data columns.
+	 */
+	const createMultiRowHeaderTable = (bodyRowCount: number = 2) => {
+		container = document.createElement('div');
+		container.id = 'kt_datatable_multirow';
+		container.setAttribute('data-kt-datatable', 'true');
+
+		tableElement = document.createElement('table');
+		tableElement.setAttribute('data-kt-datatable-table', 'true');
+
+		const thead = document.createElement('thead');
+		const row1 = document.createElement('tr');
+		row1.innerHTML = `
+			<th rowspan="2">Person</th>
+			<th colspan="3">Backlog</th>
+			<th colspan="3">Floater (2) 2025</th>
+			<th colspan="3">Floater (1) 2025</th>
+			<th colspan="3">CL2025</th>
+			<th colspan="3">LWP</th>
+			<th rowspan="2">Action</th>
+		`;
+		thead.appendChild(row1);
+
+		const row2 = document.createElement('tr');
+		row2.innerHTML = `
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+		`;
+		thead.appendChild(row2);
+		tableElement.appendChild(thead);
+
+		const tbody = document.createElement('tbody');
+		const tdCount = 17;
+		for (let r = 0; r < bodyRowCount; r++) {
+			const tr = document.createElement('tr');
+			for (let c = 0; c < tdCount; c++) {
+				const td = document.createElement('td');
+				td.textContent = c === 0 ? `Person ${r + 1}` : String(c);
+				tr.appendChild(td);
+			}
+			tbody.appendChild(tr);
+		}
+		tableElement.appendChild(tbody);
+
+		const wrapper = document.createElement('div');
+		wrapper.appendChild(tableElement);
+
+		const infoElement = document.createElement('span');
+		infoElement.setAttribute('data-kt-datatable-info', 'true');
+		const sizeElement = document.createElement('select');
+		sizeElement.setAttribute('data-kt-datatable-size', 'true');
+		const paginationElement = document.createElement('div');
+		paginationElement.setAttribute('data-kt-datatable-pagination', 'true');
+
+		container.appendChild(wrapper);
+		container.appendChild(infoElement);
+		container.appendChild(sizeElement);
+		container.appendChild(paginationElement);
+		document.body.appendChild(container);
+
+		return { container, tableElement, tbody };
+	};
+
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	it('should render exactly 17 columns when thead has multi-row headers and no data-kt-datatable-column', async () => {
+		createMultiRowHeaderTable(2);
+		const datatable = new KTDataTable(container, { stateSave: false });
+		await vi.runAllTimersAsync();
+
+		const tbody = tableElement.tBodies[0];
+		expect(tbody).toBeDefined();
+		const rows = tbody.querySelectorAll('tr');
+		// Two data rows
+		expect(rows.length).toBe(2);
+		rows.forEach((row) => {
+			const cells = row.querySelectorAll('td');
+			expect(cells.length).toBe(17);
+		});
+	});
+
+	it('should use logical column count for empty-state row colspan', async () => {
+		createMultiRowHeaderTable(0);
+		const tbody = tableElement.querySelector('tbody');
+		expect(tbody).toBeDefined();
+		const datatable = new KTDataTable(container, { stateSave: false });
+		await vi.runAllTimersAsync();
+
+		const noticeRow = tableElement.tBodies[0].querySelector('tr');
+		expect(noticeRow).toBeDefined();
+		const cell = noticeRow?.querySelector('td');
+		expect(cell).toBeDefined();
+		// Should span 17 (logical columns from originalData) or 1 if no data; after extract we have 0 rows so logicalCount could be 0 -> we use 1
+		// With 0 body rows we never have originalData, so _getLogicalColumnCount() returns first tbody row td count (0) or 0; we set colspan to 1
+		expect(cell!.colSpan).toBeGreaterThanOrEqual(1);
+	});
+});

package/src/components/datatable/__tests__/pagination-reset.test.ts

@@ -184,7 +184,9 @@ describe('KTDataTable - Pagination Reset', () => {
 						// String search
 						return data.filter((item: any) =>
 							Object.values(item).some((value: any) =>
-								String(value).toLowerCase().includes((search as string).toLowerCase()),
+								String(value)
+									.toLowerCase()
+									.includes((search as string).toLowerCase()),
 							),
 						);
 					},
@@ -326,7 +328,11 @@ describe('KTDataTable - Pagination Reset', () => {
 			expect(datatable.getState().page).toBe(1);
 
 			// Replace filter on same column
-			datatable.setFilter({ column: 'status', type: 'text', value: 'inactive' });
+			datatable.setFilter({
+				column: 'status',
+				type: 'text',
+				value: 'inactive',
+			});
 			expect(datatable.getState().page).toBe(1);
 
 			// Should only have one filter for 'status' column
@@ -498,7 +504,7 @@ describe('KTDataTable - Pagination Reset', () => {
 			const namespace = 'test-datatable-restore';
 
 			// First instance
-			let table1 = new KTDataTable(container, {
+			const table1 = new KTDataTable(container, {
 				pageSize: 10,
 				stateSave: true,
 				stateNamespace: namespace,
@@ -637,7 +643,10 @@ describe('KTDataTable - Pagination Reset', () => {
 
 		it('should not break existing event handlers', async () => {
 			const { container } = createMockDataTable(25);
-			datatable = new KTDataTable(container, { pageSize: 10, stateSave: false });
+			datatable = new KTDataTable(container, {
+				pageSize: 10,
+				stateSave: false,
+			});
 
 			const reloadSpy = vi.fn();
 			// Listen for 'reload' event directly (CustomEvent)
@@ -654,4 +663,3 @@ describe('KTDataTable - Pagination Reset', () => {
 		});
 	});
 });
-