@keenthemes/ktui 1.0.10 → 1.0.12

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 (139) hide show
  1. package/README.md +2 -2
  2. package/dist/ktui.js +1283 -1100
  3. package/dist/ktui.min.js +1 -1
  4. package/dist/ktui.min.js.map +1 -1
  5. package/examples/select/basic-usage.html +43 -0
  6. package/examples/select/combobox-icons.html +58 -0
  7. package/examples/select/combobox.html +46 -0
  8. package/examples/select/description.html +69 -0
  9. package/examples/select/disable-option.html +43 -0
  10. package/examples/select/disable-select.html +34 -0
  11. package/examples/select/icon-description.html +56 -0
  12. package/examples/select/icon-multiple.html +58 -0
  13. package/examples/select/icon.html +58 -0
  14. package/examples/select/max-selection.html +39 -0
  15. package/examples/select/modal.html +70 -0
  16. package/examples/select/multiple.html +42 -0
  17. package/examples/select/placeholder.html +43 -0
  18. package/examples/select/remote-data.html +32 -0
  19. package/examples/select/search.html +49 -0
  20. package/examples/select/tags-icons.html +58 -0
  21. package/examples/select/tags-selected.html +59 -0
  22. package/examples/select/tags.html +58 -0
  23. package/examples/select/template-customization.html +65 -0
  24. package/examples/select/test.html +94 -0
  25. package/examples/toast/example.html +427 -0
  26. package/lib/cjs/components/component.js +1 -1
  27. package/lib/cjs/components/component.js.map +1 -1
  28. package/lib/cjs/components/datatable/datatable.js +22 -6
  29. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  30. package/lib/cjs/components/modal/modal.js +0 -4
  31. package/lib/cjs/components/modal/modal.js.map +1 -1
  32. package/lib/cjs/components/select/combobox.js +38 -120
  33. package/lib/cjs/components/select/combobox.js.map +1 -1
  34. package/lib/cjs/components/select/config.js +4 -16
  35. package/lib/cjs/components/select/config.js.map +1 -1
  36. package/lib/cjs/components/select/dropdown.js +10 -49
  37. package/lib/cjs/components/select/dropdown.js.map +1 -1
  38. package/lib/cjs/components/select/index.js +2 -1
  39. package/lib/cjs/components/select/index.js.map +1 -1
  40. package/lib/cjs/components/select/option.js +21 -4
  41. package/lib/cjs/components/select/option.js.map +1 -1
  42. package/lib/cjs/components/select/remote.js +1 -37
  43. package/lib/cjs/components/select/remote.js.map +1 -1
  44. package/lib/cjs/components/select/search.js +11 -41
  45. package/lib/cjs/components/select/search.js.map +1 -1
  46. package/lib/cjs/components/select/select.js +213 -326
  47. package/lib/cjs/components/select/select.js.map +1 -1
  48. package/lib/cjs/components/select/tags.js +39 -31
  49. package/lib/cjs/components/select/tags.js.map +1 -1
  50. package/lib/cjs/components/select/templates.js +120 -179
  51. package/lib/cjs/components/select/templates.js.map +1 -1
  52. package/lib/cjs/components/select/types.js +0 -12
  53. package/lib/cjs/components/select/types.js.map +1 -1
  54. package/lib/cjs/components/select/utils.js +204 -257
  55. package/lib/cjs/components/select/utils.js.map +1 -1
  56. package/lib/cjs/components/toast/index.js +10 -0
  57. package/lib/cjs/components/toast/index.js.map +1 -0
  58. package/lib/cjs/components/toast/toast.js +543 -0
  59. package/lib/cjs/components/toast/toast.js.map +1 -0
  60. package/lib/cjs/components/toast/types.js +7 -0
  61. package/lib/cjs/components/toast/types.js.map +1 -0
  62. package/lib/cjs/helpers/dom.js +24 -0
  63. package/lib/cjs/helpers/dom.js.map +1 -1
  64. package/lib/cjs/index.js +5 -1
  65. package/lib/cjs/index.js.map +1 -1
  66. package/lib/esm/components/component.js +1 -1
  67. package/lib/esm/components/component.js.map +1 -1
  68. package/lib/esm/components/datatable/datatable.js +22 -6
  69. package/lib/esm/components/datatable/datatable.js.map +1 -1
  70. package/lib/esm/components/modal/modal.js +0 -4
  71. package/lib/esm/components/modal/modal.js.map +1 -1
  72. package/lib/esm/components/select/combobox.js +39 -121
  73. package/lib/esm/components/select/combobox.js.map +1 -1
  74. package/lib/esm/components/select/config.js +3 -15
  75. package/lib/esm/components/select/config.js.map +1 -1
  76. package/lib/esm/components/select/dropdown.js +10 -49
  77. package/lib/esm/components/select/dropdown.js.map +1 -1
  78. package/lib/esm/components/select/index.js +1 -1
  79. package/lib/esm/components/select/index.js.map +1 -1
  80. package/lib/esm/components/select/option.js +21 -4
  81. package/lib/esm/components/select/option.js.map +1 -1
  82. package/lib/esm/components/select/remote.js +1 -37
  83. package/lib/esm/components/select/remote.js.map +1 -1
  84. package/lib/esm/components/select/search.js +12 -42
  85. package/lib/esm/components/select/search.js.map +1 -1
  86. package/lib/esm/components/select/select.js +214 -327
  87. package/lib/esm/components/select/select.js.map +1 -1
  88. package/lib/esm/components/select/tags.js +39 -31
  89. package/lib/esm/components/select/tags.js.map +1 -1
  90. package/lib/esm/components/select/templates.js +119 -178
  91. package/lib/esm/components/select/templates.js.map +1 -1
  92. package/lib/esm/components/select/types.js +1 -11
  93. package/lib/esm/components/select/types.js.map +1 -1
  94. package/lib/esm/components/select/utils.js +201 -255
  95. package/lib/esm/components/select/utils.js.map +1 -1
  96. package/lib/esm/components/toast/index.js +6 -0
  97. package/lib/esm/components/toast/index.js.map +1 -0
  98. package/lib/esm/components/toast/toast.js +540 -0
  99. package/lib/esm/components/toast/toast.js.map +1 -0
  100. package/lib/esm/components/toast/types.js +6 -0
  101. package/lib/esm/components/toast/types.js.map +1 -0
  102. package/lib/esm/helpers/dom.js +24 -0
  103. package/lib/esm/helpers/dom.js.map +1 -1
  104. package/lib/esm/index.js +3 -0
  105. package/lib/esm/index.js.map +1 -1
  106. package/package.json +8 -6
  107. package/src/components/alert/alert.css +20 -2
  108. package/src/components/badge/badge.css +5 -0
  109. package/src/components/component.ts +4 -0
  110. package/src/components/datatable/datatable.ts +24 -16
  111. package/src/components/drawer/drawer.css +1 -1
  112. package/src/components/input/input.css +3 -1
  113. package/src/components/link/link.css +2 -2
  114. package/src/components/modal/modal.css +18 -2
  115. package/src/components/modal/modal.ts +0 -5
  116. package/src/components/select/combobox.ts +42 -149
  117. package/src/components/select/config.ts +38 -33
  118. package/src/components/select/dropdown.ts +8 -55
  119. package/src/components/select/index.ts +1 -1
  120. package/src/components/select/option.ts +28 -7
  121. package/src/components/select/remote.ts +2 -42
  122. package/src/components/select/search.ts +14 -54
  123. package/src/components/select/select.css +49 -0
  124. package/src/components/select/select.ts +231 -437
  125. package/src/components/select/tags.ts +40 -37
  126. package/src/components/select/templates.ts +166 -303
  127. package/src/components/select/types.ts +0 -10
  128. package/src/components/select/utils.ts +214 -304
  129. package/src/components/table/table.css +1 -1
  130. package/src/components/textarea/textarea.css +2 -1
  131. package/src/components/toast/index.ts +7 -0
  132. package/src/components/toast/toast.css +60 -0
  133. package/src/components/toast/toast.ts +605 -0
  134. package/src/components/toast/types.ts +169 -0
  135. package/src/helpers/dom.ts +30 -0
  136. package/src/index.ts +4 -0
  137. package/styles/main.css +3 -0
  138. package/styles/vars.css +138 -0
  139. package/styles.css +1 -0
package/examples/select/basic-usage.html ADDED
@@ -0,0 +1,43 @@
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
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select="true"
20
+ data-kt-select-wrapper-class="foo boo"
21
+ data-kt-select-placeholder="Select a field type..."
22
+ data-kt-select-config='{
23
+ "optionTemplate": "{{text}} <i class=\"me-auto ki-filled ki-check text-primary size-sm hidden kt-select-option-selected:block\"></i>",
24
+ "optionClass": "kt-select-option"
25
+ }'
26
+ >
27
+ <option value="name">Name</option>
28
+ <option value="email">Email Address</option>
29
+ <option value="phone">Phone Number</option>
30
+ <option value="address">Physical Address</option>
31
+ <option value="username">Username</option>
32
+ <option value="password">Password</option>
33
+ <option value="company">Company Name</option>
34
+ <option value="website">Website URL</option>
35
+ </select>
36
+
37
+ </div>
38
+ </form>
39
+ </div>
40
+ <script src="../../dist/ktui.js"></script>
41
+ </body>
42
+
43
+ </html>
package/examples/select/combobox-icons.html ADDED
@@ -0,0 +1,58 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Combobox 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">Combobox Icons</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-combobox="true"
21
+ data-kt-select-placeholder="Type or select a country..."
22
+ data-kt-select-config='{
23
+ "displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"font-semibold text-gray-900\">{{text}}</span></div>",
24
+ "displayClass": "kt-select-display",
25
+ "displayToggle": true,
26
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
27
+ "optionClass": "kt-select-option"
28
+ }'>
29
+ <option value="us"
30
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
31
+ United States</option>
32
+ <option value="de"
33
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
34
+ Germany</option>
35
+ <option value="it"
36
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
37
+ Italy</option>
38
+ <option value="fr"
39
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
40
+ France</option>
41
+ <option value="es"
42
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
43
+ Spain</option>
44
+ <option value="jp"
45
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
46
+ Japan</option>
47
+ <option value="ru"
48
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
49
+ Russia</option>
50
+ </select>
51
+
52
+ </div>
53
+ </form>
54
+ </div>
55
+ <script src="../../dist/ktui.js"></script>
56
+ </body>
57
+
58
+ </html>
package/examples/select/combobox.html ADDED
@@ -0,0 +1,46 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Combobox</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Combobox</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-combobox="true">
21
+ <option value="name">Name</option>
22
+ <option value="email">Email Address</option>
23
+ <option value="phone">Phone Number</option>
24
+ <option value="address">Physical Address</option>
25
+ <option value="username">Username</option>
26
+ <option value="password">Password</option>
27
+ <option value="birthday">Date of Birth</option>
28
+ <option value="gender">Gender</option>
29
+ <option value="country">Country</option>
30
+ <option value="city">City</option>
31
+ <option value="language">Language</option>
32
+ <option value="timezone">Timezone</option>
33
+ <option value="avatar">Profile Picture</option>
34
+ <option value="bio">Biography</option>
35
+ <option value="company">Company</option>
36
+ <option value="position">Job Position</option>
37
+ <option value="department">Department</option>
38
+ </select>
39
+
40
+ </div>
41
+ </form>
42
+ </div>
43
+ <script src="../../dist/ktui.js"></script>
44
+ </body>
45
+
46
+ </html>
package/examples/select/description.html ADDED
@@ -0,0 +1,69 @@
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
20
+ data-kt-select-placeholder="Select with description..."
21
+ data-kt-select-config='{
22
+ "displayTemplate": "<div class=\"flex flex-col\"><span class=\"font-semibold text-gray-900\">{{text}}</span><span class=\"text-xs text-gray-500\">Your selection</span></div>",
23
+ "optionTemplate": "<div class=\"flex flex-col\"><span class=\"font-semibold text-gray-900\">{{text}}</span><span class=\"text-xs text-gray-500\">{{desc}}</span></div>"
24
+ }'>
25
+ <option value="us"
26
+ data-kt-select-option='{"desc": "MySQL is a relational database management system"}'>
27
+ MySQL
28
+ </option>
29
+ <option value="postgres"
30
+ data-kt-select-option='{"desc": "PostgreSQL is a powerful object-relational database system"}'>
31
+ PostgreSQL
32
+ </option>
33
+ <option value="mongodb"
34
+ data-kt-select-option='{"desc": "MongoDB is a NoSQL database that uses JSON-like documents with optional schemas"}'>
35
+ MongoDB
36
+ </option>
37
+ <option value="redis"
38
+ data-kt-select-option='{"desc": "Redis is an in-memory data structure store"}'>
39
+ Redis
40
+ </option>
41
+ <option value="sqlite"
42
+ data-kt-select-option='{"desc": "SQLite is a lightweight, disk-based database"}'>
43
+ SQLite
44
+ </option>
45
+ <option value="mariadb"
46
+ data-kt-select-option='{"desc": "MariaDB is a community-driven fork of MySQL"}'>
47
+ MariaDB
48
+ </option>
49
+ <option value="mssql"
50
+ data-kt-select-option='{"desc": "Microsoft SQL Server is a relational database management system"}'>
51
+ Microsoft SQL Server
52
+ </option>
53
+ <option value="oracle"
54
+ data-kt-select-option='{"desc": "Oracle is a powerful, object-oriented database management system"}'>
55
+ Oracle
56
+ </option>
57
+ <option value="db2"
58
+ data-kt-select-option='{"desc": "IBM DB2 is a relational database management system"}'>
59
+ IBM DB2
60
+ </option>
61
+ </select>
62
+
63
+ </div>
64
+ </form>
65
+ </div>
66
+ <script src="../../dist/ktui.js"></script>
67
+ </body>
68
+
69
+ </html>
package/examples/select/disable-option.html ADDED
@@ -0,0 +1,43 @@
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
20
+ data-kt-select-placeholder="Select an available field...">
21
+ <option value="name" disabled>
22
+ Name (Disabled)
23
+ </option>
24
+ <option value="email" disabled>
25
+ Email Address (Disabled)
26
+ </option>
27
+ <option value="phone">Phone Number</option>
28
+ <option value="address">Physical Address</option>
29
+ <option value="username">Username</option>
30
+ <option value="password" disabled>
31
+ Password (Disabled)
32
+ </option>
33
+ <option value="company">Company Name</option>
34
+ <option value="website">Website URL</option>
35
+ </select>
36
+
37
+ </div>
38
+ </form>
39
+ </div>
40
+ <script src="../../dist/ktui.js"></script>
41
+ </body>
42
+
43
+ </html>
package/examples/select/disable-select.html ADDED
@@ -0,0 +1,34 @@
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
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-disabled="true"
21
+ data-kt-select-placeholder="This select component is disabled">
22
+ <option value="name">Name</option>
23
+ <option value="email">Email Address</option>
24
+ <option value="phone">Phone Number</option>
25
+ <option value="address">Physical Address</option>
26
+ </select>
27
+
28
+ </div>
29
+ </form>
30
+ </div>
31
+ <script src="../../dist/ktui.js"></script>
32
+ </body>
33
+
34
+ </html>
package/examples/select/icon-description.html ADDED
@@ -0,0 +1,56 @@
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>Icon 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">Icon Description</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-placeholder="Select with description..."
21
+ data-kt-select-config='{
22
+ "displayTemplate": "<div class=\"flex items-start gap-3\">{{icon}}<div class=\"flex flex-col\"><span class=\"font-semibold text-gray-900 leading-tight\">{{text}}</span><span class=\"text-xs text-gray-500 leading-tight\">{{desc}}</span></div></div>",
23
+ "displayClass": "kt-select-display",
24
+ "displayToggle": true,
25
+ "optionTemplate": "<div class=\"flex items-start gap-3\">{{icon}}<div class=\"flex flex-col\"><span class=\"text-gray-800 leading-tight\">{{text}}</span><span class=\"text-xs text-gray-500 leading-tight\">{{desc}}</span></div></div>",
26
+ "optionClass": "kt-select-option"
27
+ }'>
28
+ <option value="mysql"
29
+ data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/mysql/4479A1\" class=\"w-6 h-6\" />", "desc": "MySQL is a relational database management system"}'>
30
+ MySQL
31
+ </option>
32
+ <option value="postgres"
33
+ data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/postgresql/4169E1\" class=\"w-6 h-6\" />", "desc": "PostgreSQL is a powerful object-relational database system"}'>
34
+ PostgreSQL
35
+ </option>
36
+ <option value="mongodb"
37
+ data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/mongodb/47A248\" class=\"w-6 h-6\" />", "desc": "MongoDB is a NoSQL database that uses JSON-like documents with optional schemas"}'>
38
+ MongoDB
39
+ </option>
40
+ <option value="redis"
41
+ data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/redis/DC382D\" class=\"w-6 h-6\" />", "desc": "Redis is an in-memory data structure store"}'>
42
+ Redis
43
+ </option>
44
+ <option value="sqlite"
45
+ data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/sqlite/003B57\" class=\"w-6 h-6\" />", "desc": "SQLite is a lightweight, disk-based database"}'>
46
+ SQLite
47
+ </option>
48
+ </select>
49
+
50
+ </div>
51
+ </form>
52
+ </div>
53
+ <script src="../../dist/ktui.js"></script>
54
+ </body>
55
+
56
+ </html>
package/examples/select/icon-multiple.html ADDED
@@ -0,0 +1,58 @@
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>Icon 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">Icon Multiple</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" data-kt-select-config='{
22
+ "displaySeparator": " / ",
23
+ "displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"font-semibold text-gray-900\">{{text}}</span></div>",
24
+ "displayClass": "kt-select-display",
25
+ "displayToggle": true,
26
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
27
+ "optionClass": "kt-select-option"
28
+ }'>
29
+ <option value="us"
30
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
31
+ United States</option>
32
+ <option value="de"
33
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
34
+ Germany</option>
35
+ <option value="it"
36
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
37
+ Italy</option>
38
+ <option value="fr"
39
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
40
+ France</option>
41
+ <option value="es"
42
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
43
+ Spain</option>
44
+ <option value="jp"
45
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
46
+ Japan</option>
47
+ <option value="ru"
48
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
49
+ Russia</option>
50
+ </select>
51
+
52
+ </div>
53
+ </form>
54
+ </div>
55
+ <script src="../../dist/ktui.js"></script>
56
+ </body>
57
+
58
+ </html>
package/examples/select/icon.html ADDED
@@ -0,0 +1,58 @@
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>Icon</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">Icon</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-enable-search="true"
21
+ data-kt-select-placeholder="Type or select a country..."
22
+ data-kt-select-config='{
23
+ "displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"font-semibold text-gray-900\">{{text}}</span></div>",
24
+ "displayClass": "kt-select-display",
25
+ "displayToggle": true,
26
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
27
+ "optionClass": "kt-select-option"
28
+ }'>
29
+ <option value="us"
30
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
31
+ United States</option>
32
+ <option value="de"
33
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
34
+ Germany</option>
35
+ <option value="it"
36
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
37
+ Italy</option>
38
+ <option value="fr"
39
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
40
+ France</option>
41
+ <option value="es"
42
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
43
+ Spain</option>
44
+ <option value="jp"
45
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
46
+ Japan</option>
47
+ <option value="ru"
48
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
49
+ Russia</option>
50
+ </select>
51
+
52
+ </div>
53
+ </form>
54
+ </div>
55
+ <script src="../../dist/ktui.js"></script>
56
+ </body>
57
+
58
+ </html>
package/examples/select/max-selection.html ADDED
@@ -0,0 +1,39 @@
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>Max Selection</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">Max Selection</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-multiple="true"
21
+ data-kt-select-max-selections="3"
22
+ data-kt-select-placeholder="Select up to 3 options">
23
+ <option value="name">Name</option>
24
+ <option value="email">Email Address</option>
25
+ <option value="phone">Phone Number</option>
26
+ <option value="address">Physical Address</option>
27
+ <option value="username">Username</option>
28
+ <option value="password">Password</option>
29
+ <option value="company">Company Name</option>
30
+ <option value="website">Website URL</option>
31
+ </select>
32
+
33
+ </div>
34
+ </form>
35
+ </div>
36
+ <script src="../../dist/ktui.js"></script>
37
+ </body>
38
+
39
+ </html>
package/examples/select/modal.html ADDED
@@ -0,0 +1,70 @@
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 id="openModalBtn" type="button"
19
+ 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">Open
20
+ Select Modal</button>
21
+
22
+ </div>
23
+ </form>
24
+ </div>
25
+
26
+ <!-- Modal -->
27
+ <div id="selectModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 hidden">
28
+ <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 relative">
29
+ <button id="closeModalBtn"
30
+ class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 focus:outline-none"
31
+ aria-label="Close Modal">&times;</button>
32
+ <h2 class="text-lg font-semibold mb-4">Select a Field</h2>
33
+ <select class="w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200"
34
+ data-kt-select
35
+ data-kt-select-search="true"
36
+ data-kt-select-placeholder="Select a field type...">
37
+ <option value="name">Name</option>
38
+ <option value="email">Email Address</option>
39
+ <option value="phone">Phone Number</option>
40
+ <option value="address">Physical Address</option>
41
+ <option value="username">Username</option>
42
+ <option value="password">Password</option>
43
+ <option value="company">Company Name</option>
44
+ <option value="website">Website URL</option>
45
+ <option value="description">Description</option>
46
+ <option value="birthday">Date of Birth</option>
47
+ <option value="country">Country</option>
48
+ <option value="state">State/Province</option>
49
+ <option value="zipcode">Zip/Postal Code</option>
50
+ </select>
51
+ </div>
52
+ </div>
53
+ <script>
54
+ document.getElementById('openModalBtn').addEventListener('click', function () {
55
+ document.getElementById('selectModal').classList.remove('hidden');
56
+ });
57
+ document.getElementById('closeModalBtn').addEventListener('click', function () {
58
+ document.getElementById('selectModal').classList.add('hidden');
59
+ });
60
+ // Optional: Close modal on backdrop click
61
+ document.getElementById('selectModal').addEventListener('click', function (e) {
62
+ if (e.target === this) {
63
+ this.classList.add('hidden');
64
+ }
65
+ });
66
+ </script>
67
+ <script src="../../dist/ktui.js"></script>
68
+ </body>
69
+
70
+ </html>
package/examples/select/multiple.html ADDED
@@ -0,0 +1,42 @@
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
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-multiple="true"
21
+ data-kt-select-placeholder="Select multiple fields..."
22
+ data-kt-select-config='{
23
+ "displaySeparator": " | ",
24
+ "displayTemplate": "<span class=\"text-gray-800 leading-tight\">{{selectedTexts}}</span>"
25
+ }'>
26
+ <option value="name">Name</option>
27
+ <option value="email">Email Address</option>
28
+ <option value="phone">Phone Number</option>
29
+ <option value="address">Physical Address</option>
30
+ <option value="username">Username</option>
31
+ <option value="password">Password</option>
32
+ <option value="company">Company Name</option>
33
+ <option value="website">Website URL</option>
34
+ </select>
35
+
36
+ </div>
37
+ </form>
38
+ </div>
39
+ <script src="../../dist/ktui.js"></script>
40
+ </body>
41
+
42
+ </html>