@keenthemes/ktui 1.0.28 → 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.
Files changed (46) hide show
  1. package/package.json +11 -1
  2. package/CONTRIBUTING.md +0 -101
  3. package/examples/datatable/checkbox-events-test.html +0 -400
  4. package/examples/datatable/credentials-test.html +0 -423
  5. package/examples/datatable/remote-checkbox-test.html +0 -365
  6. package/examples/datatable/sorting-test.html +0 -258
  7. package/examples/image-input/file-upload-example.html +0 -189
  8. package/examples/modal/persistent.html +0 -205
  9. package/examples/modal/remote-select-dropdown.html +0 -166
  10. package/examples/modal/select-dropdown-container.html +0 -129
  11. package/examples/select/avatar.html +0 -47
  12. package/examples/select/basic-usage.html +0 -39
  13. package/examples/select/country.html +0 -43
  14. package/examples/select/dark-mode.html +0 -93
  15. package/examples/select/description.html +0 -53
  16. package/examples/select/disable-option.html +0 -37
  17. package/examples/select/disable-select.html +0 -35
  18. package/examples/select/dropdowncontainer.html +0 -111
  19. package/examples/select/dynamic-methods.html +0 -273
  20. package/examples/select/formdata-remote.html +0 -161
  21. package/examples/select/global-config.html +0 -81
  22. package/examples/select/icon-multiple.html +0 -50
  23. package/examples/select/icon.html +0 -48
  24. package/examples/select/max-selection.html +0 -38
  25. package/examples/select/modal-container.html +0 -128
  26. package/examples/select/modal-positioning-test.html +0 -338
  27. package/examples/select/modal.html +0 -80
  28. package/examples/select/multiple.html +0 -40
  29. package/examples/select/native-selected.html +0 -64
  30. package/examples/select/placeholder.html +0 -40
  31. package/examples/select/remote-data-preselected.html +0 -283
  32. package/examples/select/remote-data.html +0 -38
  33. package/examples/select/search.html +0 -57
  34. package/examples/select/sizes.html +0 -94
  35. package/examples/select/tags-enhanced.html +0 -86
  36. package/examples/select/tags-icons.html +0 -57
  37. package/examples/select/template-customization.html +0 -61
  38. package/examples/sticky/README.md +0 -158
  39. package/examples/sticky/debug-sticky.html +0 -144
  40. package/examples/sticky/test-runner.html +0 -175
  41. package/examples/sticky/test-sticky-logic.js +0 -369
  42. package/examples/sticky/test-sticky-positioning.html +0 -386
  43. package/examples/toast/example.html +0 -479
  44. package/prettier.config.js +0 -9
  45. package/tsconfig.json +0 -17
  46. package/webpack.config.js +0 -118
package/examples/modal/select-dropdown-container.html DELETED
@@ -1,129 +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 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/avatar.html DELETED
@@ -1,47 +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>Avatar</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">Avatar</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 user..."
23
- data-kt-select-config='{
24
- "displayTemplate": "<div class=\"flex items-center gap-2\"><img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-5 border border-input rounded-full\" /> <span class=\"text-foreground\">{{text}}</span></div>",
25
- "optionTemplate": "<div class=\"flex items-center gap-2\"><img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-6 border border-input rounded-full\" /> <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg>",
26
- "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
27
- }'
28
- >
29
- <option value="1" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'>Ana Nilson</option>
30
- <option value="2" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/46.jpg"}'>Robert Brown</option>
31
- <option value="3" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/29.jpg"}'>John Doe</option>
32
- <option value="4" selected data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/48.jpg"}'>Nina Erin</option>
33
- <option value="5" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/58.jpg"}'>Mark Larson</option>
34
- <option value="6" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/68.jpg"}'>Nick Strong</option>
35
- <option value="7" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'>Ana Nilson</option>
36
- <option value="8" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/women/58.jpg"}'>Kate Leo</option>
37
- <option value="9" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/38.jpg"}'>Elon White</option>
38
- <option value="10" data-kt-select-option='{"avatar": "https://randomuser.me/api/portraits/men/8.jpg"}'>Bill Smith</option>
39
- </select>
40
-
41
- </div>
42
- </form>
43
- </div>
44
- <script src="../../dist/ktui.js"></script>
45
- </body>
46
-
47
- </html>
package/examples/select/basic-usage.html DELETED
@@ -1,39 +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">Basic Usage</label>
16
- <select
17
- class="kt-select"
18
- data-kt-select="true"
19
- data-kt-select-placeholder="Select a framework"
20
- data-kt-select-config='{
21
- "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
22
- }'
23
- >
24
- <option value="react">React</option>
25
- <option value="nextjs">Next.js</option>
26
- <option value="angular">Angular</option>
27
- <option value="vue">Vue</option>
28
- <option value="svelte">Svelte</option>
29
- <option value="ember">Ember</option>
30
- <option value="nuxt">Nuxt.js</option>
31
- <option value="remix">Remix</option>
32
- </select>
33
- </div>
34
- </form>
35
- </div>
36
- <script src="../../dist/ktui.js"></script>
37
- </body>
38
-
39
- </html>
package/examples/select/country.html DELETED
@@ -1,43 +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 country..."
23
- data-kt-select-config='{
24
- "displayTemplate": "<div class=\"flex items-center leading-none gap-2\">{{flag}}<span class=\"text-foreground\">{{text}}</span></div>",
25
- "optionTemplate": "<div class=\"flex items-center leading-none gap-2\">{{flag}} <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
26
- }'
27
- >
28
- <option value="usa" data-kt-select-option='{"flag": "🇺🇸"}'>USA</option>
29
- <option value="germany" data-kt-select-option='{"flag": "🇩🇪"}'>Germany</option>
30
- <option value="italy" data-kt-select-option='{"flag": "🇮🇹"}'>Italy</option>
31
- <option value="france" data-kt-select-option='{"flag": "🇫🇷"}'>France</option>
32
- <option value="spain" data-kt-select-option='{"flag": "🇪🇸"}'>Spain</option>
33
- <option value="canada" data-kt-select-option='{"flag": "🇨🇦"}'>Canada</option>
34
- <option value="australia" data-kt-select-option='{"flag": "🇦🇺"}'>Australia</option>
35
- <option value="japan" data-kt-select-option='{"flag": "🇯🇵"}'>Japan</option>
36
- </select>
37
- </div>
38
- </form>
39
- </div>
40
- <script src="../../dist/ktui.js"></script>
41
- </body>
42
-
43
- </html>
package/examples/select/dark-mode.html DELETED
@@ -1,93 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" class="dark">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Dark Mode Multi-Select Test</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- <script>
10
- // Toggle dark mode for testing
11
- function toggleDarkMode() {
12
- const html = document.documentElement;
13
- const isDark = html.classList.toggle('dark');
14
- const button = document.getElementById('darkModeToggle');
15
- button.textContent = isDark ? 'Light Mode' : 'Dark Mode';
16
- }
17
-
18
- // Set initial button text on load
19
- window.addEventListener('DOMContentLoaded', () => {
20
- const button = document.getElementById('darkModeToggle');
21
- const isDark = document.documentElement.classList.contains('dark');
22
- button.textContent = isDark ? 'Light Mode' : 'Dark Mode';
23
- });
24
- </script>
25
- </head>
26
-
27
- <body class="bg-gray-50 dark:bg-gray-900 min-h-screen p-4 transition-colors duration-200">
28
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900/50 p-8 w-full max-w-md mt-6 mx-auto border border-gray-200 dark:border-gray-700">
29
- <div class="mb-6 flex items-center justify-between">
30
- <h1 class="text-xl font-bold text-gray-900 dark:text-white">Dark Mode Test</h1>
31
- <button
32
- id="darkModeToggle"
33
- onclick="toggleDarkMode()"
34
- class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 font-medium">
35
- Dark Mode
36
- </button>
37
- </div>
38
-
39
- <form class="flex flex-col gap-8">
40
- <!-- Multi-select with tags -->
41
- <div>
42
- <label class="block mb-3 font-semibold text-gray-800 dark:text-gray-200" for="select-team">
43
- Team Members (Tags)
44
- </label>
45
- <select
46
- class="kt-select"
47
- data-kt-select
48
- data-kt-select-placeholder="Select team members..."
49
- data-kt-select-multiple="true"
50
- data-kt-select-tags="true"
51
- data-kt-select-pre-selected="jenny,mike"
52
- data-kt-select-config='{
53
- "showSelectedCount": true,
54
- "enableSelectAll": true
55
- }'>
56
- <option value="jenny">Jenny Wilson</option>
57
- <option value="mike">Mike Johnson</option>
58
- <option value="david">David Brown</option>
59
- <option value="sarah">Sarah Davis</option>
60
- <option value="alex">Alex Thompson</option>
61
- <option value="lisa">Lisa Anderson</option>
62
- </select>
63
- </div>
64
-
65
- <!-- Multi-select without tags -->
66
- <div>
67
- <label class="block mb-3 font-semibold text-gray-800 dark:text-gray-200" for="select-cities">
68
- Cities (Multiple)
69
- </label>
70
- <select
71
- class="kt-select"
72
- data-kt-select="true"
73
- data-kt-select-multiple="true"
74
- data-kt-select-max-selections="3"
75
- data-kt-select-placeholder="Select cities..."
76
- data-kt-select-pre-selected="london,paris">
77
- <option value="amsterdam">Amsterdam</option>
78
- <option value="barcelona">Barcelona</option>
79
- <option value="london">London</option>
80
- <option value="new-york">New York</option>
81
- <option value="paris">Paris</option>
82
- <option value="rome">Rome</option>
83
- <option value="tokyo">Tokyo</option>
84
- </select>
85
- </div>
86
- </form>
87
-
88
- </div>
89
- <script src="../../dist/ktui.js"></script>
90
- </body>
91
-
92
- </html>
93
-
package/examples/select/description.html DELETED
@@ -1,53 +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>Description</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">Description</label>
16
-
17
- <select
18
- class="kt-select"
19
- data-kt-select="true"
20
- data-kt-select-placeholder="Select an option..."
21
- data-kt-select-config='{
22
- "optionTemplate": "<div class=\"flex items-center grow gap-2\"><div class=\"flex flex-col gap-0.5\"><span class=\"font-semibold text-foreground\">{{text}}</span><span class=\"text-xs text-muted-foreground\">{{desc}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
23
- }'
24
- >
25
- <option value="full_access"
26
- data-kt-select-option='{"desc": "Can modify and delete"}'>
27
- Full access
28
- </option>
29
- <option value="read_write"
30
- data-kt-select-option='{"desc": "Can read and write"}'>
31
- Read and write
32
- </option>
33
- <option value="read_only" selected
34
- data-kt-select-option='{"desc": "Can only read"}'>
35
- Read only
36
- </option>
37
- <option value="view_only"
38
- data-kt-select-option='{"desc": "Can only view"}'>
39
- View only
40
- </option>
41
- <option value="no_access"
42
- data-kt-select-option='{"desc": "No access"}'>
43
- No access
44
- </option>
45
- </select>
46
-
47
- </div>
48
- </form>
49
- </div>
50
- <script src="../../dist/ktui.js"></script>
51
- </body>
52
-
53
- </html>
package/examples/select/disable-option.html DELETED
@@ -1,37 +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>Disable Option</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">Disable Option</label>
16
-
17
- <select
18
- class="kt-select"
19
- data-kt-select="true"
20
- data-kt-select-placeholder="Select a framework...">
21
- <option value="react">React</option>
22
- <option value="nextjs" disabled>Next.js</option>
23
- <option value="angular">Angular</option>
24
- <option value="vue">Vue</option>
25
- <option value="svelte" disabled>Svelte</option>
26
- <option value="ember">Ember</option>
27
- <option value="nuxt">Nuxt.js</option>
28
- <option value="remix">Remix</option>
29
- </select>
30
-
31
- </div>
32
- </form>
33
- </div>
34
- <script src="../../dist/ktui.js"></script>
35
- </body>
36
-
37
- </html>
package/examples/select/disable-select.html DELETED
@@ -1,35 +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>Disable Select</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">Disable Select</label>
16
-
17
- <select
18
- disabled
19
- class="kt-select"
20
- data-kt-select="true"
21
- data-kt-select-disabled="true"
22
- data-kt-select-placeholder="Select a libray...">
23
- <option value="reui">ReUI </option>
24
- <option value="ktui" disabled>KtUI</option>
25
- <option value="metronic">Metronic</option>
26
- <option value="keenthemes">Keenthemes</option>
27
- </select>
28
-
29
- </div>
30
- </form>
31
- </div>
32
- <script src="../../dist/ktui.js"></script>
33
- </body>
34
-
35
- </html>
package/examples/select/dropdowncontainer.html DELETED
@@ -1,111 +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>Dropdown Container Test (Issue #52)</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen">
12
- <!-- Test 1: Default Placement (Control) -->
13
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto mb-6">
14
- <form class="flex flex-col gap-6">
15
- <div>
16
- <label class="block mb-2 font-medium text-gray-700">Test 1: Default (No dropdownContainer)</label>
17
- <p class="text-sm text-gray-500 mb-3">Expected: Selected class updates correctly</p>
18
- <select
19
- id="test-default"
20
- class="kt-select"
21
- data-kt-select="true"
22
- data-kt-select-placeholder="Select a framework...">
23
- <option value="react">React</option>
24
- <option value="nextjs">Next.js</option>
25
- <option value="angular">Angular</option>
26
- <option value="vue">Vue</option>
27
- <option value="svelte">Svelte</option>
28
- </select>
29
- </div>
30
- </form>
31
- </div>
32
-
33
- <!-- Test 2: dropdownContainer: "body" (Issue #52) -->
34
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
35
- <form class="flex flex-col gap-6">
36
- <div>
37
- <label class="block mb-2 font-medium text-gray-700">Test 2: dropdownContainer: "body"</label>
38
- <p class="text-sm text-gray-500 mb-3">
39
- Expected: Selected class updates correctly<br>
40
- </p>
41
- <select
42
- id="test-body"
43
- class="kt-select"
44
- data-kt-select="true"
45
- data-kt-select-placeholder="Select a language..."
46
- data-kt-select-config='{
47
- "dropdownContainer": "body"
48
- }'>
49
- <option value="javascript">JavaScript</option>
50
- <option value="typescript">TypeScript</option>
51
- <option value="python">Python</option>
52
- <option value="rust">Rust</option>
53
- <option value="go">Go</option>
54
- </select>
55
- </div>
56
- </form>
57
- </div>
58
-
59
- <!-- Test 3: Custom Container -->
60
- <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mx-auto mb-6">
61
- <form class="flex flex-col gap-6">
62
- <div>
63
- <label class="block mb-2 font-medium text-gray-700">Test 3: dropdownContainer: "#custom-container"</label>
64
- <p class="text-sm text-gray-500 mb-3">Expected: Selected class updates correctly</p>
65
- <select
66
- id="test-custom"
67
- class="kt-select"
68
- data-kt-select="true"
69
- data-kt-select-placeholder="Select a database..."
70
- data-kt-select-config='{
71
- "dropdownContainer": "#custom-container"
72
- }'>
73
- <option value="postgresql">PostgreSQL</option>
74
- <option value="mysql">MySQL</option>
75
- <option value="mongodb">MongoDB</option>
76
- <option value="redis">Redis</option>
77
- <option value="sqlite">SQLite</option>
78
- </select>
79
- </div>
80
- </form>
81
- </div>
82
-
83
- <!-- Custom container element -->
84
- <div id="custom-container"></div>
85
-
86
- <script src="../../dist/ktui.js"></script>
87
- <script>
88
- // Add console logging to help with debugging
89
- document.addEventListener('DOMContentLoaded', function() {
90
- // Add change listeners to log selected class status
91
- ['test-default', 'test-body', 'test-custom'].forEach(id => {
92
- const select = document.getElementById(id);
93
- if (select) {
94
- select.addEventListener('change', function() {
95
- setTimeout(() => {
96
- const dropdown = select.nextElementSibling?.querySelector('[data-kt-select-dropdown]');
97
- if (dropdown) {
98
- const options = dropdown.querySelectorAll('[data-kt-select-option]');
99
- const selectedCount = dropdown.querySelectorAll('[data-kt-select-option].selected').length;
100
- console.log(`${id}: Found ${options.length} options, ${selectedCount} with .selected class`);
101
- }
102
- }, 100);
103
- });
104
- }
105
- });
106
- });
107
- </script>
108
- </body>
109
-
110
- </html>
111
-