@keenthemes/ktui 1.0.21 → 1.0.23

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 (43) hide show
  1. package/dist/ktui.js +23 -12
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +181 -1
  5. package/examples/datatable/sorting-test.html +398 -0
  6. package/examples/select/modal.html +3 -1
  7. package/examples/select/{remote-data_.html → remote-data.html} +13 -12
  8. package/examples/select/tags-enhanced.html +86 -0
  9. package/examples/select/{tags-icons_.html → tags-icons.html} +1 -2
  10. package/examples/select/template-customization.html +0 -1
  11. package/lib/cjs/components/datatable/datatable.js +4 -0
  12. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  13. package/lib/cjs/components/select/dropdown.js +1 -4
  14. package/lib/cjs/components/select/dropdown.js.map +1 -1
  15. package/lib/cjs/components/select/select.js +8 -2
  16. package/lib/cjs/components/select/select.js.map +1 -1
  17. package/lib/cjs/components/select/tags.js +9 -5
  18. package/lib/cjs/components/select/tags.js.map +1 -1
  19. package/lib/cjs/components/select/templates.js +1 -1
  20. package/lib/cjs/components/select/templates.js.map +1 -1
  21. package/lib/esm/components/datatable/datatable.js +4 -0
  22. package/lib/esm/components/datatable/datatable.js.map +1 -1
  23. package/lib/esm/components/select/dropdown.js +1 -4
  24. package/lib/esm/components/select/dropdown.js.map +1 -1
  25. package/lib/esm/components/select/select.js +8 -2
  26. package/lib/esm/components/select/select.js.map +1 -1
  27. package/lib/esm/components/select/tags.js +9 -5
  28. package/lib/esm/components/select/tags.js.map +1 -1
  29. package/lib/esm/components/select/templates.js +1 -1
  30. package/lib/esm/components/select/templates.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/components/datatable/datatable.ts +5 -0
  33. package/src/components/select/dropdown.ts +1 -3
  34. package/src/components/select/select.css +44 -0
  35. package/src/components/select/select.ts +10 -2
  36. package/src/components/select/tags.ts +10 -8
  37. package/src/components/select/templates.ts +1 -1
  38. package/examples/select/combobox-icons_.html +0 -59
  39. package/examples/select/combobox_.html +0 -46
  40. package/examples/select/tags-selected_.html +0 -59
  41. package/examples/select/tags_.html +0 -58
  42. package/examples/select/test-optimizations.html +0 -227
  43. package/examples/select/test-remote-search.html +0 -151
package/examples/select/combobox_.html DELETED
@@ -1,46 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Combobox</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen">
12
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
- <form class="flex flex-col gap-6">
14
- <div>
15
- <label class="block mb-2 font-medium text-gray-700" for="select-basic">Combobox</label>
16
-
17
- <select
18
- class="kt-select"
19
- data-kt-select
20
- data-kt-select-combobox="true">
21
- <option value="name">Name</option>
22
- <option value="email">Email Address</option>
23
- <option value="phone">Phone Number</option>
24
- <option value="address">Physical Address</option>
25
- <option value="username">Username</option>
26
- <option value="password">Password</option>
27
- <option value="birthday">Date of Birth</option>
28
- <option value="gender">Gender</option>
29
- <option value="country">Country</option>
30
- <option value="city">City</option>
31
- <option value="language">Language</option>
32
- <option value="timezone">Timezone</option>
33
- <option value="avatar">Profile Picture</option>
34
- <option value="bio">Biography</option>
35
- <option value="company">Company</option>
36
- <option value="position">Job Position</option>
37
- <option value="department">Department</option>
38
- </select>
39
-
40
- </div>
41
- </form>
42
- </div>
43
- <script src="../../dist/ktui.js"></script>
44
- </body>
45
-
46
- </html>
package/examples/select/tags-selected_.html DELETED
@@ -1,59 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Tags Selected</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen">
12
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
- <form class="flex flex-col gap-6">
14
- <div>
15
- <label class="block mb-2 font-medium text-gray-700" for="select-basic">Tags Selected</label>
16
-
17
- <select
18
- class="kt-select"
19
- data-kt-select
20
- data-kt-select-placeholder="Type or select a country..."
21
- data-kt-select-pre-selected="de,fr"
22
- data-kt-select-multiple="true"
23
- data-kt-select-tags="true"
24
- data-kt-select-config='{
25
- "tagClass": "flex items-center gap-2 rounded bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold",
26
- "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
27
- "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
28
- "optionClass": "kt-select-option"
29
- }'>
30
- <option value="us"
31
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
32
- United States</option>
33
- <option value="de"
34
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
35
- Germany</option>
36
- <option value="it"
37
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
38
- Italy</option>
39
- <option value="fr"
40
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
41
- France</option>
42
- <option value="es"
43
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
44
- Spain</option>
45
- <option value="jp"
46
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
47
- Japan</option>
48
- <option value="ru"
49
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
50
- Russia</option>
51
- </select>
52
-
53
- </div>
54
- </form>
55
- </div>
56
- <script src="../../dist/ktui.js"></script>
57
- </body>
58
-
59
- </html>
package/examples/select/tags_.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Tags</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen">
12
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
- <form class="flex flex-col gap-6">
14
- <div>
15
- <label class="block mb-2 font-medium text-gray-700" for="select-basic">Tags</label>
16
-
17
- <select
18
- class="kt-select"
19
- data-kt-select
20
- data-kt-select-placeholder="Type or select a country..."
21
- data-kt-select-multiple="true"
22
- data-kt-select-tags="true"
23
- data-kt-select-config='{
24
- "tagClass": "flex items-center gap-2 rounded bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold",
25
- "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
26
- "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
27
- "optionClass": "kt-select-option"
28
- }'>
29
- <option value="us"
30
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
31
- United States</option>
32
- <option value="de"
33
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
34
- Germany</option>
35
- <option value="it"
36
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
37
- Italy</option>
38
- <option value="fr"
39
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
40
- France</option>
41
- <option value="es"
42
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
43
- Spain</option>
44
- <option value="jp"
45
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
46
- Japan</option>
47
- <option value="ru"
48
- data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
49
- Russia</option>
50
- </select>
51
-
52
- </div>
53
- </form>
54
- </div>
55
- <script src="../../dist/ktui.js"></script>
56
- </body>
57
-
58
- </html>
package/examples/select/test-optimizations.html DELETED
@@ -1,227 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Test Optimizations</title>
7
- <link rel="stylesheet" href="../../dist/styles.css">
8
- <style>
9
- .test-container {
10
- max-width: 800px;
11
- margin: 20px auto;
12
- padding: 20px;
13
- }
14
- .test-section {
15
- margin-bottom: 20px;
16
- padding: 15px;
17
- border: 1px solid #e5e7eb;
18
- border-radius: 8px;
19
- background: white;
20
- }
21
- .metrics {
22
- background: #f9fafb;
23
- padding: 10px;
24
- border-radius: 4px;
25
- font-family: monospace;
26
- font-size: 12px;
27
- margin-top: 10px;
28
- }
29
- .success { color: #059669; }
30
- .warning { color: #d97706; }
31
- .error { color: #dc2626; }
32
- </style>
33
- </head>
34
- <body class="bg-gray-50 min-h-screen">
35
- <div class="test-container">
36
- <h1>Remote Select Optimizations Test</h1>
37
-
38
- <div class="test-section">
39
- <h3>Performance Test: Multiple Remote Selects</h3>
40
- <button onclick="testPerformance()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;">
41
- Test Performance (Create 10 Remote Selects)
42
- </button>
43
- <div id="performance-results" class="metrics">Click button to test...</div>
44
- </div>
45
-
46
- <div class="test-section">
47
- <h3>Functionality Test: Basic Remote Select</h3>
48
- <label class="block mb-2 font-medium text-gray-700">Users from JSONPlaceholder</label>
49
- <select
50
- id="test-select"
51
- data-kt-select
52
- data-kt-select-remote="true"
53
- data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
54
- data-kt-select-data-field-value="id"
55
- data-kt-select-data-field-text="name"
56
- data-kt-select-enable-search="true"
57
- data-kt-select-debug="true"
58
- placeholder="Select a user..."
59
- ></select>
60
- <div id="functionality-results" class="metrics">Initializing...</div>
61
- </div>
62
-
63
- <div class="test-section">
64
- <h3>Search Test: Remote Search Functionality</h3>
65
- <label class="block mb-2 font-medium text-gray-700">Posts from JSONPlaceholder</label>
66
- <select
67
- id="search-test-select"
68
- data-kt-select
69
- data-kt-select-remote="true"
70
- data-kt-select-data-url="https://jsonplaceholder.typicode.com/posts"
71
- data-kt-select-data-field-value="id"
72
- data-kt-select-data-field-text="title"
73
- data-kt-select-enable-search="true"
74
- data-kt-select-search-param="q"
75
- data-kt-select-search-min-length="2"
76
- data-kt-select-debug="true"
77
- placeholder="Search posts..."
78
- ></select>
79
- <div id="search-results" class="metrics">Ready for search testing...</div>
80
- </div>
81
- </div>
82
-
83
- <script src="../../dist/ktui.js"></script>
84
- <script>
85
- // Performance test function
86
- function testPerformance() {
87
- const resultsDiv = document.getElementById('performance-results');
88
- resultsDiv.innerHTML = 'Running performance test...';
89
-
90
- const startTime = performance.now();
91
- const instances = [];
92
-
93
- // Create 10 remote select instances
94
- for (let i = 0; i < 10; i++) {
95
- const element = document.createElement('select');
96
- element.setAttribute('data-kt-select', '');
97
- element.setAttribute('data-kt-select-remote', 'true');
98
- element.setAttribute('data-kt-select-data-url', 'https://jsonplaceholder.typicode.com/users');
99
- element.setAttribute('data-kt-select-data-field-value', 'id');
100
- element.setAttribute('data-kt-select-data-field-text', 'name');
101
- element.setAttribute('data-kt-select-debug', 'false'); // Disable debug for performance
102
-
103
- try {
104
- const instance = new KTSelect(element);
105
- instances.push(instance);
106
- } catch (error) {
107
- console.error(`Instance ${i} creation failed:`, error);
108
- }
109
- }
110
-
111
- const endTime = performance.now();
112
- const duration = endTime - startTime;
113
-
114
- // Cleanup
115
- instances.forEach(instance => {
116
- if (instance.dispose) instance.dispose();
117
- });
118
-
119
- resultsDiv.innerHTML = `
120
- <span class="${duration < 1000 ? 'success' : 'warning'}">
121
- ✅ Performance Test Results:<br>
122
- • Created ${instances.length}/10 instances in ${duration.toFixed(2)}ms<br>
123
- • Average: ${(duration / instances.length).toFixed(2)}ms per instance<br>
124
- • Optimizations working: ${duration < 1000 ? 'YES' : 'NEEDS IMPROVEMENT'}
125
- </span>
126
- `;
127
- }
128
-
129
- // Functionality test
130
- function testFunctionality() {
131
- const resultsDiv = document.getElementById('functionality-results');
132
- const testSelect = document.getElementById('test-select');
133
-
134
- if (testSelect && testSelect.instance) {
135
- try {
136
- // Test dropdown opening
137
- testSelect.instance.openDropdown();
138
- setTimeout(() => {
139
- testSelect.instance.closeDropdown();
140
-
141
- // Test search functionality
142
- const searchInput = testSelect.instance.getSearchInput();
143
- if (searchInput) {
144
- searchInput.value = 'test';
145
- searchInput.dispatchEvent(new Event('input'));
146
-
147
- setTimeout(() => {
148
- searchInput.value = '';
149
- searchInput.dispatchEvent(new Event('input'));
150
-
151
- resultsDiv.innerHTML = `
152
- <span class="success">
153
- ✅ Functionality Test PASSED:<br>
154
- • Instance created successfully<br>
155
- • Dropdown opens/closes correctly<br>
156
- • Search input works<br>
157
- • Optimizations maintain functionality
158
- </span>
159
- `;
160
- }, 1000);
161
- }
162
- }, 1000);
163
- } catch (error) {
164
- resultsDiv.innerHTML = `
165
- <span class="error">
166
- ❌ Functionality Test FAILED:<br>
167
- Error: ${error.message}
168
- </span>
169
- `;
170
- }
171
- } else {
172
- resultsDiv.innerHTML = `
173
- <span class="error">
174
- ❌ Functionality Test FAILED:<br>
175
- Remote select instance not found
176
- </span>
177
- `;
178
- }
179
- }
180
-
181
- // Search test
182
- function testSearch() {
183
- const resultsDiv = document.getElementById('search-results');
184
- const searchSelect = document.getElementById('search-test-select');
185
-
186
- if (searchSelect && searchSelect.instance) {
187
- const searchInput = searchSelect.instance.getSearchInput();
188
- if (searchInput) {
189
- // Simulate typing
190
- searchInput.value = 'qui';
191
- searchInput.dispatchEvent(new Event('input'));
192
-
193
- setTimeout(() => {
194
- searchInput.value = '';
195
- searchInput.dispatchEvent(new Event('input'));
196
-
197
- resultsDiv.innerHTML = `
198
- <span class="success">
199
- ✅ Search Test PASSED:<br>
200
- • Search input responds to input<br>
201
- • Remote search triggers correctly<br>
202
- • Optimized rendering works
203
- </span>
204
- `;
205
- }, 2000);
206
- }
207
- }
208
- }
209
-
210
- // Initialize tests
211
- document.addEventListener('DOMContentLoaded', () => {
212
- try {
213
- KTSelect.init();
214
-
215
- // Wait for initialization to complete
216
- setTimeout(() => {
217
- testFunctionality();
218
- testSearch();
219
- }, 2000);
220
- } catch (error) {
221
- document.getElementById('functionality-results').innerHTML =
222
- '<span class="error">❌ Failed to initialize KTSelect: ' + error.message + '</span>';
223
- }
224
- });
225
- </script>
226
- </body>
227
- </html>
package/examples/select/test-remote-search.html DELETED
@@ -1,151 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Remote Search Test</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- <style>
10
- .test-container {
11
- max-width: 600px;
12
- margin: 20px auto;
13
- padding: 20px;
14
- }
15
- .test-section {
16
- margin-bottom: 30px;
17
- padding: 20px;
18
- border: 1px solid #e5e7eb;
19
- border-radius: 8px;
20
- background: white;
21
- }
22
- .test-section h3 {
23
- margin-top: 0;
24
- color: #374151;
25
- }
26
- .debug-info {
27
- background: #f9fafb;
28
- padding: 10px;
29
- border-radius: 4px;
30
- font-family: monospace;
31
- font-size: 12px;
32
- margin-top: 10px;
33
- }
34
- </style>
35
- </head>
36
-
37
- <body class="bg-gray-50 min-h-screen">
38
- <div class="test-container">
39
- <h1>Remote Select Search Test</h1>
40
-
41
- <div class="test-section">
42
- <h3>Test 1: Basic Remote Search</h3>
43
- <label class="block mb-2 font-medium text-gray-700">Users from JSONPlaceholder</label>
44
- <select
45
- data-kt-select
46
- data-kt-select-remote="true"
47
- data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
48
- data-kt-select-data-field-value="id"
49
- data-kt-select-data-field-text="name"
50
- data-kt-select-enable-search="true"
51
- data-kt-select-search-param="q"
52
- data-kt-select-search-min-length="2"
53
- data-kt-select-search-debounce="300"
54
- data-kt-select-debug="true"
55
- placeholder="Search users..."
56
- ></select>
57
- <div class="debug-info">
58
- <strong>Expected behavior:</strong> Type at least 2 characters to search users. Options should display with proper text content.
59
- </div>
60
- </div>
61
-
62
- <div class="test-section">
63
- <h3>Test 2: Posts with Custom Field Mapping</h3>
64
- <label class="block mb-2 font-medium text-gray-700">Posts from JSONPlaceholder</label>
65
- <select
66
- data-kt-select
67
- data-kt-select-remote="true"
68
- data-kt-select-data-url="https://jsonplaceholder.typicode.com/posts"
69
- data-kt-select-data-field-value="id"
70
- data-kt-select-data-field-text="title"
71
- data-kt-select-enable-search="true"
72
- data-kt-select-search-param="q"
73
- data-kt-select-search-min-length="3"
74
- data-kt-select-search-debounce="500"
75
- data-kt-select-debug="true"
76
- placeholder="Search posts..."
77
- ></select>
78
- <div class="debug-info">
79
- <strong>Expected behavior:</strong> Type at least 3 characters to search posts. Should show post titles as options.
80
- </div>
81
- </div>
82
-
83
- <div class="test-section">
84
- <h3>Test 3: Error Handling</h3>
85
- <label class="block mb-2 font-medium text-gray-700">Invalid URL Test</label>
86
- <select
87
- data-kt-select
88
- data-kt-select-remote="true"
89
- data-kt-select-data-url="https://invalid-url-that-does-not-exist.com/api/data"
90
- data-kt-select-data-field-value="id"
91
- data-kt-select-data-field-text="name"
92
- data-kt-select-enable-search="true"
93
- data-kt-select-search-param="q"
94
- data-kt-select-search-min-length="1"
95
- data-kt-select-search-debounce="300"
96
- data-kt-select-debug="true"
97
- placeholder="This should show error..."
98
- ></select>
99
- <div class="debug-info">
100
- <strong>Expected behavior:</strong> Should show error message and restore original state after 2 seconds.
101
- </div>
102
- </div>
103
-
104
- <div class="test-section">
105
- <h3>Console Debug Info</h3>
106
- <div class="debug-info">
107
- Open browser developer tools console to see debug information about the remote search functionality.
108
- </div>
109
- </div>
110
- </div>
111
-
112
- <script src="../../dist/ktui.js"></script>
113
- <script src="validation-test.js"></script>
114
- <script>
115
- // Initialize KTSelect components
116
- KTSelect.init();
117
-
118
- // Add some console logging for testing
119
- console.log('Remote Select Test Page Loaded');
120
- console.log('All KTSelect components should be initialized with debug logging enabled');
121
-
122
- // Run validation tests after a short delay to ensure everything is loaded
123
- setTimeout(() => {
124
- console.log('\n🚀 Running End-to-End Validation Tests...');
125
-
126
- // Test real API interaction
127
- const testSelect = document.querySelector('select[data-kt-select-remote="true"]');
128
- if (testSelect && testSelect.instance) {
129
- console.log('✅ E2E Test 1 PASSED: Remote select instance found');
130
-
131
- // Test dropdown opening
132
- try {
133
- testSelect.instance.openDropdown();
134
- console.log('✅ E2E Test 2 PASSED: Dropdown opens successfully');
135
-
136
- // Test dropdown closing
137
- setTimeout(() => {
138
- testSelect.instance.closeDropdown();
139
- console.log('✅ E2E Test 3 PASSED: Dropdown closes successfully');
140
- }, 1000);
141
- } catch (error) {
142
- console.log('❌ E2E Test 2-3 FAILED: Dropdown operation error:', error.message);
143
- }
144
- } else {
145
- console.log('❌ E2E Test 1 FAILED: Remote select instance not found');
146
- }
147
- }, 2000);
148
- </script>
149
- </body>
150
-
151
- </html>