@keenthemes/ktui 1.1.6 → 1.2.1

package/src/components/repeater/repeater.ts

@@ -0,0 +1,181 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+import KTData from '../../helpers/data';
+import KTDom from '../../helpers/dom';
+import KTComponent from '../component';
+import { KTRepeaterInterface, KTRepeaterConfigInterface } from './types';
+
+const DELETE_SELECTOR = '[data-kt-repeater-delete]';
+
+declare global {
+	interface Window {
+		KTRepeater: typeof KTRepeater;
+	}
+}
+
+export class KTRepeater extends KTComponent implements KTRepeaterInterface {
+	protected override _name: string = 'repeater';
+	protected override _defaultConfig: KTRepeaterConfigInterface = {
+		target: '',
+		wrapper: '',
+		limit: 0,
+	};
+	protected override _config: KTRepeaterConfigInterface = this
+		._defaultConfig as KTRepeaterConfigInterface;
+	protected _wrapperElement: HTMLElement | null = null;
+	protected _deleteHandler: (e: Event) => void;
+
+	constructor(
+		element: HTMLElement,
+		config: KTRepeaterConfigInterface | null = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		if (!this._element) return;
+
+		this._wrapperElement = KTDom.getElement(
+			this._getOption('wrapper') as string,
+		);
+		if (!this._wrapperElement) return;
+
+		this._deleteHandler = this._handleDeleteClick.bind(this);
+		this._handlers();
+		this._syncTriggerDisabled();
+		this._syncDeleteButtonsDisabled();
+	}
+
+	protected _getTargetElement(): HTMLElement | null {
+		return KTDom.getElement(this._getOption('target') as string);
+	}
+
+	protected _getCloneCount(): number {
+		return this._wrapperElement ? this._wrapperElement.children.length : 0;
+	}
+
+	protected _syncTriggerDisabled(): void {
+		if (!this._element || !this._wrapperElement) return;
+		const limit = Number(this._getOption('limit')) || 0;
+		if (limit <= 0) return;
+		const atLimit = this._getCloneCount() >= limit;
+		if (this._element.hasAttribute('disabled') !== atLimit) {
+			if (atLimit) {
+				this._element.setAttribute('disabled', '');
+			} else {
+				this._element.removeAttribute('disabled');
+			}
+		}
+	}
+
+	protected _syncDeleteButtonsDisabled(): void {
+		if (!this._wrapperElement) return;
+		const count = this._wrapperElement.children.length;
+		const isOnlyOne = count <= 1;
+		Array.from(this._wrapperElement.children).forEach((row) => {
+			const deleteBtn = (row as HTMLElement).querySelector(
+				DELETE_SELECTOR,
+			) as HTMLElement | null;
+			if (!deleteBtn) return;
+			if (isOnlyOne) {
+				deleteBtn.setAttribute('disabled', '');
+				deleteBtn.setAttribute('aria-disabled', 'true');
+			} else {
+				deleteBtn.removeAttribute('disabled');
+				deleteBtn.removeAttribute('aria-disabled');
+			}
+		});
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		this._element.addEventListener('click', (event: Event) => {
+			event.preventDefault();
+			this._add();
+		});
+
+		this._wrapperElement?.addEventListener('click', this._deleteHandler);
+	}
+
+	protected _handleDeleteClick(event: Event): void {
+		const target = event.target as HTMLElement;
+		const deleteEl = target.closest(DELETE_SELECTOR);
+		if (!deleteEl || !this._wrapperElement) return;
+		// Keep at least one row so the template remains for cloning
+		if (this._wrapperElement.children.length <= 1) return;
+		const cloneContainer = Array.from(this._wrapperElement.children).find(
+			(child) => child.contains(deleteEl),
+		);
+		if (!cloneContainer) return;
+		KTDom.remove(cloneContainer as HTMLElement);
+		this._syncTriggerDisabled();
+		this._syncDeleteButtonsDisabled();
+	}
+
+	protected _add(): void {
+		if (!this._wrapperElement) return;
+		const targetEl = this._getTargetElement();
+		if (!targetEl) return;
+
+		const limit = Number(this._getOption('limit')) || 0;
+		const count = this._getCloneCount();
+		if (limit > 0 && count >= limit) return;
+
+		const clone = targetEl.cloneNode(true) as HTMLElement;
+		this._wrapperElement.appendChild(clone);
+
+		const payload = { element: clone };
+		this._fireEvent('add', payload);
+		this._dispatchEvent('add', payload);
+
+		this._syncTriggerDisabled();
+		this._syncDeleteButtonsDisabled();
+	}
+
+	public add(): void {
+		this._add();
+	}
+
+	public static getInstance(element: HTMLElement): KTRepeater | null {
+		if (!element) return null;
+		if (KTData.has(element, 'repeater')) {
+			return KTData.get(element, 'repeater') as KTRepeater;
+		}
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTRepeaterConfigInterface,
+	): KTRepeater {
+		return (
+			this.getInstance(element) || new KTRepeater(element, config ?? undefined)
+		);
+	}
+
+	public static createInstances(): void {
+		document.querySelectorAll('[data-kt-repeater]').forEach((el) => {
+			new KTRepeater(el as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTRepeater.createInstances();
+	}
+
+	public override dispose(): void {
+		this._wrapperElement?.removeEventListener('click', this._deleteHandler);
+		super.dispose();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTRepeater = KTRepeater;
+}

package/src/components/repeater/types.ts

@@ -0,0 +1,19 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export interface KTRepeaterConfigInterface {
+	target: string;
+	wrapper: string;
+	limit: number;
+}
+
+export interface KTRepeaterInterface {
+	add(): void;
+	getOption(name: string): unknown;
+	getElement(): HTMLElement | null;
+	on(eventName: string, handler: CallableFunction): string;
+	off(eventName: string, eventId: string): void;
+	dispose(): void;
+}

package/src/components/select/__tests__/ux-behaviors.test.ts

@@ -349,12 +349,30 @@ describe('KTSelect UX Behaviors', () => {
 			await waitFor(50);
 
 			// ArrowDown focuses first option; ArrowUp from first wraps to last (3). Enter selects focused.
-			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+			searchInput.dispatchEvent(
+				new KeyboardEvent('keydown', {
+					key: 'ArrowDown',
+					bubbles: true,
+					cancelable: true,
+				}),
+			);
 			await waitFor(20);
-			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true }));
+			searchInput.dispatchEvent(
+				new KeyboardEvent('keydown', {
+					key: 'ArrowUp',
+					bubbles: true,
+					cancelable: true,
+				}),
+			);
 			await waitFor(20);
 
-			searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+			searchInput.dispatchEvent(
+				new KeyboardEvent('keydown', {
+					key: 'Enter',
+					bubbles: true,
+					cancelable: true,
+				}),
+			);
 			await waitFor(150);
 
 			expect(select.getSelectedOptions()).toContain('3');

package/src/components/select/select.ts

@@ -2790,3 +2790,7 @@ export class KTSelect extends KTComponent {
 		super.dispose();
 	}
 }
+
+if (typeof window !== 'undefined') {
+	window.KTSelect = KTSelect;
+}

package/src/components/select/utils.ts

@@ -372,7 +372,11 @@ export class FocusManager {
 		const focusedEl = this._element.querySelector(
 			`${this._optionsSelector}.${this._focusClass}`,
 		) as HTMLElement | null;
-		if (focusedEl && !focusedEl.classList.contains('hidden') && focusedEl.style.display !== 'none') {
+		if (
+			focusedEl &&
+			!focusedEl.classList.contains('hidden') &&
+			focusedEl.style.display !== 'none'
+		) {
 			const idx = options.indexOf(focusedEl);
 			if (idx >= 0) {
 				this._focusedOptionIndex = idx;

package/src/components/sticky/__tests__/sticky.test.ts

@@ -15,8 +15,13 @@ describe('KTSticky', () => {
 	beforeEach(() => {
 		document.body.innerHTML = '';
 		scrollTop = 0;
-		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(() => scrollTop);
-		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({ height: 800, width: 1024 });
+		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(
+			() => scrollTop,
+		);
+		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({
+			height: 800,
+			width: 1024,
+		});
 
 		wrapper = document.createElement('div');
 		wrapper.setAttribute('data-kt-sticky-wrapper', 'true');
@@ -151,7 +156,9 @@ describe('KTSticky', () => {
 		it('fires change event when sticky becomes active and when released', async () => {
 			const instance = new KTSticky(stickyEl);
 			const changes: { active: boolean }[] = [];
-			instance.on('change', (payload: { active: boolean }) => changes.push(payload));
+			instance.on('change', (payload: { active: boolean }) =>
+				changes.push(payload),
+			);
 
 			scrollTop = 150;
 			window.dispatchEvent(new Event('scroll', { bubbles: true }));

package/src/components/sticky/sticky.ts

@@ -119,42 +119,35 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Store scroll handler reference for cleanup
 		this._scrollHandler = () => {
-
 			this._isScrolling = true;
 
-			if(this._isActive() === true){
-
+			if (this._isActive() === true) {
 				this._debounceScroll(() => {
-
 					this._isScrolling = false;
 					this._process();
-
 				}, 200);
-
-			}else{
-
+			} else {
 				this._isScrolling = false;
 				this._process();
-
 			}
-
 		};
 
 		if (this._targetElement) {
 			if (this._targetElement === document) {
-				window.addEventListener('scroll', this._scrollHandler, { passive: true });
+				window.addEventListener('scroll', this._scrollHandler, {
+					passive: true,
+				});
 			} else {
 				(this._targetElement as HTMLElement).addEventListener(
 					'scroll',
 					this._scrollHandler,
-					{ passive: true }
+					{ passive: true },
 				);
 			}
 		}
 	}
 
 	protected _debounceScroll(callback: () => void, delay: number = 200): void {
-
 		if (this._scrollTimeout) {
 			clearTimeout(this._scrollTimeout);
 		}
@@ -162,7 +155,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._scrollTimeout = setTimeout(() => {
 			callback();
 		}, delay);
-
 	}
 
 	protected _process(): void {
@@ -352,7 +344,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const activeClassList = this._getOption('activeClass') as string;
 		if (activeClassList) {
 			KTDom.addClass(this._element, activeClassList);
-		}else{
+		} else {
 			const classList = this._getOption('class') as string;
 			if (classList) {
 				KTDom.addClass(this._element, classList);
@@ -387,10 +379,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const activeClassList = this._getOption('activeClass') as string;
 		if (activeClassList) {
 			KTDom.removeClass(this._element, activeClassList);
-		}else{
+		} else {
 			const classList = this._getOption('class') as string;
 			if (classList) {
-					KTDom.removeClass(this._element, classList);
+				KTDom.removeClass(this._element, classList);
 			}
 		}
 
@@ -399,12 +391,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 			KTDom.addClass(this._element, releaseClassList);
 		}
 
-		if(this._eventTriggerState === false){
+		if (this._eventTriggerState === false) {
 			const releaseDelay = this._getOption('releaseDelay') as number;
-			if(releaseDelay && this._timeoutState === null){
+			if (releaseDelay && this._timeoutState === null) {
 				this._timeoutState = setTimeout(() => {
-
-					if (!this._element){
+					if (!this._element) {
 						return;
 					}
 
@@ -413,12 +404,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 					}
 
 					this._timeoutState = null;
-
 				}, releaseDelay);
-			}else{
+			} else {
 				this._resetStyles();
 			}
-		}else{
+		} else {
 			this._timeoutState = null;
 		}
 	}

package/src/components/sticky/types.ts

@@ -19,9 +19,9 @@ export interface KTStickyConfigInterface {
 	reverse: boolean;
 	release: string;
 	activate: string;
-	releaseDelay: number,
-	activeClass: string,
-	releaseClass: string,
+	releaseDelay: number;
+	activeClass: string;
+	releaseClass: string;
 }
 
 export interface KTStickyInterface {

package/src/index.ts

@@ -28,6 +28,10 @@ import { KTTogglePassword } from './components/toggle-password';
 import { KTDataTable } from './components/datatable';
 import { KTSelect } from './components/select';
 import { KTToast } from './components/toast';
+import { KTRating } from './components/rating';
+import { KTRepeater } from './components/repeater';
+import { KTClipboard } from './components/clipboard';
+import { KTRangeSlider } from './components/range-slider';
 
 export { KTDropdown } from './components/dropdown';
 export { KTModal } from './components/modal';
@@ -50,6 +54,119 @@ export { KTTogglePassword } from './components/toggle-password';
 export { KTDataTable } from './components/datatable';
 export { KTSelect } from './components/select';
 export { KTToast } from './components/toast';
+export { KTRating } from './components/rating';
+export { KTRepeater } from './components/repeater';
+export { KTClipboard } from './components/clipboard';
+export { KTRangeSlider } from './components/range-slider';
+
+export type {
+	KTAccordionConfigInterface,
+	KTAccordionInterface,
+} from './components/accordion';
+export type {
+	KTCollapseConfigInterface,
+	KTCollapseInterface,
+} from './components/collapse';
+export type {
+	KTDataTableSortOrderInterface,
+	KTDataTableDataInterface,
+	KTDataTableState,
+	KTDataTableInterface,
+	KTDataTableResponseDataInterface,
+	KTDataTableConfigInterface,
+	KTDataTableColumnFilterTypeInterface,
+	KTDataTableColumnFilterInterface,
+	KTDataTableCheckConfigInterface,
+	KTDataTableCheckInterface,
+	KTDataTableCheckChangePayloadInterface,
+} from './components/datatable';
+export type {
+	KTDismissConfigInterface,
+	KTDismissInterface,
+} from './components/dismiss';
+export type {
+	KTDrawerConfigInterface,
+	KTDrawerInterface,
+} from './components/drawer';
+export type {
+	KTDropdownConfigInterface,
+	KTDropdownInterface,
+} from './components/dropdown';
+export type {
+	KTImageInputConfigInterface,
+	KTImageInputInterface,
+} from './components/image-input';
+export type {
+	KTModalConfigInterface,
+	KTModalInterface,
+} from './components/modal';
+export type {
+	KTRatingConfigInterface,
+	KTRatingInterface,
+	KTRatingSymbolType,
+} from './components/rating';
+export type {
+	KTReparentConfigInterface,
+	KTReparentInterface,
+} from './components/reparent';
+export type {
+	KTRepeaterConfigInterface,
+	KTRepeaterInterface,
+} from './components/repeater';
+export type {
+	KTClipboardConfigInterface,
+	KTClipboardInterface,
+} from './components/clipboard';
+export type {
+	KTRangeSliderConfigInterface,
+	KTRangeSliderEventPayloadInterface,
+	KTRangeSliderInterface,
+} from './components/range-slider';
+export type {
+	KTScrollableConfigInterface,
+	KTScrollableInterface,
+} from './components/scrollable';
+export type {
+	KTScrollspyConfigInterface,
+	KTScrollspyInterface,
+} from './components/scrollspy';
+export type {
+	KTScrolltoConfigInterface,
+	KTScrolltoInterface,
+} from './components/scrollto';
+export type {
+	KTSelectConfigInterface,
+	KTSelectOption,
+} from './components/select';
+export type {
+	KTStepperConfigInterface,
+	KTStepperInterface,
+} from './components/stepper';
+export type {
+	KTStickyConfigInterface,
+	KTStickyInterface,
+} from './components/sticky';
+export type { KTTabsConfigInterface, KTTabsInterface } from './components/tabs';
+export type {
+	KTThemeSwitchConfigInterface,
+	KTThemeSwitchInterface,
+} from './components/theme-switch';
+export type {
+	KTToastConfigInterface,
+	KTToastInterface,
+} from './components/toast';
+export type {
+	KTToggleConfigInterface,
+	KTToggleInterface,
+} from './components/toggle';
+export type {
+	KTTogglePasswordConfigInterface,
+	KTTogglePasswordInterface,
+} from './components/toggle-password';
+export type {
+	KTTooltipConfigInterface,
+	KTTooltipInterface,
+} from './components/tooltip';
 
 const KTComponents = {
 	init(): void {
@@ -74,6 +191,10 @@ const KTComponents = {
 		KTDataTable.init();
 		KTSelect.init();
 		KTToast.init();
+		KTRating.init();
+		KTRepeater.init();
+		KTClipboard.init();
+		KTRangeSlider.init();
 	},
 };
 
@@ -104,6 +225,10 @@ declare global {
 		KTDataTable: typeof KTDataTable;
 		KTSelect: typeof KTSelect;
 		KTToast: typeof KTToast;
+		KTRating: typeof KTRating;
+		KTRepeater: typeof KTRepeater;
+		KTClipboard: typeof KTClipboard;
+		KTRangeSlider: typeof KTRangeSlider;
 		KTComponents: typeof KTComponents;
 	}
 }

package/styles.css

@@ -43,6 +43,7 @@
 @import './src/components/kbd/kbd.css';
 @import './src/components/breadcrumb/breadcrumb.css';
 @import './src/components/toast/toast.css';
+@import './src/components/rating/rating.css';
 
 /** Dark Mode Variant **/
 @custom-variant dark (&:is(.dark *));