@keenthemes/ktui 1.0.11 → 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 (129) hide show
  1. package/dist/ktui.js +1283 -1096
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/examples/select/basic-usage.html +43 -0
  5. package/examples/select/combobox-icons.html +58 -0
  6. package/examples/select/combobox.html +46 -0
  7. package/examples/select/description.html +69 -0
  8. package/examples/select/disable-option.html +43 -0
  9. package/examples/select/disable-select.html +34 -0
  10. package/examples/select/icon-description.html +56 -0
  11. package/examples/select/icon-multiple.html +58 -0
  12. package/examples/select/icon.html +58 -0
  13. package/examples/select/max-selection.html +39 -0
  14. package/examples/select/modal.html +70 -0
  15. package/examples/select/multiple.html +42 -0
  16. package/examples/select/placeholder.html +43 -0
  17. package/examples/select/remote-data.html +32 -0
  18. package/examples/select/search.html +49 -0
  19. package/examples/select/tags-icons.html +58 -0
  20. package/examples/select/tags-selected.html +59 -0
  21. package/examples/select/tags.html +58 -0
  22. package/examples/select/template-customization.html +65 -0
  23. package/examples/select/test.html +94 -0
  24. package/examples/toast/example.html +427 -0
  25. package/lib/cjs/components/component.js +1 -1
  26. package/lib/cjs/components/component.js.map +1 -1
  27. package/lib/cjs/components/datatable/datatable.js +22 -6
  28. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  29. package/lib/cjs/components/select/combobox.js +38 -120
  30. package/lib/cjs/components/select/combobox.js.map +1 -1
  31. package/lib/cjs/components/select/config.js +4 -16
  32. package/lib/cjs/components/select/config.js.map +1 -1
  33. package/lib/cjs/components/select/dropdown.js +10 -49
  34. package/lib/cjs/components/select/dropdown.js.map +1 -1
  35. package/lib/cjs/components/select/index.js +2 -1
  36. package/lib/cjs/components/select/index.js.map +1 -1
  37. package/lib/cjs/components/select/option.js +21 -4
  38. package/lib/cjs/components/select/option.js.map +1 -1
  39. package/lib/cjs/components/select/remote.js +1 -37
  40. package/lib/cjs/components/select/remote.js.map +1 -1
  41. package/lib/cjs/components/select/search.js +11 -41
  42. package/lib/cjs/components/select/search.js.map +1 -1
  43. package/lib/cjs/components/select/select.js +213 -326
  44. package/lib/cjs/components/select/select.js.map +1 -1
  45. package/lib/cjs/components/select/tags.js +39 -31
  46. package/lib/cjs/components/select/tags.js.map +1 -1
  47. package/lib/cjs/components/select/templates.js +120 -179
  48. package/lib/cjs/components/select/templates.js.map +1 -1
  49. package/lib/cjs/components/select/types.js +0 -12
  50. package/lib/cjs/components/select/types.js.map +1 -1
  51. package/lib/cjs/components/select/utils.js +204 -257
  52. package/lib/cjs/components/select/utils.js.map +1 -1
  53. package/lib/cjs/components/toast/index.js +10 -0
  54. package/lib/cjs/components/toast/index.js.map +1 -0
  55. package/lib/cjs/components/toast/toast.js +543 -0
  56. package/lib/cjs/components/toast/toast.js.map +1 -0
  57. package/lib/cjs/components/toast/types.js +7 -0
  58. package/lib/cjs/components/toast/types.js.map +1 -0
  59. package/lib/cjs/helpers/dom.js +24 -0
  60. package/lib/cjs/helpers/dom.js.map +1 -1
  61. package/lib/cjs/index.js +5 -1
  62. package/lib/cjs/index.js.map +1 -1
  63. package/lib/esm/components/component.js +1 -1
  64. package/lib/esm/components/component.js.map +1 -1
  65. package/lib/esm/components/datatable/datatable.js +22 -6
  66. package/lib/esm/components/datatable/datatable.js.map +1 -1
  67. package/lib/esm/components/select/combobox.js +39 -121
  68. package/lib/esm/components/select/combobox.js.map +1 -1
  69. package/lib/esm/components/select/config.js +3 -15
  70. package/lib/esm/components/select/config.js.map +1 -1
  71. package/lib/esm/components/select/dropdown.js +10 -49
  72. package/lib/esm/components/select/dropdown.js.map +1 -1
  73. package/lib/esm/components/select/index.js +1 -1
  74. package/lib/esm/components/select/index.js.map +1 -1
  75. package/lib/esm/components/select/option.js +21 -4
  76. package/lib/esm/components/select/option.js.map +1 -1
  77. package/lib/esm/components/select/remote.js +1 -37
  78. package/lib/esm/components/select/remote.js.map +1 -1
  79. package/lib/esm/components/select/search.js +12 -42
  80. package/lib/esm/components/select/search.js.map +1 -1
  81. package/lib/esm/components/select/select.js +214 -327
  82. package/lib/esm/components/select/select.js.map +1 -1
  83. package/lib/esm/components/select/tags.js +39 -31
  84. package/lib/esm/components/select/tags.js.map +1 -1
  85. package/lib/esm/components/select/templates.js +119 -178
  86. package/lib/esm/components/select/templates.js.map +1 -1
  87. package/lib/esm/components/select/types.js +1 -11
  88. package/lib/esm/components/select/types.js.map +1 -1
  89. package/lib/esm/components/select/utils.js +201 -255
  90. package/lib/esm/components/select/utils.js.map +1 -1
  91. package/lib/esm/components/toast/index.js +6 -0
  92. package/lib/esm/components/toast/index.js.map +1 -0
  93. package/lib/esm/components/toast/toast.js +540 -0
  94. package/lib/esm/components/toast/toast.js.map +1 -0
  95. package/lib/esm/components/toast/types.js +6 -0
  96. package/lib/esm/components/toast/types.js.map +1 -0
  97. package/lib/esm/helpers/dom.js +24 -0
  98. package/lib/esm/helpers/dom.js.map +1 -1
  99. package/lib/esm/index.js +3 -0
  100. package/lib/esm/index.js.map +1 -1
  101. package/package.json +8 -6
  102. package/src/components/alert/alert.css +15 -2
  103. package/src/components/component.ts +4 -0
  104. package/src/components/datatable/datatable.ts +24 -16
  105. package/src/components/input/input.css +3 -1
  106. package/src/components/link/link.css +2 -2
  107. package/src/components/select/combobox.ts +42 -149
  108. package/src/components/select/config.ts +38 -33
  109. package/src/components/select/dropdown.ts +8 -55
  110. package/src/components/select/index.ts +1 -1
  111. package/src/components/select/option.ts +28 -7
  112. package/src/components/select/remote.ts +2 -42
  113. package/src/components/select/search.ts +14 -54
  114. package/src/components/select/select.css +49 -0
  115. package/src/components/select/select.ts +231 -437
  116. package/src/components/select/tags.ts +40 -37
  117. package/src/components/select/templates.ts +166 -303
  118. package/src/components/select/types.ts +0 -10
  119. package/src/components/select/utils.ts +214 -304
  120. package/src/components/textarea/textarea.css +2 -1
  121. package/src/components/toast/index.ts +7 -0
  122. package/src/components/toast/toast.css +60 -0
  123. package/src/components/toast/toast.ts +605 -0
  124. package/src/components/toast/types.ts +169 -0
  125. package/src/helpers/dom.ts +30 -0
  126. package/src/index.ts +4 -0
  127. package/styles/main.css +3 -0
  128. package/styles/vars.css +138 -0
  129. package/styles.css +1 -0
package/examples/select/placeholder.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>Placeholder</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Placeholder</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-placeholder="Please select a field type..."
21
+ data-kt-select-config='{
22
+ "placeholder": "Select a country...",
23
+ "placeholderClass": "",
24
+ "placeholderTemplate": "<span class=\"text-gray-700\">{{placeholder}}</span>",
25
+ "displaySeparator": ", "
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/remote-data.html ADDED
@@ -0,0 +1,32 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Remote Data</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Remote Data</label>
16
+
17
+ <select
18
+ 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
+ ></select>
25
+
26
+ </div>
27
+ </form>
28
+ </div>
29
+ <script src="../../dist/ktui.js"></script>
30
+ </body>
31
+
32
+ </html>
package/examples/select/search.html ADDED
@@ -0,0 +1,49 @@
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
20
+ data-kt-select-enable-search="true"
21
+ data-kt-select-placeholder="Search for a field...">
22
+ <option value="">Search for a field...</option>
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="birthday">Date of Birth</option>
30
+ <option value="gender">Gender</option>
31
+ <option value="country">Country</option>
32
+ <option value="city">City</option>
33
+ <option value="language">Language</option>
34
+ <option value="timezone">Timezone</option>
35
+ <option value="avatar">Profile Picture</option>
36
+ <option value="biography">Biography</option>
37
+ <option value="company">Company Name</option>
38
+ <option value="department">Department</option>
39
+ <option value="position">Job Title</option>
40
+ <option value="skills">Skills</option>
41
+ </select>
42
+
43
+ </div>
44
+ </form>
45
+ </div>
46
+ <script src="../../dist/ktui.js"></script>
47
+ </body>
48
+
49
+ </html>
package/examples/select/tags-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>Tags Icons</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Tags Icons</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-placeholder="Type or select a country..."
21
+ data-kt-select-multiple="true"
22
+ data-kt-select-tags="true"
23
+ data-kt-select-config='{
24
+ "tagClass": "flex items-center gap-2 rounded bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold",
25
+ "tagTemplate": "<span class=\"kt-select-tag\">{{icon}} {{text}}</span>",
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/tags-selected.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Tags Selected</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Tags Selected</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-pre-selected="de,fr"
22
+ data-kt-select-multiple="true"
23
+ data-kt-select-tags="true"
24
+ data-kt-select-config='{
25
+ "tagClass": "flex items-center gap-2 rounded bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold",
26
+ "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
27
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
28
+ "optionClass": "kt-select-option"
29
+ }'>
30
+ <option value="us"
31
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
32
+ United States</option>
33
+ <option value="de"
34
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
35
+ Germany</option>
36
+ <option value="it"
37
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
38
+ Italy</option>
39
+ <option value="fr"
40
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
41
+ France</option>
42
+ <option value="es"
43
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
44
+ Spain</option>
45
+ <option value="jp"
46
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
47
+ Japan</option>
48
+ <option value="ru"
49
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
50
+ Russia</option>
51
+ </select>
52
+
53
+ </div>
54
+ </form>
55
+ </div>
56
+ <script src="../../dist/ktui.js"></script>
57
+ </body>
58
+
59
+ </html>
package/examples/select/tags.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>Tags</title>
8
+ <link rel="stylesheet" href="../../dist/styles.css">
9
+ </head>
10
+
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Tags</label>
16
+
17
+ <select
18
+ class="kt-select"
19
+ data-kt-select
20
+ data-kt-select-placeholder="Type or select a country..."
21
+ data-kt-select-multiple="true"
22
+ data-kt-select-tags="true"
23
+ data-kt-select-config='{
24
+ "tagClass": "flex items-center gap-2 rounded bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold",
25
+ "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
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/template-customization.html ADDED
@@ -0,0 +1,65 @@
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>Template Customization</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">Template Customization</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-config='{
22
+ "displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"font-semibold text-gray-900\">{{text}}</span></div>",
23
+ "displayClass": "kt-select-display",
24
+ "displayToggle": true,
25
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
26
+ "optionClass": "kt-select-option",
27
+ "placeholder": "Select a country...",
28
+ "placeholderClass": "kt-select-placeholder",
29
+ "placeholderTemplate": "<span class=\"kt-select-placeholder\">{{placeholder}}</span>",
30
+ "displaySeparator": ", ",
31
+ "tagClasses": "flex gap-2",
32
+ "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
33
+ "displayToggleClass": "flex gap-2",
34
+ "displayToggleTemplate": "<button type=\"button\" class=\"kt-select-toggle\">{{text}}</button>"
35
+ }'>
36
+ <option value="us"
37
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
38
+ United States</option>
39
+ <option value="de"
40
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
41
+ Germany</option>
42
+ <option value="it"
43
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
44
+ Italy</option>
45
+ <option value="fr"
46
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
47
+ France</option>
48
+ <option value="es"
49
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
50
+ Spain</option>
51
+ <option value="jp"
52
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
53
+ Japan</option>
54
+ <option value="ru"
55
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
56
+ Russia</option>
57
+ </select>
58
+
59
+ </div>
60
+ </form>
61
+ </div>
62
+ <script src="../../dist/ktui.js"></script>
63
+ </body>
64
+
65
+ </html>
package/examples/select/test.html ADDED
@@ -0,0 +1,94 @@
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>KTSelect - Flags 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
+ <form class="flex flex-col gap-6">
14
+ <div>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-flags">Country (with icons)</label>
16
+ <select
17
+ class="kt-select"
18
+ data-kt-select
19
+ data-kt-select-config='{
20
+ "placeholder": "Select a country...",
21
+ "placeholderClass": "kt-select-placeholder",
22
+ "placeholderTemplate": "<span class=\"kt-select-placeholder\">{{placeholder}}</span>",
23
+ "displaySeparator": ", ",
24
+ "displayTemplate": "<div class=\"kt-select-display\">{{icon}} {{selectedTexts}} <span class=\"text-xs text-gray-400\">({{selectedCount}} selected)</span></div>",
25
+ "displayClass": "kt-select-display",
26
+ "displayToggle": true,
27
+ "optionTemplate": "<div class=\"kt-select-option\">{{icon}} <span>{{text}}</span></div>",
28
+ "optionClass": "kt-select-option",
29
+ "tagClasses": "flex gap-2",
30
+ "tagTemplate": "<span class=\"kt-select-tag\">{{text}}</span>",
31
+ "displayToggleClass": "flex gap-2",
32
+ "displayToggleTemplate": "<button type=\"button\" class=\"kt-select-toggle\">{{text}}</button>"
33
+ }'>
34
+ <option value="us"
35
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
36
+ United States</option>
37
+ <option value="de"
38
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
39
+ Germany</option>
40
+ <option value="it"
41
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
42
+ Italy</option>
43
+ <option value="fr"
44
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
45
+ France</option>
46
+ <option value="es"
47
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
48
+ Spain</option>
49
+ <option value="jp"
50
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
51
+ Japan</option>
52
+ <option value="ru"
53
+ data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
54
+ Russia</option>
55
+ </select>
56
+ </div>
57
+ </form>
58
+ </div>
59
+ <script src="../../dist/ktui.js"></script>
60
+ </body>
61
+
62
+ </html>
63
+
64
+ System classes:
65
+ open
66
+ selected,
67
+ disabled
68
+ focused
69
+
70
+ System placeholders:
71
+
72
+ CORE:
73
+ text: string;
74
+ value: string;
75
+
76
+ Custom:
77
+ selectedCount: number;
78
+ displayMoreSelected: nummber;
79
+ displayMaxSelected: number;
80
+ selectedTexts: "Option 1, Option 2, Option 3"
81
+
82
+ System attributes:
83
+ data-value="specific"
84
+ data-text="specific"
85
+ data-selected="4"
86
+ data-toggle="on|off"
87
+
88
+ [[tag] [input]]
89
+
90
+ [search ]
91
+
92
+ [combobox]
93
+
94
+ [dropdown]