@keenthemes/ktui 1.0.25 → 1.0.26

package/src/components/image-input/image-input.ts

@@ -28,10 +28,7 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 	protected _lastMode: string;
 	protected _selectedFile: File | null = null;
 
-	constructor(
-		element: HTMLElement,
-		config?: KTImageInputConfigInterface,
-	) {
+	constructor(element: HTMLElement, config?: KTImageInputConfigInterface) {
 		super();
 
 		if (KTData.has(element as HTMLElement, this._name)) return;
@@ -39,14 +36,14 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 		this._init(element);
 		this._buildConfig(config);
 
-	this._inputElement = this._element.querySelector('input[type="file"]')!;
-	this._hiddenElement = this._element.querySelector('input[type="hidden"]')!;
-	this._removeElement = this._element.querySelector(
-		'[data-kt-image-input-remove]',
-	)!;
-	this._previewElement = this._element.querySelector(
-		'[data-kt-image-input-preview]',
-	)!;
+		this._inputElement = this._element.querySelector('input[type="file"]')!;
+		this._hiddenElement = this._element.querySelector('input[type="hidden"]')!;
+		this._removeElement = this._element.querySelector(
+			'[data-kt-image-input-remove]',
+		)!;
+		this._previewElement = this._element.querySelector(
+			'[data-kt-image-input-preview]',
+		)!;
 
 		this._update();
 		this._handlers();
@@ -87,9 +84,9 @@ export class KTImageInput extends KTComponent implements KTImageInputInterface {
 			this._previewElement.style.backgroundImage = `url(${reader.result})`;
 		};
 
-	reader.readAsDataURL(this._inputElement.files[0]);
-	this._selectedFile = this._inputElement.files[0];
-	this._lastMode = 'new';
+		reader.readAsDataURL(this._inputElement.files[0]);
+		this._selectedFile = this._inputElement.files[0];
+		this._lastMode = 'new';
 
 		this._element.classList.add('changed');
 		this._removeElement.classList.remove('hidden');

package/src/components/modal/modal.ts

@@ -50,7 +50,11 @@ export class KTModal extends KTComponent implements KTModalInterface {
 		this._element.addEventListener('click', (event: Event) => {
 			if (this._element !== event.target) return;
 
-			if (this._getOption('backdropStatic') === false) {
+			// Only hide if both backdropStatic is false AND persistent is false
+			if (
+				this._getOption('backdropStatic') === false &&
+				KTUtils.stringToBoolean(this._getOption('persistent')) === false
+			) {
 				this._hide();
 			}
 		});

package/src/components/select/config.ts

@@ -291,6 +291,12 @@ export class KTSelectState {
 	}
 
 	public setSelectedOptions(value: string | string[]): void {
+		// Handle empty array case first to prevent undefined elements
+		if (Array.isArray(value) && value.length === 0) {
+			this._selectedOptions = [];
+			return;
+		}
+
 		if (
 			this._config.multiple &&
 			typeof value === 'string' &&

package/src/components/select/dropdown.ts

@@ -152,6 +152,31 @@ export class KTSelectDropdown extends KTComponent {
 		}
 	}
 
+	/**
+	 * Detect if the select is inside a modal container
+	 * @returns The modal element if found, null otherwise
+	 */
+	private _getModalContainer(): HTMLElement | null {
+		return this._element.closest(
+			'[data-kt-modal], .kt-modal, .kt-modal-center',
+		) as HTMLElement | null;
+	}
+
+	/**
+	 * Get the appropriate positioning strategy based on context
+	 * @returns 'fixed' if inside modal, 'absolute' otherwise
+	 */
+	private _getPositioningStrategy(): 'fixed' | 'absolute' {
+		// Check if config explicitly sets strategy
+		if (this._config.dropdownStrategy) {
+			return this._config.dropdownStrategy as 'fixed' | 'absolute';
+		}
+
+		// Use fixed positioning if inside a modal (to handle transform-based centering)
+		const modalParent = this._getModalContainer();
+		return modalParent ? 'fixed' : 'absolute';
+	}
+
 	/**
 	 * Initialize the Popper instance for dropdown positioning
 	 */
@@ -164,17 +189,21 @@ export class KTSelectDropdown extends KTComponent {
 
 		// Get configuration options
 		const placement = this._config.dropdownPlacement || 'bottom-start';
-		const strategy = this._config.dropdownStrategy || 'fixed';
+		const strategy = this._getPositioningStrategy();
 		const preventOverflow = this._config.dropdownPreventOverflow !== false;
 		const flip = this._config.dropdownFlip !== false;
 
+		// Detect modal container for boundary
+		const modalParent = this._getModalContainer();
+		const boundary = modalParent || 'clippingParents';
+
 		// Create new popper instance
 		this._popperInstance = createPopper(
 			this._toggleElement,
 			this._dropdownElement,
 			{
 				placement: placement as Placement,
-				strategy: strategy as 'fixed' | 'absolute',
+				strategy: strategy,
 				modifiers: [
 					{
 						name: 'offset',
@@ -185,7 +214,7 @@ export class KTSelectDropdown extends KTComponent {
 					{
 						name: 'preventOverflow',
 						options: {
-							boundary: 'viewport',
+							boundary: boundary,
 							altAxis: preventOverflow,
 						},
 					},

package/src/components/select/select.ts

@@ -1223,6 +1223,24 @@ export class KTSelect extends KTComponent {
 		});
 	}
 
+	/**
+	 * Sync native select value attribute for FormData support
+	 */
+	private _syncNativeSelectValue(): void {
+		const selectedOptions = this.getSelectedOptions();
+
+		if (this._config.multiple) {
+			// For multiple select, the selected options are marked via option.selected
+			// The native select's value property will return the first selected option's value
+			// FormData will include all selected values automatically
+		} else {
+			// For single select, set the value attribute explicitly
+			const selectedValue =
+				selectedOptions.length > 0 ? selectedOptions[0] : '';
+			(this._element as HTMLSelectElement).value = selectedValue;
+		}
+	}
+
 	/**
 	 * Update selected option display value
 	 */
@@ -1231,6 +1249,9 @@ export class KTSelect extends KTComponent {
 		const tagsEnabled = this._config.tags && this._tagsModule;
 		const valueDisplayEl = this.getValueDisplayElement();
 
+		// Sync native select value for FormData support
+		this._syncNativeSelectValue();
+
 		if (tagsEnabled) {
 			// Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
 			this._tagsModule.updateTagsDisplay(selectedOptions);
@@ -1349,6 +1370,9 @@ export class KTSelect extends KTComponent {
 			(opt as HTMLOptionElement).selected = false;
 		});
 
+		// Clear native select value
+		(this._element as HTMLSelectElement).value = '';
+
 		this.updateSelectedOptionDisplay();
 		this._updateSelectedOptionClass();
 
@@ -1805,46 +1829,178 @@ export class KTSelect extends KTComponent {
 
 	/**
 	 * Update the dropdown to sync with native select element changes
-	 * Optionally accepts new options to replace existing ones
+	 * For remote selects, refetches data from the server
+	 * Optionally accepts new options to replace existing ones (static selects only)
 	 * @param newOptions Optional array of new options [{value, text}, ...]
 	 * @public
 	 */
 	public update(newOptions?: Array<{ value: string; text: string }>): void {
-		if (newOptions) {
-			// Clear existing options except placeholder
-			this._clearExistingOptions();
-
-			// Add new options to native select
-			newOptions.forEach((opt) => {
-				const option = document.createElement('option');
-				option.value = opt.value;
-				option.textContent = opt.text;
-				this._element.appendChild(option);
-			});
+		// For remote selects, refetch data
+		if (this._config.remote && this._remoteModule) {
+			this._remoteModule
+				.fetchData()
+				.then((items) => {
+					// Clear existing options
+					this._clearExistingOptions();
+
+					// Add new options from remote data
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+						this._element.appendChild(option);
+					});
+
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Dispatch updated event
+					this._dispatchEvent('updated');
+					this._fireEvent('updated');
+				})
+				.catch((error) => {
+					console.error('Error updating remote data:', error);
+					this._dispatchEvent('updateError');
+					this._fireEvent('updateError');
+				});
+		} else {
+			// For static selects, handle new options
+			if (newOptions) {
+				// Clear existing options except placeholder
+				this._clearExistingOptions();
+
+				// Add new options to native select
+				newOptions.forEach((opt) => {
+					const option = document.createElement('option');
+					option.value = opt.value;
+					option.textContent = opt.text;
+					this._element.appendChild(option);
+				});
+			}
+
+			// Rebuild dropdown from native select
+			this._rebuildOptionsFromNative();
+
+			// Dispatch updated event
+			this._dispatchEvent('updated');
+			this._fireEvent('updated');
 		}
+	}
+
+	/**
+	 * Reload remote data and rebuild the dropdown
+	 * Only works with remote data enabled
+	 * @returns Promise that resolves when reload completes
+	 * @public
+	 */
+	public reload(): Promise<void> {
+		// Guard clause: only works with remote data
+		if (!this._config.remote || !this._remoteModule) {
+			console.warn('reload() only works with remote data enabled');
+			return Promise.resolve();
+		}
+
+		// Dispatch reload start event
+		this._dispatchEvent('reloadStart');
+		this._fireEvent('reloadStart');
+
+		// Fetch fresh remote data
+		return this._remoteModule
+			.fetchData()
+			.then((items) => {
+				// Clear existing options
+				this._clearExistingOptions();
+
+				// Update state with new items
+				return this._state.setItems(items).then(() => {
+					// Generate new options HTML
+					this._generateOptionsHtml(this._element);
+
+					// Update the dropdown
+					this._updateDropdownWithNewOptions();
+
+					// Sync selection state from native select
+					this._syncSelectionFromNative();
+
+					// Update visual display
+					this.updateSelectedOptionDisplay();
+					this._updateSelectedOptionClass();
+
+					// Update select all button state if applicable
+					if (this._config.multiple && this._config.enableSelectAll) {
+						this.updateSelectAllButtonState();
+					}
 
-		// Rebuild dropdown from native select
-		this._rebuildOptionsFromNative();
+					// Dispatch reload complete event
+					this._dispatchEvent('reloadComplete');
+					this._fireEvent('reloadComplete');
+				});
+			})
+			.catch((error) => {
+				console.error('Error reloading remote data:', error);
 
-		// Dispatch updated event
-		this._dispatchEvent('updated');
-		this._fireEvent('updated');
+				// Dispatch reload error event with error details
+				this._dispatchEvent('reloadError', { error });
+				this._fireEvent('reloadError', { error });
+
+				// Re-throw error so caller can handle it
+				throw error;
+			});
 	}
 
 	/**
 	 * Refresh the visual display and state without rebuilding options
+	 * For remote selects, refetches data from the server
 	 * @public
 	 */
 	public refresh(): void {
-		// Sync internal state from native select first
-		this._syncSelectionFromNative();
+		// For remote selects, refetch data
+		if (this._config.remote && this._remoteModule) {
+			this._remoteModule
+				.fetchData()
+				.then((items) => {
+					// Clear existing options
+					this._clearExistingOptions();
+
+					// Add new options
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+						this._element.appendChild(option);
+					});
 
-		// Reapply ARIA attributes
-		this._setAriaAttributes();
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Sync selection state
+					this._syncSelectionFromNative();
+
+					// Reapply ARIA attributes
+					this._setAriaAttributes();
+
+					// Dispatch refreshed event
+					this._dispatchEvent('refreshed');
+					this._fireEvent('refreshed');
+				})
+				.catch((error) => {
+					console.error('Error refreshing remote data:', error);
+					this._dispatchEvent('refreshError');
+					this._fireEvent('refreshError');
+				});
+		} else {
+			// For static selects, just sync visual state
+			this._syncSelectionFromNative();
+
+			// Reapply ARIA attributes
+			this._setAriaAttributes();
 
-		// Dispatch refreshed event
-		this._dispatchEvent('refreshed');
-		this._fireEvent('refreshed');
+			// Dispatch refreshed event
+			this._dispatchEvent('refreshed');
+			this._fireEvent('refreshed');
+		}
 	}
 
 	/**
@@ -1853,7 +2009,6 @@ export class KTSelect extends KTComponent {
 	 * ========================================================================
 	 */
 
-
 	/**
 	 * Create instances of KTSelect for all matching elements
 	 */
@@ -2091,7 +2246,9 @@ export class KTSelect extends KTComponent {
 		});
 
 		if (this._config.debug) {
-			console.log(`Updated original select with ${items.length} search results`);
+			console.log(
+				`Updated original select with ${items.length} search results`,
+			);
 		}
 	}
 
@@ -2367,16 +2524,16 @@ export class KTSelect extends KTComponent {
 						return;
 					}
 					const selectOption = new KTSelectOption(optionElement, this._config);
-				const renderedOption = selectOption.render();
-				optionsContainer.appendChild(renderedOption);
-			});
-			// Update internal references
-			this._options = this._dropdownContentElement.querySelectorAll(
-				'[data-kt-select-option]',
-			) as NodeListOf<HTMLElement>;
+					const renderedOption = selectOption.render();
+					optionsContainer.appendChild(renderedOption);
+				});
+				// Update internal references
+				this._options = this._dropdownContentElement.querySelectorAll(
+					'[data-kt-select-option]',
+				) as NodeListOf<HTMLElement>;
+			}
 		}
-	}
-	// Sync selection after rebuilding
+		// Sync selection after rebuilding
 		this._syncSelectionFromNative();
 		this.updateSelectedOptionDisplay();
 		this._updateSelectedOptionClass();

package/src/components/select/templates.ts

@@ -393,7 +393,8 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		let template = getTemplateStrings(config).tag;
-		let preparedContent = option.textContent || option.innerText || option.value || ''; // Default content is the option's text
+		let preparedContent =
+			option.textContent || option.innerText || option.value || ''; // Default content is the option's text
 
 		if (config.tagTemplate) {
 			let tagTemplateString = config.tagTemplate;