@keenthemes/ktui 1.2.4 → 1.2.5

package/src/components/dropdown/dropdown.ts

@@ -13,6 +13,7 @@ import KTDom from '../../helpers/dom';
 import KTData from '../../helpers/data';
 import KTEventHandler from '../../helpers/event-handler';
 import KTComponent from '../component';
+import { KTCallableType } from '../../types';
 import { KTDropdownConfigInterface, KTDropdownInterface } from './types';
 
 declare global {
@@ -41,8 +42,8 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	};
 	protected override _config: KTDropdownConfigInterface = this._defaultConfig;
 	protected _disabled: boolean = false;
-	protected _toggleElement: HTMLElement;
-	protected _menuElement: HTMLElement;
+	protected _toggleElement!: HTMLElement;
+	protected _menuElement!: HTMLElement;
 	protected _isTransitioning: boolean = false;
 	protected _isOpen: boolean = false;
 	/** Timestamp when _show() was last called; used to ignore duplicate _hide() from double handlers */
@@ -56,20 +57,25 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		}
 
 		this._init(element);
+		if (!this._element) {
+			return;
+		}
 		this._buildConfig(config);
 
-		this._toggleElement = this._element.querySelector(
+		const toggle = this._element.querySelector<HTMLElement>(
 			'[data-kt-dropdown-toggle]',
-		) as HTMLElement;
-		if (!this._toggleElement) {
+		);
+		if (!toggle) {
 			return;
 		}
-		this._menuElement = this._element.querySelector(
+		const menu = this._element.querySelector<HTMLElement>(
 			'[data-kt-dropdown-menu]',
-		) as HTMLElement;
-		if (!this._menuElement) {
+		);
+		if (!menu) {
 			return;
 		}
+		this._toggleElement = toggle;
+		this._menuElement = menu;
 
 		KTData.set(this._menuElement, 'dropdownElement', this._element);
 		this._setupNestedDropdowns();
@@ -125,10 +131,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 
 		if (this._getOption('trigger') !== 'hover') return;
 
-		if (KTData.get(this._element, 'hover') === '1') {
-			clearTimeout(KTData.get(this._element, 'timeout') as number);
-			KTData.remove(this._element, 'hover');
-			KTData.remove(this._element, 'timeout');
+		const root = this._element;
+		if (!root) return;
+
+		if (KTData.get(root, 'hover') === '1') {
+			clearTimeout(KTData.get(root, 'timeout') as number);
+			KTData.remove(root, 'hover');
+			KTData.remove(root, 'timeout');
 		}
 
 		this._show();
@@ -139,22 +148,26 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 
 		if (this._getOption('trigger') !== 'hover') return;
 
-		const relatedTarget = event.relatedTarget as HTMLElement;
-		const isWithinDropdown = this._element.contains(relatedTarget);
+		const root = this._element;
+		if (!root) return;
+
+		const relatedTarget = event.relatedTarget as HTMLElement | null;
+		const isWithinDropdown =
+			relatedTarget !== null && root.contains(relatedTarget);
 
 		if (isWithinDropdown) return;
 
 		const timeout = setTimeout(
 			() => {
-				if (KTData.get(this._element, 'hover') === '1') {
+				if (KTData.get(root, 'hover') === '1') {
 					this._hide();
 				}
 			},
 			parseInt(this._getOption('hoverTimeout') as string),
 		);
 
-		KTData.set(this._element, 'hover', '1');
-		KTData.set(this._element, 'timeout', timeout);
+		KTData.set(root, 'hover', '1');
+		KTData.set(root, 'timeout', timeout);
 	}
 
 	protected _toggle(): void {
@@ -175,10 +188,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		this._dispatchEvent('show', payload);
 		if (payload.cancel) return;
 
-		KTDropdown.hide(this._element);
+		const root = this._element;
+		if (!root) return;
+
+		KTDropdown.hide(root);
 
 		let zIndex: number = parseInt(this._getOption('zindex') as string);
-		const parentZindex: number = KTDom.getHighestZindex(this._element);
+		const parentZindex: number = KTDom.getHighestZindex(root);
 
 		if (parentZindex !== null && parentZindex >= zIndex) {
 			zIndex = parentZindex + 1;
@@ -197,7 +213,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		);
 		this._toggleElement.classList.add('active');
 		this._menuElement.classList.add('open');
-		this._element.classList.add('open');
+		root.classList.add('open');
 
 		this._initPopper();
 
@@ -221,12 +237,15 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		this._dispatchEvent('hide', payload);
 		if (payload.cancel) return;
 
+		const root = this._element;
+		if (!root) return;
+
 		this._menuElement.style.opacity = '1';
 		KTDom.reflow(this._menuElement);
 		this._menuElement.style.opacity = '0';
 		this._menuElement.classList.remove('open');
 		this._toggleElement.classList.remove('active');
-		this._element.classList.remove('open');
+		root.classList.remove('open');
 
 		KTDom.transitionEnd(this._menuElement, () => {
 			this._isTransitioning = false;
@@ -262,20 +281,27 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 				this._menuElement,
 				this._getPopperConfig(),
 			);
-			KTData.set(this._element, 'popper', popper);
+			const root = this._element;
+			if (root) {
+				KTData.set(root, 'popper', popper);
+			}
 		}
 	}
 
 	protected _destroyPopper(): void {
-		if (KTData.has(this._element, 'popper')) {
-			(KTData.get(this._element, 'popper') as PopperInstance).destroy();
-			KTData.remove(this._element, 'popper');
+		const root = this._element;
+		if (!root) return;
+		if (KTData.has(root, 'popper')) {
+			(KTData.get(root, 'popper') as PopperInstance).destroy();
+			KTData.remove(root, 'popper');
 		}
 	}
 
 	protected _isDropdownOpen(): boolean {
+		const root = this._element;
+		if (!root) return false;
 		return (
-			this._element.classList.contains('open') &&
+			root.classList.contains('open') &&
 			this._menuElement.classList.contains('open')
 		);
 	}
@@ -379,7 +405,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	}
 
 	// Static Methods
-	public static getElement(reference: HTMLElement): HTMLElement {
+	public static getElement(reference: HTMLElement): HTMLElement | null {
 		if (reference && reference.hasAttribute('data-kt-dropdown-initialized'))
 			return reference;
 
@@ -407,12 +433,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		return null;
 	}
 
-	public static getInstance(element: HTMLElement): KTDropdown {
-		element = this.getElement(element);
+	public static getInstance(element: HTMLElement): KTDropdown | null {
+		const resolved = this.getElement(element);
 
-		if (!element) {
+		if (!resolved) {
 			return null;
 		}
+		element = resolved;
 
 		if (KTData.has(element, 'dropdown')) {
 			const instance = KTData.get(element, 'dropdown') as KTDropdown;
@@ -490,8 +517,9 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		document.addEventListener('keydown', (event: KeyboardEvent) => {
 			const dropdownEl = document.querySelector(
 				'.open[data-kt-dropdown-initialized]',
-			);
-			const dropdown = KTDropdown.getInstance(dropdownEl as HTMLElement);
+			) as HTMLElement | null;
+			if (!dropdownEl) return;
+			const dropdown = KTDropdown.getInstance(dropdownEl);
 			if (!dropdown || !dropdown._getOption('keyboard')) return;
 
 			if (
@@ -508,12 +536,13 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 			document.body,
 			'[data-kt-dropdown-toggle], [data-kt-dropdown-menu]',
 			'mouseover',
-			(event: Event, target: HTMLElement) => {
+			((event?: Event, target?: HTMLElement) => {
+				if (!event || !target) return;
 				const dropdown = KTDropdown.getInstance(target);
 				if (dropdown && dropdown._getOption('trigger') === 'hover') {
 					dropdown.mouseover(event as MouseEvent);
 				}
-			},
+			}) as KTCallableType,
 		);
 	}
 
@@ -522,41 +551,40 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 			document.body,
 			'[data-kt-dropdown-toggle], [data-kt-dropdown-menu]',
 			'mouseout',
-			(event: Event, target: HTMLElement) => {
+			((event?: Event, target?: HTMLElement) => {
+				if (!event || !target) return;
 				const dropdown = KTDropdown.getInstance(target);
 				if (dropdown && dropdown._getOption('trigger') === 'hover') {
 					dropdown.mouseout(event as MouseEvent);
 				}
-			},
+			}) as KTCallableType,
 		);
 	}
 
 	public static handleClick(): void {
-		KTEventHandler.on(
-			document.body,
-			'[data-kt-dropdown-toggle]',
-			'click',
-			(event: Event, target: HTMLElement) => {
-				const dropdown = KTDropdown.getInstance(target);
-				if (dropdown) {
-					dropdown.click(event);
-				}
-			},
-		);
+		KTEventHandler.on(document.body, '[data-kt-dropdown-toggle]', 'click', ((
+			event?: Event,
+			target?: HTMLElement,
+		) => {
+			if (!event || !target) return;
+			const dropdown = KTDropdown.getInstance(target);
+			if (dropdown) {
+				dropdown.click(event);
+			}
+		}) as KTCallableType);
 	}
 
 	public static handleDismiss(): void {
-		KTEventHandler.on(
-			document.body,
-			'[data-kt-dropdown-dismiss]',
-			'click',
-			(event: Event, target: HTMLElement) => {
-				const dropdown = KTDropdown.getInstance(target);
-				if (dropdown) {
-					dropdown.hide();
-				}
-			},
-		);
+		KTEventHandler.on(document.body, '[data-kt-dropdown-dismiss]', 'click', ((
+			event?: Event,
+			target?: HTMLElement,
+		) => {
+			if (!event || !target) return;
+			const dropdown = KTDropdown.getInstance(target);
+			if (dropdown) {
+				dropdown.hide();
+			}
+		}) as KTCallableType);
 	}
 
 	public static initHandlers(): void {

package/src/components/input/input-group.css

@@ -30,8 +30,21 @@
 			@apply rounded-e-none!;
 		}
 
+		/* Leading button before field: square inline-end + drop shadow so join matches addon pattern */
+		.kt-btn:has(+ input.kt-input),
+		.kt-btn:has(+ textarea.kt-input),
+		.kt-btn:has(+ .kt-input) {
+			@apply rounded-e-none! shadow-none!;
+		}
+
+		.kt-btn:has(+ input.kt-input).kt-btn-outline,
+		.kt-btn:has(+ textarea.kt-input).kt-btn-outline,
+		.kt-btn:has(+ .kt-input).kt-btn-outline {
+			@apply border-e-0!;
+		}
+
 		.kt-input + .kt-btn {
-			@apply rounded-s-none!;
+			@apply rounded-s-none! shadow-none!;
 		}
 
 		.kt-input + .kt-btn.kt-btn-outline {

package/src/components/input-number/__tests__/input-number.test.ts

@@ -0,0 +1,278 @@
+/**
+ * Tests for KTInputNumber component
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTInputNumber } from '../input-number';
+
+describe('KTInputNumber', () => {
+	let container: HTMLElement;
+
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		container = document.createElement('div');
+		container.id = 'test-container';
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+	});
+
+	describe('initialization', () => {
+		it('initializes on wrapper with nested number input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '10';
+			input.value = '3';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			expect(instance.getElement()).toBe(wrap);
+			expect(instance.getNumberInput()).toBe(input);
+			expect(instance.getValue()).toBe(3);
+			instance.dispose();
+		});
+
+		it('initializes on the number input root', () => {
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.setAttribute('data-kt-input-number', 'true');
+			input.min = '0';
+			input.max = '5';
+			input.value = '2';
+			container.appendChild(input);
+
+			const instance = new KTInputNumber(input);
+			expect(instance.getElement()).toBe(input);
+			expect(instance.getNumberInput()).toBe(input);
+			instance.dispose();
+		});
+
+		it('binds to the first number input when multiple exist', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const a = document.createElement('input');
+			a.type = 'number';
+			a.value = '1';
+			const b = document.createElement('input');
+			b.type = 'number';
+			b.value = '2';
+			wrap.appendChild(a);
+			wrap.appendChild(b);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			expect(instance.getNumberInput()).toBe(a);
+			instance.dispose();
+		});
+
+		it('does not initialize without a number input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			container.appendChild(wrap);
+			const instance = new KTInputNumber(wrap);
+			expect(instance.getElement()).toBeNull();
+			expect(instance.getNumberInput()).toBeNull();
+		});
+	});
+
+	describe('events', () => {
+		it('dispatches kt.input-number.input with payload on native input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '100';
+			input.step = '2';
+			input.value = '4';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.input-number.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				value: 4,
+				valueAsString: '4',
+				min: 0,
+				max: 100,
+				step: 2,
+			});
+
+			instance.dispose();
+		});
+
+		it('dispatches kt.input-number.change on native change', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.value = '7';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.input-number.change', spy);
+
+			input.dispatchEvent(new Event('change', { bubbles: true }));
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy.mock.calls[0][0].detail.payload.value).toBe(7);
+
+			instance.dispose();
+		});
+
+		it('uses null value when input is empty', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.value = '';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.input-number.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				value: null,
+				valueAsString: '',
+			});
+
+			instance.dispose();
+		});
+
+		it('omits step in payload when step="any"', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '10';
+			input.step = 'any';
+			input.value = '3';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTInputNumber(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.input-number.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy.mock.calls[0][0].detail.payload.step).toBeUndefined();
+
+			KTInputNumber.getInstance(wrap)?.dispose();
+		});
+	});
+
+	describe('increment and decrement', () => {
+		it('stepUp increases value by step within max', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '10';
+			input.step = '2';
+			input.value = '4';
+			const inc = document.createElement('button');
+			inc.type = 'button';
+			inc.setAttribute('data-kt-input-number-increment', 'true');
+			wrap.appendChild(inc);
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			inc.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			expect(input.value).toBe('6');
+			instance.dispose();
+		});
+
+		it('stepDown decreases value by step within min', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '10';
+			input.step = '3';
+			input.value = '6';
+			const dec = document.createElement('button');
+			dec.type = 'button';
+			dec.setAttribute('data-kt-input-number-decrement', 'true');
+			wrap.appendChild(dec);
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			dec.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			expect(input.value).toBe('3');
+			instance.dispose();
+		});
+
+		it('does not adjust when input is disabled', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.min = '0';
+			input.max = '10';
+			input.value = '5';
+			input.disabled = true;
+			const inc = document.createElement('button');
+			inc.type = 'button';
+			inc.setAttribute('data-kt-input-number-increment', 'true');
+			wrap.appendChild(inc);
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			inc.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			expect(input.value).toBe('5');
+			instance.dispose();
+		});
+	});
+
+	describe('dispose', () => {
+		it('removes listeners and clears instance', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.value = '1';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTInputNumber(wrap);
+			instance.dispose();
+			expect(KTInputNumber.getInstance(wrap)).toBeNull();
+		});
+	});
+
+	describe('createInstances', () => {
+		it('skips lazy roots', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-input-number', 'true');
+			wrap.setAttribute('data-kt-input-number-lazy', 'true');
+			const input = document.createElement('input');
+			input.type = 'number';
+			input.value = '1';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			KTInputNumber.createInstances();
+			expect(KTInputNumber.getInstance(wrap)).toBeNull();
+		});
+	});
+});

package/src/components/input-number/index.ts

@@ -0,0 +1,11 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export { KTInputNumber } from './input-number';
+export type {
+	KTInputNumberConfigInterface,
+	KTInputNumberEventPayloadInterface,
+	KTInputNumberInterface,
+} from './types';