@keenthemes/ktui 1.0.27 → 1.0.29
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.
- package/dist/ktui.js +13 -1
- package/dist/ktui.min.js +1 -1
- package/dist/ktui.min.js.map +1 -1
- package/dist/styles.css +5 -0
- package/lib/cjs/components/datatable/datatable.js +13 -1
- package/lib/cjs/components/datatable/datatable.js.map +1 -1
- package/lib/esm/components/datatable/datatable.js +13 -1
- package/lib/esm/components/datatable/datatable.js.map +1 -1
- package/package.json +23 -5
- package/src/components/datatable/datatable.ts +13 -3
- package/src/components/table/table.css +7 -0
- package/CONTRIBUTING.md +0 -88
- package/examples/datatable/checkbox-events-test.html +0 -400
- package/examples/datatable/credentials-test.html +0 -423
- package/examples/datatable/remote-checkbox-test.html +0 -365
- package/examples/datatable/sorting-test.html +0 -258
- package/examples/image-input/file-upload-example.html +0 -189
- package/examples/modal/persistent.html +0 -205
- package/examples/modal/remote-select-dropdown.html +0 -166
- package/examples/modal/select-dropdown-container.html +0 -129
- package/examples/select/avatar.html +0 -47
- package/examples/select/basic-usage.html +0 -39
- package/examples/select/country.html +0 -43
- package/examples/select/dark-mode.html +0 -93
- package/examples/select/description.html +0 -53
- package/examples/select/disable-option.html +0 -37
- package/examples/select/disable-select.html +0 -35
- package/examples/select/dropdowncontainer.html +0 -111
- package/examples/select/dynamic-methods.html +0 -273
- package/examples/select/formdata-remote.html +0 -161
- package/examples/select/global-config.html +0 -81
- package/examples/select/icon-multiple.html +0 -50
- package/examples/select/icon.html +0 -48
- package/examples/select/max-selection.html +0 -38
- package/examples/select/modal-container.html +0 -128
- package/examples/select/modal-positioning-test.html +0 -338
- package/examples/select/modal.html +0 -80
- package/examples/select/multiple.html +0 -40
- package/examples/select/native-selected.html +0 -64
- package/examples/select/placeholder.html +0 -40
- package/examples/select/remote-data-preselected.html +0 -283
- package/examples/select/remote-data.html +0 -38
- package/examples/select/search.html +0 -57
- package/examples/select/sizes.html +0 -94
- package/examples/select/tags-enhanced.html +0 -86
- package/examples/select/tags-icons.html +0 -57
- package/examples/select/template-customization.html +0 -61
- package/examples/sticky/README.md +0 -158
- package/examples/sticky/debug-sticky.html +0 -144
- package/examples/sticky/test-runner.html +0 -175
- package/examples/sticky/test-sticky-logic.js +0 -369
- package/examples/sticky/test-sticky-positioning.html +0 -386
- package/examples/toast/example.html +0 -479
- package/prettier.config.js +0 -9
- package/tsconfig.json +0 -17
- package/webpack.config.js +0 -118
|
@@ -1,40 +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>Placeholder</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">Placeholder</label>
|
|
16
|
-
|
|
17
|
-
<select
|
|
18
|
-
class="kt-select"
|
|
19
|
-
data-kt-select
|
|
20
|
-
data-kt-select-placeholder="Please select a field type..."
|
|
21
|
-
data-kt-select-config='{
|
|
22
|
-
"placeholder": "Select a country",
|
|
23
|
-
"placeholderClass": "border-b border-dashed border-primary",
|
|
24
|
-
"placeholderTemplate": "<span class=\"text-primary\">{{placeholder}}</span>"
|
|
25
|
-
}'>
|
|
26
|
-
<option value="apple">Apple</option>
|
|
27
|
-
<option value="google">Google</option>
|
|
28
|
-
<option value="amazon">Amazon</option>
|
|
29
|
-
<option value="facebook">Facebook</option>
|
|
30
|
-
<option value="twitter">Twitter</option>
|
|
31
|
-
<option value="keenthemes">Keenthemes</option>
|
|
32
|
-
</select>
|
|
33
|
-
|
|
34
|
-
</div>
|
|
35
|
-
</form>
|
|
36
|
-
</div>
|
|
37
|
-
<script src="../../dist/ktui.js"></script>
|
|
38
|
-
</body>
|
|
39
|
-
|
|
40
|
-
</html>
|
|
@@ -1,283 +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 Data with Pre-Selected Options</title>
|
|
8
|
-
<link rel="stylesheet" href="../../dist/styles.css">
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body class="bg-gray-50 min-h-screen p-8">
|
|
12
|
-
<div class="max-w-4xl mx-auto">
|
|
13
|
-
<h1 class="text-3xl font-bold mb-8">Remote Data with Pre-Selected Options</h1>
|
|
14
|
-
|
|
15
|
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
16
|
-
<!-- Test 1: Native selected attribute with remote data -->
|
|
17
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
18
|
-
<h2 class="text-xl font-semibold mb-4">Test 1: Native <option selected></h2>
|
|
19
|
-
<p class="text-sm text-gray-600 mb-4">Single-select with native selected attribute (user ID 5)</p>
|
|
20
|
-
|
|
21
|
-
<select
|
|
22
|
-
id="test-1"
|
|
23
|
-
class="kt-select"
|
|
24
|
-
data-kt-select
|
|
25
|
-
data-kt-select-remote="true"
|
|
26
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
27
|
-
data-kt-select-data-field-value="id"
|
|
28
|
-
data-kt-select-data-field-text="name"
|
|
29
|
-
data-kt-select-enable-search="true"
|
|
30
|
-
data-kt-select-debug="true"
|
|
31
|
-
placeholder="Select a user..."
|
|
32
|
-
>
|
|
33
|
-
<option value="5" selected>Loading...</option>
|
|
34
|
-
</select>
|
|
35
|
-
|
|
36
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
37
|
-
<strong>Expected:</strong> User with ID 5 should be selected after remote data loads
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
<!-- Test 2: data-kt-select-pre-selected attribute -->
|
|
42
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
43
|
-
<h2 class="text-xl font-semibold mb-4">Test 2: data-kt-select-pre-selected</h2>
|
|
44
|
-
<p class="text-sm text-gray-600 mb-4">Using pre-selected attribute (user ID 3)</p>
|
|
45
|
-
|
|
46
|
-
<select
|
|
47
|
-
id="test-2"
|
|
48
|
-
class="kt-select"
|
|
49
|
-
data-kt-select
|
|
50
|
-
data-kt-select-remote="true"
|
|
51
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
52
|
-
data-kt-select-data-field-value="id"
|
|
53
|
-
data-kt-select-data-field-text="name"
|
|
54
|
-
data-kt-select-pre-selected="3"
|
|
55
|
-
data-kt-select-enable-search="true"
|
|
56
|
-
data-kt-select-debug="true"
|
|
57
|
-
placeholder="Select a user..."
|
|
58
|
-
></select>
|
|
59
|
-
|
|
60
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
61
|
-
<strong>Expected:</strong> User with ID 3 should be selected after remote data loads
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<!-- Test 3: Multiple pre-selected with native selected -->
|
|
66
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
67
|
-
<h2 class="text-xl font-semibold mb-4">Test 3: Multiple Pre-Selected (Native)</h2>
|
|
68
|
-
<p class="text-sm text-gray-600 mb-4">Multiple select with native selected attributes</p>
|
|
69
|
-
|
|
70
|
-
<select
|
|
71
|
-
id="test-3"
|
|
72
|
-
class="kt-select"
|
|
73
|
-
multiple
|
|
74
|
-
data-kt-select
|
|
75
|
-
data-kt-select-remote="true"
|
|
76
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
77
|
-
data-kt-select-data-field-value="id"
|
|
78
|
-
data-kt-select-data-field-text="name"
|
|
79
|
-
data-kt-select-multiple="true"
|
|
80
|
-
data-kt-select-enable-search="true"
|
|
81
|
-
data-kt-select-debug="true"
|
|
82
|
-
placeholder="Select users..."
|
|
83
|
-
>
|
|
84
|
-
<option value="2" selected>Loading...</option>
|
|
85
|
-
<option value="4" selected>Loading...</option>
|
|
86
|
-
<option value="7" selected>Loading...</option>
|
|
87
|
-
</select>
|
|
88
|
-
|
|
89
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
90
|
-
<strong>Expected:</strong> Users with IDs 2, 4, and 7 should be selected
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<!-- Test 4: Multiple pre-selected with data attribute -->
|
|
95
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
96
|
-
<h2 class="text-xl font-semibold mb-4">Test 4: Multiple Pre-Selected (Attribute)</h2>
|
|
97
|
-
<p class="text-sm text-gray-600 mb-4">Multiple select with data-kt-select-pre-selected</p>
|
|
98
|
-
|
|
99
|
-
<select
|
|
100
|
-
id="test-4"
|
|
101
|
-
class="kt-select"
|
|
102
|
-
multiple
|
|
103
|
-
data-kt-select
|
|
104
|
-
data-kt-select-remote="true"
|
|
105
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
106
|
-
data-kt-select-data-field-value="id"
|
|
107
|
-
data-kt-select-data-field-text="name"
|
|
108
|
-
data-kt-select-multiple="true"
|
|
109
|
-
data-kt-select-pre-selected="1,6,9"
|
|
110
|
-
data-kt-select-enable-search="true"
|
|
111
|
-
data-kt-select-debug="true"
|
|
112
|
-
placeholder="Select users..."
|
|
113
|
-
></select>
|
|
114
|
-
|
|
115
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
116
|
-
<strong>Expected:</strong> Users with IDs 1, 6, and 9 should be selected
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
|
|
120
|
-
<!-- Test 5: Combination of both methods -->
|
|
121
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
122
|
-
<h2 class="text-xl font-semibold mb-4">Test 5: Combined Methods</h2>
|
|
123
|
-
<p class="text-sm text-gray-600 mb-4">Both native selected and data attribute</p>
|
|
124
|
-
|
|
125
|
-
<select
|
|
126
|
-
id="test-5"
|
|
127
|
-
class="kt-select"
|
|
128
|
-
multiple
|
|
129
|
-
data-kt-select
|
|
130
|
-
data-kt-select-remote="true"
|
|
131
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
132
|
-
data-kt-select-data-field-value="id"
|
|
133
|
-
data-kt-select-data-field-text="name"
|
|
134
|
-
data-kt-select-multiple="true"
|
|
135
|
-
data-kt-select-pre-selected="8,10"
|
|
136
|
-
data-kt-select-enable-search="true"
|
|
137
|
-
data-kt-select-debug="true"
|
|
138
|
-
placeholder="Select users..."
|
|
139
|
-
>
|
|
140
|
-
<option value="3" selected>Loading...</option>
|
|
141
|
-
<option value="5" selected>Loading...</option>
|
|
142
|
-
</select>
|
|
143
|
-
|
|
144
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
145
|
-
<strong>Expected:</strong> Users with IDs 3, 5, 8, and 10 should be selected
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
<!-- Test 6: Non-existent values -->
|
|
150
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
151
|
-
<h2 class="text-xl font-semibold mb-4">Test 6: Non-Existent Values</h2>
|
|
152
|
-
<p class="text-sm text-gray-600 mb-4">Pre-selected values that don't exist in remote data</p>
|
|
153
|
-
|
|
154
|
-
<select
|
|
155
|
-
id="test-6"
|
|
156
|
-
class="kt-select"
|
|
157
|
-
multiple
|
|
158
|
-
data-kt-select
|
|
159
|
-
data-kt-select-remote="true"
|
|
160
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
161
|
-
data-kt-select-data-field-value="id"
|
|
162
|
-
data-kt-select-data-field-text="name"
|
|
163
|
-
data-kt-select-multiple="true"
|
|
164
|
-
data-kt-select-enable-search="true"
|
|
165
|
-
data-kt-select-debug="true"
|
|
166
|
-
placeholder="Select users..."
|
|
167
|
-
>
|
|
168
|
-
<option value="999" selected>Non-existent user</option>
|
|
169
|
-
<option value="4" selected>Should work</option>
|
|
170
|
-
<option value="888" selected>Another fake</option>
|
|
171
|
-
</select>
|
|
172
|
-
|
|
173
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
174
|
-
<strong>Expected:</strong> Only user with ID 4 should be selected (IDs 999 and 888 don't exist)
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
<!-- Test 7: Single select with multiple native selected (edge case) -->
|
|
179
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
180
|
-
<h2 class="text-xl font-semibold mb-4">Test 7: Single Select Edge Case</h2>
|
|
181
|
-
<p class="text-sm text-gray-600 mb-4">Single-select with multiple selected options (should use first)</p>
|
|
182
|
-
|
|
183
|
-
<select
|
|
184
|
-
id="test-7"
|
|
185
|
-
class="kt-select"
|
|
186
|
-
data-kt-select
|
|
187
|
-
data-kt-select-remote="true"
|
|
188
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
189
|
-
data-kt-select-data-field-value="id"
|
|
190
|
-
data-kt-select-data-field-text="name"
|
|
191
|
-
data-kt-select-enable-search="true"
|
|
192
|
-
data-kt-select-debug="true"
|
|
193
|
-
placeholder="Select a user..."
|
|
194
|
-
>
|
|
195
|
-
<option value="6" selected>First selected</option>
|
|
196
|
-
<option value="8" selected>Second selected</option>
|
|
197
|
-
<option value="10" selected>Third selected</option>
|
|
198
|
-
</select>
|
|
199
|
-
|
|
200
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
201
|
-
<strong>Expected:</strong> Only user with ID 6 (first) should be selected in single-select mode
|
|
202
|
-
</div>
|
|
203
|
-
</div>
|
|
204
|
-
|
|
205
|
-
<!-- Test 8: With Tags enabled -->
|
|
206
|
-
<div class="bg-white rounded-lg shadow p-6">
|
|
207
|
-
<h2 class="text-xl font-semibold mb-4">Test 8: With Tags</h2>
|
|
208
|
-
<p class="text-sm text-gray-600 mb-4">Multiple select with tags and pre-selected values</p>
|
|
209
|
-
|
|
210
|
-
<select
|
|
211
|
-
id="test-8"
|
|
212
|
-
class="kt-select"
|
|
213
|
-
multiple
|
|
214
|
-
data-kt-select
|
|
215
|
-
data-kt-select-remote="true"
|
|
216
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
217
|
-
data-kt-select-data-field-value="id"
|
|
218
|
-
data-kt-select-data-field-text="name"
|
|
219
|
-
data-kt-select-multiple="true"
|
|
220
|
-
data-kt-select-tags="true"
|
|
221
|
-
data-kt-select-enable-search="true"
|
|
222
|
-
data-kt-select-debug="true"
|
|
223
|
-
placeholder="Select users..."
|
|
224
|
-
>
|
|
225
|
-
<option value="1" selected>Loading...</option>
|
|
226
|
-
<option value="5" selected>Loading...</option>
|
|
227
|
-
<option value="9" selected>Loading...</option>
|
|
228
|
-
</select>
|
|
229
|
-
|
|
230
|
-
<div class="mt-4 p-3 bg-gray-100 rounded text-sm">
|
|
231
|
-
<strong>Expected:</strong> Users with IDs 1, 5, and 9 should be selected and displayed as tags
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
|
|
236
|
-
<!-- Debug Console -->
|
|
237
|
-
<div class="bg-white rounded-lg shadow p-6 mt-8">
|
|
238
|
-
<h2 class="text-xl font-semibold mb-4">Debug Console</h2>
|
|
239
|
-
<p class="text-sm text-gray-600 mb-4">Check browser console (F12) for debug output</p>
|
|
240
|
-
|
|
241
|
-
<div class="space-y-2">
|
|
242
|
-
<button onclick="checkAllSelections()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
|
|
243
|
-
Check All Selections
|
|
244
|
-
</button>
|
|
245
|
-
<button onclick="resetAll()" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 ml-2">
|
|
246
|
-
Reset All
|
|
247
|
-
</button>
|
|
248
|
-
</div>
|
|
249
|
-
|
|
250
|
-
<pre id="debug-output" class="mt-4 p-4 bg-gray-900 text-green-400 rounded text-xs overflow-auto max-h-64"></pre>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
|
|
254
|
-
<script src="../../dist/ktui.js"></script>
|
|
255
|
-
<script>
|
|
256
|
-
function checkAllSelections() {
|
|
257
|
-
const output = [];
|
|
258
|
-
for (let i = 1; i <= 8; i++) {
|
|
259
|
-
const select = document.getElementById(`test-${i}`);
|
|
260
|
-
if (select) {
|
|
261
|
-
const selectedOptions = Array.from(select.selectedOptions).map(opt => ({
|
|
262
|
-
value: opt.value,
|
|
263
|
-
text: opt.text
|
|
264
|
-
}));
|
|
265
|
-
output.push(`Test ${i}: ${selectedOptions.length > 0 ? JSON.stringify(selectedOptions, null, 2) : 'No selection'}`);
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
document.getElementById('debug-output').textContent = output.join('\n\n');
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
function resetAll() {
|
|
272
|
-
location.reload();
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
// Auto-check selections after remote data loads
|
|
276
|
-
setTimeout(() => {
|
|
277
|
-
checkAllSelections();
|
|
278
|
-
}, 3000);
|
|
279
|
-
</script>
|
|
280
|
-
</body>
|
|
281
|
-
|
|
282
|
-
</html>
|
|
283
|
-
|
|
@@ -1,38 +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 Data</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">Remote Data</label>
|
|
16
|
-
|
|
17
|
-
<select
|
|
18
|
-
class="kt-select"
|
|
19
|
-
data-kt-select
|
|
20
|
-
data-kt-select-remote="true"
|
|
21
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
22
|
-
data-kt-select-data-field-value="id"
|
|
23
|
-
data-kt-select-data-field-text="name"
|
|
24
|
-
data-kt-select-enable-search="true"
|
|
25
|
-
data-kt-select-search-param="q"
|
|
26
|
-
data-kt-select-search-min-length="2"
|
|
27
|
-
data-kt-select-search-debounce="300"
|
|
28
|
-
data-kt-select-debug="true"
|
|
29
|
-
placeholder="Search users..."
|
|
30
|
-
></select>
|
|
31
|
-
|
|
32
|
-
</div>
|
|
33
|
-
</form>
|
|
34
|
-
</div>
|
|
35
|
-
<script src="../../dist/ktui.js"></script>
|
|
36
|
-
</body>
|
|
37
|
-
|
|
38
|
-
</html>
|
|
@@ -1,57 +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>Search</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">Search</label>
|
|
16
|
-
|
|
17
|
-
<select
|
|
18
|
-
class="kt-select"
|
|
19
|
-
data-kt-select="true"
|
|
20
|
-
data-kt-select-enable-search="true"
|
|
21
|
-
data-kt-select-search-placeholder="Search..."
|
|
22
|
-
data-kt-select-placeholder="Select a brand..."
|
|
23
|
-
data-kt-select-config='{
|
|
24
|
-
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
|
|
25
|
-
}'
|
|
26
|
-
>
|
|
27
|
-
<option value="apple">Apple</option>
|
|
28
|
-
<option value="google">Google</option>
|
|
29
|
-
<option value="amazon">Amazon</option>
|
|
30
|
-
<option value="facebook">Facebook</option>
|
|
31
|
-
<option value="twitter">Twitter</option>
|
|
32
|
-
<option value="keenthemes">Keenthemes</option>
|
|
33
|
-
<option value="github">GitHub</option>
|
|
34
|
-
<option value="instagram">Instagram</option>
|
|
35
|
-
<option value="youtube">YouTube</option>
|
|
36
|
-
<option value="linkedin">LinkedIn</option>
|
|
37
|
-
<option value="whatsapp">WhatsApp</option>
|
|
38
|
-
<option value="telegram">Telegram</option>
|
|
39
|
-
<option value="tiktok">TikTok</option>
|
|
40
|
-
<option value="snapchat">Snapchat</option>
|
|
41
|
-
<option value="pinterest">Pinterest</option>
|
|
42
|
-
<option value="twitch">Twitch</option>
|
|
43
|
-
<option value="vimeo">Vimeo</option>
|
|
44
|
-
<option value="yelp">Yelp</option>
|
|
45
|
-
<option value="spotify">Spotify</option>
|
|
46
|
-
<option value="whatsapp">WhatsApp</option>
|
|
47
|
-
<option value="telegram">Telegram</option>
|
|
48
|
-
<option value="tiktok">TikTok</option>
|
|
49
|
-
<option value="snapchat">Snapchat</option>
|
|
50
|
-
</select>
|
|
51
|
-
</div>
|
|
52
|
-
</form>
|
|
53
|
-
</div>
|
|
54
|
-
<script src="../../dist/ktui.js"></script>
|
|
55
|
-
</body>
|
|
56
|
-
|
|
57
|
-
</html>
|
|
@@ -1,94 +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>Basic Usage</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">Small</label>
|
|
16
|
-
<select
|
|
17
|
-
class="kt-select kt-select-sm"
|
|
18
|
-
multiple
|
|
19
|
-
data-kt-select="true"
|
|
20
|
-
data-kt-select-multiple="true"
|
|
21
|
-
data-kt-select-placeholder="Select a framework"
|
|
22
|
-
data-kt-select-config='{
|
|
23
|
-
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
|
|
24
|
-
}'
|
|
25
|
-
>
|
|
26
|
-
<option value="react">React</option>
|
|
27
|
-
<option value="nextjs">Next.js</option>
|
|
28
|
-
<option value="angular">Angular</option>
|
|
29
|
-
<option value="vue">Vue</option>
|
|
30
|
-
<option value="svelte">Svelte</option>
|
|
31
|
-
<option value="ember">Ember</option>
|
|
32
|
-
<option value="nuxt">Nuxt.js</option>
|
|
33
|
-
<option value="remix">Remix</option>
|
|
34
|
-
<option value="svelte">Svelte</option>
|
|
35
|
-
<option value="ember">Ember</option>
|
|
36
|
-
<option value="nuxt">Nuxt.js</option>
|
|
37
|
-
</select>
|
|
38
|
-
</div>
|
|
39
|
-
<div>
|
|
40
|
-
<label class="block mb-2 font-medium text-gray-700" for="select-basic">Medium</label>
|
|
41
|
-
<select
|
|
42
|
-
class="kt-select"
|
|
43
|
-
multiple
|
|
44
|
-
data-kt-select="true"
|
|
45
|
-
data-kt-select-multiple="true"
|
|
46
|
-
data-kt-select-placeholder="Select a framework"
|
|
47
|
-
data-kt-select-config='{
|
|
48
|
-
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
|
|
49
|
-
}'
|
|
50
|
-
>
|
|
51
|
-
<option value="react">React</option>
|
|
52
|
-
<option value="nextjs">Next.js</option>
|
|
53
|
-
<option value="angular">Angular</option>
|
|
54
|
-
<option value="vue">Vue</option>
|
|
55
|
-
<option value="svelte">Svelte</option>
|
|
56
|
-
<option value="ember">Ember</option>
|
|
57
|
-
<option value="nuxt">Nuxt.js</option>
|
|
58
|
-
<option value="remix">Remix</option>
|
|
59
|
-
<option value="svelte">Svelte</option>
|
|
60
|
-
<option value="ember">Ember</option>
|
|
61
|
-
<option value="nuxt">Nuxt.js</option>
|
|
62
|
-
</select>
|
|
63
|
-
</div>
|
|
64
|
-
<div>
|
|
65
|
-
<label class="block mb-2 font-medium text-gray-700" for="select-basic">Large</label>
|
|
66
|
-
<select
|
|
67
|
-
class="kt-select kt-select-lg"
|
|
68
|
-
multiple
|
|
69
|
-
data-kt-select="true"
|
|
70
|
-
data-kt-select-multiple="true"
|
|
71
|
-
data-kt-select-placeholder="Select a framework"
|
|
72
|
-
data-kt-select-config='{
|
|
73
|
-
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
|
|
74
|
-
}'
|
|
75
|
-
>
|
|
76
|
-
<option value="react">React</option>
|
|
77
|
-
<option value="nextjs">Next.js</option>
|
|
78
|
-
<option value="angular">Angular</option>
|
|
79
|
-
<option value="vue">Vue</option>
|
|
80
|
-
<option value="svelte">Svelte</option>
|
|
81
|
-
<option value="ember">Ember</option>
|
|
82
|
-
<option value="nuxt">Nuxt.js</option>
|
|
83
|
-
<option value="remix">Remix</option>
|
|
84
|
-
<option value="svelte">Svelte</option>
|
|
85
|
-
<option value="ember">Ember</option>
|
|
86
|
-
<option value="nuxt">Nuxt.js</option>
|
|
87
|
-
</select>
|
|
88
|
-
</div>
|
|
89
|
-
</form>
|
|
90
|
-
</div>
|
|
91
|
-
<script src="../../dist/ktui.js"></script>
|
|
92
|
-
</body>
|
|
93
|
-
|
|
94
|
-
</html>
|
|
@@ -1,86 +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>Enhanced Tags Styling</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-md mt-10 mx-auto">
|
|
13
|
-
<form class="flex flex-col gap-8">
|
|
14
|
-
<div>
|
|
15
|
-
<label class="block mb-3 font-semibold text-gray-800" for="select-team">Team Members</label>
|
|
16
|
-
<select
|
|
17
|
-
class="kt-select"
|
|
18
|
-
data-kt-select
|
|
19
|
-
data-kt-select-placeholder="Select team members..."
|
|
20
|
-
data-kt-select-multiple="true"
|
|
21
|
-
data-kt-select-tags="true"
|
|
22
|
-
data-kt-select-pre-selected="jenny,mike,david"
|
|
23
|
-
data-kt-select-config='{
|
|
24
|
-
"showSelectedCount": true,
|
|
25
|
-
"enableSelectAll": true,
|
|
26
|
-
"selectAllText": "Select All",
|
|
27
|
-
"clearAllText": "Clear All"
|
|
28
|
-
}'>
|
|
29
|
-
<option value="jenny">Jenny Wilson</option>
|
|
30
|
-
<option value="mike">Mike Johnson</option>
|
|
31
|
-
<option value="david">David Brown</option>
|
|
32
|
-
<option value="sarah">Sarah Davis</option>
|
|
33
|
-
<option value="alex">Alex Thompson</option>
|
|
34
|
-
<option value="lisa">Lisa Anderson</option>
|
|
35
|
-
</select>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div>
|
|
39
|
-
<label class="block mb-3 font-semibold text-gray-800" for="select-countries">Countries</label>
|
|
40
|
-
<select
|
|
41
|
-
class="kt-select"
|
|
42
|
-
data-kt-select
|
|
43
|
-
data-kt-select-placeholder="Select countries..."
|
|
44
|
-
data-kt-select-multiple="true"
|
|
45
|
-
data-kt-select-tags="true"
|
|
46
|
-
data-kt-select-pre-selected="france,spain"
|
|
47
|
-
data-kt-select-config='{
|
|
48
|
-
"showSelectedCount": true
|
|
49
|
-
}'>
|
|
50
|
-
<option value="france">France</option>
|
|
51
|
-
<option value="spain">Spain</option>
|
|
52
|
-
<option value="germany">Germany</option>
|
|
53
|
-
<option value="italy">Italy</option>
|
|
54
|
-
<option value="japan">Japan</option>
|
|
55
|
-
<option value="canada">Canada</option>
|
|
56
|
-
</select>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<div>
|
|
60
|
-
<label class="block mb-3 font-semibold text-gray-800" for="select-skills">Skills</label>
|
|
61
|
-
<select
|
|
62
|
-
class="kt-select"
|
|
63
|
-
data-kt-select
|
|
64
|
-
data-kt-select-placeholder="Select your skills..."
|
|
65
|
-
data-kt-select-multiple="true"
|
|
66
|
-
data-kt-select-tags="true"
|
|
67
|
-
data-kt-select-config='{
|
|
68
|
-
"showSelectedCount": true,
|
|
69
|
-
"enableSelectAll": true
|
|
70
|
-
}'>
|
|
71
|
-
<option value="javascript">JavaScript</option>
|
|
72
|
-
<option value="typescript">TypeScript</option>
|
|
73
|
-
<option value="react">React</option>
|
|
74
|
-
<option value="vue">Vue.js</option>
|
|
75
|
-
<option value="angular">Angular</option>
|
|
76
|
-
<option value="node">Node.js</option>
|
|
77
|
-
<option value="python">Python</option>
|
|
78
|
-
<option value="java">Java</option>
|
|
79
|
-
</select>
|
|
80
|
-
</div>
|
|
81
|
-
</form>
|
|
82
|
-
</div>
|
|
83
|
-
<script src="../../dist/ktui.js"></script>
|
|
84
|
-
</body>
|
|
85
|
-
|
|
86
|
-
</html>
|
|
@@ -1,57 +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 Icons</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 Icons</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
|
-
"tagTemplate": "{{icon}} {{text}}",
|
|
25
|
-
"optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
|
|
26
|
-
"optionClass": "kt-select-option"
|
|
27
|
-
}'>
|
|
28
|
-
<option value="us"
|
|
29
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
|
|
30
|
-
United States</option>
|
|
31
|
-
<option value="de"
|
|
32
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
|
|
33
|
-
Germany</option>
|
|
34
|
-
<option value="it"
|
|
35
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
|
|
36
|
-
Italy</option>
|
|
37
|
-
<option value="fr"
|
|
38
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
|
|
39
|
-
France</option>
|
|
40
|
-
<option value="es"
|
|
41
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
|
|
42
|
-
Spain</option>
|
|
43
|
-
<option value="jp"
|
|
44
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
|
|
45
|
-
Japan</option>
|
|
46
|
-
<option value="ru"
|
|
47
|
-
data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
|
|
48
|
-
Russia</option>
|
|
49
|
-
</select>
|
|
50
|
-
|
|
51
|
-
</div>
|
|
52
|
-
</form>
|
|
53
|
-
</div>
|
|
54
|
-
<script src="../../dist/ktui.js"></script>
|
|
55
|
-
</body>
|
|
56
|
-
|
|
57
|
-
</html>
|