npm - @keenthemes/ktui - Versions diffs - 1.2.2 → 1.2.4 - Mend

@keenthemes/ktui 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/src/components/modal/modal.ts CHANGED Viewed

@@ -49,18 +49,17 @@ export class KTModal extends KTComponent implements KTModalInterface {
 	protected _handlers() {
 		this._element.addEventListener('click', (event: Event) => {
 			const target = event.target as HTMLElement;
-			const currentTarget = event.currentTarget as HTMLElement;
-			// Only proceed if clicking directly on the backdrop (modal element itself)
-			// This prevents closing when clicking inside modal content or any child elements
-			// (including dropdowns rendered via dropdownContainer pointing to modal)
-			if (target !== currentTarget) {
-				// Stop propagation for clicks inside dropdowns to prevent dropdown from closing
-				// Check if click is inside a dropdown element (KT Select dropdown)
-				const dropdownElement = target.closest('[data-kt-select-dropdown]');
-				if (dropdownElement) {
-					event.stopPropagation();
-				}
+			const modalContent = this._element.querySelector('.kt-modal-content');
+			// Stop propagation for clicks inside dropdowns rendered within modal content.
+			const dropdownElement = target.closest('[data-kt-select-dropdown]');
+			if (dropdownElement) {
+				event.stopPropagation();
+				return;
+			}
+			// Dismiss when clicking anywhere outside modal content.
+			if (modalContent && modalContent.contains(target)) {
 				return;
 			}
@@ -205,6 +204,14 @@ export class KTModal extends KTComponent implements KTModalInterface {
 		const zindex: number = parseInt(KTDom.getCssProp(this._element, 'z-index'));
 		this._backdropElement = document.createElement('DIV');
 		this._backdropElement.setAttribute('data-kt-modal-backdrop', 'true');
+		this._backdropElement.addEventListener('click', () => {
+			if (
+				this._getOption('backdropStatic') === false &&
+				KTUtils.stringToBoolean(this._getOption('persistent')) === false
+			) {
+				this._hide();
+			}
+		});
 		this._backdropElement.style.zIndex = (zindex - 1).toString();
 		document.body.append(this._backdropElement);
 		KTDom.reflow(this._backdropElement);
@@ -280,8 +287,9 @@ export class KTModal extends KTComponent implements KTModalInterface {
 	}
 	public static handleToggle(): void {
+		// wire:navigate / morph can replace document.body; <html> stays stable.
 		KTEventHandler.on(
-			document.body,
+			document.documentElement,
 			'[data-kt-modal-toggle]',
 			'click',
 			(event: Event, target: HTMLElement) => {
@@ -301,7 +309,7 @@ export class KTModal extends KTComponent implements KTModalInterface {
 	public static handleDismiss(): void {
 		KTEventHandler.on(
-			document.body,
+			document.documentElement,
 			'[data-kt-modal-dismiss]',
 			'click',
 			(event: Event, target: HTMLElement) => {

package/src/components/select/index.ts CHANGED Viewed

@@ -15,4 +15,4 @@ export {
 	EventManager,
 	TypeToSearchBuffer,
 } from './utils';
-export { KTSelectConfigInterface, KTSelectOption } from './config';
+export type { KTSelectConfigInterface, KTSelectOption } from './config';

package/src/components/theme-switch/theme-switch.ts CHANGED Viewed

@@ -20,12 +20,14 @@ export class KTThemeSwitch
 	extends KTComponent
 	implements KTThemeSwitchInterface
 {
-	protected override _name: string = 'theme-swtich';
+	protected override _name: string = 'theme-switch';
 	protected override _defaultConfig: KTThemeSwitchConfigInterface = {
 		mode: 'light',
 	};
 	protected _mode: KTThemeSwitchModeType | null = null;
 	protected _currentMode: KTThemeSwitchModeType | null = null;
+	protected _themeSwitchToggleEventId: string = '';
+	protected _themeSwitchSetEventId: string = '';
 	constructor(
 		element: HTMLElement | HTMLHtmlElement,
@@ -48,7 +50,7 @@ export class KTThemeSwitch
 	protected _handlers(): void {
 		if (!this._element) return;
-		KTEventHandler.on(
+		this._themeSwitchToggleEventId = KTEventHandler.on(
 			document.body,
 			'[data-kt-theme-switch-toggle]',
 			'click',
@@ -57,7 +59,7 @@ export class KTThemeSwitch
 			},
 		);
-		KTEventHandler.on(
+		this._themeSwitchSetEventId = KTEventHandler.on(
 			document.body,
 			'[data-kt-theme-switch-set]',
 			'click',
@@ -141,7 +143,23 @@ export class KTThemeSwitch
 	}
 	public setMode(mode: KTThemeSwitchModeType) {
-		this.setMode(mode);
+		this._setMode(mode);
+	}
+	public override dispose(): void {
+		if (this._themeSwitchToggleEventId) {
+			KTEventHandler.off(
+				document.body,
+				'click',
+				this._themeSwitchToggleEventId,
+			);
+			this._themeSwitchToggleEventId = '';
+		}
+		if (this._themeSwitchSetEventId) {
+			KTEventHandler.off(document.body, 'click', this._themeSwitchSetEventId);
+			this._themeSwitchSetEventId = '';
+		}
+		super.dispose();
 	}
 	public static getInstance(): KTThemeSwitch {

package/src/components/toggle/toggle.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
 	};
 	protected override _config: KTToggleConfigInterface = this._defaultConfig;
 	protected _targetElement: HTMLElement;
+	protected _clickHandler: (() => void) | null = null;
 	constructor(
 		element: HTMLElement,
@@ -48,9 +49,18 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
 	protected _handlers(): void {
 		if (!this._element) return;
-		this._element.addEventListener('click', () => {
+		this._clickHandler = () => {
 			this._toggle();
-		});
+		};
+		this._element.addEventListener('click', this._clickHandler);
+	}
+	public override dispose(): void {
+		if (this._element && this._clickHandler) {
+			this._element.removeEventListener('click', this._clickHandler);
+			this._clickHandler = null;
+		}
+		super.dispose();
 	}
 	private _getTargetElement(): HTMLElement | null {

package/src/index.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import KTUtils from './helpers/utils';
 import KTEventHandler from './helpers/event-handler';
 import KTData from './helpers/data';
 import { KTDropdown } from './components/dropdown';
+import { KTContextMenu } from './components/context-menu';
 import { KTModal } from './components/modal';
 import { KTDrawer } from './components/drawer';
 import { KTCollapse } from './components/collapse';
@@ -36,6 +37,7 @@ import { KTPinInput } from './components/pin-input';
 import { KTCarousel } from './components/carousel';
 export { KTDropdown } from './components/dropdown';
+export { KTContextMenu } from './components/context-menu';
 export { KTModal } from './components/modal';
 export { KTDrawer } from './components/drawer';
 export { KTCollapse } from './components/collapse';
@@ -96,6 +98,10 @@ export type {
 	KTDropdownConfigInterface,
 	KTDropdownInterface,
 } from './components/dropdown';
+export type {
+	KTContextMenuConfigInterface,
+	KTContextMenuInterface,
+} from './components/context-menu';
 export type {
 	KTImageInputConfigInterface,
 	KTImageInputInterface,
@@ -182,9 +188,10 @@ export type {
 	KTTooltipInterface,
 } from './components/tooltip';
-const KTComponents = {
+export const KTComponents = {
 	init(): void {
 		KTDropdown.init();
+		KTContextMenu.init();
 		KTModal.init();
 		KTDrawer.init();
 		KTCollapse.init();
@@ -221,6 +228,7 @@ declare global {
 		KTEventHandler: typeof KTEventHandler;
 		KTData: typeof KTData;
 		KTDropdown: typeof KTDropdown;
+		KTContextMenu: typeof KTContextMenu;
 		KTModal: typeof KTModal;
 		KTDrawer: typeof KTDrawer;
 		KTCollapse: typeof KTCollapse;
@@ -252,7 +260,3 @@ declare global {
 }
 export default KTComponents;
-KTDom.ready(() => {
-	KTComponents.init();
-});

package/src/init-all.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+import KTDom from './helpers/dom';
+import { KTComponents } from './index';
+export const initAllComponents = (): void => {
+	KTDom.ready(() => {
+		KTComponents.init();
+	});
+};
+initAllComponents();

package/src/legacy.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+export * from './index';
+export { default } from './index';
+import './init-all';

package/styles.css CHANGED Viewed

@@ -17,6 +17,7 @@
 @import './src/components/drawer/drawer.css';
 @import './src/components/dropdown/dropdown.css';
 @import './src/components/dropdown/dropdown-menu.css';
+@import './src/components/context-menu/context-menu.css';
 @import './src/components/image-input/image-input.css';
 @import './src/components/input/input.css';
 @import './src/components/input/input-group.css';