npm - @keenthemes/ktui - Versions diffs - 1.0.20 → 1.0.21 - Mend

@keenthemes/ktui 1.0.20 → 1.0.21

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 (98) hide show

package/dist/ktui.js +418 -144
package/dist/ktui.min.js +1 -1
package/dist/ktui.min.js.map +1 -1
package/dist/styles.css +139 -31
package/examples/image-input/file-upload-example.html +189 -0
package/examples/select/remote-data_.html +5 -0
package/examples/select/test-optimizations.html +227 -0
package/examples/select/test-remote-search.html +151 -0
package/examples/sticky/README.md +158 -0
package/examples/sticky/debug-sticky.html +144 -0
package/examples/sticky/test-runner.html +175 -0
package/examples/sticky/test-sticky-logic.js +369 -0
package/examples/sticky/test-sticky-positioning.html +386 -0
package/examples/toast/example.html +52 -0
package/lib/cjs/components/component.js +5 -3
package/lib/cjs/components/component.js.map +1 -1
package/lib/cjs/components/datatable/datatable-sort.js +4 -0
package/lib/cjs/components/datatable/datatable-sort.js.map +1 -1
package/lib/cjs/components/datatable/datatable.js +9 -3
package/lib/cjs/components/datatable/datatable.js.map +1 -1
package/lib/cjs/components/image-input/image-input.js +10 -2
package/lib/cjs/components/image-input/image-input.js.map +1 -1
package/lib/cjs/components/select/combobox.js +50 -20
package/lib/cjs/components/select/combobox.js.map +1 -1
package/lib/cjs/components/select/dropdown.js +4 -2
package/lib/cjs/components/select/dropdown.js.map +1 -1
package/lib/cjs/components/select/index.js.map +1 -1
package/lib/cjs/components/select/option.js +2 -1
package/lib/cjs/components/select/option.js.map +1 -1
package/lib/cjs/components/select/remote.js +50 -50
package/lib/cjs/components/select/remote.js.map +1 -1
package/lib/cjs/components/select/search.js +7 -5
package/lib/cjs/components/select/search.js.map +1 -1
package/lib/cjs/components/select/select.js +199 -33
package/lib/cjs/components/select/select.js.map +1 -1
package/lib/cjs/components/select/tags.js +3 -1
package/lib/cjs/components/select/tags.js.map +1 -1
package/lib/cjs/components/select/templates.js.map +1 -1
package/lib/cjs/components/select/utils.js +23 -10
package/lib/cjs/components/select/utils.js.map +1 -1
package/lib/cjs/components/sticky/sticky.js +52 -14
package/lib/cjs/components/sticky/sticky.js.map +1 -1
package/lib/esm/components/component.js +5 -3
package/lib/esm/components/component.js.map +1 -1
package/lib/esm/components/datatable/datatable-sort.js +4 -0
package/lib/esm/components/datatable/datatable-sort.js.map +1 -1
package/lib/esm/components/datatable/datatable.js +9 -3
package/lib/esm/components/datatable/datatable.js.map +1 -1
package/lib/esm/components/image-input/image-input.js +10 -2
package/lib/esm/components/image-input/image-input.js.map +1 -1
package/lib/esm/components/select/combobox.js +50 -20
package/lib/esm/components/select/combobox.js.map +1 -1
package/lib/esm/components/select/dropdown.js +4 -2
package/lib/esm/components/select/dropdown.js.map +1 -1
package/lib/esm/components/select/index.js +1 -1
package/lib/esm/components/select/index.js.map +1 -1
package/lib/esm/components/select/option.js +2 -1
package/lib/esm/components/select/option.js.map +1 -1
package/lib/esm/components/select/remote.js +50 -50
package/lib/esm/components/select/remote.js.map +1 -1
package/lib/esm/components/select/search.js +8 -6
package/lib/esm/components/select/search.js.map +1 -1
package/lib/esm/components/select/select.js +199 -33
package/lib/esm/components/select/select.js.map +1 -1
package/lib/esm/components/select/tags.js +3 -1
package/lib/esm/components/select/tags.js.map +1 -1
package/lib/esm/components/select/templates.js.map +1 -1
package/lib/esm/components/select/utils.js +23 -10
package/lib/esm/components/select/utils.js.map +1 -1
package/lib/esm/components/sticky/sticky.js +52 -14
package/lib/esm/components/sticky/sticky.js.map +1 -1
package/package.json +1 -1
package/src/components/component.ts +12 -11
package/src/components/datatable/datatable-sort.ts +6 -0
package/src/components/datatable/datatable.ts +90 -81
package/src/components/image-input/image-input.ts +11 -2
package/src/components/image-input/types.ts +1 -0
package/src/components/input/input-group.css +1 -1
package/src/components/input/input.css +1 -1
package/src/components/scrollable/scrollable.css +3 -3
package/src/components/select/combobox.ts +84 -34
package/src/components/select/dropdown.ts +20 -11
package/src/components/select/index.ts +6 -1
package/src/components/select/option.ts +7 -6
package/src/components/select/remote.ts +51 -52
package/src/components/select/search.ts +51 -45
package/src/components/select/select.css +12 -11
package/src/components/select/select.ts +371 -102
package/src/components/select/tags.ts +9 -3
package/src/components/select/templates.ts +1 -4
package/src/components/select/utils.ts +55 -20
package/src/components/select/variants.css +0 -1
package/src/components/sticky/sticky.ts +47 -16
package/src/components/sticky/types.ts +3 -0
package/src/components/table/table.css +1 -1
package/src/components/textarea/textarea.css +1 -1
package/src/components/toast/toast.css +84 -47
package/src/components/toast/types.ts +3 -0

package/examples/sticky/test-runner.html ADDED Viewed

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KTUI Sticky Component - Test Runner</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .test-result {
+            padding: 1rem;
+            margin: 0.5rem 0;
+            border-radius: 8px;
+            border-left: 4px solid;
+        }
+        .test-result.pass {
+            background: #f0fdf4;
+            border-left-color: #22c55e;
+        }
+        .test-result.fail {
+            background: #fef2f2;
+            border-left-color: #ef4444;
+        }
+        .test-details {
+            font-family: monospace;
+            font-size: 0.875rem;
+            background: #f8fafc;
+            padding: 0.5rem;
+            border-radius: 4px;
+            margin-top: 0.5rem;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 p-8">
+    <div class="max-w-4xl mx-auto">
+        <h1 class="text-3xl font-bold mb-8">KTUI Sticky Component - Test Runner</h1>
+        <p class="text-gray-600 mb-8">Testing PR #27 changes: middle, center, bottom positioning with improved offset logic</p>
+        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+            <h2 class="text-xl font-semibold mb-4">Test Controls</h2>
+            <div class="space-x-4">
+                <button id="runTests" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
+                    Run All Tests
+                </button>
+                <button id="clearResults" class="bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600">
+                    Clear Results
+                </button>
+            </div>
+        </div>
+        <div id="testResults" class="space-y-4">
+            <div class="text-center text-gray-500 py-8">
+                Click "Run All Tests" to start testing the sticky component
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import StickyTestSuite from './test-sticky-logic.js';
+        const runTestsBtn = document.getElementById('runTests');
+        const clearResultsBtn = document.getElementById('clearResults');
+        const testResultsDiv = document.getElementById('testResults');
+        let testSuite = null;
+        runTestsBtn.addEventListener('click', async () => {
+            // Disable button during testing
+            runTestsBtn.disabled = true;
+            runTestsBtn.textContent = 'Running Tests...';
+            // Clear previous results
+            testResultsDiv.innerHTML = '<div class="text-center text-gray-500 py-8">Running tests...</div>';
+            try {
+                // Create and run test suite
+                testSuite = new StickyTestSuite();
+                // Override console.log to capture test output
+                const originalLog = console.log;
+                const testOutput = [];
+                console.log = (...args) => {
+                    originalLog.apply(console, args);
+                    testOutput.push(args.join(' '));
+                };
+                // Run tests
+                await testSuite.runAllTests();
+                // Restore console.log
+                console.log = originalLog;
+                // Display results
+                displayResults(testSuite.testResults, testOutput);
+            } catch (error) {
+                console.error('Test execution failed:', error);
+                testResultsDiv.innerHTML = `
+                    <div class="test-result fail">
+                        <h3 class="font-semibold">Test Execution Failed</h3>
+                        <p class="text-red-600">${error.message}</p>
+                    </div>
+                `;
+            } finally {
+                // Re-enable button
+                runTestsBtn.disabled = false;
+                runTestsBtn.textContent = 'Run All Tests';
+            }
+        });
+        clearResultsBtn.addEventListener('click', () => {
+            testResultsDiv.innerHTML = '<div class="text-center text-gray-500 py-8">Click "Run All Tests" to start testing the sticky component</div>';
+        });
+        function displayResults(results, output) {
+            const passed = results.filter(r => r.passed).length;
+            const total = results.length;
+            let html = `
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-semibold mb-4">Test Summary</h2>
+                    <div class="flex items-center space-x-4">
+                        <div class="text-2xl font-bold ${passed === total ? 'text-green-600' : 'text-red-600'}">
+                            ${passed}/${total}
+                        </div>
+                        <div class="text-gray-600">
+                            tests passed
+                        </div>
+                        <div class="text-sm text-gray-500">
+                            ${((passed / total) * 100).toFixed(1)}% success rate
+                        </div>
+                    </div>
+                </div>
+            `;
+            results.forEach((result, index) => {
+                const resultClass = result.passed ? 'pass' : 'fail';
+                const statusIcon = result.passed ? '✅' : '❌';
+                html += `
+                    <div class="test-result ${resultClass}">
+                        <h3 class="font-semibold">${statusIcon} ${result.test}</h3>
+                        <p class="text-sm text-gray-600 mt-1">${result.expected}</p>
+                        <div class="test-details">
+                            <div><strong>Actual:</strong> ${result.actual}</div>
+                            <div><strong>Position:</strong> ${result.styles.position}</div>
+                            <div><strong>InsetBlockStart:</strong> ${result.styles.insetBlockStart}</div>
+                            <div><strong>InsetBlockEnd:</strong> ${result.styles.insetBlockEnd}</div>
+                            <div><strong>InsetInlineStart:</strong> ${result.styles.insetInlineStart}</div>
+                            <div><strong>InsetInlineEnd:</strong> ${result.styles.insetInlineEnd}</div>
+                        </div>
+                    </div>
+                `;
+            });
+            // Add console output
+            if (output.length > 0) {
+                html += `
+                    <div class="bg-white rounded-lg shadow-md p-6">
+                        <h2 class="text-xl font-semibold mb-4">Console Output</h2>
+                        <div class="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm overflow-auto max-h-96">
+                            ${output.map(line => `<div>${line}</div>`).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            testResultsDiv.innerHTML = html;
+        }
+    </script>
+</body>
+</html>

package/examples/sticky/test-sticky-logic.js ADDED Viewed

@@ -0,0 +1,369 @@
+/**
+ * KTUI Sticky Component - Logic Test
+ * Tests the positioning logic changes from PR #27
+ */
+import { KTSticky } from '../../lib/esm/components/sticky/index.js';
+class StickyTestSuite {
+    constructor() {
+        this.testResults = [];
+        this.testElement = null;
+    }
+    // Setup test environment
+    setup() {
+        // Create a test container
+        const container = document.createElement('div');
+        container.id = 'sticky-test-container';
+        container.style.cssText = `
+            position: relative;
+            width: 100%;
+            height: 200vh;
+            background: #f0f0f0;
+            padding: 20px;
+        `;
+        document.body.appendChild(container);
+        // Create test element
+        this.testElement = document.createElement('div');
+        this.testElement.id = 'sticky-test-element';
+        this.testElement.style.cssText = `
+            width: 200px;
+            height: 100px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            border-radius: 8px;
+        `;
+        container.appendChild(this.testElement);
+        console.log('✅ Test environment setup complete');
+    }
+    // Cleanup test environment
+    cleanup() {
+        const container = document.getElementById('sticky-test-container');
+        if (container) {
+            container.remove();
+        }
+        this.testResults = [];
+        console.log('✅ Test environment cleaned up');
+    }
+    // Test helper: create sticky instance with config
+    createStickyInstance(config) {
+        // Remove existing instance
+        if (this.testElement.hasAttribute('data-kt-sticky-initialized')) {
+            const existingInstance = KTSticky.getInstance(this.testElement);
+            if (existingInstance) {
+                // Force cleanup
+                this.testElement.classList.remove('active');
+                this.testElement.style.position = '';
+                this.testElement.style.top = '';
+                this.testElement.style.bottom = '';
+                this.testElement.style.left = '';
+                this.testElement.style.right = '';
+                this.testElement.style.insetBlockStart = '';
+                this.testElement.style.insetInlineStart = '';
+                this.testElement.style.insetInlineEnd = '';
+            }
+        }
+        // Clear attributes
+        this.testElement.removeAttribute('data-kt-sticky');
+        this.testElement.removeAttribute('data-kt-sticky-top');
+        this.testElement.removeAttribute('data-kt-sticky-bottom');
+        this.testElement.removeAttribute('data-kt-sticky-start');
+        this.testElement.removeAttribute('data-kt-sticky-end');
+        this.testElement.removeAttribute('data-kt-sticky-middle');
+        this.testElement.removeAttribute('data-kt-sticky-center');
+        this.testElement.removeAttribute('data-kt-sticky-name');
+        // Set new attributes based on config
+        this.testElement.setAttribute('data-kt-sticky', 'true');
+        this.testElement.setAttribute('data-kt-sticky-name', 'test');
+        if (config.top !== undefined) this.testElement.setAttribute('data-kt-sticky-top', config.top);
+        if (config.bottom !== undefined) this.testElement.setAttribute('data-kt-sticky-bottom', config.bottom);
+        if (config.start !== undefined) this.testElement.setAttribute('data-kt-sticky-start', config.start);
+        if (config.end !== undefined) this.testElement.setAttribute('data-kt-sticky-end', config.end);
+        if (config.middle !== undefined) this.testElement.setAttribute('data-kt-sticky-middle', config.middle);
+        if (config.center !== undefined) this.testElement.setAttribute('data-kt-sticky-center', config.center);
+        // Create new instance
+        return new KTSticky(this.testElement);
+    }
+    // Test helper: get computed styles
+    getComputedStyles() {
+        const computed = window.getComputedStyle(this.testElement);
+        return {
+            position: computed.position,
+            top: computed.top,
+            bottom: computed.bottom,
+            left: computed.left,
+            right: computed.right,
+            insetBlockStart: computed.insetBlockStart,
+            insetBlockEnd: computed.insetBlockEnd,
+            insetInlineStart: computed.insetInlineStart,
+            insetInlineEnd: computed.insetInlineEnd,
+            transform: computed.transform
+        };
+    }
+    // Test helper: simulate scroll to trigger sticky
+    simulateScroll() {
+        // Simulate scroll by triggering the scroll event
+        window.dispatchEvent(new Event('scroll'));
+        // Force a small delay to allow processing
+        return new Promise(resolve => setTimeout(resolve, 100));
+    }
+    // Test 1: Middle positioning
+    async testMiddlePositioning() {
+        console.log('🧪 Testing Middle (Vertical Center) Positioning...');
+        const instance = this.createStickyInstance({ middle: true });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const isMiddle = styles.insetBlockStart === '50%';
+        this.testResults.push({
+            test: 'Middle Positioning',
+            passed: isMiddle,
+            expected: 'insetBlockStart: 50%',
+            actual: `insetBlockStart: ${styles.insetBlockStart}`,
+            styles
+        });
+        console.log(isMiddle ? '✅ Middle positioning works' : '❌ Middle positioning failed');
+        return isMiddle;
+    }
+    // Test 2: Center positioning
+    async testCenterPositioning() {
+        console.log('🧪 Testing Center (Horizontal Center) Positioning...');
+        const instance = this.createStickyInstance({ center: true });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const isCenter = styles.insetInlineStart === '50%';
+        this.testResults.push({
+            test: 'Center Positioning',
+            passed: isCenter,
+            expected: 'insetInlineStart: 50%',
+            actual: `insetInlineStart: ${styles.insetInlineStart}`,
+            styles
+        });
+        console.log(isCenter ? '✅ Center positioning works' : '❌ Center positioning failed');
+        return isCenter;
+    }
+    // Test 3: Middle + Center positioning
+    async testMiddleCenterPositioning() {
+        console.log('🧪 Testing Middle + Center (Fully Centered) Positioning...');
+        const instance = this.createStickyInstance({ middle: true, center: true });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const isMiddleCenter = styles.insetBlockStart === '50%' && styles.insetInlineStart === '50%';
+        this.testResults.push({
+            test: 'Middle + Center Positioning',
+            passed: isMiddleCenter,
+            expected: 'insetBlockStart: 50%, insetInlineStart: 50%',
+            actual: `insetBlockStart: ${styles.insetBlockStart}, insetInlineStart: ${styles.insetInlineStart}`,
+            styles
+        });
+        console.log(isMiddleCenter ? '✅ Middle + Center positioning works' : '❌ Middle + Center positioning failed');
+        return isMiddleCenter;
+    }
+    // Test 4: Bottom positioning
+    async testBottomPositioning() {
+        console.log('🧪 Testing Bottom Positioning...');
+        const instance = this.createStickyInstance({ bottom: '20' });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const isBottom = styles.insetBlockEnd === '20px';
+        this.testResults.push({
+            test: 'Bottom Positioning',
+            passed: isBottom,
+            expected: 'insetBlockEnd: 20px',
+            actual: `insetBlockEnd: ${styles.insetBlockEnd}`,
+            styles
+        });
+        console.log(isBottom ? '✅ Bottom positioning works' : '❌ Bottom positioning failed');
+        return isBottom;
+    }
+    // Test 5: Auto positioning with offset calculation
+    async testAutoPositioning() {
+        console.log('🧪 Testing Auto Positioning with Offset Calculation...');
+        const instance = this.createStickyInstance({ start: 'auto', top: '50' });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const hasAutoOffset = styles.insetInlineStart !== 'auto' && styles.insetInlineStart !== '';
+        this.testResults.push({
+            test: 'Auto Positioning with Offset',
+            passed: hasAutoOffset,
+            expected: 'insetInlineStart: calculated offset value',
+            actual: `insetInlineStart: ${styles.insetInlineStart}`,
+            styles
+        });
+        console.log(hasAutoOffset ? '✅ Auto positioning with offset works' : '❌ Auto positioning with offset failed');
+        return hasAutoOffset;
+    }
+    // Test 6: Exclusive positioning logic (top vs bottom)
+    async testExclusivePositioning() {
+        console.log('🧪 Testing Exclusive Positioning Logic (top vs bottom)...');
+        const instance = this.createStickyInstance({ top: '30', bottom: '30' });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const isExclusive = styles.insetBlockStart === '30px' && styles.insetBlockEnd === 'auto';
+        this.testResults.push({
+            test: 'Exclusive Positioning Logic',
+            passed: isExclusive,
+            expected: 'insetBlockStart: 30px, insetBlockEnd: auto (top takes precedence)',
+            actual: `insetBlockStart: ${styles.insetBlockStart}, insetBlockEnd: ${styles.insetBlockEnd}`,
+            styles
+        });
+        console.log(isExclusive ? '✅ Exclusive positioning logic works' : '❌ Exclusive positioning logic failed');
+        return isExclusive;
+    }
+    // Test 7: Logical properties for RTL support
+    async testLogicalProperties() {
+        console.log('🧪 Testing Logical Properties for RTL Support...');
+        const instance = this.createStickyInstance({ end: '20', top: '40' });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const usesLogicalProps = styles.insetInlineEnd === '20px' && styles.insetBlockStart === '40px';
+        this.testResults.push({
+            test: 'Logical Properties (RTL Support)',
+            passed: usesLogicalProps,
+            expected: 'insetInlineEnd: 20px, insetBlockStart: 40px',
+            actual: `insetInlineEnd: ${styles.insetInlineEnd}, insetBlockStart: ${styles.insetBlockStart}`,
+            styles
+        });
+        console.log(usesLogicalProps ? '✅ Logical properties work' : '❌ Logical properties failed');
+        return usesLogicalProps;
+    }
+    // Test 8: Auto fallback values
+    async testAutoFallbackValues() {
+        console.log('🧪 Testing Auto Fallback Values...');
+        const instance = this.createStickyInstance({ top: 'auto' });
+        await this.simulateScroll();
+        const styles = this.getComputedStyles();
+        const hasAutoFallback = styles.insetBlockStart === '0px';
+        this.testResults.push({
+            test: 'Auto Fallback Values',
+            passed: hasAutoFallback,
+            expected: 'insetBlockStart: 0px (auto defaults to 0px)',
+            actual: `insetBlockStart: ${styles.insetBlockStart}`,
+            styles
+        });
+        console.log(hasAutoFallback ? '✅ Auto fallback values work' : '❌ Auto fallback values failed');
+        return hasAutoFallback;
+    }
+    // Run all tests
+    async runAllTests() {
+        console.log('🚀 Starting KTUI Sticky Component Tests...');
+        console.log('Testing PR #27 changes: middle, center, bottom positioning with improved offset logic\n');
+        this.setup();
+        try {
+            await this.testMiddlePositioning();
+            await this.testCenterPositioning();
+            await this.testMiddleCenterPositioning();
+            await this.testBottomPositioning();
+            await this.testAutoPositioning();
+            await this.testExclusivePositioning();
+            await this.testLogicalProperties();
+            await this.testAutoFallbackValues();
+            this.printResults();
+        } catch (error) {
+            console.error('❌ Test suite failed:', error);
+        } finally {
+            this.cleanup();
+        }
+    }
+    // Print test results
+    printResults() {
+        console.log('\n📊 Test Results Summary:');
+        console.log('='.repeat(60));
+        const passed = this.testResults.filter(r => r.passed).length;
+        const total = this.testResults.length;
+        this.testResults.forEach((result, index) => {
+            const status = result.passed ? '✅ PASS' : '❌ FAIL';
+            console.log(`${index + 1}. ${status} - ${result.test}`);
+            if (!result.passed) {
+                console.log(`   Expected: ${result.expected}`);
+                console.log(`   Actual: ${result.actual}`);
+            }
+        });
+        console.log('='.repeat(60));
+        console.log(`Overall: ${passed}/${total} tests passed`);
+        if (passed === total) {
+            console.log('🎉 All tests passed! PR #27 changes are working correctly.');
+        } else {
+            console.log('⚠️  Some tests failed. Please review the implementation.');
+        }
+    }
+}
+// Export for use in browser
+if (typeof window !== 'undefined') {
+    window.StickyTestSuite = StickyTestSuite;
+}
+// Auto-run tests if this file is loaded directly
+if (typeof document !== 'undefined') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const testSuite = new StickyTestSuite();
+        testSuite.runAllTests();
+    });
+}
+export default StickyTestSuite;