@keenthemes/ktui 1.0.25 → 1.0.27

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 (85) hide show
  1. package/dist/ktui.js +335 -36
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +216 -13
  5. package/examples/datatable/checkbox-events-test.html +400 -0
  6. package/examples/datatable/credentials-test.html +423 -0
  7. package/examples/datatable/remote-checkbox-test.html +365 -0
  8. package/examples/modal/persistent.html +205 -0
  9. package/examples/modal/remote-select-dropdown.html +166 -0
  10. package/examples/modal/select-dropdown-container.html +129 -0
  11. package/examples/select/formdata-remote.html +161 -0
  12. package/examples/select/modal-positioning-test.html +338 -0
  13. package/lib/cjs/components/datatable/datatable-checkbox.js +16 -3
  14. package/lib/cjs/components/datatable/datatable-checkbox.js.map +1 -1
  15. package/lib/cjs/components/datatable/datatable.js +3 -5
  16. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  17. package/lib/cjs/components/image-input/image-input.js.map +1 -1
  18. package/lib/cjs/components/modal/modal.js +16 -2
  19. package/lib/cjs/components/modal/modal.js.map +1 -1
  20. package/lib/cjs/components/select/config.js +5 -0
  21. package/lib/cjs/components/select/config.js.map +1 -1
  22. package/lib/cjs/components/select/dropdown.js +54 -3
  23. package/lib/cjs/components/select/dropdown.js.map +1 -1
  24. package/lib/cjs/components/select/select.js +241 -23
  25. package/lib/cjs/components/select/select.js.map +1 -1
  26. package/lib/cjs/components/select/templates.js.map +1 -1
  27. package/lib/esm/components/datatable/datatable-checkbox.js +16 -3
  28. package/lib/esm/components/datatable/datatable-checkbox.js.map +1 -1
  29. package/lib/esm/components/datatable/datatable.js +3 -5
  30. package/lib/esm/components/datatable/datatable.js.map +1 -1
  31. package/lib/esm/components/image-input/image-input.js.map +1 -1
  32. package/lib/esm/components/modal/modal.js +16 -2
  33. package/lib/esm/components/modal/modal.js.map +1 -1
  34. package/lib/esm/components/select/config.js +5 -0
  35. package/lib/esm/components/select/config.js.map +1 -1
  36. package/lib/esm/components/select/dropdown.js +54 -3
  37. package/lib/esm/components/select/dropdown.js.map +1 -1
  38. package/lib/esm/components/select/select.js +241 -23
  39. package/lib/esm/components/select/select.js.map +1 -1
  40. package/lib/esm/components/select/templates.js.map +1 -1
  41. package/package.json +1 -1
  42. package/src/components/datatable/datatable-checkbox.ts +18 -3
  43. package/src/components/datatable/datatable.ts +3 -0
  44. package/src/components/datatable/types.ts +1 -0
  45. package/src/components/image-input/image-input.ts +12 -15
  46. package/src/components/modal/modal.ts +20 -2
  47. package/src/components/select/config.ts +6 -0
  48. package/src/components/select/dropdown.ts +69 -4
  49. package/src/components/select/select.ts +306 -36
  50. package/src/components/select/templates.ts +2 -1
  51. package/lib/cjs/components/config.js +0 -26
  52. package/lib/cjs/components/config.js.map +0 -1
  53. package/lib/cjs/components/config.umd.js +0 -23
  54. package/lib/cjs/components/config.umd.js.map +0 -1
  55. package/lib/cjs/components/menu/index.js +0 -6
  56. package/lib/cjs/components/menu/index.js.map +0 -1
  57. package/lib/cjs/components/menu/menu.js +0 -1021
  58. package/lib/cjs/components/menu/menu.js.map +0 -1
  59. package/lib/cjs/components/menu/types.js +0 -3
  60. package/lib/cjs/components/menu/types.js.map +0 -1
  61. package/lib/cjs/components/theme/index.js +0 -6
  62. package/lib/cjs/components/theme/index.js.map +0 -1
  63. package/lib/cjs/components/theme/theme.js +0 -147
  64. package/lib/cjs/components/theme/theme.js.map +0 -1
  65. package/lib/cjs/components/theme/types.js +0 -3
  66. package/lib/cjs/components/theme/types.js.map +0 -1
  67. package/lib/esm/components/config.js +0 -24
  68. package/lib/esm/components/config.js.map +0 -1
  69. package/lib/esm/components/config.umd.js +0 -23
  70. package/lib/esm/components/config.umd.js.map +0 -1
  71. package/lib/esm/components/menu/index.js +0 -2
  72. package/lib/esm/components/menu/index.js.map +0 -1
  73. package/lib/esm/components/menu/menu.js +0 -1018
  74. package/lib/esm/components/menu/menu.js.map +0 -1
  75. package/lib/esm/components/menu/types.js +0 -2
  76. package/lib/esm/components/menu/types.js.map +0 -1
  77. package/lib/esm/components/theme/index.js +0 -2
  78. package/lib/esm/components/theme/index.js.map +0 -1
  79. package/lib/esm/components/theme/theme.js +0 -144
  80. package/lib/esm/components/theme/theme.js.map +0 -1
  81. package/lib/esm/components/theme/types.js +0 -2
  82. package/lib/esm/components/theme/types.js.map +0 -1
  83. /package/examples/select/{dark-mode-test.html → dark-mode.html} +0 -0
  84. /package/examples/select/{dropdowncontainer-test.html → dropdowncontainer.html} +0 -0
  85. /package/examples/select/{global-config-test.html → global-config.html} +0 -0
package/examples/modal/remote-select-dropdown.html ADDED
@@ -0,0 +1,166 @@
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>Issue #63: Remote Select Dropdown in Centered Modal</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <!-- Test Case 1: Remote Select in Centered Modal (Issue #63) -->
13
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
14
+ <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">
15
+ Open Remote Select Modal (Issue #63)
16
+ </button>
17
+ </div>
18
+
19
+ <!-- Test Case 2: Remote Select with dropdownContainer -->
20
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
21
+ <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">
22
+ Open Remote Select with Container
23
+ </button>
24
+ </div>
25
+
26
+ <!-- Test Case 3: Regular Select (Control) -->
27
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
28
+ <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">
29
+ Open Regular Select Modal
30
+ </button>
31
+ </div>
32
+
33
+ <!-- Modal 1: Remote Select in Centered Modal (Issue #63) -->
34
+ <div class="kt-modal kt-modal-center" data-kt-modal="true" id="remoteSelectModal">
35
+ <div class="kt-modal-content max-w-md">
36
+ <div class="kt-modal-header">
37
+ <h3 class="kt-modal-title">Remote Select in Centered Modal</h3>
38
+ <button
39
+ type="button"
40
+ class="kt-modal-close"
41
+ aria-label="Close modal"
42
+ data-kt-modal-dismiss="#remoteSelectModal"
43
+ >
44
+ <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">
45
+ <path d="M18 6 6 18"/>
46
+ <path d="m6 6 12 12"/>
47
+ </svg>
48
+ </button>
49
+ </div>
50
+ <div class="kt-modal-body space-y-6">
51
+ <div>
52
+ <label class="block mb-2 font-medium text-gray-700">Remote Select (Issue #63 Test)</label>
53
+ <select
54
+ class="kt-select"
55
+ data-kt-select="true"
56
+ data-kt-select-remote="true"
57
+ data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
58
+ data-kt-select-data-field-value="id"
59
+ data-kt-select-data-field-text="name"
60
+ data-kt-select-enable-search="true"
61
+ data-kt-select-search-param="q"
62
+ data-kt-select-search-min-length="2"
63
+ data-kt-select-search-debounce="300"
64
+ data-kt-select-placeholder="Search and select a user..."
65
+ ></select>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Modal 2: Remote Select with dropdownContainer -->
72
+ <div class="kt-modal kt-modal-center" data-kt-modal="true" id="remoteSelectWithContainer">
73
+ <div class="kt-modal-content max-w-md">
74
+ <div class="kt-modal-header">
75
+ <h3 class="kt-modal-title">Remote Select with dropdownContainer</h3>
76
+ <button
77
+ type="button"
78
+ class="kt-modal-close"
79
+ aria-label="Close modal"
80
+ data-kt-modal-dismiss="#remoteSelectWithContainer"
81
+ >
82
+ <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">
83
+ <path d="M18 6 6 18"/>
84
+ <path d="m6 6 12 12"/>
85
+ </svg>
86
+ </button>
87
+ </div>
88
+ <div class="kt-modal-body space-y-6">
89
+ <div>
90
+ <label class="block mb-2 font-medium text-gray-700">Remote Select with dropdownContainer</label>
91
+ <select
92
+ class="kt-select"
93
+ data-kt-select="true"
94
+ data-kt-select-remote="true"
95
+ data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
96
+ data-kt-select-data-field-value="id"
97
+ data-kt-select-data-field-text="name"
98
+ data-kt-select-enable-search="true"
99
+ data-kt-select-search-param="q"
100
+ data-kt-select-search-min-length="2"
101
+ data-kt-select-search-debounce="300"
102
+ data-kt-select-placeholder="Search and select a user..."
103
+ data-kt-select-config='{
104
+ "dropdownContainer": "#remoteSelectWithContainer"
105
+ }'
106
+ ></select>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Modal 3: Regular Select (Control) -->
113
+ <div class="kt-modal kt-modal-center" data-kt-modal="true" id="regularSelectModal">
114
+ <div class="kt-modal-content max-w-md">
115
+ <div class="kt-modal-header">
116
+ <h3 class="kt-modal-title">Regular Select (Control)</h3>
117
+ <button
118
+ type="button"
119
+ class="kt-modal-close"
120
+ aria-label="Close modal"
121
+ data-kt-modal-dismiss="#regularSelectModal"
122
+ >
123
+ <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">
124
+ <path d="M18 6 6 18"/>
125
+ <path d="m6 6 12 12"/>
126
+ </svg>
127
+ </button>
128
+ </div>
129
+ <div class="kt-modal-body space-y-6">
130
+ <div>
131
+ <label class="block mb-2 font-medium text-gray-700">Regular Select (Control)</label>
132
+ <select
133
+ class="kt-select"
134
+ data-kt-select="true"
135
+ data-kt-select-placeholder="Select an option..."
136
+ >
137
+ <option value="">Select an option...</option>
138
+ <option value="1">Option 1</option>
139
+ <option value="2">Option 2</option>
140
+ <option value="3">Option 3</option>
141
+ <option value="4">Option 4</option>
142
+ <option value="5">Option 5</option>
143
+ <option value="6">Option 6</option>
144
+ <option value="7">Option 7</option>
145
+ <option value="8">Option 8</option>
146
+ </select>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <script src="../../dist/ktui.js"></script>
153
+ <script>
154
+ document.addEventListener('DOMContentLoaded', function() {
155
+ if (window.KTModal) {
156
+ KTModal.init();
157
+ }
158
+ if (window.KTSelect) {
159
+ KTSelect.init();
160
+ }
161
+ });
162
+ </script>
163
+ </body>
164
+
165
+ </html>
166
+
package/examples/modal/select-dropdown-container.html ADDED
@@ -0,0 +1,129 @@
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 Select Dropdown Container</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <!-- Example 1: Select with dropdownContainer set to modal -->
13
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
14
+ <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="#selectModal">
15
+ Open Select Modal
16
+ </button>
17
+ </div>
18
+
19
+ <!-- Example 2: Select with search inside modal -->
20
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
21
+ <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="#selectModalWithSearch">
22
+ Open Searchable Select Modal
23
+ </button>
24
+ </div>
25
+
26
+ <!-- Modal 1: Select with dropdownContainer -->
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 with Dropdown Container</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 space-y-6">
44
+ <div>
45
+ <label class="block mb-2 font-medium text-gray-700">Example 1: dropdownContainer: "#selectModal"</label>
46
+ <select
47
+ class="kt-select"
48
+ data-kt-select="true"
49
+ data-kt-select-placeholder="Select a framework..."
50
+ data-kt-select-config='{
51
+ "dropdownContainer": "#selectModal"
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
+ </div>
67
+
68
+ <!-- Modal 2: Select with search and dropdownContainer -->
69
+ <div class="kt-modal kt-modal-center" data-kt-modal="true" id="selectModalWithSearch">
70
+ <div class="kt-modal-content max-w-md">
71
+ <div class="kt-modal-header">
72
+ <h3 class="kt-modal-title">Select with Search</h3>
73
+ <button
74
+ type="button"
75
+ class="kt-modal-close"
76
+ aria-label="Close modal"
77
+ data-kt-modal-dismiss="#selectModalWithSearch"
78
+ >
79
+ <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">
80
+ <path d="M18 6 6 18"/>
81
+ <path d="m6 6 12 12"/>
82
+ </svg>
83
+ </button>
84
+ </div>
85
+ <div class="kt-modal-body space-y-6">
86
+ <div>
87
+ <label class="block mb-2 font-medium text-gray-700">Example 2: dropdownContainer with search</label>
88
+ <select
89
+ class="kt-select"
90
+ data-kt-select="true"
91
+ data-kt-select-placeholder="Search and select..."
92
+ data-kt-select-config='{
93
+ "dropdownContainer": "#selectModalWithSearch",
94
+ "enableSearch": true
95
+ }'
96
+ >
97
+ <option value="javascript">JavaScript</option>
98
+ <option value="typescript">TypeScript</option>
99
+ <option value="python">Python</option>
100
+ <option value="java">Java</option>
101
+ <option value="csharp">C#</option>
102
+ <option value="cpp">C++</option>
103
+ <option value="rust">Rust</option>
104
+ <option value="go">Go</option>
105
+ <option value="ruby">Ruby</option>
106
+ <option value="php">PHP</option>
107
+ <option value="swift">Swift</option>
108
+ <option value="kotlin">Kotlin</option>
109
+ </select>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script src="../../dist/ktui.js"></script>
116
+ <script>
117
+ document.addEventListener('DOMContentLoaded', function() {
118
+ if (window.KTModal) {
119
+ KTModal.init();
120
+ }
121
+ if (window.KTSelect) {
122
+ KTSelect.init();
123
+ }
124
+ });
125
+ </script>
126
+ </body>
127
+
128
+ </html>
129
+
package/examples/select/formdata-remote.html ADDED
@@ -0,0 +1,161 @@
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>Remote Select FormData 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
+ Remote Select FormData Test
14
+ </h1>
15
+ <p class="text-sm text-gray-600 mb-6">
16
+ Verifies that remote KTSelect fields are included in FormData.
17
+ </p>
18
+
19
+ <form id="testForm" class="flex flex-col gap-6">
20
+ <div>
21
+ <label class="block mb-2 font-medium text-gray-700">
22
+ Regular Input (Control)
23
+ </label>
24
+ <input
25
+ type="text"
26
+ name="regularField"
27
+ value="test value"
28
+ class="w-full px-3 py-2 border border-gray-300 rounded"
29
+ placeholder="Regular input field" />
30
+ </div>
31
+
32
+ <div>
33
+ <label class="block mb-2 font-medium text-gray-700">
34
+ Local KTSelect (Control)
35
+ </label>
36
+ <select
37
+ name="localSelect"
38
+ data-kt-select="true"
39
+ class="kt-select">
40
+ <option value="">Select an option...</option>
41
+ <option value="option1">Option 1</option>
42
+ <option value="option2" selected>Option 2</option>
43
+ <option value="option3">Option 3</option>
44
+ </select>
45
+ </div>
46
+
47
+ <div>
48
+ <label class="block mb-2 font-medium text-gray-700">
49
+ Remote KTSelect (Test Subject)
50
+ </label>
51
+ <select
52
+ name="remoteSelect"
53
+ data-kt-select="true"
54
+ data-kt-select-remote="true"
55
+ data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
56
+ data-kt-select-data-value-field="id"
57
+ data-kt-select-data-field-text="name"
58
+ data-kt-select-placeholder="Select a user..."
59
+ class="kt-select">
60
+ <option value="">Select a user...</option>
61
+ </select>
62
+ </div>
63
+
64
+ <div class="flex gap-3">
65
+ <button
66
+ type="submit"
67
+ class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded hover:bg-gray-800">
68
+ Test FormData
69
+ </button>
70
+ <button
71
+ type="button"
72
+ id="checkNativeValue"
73
+ class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50">
74
+ Check Native Value
75
+ </button>
76
+ </div>
77
+ </form>
78
+
79
+ <div id="results" class="mt-6 space-y-3 text-sm"></div>
80
+
81
+ <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded text-sm">
82
+ <div class="font-medium text-gray-900 mb-2">Test Steps:</div>
83
+ <ol class="list-decimal list-inside space-y-1 text-gray-700">
84
+ <li>Wait for remote data to load</li>
85
+ <li>Select a user from the remote dropdown</li>
86
+ <li>Click "Test FormData"</li>
87
+ <li>Verify remoteSelect field is included</li>
88
+ </ol>
89
+ </div>
90
+ </div>
91
+
92
+ <script src="../../dist/ktui.js"></script>
93
+ <script>
94
+ document.addEventListener('DOMContentLoaded', function () {
95
+ // Initialize KTSelect components
96
+ if (typeof KTSelect !== 'undefined') {
97
+ KTSelect.init();
98
+ }
99
+
100
+ const form = document.getElementById('testForm');
101
+ const resultsDiv = document.getElementById('results');
102
+ const remoteSelectEl = document.querySelector(
103
+ 'select[name="remoteSelect"]',
104
+ );
105
+ const checkNativeBtn = document.getElementById('checkNativeValue');
106
+
107
+ checkNativeBtn.addEventListener('click', function () {
108
+ resultsDiv.innerHTML = '';
109
+ const div = document.createElement('div');
110
+ div.className = 'p-3 bg-white border border-gray-200 rounded';
111
+
112
+ const nativeValue = remoteSelectEl.value;
113
+ const selectedOption = remoteSelectEl.querySelector(
114
+ 'option[selected]',
115
+ );
116
+
117
+ div.innerHTML = `
118
+ <div class="font-medium text-gray-900 mb-2">Native Select State</div>
119
+ <div class="space-y-1 text-gray-700">
120
+ <div>Value: <code class="bg-gray-100 px-1 rounded text-xs">"${nativeValue}"</code></div>
121
+ <div>Selected Option: ${selectedOption ? `"${selectedOption.value}"` : 'None'}</div>
122
+ </div>
123
+ `;
124
+ resultsDiv.appendChild(div);
125
+ });
126
+
127
+ form.addEventListener('submit', function (e) {
128
+ e.preventDefault();
129
+ resultsDiv.innerHTML = '';
130
+
131
+ const formData = new FormData(form);
132
+ const entries = Array.from(formData.entries());
133
+
134
+ const resultDiv = document.createElement('div');
135
+ resultDiv.className = 'p-3 bg-white border border-gray-200 rounded';
136
+ resultDiv.innerHTML = `
137
+ <div class="font-medium text-gray-900 mb-2">FormData Entries (${entries.length})</div>
138
+ <ul class="space-y-1">
139
+ ${entries.map(([key, value]) => `<li class="text-xs font-mono text-gray-700"><span class="font-medium">${key}:</span> "${value}"</li>`).join('')}
140
+ </ul>
141
+ `;
142
+ resultsDiv.appendChild(resultDiv);
143
+
144
+ const remoteSelectValue = formData.get('remoteSelect');
145
+ const verdict = document.createElement('div');
146
+ verdict.className = `p-3 mt-3 rounded border ${
147
+ remoteSelectValue
148
+ ? 'bg-white border-gray-900'
149
+ : 'bg-gray-100 border-gray-400'
150
+ }`;
151
+ verdict.innerHTML = `
152
+ <div class="font-medium ${remoteSelectValue ? 'text-gray-900' : 'text-gray-700'}">
153
+ ${remoteSelectValue ? 'PASS' : 'FAIL'}: Remote Select Field
154
+ </div>
155
+ `;
156
+ resultsDiv.appendChild(verdict);
157
+ });
158
+ });
159
+ </script>
160
+ </body>
161
+ </html>