@keenthemes/ktui 1.0.12 → 1.0.14

package/src/components/select/templates.ts

@@ -11,14 +11,14 @@ import { renderTemplateString } from './utils';
  * Users can override any template by providing a matching key in the config.templates object.
  */
 export const coreTemplateStrings = {
-	dropdown: `<div data-kt-select-dropdown class="kt-select-dropdown hidden {{class}}" style="z-index: {{zindex}};">{{content}}</div>`,
-	options: `<ul role="listbox" aria-label="{{label}}" class="kt-select-options {{class}}" data-kt-select-options="true">{{content}}</ul>`,
-	error: `<li class="kt-select-error" role="alert">{{content}}</li>`,
-	highlight: `<span data-kt-select-highlight class="kt-select-highlight highlighted {{class}}">{{text}}</span>`,
+	dropdown: `<div data-kt-select-dropdown class="kt-select-dropdown hidden {{class}}" style="z-index: {{zindex}};"></div>`,
+	options: `<ul role="listbox" aria-label="{{label}}" class="kt-select-options {{class}}" data-kt-select-options="true"></ul>`,
+	error: `<li class="kt-select-error" role="alert"></li>`,
 	wrapper: `<div data-kt-select-wrapper class="kt-select-wrapper {{class}}"></div>`,
 	combobox: `
 		<div data-kt-select-combobox data-kt-select-display class="kt-select-combobox {{class}}">
-			<input class="kt-input kt-select-combobox-input" data-kt-select-search="true" data-kt-select-value="true" type="text" placeholder="{{placeholder}}" role="searchbox" aria-label="{{label}}" {{disabled}} />
+			<div data-kt-select-combobox-values="true" class="kt-select-combobox-values"></div>
+			<input class="kt-input kt-select-combobox-input" data-kt-select-search="true" type="text" placeholder="{{placeholder}}" role="searchbox" aria-label="{{label}}" {{disabled}} />
 			<button type="button" data-kt-select-clear-button="true" class="kt-select-combobox-clear-btn" aria-label="Clear selection">
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<line x1="18" y1="6" x2="6" y2="18"></line>
@@ -27,20 +27,22 @@ export const coreTemplateStrings = {
 			</button>
 		</div>
 	`,
+	placeholder: `<div data-kt-select-placeholder class="kt-select-placeholder {{class}}"></div>`,
 	display: `
 		<div data-kt-select-display class="kt-select-display {{class}}" tabindex="{{tabindex}}" role="button" data-selected="0" aria-haspopup="listbox" aria-expanded="false" aria-label="{{label}}" {{disabled}}>
-			<div data-kt-select-value="true" class="kt-select-label">{{content}}</div>
+			<div class="kt-select-option-text" data-kt-text-container="true">{{text}}</div>
 		</div>
 	`,
-	placeholder: `<div data-kt-select-placeholder class="kt-select-placeholder {{class}}">{{content}}</div>`,
-	option: `<li data-kt-select-option data-value="{{value}}" data-text="{{text}}" class="kt-select-option {{class}}" role="option" {{selected}} {{disabled}}>{{content}}</li>`,
-	search: `<div data-kt-select-search class="kt-select-search {{class}}"><input type="text" data-kt-select-search="true" placeholder="{{searchPlaceholder}}" class="kt-input kt-select-search-input" role="searchbox" aria-label="{{searchPlaceholder}}"/></div>`,
-	empty: `<li data-kt-select-empty class="kt-select-no-result {{class}}" role="status">{{content}}</li>`,
-	loading: `<li class="kt-select-loading {{class}}" role="status" aria-live="polite">{{content}}</li>`,
-	tag: `<div data-kt-select-tag="true" class="kt-select-tag {{class}}">
-			{{content}}
-		</div>`,
-	loadMore: `<li class="kt-select-load-more {{class}}" data-kt-select-load-more="true">{{content}}</li>`,
+	option: `
+		<li data-kt-select-option data-value="{{value}}" data-text="{{text}}" class="kt-select-option {{class}}" role="option" {{selected}} {{disabled}}>
+			<div class="kt-select-option-text" data-kt-text-container="true">{{text}}</div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5 ms-auto hidden text-primary kt-select-option-selected:block"><path d="M20 6 9 17l-5-5"/></svg>
+		</li>
+	`,
+	search: `<div data-kt-select-search class="kt-select-search {{class}}"><input type="text" data-kt-select-search="true" placeholder="{{searchPlaceholder}}" class="kt-input kt-input-ghost" role="searchbox" aria-label="{{searchPlaceholder}}"/></div>`,
+	empty: `<li data-kt-select-empty class="kt-select-no-result {{class}}" role="status"></li>`,
+	loading: `<li class="kt-select-loading {{class}}" role="status" aria-live="polite"></li>`,
+	tag: `<div data-kt-select-tag="true" class="kt-select-tag {{class}}"></div>`,
+	loadMore: `<li class="kt-select-load-more {{class}}" data-kt-select-load-more="true"></li>`,
 	tagRemoveButton: `<button type="button" data-kt-select-remove-button class="kt-select-tag-remove" aria-label="Remove tag" tabindex="0"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="9" y2="9"/><line x1="9" y1="3" x2="3" y2="9"/></svg></button>`,
 };
 
@@ -68,9 +70,9 @@ export interface KTSelectTemplateInterface {
 	/**
 	 * Renders an error message in the dropdown
 	 */
-	error: (config: KTSelectConfigInterface & { errorMessage: string }) => string;
-
-	highlight: (config: KTSelectConfigInterface, text: string) => HTMLElement;
+	error: (
+		config: KTSelectConfigInterface & { errorMessage: string },
+	) => HTMLElement;
 
 	// Main components
 	wrapper: (config: KTSelectConfigInterface) => HTMLElement;
@@ -91,7 +93,10 @@ export interface KTSelectTemplateInterface {
 	) => HTMLElement;
 
 	// Multi-select
-	tag: (option: HTMLOptionElement, config: KTSelectConfigInterface) => HTMLElement;
+	tag: (
+		option: HTMLOptionElement,
+		config: KTSelectConfigInterface,
+	) => HTMLElement;
 
 	placeholder: (config: KTSelectConfigInterface) => HTMLElement;
 }
@@ -143,15 +148,6 @@ export function getTemplateStrings(
  * Default templates for KTSelect component
  */
 export const defaultTemplates: KTSelectTemplateInterface = {
-	/**
-	 * Renders a highlighted text
-	 */
-	highlight: (config: KTSelectConfigInterface, text: string) => {
-		const template = getTemplateStrings(config).highlight;
-		const html = template.replace('{{text}}', text).replace('{{class}}', config.highlightClass || '');
-		return stringToElement(html);
-	},
-
 	/**
 	 * Renders the dropdown content
 	 */
@@ -159,17 +155,28 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface & { zindex?: number; content?: string },
 	) => {
 		let template = getTemplateStrings(config).dropdown;
-		let content = config.content || '';
+		// If a custom dropdownTemplate is provided, it's responsible for its own content.
+		// Otherwise, the base template is used, and content is appended later.
 		if (config.dropdownTemplate) {
-			content = renderTemplateString(config.dropdownTemplate, {
-				zindex: config.zindex ? String(config.zindex) : '',
-				content: config.content || '',
-				class: config.dropdownClass || '',
-			});
+			const renderedCustomTemplate = renderTemplateString(
+				config.dropdownTemplate,
+				{
+					zindex: config.zindex ? String(config.zindex) : '',
+					// content: config.content || '', // No longer pass content to custom template directly here
+					class: config.dropdownClass || '',
+				},
+			);
+			// The custom template IS the dropdown element
+			const customDropdownEl = stringToElement(renderedCustomTemplate);
+			if (config.zindex) customDropdownEl.style.zIndex = String(config.zindex);
+			if (config.dropdownClass)
+				customDropdownEl.classList.add(...config.dropdownClass.split(' '));
+			return customDropdownEl;
 		}
+
 		const html = template
 			.replace('{{zindex}}', config.zindex ? String(config.zindex) : '')
-			.replace('{{content}}', content)
+			// .replace('{{content}}', '') // Content is no longer part of the base template string
 			.replace('{{class}}', config.dropdownClass || '');
 		return stringToElement(html);
 	},
@@ -182,7 +189,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		const html = template
 			.replace('{{label}}', config.label || 'Options')
 			.replace('{{height}}', config.height ? String(config.height) : '250')
-			.replace('{{options}}', config.options || '')
+			// .replace('{{options}}', '') // Options are now appended dynamically
 			.replace('{{class}}', config.optionsClass || '');
 		return stringToElement(html);
 	},
@@ -191,32 +198,38 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the load more button for pagination
 	 */
 	loadMore: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config).loadMore.replace(
-			'{{loadMoreText}}',
-			config.loadMoreText || 'Load more...',
-		);
-		return stringToElement(html);
+		let html = getTemplateStrings(config)
+			.loadMore // .replace('{{loadMoreText}}', config.loadMoreText || 'Load more...') // Content is no longer in template string
+			.replace('{{class}}', config.loadMoreClass || '');
+		const element = stringToElement(html);
+		element.textContent = config.loadMoreText || 'Load more...';
+		return element;
 	},
 	/**
 	 * Renders an error message in the dropdown
 	 */
 	error: (
 		config: KTSelectConfigInterface & { errorMessage: string },
-	): string => {
+	): HTMLElement => {
+		// Changed return type to HTMLElement
 		const template = getTemplateStrings(config).error;
-		return template
-			.replace('{{errorMessage}}', config.errorMessage || 'An error occurred')
+		const html = template
+			// .replace('{{errorMessage}}', config.errorMessage || 'An error occurred') // Content is no longer in template string
 			.replace('{{class}}', config.errorClass || '');
+		const element = stringToElement(html);
+		element.textContent = config.errorMessage || 'An error occurred';
+		return element;
 	},
+
 	/**
 	 * Renders the main container for the select component
 	 */
 	wrapper: (config: KTSelectConfigInterface): HTMLElement => {
-		const html = getTemplateStrings(config).wrapper
-			.replace('{{class}}', config.wrapperClass || '');
+		const html = getTemplateStrings(config).wrapper.replace(
+			'{{class}}',
+			config.wrapperClass || '',
+		);
 		const element = stringToElement(html);
-		element.setAttribute('data-kt-select-combobox', config.combobox ? 'true' : 'false');
-		element.setAttribute('data-kt-select-tags', config.tags ? 'true' : 'false');
 		return element;
 	},
 
@@ -224,28 +237,21 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the display element (trigger) for the select
 	 */
 	display: (config: KTSelectConfigInterface): HTMLElement => {
-		if (config.combobox) {
-			let html = getTemplateStrings(config)
-				.combobox.replace(/{{placeholder}}/g, config.placeholder || 'Select...')
-				.replace(
-					/{{label}}/g,
-					config.label || config.placeholder || 'Select...',
-				)
-				.replace('{{disabled}}', config.disabled ? 'disabled' : '')
-				.replace('{{class}}', config.displayClass || '');
-			return stringToElement(html);
-		}
-
-		let content = config.label || config.placeholder || 'Select...';
-
-		let html = getTemplateStrings(config).display
-			.replace('{{tabindex}}', config.disabled ? '-1' : '0')
+		let html = getTemplateStrings(config)
+			.display.replace('{{tabindex}}', config.disabled ? '-1' : '0')
 			.replace('{{label}}', config.label || config.placeholder || 'Select...')
 			.replace('{{disabled}}', config.disabled ? 'aria-disabled="true"' : '')
 			.replace('{{placeholder}}', config.placeholder || 'Select...')
-			.replace('{{class}}', config.displayClass || '')
-			.replace('{{content}}', content);
-		return stringToElement(html);
+			.replace('{{class}}', config.displayClass || '');
+
+		const element = stringToElement(html);
+
+		// Add data-multiple attribute if in multiple select mode
+		if (config.multiple) {
+			element.setAttribute('data-multiple', 'true');
+		}
+
+		return element;
 	},
 
 	/**
@@ -256,37 +262,71 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		const isHtmlOption = option instanceof HTMLOptionElement;
+		let optionData: Record<string, any>;
+
+		if (isHtmlOption) {
+			// If it's a plain HTMLOptionElement, construct data similarly to how KTSelectOption would
+			// This branch might be less common if KTSelectOption instances are always used for rendering.
+			const el = option as HTMLOptionElement;
+			const textContent = el.textContent || '';
+			optionData = {
+				value: el.value,
+				text: textContent,
+				selected: el.selected,
+				disabled: el.disabled, // This captures original disabled state
+				content: textContent, // Default content to text
+				// Attempt to get custom config for this specific option value if available
+				...(config.optionsConfig?.[el.value] || {}),
+			};
+		} else {
+			// If it's a KTSelectOption class instance (from './option')
+			// which should have the getOptionDataForTemplate method.
+			optionData = (
+				option as import('./option').KTSelectOption
+			).getOptionDataForTemplate();
+		}
 
-		const value = isHtmlOption ? option.value : (option as KTSelectOption).id;
-		const text = isHtmlOption ? option.text : (option as KTSelectOption).title;
-		const disabled = isHtmlOption
-			? option.disabled
-			: (option as any).disabled === true;
-		const selected = isHtmlOption
-			? option.selected
-			: !!(option as KTSelectOption).selected;
+		let content = optionData.text; // Default content to option's text
 
-		let content = text;
 		if (config.optionTemplate) {
-			// Use the user template to render the content, but only for {{content}}
-			content = renderTemplateString(config.optionTemplate, {
-				value,
-				text,
-				class: config.optionClass || '',
-				selected: selected ? 'aria-selected="true"' : 'aria-selected="false"',
-				disabled: disabled ? 'aria-disabled="true"' : '',
-				content: text,
-			});
+			// Use the user-provided template string, rendering with the full optionData.
+			// renderTemplateString will replace {{key}} with values from optionData.
+			content = renderTemplateString(config.optionTemplate, optionData);
+		} else {
+			content = optionData.text || optionData.content; // Prefer explicit text, fallback to content
 		}
 
-		const html = getTemplateStrings(config).option
-			.replace('{{value}}', value)
-			.replace('{{text}}', text)
-			.replace('{{selected}}', selected ? 'aria-selected="true"' : 'aria-selected="false"')
-			.replace('{{disabled}}', disabled ? 'aria-disabled="true"' : '')
-			.replace('{{content}}', content)
-			.replace('{{class}}', config.optionClass || '');
-		return stringToElement(html);
+		// Use the core option template string as the base structure.
+		const baseTemplate = getTemplateStrings(config).option;
+
+		const optionClasses = [config.optionClass || ''];
+		if (optionData.disabled) {
+			optionClasses.push('disabled');
+		}
+
+		// Populate the base template for the <li> attributes.
+		// The actual display content (text or custom HTML) will be set on the inner span later.
+		const html = renderTemplateString(baseTemplate, {
+			...optionData, // Pass all data for {{value}}, {{text}}, {{selected}}, {{disabled}}, etc.
+			class: optionClasses.join(' ').trim() || '',
+			selected: optionData.selected
+				? 'aria-selected="true"'
+				: 'aria-selected="false"',
+			disabled: optionData.disabled ? 'aria-disabled="true"' : '',
+			content: content, // This is for the {{content}} placeholder within the option template string itself
+		});
+
+		const element = stringToElement(html);
+
+		// If a custom option template is provided, replace the element's innerHTML with the content.
+		if (config.optionTemplate) {
+			element.innerHTML = content;
+		}
+
+		// Ensure data-text attribute is set to the original, clean text for searching/filtering
+		element.setAttribute('data-text', optionData?.text?.trim() || '');
+
+		return element;
 	},
 
 	/**
@@ -306,13 +346,13 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the no results message
 	 */
 	empty: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
-			.empty.replace(
-				'{{searchNotFoundText}}',
-				config.searchNotFoundText || 'No results found',
-			)
-			.replace('{{class}}', config.emptyClass || '');
-		return stringToElement(html);
+		let html = getTemplateStrings(config).empty.replace(
+			'{{class}}',
+			config.emptyClass || '',
+		);
+		const element = stringToElement(html);
+		element.textContent = config.searchNotFoundText || 'No results found';
+		return element;
 	},
 
 	/**
@@ -322,13 +362,13 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 		loadingMessage: string,
 	): HTMLElement => {
-		let html = getTemplateStrings(config)
-			.loading.replace(
-				'{{loadingMessage}}',
-				loadingMessage || 'Loading options...',
-			)
-			.replace('{{class}}', config.loadingClass || '');
-		return stringToElement(html);
+		let html = getTemplateStrings(config).loading.replace(
+			'{{class}}',
+			config.loadingClass || '',
+		);
+		const element = stringToElement(html);
+		element.textContent = loadingMessage || 'Loading options...';
+		return element;
 	},
 
 	/**
@@ -339,45 +379,60 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
 		let template = getTemplateStrings(config).tag;
-		let content = option.title;
-		if (config.tagTemplate) {
-			let tagTemplate = config.tagTemplate;
-
-			const text = option.getAttribute('data-text');
-			const value = option.getAttribute('data-value');
+		let preparedContent = option.title; // Default content is the option's title
 
-			// Replace all {{varname}} in option.innerHTML with values from _config
-			Object.entries((config.optionsConfig as any)[value] || {}).forEach(([key, value]) => {
-				if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-					tagTemplate = tagTemplate.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
+		if (config.tagTemplate) {
+			let tagTemplateString = config.tagTemplate;
+			const optionValue = option.getAttribute('data-value') || option.value;
+
+			// Replace all {{varname}} in option.innerHTML with values from _config.optionsConfig
+			Object.entries(
+				(config.optionsConfig as any)?.[optionValue] || {},
+			).forEach(([key, val]) => {
+				if (
+					typeof val === 'string' ||
+					typeof val === 'number' ||
+					typeof val === 'boolean'
+				) {
+					tagTemplateString = tagTemplateString.replace(
+						new RegExp(`{{${key}}}`, 'g'),
+						String(val),
+					);
 				}
 			});
 
-			content = renderTemplateString(tagTemplate, {
+			// Render the custom tag template with option data
+			preparedContent = renderTemplateString(tagTemplateString, {
 				title: option.title,
 				id: option.id,
-				class: config.tagClass || '',
-				content: option.innerHTML,
-				text: option.innerText,
+				class: config.tagClass || '', // This class is for content, not the main tag div
+				// content: option.innerHTML, // Avoid direct innerHTML from option due to potential XSS
+				text: option.innerText || option.textContent || '',
+				value: optionValue,
 			});
 		}
 
-		content += getTemplateStrings(config).tagRemoveButton;
+		// Append the remove button HTML string to the prepared content
+		preparedContent += getTemplateStrings(config).tagRemoveButton;
 
 		const html = template
-			.replace('{{title}}', option.title)
-			.replace('{{id}}', option.id)
-			.replace('{{content}}', content)
-			.replace('{{class}}', config.tagClass || '');
-		return stringToElement(html);
+			// .replace('{{title}}', option.title) // Title is part of preparedContent if using custom template
+			// .replace('{{id}}', option.id)       // ID is part of preparedContent if using custom template
+			.replace('{{class}}', config.tagClass || ''); // Class for the main tag div
+
+		const element = stringToElement(html);
+		element.innerHTML = preparedContent; // Set the fully prepared content (text/HTML + remove button)
+		return element;
 	},
 
 	/**
 	 * Renders the placeholder for the select
 	 */
 	placeholder: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
-			.placeholder.replace('{{class}}', config.placeholderClass || '');
+		let html = getTemplateStrings(config).placeholder.replace(
+			'{{class}}',
+			config.placeholderClass || '',
+		);
 
 		let content = config.placeholder || 'Select...';
 
@@ -386,9 +441,13 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 				placeholder: config.placeholder || 'Select...',
 				class: config.placeholderClass || '',
 			});
+			const element = stringToElement(html);
+			element.innerHTML = content; // For templates, content can be HTML
+			return element;
+		} else {
+			const element = stringToElement(html);
+			element.textContent = content; // For simple text, use textContent
+			return element;
 		}
-
-		html = html.replace('{{content}}', content);
-		return stringToElement(html);
 	},
 };