npm - @keenthemes/ktui - Versions diffs - 1.0.28 → 1.1.0 - Mend

@keenthemes/ktui 1.0.28 → 1.1.0

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

package/examples/image-input/file-upload-example.html DELETED Viewed

@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KTUI Image Input - File Upload Example</title>
-    <link rel="stylesheet" href="../../dist/styles.css">
-    <style>
-        body { padding: 2rem; font-family: Arial, sans-serif; }
-        .example-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
-        .test-result { margin: 0.5rem 0; padding: 0.5rem; background: #f5f5f5; }
-        .success { background: #d4edda; color: #155724; }
-        .error { background: #f8d7da; color: #721c24; }
-        .info { background: #d1ecf1; color: #0c5460; }
-        .code-block { background: #f8f9fa; padding: 1rem; border-radius: 4px; margin: 1rem 0; }
-    </style>
-</head>
-<body>
-    <h1>KTUI Image Input - File Upload Example</h1>
-    <p>This example demonstrates how to use the KTUI Image Input component with proper file upload functionality.</p>
-    <div class="example-section">
-        <h2>Image Input Component</h2>
-        <div class="kt-image-input size-16" data-kt-image-input="true">
-            <input accept=".png, .jpg, .jpeg" name="avatar" type="file">
-            <input name="avatar_remove" type="hidden"/>
-            <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
-                <i class="ki-filled ki-cross"></i>
-            </button>
-            <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
-                <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
-            </div>
-        </div>
-    </div>
-    <div class="example-section">
-        <h2>Testing Controls</h2>
-        <button onclick="testFileAccess()">Test File Access</button>
-        <button onclick="testPublicMethods()">Test Public Methods</button>
-        <button onclick="testFormSubmission()">Test Form Submission</button>
-        <button onclick="clearResults()">Clear Results</button>
-    </div>
-    <div class="example-section">
-        <h2>Test Results</h2>
-        <div id="test-results"></div>
-    </div>
-    <div class="example-section">
-        <h2>Form Submission Example</h2>
-        <p>This form demonstrates how to properly handle file uploads with KTUI Image Input:</p>
-        <form id="test-form" onsubmit="handleFormSubmit(event)">
-            <div class="kt-image-input size-16" data-kt-image-input="true">
-                <input accept=".png, .jpg, .jpeg" name="test_image" type="file">
-                <input name="test_image_remove" type="hidden"/>
-                <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
-                    <i class="ki-filled ki-cross"></i>
-                </button>
-                <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
-                    <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
-                </div>
-            </div>
-            <button type="submit">Submit Form</button>
-        </form>
-    </div>
-    <div class="example-section">
-        <h2>Usage Code Example</h2>
-        <div class="code-block">
-            <h3>HTML Structure</h3>
-            <pre><code>&lt;div class="kt-image-input size-16" data-kt-image-input="true"&gt;
-    &lt;input accept=".png, .jpg, .jpeg" name="avatar" type="file"&gt;
-    &lt;input name="avatar_remove" type="hidden"/&gt;
-    &lt;button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button"&gt;
-        &lt;i class="ki-filled ki-cross"&gt;&lt;/i&gt;
-    &lt;/button&gt;
-    &lt;div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true"&gt;
-        &lt;div class="kt-image-input-preview" data-kt-image-input-preview="true"&gt;&lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-            <h3>JavaScript - File Upload</h3>
-            <pre><code>// Get the KTUI Image Input instance
-const imageInput = KTImageInput.getInstance(element);
-// Access the selected file for form submission
-const selectedFile = imageInput.getSelectedFile();
-if (selectedFile) {
-    const formData = new FormData();
-    formData.append('image', selectedFile);
-    // Submit formData to server
-}
-// Check component state
-if (imageInput.isEmpty()) {
-    console.log('No file selected');
-}
-if (imageInput.isChanged()) {
-    console.log('File has been selected');
-}</code></pre>
-        </div>
-    </div>
-    <script src="../../dist/ktui.min.js"></script>
-    <script>
-        let imageInputInstance = null;
-        // Initialize when DOM is ready
-        document.addEventListener('DOMContentLoaded', function() {
-            const element = document.querySelector('[data-kt-image-input]');
-            if (element) {
-                imageInputInstance = KTImageInput.getInstance(element);
-                addResult('Component initialized successfully', 'success');
-            }
-        });
-        function addResult(message, type = 'info') {
-            const results = document.getElementById('test-results');
-            const div = document.createElement('div');
-            div.className = `test-result ${type}`;
-            div.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
-            results.appendChild(div);
-        }
-        function testFileAccess() {
-            if (!imageInputInstance) {
-                addResult('Image input instance not found', 'error');
-                return;
-            }
-            const file = imageInputInstance.getSelectedFile();
-            if (file) {
-                addResult(`File access successful: ${file.name} (${file.size} bytes)`, 'success');
-            } else {
-                addResult('No file selected', 'info');
-            }
-        }
-        function testPublicMethods() {
-            if (!imageInputInstance) {
-                addResult('Image input instance not found', 'error');
-                return;
-            }
-            const isEmpty = imageInputInstance.isEmpty();
-            const isChanged = imageInputInstance.isChanged();
-            addResult(`isEmpty(): ${isEmpty}`, isEmpty ? 'info' : 'success');
-            addResult(`isChanged(): ${isChanged}`, isChanged ? 'success' : 'info');
-        }
-        function testFormSubmission() {
-            const form = document.getElementById('test-form');
-            const fileInput = form.querySelector('input[type="file"]');
-            const formData = new FormData(form);
-            addResult('Form data created', 'info');
-            if (fileInput.files.length > 0) {
-                addResult(`File in form: ${fileInput.files[0].name}`, 'success');
-            } else {
-                addResult('No file in form data (expected - input is cleared for UI)', 'info');
-            }
-            // Test with KTUI instance
-            const formImageInput = KTImageInput.getInstance(form.querySelector('[data-kt-image-input]'));
-            if (formImageInput) {
-                const selectedFile = formImageInput.getSelectedFile();
-                if (selectedFile) {
-                    addResult(`KTUI file access: ${selectedFile.name}`, 'success');
-                } else {
-                    addResult('No file in KTUI instance', 'error');
-                }
-            }
-        }
-        function handleFormSubmit(event) {
-            event.preventDefault();
-            addResult('Form submission intercepted for testing', 'info');
-            testFormSubmission();
-        }
-        function clearResults() {
-            document.getElementById('test-results').innerHTML = '';
-        }
-    </script>
-</body>
-</html>

package/examples/modal/persistent.html DELETED Viewed

@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modal Persistent Property Test</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="../../dist/styles.css">
-    <style>
-        .test-case {
-            margin: 1rem 0;
-            padding: 1.5rem;
-            border: 1px solid #e5e7eb;
-            border-radius: 0.5rem;
-            background: #fafafa;
-        }
-        .expected {
-            color: #374151;
-            font-weight: 500;
-        }
-    </style>
-</head>
-<body class="p-8 bg-white min-h-screen flex items-start justify-center">
-    <div class="w-full max-w-3xl">
-        <h1 class="text-3xl font-bold mb-2 text-gray-900">Modal Persistent Property Test</h1>
-        <p class="text-gray-600 mb-8">Testing the interaction between <code class="bg-gray-100 px-2 py-1 rounded text-sm">persistent</code> and <code class="bg-gray-100 px-2 py-1 rounded text-sm">backdropStatic</code> properties.</p>
-        <div class="mb-8 p-4 border border-gray-200 rounded bg-gray-50">
-        <h2 class="text-lg font-semibold mb-3 text-gray-900">Test Instructions</h2>
-        <ol class="list-decimal list-inside space-y-2 text-gray-700">
-            <li>Click each "Open Modal" button below</li>
-            <li>Try clicking on the modal backdrop (gray area around the modal content)</li>
-            <li>Try clicking on the invisible area below the modal content</li>
-            <li>Verify the behavior matches the expected result</li>
-        </ol>
-    </div>
-    <!-- Test Case 1: persistent=false, backdropStatic=false -->
-    <div class="test-case">
-        <h3 class="text-base font-semibold mb-3 text-gray-900">Test Case 1</h3>
-        <p class="mb-2 text-sm text-gray-700">
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">persistent: false</code>,
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">backdropStatic: false</code>
-        </p>
-        <p class="expected mb-4 text-sm">✓ Expected: Modal SHOULD close when clicking on backdrop or invisible area</p>
-        <button
-            data-kt-modal-toggle="#modal-test-1"
-            class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm font-medium">
-            Open Modal
-        </button>
-    </div>
-    <!-- Test Case 2: persistent=true, backdropStatic=false -->
-    <div class="test-case">
-        <h3 class="text-base font-semibold mb-3 text-gray-900">Test Case 2 <span class="text-xs font-normal text-gray-500">(Bug Fix Verification)</span></h3>
-        <p class="mb-2 text-sm text-gray-700">
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">persistent: true</code>,
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">backdropStatic: false</code>
-        </p>
-        <p class="expected mb-4 text-sm">✓ Expected: Modal should NOT close when clicking on backdrop or invisible area</p>
-        <button
-            data-kt-modal-toggle="#modal-test-2"
-            class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm font-medium">
-            Open Modal
-        </button>
-    </div>
-    <!-- Test Case 3: persistent=false, backdropStatic=true -->
-    <div class="test-case">
-        <h3 class="text-base font-semibold mb-3 text-gray-900">Test Case 3</h3>
-        <p class="mb-2 text-sm text-gray-700">
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">persistent: false</code>,
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">backdropStatic: true</code>
-        </p>
-        <p class="expected mb-4 text-sm">✓ Expected: Modal should NOT close when clicking on backdrop (backdropStatic takes precedence)</p>
-        <button
-            data-kt-modal-toggle="#modal-test-3"
-            class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm font-medium">
-            Open Modal
-        </button>
-    </div>
-    <!-- Test Case 4: persistent=true, backdropStatic=true -->
-    <div class="test-case">
-        <h3 class="text-base font-semibold mb-3 text-gray-900">Test Case 4</h3>
-        <p class="mb-2 text-sm text-gray-700">
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">persistent: true</code>,
-            <code class="bg-white px-2 py-1 rounded border border-gray-200">backdropStatic: true</code>
-        </p>
-        <p class="expected mb-4 text-sm">✓ Expected: Modal should NOT close when clicking on backdrop or invisible area</p>
-        <button
-            data-kt-modal-toggle="#modal-test-4"
-            class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm font-medium">
-            Open Modal
-        </button>
-    </div>
-    </div>
-    <!-- Modal 1: persistent=false, backdropStatic=false -->
-    <div
-        id="modal-test-1"
-        class="hidden fixed inset-0 z-50 flex items-center justify-center"
-        data-kt-modal="true"
-        data-kt-modal-persistent="false"
-        data-kt-modal-backdrop-static="false">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200">
-            <h2 class="text-lg font-semibold mb-4 text-gray-900">Test Case 1</h2>
-            <p class="mb-3 text-sm text-gray-700">
-                This modal has <code class="bg-gray-100 px-1 text-xs">persistent: false</code> and
-                <code class="bg-gray-100 px-1 text-xs">backdropStatic: false</code>.
-            </p>
-            <p class="mb-4 text-sm text-gray-600">
-                Click on the gray area around this modal or below it. The modal should close.
-            </p>
-            <button
-                data-kt-modal-dismiss="true"
-                class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm">
-                Close
-            </button>
-        </div>
-    </div>
-    <!-- Modal 2: persistent=true, backdropStatic=false -->
-    <div
-        id="modal-test-2"
-        class="hidden fixed inset-0 z-50 flex items-center justify-center"
-        data-kt-modal="true"
-        data-kt-modal-persistent="true"
-        data-kt-modal-backdrop-static="false">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200">
-            <h2 class="text-lg font-semibold mb-4 text-gray-900">Test Case 2 <span class="text-xs font-normal text-gray-500">(Bug Fix)</span></h2>
-            <p class="mb-3 text-sm text-gray-700">
-                This modal has <code class="bg-gray-100 px-1 text-xs">persistent: true</code> and
-                <code class="bg-gray-100 px-1 text-xs">backdropStatic: false</code>.
-            </p>
-            <p class="mb-4 text-sm text-gray-600 border-l-2 border-gray-400 pl-3">
-                Click on the gray area around this modal or below it. The modal should NOT close.
-            </p>
-            <button
-                data-kt-modal-dismiss="true"
-                class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm">
-                Close
-            </button>
-        </div>
-    </div>
-    <!-- Modal 3: persistent=false, backdropStatic=true -->
-    <div
-        id="modal-test-3"
-        class="hidden fixed inset-0 z-50 flex items-center justify-center"
-        data-kt-modal="true"
-        data-kt-modal-persistent="false"
-        data-kt-modal-backdrop-static="true">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200">
-            <h2 class="text-lg font-semibold mb-4 text-gray-900">Test Case 3</h2>
-            <p class="mb-3 text-sm text-gray-700">
-                This modal has <code class="bg-gray-100 px-1 text-xs">persistent: false</code> and
-                <code class="bg-gray-100 px-1 text-xs">backdropStatic: true</code>.
-            </p>
-            <p class="mb-4 text-sm text-gray-600">
-                Click on the gray area around this modal or below it. The modal should NOT close (backdropStatic prevents it).
-            </p>
-            <button
-                data-kt-modal-dismiss="true"
-                class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm">
-                Close
-            </button>
-        </div>
-    </div>
-    <!-- Modal 4: persistent=true, backdropStatic=true -->
-    <div
-        id="modal-test-4"
-        class="hidden fixed inset-0 z-50 flex items-center justify-center"
-        data-kt-modal="true"
-        data-kt-modal-persistent="true"
-        data-kt-modal-backdrop-static="true">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200">
-            <h2 class="text-lg font-semibold mb-4 text-gray-900">Test Case 4</h2>
-            <p class="mb-3 text-sm text-gray-700">
-                This modal has <code class="bg-gray-100 px-1 text-xs">persistent: true</code> and
-                <code class="bg-gray-100 px-1 text-xs">backdropStatic: true</code>.
-            </p>
-            <p class="mb-4 text-sm text-gray-600">
-                Click on the gray area around this modal or below it. The modal should NOT close (both properties prevent it).
-            </p>
-            <button
-                data-kt-modal-dismiss="true"
-                class="px-4 py-2 bg-gray-900 text-white rounded hover:bg-gray-700 text-sm">
-                Close
-            </button>
-        </div>
-    </div>
-    <script src="../../dist/ktui.js"></script>
-    <script>
-        // Initialize modals
-        document.addEventListener('DOMContentLoaded', function() {
-            KTModal.init();
-            console.log('Modal test page loaded. All modals initialized.');
-        });
-    </script>
-</body>
-</html>

package/examples/modal/remote-select-dropdown.html DELETED Viewed

@@ -1,166 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Issue #63: Remote Select Dropdown in Centered Modal</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<!-- Test Case 1: Remote Select in Centered Modal (Issue #63) -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
-		<button class="px-3 py-1.5 bg-gray-900 text-white rounded text-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400" data-kt-modal-toggle="#remoteSelectModal">
-			Open Remote Select Modal (Issue #63)
-		</button>
-	</div>
-	<!-- Test Case 2: Remote Select with dropdownContainer -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
-		<button class="px-3 py-1.5 bg-gray-900 text-white rounded text-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400" data-kt-modal-toggle="#remoteSelectWithContainer">
-			Open Remote Select with Container
-		</button>
-	</div>
-	<!-- Test Case 3: Regular Select (Control) -->
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
-		<button class="px-3 py-1.5 bg-gray-900 text-white rounded text-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400" data-kt-modal-toggle="#regularSelectModal">
-			Open Regular Select Modal
-		</button>
-	</div>
-	<!-- Modal 1: Remote Select in Centered Modal (Issue #63) -->
-	<div class="kt-modal kt-modal-center" data-kt-modal="true" id="remoteSelectModal">
-		<div class="kt-modal-content max-w-md">
-			<div class="kt-modal-header">
-				<h3 class="kt-modal-title">Remote Select in Centered Modal</h3>
-				<button
-					type="button"
-					class="kt-modal-close"
-					aria-label="Close modal"
-					data-kt-modal-dismiss="#remoteSelectModal"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M18 6 6 18"/>
-						<path d="m6 6 12 12"/>
-					</svg>
-				</button>
-			</div>
-			<div class="kt-modal-body space-y-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">Remote Select (Issue #63 Test)</label>
-					<select
-						class="kt-select"
-						data-kt-select="true"
-						data-kt-select-remote="true"
-						data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
-						data-kt-select-data-field-value="id"
-						data-kt-select-data-field-text="name"
-						data-kt-select-enable-search="true"
-						data-kt-select-search-param="q"
-						data-kt-select-search-min-length="2"
-						data-kt-select-search-debounce="300"
-						data-kt-select-placeholder="Search and select a user..."
-					></select>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- Modal 2: Remote Select with dropdownContainer -->
-	<div class="kt-modal kt-modal-center" data-kt-modal="true" id="remoteSelectWithContainer">
-		<div class="kt-modal-content max-w-md">
-			<div class="kt-modal-header">
-				<h3 class="kt-modal-title">Remote Select with dropdownContainer</h3>
-				<button
-					type="button"
-					class="kt-modal-close"
-					aria-label="Close modal"
-					data-kt-modal-dismiss="#remoteSelectWithContainer"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M18 6 6 18"/>
-						<path d="m6 6 12 12"/>
-					</svg>
-				</button>
-			</div>
-			<div class="kt-modal-body space-y-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">Remote Select with dropdownContainer</label>
-					<select
-						class="kt-select"
-						data-kt-select="true"
-						data-kt-select-remote="true"
-						data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
-						data-kt-select-data-field-value="id"
-						data-kt-select-data-field-text="name"
-						data-kt-select-enable-search="true"
-						data-kt-select-search-param="q"
-						data-kt-select-search-min-length="2"
-						data-kt-select-search-debounce="300"
-						data-kt-select-placeholder="Search and select a user..."
-						data-kt-select-config='{
-							"dropdownContainer": "#remoteSelectWithContainer"
-						}'
-					></select>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- Modal 3: Regular Select (Control) -->
-	<div class="kt-modal kt-modal-center" data-kt-modal="true" id="regularSelectModal">
-		<div class="kt-modal-content max-w-md">
-			<div class="kt-modal-header">
-				<h3 class="kt-modal-title">Regular Select (Control)</h3>
-				<button
-					type="button"
-					class="kt-modal-close"
-					aria-label="Close modal"
-					data-kt-modal-dismiss="#regularSelectModal"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M18 6 6 18"/>
-						<path d="m6 6 12 12"/>
-					</svg>
-				</button>
-			</div>
-			<div class="kt-modal-body space-y-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">Regular Select (Control)</label>
-					<select
-						class="kt-select"
-						data-kt-select="true"
-						data-kt-select-placeholder="Select an option..."
-					>
-						<option value="">Select an option...</option>
-						<option value="1">Option 1</option>
-						<option value="2">Option 2</option>
-						<option value="3">Option 3</option>
-						<option value="4">Option 4</option>
-						<option value="5">Option 5</option>
-						<option value="6">Option 6</option>
-						<option value="7">Option 7</option>
-						<option value="8">Option 8</option>
-					</select>
-				</div>
-			</div>
-		</div>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-	<script>
-		document.addEventListener('DOMContentLoaded', function() {
-			if (window.KTModal) {
-				KTModal.init();
-			}
-			if (window.KTSelect) {
-				KTSelect.init();
-			}
-		});
-	</script>
-</body>
-</html>