@keenthemes/ktui 1.2.4 → 1.2.5

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

@@ -83,11 +83,11 @@ export interface KTDataTableTableRenderer<T extends KTDataTableDataInterface> {
 export interface KTDataTablePaginationRendererInput {
 	config: KTDataTableConfigInterface;
 	dataLength: number;
-	infoElement: HTMLElement;
+	infoElement?: HTMLElement | null;
 	paginateData: (page: number) => void;
-	paginationElement: HTMLElement;
+	paginationElement?: HTMLElement | null;
 	reloadPageSize: (pageSize: number, page?: number) => void;
-	sizeElement: HTMLSelectElement;
+	sizeElement?: HTMLSelectElement | null;
 	state: KTDataTableStateInterface;
 }
 

package/src/components/datatable/datatable-local-provider.ts

@@ -63,25 +63,24 @@ export class KTDataTableLocalDataProvider<
 
 		if (search) {
 			const searchTerm = typeof search === 'string' ? search : '';
-			filteredData = data = this.options.config.search.callback.call(
-				this,
-				data,
-				searchTerm,
-			) as T[];
+			const searchCallback = this.options.config.search?.callback;
+			if (searchCallback) {
+				filteredData = data = searchCallback.call(
+					this,
+					data,
+					searchTerm,
+				) as T[];
+			}
 		}
 
+		const sortCallback = this.options.config.sort?.callback;
 		if (
 			sortField !== undefined &&
 			sortOrder !== undefined &&
 			sortOrder !== '' &&
-			typeof this.options.config.sort.callback === 'function'
+			typeof sortCallback === 'function'
 		) {
-			data = this.options.config.sort.callback.call(
-				this,
-				data,
-				sortField as string,
-				sortOrder,
-			) as T[];
+			data = sortCallback.call(this, data, sortField as string, sortOrder) as T[];
 		}
 
 		if (data?.length > 0) {
@@ -114,7 +113,7 @@ export class KTDataTableLocalDataProvider<
 		const { _state, ...restConfig } = this.options.config;
 		const checksum: string = KTUtils.checksum(JSON.stringify(restConfig));
 
-		if (_state._configChecksum !== checksum) {
+		if ((_state?._configChecksum ?? '') !== checksum) {
 			this.options.stateStore.patchState({ _configChecksum: checksum });
 			return true;
 		}

package/src/components/datatable/datatable-pagination-renderer.ts

@@ -13,21 +13,27 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 	public render(
 		input: KTDataTablePaginationRendererInput,
 	): KTDataTableCleanup | void {
-		this.removeChildElements(input.sizeElement);
-		this.createPageSizeControls(input);
+		if (input.sizeElement) {
+			this.removeChildElements(input.sizeElement);
+			this.createPageSizeControls(input);
+		}
 
-		this.removeChildElements(input.paginationElement);
-		this.createPaginationControls(input);
+		if (input.paginationElement) {
+			this.removeChildElements(input.paginationElement);
+			this.createPaginationControls(input);
+		}
 
 		return () => {
 			if (input.sizeElement) {
 				input.sizeElement.onchange = null;
 			}
-			this.removeChildElements(input.paginationElement);
+			if (input.paginationElement) {
+				this.removeChildElements(input.paginationElement);
+			}
 		};
 	}
 
-	private removeChildElements(container: HTMLElement): void {
+	private removeChildElements(container?: HTMLElement | null): void {
 		if (!container) {
 			return;
 		}
@@ -39,13 +45,15 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 
 	private createPageSizeControls(
 		input: KTDataTablePaginationRendererInput,
-	): HTMLSelectElement {
+	): void {
 		if (!input.sizeElement) {
-			return input.sizeElement;
+			return;
 		}
 
+		const pageSizes = input.config.pageSizes ?? [5, 10, 20, 30, 50];
+
 		setTimeout(() => {
-			const options = input.config.pageSizes.map((size: number) => {
+			const options = pageSizes.map((size: number) => {
 				const option = document.createElement('option') as HTMLOptionElement;
 				option.value = String(size);
 				option.text = String(size);
@@ -62,18 +70,12 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 				1,
 			);
 		};
-
-		return input.sizeElement;
 	}
 
 	private createPaginationControls(
 		input: KTDataTablePaginationRendererInput,
-	): HTMLElement {
-		if (
-			!input.infoElement ||
-			!input.paginationElement ||
-			input.dataLength === 0
-		) {
+	): HTMLElement | null {
+		if (!input.paginationElement || input.dataLength === 0) {
 			return null;
 		}
 
@@ -86,7 +88,13 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 	private setPaginationInfoText(
 		input: KTDataTablePaginationRendererInput,
 	): void {
-		input.infoElement.textContent = input.config.info
+		if (!input.infoElement) {
+			return;
+		}
+
+		const infoTemplate =
+			input.config.info ?? '{start}-{end} of {total}';
+		input.infoElement.textContent = infoTemplate
 			.replace(
 				'{start}',
 				(input.state.page - 1) * input.state.pageSize + 1 + '',
@@ -105,8 +113,14 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 		paginationContainer: HTMLElement,
 		input: KTDataTablePaginationRendererInput,
 	): void {
+		const pagination = input.config.pagination;
+		if (!pagination) {
+			return;
+		}
+
 		const { page: currentPage, totalPages } = input.state;
-		const { previous, next, number, more } = input.config.pagination;
+		const { previous, next, number, more } = pagination;
+		const pageMoreLimit = input.config.pageMoreLimit ?? 3;
 
 		const createButton = (
 			text: string,
@@ -135,7 +149,7 @@ export class KTDataTableDomPaginationRenderer implements KTDataTablePaginationRe
 			const range = this.calculatePageRange(
 				currentPage,
 				totalPages,
-				input.config.pageMoreLimit,
+				pageMoreLimit,
 			);
 
 			if (range.start > 1) {

package/src/components/datatable/datatable-remote-provider.ts

@@ -137,6 +137,9 @@ export class KTDataTableRemoteDataProvider<
 			this.options.config.requestMethod;
 		let requestBody: RequestInit['body'] | undefined = undefined;
 		let apiEndpoint = this.options.config.apiEndpoint;
+		if (!apiEndpoint) {
+			throw new Error('KTDataTable: apiEndpoint is required for remote fetch');
+		}
 
 		if (this.abortController) {
 			this.abortController.abort();

package/src/components/datatable/datatable-table-renderer.ts

@@ -130,7 +130,7 @@ export class KTDataTableDomTableRenderer<
 			td.innerHTML = value as string;
 
 			this.applyOriginalTdClass(input, td, rowIndex, colIndex);
-			this.applyDataRowAttributes(td, dataRowAttributes, colIndex);
+			this.applyDataRowAttributes(td, dataRowAttributes ?? null, colIndex);
 
 			row.appendChild(td);
 		}
@@ -142,39 +142,47 @@ export class KTDataTableDomTableRenderer<
 		item: T,
 		rowIndex: number,
 	): void {
-		Object.keys(input.config.columns).forEach(
-			(key: keyof T, colIndex: number) => {
-				const td = document.createElement('td');
-				const columnDef = input.config.columns[key as string];
-
-				this.applyOriginalTdClass(input, td, rowIndex, colIndex);
-
-				if (typeof columnDef.render === 'function') {
-					const result = columnDef.render.call(
-						input.context,
-						item[key],
-						item,
-						input.context,
-					);
-					if (
-						result instanceof HTMLElement ||
-						result instanceof DocumentFragment
-					) {
-						td.appendChild(result);
-					} else if (typeof result === 'string') {
-						td.innerHTML = result as string;
-					}
-				} else {
-					td.textContent = item[key] as string;
-				}
+		const columns = input.config.columns;
+		if (!columns) {
+			return;
+		}
+
+		Object.keys(columns).forEach((key, colIndex) => {
+			const columnDef = columns[key];
+			if (!columnDef) {
+				return;
+			}
+			const colKey = key as keyof T;
+
+			const td = document.createElement('td');
+
+			this.applyOriginalTdClass(input, td, rowIndex, colIndex);
 
-				if (typeof columnDef.createdCell === 'function') {
-					columnDef.createdCell.call(input.context, td, item[key], item, row);
+			if (typeof columnDef.render === 'function') {
+				const result = columnDef.render.call(
+					input.context,
+					item[colKey],
+					item,
+					input.context,
+				);
+				if (
+					result instanceof HTMLElement ||
+					result instanceof DocumentFragment
+				) {
+					td.appendChild(result);
+				} else if (typeof result === 'string') {
+					td.innerHTML = result as string;
 				}
+			} else {
+				td.textContent = item[colKey] as string;
+			}
 
-				row.appendChild(td);
-			},
-		);
+			if (typeof columnDef.createdCell === 'function') {
+				columnDef.createdCell.call(input.context, td, item[colKey], item, row);
+			}
+
+			row.appendChild(td);
+		});
 	}
 
 	private applyOriginalTdClass(
@@ -194,7 +202,7 @@ export class KTDataTableDomTableRenderer<
 
 	private applyDataRowAttributes(
 		td: HTMLTableCellElement,
-		dataRowAttributes: KTDataTableAttributeInterface,
+		dataRowAttributes: KTDataTableAttributeInterface | null,
 		colIndex: number,
 	): void {
 		if (dataRowAttributes && dataRowAttributes[colIndex]) {

package/src/components/datatable/datatable.ts

@@ -74,9 +74,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private _originalTdClasses: string[][] = []; // Store original td classes as a 2D array [row][col]
 	private _originalThClasses: string[] = []; // Store original th classes
 
-	private _infoElement: HTMLElement;
-	private _sizeElement: HTMLSelectElement;
-	private _paginationElement: HTMLElement;
+	private _infoElement: HTMLElement | null = null;
+	private _sizeElement: HTMLSelectElement | null = null;
+	private _paginationElement: HTMLElement | null = null;
 
 	private _checkbox: KTDataTableCheckboxAPI;
 	private _sortHandler: KTDataTableSortAPI<T>;
@@ -106,6 +106,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._defaultConfig = this._initDefaultConfig(config);
 
 		this._init(element);
+		if (!this._element) {
+			return;
+		}
 		this._buildConfig();
 		this._stateStore = new KTDataTableConfigStateStore(this._config);
 		this._eventAdapter = createDataTableEventAdapter(
@@ -425,43 +428,35 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 * @returns {void}
 	 */
 	private _initElements(): void {
-		/**
-		 * Data table element
-		 */
-		this._tableElement = this._element.querySelector<HTMLTableElement>(
-			this._config.attributes.table,
-		)!;
-		/**
-		 * Table body element
-		 */
+		const root = this._element;
+		const attrs = this._config.attributes;
+		if (!root || !attrs?.table) {
+			throw new Error('KTDataTable: root element and table selector are required');
+		}
+
+		const tableEl = root.querySelector<HTMLTableElement>(attrs.table);
+		if (!tableEl) {
+			throw new Error(`KTDataTable: table element not found (${attrs.table})`);
+		}
+		this._tableElement = tableEl;
+
 		this._tbodyElement =
 			this._tableElement.tBodies[0] || this._tableElement.createTBody();
-		/**
-		 * Table head element
-		 */
-		this._theadElement = this._tableElement.tHead!;
 
-		// Store original classes
+		this._theadElement =
+			this._tableElement.tHead ?? this._tableElement.createTHead();
+
 		this._storeOriginalClasses();
 
-		/**
-		 * Pagination info element
-		 */
-		this._infoElement = this._element.querySelector<HTMLElement>(
-			this._config.attributes.info,
-		)!;
-		/**
-		 * Page size dropdown element
-		 */
-		this._sizeElement = this._element.querySelector<HTMLSelectElement>(
-			this._config.attributes.size,
-		)!;
-		/**
-		 * Pagination element
-		 */
-		this._paginationElement = this._element.querySelector<HTMLElement>(
-			this._config.attributes.pagination,
-		)!;
+		this._infoElement = attrs.info
+			? root.querySelector<HTMLElement>(attrs.info)
+			: null;
+		this._sizeElement = attrs.size
+			? root.querySelector<HTMLSelectElement>(attrs.size)
+			: null;
+		this._paginationElement = attrs.pagination
+			? root.querySelector<HTMLElement>(attrs.pagination)
+			: null;
 	}
 
 	/**
@@ -540,7 +535,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 * @returns {void}
 	 */
 	private _finalize(): void {
-		this._element.classList.add('datatable-initialized');
+		this._element?.classList.add('datatable-initialized');
 
 		// Initialize checkbox logic
 		this._checkbox.init();
@@ -600,7 +595,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			// Create a new debounced search function
 			const debouncedSearch = this._debounce(() => {
 				this.search(searchElement.value);
-			}, this._config.search.delay);
+			}, this._config.search?.delay ?? 500);
 
 			// Store the new debounced function as a property of the element
 			searchWithDebounce._debouncedSearch = debouncedSearch;
@@ -647,7 +642,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 	private _createUrl(
 		pathOrUrl: string,
-		baseUrl: string | null = window.location.origin,
+		baseUrl: string | null = typeof window !== 'undefined'
+			? window.location.origin
+			: null,
 	): URL {
 		// Regular expression to check if the input is a full URL
 		const isFullUrl = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(pathOrUrl);
@@ -661,7 +658,39 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			? pathOrUrl
 			: `/${pathOrUrl}`;
 
-		return new URL(normalizedPath, baseUrl);
+		// Opaque origins (e.g. srcdoc iframes) serialize as the string "null", which is not a valid URL base.
+		const bases: string[] = [];
+		if (baseUrl && baseUrl !== 'null') {
+			bases.push(baseUrl);
+		}
+		if (typeof window !== 'undefined') {
+			const href = window.location.href;
+			if (href && !bases.includes(href)) {
+				bases.push(href);
+			}
+			try {
+				if (window.parent !== window && window.parent.location?.href) {
+					const parentHref = window.parent.location.href;
+					if (parentHref && !bases.includes(parentHref)) {
+						bases.push(parentHref);
+					}
+				}
+			} catch {
+				// parent is cross-origin
+			}
+		}
+
+		for (const base of bases) {
+			try {
+				return new URL(normalizedPath, base);
+			} catch {
+				// try next base
+			}
+		}
+
+		throw new Error(
+			`KTDataTable: cannot resolve relative apiEndpoint "${pathOrUrl}" (no valid base URL; use an absolute apiEndpoint).`,
+		);
 	}
 
 	/**
@@ -683,7 +712,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			this._updateTable();
 		}
 
-		if (this._infoElement && this._paginationElement) {
+		if (this._infoElement || this._sizeElement || this._paginationElement) {
 			this._updatePagination();
 		}
 
@@ -778,38 +807,49 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 	// Method to show the loading spinner
 	private _showSpinner(): void {
-		const spinner =
-			this._element.querySelector<HTMLElement>(
-				this._config.attributes.spinner,
-			) || this._createSpinner();
+		const root = this._element;
+		const spinnerSel = this._config.attributes?.spinner;
+		const fromDom =
+			root && spinnerSel
+				? root.querySelector<HTMLElement>(spinnerSel)
+				: null;
+		const spinner = fromDom ?? this._createSpinner();
 		if (spinner) {
 			spinner.style.display = 'block';
 		}
-		this._element.classList.add(this._config.loadingClass);
+		root?.classList.add(this._config.loadingClass ?? 'loading');
 	}
 
 	// Method to hide the loading spinner
 	private _hideSpinner(): void {
-		const spinner = this._element.querySelector<HTMLElement>(
-			this._config.attributes.spinner,
-		);
+		const root = this._element;
+		const spinnerSel = this._config.attributes?.spinner;
+		const spinner =
+			root && spinnerSel
+				? root.querySelector<HTMLElement>(spinnerSel)
+				: null;
 		if (spinner) {
 			spinner.style.display = 'none';
 		}
-		this._element.classList.remove(this._config.loadingClass);
+		root?.classList.remove(this._config.loadingClass ?? 'loading');
 	}
 
 	// Method to create a spinner element if it doesn't exist
-	private _createSpinner(): HTMLElement {
-		if (typeof this._config.loading === 'undefined') {
+	private _createSpinner(): HTMLElement | null {
+		const loading = this._config.loading;
+		if (!loading) {
 			return null;
 		}
 
 		const template = document.createElement('template');
-		template.innerHTML = this._config.loading.template
+		template.innerHTML = loading.template
 			.trim()
-			.replace('{content}', this._config.loading.content);
-		const spinner = template.content.firstChild as HTMLElement;
+			.replace('{content}', loading.content);
+		const first = template.content.firstChild;
+		if (!first || !(first instanceof HTMLElement)) {
+			return null;
+		}
+		const spinner = first;
 		spinner.setAttribute('data-kt-datatable-spinner', 'true');
 
 		this._tableElement.appendChild(spinner);
@@ -878,18 +918,15 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	}
 
 	private _tableId(): string {
-		let id: string = null;
-		// If the table element has an ID, use that
-		if (this._tableElement?.getAttribute('id')) {
-			id = this._tableElement.getAttribute('id') as string;
+		const tableIdAttr = this._tableElement?.getAttribute('id');
+		if (tableIdAttr) {
+			return tableIdAttr;
 		}
-
-		// If the component element has an ID, use that
-		if (this._element?.getAttribute('id')) {
-			id = this._element.getAttribute('id') as string;
+		const rootIdAttr = this._element?.getAttribute('id');
+		if (rootIdAttr) {
+			return rootIdAttr;
 		}
-
-		return id;
+		return '';
 	}
 
 	/**
@@ -897,6 +934,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 * This method is called before re-rendering or when disposing the component.
 	 */
 	private _dispose() {
+		const root = this._element;
+		if (!root) {
+			return;
+		}
+
 		this._cleanupCallbacks.forEach((cleanup) => cleanup());
 		this._cleanupCallbacks = [];
 
@@ -939,12 +981,12 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		if (this._checkbox && typeof checkboxWithDispose.dispose === 'function') {
 			checkboxWithDispose.dispose();
 		} else {
-			// Remove header checkbox event listener if possible
-			const headerCheckElement = this._element.querySelector<HTMLInputElement>(
-				this._config.attributes.check,
-			);
-			if (headerCheckElement) {
-				headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
+			const checkSel = this._config.attributes?.check;
+			if (checkSel) {
+				const headerCheckElement = root.querySelector<HTMLInputElement>(checkSel);
+				if (headerCheckElement) {
+					headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
+				}
 			}
 		}
 		// KTDataTableSortAPI does not have a dispose method, but we can remove th click listeners by replacing them
@@ -956,22 +998,23 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		}
 
 		// --- 5. Remove spinner DOM node if it exists ---
-		const spinner = this._element.querySelector<HTMLElement>(
-			this._config.attributes.spinner,
-		);
-		if (spinner && spinner.parentNode) {
-			spinner.parentNode.removeChild(spinner);
+		const spinnerSel = this._config.attributes?.spinner;
+		if (spinnerSel) {
+			const spinner = root.querySelector<HTMLElement>(spinnerSel);
+			if (spinner?.parentNode) {
+				spinner.parentNode.removeChild(spinner);
+			}
 		}
-		this._element.classList.remove(this._config.loadingClass);
+		root.classList.remove(this._config.loadingClass ?? 'loading');
 
 		// --- 6. Remove instance reference from the DOM element ---
-		const elementWithInstance = KTDataTable.asElementWithInstance(
-			this._element,
-		);
+		const elementWithInstance = KTDataTable.asElementWithInstance(root);
 		if (elementWithInstance.instance) {
 			delete elementWithInstance.instance;
 		}
 
+		KTData.remove(root, this._name);
+
 		// --- 7. (Optional) Clear localStorage state ---
 		// Uncomment the following line if you want to clear state on dispose:
 		// this._deleteState();