@keenthemes/ktui 1.0.19 → 1.0.21

package/examples/sticky/README.md

@@ -0,0 +1,158 @@
+# KTUI Sticky Component - Testing Suite
+
+This directory contains comprehensive tests for the KTUI Sticky component, specifically designed to verify the changes from [PR #27](https://github.com/keenthemes/ktui/pull/27).
+
+## 🎯 What We're Testing
+
+The tests verify the following new features and improvements:
+
+### New Positioning Features
+- ✅ **Middle positioning** - Vertical centering (`inset-block-start: 50%`)
+- ✅ **Center positioning** - Horizontal centering (`inset-inline-start: 50%`)
+- ✅ **Bottom positioning** - Sticky to bottom with offset
+- ✅ **Combined positioning** - Middle + Center for full centering
+
+### Improved Logic
+- ✅ **Exclusive positioning** - Only one of `top`/`bottom` and `start`/`end` applied
+- ✅ **Auto handling** - Proper fallback values for `'auto'` inputs
+- ✅ **Offset calculation** - Dynamic positioning using `KTDom.offset()`
+
+### Modern CSS Support
+- ✅ **Logical properties** - `insetBlockStart`, `insetInlineStart`, `insetInlineEnd`
+- ✅ **RTL/LTR compatibility** - Better support for right-to-left layouts
+
+## 📁 Test Files
+
+### 1. `test-sticky-positioning.html`
+**Visual/Interactive Test**
+- Comprehensive visual test with 8 different positioning scenarios
+- Real-time position indicator showing computed styles
+- RTL toggle functionality
+- Scroll indicators and controls
+
+**How to use:**
+```bash
+# Open in browser
+open examples/sticky/test-sticky-positioning.html
+```
+
+### 2. `test-sticky-logic.js`
+**Programmatic Test Suite**
+- Automated tests for all positioning logic
+- Validates computed CSS properties
+- Tests exclusive positioning rules
+- Verifies auto fallback values
+
+### 3. `test-runner.html`
+**Test Runner Interface**
+- Clean UI for running automated tests
+- Detailed test results with pass/fail status
+- Console output capture
+- Visual test summary
+
+**How to use:**
+```bash
+# Open in browser
+open examples/sticky/test-runner.html
+```
+
+## 🧪 Running the Tests
+
+### Option 1: Visual Testing (Recommended)
+1. Open `test-sticky-positioning.html` in your browser
+2. Scroll through the page to see each sticky element in action
+3. Use the position indicator to verify computed styles
+4. Test RTL layout by clicking "Toggle RTL Layout"
+
+### Option 2: Automated Testing
+1. Open `test-runner.html` in your browser
+2. Click "Run All Tests" to execute the automated test suite
+3. Review the detailed results and console output
+
+### Option 3: Console Testing
+1. Open browser developer tools
+2. Import and run the test suite directly:
+```javascript
+import StickyTestSuite from './examples/sticky/test-sticky-logic.js';
+const testSuite = new StickyTestSuite();
+await testSuite.runAllTests();
+```
+
+## 📋 Test Scenarios
+
+### 1. Basic Positioning
+- **Top**: `data-kt-sticky-top="20"` → `inset-block-start: 20px`
+- **Bottom**: `data-kt-sticky-bottom="20"` → `inset-block-end: 20px`
+
+### 2. Centering
+- **Middle**: `data-kt-sticky-middle="true"` → `inset-block-start: 50%`
+- **Center**: `data-kt-sticky-center="true"` → `inset-inline-start: 50%`
+- **Both**: `data-kt-sticky-middle="true" data-kt-sticky-center="true"` → Fully centered
+
+### 3. Auto Positioning
+- **Auto Top**: `data-kt-sticky-top="auto"` → `inset-block-start: 0px`
+- **Auto Start**: `data-kt-sticky-start="auto"` → Calculated offset using `KTDom.offset()`
+
+### 4. Exclusive Logic
+- **Top + Bottom**: Only top is applied (top takes precedence)
+- **Start + End**: Only start is applied (start takes precedence)
+
+### 5. RTL Support
+- **End positioning**: `data-kt-sticky-end="20"` → `inset-inline-end: 20px`
+- **Logical properties**: Works correctly in both LTR and RTL layouts
+
+## 🔍 What to Look For
+
+### ✅ Success Indicators
+- Elements stick to the correct positions when scrolling
+- Computed styles match expected values
+- RTL layout works correctly
+- Auto positioning calculates proper offsets
+- Exclusive positioning rules are followed
+
+### ❌ Failure Indicators
+- Elements don't stick or stick to wrong positions
+- Computed styles don't match expected values
+- RTL layout breaks positioning
+- Auto positioning doesn't calculate offsets
+- Multiple positioning properties conflict
+
+## 🛠️ Troubleshooting
+
+### Common Issues
+
+1. **Tests not running**
+   - Ensure you're serving files from a web server (not file://)
+   - Check browser console for import errors
+   - Verify KTUI library is built and accessible
+
+2. **Positioning not working**
+   - Check if sticky element has proper dimensions
+   - Verify scroll container is correct
+   - Ensure CSS logical properties are supported
+
+3. **RTL not working**
+   - Check if `dir="rtl"` is set on `<html>` element
+   - Verify browser supports logical properties
+   - Test with different RTL content
+
+### Debug Mode
+Enable debug logging by adding this to the console:
+```javascript
+localStorage.setItem('ktui-debug', 'true');
+```
+
+## 📊 Expected Results
+
+When all tests pass, you should see:
+- ✅ 8/8 tests passed
+- All positioning scenarios working correctly
+- Logical properties being used
+- RTL layout functioning properly
+- Auto positioning calculating offsets
+
+## 🔗 Related Links
+
+- [PR #27](https://github.com/keenthemes/ktui/pull/27) - Original pull request
+- [Sticky Component Documentation](../src/components/sticky/) - Component source code
+- [KTUI Main Documentation](../../README.md) - Main project documentation

package/examples/sticky/debug-sticky.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Debug Sticky Component</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .debug-sticky {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            font-weight: 600;
+            text-align: center;
+            width: 200px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .debug-sticky.active {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+
+        .debug-info {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 1rem;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 12px;
+            max-width: 400px;
+            z-index: 9999;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="debug-info" id="debugInfo">
+        Loading...
+    </div>
+
+    <!-- Simple test section -->
+    <div style="height: 100vh; padding: 2rem;">
+        <h1>Debug Sticky Component</h1>
+        <p>Scroll down to test the sticky element</p>
+    </div>
+
+    <!-- Single sticky element for testing -->
+    <div class="debug-sticky"
+         data-kt-sticky="true"
+         data-kt-sticky-top="20"
+         data-kt-sticky-offset="100"
+         data-kt-sticky-zindex="1000"
+         data-kt-sticky-name="debug-test">
+        Debug Sticky
+    </div>
+
+    <!-- Content to scroll through -->
+    <div style="height: 200vh; padding: 2rem;">
+        <h2>Scroll Content</h2>
+        <p>This content is here to allow scrolling and test the sticky element.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <!-- Load KTUI -->
+    <script src="../../dist/ktui.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const debugInfo = document.getElementById('debugInfo');
+
+            function updateDebugInfo() {
+                const stickyElement = document.querySelector('[data-kt-sticky]');
+                const initializedElement = document.querySelector('[data-kt-sticky-initialized]');
+                const activeElement = document.querySelector('[data-kt-sticky-initialized].active');
+
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                const viewportHeight = window.innerHeight;
+
+                let info = `
+                    <strong>Debug Info:</strong><br>
+                    Scroll: ${scrollTop}px<br>
+                    Viewport Height: ${viewportHeight}px<br>
+                    KTSticky Available: ${!!window.KTSticky}<br>
+                    Sticky Elements: ${document.querySelectorAll('[data-kt-sticky]').length}<br>
+                    Initialized Elements: ${document.querySelectorAll('[data-kt-sticky-initialized]').length}<br>
+                    Active Elements: ${document.querySelectorAll('[data-kt-sticky-initialized].active').length}<br>
+                `;
+
+                if (stickyElement) {
+                    const computedStyle = window.getComputedStyle(stickyElement);
+                    const height = stickyElement.offsetHeight;
+                    const top = stickyElement.getAttribute('data-kt-sticky-top') || '0';
+                    const offset = stickyElement.getAttribute('data-kt-sticky-offset') || '0';
+
+                    info += `
+                        <br><strong>Sticky Element:</strong><br>
+                        Height: ${height}px<br>
+                        Top: ${top}px<br>
+                        Offset: ${offset}px<br>
+                        Height + Top: ${height + parseInt(top)}px<br>
+                        Position: ${computedStyle.position}<br>
+                        Z-Index: ${computedStyle.zIndex}<br>
+                        InsetBlockStart: ${computedStyle.insetBlockStart}<br>
+                    `;
+                }
+
+                if (initializedElement) {
+                    info += `<br><strong>Initialized Element:</strong><br>`;
+                    info += `Classes: ${initializedElement.className}<br>`;
+                    info += `Data Attributes: ${Array.from(initializedElement.attributes).filter(attr => attr.name.startsWith('data-kt-sticky')).map(attr => `${attr.name}="${attr.value}"`).join(', ')}<br>`;
+                }
+
+                debugInfo.innerHTML = info;
+            }
+
+            // Initialize KTUI
+            if (window.KTSticky) {
+                console.log('Initializing KTSticky...');
+                window.KTSticky.init();
+                console.log('KTSticky initialized');
+            } else {
+                console.error('KTSticky not found!');
+            }
+
+            // Update debug info initially and on scroll
+            updateDebugInfo();
+            window.addEventListener('scroll', updateDebugInfo);
+            window.addEventListener('resize', updateDebugInfo);
+
+            // Update every second to catch any changes
+            setInterval(updateDebugInfo, 1000);
+        });
+    </script>
+</body>
+</html>

package/examples/sticky/test-runner.html

@@ -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>