@keenthemes/ktui 1.2.6 → 1.2.7

package/src/helpers/__tests__/utils.test.ts

@@ -0,0 +1,332 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import KTUtils from '../utils';
+
+describe('KTUtils', () => {
+	describe('geUID', () => {
+		it('returns string starting with prefix', () => {
+			const uid = KTUtils.geUID('test-');
+			expect(uid).toMatch(/^test-/);
+		});
+
+		it('returns different values on successive calls', () => {
+			const a = KTUtils.geUID('p-');
+			const b = KTUtils.geUID('p-');
+			expect(a).not.toBe(b);
+		});
+
+		it('works without prefix', () => {
+			const uid = KTUtils.geUID();
+			expect(typeof uid).toBe('string');
+			expect(uid.length).toBeGreaterThan(0);
+		});
+	});
+
+	describe('getCssVar', () => {
+		it('reads computed style from document.documentElement', () => {
+			const spy = vi.spyOn(
+				window,
+				'getComputedStyle',
+			).mockReturnValue({
+				getPropertyValue: (prop: string) =>
+					prop === '--my-var' ? ' red ' : '',
+			} as unknown as CSSStyleDeclaration);
+
+			const result = KTUtils.getCssVar('--my-var');
+			expect(result).toBe('red');
+			spy.mockRestore();
+		});
+
+		it('returns empty string when property is empty', () => {
+			const spy = vi.spyOn(
+				window,
+				'getComputedStyle',
+			).mockReturnValue({
+				getPropertyValue: () => '',
+			} as unknown as CSSStyleDeclaration);
+
+			const result = KTUtils.getCssVar('--missing');
+			expect(result).toBe('');
+			spy.mockRestore();
+		});
+	});
+
+	describe('parseDataAttribute', () => {
+		it('"true" returns true', () => {
+			expect(KTUtils.parseDataAttribute('true')).toBe(true);
+		});
+
+		it('"false" returns false', () => {
+			expect(KTUtils.parseDataAttribute('false')).toBe(false);
+		});
+
+		it('"123" returns 123', () => {
+			expect(KTUtils.parseDataAttribute('123')).toBe(123);
+		});
+
+		it('"3.14" returns 3.14', () => {
+			expect(KTUtils.parseDataAttribute('3.14')).toBeCloseTo(3.14);
+		});
+
+		it('"" returns null', () => {
+			expect(KTUtils.parseDataAttribute('')).toBeNull();
+		});
+
+		it('"null" returns null', () => {
+			expect(KTUtils.parseDataAttribute('null')).toBeNull();
+		});
+
+		it('"hello" returns "hello" (string fallback)', () => {
+			expect(KTUtils.parseDataAttribute('hello')).toBe('hello');
+		});
+
+		it('JSON object string returns parsed object', () => {
+			const result = KTUtils.parseDataAttribute('{"key":"value"}');
+			expect(result).toEqual({ key: 'value' });
+		});
+	});
+
+	describe('parseJson', () => {
+		it('parses valid JSON string', () => {
+			expect(KTUtils.parseJson('{"a":1}')).toEqual({ a: 1 });
+		});
+
+		it('returns null for empty string', () => {
+			expect(KTUtils.parseJson('')).toBeNull();
+		});
+
+		it('decodes URI-encoded JSON', () => {
+			const encoded = encodeURIComponent('{"x":"y"}');
+			expect(KTUtils.parseJson(encoded)).toEqual({ x: 'y' });
+		});
+	});
+
+	describe('parseSelector', () => {
+		it('escapes ID with CSS.escape', () => {
+			vi.stubGlobal('CSS', { escape: (s: string) => `escaped(${s})` });
+			const result = KTUtils.parseSelector('#my-id');
+			expect(result).toBe('#escaped(my-id)');
+			vi.unstubAllGlobals();
+		});
+
+		it('returns unchanged when no ID present', () => {
+			const result = KTUtils.parseSelector('.class');
+			expect(result).toBe('.class');
+		});
+
+		it('returns selector as-is when CSS.escape is unavailable', () => {
+			const orig = window.CSS;
+			// @ts-ignore
+			delete window.CSS;
+			expect(KTUtils.parseSelector('#my-id')).toBe('#my-id');
+			window.CSS = orig;
+		});
+	});
+
+	describe('capitalize', () => {
+		it('capitalizes first character', () => {
+			expect(KTUtils.capitalize('hello')).toBe('Hello');
+		});
+
+		it('does not change already capitalized string', () => {
+			expect(KTUtils.capitalize('Hello')).toBe('Hello');
+		});
+	});
+
+	describe('uncapitalize', () => {
+		it('lowercases first character', () => {
+			expect(KTUtils.uncapitalize('Hello')).toBe('hello');
+		});
+
+		it('does not change already lowercase string', () => {
+			expect(KTUtils.uncapitalize('hello')).toBe('hello');
+		});
+	});
+
+	describe('camelCase', () => {
+		it('converts hyphenated to camelCase', () => {
+			expect(KTUtils.camelCase('my-class-name')).toBe('myClassName');
+		});
+
+		it('returns unchanged when no hyphens', () => {
+			expect(KTUtils.camelCase('foo')).toBe('foo');
+		});
+	});
+
+	describe('camelReverseCase', () => {
+		it('converts camelCase to hyphenated', () => {
+			expect(KTUtils.camelReverseCase('myClassName')).toBe(
+				'my-class-name',
+			);
+		});
+
+		it('returns unchanged when no uppercase', () => {
+			expect(KTUtils.camelReverseCase('foo')).toBe('foo');
+		});
+	});
+
+	describe('isRTL', () => {
+		it('returns true when direction is rtl', () => {
+			const html = document.documentElement;
+			html.setAttribute('direction', 'rtl');
+			expect(KTUtils.isRTL()).toBe(true);
+			html.removeAttribute('direction');
+		});
+
+		it('returns false when direction is not rtl', () => {
+			expect(KTUtils.isRTL()).toBe(false);
+		});
+
+		it('returns false when html element not found', () => {
+			const orig = document.querySelector;
+			document.querySelector = vi.fn().mockReturnValue(null);
+			expect(KTUtils.isRTL()).toBe(false);
+			document.querySelector = orig;
+		});
+	});
+
+	describe('checksum', () => {
+		it('returns consistent 8-char hex string', () => {
+			const result = KTUtils.checksum('hello');
+			expect(result).toMatch(/^[0-9a-f]{8}$/);
+		});
+
+		it('returns "00000000" for empty string', () => {
+			expect(KTUtils.checksum('')).toBe('00000000');
+		});
+
+		it('is deterministic (same input → same output)', () => {
+			expect(KTUtils.checksum('hello')).toBe(KTUtils.checksum('hello'));
+		});
+
+		it('different inputs produce different hashes', () => {
+			expect(KTUtils.checksum('hello')).not.toBe(
+				KTUtils.checksum('world'),
+			);
+		});
+	});
+
+	describe('stringToBoolean', () => {
+		it('returns true for boolean true', () => {
+			expect(KTUtils.stringToBoolean(true)).toBe(true);
+		});
+
+		it('returns true for "true"', () => {
+			expect(KTUtils.stringToBoolean('true')).toBe(true);
+		});
+
+		it('returns false for "false"', () => {
+			expect(KTUtils.stringToBoolean('false')).toBe(false);
+		});
+
+		it('returns true for "TRUE" (case insensitive)', () => {
+			expect(KTUtils.stringToBoolean('TRUE')).toBe(true);
+		});
+
+		it('returns null for number 123', () => {
+			expect(KTUtils.stringToBoolean(123)).toBeNull();
+		});
+
+		it('returns null for unrecognized string', () => {
+			expect(KTUtils.stringToBoolean('yes')).toBeNull();
+		});
+	});
+
+	describe('stringToObject', () => {
+		it('parses valid JSON object string', () => {
+			expect(KTUtils.stringToObject('{"key":"value"}')).toEqual({
+				key: 'value',
+			});
+		});
+
+		it('returns null for "invalid"', () => {
+			expect(KTUtils.stringToObject('invalid')).toBeNull();
+		});
+
+		it('returns null for null', () => {
+			expect(KTUtils.stringToObject(null)).toBeNull();
+		});
+
+		it('returns null for array (not object)', () => {
+			expect(KTUtils.stringToObject('[1,2]')).toBeNull();
+		});
+	});
+
+	describe('stringToInteger', () => {
+		it('returns integer for number 42', () => {
+			expect(KTUtils.stringToInteger(42)).toBe(42);
+		});
+
+		it('floors decimal number 3.7 to 3', () => {
+			expect(KTUtils.stringToInteger(3.7)).toBe(3);
+		});
+
+		it('parses string "123" to 123', () => {
+			expect(KTUtils.stringToInteger('123')).toBe(123);
+		});
+
+		it('returns null for "abc"', () => {
+			expect(KTUtils.stringToInteger('abc')).toBeNull();
+		});
+
+		it('returns null for null', () => {
+			expect(KTUtils.stringToInteger(null)).toBeNull();
+		});
+
+		it('returns null for NaN number', () => {
+			expect(KTUtils.stringToInteger(NaN)).toBeNull();
+		});
+
+		it('handles negative numbers', () => {
+			expect(KTUtils.stringToInteger('-5')).toBe(-5);
+		});
+	});
+
+	describe('stringToFloat', () => {
+		it('returns float for number 3.14', () => {
+			expect(KTUtils.stringToFloat(3.14)).toBeCloseTo(3.14);
+		});
+
+		it('parses string "2.5" to 2.5', () => {
+			expect(KTUtils.stringToFloat('2.5')).toBeCloseTo(2.5);
+		});
+
+		it('returns null for "abc"', () => {
+			expect(KTUtils.stringToFloat('abc')).toBeNull();
+		});
+
+		it('returns null for null', () => {
+			expect(KTUtils.stringToFloat(null)).toBeNull();
+		});
+
+		it('returns null for NaN number', () => {
+			expect(KTUtils.stringToFloat(NaN)).toBeNull();
+		});
+	});
+
+	describe('throttle', () => {
+		beforeEach(() => {
+			vi.useFakeTimers();
+		});
+
+		afterEach(() => {
+			vi.useRealTimers();
+		});
+
+		it('calls func after delay when timer is undefined', () => {
+			const func = vi.fn();
+			KTUtils.throttle(undefined, func, 300);
+			expect(func).not.toHaveBeenCalled();
+			vi.advanceTimersByTime(300);
+			expect(func).toHaveBeenCalledTimes(1);
+		});
+
+		it('does not schedule new timeout when timer is set', () => {
+			const func = vi.fn();
+			const existingTimer = setTimeout(() => {}, 1000);
+			KTUtils.throttle(existingTimer, func, 300);
+			vi.advanceTimersByTime(500);
+			expect(func).not.toHaveBeenCalled();
+			clearTimeout(existingTimer);
+		});
+	});
+});

package/src/index.ts

@@ -84,6 +84,9 @@ export type {
 	KTDataTableConfigInterface,
 	KTDataTableColumnFilterTypeInterface,
 	KTDataTableColumnFilterInterface,
+	KTDataTableTextFilterInterface,
+	KTDataTableNumericFilterInterface,
+	KTDataTableDateRangeFilterInterface,
 	KTDataTableCheckConfigInterface,
 	KTDataTableCheckInterface,
 	KTDataTableCheckChangePayloadInterface,
@@ -234,6 +237,13 @@ export const KTComponents = {
 	},
 };
 
+// Livewire wire:navigate support: re-init all components after SPA navigation
+if (typeof window !== 'undefined') {
+	document.addEventListener('livewire:navigate', () => {
+		KTComponents.init();
+	});
+}
+
 declare global {
 	interface Window {
 		KTUtils: typeof KTUtils;

package/skills/ktui-components/SKILL.md

@@ -1,41 +0,0 @@
----
-name: ktui-components
-description: Guides correct use of KtUI (Keenthemes Tailwind UI) components—imports from @keenthemes/ktui, init pattern, and docs. Use this skill when building UI with KtUI, adding or customizing KtUI components, or when the user mentions KtUI, ktui, Keenthemes components, or Tailwind UI components from Keenthemes.
----
-
-# KtUI Components
-
-Use this skill when working with [KtUI](https://ktui.io)—free Tailwind UI components by Keenthemes. It ensures correct package usage, initialization, and reference to official docs.
-
-## Package and imports
-
-- **Package:** `@keenthemes/ktui` (npm install `@keenthemes/ktui`).
-- **Import pattern (ESM):** Import components and/or the init helper from the package root:
-  - Single component: `import { KTModal } from '@keenthemes/ktui';`
-  - Init all: `import { KTComponents } from '@keenthemes/ktui';` then call `KTComponents.init()` after DOM ready.
-- **Types (TypeScript):** Types are exported from the same entry; use the package root (e.g. `@keenthemes/ktui`) for types, not deep `lib/esm` paths.
-- **Styles:** Include KtUI CSS (e.g. from the package or built `dist/styles.css`) and ensure Tailwind and CSS variables are set up as in the [installation docs](https://ktui.io/docs/getting-started/installation).
-
-## Initialization
-
-- Call `KTComponents.init()` once after the DOM is ready so that data-attribute–driven components (dropdowns, modals, tabs, etc.) are initialized.
-- **Frameworks (React, Vue, Next):** Run init after the root is mounted (e.g. `useEffect` with empty deps, or `onMounted`) so the DOM with `data-kt-*` attributes exists before init.
-- For dynamically added markup (e.g. after route change or lazy load), run `KTComponents.init()` again or use per-component init (e.g. `KTModal.init()` on the new container).
-- **SSR:** Call init only on the client (e.g. inside `useEffect` or when `typeof document !== 'undefined'`), never during server render.
-- Per-component init is also available (e.g. `KTModal.init()`) when not using the full init.
-
-## Documentation
-
-- **Official docs:** [https://ktui.io](https://ktui.io) — use for component APIs, examples, and markup.
-- **Doc paths:** Getting started: `ktui.io/docs/installation`, `ktui.io/docs/theming`, `ktui.io/docs/typescript`, `ktui.io/docs/dark-mode`, `ktui.io/docs/rtl`, `ktui.io/docs/changelog`. Components: `ktui.io/docs/<component>` (e.g. `ktui.io/docs/modal`, `ktui.io/docs/tooltip`, `ktui.io/docs/datatable`, `ktui.io/docs/dropdown`, `ktui.io/docs/repeater`).
-- Prefer docs and examples from ktui.io over inferring markup or options.
-
-## Common pitfalls
-
-- **Components not opening or reacting:** Ensure `KTComponents.init()` ran after the relevant DOM was in the page; for SPAs, run init after navigation or after injecting KtUI markup.
-- **Styles missing or wrong:** Confirm KtUI CSS and CSS variables are loaded (see [installation](https://ktui.io/docs/installation), [theming](https://ktui.io/docs/theming)).
-- **SSR/hydration:** Do not call init during server render; run it only in the browser after mount.
-
-## Component list (reference)
-
-Components exported from `@keenthemes/ktui` include: KTDropdown, KTModal, KTDrawer, KTCollapse, KTDismiss, KTTabs, KTAccordion, KTScrollspy, KTScrollable, KTScrollto, KTSticky, KTReparent, KTToggle, KTTooltip, KTStepper, KTThemeSwitch, KTImageInput, KTTogglePassword, KTDataTable, KTSelect, KTToast, KTRating, KTRepeater. See the package exports or ktui.io for the full list and usage.

package/skills/ktui-theming/SKILL.md

@@ -1,50 +0,0 @@
----
-name: ktui-theming
-description: Guides KtUI theming with CSS variables, light/dark mode, and semantic colors. Use this skill when the user asks about KtUI colors, theme, dark mode, customizing appearance, or CSS variables for KtUI.
----
-
-# KtUI Theming
-
-Use this skill when working with [KtUI](https://ktui.io) theming—colors, dark mode, and custom appearance. KtUI uses CSS variables and a background/foreground convention; prefer these over inventing custom classes.
-
-## Convention
-
-- **Background/foreground:** KtUI follows a Shadcn-inspired convention. Background colors omit the `-background` suffix (e.g. `bg-primary` uses `var(--primary)`). Foreground colors use `-foreground` (e.g. `text-primary-foreground`).
-- **Semantic classes:** Use KtUI semantic utilities (e.g. `bg-background`, `text-foreground`, `bg-primary`, `text-card`, `kt-btn`, `kt-card`) so theming stays consistent.
-
-## Key CSS variables
-
-Define or override in your Tailwind entry (e.g. `style.css`). KtUI expects at least:
-
-- **Surfaces:** `--background`, `--foreground`; `--card`, `--card-foreground`; `--popover`, `--popover-foreground`.
-- **Brand:** `--primary`, `--primary-foreground`; `--secondary`, `--secondary-foreground`.
-- **Muted / accent:** `--muted`, `--muted-foreground`; `--accent`, `--accent-foreground`.
-- **Destructive:** `--destructive`, `--destructive-foreground`.
-- **Borders and inputs:** `--border`, `--input`, `--ring`.
-- **Radius:** `--radius` (e.g. `0.5rem`).
-
-Use `oklch()` or any valid CSS color. Example:
-
-```css
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(14.1% 0.005 285.823);
-  --primary: oklch(62.3% 0.214 259.815);
-  --primary-foreground: oklch(1 0 0);
-  --radius: 0.5rem;
-}
-```
-
-## Dark mode
-
-- **Variables:** Override the same variables under a `.dark` scope (or your dark-mode class). KtUI docs use `.dark` for dark theme.
-- **Tailwind:** Add the dark variant, e.g. `@custom-variant dark (&:is(.dark *));` in your Tailwind entry so utilities like `dark:bg-background` work.
-- **Theme switch:** Use the KTThemeSwitch component or toggle the `.dark` class on `<html>` (or a wrapper) to switch between light and dark variables.
-
-## Documentation
-
-- **Theming:** [ktui.io/docs/theming](https://ktui.io/docs/theming)
-- **Dark mode:** [ktui.io/docs/dark-mode](https://ktui.io/docs/dark-mode)
-- **Installation** (variables setup): [ktui.io/docs/installation](https://ktui.io/docs/installation)
-
-Prefer the official variable list and examples from these pages over guessing variable names or values.

package/src/components/datatable/datatable-event-adapter.ts

@@ -1,21 +0,0 @@
-/**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
- * Copyright 2025 by Keenthemes Inc
- */
-
-import {
-	KTDataTableEmit,
-	KTDataTableEventAdapter,
-} from './datatable-contracts';
-
-export function createDataTableEventAdapter(
-	fireEvent: KTDataTableEmit,
-	dispatchEvent: KTDataTableEmit,
-): KTDataTableEventAdapter {
-	return {
-		emit(eventName: string, eventData?: object): void {
-			fireEvent(eventName, eventData);
-			dispatchEvent(eventName, eventData);
-		},
-	};
-}