@keenthemes/ktui 1.0.12 → 1.0.14

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 (93) hide show
  1. package/dist/ktui.js +738 -700
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +5824 -0
  5. package/examples/select/avatar.html +47 -0
  6. package/examples/select/basic-usage.html +10 -14
  7. package/examples/select/{test.html → combobox-icons_.html} +13 -48
  8. package/examples/select/country.html +43 -0
  9. package/examples/select/description.html +25 -41
  10. package/examples/select/disable-option.html +10 -16
  11. package/examples/select/disable-select.html +7 -6
  12. package/examples/select/icon-multiple.html +23 -31
  13. package/examples/select/icon.html +20 -30
  14. package/examples/select/max-selection.html +8 -9
  15. package/examples/select/modal.html +16 -17
  16. package/examples/select/multiple.html +11 -13
  17. package/examples/select/placeholder.html +9 -12
  18. package/examples/select/search.html +30 -22
  19. package/examples/select/sizes.html +94 -0
  20. package/examples/select/template-customization.html +0 -3
  21. package/lib/cjs/components/component.js +1 -1
  22. package/lib/cjs/components/component.js.map +1 -1
  23. package/lib/cjs/components/datatable/datatable.js +14 -11
  24. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  25. package/lib/cjs/components/select/combobox.js +96 -61
  26. package/lib/cjs/components/select/combobox.js.map +1 -1
  27. package/lib/cjs/components/select/config.js +13 -8
  28. package/lib/cjs/components/select/config.js.map +1 -1
  29. package/lib/cjs/components/select/dropdown.js +32 -96
  30. package/lib/cjs/components/select/dropdown.js.map +1 -1
  31. package/lib/cjs/components/select/option.js +53 -20
  32. package/lib/cjs/components/select/option.js.map +1 -1
  33. package/lib/cjs/components/select/search.js +146 -97
  34. package/lib/cjs/components/select/search.js.map +1 -1
  35. package/lib/cjs/components/select/select.js +219 -118
  36. package/lib/cjs/components/select/select.js.map +1 -1
  37. package/lib/cjs/components/select/tags.js +0 -26
  38. package/lib/cjs/components/select/tags.js.map +1 -1
  39. package/lib/cjs/components/select/templates.js +130 -105
  40. package/lib/cjs/components/select/templates.js.map +1 -1
  41. package/lib/cjs/components/select/utils.js +33 -132
  42. package/lib/cjs/components/select/utils.js.map +1 -1
  43. package/lib/cjs/helpers/dom.js +0 -24
  44. package/lib/cjs/helpers/dom.js.map +1 -1
  45. package/lib/esm/components/component.js +1 -1
  46. package/lib/esm/components/component.js.map +1 -1
  47. package/lib/esm/components/datatable/datatable.js +14 -11
  48. package/lib/esm/components/datatable/datatable.js.map +1 -1
  49. package/lib/esm/components/select/combobox.js +96 -61
  50. package/lib/esm/components/select/combobox.js.map +1 -1
  51. package/lib/esm/components/select/config.js +13 -8
  52. package/lib/esm/components/select/config.js.map +1 -1
  53. package/lib/esm/components/select/dropdown.js +32 -96
  54. package/lib/esm/components/select/dropdown.js.map +1 -1
  55. package/lib/esm/components/select/option.js +53 -20
  56. package/lib/esm/components/select/option.js.map +1 -1
  57. package/lib/esm/components/select/search.js +146 -97
  58. package/lib/esm/components/select/search.js.map +1 -1
  59. package/lib/esm/components/select/select.js +219 -118
  60. package/lib/esm/components/select/select.js.map +1 -1
  61. package/lib/esm/components/select/tags.js +0 -26
  62. package/lib/esm/components/select/tags.js.map +1 -1
  63. package/lib/esm/components/select/templates.js +130 -105
  64. package/lib/esm/components/select/templates.js.map +1 -1
  65. package/lib/esm/components/select/utils.js +32 -130
  66. package/lib/esm/components/select/utils.js.map +1 -1
  67. package/lib/esm/helpers/dom.js +0 -24
  68. package/lib/esm/helpers/dom.js.map +1 -1
  69. package/package.json +9 -6
  70. package/src/components/component.ts +0 -4
  71. package/src/components/datatable/datatable.ts +14 -11
  72. package/src/components/input/input.css +1 -1
  73. package/src/components/scrollable/scrollable.css +9 -5
  74. package/src/components/select/combobox.ts +98 -87
  75. package/src/components/select/config.ts +16 -13
  76. package/src/components/select/dropdown.ts +43 -108
  77. package/src/components/select/option.ts +44 -25
  78. package/src/components/select/search.ts +158 -117
  79. package/src/components/select/select.css +99 -27
  80. package/src/components/select/select.ts +236 -128
  81. package/src/components/select/tags.ts +1 -27
  82. package/src/components/select/templates.ts +191 -132
  83. package/src/components/select/utils.ts +30 -166
  84. package/src/components/toast/toast.css +1 -1
  85. package/src/helpers/dom.ts +0 -30
  86. package/webpack.config.js +6 -1
  87. package/examples/select/combobox-icons.html +0 -58
  88. package/examples/select/icon-description.html +0 -56
  89. /package/examples/select/{combobox.html → combobox_.html} +0 -0
  90. /package/examples/select/{remote-data.html → remote-data_.html} +0 -0
  91. /package/examples/select/{tags-icons.html → tags-icons_.html} +0 -0
  92. /package/examples/select/{tags-selected.html → tags-selected_.html} +0 -0
  93. /package/examples/select/{tags.html → tags_.html} +0 -0
package/examples/select/avatar.html ADDED
@@ -0,0 +1,47 @@
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 CHANGED
@@ -13,27 +13,23 @@
13
13
  <form class="flex flex-col gap-6">
14
14
  <div>
15
15
  <label class="block mb-2 font-medium text-gray-700" for="select-basic">Basic Usage</label>
16
-
17
16
  <select
18
17
  class="kt-select"
19
18
  data-kt-select="true"
20
- data-kt-select-wrapper-class="foo boo"
21
- data-kt-select-placeholder="Select a field type..."
19
+ data-kt-select-placeholder="Select a framework"
22
20
  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"
21
+ "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
25
22
  }'
26
23
  >
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>
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>
35
32
  </select>
36
-
37
33
  </div>
38
34
  </form>
39
35
  </div>
package/examples/select/{test.html → combobox-icons_.html} RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>KTSelect - Flags Test</title>
7
+ <title>Combobox Icons</title>
8
8
  <link rel="stylesheet" href="../../dist/styles.css">
9
9
  </head>
10
10
 
@@ -12,24 +12,20 @@
12
12
  <div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
13
13
  <form class="flex flex-col gap-6">
14
14
  <div>
15
- <label class="block mb-2 font-medium text-gray-700" for="select-flags">Country (with icons)</label>
15
+ <label class="block mb-2 font-medium text-gray-700" for="select-basic">Combobox Icons</label>
16
+
16
17
  <select
17
18
  class="kt-select"
18
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-combobox="true"
19
24
  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>"
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\">{{icon}} {{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"
33
29
  }'>
34
30
  <option value="us"
35
31
  data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
@@ -53,42 +49,11 @@
53
49
  data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
54
50
  Russia</option>
55
51
  </select>
52
+
56
53
  </div>
57
54
  </form>
58
55
  </div>
59
56
  <script src="../../dist/ktui.js"></script>
60
57
  </body>
61
58
 
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]
59
+ </html>
package/examples/select/country.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>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/description.html CHANGED
@@ -16,48 +16,32 @@
16
16
 
17
17
  <select
18
18
  class="kt-select"
19
- data-kt-select
20
- data-kt-select-placeholder="Select with description..."
19
+ data-kt-select="true"
20
+ data-kt-select-placeholder="Select an option..."
21
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>
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>
61
45
  </select>
62
46
 
63
47
  </div>
package/examples/select/disable-option.html CHANGED
@@ -16,22 +16,16 @@
16
16
 
17
17
  <select
18
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>
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>
35
29
  </select>
36
30
 
37
31
  </div>
package/examples/select/disable-select.html CHANGED
@@ -15,14 +15,15 @@
15
15
  <label class="block mb-2 font-medium text-gray-700" for="select-basic">Disable Select</label>
16
16
 
17
17
  <select
18
+ disabled
18
19
  class="kt-select"
19
- data-kt-select
20
+ data-kt-select="true"
20
21
  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>
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>
26
27
  </select>
27
28
 
28
29
  </div>
package/examples/select/icon-multiple.html CHANGED
@@ -15,38 +15,30 @@
15
15
  <label class="block mb-2 font-medium text-gray-700" for="select-basic">Icon Multiple</label>
16
16
 
17
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"
18
+ class="kt-select kt-select-lg"
19
+ data-kt-select="true"
20
+ data-kt-select-multiple="true"
21
+ data-kt-select-placeholder="Select an option"
22
+ data-kt-select-config='{
23
+ "displaySeparator": ", ",
24
+ "displayTemplate": "<div class=\"flex items-center gap-2 [&>svg]:size-3.5\">{{icon}}<span class=\"text-foreground\">{{text}}</span></div>",
25
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}} <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>"
28
26
  }'>
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>
27
+ <option value="hardwere" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"19\" cy=\"6\" r=\"3\"/><path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/><path d=\"M12 17v4\/><path d=\"M8 21h8\"/></svg>"}'>
28
+ Hardwere
29
+ </option>
30
+ <option value="software" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><path d=\"M10 10.5 8 13l2 2.5\/><path d=\"m14 10.5 2 2.5-2 2.5\/><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/></svg>"}'>
31
+ Software
32
+ </option>
33
+ <option value="network" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/><path d=\"M12 12V8\/></svg>"}'>
34
+ Network
35
+ </option>
36
+ <option value="storage" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5V19A9 3 0 0 0 21 19V5\/><path d=\"M3 12A9 3 0 0 0 21 12\"/></svg>"}'>
37
+ Storage
38
+ </option>
39
+ <option value="security" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"12\" cy=\"16\" r=\"1\"/><rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/></svg>"}'>
40
+ Security
41
+ </option>
50
42
  </select>
51
43
 
52
44
  </div>
package/examples/select/icon.html CHANGED
@@ -16,40 +16,30 @@
16
16
 
17
17
  <select
18
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..."
19
+ data-kt-select="true"
20
+ data-kt-select-placeholder="Select an option..."
22
21
  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"
22
+ "displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-foreground\">{{text}}</span></div>",
23
+ "optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}} <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>"
28
24
  }'>
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>
25
+ <option value="hardwere" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"19\" cy=\"6\" r=\"3\"/><path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/><path d=\"M12 17v4\/><path d=\"M8 21h8\"/></svg>"}'>
26
+ Hardwere
27
+ </option>
28
+ <option value="software" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><path d=\"M10 10.5 8 13l2 2.5\/><path d=\"m14 10.5 2 2.5-2 2.5\/><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/></svg>"}'>
29
+ Software
30
+ </option>
31
+ <option value="network" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/><path d=\"M12 12V8\/></svg>"}'>
32
+ Network
33
+ </option>
34
+ <option value="storage" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5V19A9 3 0 0 0 21 19V5\/><path d=\"M3 12A9 3 0 0 0 21 12\"/></svg>"}'>
35
+ Storage
36
+ </option>
37
+ <option value="security" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"12\" cy=\"16\" r=\"1\"/><rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/></svg>"}'>
38
+ Storage
39
+ </option>
50
40
  </select>
51
41
 
52
- </div>
42
+ </div>
53
43
  </form>
54
44
  </div>
55
45
  <script src="../../dist/ktui.js"></script>
package/examples/select/max-selection.html CHANGED
@@ -16,18 +16,17 @@
16
16
 
17
17
  <select
18
18
  class="kt-select"
19
- data-kt-select
19
+ data-kt-select="true"
20
20
  data-kt-select-multiple="true"
21
21
  data-kt-select-max-selections="3"
22
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>
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
+ <option value="ember">Ember</option>
29
+ <option value="nuxt">Nuxt.js</option>
31
30
  </select>
32
31
 
33
32
  </div>
package/examples/select/modal.html CHANGED
@@ -30,23 +30,22 @@
30
30
  class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 focus:outline-none"
31
31
  aria-label="Close Modal">&times;</button>
32
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>
33
+ <select
34
+ class="kt-select"
35
+ data-kt-select="true"
36
+ data-kt-select-placeholder="Select a framework..."
37
+ data-kt-select-config='{
38
+ "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
39
+ }'
40
+ >
41
+ <option value="react">React</option>
42
+ <option value="nextjs">Next.js</option>
43
+ <option value="angular">Angular</option>
44
+ <option value="vue">Vue</option>
45
+ <option value="svelte">Svelte</option>
46
+ <option value="ember">Ember</option>
47
+ <option value="nuxt">Nuxt.js</option>
48
+ <option value="remix">Remix</option>
50
49
  </select>
51
50
  </div>
52
51
  </div>
package/examples/select/multiple.html CHANGED
@@ -13,24 +13,22 @@
13
13
  <form class="flex flex-col gap-6">
14
14
  <div>
15
15
  <label class="block mb-2 font-medium text-gray-700" for="select-basic">Multiple</label>
16
-
17
16
  <select
18
17
  class="kt-select"
19
- data-kt-select
18
+ data-kt-select="true"
20
19
  data-kt-select-multiple="true"
21
- data-kt-select-placeholder="Select multiple fields..."
20
+ data-kt-select-max-selections="3"
21
+ data-kt-select-placeholder="Select cities..."
22
22
  data-kt-select-config='{
23
- "displaySeparator": " | ",
24
- "displayTemplate": "<span class=\"text-gray-800 leading-tight\">{{selectedTexts}}</span>"
23
+ "displaySeparator": " | "
25
24
  }'>
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>
25
+ <option value="amsterdam">Amsterdam</option>
26
+ <option value="barcelona">Barcelona</option>
27
+ <option value="london">London</option>
28
+ <option value="new-york">New York</option>
29
+ <option value="paris">Paris</option>
30
+ <option value="rome">Rome</option>
31
+ <option value="tokyo">Tokyo</option>
34
32
  </select>
35
33
 
36
34
  </div>