@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,128 +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>Modal Container Test</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
|
-
<!-- Modal Trigger Button -->
|
|
14
|
-
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400" data-kt-modal-toggle="#selectModal">
|
|
15
|
-
Open Select Modal
|
|
16
|
-
</button>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<!-- Modal -->
|
|
20
|
-
<div class="kt-modal kt-modal-center" data-kt-modal="true" id="selectModal">
|
|
21
|
-
<div class="kt-modal-content max-w-md">
|
|
22
|
-
<div class="kt-modal-header">
|
|
23
|
-
<h3 class="kt-modal-title">Test Select Positioning</h3>
|
|
24
|
-
<button
|
|
25
|
-
type="button"
|
|
26
|
-
class="kt-modal-close"
|
|
27
|
-
aria-label="Close modal"
|
|
28
|
-
data-kt-modal-dismiss="#selectModal"
|
|
29
|
-
>
|
|
30
|
-
<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">
|
|
31
|
-
<path d="M18 6 6 18"/>
|
|
32
|
-
<path d="m6 6 12 12"/>
|
|
33
|
-
</svg>
|
|
34
|
-
</button>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="kt-modal-body space-y-6">
|
|
37
|
-
<!-- Test 1: Using dropdownContainer: body -->
|
|
38
|
-
<div>
|
|
39
|
-
<label class="block mb-2 font-medium text-gray-700">Test 1: dropdownContainer: "body"</label>
|
|
40
|
-
<select
|
|
41
|
-
class="kt-select"
|
|
42
|
-
data-kt-select="true"
|
|
43
|
-
data-kt-select-placeholder="Select a framework..."
|
|
44
|
-
data-kt-select-config='{
|
|
45
|
-
"dropdownContainer": "body"
|
|
46
|
-
}'
|
|
47
|
-
>
|
|
48
|
-
<option value="react">React</option>
|
|
49
|
-
<option value="nextjs">Next.js</option>
|
|
50
|
-
<option value="angular">Angular</option>
|
|
51
|
-
<option value="vue">Vue</option>
|
|
52
|
-
<option value="svelte">Svelte</option>
|
|
53
|
-
</select>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<!-- Test 2: Using dropdownStrategy: absolute -->
|
|
57
|
-
<div>
|
|
58
|
-
<label class="block mb-2 font-medium text-gray-700">Test 2: dropdownStrategy: "absolute"</label>
|
|
59
|
-
<select
|
|
60
|
-
class="kt-select"
|
|
61
|
-
data-kt-select="true"
|
|
62
|
-
data-kt-select-placeholder="Select a framework..."
|
|
63
|
-
data-kt-select-config='{
|
|
64
|
-
"dropdownStrategy": "absolute"
|
|
65
|
-
}'
|
|
66
|
-
>
|
|
67
|
-
<option value="react">React</option>
|
|
68
|
-
<option value="nextjs">Next.js</option>
|
|
69
|
-
<option value="angular">Angular</option>
|
|
70
|
-
<option value="vue">Vue</option>
|
|
71
|
-
<option value="svelte">Svelte</option>
|
|
72
|
-
</select>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<!-- Test 3: Using both options -->
|
|
76
|
-
<div>
|
|
77
|
-
<label class="block mb-2 font-medium text-gray-700">Test 3: Both container + strategy</label>
|
|
78
|
-
<select
|
|
79
|
-
class="kt-select"
|
|
80
|
-
data-kt-select="true"
|
|
81
|
-
data-kt-select-placeholder="Select a framework..."
|
|
82
|
-
data-kt-select-config='{
|
|
83
|
-
"dropdownContainer": "body",
|
|
84
|
-
"dropdownStrategy": "fixed"
|
|
85
|
-
}'
|
|
86
|
-
>
|
|
87
|
-
<option value="react">React</option>
|
|
88
|
-
<option value="nextjs">Next.js</option>
|
|
89
|
-
<option value="angular">Angular</option>
|
|
90
|
-
<option value="vue">Vue</option>
|
|
91
|
-
<option value="svelte">Svelte</option>
|
|
92
|
-
</select>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<!-- Test 4: No config (broken) -->
|
|
96
|
-
<div>
|
|
97
|
-
<label class="block mb-2 font-medium text-gray-700">Test 4: No config (should break)</label>
|
|
98
|
-
<select
|
|
99
|
-
class="kt-select"
|
|
100
|
-
data-kt-select="true"
|
|
101
|
-
data-kt-select-placeholder="Select a framework..."
|
|
102
|
-
>
|
|
103
|
-
<option value="react">React</option>
|
|
104
|
-
<option value="nextjs">Next.js</option>
|
|
105
|
-
<option value="angular">Angular</option>
|
|
106
|
-
<option value="vue">Vue</option>
|
|
107
|
-
<option value="svelte">Svelte</option>
|
|
108
|
-
</select>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<script src="../../dist/ktui.js"></script>
|
|
115
|
-
<script>
|
|
116
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
117
|
-
if (window.KTModal) {
|
|
118
|
-
KTModal.init();
|
|
119
|
-
}
|
|
120
|
-
if (window.KTSelect) {
|
|
121
|
-
KTSelect.init();
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
</script>
|
|
125
|
-
</body>
|
|
126
|
-
|
|
127
|
-
</html>
|
|
128
|
-
|
|
@@ -1,338 +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>Modal Positioning Test</title>
|
|
7
|
-
<link rel="stylesheet" href="../../dist/styles.css" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body class="bg-gray-50 min-h-screen">
|
|
11
|
-
<div class="bg-white rounded-lg shadow p-8 w-full max-w-2xl mt-10 mx-auto">
|
|
12
|
-
<h1 class="text-xl font-semibold text-gray-900 mb-2">
|
|
13
|
-
Modal Positioning Test
|
|
14
|
-
</h1>
|
|
15
|
-
<p class="text-sm text-gray-600 mb-6">
|
|
16
|
-
Verifies KTSelect dropdowns position correctly inside modals.
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<div class="flex flex-col gap-4">
|
|
20
|
-
<button
|
|
21
|
-
data-kt-modal-toggle="#modal-basic"
|
|
22
|
-
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50 text-left">
|
|
23
|
-
<div class="font-medium">Basic Modal</div>
|
|
24
|
-
<div class="text-xs text-gray-500 mt-0.5">
|
|
25
|
-
Standard modal without centering
|
|
26
|
-
</div>
|
|
27
|
-
</button>
|
|
28
|
-
|
|
29
|
-
<button
|
|
30
|
-
data-kt-modal-toggle="#modal-centered"
|
|
31
|
-
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50 text-left">
|
|
32
|
-
<div class="font-medium">Centered Modal (kt-modal-center)</div>
|
|
33
|
-
<div class="text-xs text-gray-500 mt-0.5">
|
|
34
|
-
Critical test - previously caused bottom-right bug
|
|
35
|
-
</div>
|
|
36
|
-
</button>
|
|
37
|
-
|
|
38
|
-
<button
|
|
39
|
-
data-kt-modal-toggle="#modal-remote"
|
|
40
|
-
class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50 text-left">
|
|
41
|
-
<div class="font-medium">Modal with Remote Select</div>
|
|
42
|
-
<div class="text-xs text-gray-500 mt-0.5">
|
|
43
|
-
Tests reload() and clearSelection() methods
|
|
44
|
-
</div>
|
|
45
|
-
</button>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded">
|
|
49
|
-
<div class="font-medium text-gray-900 mb-2 text-sm">Control Test</div>
|
|
50
|
-
<select
|
|
51
|
-
data-kt-select="true"
|
|
52
|
-
class="kt-select"
|
|
53
|
-
data-kt-select-placeholder="Select an option...">
|
|
54
|
-
<option value="">Select an option...</option>
|
|
55
|
-
<option value="1">Option 1</option>
|
|
56
|
-
<option value="2">Option 2</option>
|
|
57
|
-
<option value="3">Option 3</option>
|
|
58
|
-
<option value="4">Option 4</option>
|
|
59
|
-
<option value="5">Option 5</option>
|
|
60
|
-
</select>
|
|
61
|
-
<p class="text-xs text-gray-500 mt-2">
|
|
62
|
-
Baseline - should position normally
|
|
63
|
-
</p>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<!-- Basic Modal -->
|
|
68
|
-
<div
|
|
69
|
-
id="modal-basic"
|
|
70
|
-
data-kt-modal="true"
|
|
71
|
-
class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
72
|
-
<div
|
|
73
|
-
class="flex min-h-full items-center justify-center p-4">
|
|
74
|
-
<div
|
|
75
|
-
data-kt-modal-backdrop="true"
|
|
76
|
-
class="fixed inset-0 bg-gray-900 bg-opacity-50"></div>
|
|
77
|
-
|
|
78
|
-
<div
|
|
79
|
-
class="relative bg-white rounded-lg shadow-xl w-full max-w-lg border border-gray-200">
|
|
80
|
-
<div class="border-b border-gray-200 px-6 py-4">
|
|
81
|
-
<h3 class="text-base font-semibold text-gray-900">Basic Modal</h3>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<div class="px-6 py-5">
|
|
85
|
-
<label class="block mb-2 font-medium text-gray-700">
|
|
86
|
-
Select in Basic Modal
|
|
87
|
-
</label>
|
|
88
|
-
<select
|
|
89
|
-
data-kt-select="true"
|
|
90
|
-
class="kt-select"
|
|
91
|
-
data-kt-select-placeholder="Choose option...">
|
|
92
|
-
<option value="">Choose option...</option>
|
|
93
|
-
<option value="1">Option 1</option>
|
|
94
|
-
<option value="2">Option 2</option>
|
|
95
|
-
<option value="3">Option 3</option>
|
|
96
|
-
<option value="4">Option 4</option>
|
|
97
|
-
<option value="5">Option 5</option>
|
|
98
|
-
<option value="6">Option 6</option>
|
|
99
|
-
<option value="7">Option 7</option>
|
|
100
|
-
<option value="8">Option 8</option>
|
|
101
|
-
</select>
|
|
102
|
-
<p class="text-xs text-gray-500 mt-3">
|
|
103
|
-
Expected: Dropdown appears below/above select
|
|
104
|
-
</p>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="border-t border-gray-200 px-6 py-4 flex justify-end">
|
|
108
|
-
<button
|
|
109
|
-
type="button"
|
|
110
|
-
data-kt-modal-dismiss="true"
|
|
111
|
-
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
|
112
|
-
Close
|
|
113
|
-
</button>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
<!-- Centered Modal -->
|
|
120
|
-
<div
|
|
121
|
-
id="modal-centered"
|
|
122
|
-
data-kt-modal="true"
|
|
123
|
-
class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
124
|
-
<div
|
|
125
|
-
class="flex min-h-full items-center justify-center p-4 kt-modal-center">
|
|
126
|
-
<div
|
|
127
|
-
data-kt-modal-backdrop="true"
|
|
128
|
-
class="fixed inset-0 bg-gray-900 bg-opacity-50"></div>
|
|
129
|
-
|
|
130
|
-
<div
|
|
131
|
-
class="relative bg-white rounded-lg shadow-xl w-full max-w-lg border border-gray-200">
|
|
132
|
-
<div class="border-b border-gray-200 px-6 py-4">
|
|
133
|
-
<h3 class="text-base font-semibold text-gray-900">
|
|
134
|
-
Centered Modal (kt-modal-center)
|
|
135
|
-
</h3>
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
<div class="px-6 py-5">
|
|
139
|
-
<label class="block mb-2 font-medium text-gray-700">
|
|
140
|
-
Select in Centered Modal
|
|
141
|
-
</label>
|
|
142
|
-
<select
|
|
143
|
-
data-kt-select="true"
|
|
144
|
-
class="kt-select"
|
|
145
|
-
data-kt-select-placeholder="Choose option..."
|
|
146
|
-
data-kt-select-enable-search="true">
|
|
147
|
-
<option value="">Choose option...</option>
|
|
148
|
-
<option value="1">Option 1</option>
|
|
149
|
-
<option value="2">Option 2</option>
|
|
150
|
-
<option value="3">Option 3</option>
|
|
151
|
-
<option value="4">Option 4</option>
|
|
152
|
-
<option value="5">Option 5</option>
|
|
153
|
-
<option value="6">Option 6</option>
|
|
154
|
-
<option value="7">Option 7</option>
|
|
155
|
-
<option value="8">Option 8</option>
|
|
156
|
-
<option value="9">Option 9</option>
|
|
157
|
-
<option value="10">Option 10</option>
|
|
158
|
-
</select>
|
|
159
|
-
<p class="text-xs text-gray-500 mt-3 p-2 bg-gray-50 border border-gray-200 rounded">
|
|
160
|
-
<strong>Critical:</strong> Dropdown should NOT appear in
|
|
161
|
-
bottom-right corner
|
|
162
|
-
</p>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<div class="border-t border-gray-200 px-6 py-4 flex justify-end">
|
|
166
|
-
<button
|
|
167
|
-
type="button"
|
|
168
|
-
data-kt-modal-dismiss="true"
|
|
169
|
-
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
|
170
|
-
Close
|
|
171
|
-
</button>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
176
|
-
|
|
177
|
-
<!-- Modal with Remote Select -->
|
|
178
|
-
<div
|
|
179
|
-
id="modal-remote"
|
|
180
|
-
data-kt-modal="true"
|
|
181
|
-
class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
182
|
-
<div
|
|
183
|
-
class="flex min-h-full items-center justify-center p-4 kt-modal-center">
|
|
184
|
-
<div
|
|
185
|
-
data-kt-modal-backdrop="true"
|
|
186
|
-
class="fixed inset-0 bg-gray-900 bg-opacity-50"></div>
|
|
187
|
-
|
|
188
|
-
<div
|
|
189
|
-
class="relative bg-white rounded-lg shadow-xl w-full max-w-lg border border-gray-200">
|
|
190
|
-
<div class="border-b border-gray-200 px-6 py-4">
|
|
191
|
-
<h3 class="text-base font-semibold text-gray-900">
|
|
192
|
-
Remote Select in Modal
|
|
193
|
-
</h3>
|
|
194
|
-
</div>
|
|
195
|
-
|
|
196
|
-
<div class="px-6 py-5">
|
|
197
|
-
<label class="block mb-2 font-medium text-gray-700">
|
|
198
|
-
Remote Select
|
|
199
|
-
</label>
|
|
200
|
-
<select
|
|
201
|
-
id="remoteSelectInModal"
|
|
202
|
-
data-kt-select="true"
|
|
203
|
-
class="kt-select"
|
|
204
|
-
data-kt-select-remote="true"
|
|
205
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
206
|
-
data-kt-select-data-value-field="id"
|
|
207
|
-
data-kt-select-data-field-text="name"
|
|
208
|
-
data-kt-select-placeholder="Select a user..."
|
|
209
|
-
data-kt-select-enable-search="true">
|
|
210
|
-
<option value="">Select a user...</option>
|
|
211
|
-
</select>
|
|
212
|
-
|
|
213
|
-
<div class="mt-4 flex gap-2">
|
|
214
|
-
<button
|
|
215
|
-
id="reloadBtn"
|
|
216
|
-
type="button"
|
|
217
|
-
class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
|
218
|
-
Test reload()
|
|
219
|
-
</button>
|
|
220
|
-
<button
|
|
221
|
-
id="clearBtn"
|
|
222
|
-
type="button"
|
|
223
|
-
class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
|
224
|
-
Test clearSelection()
|
|
225
|
-
</button>
|
|
226
|
-
</div>
|
|
227
|
-
|
|
228
|
-
<div id="modalResults" class="mt-4 text-xs min-h-[3rem]"></div>
|
|
229
|
-
</div>
|
|
230
|
-
|
|
231
|
-
<div class="border-t border-gray-200 px-6 py-4 flex justify-end">
|
|
232
|
-
<button
|
|
233
|
-
type="button"
|
|
234
|
-
data-kt-modal-dismiss="true"
|
|
235
|
-
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
|
236
|
-
Close
|
|
237
|
-
</button>
|
|
238
|
-
</div>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
|
|
243
|
-
<script>
|
|
244
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
245
|
-
const form = document.getElementById('testForm');
|
|
246
|
-
const resultsDiv = document.getElementById('results');
|
|
247
|
-
const remoteSelectEl = document.querySelector(
|
|
248
|
-
'select[name="remoteSelect"]',
|
|
249
|
-
);
|
|
250
|
-
|
|
251
|
-
if (form) {
|
|
252
|
-
form.addEventListener('submit', function (e) {
|
|
253
|
-
e.preventDefault();
|
|
254
|
-
resultsDiv.innerHTML = '';
|
|
255
|
-
|
|
256
|
-
const formData = new FormData(form);
|
|
257
|
-
const entries = Array.from(formData.entries());
|
|
258
|
-
|
|
259
|
-
const resultDiv = document.createElement('div');
|
|
260
|
-
resultDiv.className = 'p-3 bg-white border border-gray-200 rounded';
|
|
261
|
-
resultDiv.innerHTML = `
|
|
262
|
-
<div class="font-medium text-gray-900 mb-2">FormData Entries (${entries.length})</div>
|
|
263
|
-
<ul class="space-y-1">
|
|
264
|
-
${entries
|
|
265
|
-
.map(
|
|
266
|
-
([key, value]) =>
|
|
267
|
-
`<li class="text-xs font-mono text-gray-700"><span class="font-medium">${key}:</span> "${value}"</li>`,
|
|
268
|
-
)
|
|
269
|
-
.join('')}
|
|
270
|
-
</ul>
|
|
271
|
-
`;
|
|
272
|
-
resultsDiv.appendChild(resultDiv);
|
|
273
|
-
|
|
274
|
-
const remoteSelectValue = formData.get('remoteSelect');
|
|
275
|
-
const verdict = document.createElement('div');
|
|
276
|
-
verdict.className = `p-3 mt-3 rounded border font-medium ${
|
|
277
|
-
remoteSelectValue
|
|
278
|
-
? 'bg-white border-gray-900 text-gray-900'
|
|
279
|
-
: 'bg-gray-100 border-gray-400 text-gray-700'
|
|
280
|
-
}`;
|
|
281
|
-
verdict.textContent = remoteSelectValue
|
|
282
|
-
? 'PASS: Remote select included'
|
|
283
|
-
: 'FAIL: Remote select missing';
|
|
284
|
-
resultsDiv.appendChild(verdict);
|
|
285
|
-
});
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
const modal = document.getElementById('modal-remote');
|
|
289
|
-
const remoteSelectInModal = document.getElementById(
|
|
290
|
-
'remoteSelectInModal',
|
|
291
|
-
);
|
|
292
|
-
const resultsModalDiv = document.getElementById('modalResults');
|
|
293
|
-
const reloadBtn = document.getElementById('reloadBtn');
|
|
294
|
-
const clearBtn = document.getElementById('clearBtn');
|
|
295
|
-
|
|
296
|
-
modal.addEventListener('kt.modal.show', function () {
|
|
297
|
-
const instance = KTSelect.getInstance(remoteSelectInModal);
|
|
298
|
-
|
|
299
|
-
if (instance) {
|
|
300
|
-
reloadBtn.addEventListener('click', async function () {
|
|
301
|
-
resultsModalDiv.innerHTML =
|
|
302
|
-
'<div class="p-2 bg-gray-100 border border-gray-200 rounded">Reloading...</div>';
|
|
303
|
-
|
|
304
|
-
try {
|
|
305
|
-
await instance.reload();
|
|
306
|
-
resultsModalDiv.innerHTML = `
|
|
307
|
-
<div class="p-2 bg-white border border-gray-200 rounded">
|
|
308
|
-
<div class="font-medium text-gray-900">reload() completed</div>
|
|
309
|
-
</div>
|
|
310
|
-
`;
|
|
311
|
-
} catch (error) {
|
|
312
|
-
resultsModalDiv.innerHTML = `
|
|
313
|
-
<div class="p-2 bg-gray-100 border border-gray-300 rounded">
|
|
314
|
-
<div class="font-medium text-gray-900">reload() failed</div>
|
|
315
|
-
<div class="text-gray-600">${error.message}</div>
|
|
316
|
-
</div>
|
|
317
|
-
`;
|
|
318
|
-
}
|
|
319
|
-
});
|
|
320
|
-
|
|
321
|
-
clearBtn.addEventListener('click', function () {
|
|
322
|
-
instance.clearSelection();
|
|
323
|
-
const selectedOptions = instance.getSelectedOptions();
|
|
324
|
-
|
|
325
|
-
resultsModalDiv.innerHTML = `
|
|
326
|
-
<div class="p-2 bg-white border border-gray-200 rounded">
|
|
327
|
-
<div class="font-medium text-gray-900">clearSelection() called</div>
|
|
328
|
-
<div class="text-gray-600">Placeholder visible: ${selectedOptions.length === 0 ? 'Yes' : 'No'}</div>
|
|
329
|
-
</div>
|
|
330
|
-
`;
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
});
|
|
334
|
-
});
|
|
335
|
-
</script>
|
|
336
|
-
<script src="../../dist/ktui.js"></script>
|
|
337
|
-
</body>
|
|
338
|
-
</html>
|
|
@@ -1,80 +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>Modal</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">Modal</label>
|
|
16
|
-
|
|
17
|
-
<!-- Modal Trigger Button -->
|
|
18
|
-
<button class="mt-8 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400" data-kt-modal-toggle="#selectModal">
|
|
19
|
-
Open Select Modal
|
|
20
|
-
</button>
|
|
21
|
-
|
|
22
|
-
</div>
|
|
23
|
-
</form>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<!-- Modal -->
|
|
27
|
-
<div class="kt-modal kt-modal-center" data-kt-modal="true" id="selectModal">
|
|
28
|
-
<div class="kt-modal-content max-w-md">
|
|
29
|
-
<div class="kt-modal-header">
|
|
30
|
-
<h3 class="kt-modal-title">Select a Field</h3>
|
|
31
|
-
<button
|
|
32
|
-
type="button"
|
|
33
|
-
class="kt-modal-close"
|
|
34
|
-
aria-label="Close modal"
|
|
35
|
-
data-kt-modal-dismiss="#selectModal"
|
|
36
|
-
>
|
|
37
|
-
<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">
|
|
38
|
-
<path d="M18 6 6 18"/>
|
|
39
|
-
<path d="m6 6 12 12"/>
|
|
40
|
-
</svg>
|
|
41
|
-
</button>
|
|
42
|
-
</div>
|
|
43
|
-
<div class="kt-modal-body">
|
|
44
|
-
<!-- Note: dropdownStrategy is set to "absolute" for proper positioning inside transformed modal -->
|
|
45
|
-
<select
|
|
46
|
-
class="kt-select"
|
|
47
|
-
data-kt-select="true"
|
|
48
|
-
data-kt-select-placeholder="Select a framework..."
|
|
49
|
-
data-kt-select-config='{
|
|
50
|
-
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]",
|
|
51
|
-
"dropdownStrategy": "absolute"
|
|
52
|
-
}'
|
|
53
|
-
>
|
|
54
|
-
<option value="react">React</option>
|
|
55
|
-
<option value="nextjs">Next.js</option>
|
|
56
|
-
<option value="angular">Angular</option>
|
|
57
|
-
<option value="vue">Vue</option>
|
|
58
|
-
<option value="svelte">Svelte</option>
|
|
59
|
-
<option value="ember">Ember</option>
|
|
60
|
-
<option value="nuxt">Nuxt.js</option>
|
|
61
|
-
<option value="remix">Remix</option>
|
|
62
|
-
</select>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
<script src="../../dist/ktui.js"></script>
|
|
67
|
-
<script>
|
|
68
|
-
// Initialize modal component
|
|
69
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
70
|
-
if (window.KTModal) {
|
|
71
|
-
KTModal.init();
|
|
72
|
-
}
|
|
73
|
-
if (window.KTSelect) {
|
|
74
|
-
KTSelect.init();
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
</script>
|
|
78
|
-
</body>
|
|
79
|
-
|
|
80
|
-
</html>
|
|
@@ -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>Multiple</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">Multiple</label>
|
|
16
|
-
<select
|
|
17
|
-
class="kt-select"
|
|
18
|
-
data-kt-select="true"
|
|
19
|
-
data-kt-select-multiple="true"
|
|
20
|
-
data-kt-select-max-selections="3"
|
|
21
|
-
data-kt-select-placeholder="Select cities..."
|
|
22
|
-
data-kt-select-config='{
|
|
23
|
-
"displaySeparator": " | "
|
|
24
|
-
}'>
|
|
25
|
-
<option value="amsterdam">Amsterdam</option>
|
|
26
|
-
<option value="barcelona">Barcelona</option>
|
|
27
|
-
<option value="london">London</option>
|
|
28
|
-
<option value="new-york">New York</option>
|
|
29
|
-
<option value="paris">Paris</option>
|
|
30
|
-
<option value="rome">Rome</option>
|
|
31
|
-
<option value="tokyo">Tokyo</option>
|
|
32
|
-
</select>
|
|
33
|
-
|
|
34
|
-
</div>
|
|
35
|
-
</form>
|
|
36
|
-
</div>
|
|
37
|
-
<script src="../../dist/ktui.js"></script>
|
|
38
|
-
</body>
|
|
39
|
-
|
|
40
|
-
</html>
|
|
@@ -1,64 +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 Remote Select Issue</title>
|
|
7
|
-
<link rel="stylesheet" href="../../dist/styles.css">
|
|
8
|
-
</head>
|
|
9
|
-
<body class="bg-gray-50 min-h-screen">
|
|
10
|
-
<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
|
|
11
|
-
<form class="flex flex-col gap-6">
|
|
12
|
-
<div>
|
|
13
|
-
<label class="block mb-2 font-medium text-gray-700" for="select-remote">Remote Data Test</label>
|
|
14
|
-
|
|
15
|
-
<select
|
|
16
|
-
id="select-remote"
|
|
17
|
-
class="kt-select"
|
|
18
|
-
data-kt-select
|
|
19
|
-
data-kt-select-remote="true"
|
|
20
|
-
data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
|
|
21
|
-
data-kt-select-data-field-value="id"
|
|
22
|
-
data-kt-select-data-field-text="name"
|
|
23
|
-
data-kt-select-enable-search="true"
|
|
24
|
-
data-kt-select-search-param="q"
|
|
25
|
-
data-kt-select-search-min-length="2"
|
|
26
|
-
data-kt-select-search-debounce="300"
|
|
27
|
-
data-kt-select-debug="true"
|
|
28
|
-
placeholder="Search users..."
|
|
29
|
-
></select>
|
|
30
|
-
|
|
31
|
-
<div class="mt-4">
|
|
32
|
-
<button type="button" id="check-value" class="px-4 py-2 bg-blue-500 text-white rounded">Check Select Value</button>
|
|
33
|
-
<div id="value-display" class="mt-2 p-2 bg-gray-100 rounded"></div>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
</form>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<script src="../../dist/ktui.js"></script>
|
|
40
|
-
<script>
|
|
41
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
42
|
-
const selectEl = document.getElementById('select-remote');
|
|
43
|
-
const checkBtn = document.getElementById('check-value');
|
|
44
|
-
const valueDisplay = document.getElementById('value-display');
|
|
45
|
-
|
|
46
|
-
// Wait for remote data to load
|
|
47
|
-
|
|
48
|
-
setTimeout(() => {
|
|
49
|
-
checkBtn.addEventListener('click', function() {
|
|
50
|
-
const value = selectEl.value;
|
|
51
|
-
const selectedText = selectEl.options[selectEl.selectedIndex]?.text || 'No selection';
|
|
52
|
-
valueDisplay.innerHTML = `
|
|
53
|
-
<strong>Select Value:</strong> "${value}"<br>
|
|
54
|
-
<strong>Selected Text:</strong> "${selectedText}"<br>
|
|
55
|
-
<strong>Options Count:</strong> ${selectEl.options.length}<br>
|
|
56
|
-
<strong>Options:</strong><br>
|
|
57
|
-
${Array.from(selectEl.options).map(opt => `- ${opt.value}: ${opt.text}`).join('<br>')}
|
|
58
|
-
`;
|
|
59
|
-
});
|
|
60
|
-
}, 3000); // Wait 3 seconds for remote data to load
|
|
61
|
-
});
|
|
62
|
-
</script>
|
|
63
|
-
</body>
|
|
64
|
-
</html>
|