@keenthemes/ktui 1.2.0 → 1.2.1

package/src/components/range-slider/__tests__/range-slider.test.ts

@@ -0,0 +1,659 @@
+/**
+ * Tests for KTRangeSlider component
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTRangeSlider } from '../range-slider';
+
+describe('KTRangeSlider', () => {
+	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 range input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(instance.getElement()).toBe(wrap);
+			expect(instance.getRangeInput()).toBe(input);
+			expect(instance.getValue()).toBe(40);
+			instance.dispose();
+		});
+
+		it('initializes on the range input root', () => {
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.setAttribute('data-kt-range-slider', 'true');
+			input.min = '0';
+			input.max = '50';
+			input.value = '25';
+			container.appendChild(input);
+
+			const instance = new KTRangeSlider(input);
+			expect(instance.getElement()).toBe(input);
+			expect(instance.getRangeInput()).toBe(input);
+			instance.dispose();
+		});
+
+		it('binds to the first range input when multiple exist', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const a = document.createElement('input');
+			a.type = 'range';
+			a.value = '10';
+			const b = document.createElement('input');
+			b.type = 'range';
+			b.value = '20';
+			wrap.appendChild(a);
+			wrap.appendChild(b);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(instance.getRangeInput()).toBe(a);
+			instance.dispose();
+		});
+
+		it('does not initialize without a range input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			container.appendChild(wrap);
+			const instance = new KTRangeSlider(wrap);
+			expect(instance.getElement()).toBeNull();
+			expect(instance.getRangeInput()).toBeNull();
+		});
+	});
+
+	describe('output binding', () => {
+		it('updates output element text on input', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '.rs-out');
+			const out = document.createElement('span');
+			out.className = 'rs-out';
+			wrap.appendChild(out);
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '30';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(out.textContent).toBe('30');
+
+			input.value = '72';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('72');
+			instance.dispose();
+		});
+
+		it('still updates output if the native range input is replaced', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '.rs-out');
+
+			const out = document.createElement('span');
+			out.className = 'rs-out';
+			wrap.appendChild(out);
+
+			const input1 = document.createElement('input');
+			input1.type = 'range';
+			input1.min = '0';
+			input1.max = '100';
+			input1.value = '30';
+			wrap.appendChild(input1);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(out.textContent).toBe('30');
+
+			// Simulate a preview re-render replacing the native input.
+			wrap.removeChild(input1);
+			const input2 = document.createElement('input');
+			input2.type = 'range';
+			input2.min = '0';
+			input2.max = '100';
+			input2.value = '45';
+			wrap.appendChild(input2);
+
+			input2.value = '55';
+			input2.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('55');
+
+			instance.dispose();
+		});
+
+		it('trims and binds output selector within the root', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '  .rs-out  ');
+
+			const out = document.createElement('span');
+			out.className = 'rs-out';
+			wrap.appendChild(out);
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '20';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(out.textContent).toBe('20');
+
+			input.value = '33';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('33');
+
+			instance.dispose();
+		});
+
+		it('falls back to document query for the output selector', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '.rs-doc-out');
+
+			// Not inside the wrapper; should be resolved via document.querySelector.
+			const out = document.createElement('span');
+			out.className = 'rs-doc-out';
+			document.body.appendChild(out);
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '30';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(out.textContent).toBe('30');
+
+			input.value = '90';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('90');
+
+			instance.dispose();
+		});
+
+		it('still updates track fill even when output selector does not resolve', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '.does-not-exist');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe('0.4');
+
+			input.value = '100';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe('1');
+
+			instance.dispose();
+		});
+
+		it('ignores bubbled input events coming from non-range inputs', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-output', '.rs-out');
+
+			const out = document.createElement('span');
+			out.className = 'rs-out';
+			wrap.appendChild(out);
+
+			const range = document.createElement('input');
+			range.type = 'range';
+			range.min = '0';
+			range.max = '100';
+			range.value = '25';
+			wrap.appendChild(range);
+
+			const text = document.createElement('input');
+			text.type = 'text';
+			text.value = 'hello';
+			wrap.appendChild(text);
+
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(out.textContent).toBe('25');
+
+			// Event bubbles to wrapper, but should be ignored by handler because target isn't range.
+			text.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('25');
+
+			instance.dispose();
+		});
+	});
+
+	describe('events', () => {
+		it('includes native step in kt.range-slider.input detail when step is numeric', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.step = '5';
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				value: 40,
+				min: 0,
+				max: 100,
+				step: 5,
+			});
+
+			instance.dispose();
+		});
+
+		it('omits step in kt.range-slider.input payload when step="any"', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.step = 'any';
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			const payload = spy.mock.calls[0][0].detail.payload as Record<
+				string,
+				unknown
+			>;
+
+			expect(payload).toMatchObject({ value: 40, min: 0, max: 100 });
+			expect(payload).not.toHaveProperty('step');
+		});
+
+		it('defaults step to 1 when step attribute is empty', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.setAttribute('step', '');
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				value: 40,
+				min: 0,
+				max: 100,
+				step: 1,
+			});
+		});
+
+		it('defaults step to 1 when step attribute is invalid', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.step = '-2';
+			input.value = '40';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.input', spy);
+
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				step: 1,
+			});
+		});
+
+		it('dispatches kt.range-slider.change on native change', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '10';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.change', spy);
+
+			input.value = '55';
+			input.dispatchEvent(new Event('change', { bubbles: true }));
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy.mock.calls[0][0].detail.payload).toMatchObject({
+				value: 55,
+			});
+		});
+	});
+
+	describe('fill CSS variable', () => {
+		it('sets --kt-range-fill on the root from value', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '25';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe(
+				'0.25',
+			);
+
+			input.value = '100';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe('1');
+			instance.dispose();
+		});
+
+		it('defaults numeric min/max when attributes are invalid', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = 'not-a-number';
+			input.max = 'also-not-a-number';
+			input.value = '30';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			// ratio = (30 - 0) / (100 - 0) = 0.3
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe('0.3');
+		});
+
+		it('sets fill ratio to 0 when max equals min', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '50';
+			input.max = '50';
+			input.value = '50';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			new KTRangeSlider(wrap);
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe('0');
+		});
+
+		it('handles max<min path via _clamp branch', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '10';
+			input.max = '0';
+			input.value = '5';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+
+			const min = parseFloat(input.min);
+			const max = parseFloat(input.max);
+			const value = instance.getValue();
+
+			const clamped = max < min ? value : Math.min(max, Math.max(min, value));
+			const ratio = max === min ? 0 : (clamped - min) / (max - min);
+
+			expect(wrap.style.getPropertyValue('--kt-range-fill').trim()).toBe(
+				String(ratio),
+			);
+		});
+	});
+
+	describe('dispose', () => {
+		it('removes listeners and clears data', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '50';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap);
+			const spy = vi.fn();
+			wrap.addEventListener('kt.range-slider.input', spy);
+
+			instance.dispose();
+			expect(KTRangeSlider.getInstance(wrap)).toBeNull();
+
+			input.value = '80';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(spy).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('createInstances', () => {
+		it('respects data-kt-range-slider-lazy', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			wrap.setAttribute('data-kt-range-slider-lazy', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '20';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			KTRangeSlider.createInstances();
+			expect(KTRangeSlider.getInstance(wrap)).toBeNull();
+		});
+
+		it('is idempotent for the same root', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			KTRangeSlider.createInstances();
+			const a = KTRangeSlider.getInstance(wrap);
+			KTRangeSlider.createInstances();
+			const b = KTRangeSlider.getInstance(wrap);
+			expect(a).toBe(b);
+			a?.dispose();
+		});
+
+		it('constructor does not re-init an already-connected instance', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '20';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance1 = new KTRangeSlider(wrap);
+			const a = KTRangeSlider.getInstance(wrap);
+			// Second constructor call should not create a second instance.
+			new KTRangeSlider(wrap);
+			const b = KTRangeSlider.getInstance(wrap);
+
+			expect(a).toBe(b);
+			expect(a).not.toBeNull();
+
+			instance1?.dispose?.();
+		});
+	});
+
+	describe('static helpers', () => {
+		it('getInstance returns null for empty element input', () => {
+			expect(
+				KTRangeSlider.getInstance(null as unknown as HTMLElement),
+			).toBeNull();
+		});
+
+		it('getOrCreateInstance returns null when no range input exists', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			container.appendChild(wrap);
+
+			expect(KTRangeSlider.getOrCreateInstance(wrap)).toBeNull();
+		});
+
+		it('getOrCreateInstance creates when range input exists and no instance yet', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			container.appendChild(wrap);
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '20';
+			wrap.appendChild(input);
+
+			const instance = KTRangeSlider.getOrCreateInstance(wrap);
+			expect(instance).not.toBeNull();
+			expect(KTRangeSlider.getInstance(wrap)).toBe(instance);
+
+			instance?.dispose();
+		});
+
+		it('getOrCreateInstance returns existing instance when already initialized', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			container.appendChild(wrap);
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			wrap.appendChild(input);
+
+			const first = new KTRangeSlider(wrap);
+			const second = KTRangeSlider.getOrCreateInstance(wrap);
+			expect(second).toBe(first);
+			first.dispose();
+		});
+	});
+
+	describe('config + init', () => {
+		it('supports output selector from config object', () => {
+			const wrap = document.createElement('div');
+			const out = document.createElement('span');
+			out.className = 'cfg-out';
+			wrap.appendChild(out);
+
+			const input = document.createElement('input');
+			input.type = 'range';
+			input.min = '0';
+			input.max = '100';
+			input.value = '25';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const instance = new KTRangeSlider(wrap, { output: '.cfg-out' });
+			expect(out.textContent).toBe('25');
+
+			input.value = '60';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			expect(out.textContent).toBe('60');
+			instance.dispose();
+		});
+
+		it('init() initializes eligible slider roots', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			KTRangeSlider.init();
+			expect(KTRangeSlider.getInstance(wrap)).not.toBeNull();
+		});
+
+		it('reinitializes after element is disconnected then reattached', () => {
+			const wrap = document.createElement('div');
+			wrap.setAttribute('data-kt-range-slider', 'true');
+			const input = document.createElement('input');
+			input.type = 'range';
+			wrap.appendChild(input);
+			container.appendChild(wrap);
+
+			const first = new KTRangeSlider(wrap);
+			container.removeChild(wrap);
+			// disconnected element with previous instance should not be skipped
+			const second = new KTRangeSlider(wrap);
+			container.appendChild(wrap);
+
+			expect(second.getElement()).toBe(wrap);
+			expect(second).not.toBe(first);
+			second.dispose();
+		});
+	});
+});

package/src/components/range-slider/index.ts

@@ -0,0 +1,11 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+export { KTRangeSlider } from './range-slider';
+export type {
+	KTRangeSliderConfigInterface,
+	KTRangeSliderEventPayloadInterface,
+	KTRangeSliderInterface,
+} from './types';