@keenthemes/ktui 1.0.25 → 1.0.27

package/src/components/select/select.ts

@@ -311,6 +311,15 @@ export class KTSelect extends KTComponent {
 		// Initialize options
 		this._preSelectOptions(this._element);
 
+		// Prevent browser auto-selection when placeholder is configured
+		if (
+			this._config.placeholder &&
+			this._state.getSelectedOptions().length === 0 &&
+			this._preSelectedValues.length === 0
+		) {
+			(this._element as HTMLSelectElement).value = '';
+		}
+
 		// Apply pre-selected values captured before remote data was loaded
 		if (this._preSelectedValues.length > 0) {
 			if (this._config.debug) {
@@ -638,6 +647,14 @@ export class KTSelect extends KTComponent {
 		// Initialize options
 		this._preSelectOptions(this._element);
 
+		// Prevent browser auto-selection when placeholder is configured
+		if (
+			this._config.placeholder &&
+			this._state.getSelectedOptions().length === 0
+		) {
+			(this._element as HTMLSelectElement).value = '';
+		}
+
 		// Apply disabled state if needed
 		this._applyInitialDisabledState();
 
@@ -1223,6 +1240,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 +1266,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 +1387,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 +1846,274 @@ export class KTSelect extends KTComponent {
 
 	/**
 	 * Update the dropdown to sync with native select element changes
-	 * Optionally accepts new options to replace existing ones
-	 * @param newOptions Optional array of new options [{value, text}, ...]
+	 * For remote selects, refetches data from the server and preserves selections
+	 * Optionally accepts new options to replace existing ones (static selects only)
+	 *
+	 * @param newOptions Optional array of new options [{value, text}, ...] (static selects only)
 	 * @public
+	 * @remarks
+	 * - For static selects: rebuilds dropdown from native select or new options
+	 * - For remote selects: fetches fresh data, preserves matching selections
+	 * - Selections are preserved if their values exist in new remote data
+	 * - Selections are cleared if their values don't exist in new data
+	 * @fires updated - After update completes successfully
+	 * @fires updateError - If remote data fetch fails
 	 */
 	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) => {
+					// Capture currently selected values before clearing
+					const currentlySelected = this._state.getSelectedOptions();
+
+					// Clear existing options (also captures to _preSelectedValues)
+					this._clearExistingOptions();
+
+					// Get all available values from new remote data
+					const availableValues = items.map((item) => item.id);
+
+					// Filter to only values that exist in new data
+					const validSelections = currentlySelected.filter((value) =>
+						availableValues.includes(value),
+					);
+
+					if (this._config.debug && currentlySelected.length > 0) {
+						console.log(
+							'update(): Preserving selections that exist in new data:',
+							validSelections,
+						);
+					}
+
+					// Add new options from remote data and restore selection state
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+
+						// Restore selected attribute for preserved selections
+						if (validSelections.includes(item.id)) {
+							option.selected = true;
+						}
+
+						this._element.appendChild(option);
+					});
+
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Sync selection state from native select (now has selected attributes)
+					this._syncSelectionFromNative();
+
+					// 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();
 		}
 
-		// Rebuild dropdown from native select
-		this._rebuildOptionsFromNative();
+		// Dispatch reload start event
+		this._dispatchEvent('reloadStart');
+		this._fireEvent('reloadStart');
 
-		// Dispatch updated event
-		this._dispatchEvent('updated');
-		this._fireEvent('updated');
+		// Capture currently selected values before clearing
+		const currentlySelected = this._state.getSelectedOptions();
+
+		// Fetch fresh remote data
+		return this._remoteModule
+			.fetchData()
+			.then((items) => {
+				// Clear existing options (captures to _preSelectedValues)
+				this._clearExistingOptions();
+
+				// Update state with new items
+				return this._state.setItems(items).then(() => {
+					// Generate new options HTML
+					this._generateOptionsHtml(this._element);
+
+					// Preserve selections by marking matching options as selected
+					const availableValues = items.map((item) =>
+						item.id !== undefined ? String(item.id) : '',
+					);
+					const validSelections = currentlySelected.filter((value) =>
+						availableValues.includes(value),
+					);
+
+					if (this._config.debug && currentlySelected.length > 0) {
+						console.log(
+							'reload(): Preserving selections that exist in new data:',
+							validSelections,
+						);
+					}
+
+					// Mark preserved selections on new options
+					validSelections.forEach((value) => {
+						const option = Array.from(
+							this._element.querySelectorAll('option'),
+						).find((opt) => opt.value === value) as HTMLOptionElement;
+						if (option) {
+							option.selected = true;
+						}
+					});
+
+					// Update the dropdown
+					this._updateDropdownWithNewOptions();
+
+					// Sync selection state from native select (now has selected attributes)
+					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();
+					}
+
+					// Dispatch reload complete event
+					this._dispatchEvent('reloadComplete');
+					this._fireEvent('reloadComplete');
+				});
+			})
+			.catch((error) => {
+				console.error('Error reloading remote data:', error);
+
+				// 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 and preserves selections
+	 * that exist in the newly fetched data
+	 *
 	 * @public
+	 * @remarks
+	 * - For static selects: syncs visual state with native select
+	 * - For remote selects: fetches fresh data, preserves matching selections
+	 * - Selections are preserved if their values exist in new remote data
+	 * - Selections are cleared if their values don't exist in new data
+	 * @fires refreshed - After refresh completes successfully
+	 * @fires refreshError - If remote data fetch fails
 	 */
 	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) => {
+					// Capture currently selected values before clearing
+					const currentlySelected = this._state.getSelectedOptions();
 
-		// Reapply ARIA attributes
-		this._setAriaAttributes();
+					// Clear existing options (also captures to _preSelectedValues)
+					this._clearExistingOptions();
+
+					// Get all available values from new remote data
+					const availableValues = items.map((item) => item.id);
 
-		// Dispatch refreshed event
-		this._dispatchEvent('refreshed');
-		this._fireEvent('refreshed');
+					// Filter to only values that exist in new data
+					const validSelections = currentlySelected.filter((value) =>
+						availableValues.includes(value),
+					);
+
+					if (this._config.debug && currentlySelected.length > 0) {
+						console.log(
+							'refresh(): Preserving selections that exist in new data:',
+							validSelections,
+						);
+					}
+
+					// Add new options and restore selection state
+					items.forEach((item) => {
+						const option = document.createElement('option');
+						option.value = item.id;
+						option.textContent = item.title;
+						if (item.disabled) option.disabled = true;
+
+						// Restore selected attribute for preserved selections
+						if (validSelections.includes(item.id)) {
+							option.selected = true;
+						}
+
+						this._element.appendChild(option);
+					});
+
+					// Rebuild dropdown
+					this._rebuildOptionsFromNative();
+
+					// Sync selection state from native select (now has selected attributes)
+					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');
+		}
 	}
 
 	/**
@@ -1853,7 +2122,6 @@ export class KTSelect extends KTComponent {
 	 * ========================================================================
 	 */
 
-
 	/**
 	 * Create instances of KTSelect for all matching elements
 	 */
@@ -2091,7 +2359,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 +2637,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;

package/lib/cjs/components/config.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable max-len */
-var KTGlobalComponentsConfig = {
-    modal: {
-        backdropClass: 'transition-all duration-300',
-    },
-    drawer: {
-        backdropClass: 'transition-all duration-300',
-        hiddenClass: 'hidden'
-    },
-    collapse: {
-        hiddenClass: 'hidden',
-    },
-    dismiss: {
-        hiddenClass: 'hidden',
-    },
-    tabs: {
-        hiddenClass: 'hidden',
-    },
-    accordion: {
-        hiddenClass: 'hidden',
-    }
-};
-exports.default = KTGlobalComponentsConfig;
-//# sourceMappingURL=config.js.map

package/lib/cjs/components/config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/components/config.ts"],"names":[],"mappings":";;AAAA,4BAA4B;AAC5B,IAAM,wBAAwB,GAAG;IAC/B,KAAK,EAAE;QACL,aAAa,EAAE,6BAA6B;KAC7C;IACD,MAAM,EAAE;QACN,aAAa,EAAE,6BAA6B;QAC5C,WAAW,EAAE,QAAQ;KACtB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,QAAQ;KACtB;IACD,OAAO,EAAE;QACP,WAAW,EAAE,QAAQ;KACtB;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,QAAQ;KACtB;IACD,SAAS,EAAE;QACT,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC;AAEF,kBAAe,wBAAwB,CAAC"}

package/lib/cjs/components/config.umd.js

@@ -1,23 +0,0 @@
-/* eslint-disable max-len */
-window.KTGlobalComponentsConfig = {
-    modal: {
-        backdropClass: 'transition-all duration-300',
-    },
-    drawer: {
-        backdropClass: 'transition-all duration-300',
-        hiddenClass: 'hidden'
-    },
-    collapse: {
-        hiddenClass: 'hidden',
-    },
-    dismiss: {
-        hiddenClass: 'hidden',
-    },
-    tabs: {
-        hiddenClass: 'hidden',
-    },
-    accordion: {
-        hiddenClass: 'hidden',
-    }
-};
-//# sourceMappingURL=config.umd.js.map

package/lib/cjs/components/config.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config.umd.js","sourceRoot":"","sources":["../../../src/components/config.umd.js"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,MAAM,CAAC,wBAAwB,GAAG;IAChC,KAAK,EAAE;QACL,aAAa,EAAE,6BAA6B;KAC7C;IACD,MAAM,EAAE;QACN,aAAa,EAAE,6BAA6B;QAC5C,WAAW,EAAE,QAAQ;KACtB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,QAAQ;KACtB;IACD,OAAO,EAAE;QACP,WAAW,EAAE,QAAQ;KACtB;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,QAAQ;KACtB;IACD,SAAS,EAAE;QACT,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC"}

package/lib/cjs/components/menu/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KTMenu = void 0;
-var menu_1 = require("./menu");
-Object.defineProperty(exports, "KTMenu", { enumerable: true, get: function () { return menu_1.KTMenu; } });
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/menu/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/menu/index.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;AAAvB,8FAAA,MAAM,OAAA"}