@keenthemes/ktui 1.1.4 → 1.1.5

package/src/components/datatable/datatable-sort.ts

@@ -44,7 +44,7 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 	dispatchEvent: (eventName: string, eventData?: any) => void,
 	updateData: () => void,
 ): KTDataTableSortAPI<T> {
-	// Helper to compare values for sorting
+	// Helper to compare values for sorting (string)
 	function compareValues(
 		a: unknown,
 		b: unknown,
@@ -63,15 +63,80 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 				: 0;
 	}
 
+	// Parse value for numeric sort: strip currency/commas, then parseFloat
+	function parseNumeric(value: unknown): number {
+		if (value === null || value === undefined || value === '') {
+			return Number.NaN;
+		}
+		const s = String(value).replace(/[^0-9.-]/g, '');
+		const n = parseFloat(s);
+		return Number.isNaN(n) ? Number.NaN : n;
+	}
+
+	// Compare two numbers; NaN sorts to the end for both asc and desc
+	function compareNumeric(
+		aNum: number,
+		bNum: number,
+		sortOrder: KTDataTableSortOrderInterface,
+	): number {
+		const aNaN = Number.isNaN(aNum);
+		const bNaN = Number.isNaN(bNum);
+		if (aNaN && bNaN) return 0;
+		if (aNaN) return 1;
+		if (bNaN) return -1;
+		if (aNum < bNum) return sortOrder === 'asc' ? -1 : 1;
+		if (aNum > bNum) return sortOrder === 'asc' ? 1 : -1;
+		return 0;
+	}
+
+	function getColumnDef(
+		sortField: keyof T | number,
+	): {
+		sortType?: 'string' | 'numeric';
+		sortValue?: (
+			cellValue: unknown,
+			rowData: KTDataTableDataInterface,
+		) => number | string;
+	} | undefined {
+		const columns = config.columns;
+		if (!columns) return undefined;
+		const key =
+			typeof sortField === 'number'
+				? (Object.keys(columns)[sortField] as keyof T | undefined)
+				: sortField;
+		return key !== undefined ? columns[key as string] : undefined;
+	}
+
 	function sortData(
 		data: T[],
 		sortField: keyof T | number,
 		sortOrder: KTDataTableSortOrderInterface,
 	): T[] {
+		const columnDef = getColumnDef(sortField);
+		const sortValueFn = columnDef?.sortValue;
+		const useNumeric =
+			!sortValueFn && columnDef?.sortType === 'numeric';
+
 		return data.sort((a, b) => {
-			const aValue = a[sortField as keyof T] as unknown;
-			const bValue = b[sortField as keyof T] as unknown;
-			return compareValues(aValue, bValue, sortOrder);
+			const aRaw = a[sortField as keyof T] as unknown;
+			const bRaw = b[sortField as keyof T] as unknown;
+
+			if (typeof sortValueFn === 'function') {
+				const aVal = sortValueFn(aRaw, a as KTDataTableDataInterface);
+				const bVal = sortValueFn(bRaw, b as KTDataTableDataInterface);
+				const aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
+				const bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
+				if (typeof aVal === 'number' && typeof bVal === 'number') {
+					return compareNumeric(aNum, bNum, sortOrder);
+				}
+				return compareValues(aVal, bVal, sortOrder);
+			}
+			if (useNumeric) {
+				const aNum = parseNumeric(aRaw);
+				const bNum = parseNumeric(bRaw);
+				return compareNumeric(aNum, bNum, sortOrder);
+			}
+			return compareValues(aRaw, bRaw, sortOrder);
 		});
 	}
 
@@ -97,24 +162,41 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		sortField: keyof T,
 		sortOrder: KTDataTableSortOrderInterface,
 	): void {
+		const baseClass = config.sort?.classes?.base || '';
 		const sortClass = sortOrder
 			? sortOrder === 'asc'
 				? config.sort?.classes?.asc || ''
 				: config.sort?.classes?.desc || ''
 			: '';
+		// Clear all headers: remove sort state so only the active column shows highlighted arrow
+		const allTh = theadElement.querySelectorAll('th');
+		allTh.forEach((header) => {
+			const el = header as HTMLElement;
+			el.setAttribute('aria-sort', 'none');
+			const sortElement = header.querySelector(`.${baseClass}`) as HTMLElement;
+			if (sortElement) {
+				sortElement.className = baseClass;
+			}
+		});
+		// Apply sort state to the active column so table.css [aria-sort='asc'] / [aria-sort='desc'] can highlight the arrow
 		const th =
 			typeof sortField === 'number'
-				? theadElement.querySelectorAll('th')[sortField]
+				? allTh[sortField]
 				: (theadElement.querySelector(
 						`th[data-kt-datatable-column="${String(sortField)}"], th[data-kt-datatable-column-sort="${String(sortField)}"]`,
 					) as HTMLElement);
 		if (th) {
 			const sortElement = th.querySelector(
-				`.${config.sort?.classes?.base}`,
+				`.${baseClass}`,
 			) as HTMLElement;
 			if (sortElement) {
 				sortElement.className =
-					`${config.sort?.classes?.base} ${sortClass}`.trim();
+					`${baseClass} ${sortClass}`.trim();
+			}
+			if (sortOrder) {
+				th.setAttribute('aria-sort', sortOrder);
+			} else {
+				th.setAttribute('aria-sort', 'none');
 			}
 		}
 	}

package/src/components/datatable/datatable.ts

@@ -73,7 +73,14 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	constructor(element: HTMLElement, config?: KTDataTableConfigInterface) {
 		super();
 
-		if (KTData.has(element as HTMLElement, this._name)) return;
+		if (KTData.has(element as HTMLElement, this._name)) {
+			// Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
+			const existing = KTDataTable.getInstance(element as HTMLElement);
+			if (existing && config) {
+				existing._mergeConfig(config);
+			}
+			return;
+		}
 
 		this._defaultConfig = this._initDefaultConfig(config);
 
@@ -668,13 +675,13 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._storeOriginalClasses();
 
 		const rows = this._tbodyElement.querySelectorAll<HTMLTableRowElement>('tr');
-		
+
 		// Filter th elements to only include those with data-kt-datatable-column attribute
 		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
 			? this._theadElement.querySelectorAll('th')
 			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
-		
-		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th => 
+
+		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th =>
 			th.hasAttribute('data-kt-datatable-column')
 		);
 
@@ -708,15 +715,15 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 */
 	private _localTableHeaderInvalidate(): boolean {
 		const { originalData } = this.getState();
-		
+
 		// Count only th elements with data-kt-datatable-column attribute
 		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
 			? this._theadElement.querySelectorAll('th')
 			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
-		const currentTableHeaders = Array.from(allThs).filter(th => 
+		const currentTableHeaders = Array.from(allThs).filter(th =>
 			th.hasAttribute('data-kt-datatable-column')
 		).length;
-		
+
 		const totalColumns = originalData.length
 			? Object.keys(originalData[0]).length
 			: 0;
@@ -1015,10 +1022,12 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
 			? this._theadElement.querySelectorAll('th')
 			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
-		
-		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th => 
+
+		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th =>
 			th.hasAttribute('data-kt-datatable-column')
 		);
+		// When no th has data-kt-datatable-column, use all ths so we still render by column index (data extracted with numeric keys)
+		const columnsToRender: HTMLTableCellElement[] = ths.length > 0 ? ths : Array.from(allThs);
 
 		this._data.forEach((item: T, rowIndex: number) => {
 			const row = document.createElement('tr');
@@ -1033,8 +1042,8 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					? this.getState().originalDataAttributes[rowIndex]
 					: null;
 
-				// Use the order of <th> elements with data-kt-datatable-column to render <td>s in the correct order
-				ths.forEach((th, colIndex) => {
+				// Use columnsToRender so tables without data-kt-datatable-column still get cells (by index)
+				columnsToRender.forEach((th, colIndex) => {
 					const colName = th.getAttribute('data-kt-datatable-column');
 					const td = document.createElement('td');
 					let value: any;
@@ -1811,8 +1820,30 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 */
 	public static init(): void {
 		if (typeof document === 'undefined') return;
-		// Create instances of KTDataTable for all elements with a
-		// data-kt-datatable="true" attribute
+		KTDataTable.createInstances();
+	}
+
+	/**
+	 * Force reinitialization of datatables by clearing existing instances.
+	 * Useful for Livewire wire:navigate where the DOM is replaced and new tables need to be initialized.
+	 */
+	public static reinit(): void {
+		if (typeof document === 'undefined') return;
+		const elements = document.querySelectorAll<HTMLElement>('[data-kt-datatable="true"]');
+		elements.forEach((element) => {
+			try {
+				const instance = KTDataTable.getInstance(element);
+				if (instance && typeof instance.dispose === 'function') {
+					instance.dispose();
+				}
+				KTData.remove(element, 'datatable');
+				element.removeAttribute('data-kt-datatable-initialized');
+				element.classList.remove('datatable-initialized');
+			} catch {
+				// ignore per-element errors
+			}
+		});
+		KTDataTable._instances.clear();
 		KTDataTable.createInstances();
 	}
 

package/src/components/datatable/types.ts

@@ -101,6 +101,20 @@ export interface KTDataTableConfigInterface {
 				rowData: KTDataTableDataInterface,
 				row: HTMLTableRowElement,
 			) => void;
+			/**
+			 * Sort comparison type for this column. When 'numeric', values are parsed
+			 * (e.g. strip currency/commas) and compared as numbers.
+			 */
+			sortType?: 'string' | 'numeric';
+			/**
+			 * Custom value used for sorting. When set, this is used instead of the raw
+			 * cell value (and instead of sortType). Return a number or string to sort by.
+			 * Use for custom formats (e.g. dates, combined fields, custom parsing).
+			 */
+			sortValue?: (
+				cellValue: KTDataTableDataInterface[keyof KTDataTableDataInterface] | string,
+				rowData: KTDataTableDataInterface,
+			) => number | string;
 		};
 	};
 

package/src/components/drawer/drawer.ts

@@ -33,6 +33,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		persistent: false,
 		container: '',
 		focus: true,
+		keepInPlaceWithin: '',
 	};
 	protected override _config: KTDrawerConfigInterface = this._defaultConfig;
 	protected _isOpen: boolean = false;
@@ -91,26 +92,19 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 		KTDrawer.hide();
 
-		// If drawer needs to be in front of backdrop, ensure it's in body (for proper z-index stacking)
-		// This ensures the drawer and backdrop are in the same stacking context
+		// When container="body", move drawer to body only if NOT inside an element matching keepInPlaceWithin.
+		// When keepInPlaceWithin is set (e.g. for SPA/persisted layouts), keeping the drawer in place lets the host preserve it across navigations.
 		if (this._getOption('container') === 'body' && this._element.parentElement !== document.body) {
-			// Store original parent for restoration when hiding
-			if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
-				const originalParent = this._element.parentElement;
-				if (originalParent && originalParent !== document.body) {
-					this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
-					// Store a reference to find the parent later (using closest to find Livewire component or header)
-					const livewireComponent = originalParent.closest('[wire\\:id]');
-					const header = originalParent.closest('header#header');
-					if (livewireComponent) {
-						this._element.setAttribute('data-kt-drawer-original-wire-id', (livewireComponent as HTMLElement).getAttribute('wire:id') || '');
-					}
-					if (header) {
-						this._element.setAttribute('data-kt-drawer-original-in-header', 'true');
+			const keepInPlace = this._isKeepInPlace();
+			if (!keepInPlace) {
+				if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
+					const originalParent = this._element.parentElement;
+					if (originalParent && originalParent !== document.body) {
+						this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
 					}
 				}
+				document.body.appendChild(this._element);
 			}
-			document.body.appendChild(this._element);
 		}
 
 		if (this._getOption('backdrop') === true) this._createBackdrop();
@@ -209,23 +203,11 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 	protected _handleContainer(): void {
 		if (this._getOption('container')) {
 			if (this._getOption('container') === 'body') {
-				// Check if drawer is in a persisted Livewire component (like header with @persist)
-				// If so, don't move it to body - keep it in place so Livewire can preserve it
-				// This follows the same pattern as dropdowns/menus which work with wire:navigate
-				const originalParent = this._element.parentNode;
-				const isInPersistedComponent = originalParent &&
-					((originalParent as HTMLElement).closest('[wire\\:id]') !== null ||
-					 (originalParent as HTMLElement).closest('header#header') !== null);
-
-				if (isInPersistedComponent) {
-					// Don't move to body - keep in original location for Livewire persistence
-					// Use fixed positioning to achieve the same visual effect
-					// Ensure drawer has fixed positioning to work from its current location
+				if (this._isKeepInPlace()) {
 					if (!this._element.style.position || this._element.style.position === 'static') {
 						this._element.style.position = 'fixed';
 					}
 				} else {
-					// Not in persisted component - safe to move to body (follows original behavior)
 					document.body.appendChild(this._element);
 				}
 			} else {
@@ -236,6 +218,22 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		}
 	}
 
+	/** True when drawer is inside an element matching keepInPlaceWithin (so we keep it in place instead of moving to body). */
+	protected _isKeepInPlace(): boolean {
+		const selector = (this._getOption('keepInPlaceWithin') as string)?.trim();
+		if (!selector || !this._element?.parentElement) return false;
+		const parent = this._element.parentElement;
+		const selectors = selector.split(',').map((s) => s.trim()).filter(Boolean);
+		for (const sel of selectors) {
+			try {
+				if (parent.closest(sel) !== null) return true;
+			} catch {
+				// invalid selector, skip
+			}
+		}
+		return false;
+	}
+
 	protected _autoFocus(): void {
 		if (!this._element) return;
 		const input: HTMLInputElement | null = this._element.querySelector(
@@ -253,7 +251,12 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		this._backdropElement = document.createElement('DIV');
 		this._backdropElement.style.zIndex = (zindex - 1).toString();
 		this._backdropElement.setAttribute('data-kt-drawer-backdrop', 'true');
-		document.body.append(this._backdropElement);
+		const parent = this._element.parentElement;
+		if (parent) {
+			parent.insertBefore(this._backdropElement, this._element);
+		} else {
+			document.body.append(this._backdropElement);
+		}
 		KTDom.reflow(this._backdropElement);
 		KTDom.addClass(
 			this._backdropElement,
@@ -284,8 +287,8 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		return KTUtils.stringToBoolean(this._getOption('enable'));
 	}
 
-	public toggle(): void {
-		return this._toggle();
+	public toggle(relatedTarget?: HTMLElement): void {
+		return this._toggle(relatedTarget);
 	}
 
 	public show(relatedTarget?: HTMLElement): void {
@@ -504,7 +507,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 				const drawer = KTDrawer.getInstance(target);
 
 				if (drawer) {
-					drawer.toggle();
+					drawer.toggle(target);
 				} else {
 					// Drawer element not found - wait for it to appear (handles persisted Livewire components)
 					// Check if drawer exists in persisted components (might be in header that's persisted)
@@ -522,7 +525,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 							// Get instance and toggle
 							const drawerInstance = KTDrawer.getInstance(drawerElement);
 							if (drawerInstance) {
-								drawerInstance.toggle();
+								drawerInstance.toggle(target);
 							}
 						} else {
 							// Drawer never appeared - trigger a reinit to see if it helps
@@ -537,7 +540,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 									}
 									const drawerInstance = KTDrawer.getInstance(drawerAfterReinit as HTMLElement);
 									if (drawerInstance) {
-										drawerInstance.toggle();
+										drawerInstance.toggle(target);
 									}
 								}
 							}, 500);

package/src/components/drawer/types.ts

@@ -17,9 +17,11 @@ export interface KTDrawerConfigInterface {
 	persistent: boolean;
 	focus: boolean;
 	container: string;
+	/** When set, drawer is not moved to body when inside an element matching this selector (e.g. for SPA/persisted layouts). Comma-separated for multiple selectors. */
+	keepInPlaceWithin?: string;
 }
 export interface KTDrawerInterface {
-	show(): void;
+	show(relatedTarget?: HTMLElement): void;
 	hide(): void;
-	toggle(): void;
+	toggle(relatedTarget?: HTMLElement): void;
 }

package/src/components/dropdown/dropdown.ts

@@ -45,6 +45,8 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	protected _menuElement: HTMLElement;
 	protected _isTransitioning: boolean = false;
 	protected _isOpen: boolean = false;
+	/** Timestamp when _show() was last called; used to ignore duplicate _hide() from double handlers */
+	protected _shownAt: number = 0;
 
 	constructor(element: HTMLElement, config?: KTDropdownConfigInterface) {
 		super();
@@ -206,10 +208,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 			this._fireEvent('shown');
 			this._dispatchEvent('shown');
 		});
+		this._shownAt = Date.now();
 	}
 
 	protected _hide(): void {
 		if (!this._isOpen || this._isTransitioning) return;
+		// If another handler fired _hide() right after _show() (e.g. double initHandlers), ignore
+		if (this._shownAt && Date.now() - this._shownAt < 150) return;
 
 		const payload = { cancel: false };
 		this._fireEvent('hide', payload);