@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/toast/example.html ADDED
@@ -0,0 +1,427 @@
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>KTUI Toast Examples</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-md mt-10 mx-auto">
13
+ <h2 class="text-xl font-bold mb-4">KTUI Toast Examples</h2>
14
+
15
+ <!-- Variants -->
16
+ <div class="mb-6">
17
+ <h3 class="font-semibold mb-2">Variants</h3>
18
+ <div class="flex flex-wrap gap-2">
19
+ <button id="toast-variant-info" class="kt-btn">Info</button>
20
+ <button id="toast-variant-success" class="kt-btn">Success</button>
21
+ <button id="toast-variant-error" class="kt-btn">Error</button>
22
+ <button id="toast-variant-warning" class="kt-btn">Warning</button>
23
+ <button id="toast-variant-primary" class="kt-btn">Primary</button>
24
+ <button id="toast-variant-secondary" class="kt-btn">Secondary</button>
25
+ <button id="toast-variant-destructive" class="kt-btn">destructive</button>
26
+ <button id="toast-variant-mono" class="kt-btn">Mono</button>
27
+ </div>
28
+ </div>
29
+
30
+ <!-- Appearances -->
31
+ <div class="mb-6">
32
+ <h3 class="font-semibold mb-2">Appearances</h3>
33
+ <div class="flex flex-wrap gap-2">
34
+ <button id="toast-appearance-solid" class="kt-btn">Solid</button>
35
+ <button id="toast-appearance-outline" class="kt-btn">Outline</button>
36
+ <button id="toast-appearance-light" class="kt-btn">Light</button>
37
+ </div>
38
+ </div>
39
+
40
+ <!-- Sizes -->
41
+ <div class="mb-6">
42
+ <h3 class="font-semibold mb-2">Sizes</h3>
43
+ <div class="flex flex-wrap gap-2">
44
+ <button id="toast-size-sm" class="kt-btn">Small</button>
45
+ <button id="toast-size-md" class="kt-btn">Medium</button>
46
+ <button id="toast-size-lg" class="kt-btn">Large</button>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Position Examples -->
51
+ <div class="mb-6">
52
+ <h3 class="font-semibold mb-2">Positions</h3>
53
+ <div class="flex flex-wrap gap-2 mb-2">
54
+ <button id="toast-pos-top-end" class="kt-btn">Top End (Right)</button>
55
+ <button id="toast-pos-top-center" class="kt-btn">Top Center</button>
56
+ <button id="toast-pos-top-start" class="kt-btn">Top Start (Left)</button>
57
+ <button id="toast-pos-bottom-end" class="kt-btn">Bottom End (Right)</button>
58
+ <button id="toast-pos-bottom-center" class="kt-btn">Bottom Center</button>
59
+ <button id="toast-pos-bottom-start" class="kt-btn">Bottom Start (Left)</button>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Global Config Example -->
64
+ <div class="mb-6">
65
+ <h3 class="font-semibold mb-2">Global Config</h3>
66
+ <div class="flex flex-wrap gap-2 mb-2">
67
+ <button id="toast-set-global-bottom-end" class="kt-btn kt-btn-primary">Set Global: Bottom End</button>
68
+ <button id="toast-set-global-top-center" class="kt-btn">Set Global: Top Center</button>
69
+ <button id="toast-set-global-reset" class="kt-btn">Reset Global Config</button>
70
+ </div>
71
+ <div class="text-xs text-gray-500">Current global position will apply to all new toasts unless overridden.</div>
72
+ </div>
73
+
74
+ <!-- Other and legacy examples -->
75
+ <div class="flex flex-col gap-3">
76
+ <button id="toast-basic" class="kt-btn">Basic Toast</button>
77
+ <button id="toast-custom-headless" class="kt-btn">Custom Headless Toast</button>
78
+ <button id="toast-description" class="kt-btn">With Description</button>
79
+ <button id="toast-action" class="kt-btn">With Action Button</button>
80
+ <button id="toast-cancel" class="kt-btn">With Cancel Button</button>
81
+ <button id="toast-custom-icon" class="kt-btn">With Custom Icon</button>
82
+ <button id="toast-invert" class="kt-btn">Inverted Colors</button>
83
+ <button id="toast-long" class="kt-btn">Long Duration</button>
84
+ <button id="toast-important" class="kt-btn">Important (No Auto Dismiss)</button>
85
+ <button id="toast-progress-off" class="kt-btn">No Progress Bar</button>
86
+ <button id="toast-close-btn-off" class="kt-btn">No Close Button</button>
87
+ <button id="toast-non-dismissible" class="kt-btn">Non-dismissible</button>
88
+ <button id="toast-position-top-left" class="kt-btn">Position: Top Left</button>
89
+ <button id="toast-position-bottom-center" class="kt-btn">Position: Bottom Center</button>
90
+ <button id="toast-custom-class" class="kt-btn">Custom Class</button>
91
+ <button id="toast-aria" class="kt-btn">Custom ARIA Role</button>
92
+ <button id="toast-callbacks" class="kt-btn">With Callbacks</button>
93
+ <button id="toast-clear" class="kt-btn">Clear All Toasts</button>
94
+ <button id="toast-beep" class="kt-btn kt-btn-primary">Show Toast with Beep</button>
95
+ <button id="toast-hover" class="kt-btn kt-btn-primary">Show Toast (Pause on Hover)</button>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Hidden template for custom headless toast -->
100
+ <div id="custom-toast-template" style="display:none">
101
+ <div style="padding:1rem; background:#fff; color:#222; border-radius:8px; min-width:220px; max-width:400px; box-shadow:0 2px 12px rgba(0,0,0,0.12); display:flex; align-items:center; gap:1rem;">
102
+ <div>
103
+ <strong>🎉 Custom Headless Toast</strong>
104
+ <div style="font-size:0.95em; color:#555;">This toast uses your own markup and logic!</div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Scripts should be outside the template -->
110
+ <script src="../../dist/ktui.js"></script>
111
+ <script>
112
+ // --- Position Examples ---
113
+ const posExamples = [
114
+ { id: 'toast-pos-top-end', position: 'top-end', label: 'Top End (Right)' },
115
+ { id: 'toast-pos-top-center', position: 'top-center', label: 'Top Center' },
116
+ { id: 'toast-pos-top-start', position: 'top-start', label: 'Top Start (Left)' },
117
+ { id: 'toast-pos-bottom-end', position: 'bottom-end', label: 'Bottom End (Right)' },
118
+ { id: 'toast-pos-bottom-center', position: 'bottom-center', label: 'Bottom Center' },
119
+ { id: 'toast-pos-bottom-start', position: 'bottom-start', label: 'Bottom Start (Left)' }
120
+ ];
121
+ posExamples.forEach(({ id, position, label }) => {
122
+ const btn = document.getElementById(id);
123
+ if (btn) {
124
+ btn.addEventListener('click', () => {
125
+ KTToast.show({
126
+ message: `Toast at ${label}`,
127
+ position,
128
+ variant: 'info'
129
+ });
130
+ });
131
+ }
132
+ });
133
+
134
+ // --- Global Config Example ---
135
+ const defaultGlobalConfig = {
136
+ position: 'top-end',
137
+ duration: 4000,
138
+ maxToasts: 5,
139
+ gap: 10,
140
+ dismiss: true
141
+ };
142
+ KTToast.config({ ...defaultGlobalConfig }); // Ensure default on load
143
+
144
+ const btnGlobalBottomEnd = document.getElementById('toast-set-global-bottom-end');
145
+ const btnGlobalTopCenter = document.getElementById('toast-set-global-top-center');
146
+ const btnGlobalReset = document.getElementById('toast-set-global-reset');
147
+
148
+ if (btnGlobalBottomEnd) {
149
+ btnGlobalBottomEnd.addEventListener('click', () => {
150
+ KTToast.config({ position: 'bottom-end' });
151
+ KTToast.show({ message: 'Global position set to Bottom End (Right)', variant: 'primary' });
152
+ });
153
+ }
154
+ if (btnGlobalTopCenter) {
155
+ btnGlobalTopCenter.addEventListener('click', () => {
156
+ KTToast.config({ position: 'top-center' });
157
+ KTToast.show({ message: 'Global position set to Top Center', variant: 'primary' });
158
+ });
159
+ }
160
+ if (btnGlobalReset) {
161
+ btnGlobalReset.addEventListener('click', () => {
162
+ KTToast.config({ ...defaultGlobalConfig });
163
+ KTToast.show({ message: 'Global config reset to default', variant: 'primary' });
164
+ });
165
+ }
166
+
167
+ // Beep toast demo
168
+ document.getElementById('toast-beep').addEventListener('click', function() {
169
+ KTToast.show({
170
+ message: 'Beep! Toast with sound.',
171
+ variant: 'success',
172
+ beep: true
173
+ });
174
+ });
175
+
176
+ // Pause on hover toast demo
177
+ document.getElementById('toast-hover').addEventListener('click', function() {
178
+ KTToast.show({
179
+ message: 'This toast will pause auto-dismiss while hovered!',
180
+ variant: 'info',
181
+ pauseOnHover: true,
182
+ progress: true,
183
+ duration: 4000
184
+ });
185
+ });
186
+ // --- Variants ---
187
+ const variants = ['info', 'success', 'error', 'warning', 'primary', 'secondary', 'destructive', 'mono'];
188
+ variants.forEach(variant => {
189
+ const btn = document.getElementById(`toast-variant-${variant}`);
190
+ if (btn) {
191
+ btn.addEventListener('click', () => {
192
+ KTToast.show({
193
+ message: `${variant.charAt(0).toUpperCase() + variant.slice(1)} variant`,
194
+ variant
195
+ });
196
+ });
197
+ }
198
+ });
199
+
200
+ // --- Appearances ---
201
+ const appearances = ['solid', 'outline', 'light'];
202
+ appearances.forEach(appearance => {
203
+ const btn = document.getElementById(`toast-appearance-${appearance}`);
204
+ if (btn) {
205
+ btn.addEventListener('click', () => {
206
+ KTToast.show({
207
+ message: `${appearance.charAt(0).toUpperCase() + appearance.slice(1)} appearance`,
208
+ variant: 'info',
209
+ appearance
210
+ });
211
+ });
212
+ }
213
+ });
214
+
215
+ // --- Sizes ---
216
+ const sizes = ['sm', 'md', 'lg'];
217
+ sizes.forEach(size => {
218
+ const btn = document.getElementById(`toast-size-${size}`);
219
+ if (btn) {
220
+ btn.addEventListener('click', () => {
221
+ KTToast.show({
222
+ message: `${size.toUpperCase()} size`,
223
+ variant: 'success',
224
+ size
225
+ });
226
+ });
227
+ }
228
+ });
229
+
230
+ // --- Legacy/other examples ---
231
+ // Basic toast
232
+ const btnBasic = document.getElementById('toast-basic');
233
+ btnBasic.addEventListener('click', () => {
234
+ KTToast.show({ message: 'This is a basic toast!' });
235
+ });
236
+
237
+ // With description
238
+ const btnDesc = document.getElementById('toast-description');
239
+ btnDesc.addEventListener('click', () => {
240
+ KTToast.show({
241
+ message: 'Saved!',
242
+ description: 'Your changes have been saved successfully.',
243
+ variant: 'success',
244
+ duration: 3500
245
+ });
246
+ });
247
+
248
+ // With action
249
+ const btnAction = document.getElementById('toast-action');
250
+ btnAction.addEventListener('click', () => {
251
+ KTToast.show({
252
+ message: 'File uploaded',
253
+ description: 'Click undo to revert this action.',
254
+ variant: 'info',
255
+ action: {
256
+ label: 'Undo',
257
+ className: 'text-white kt-link kt-link-underlined',
258
+ onClick: (id) => {
259
+ KTToast.show({ message: 'Undo clicked!', variant: 'warning' });
260
+ }
261
+ }
262
+ });
263
+ });
264
+
265
+ // With cancel
266
+ const btnCancel = document.getElementById('toast-cancel');
267
+ btnCancel.addEventListener('click', () => {
268
+ KTToast.show({
269
+ message: 'Are you sure?',
270
+ description: 'You can cancel this operation.',
271
+ variant: 'warning',
272
+ cancel: {
273
+ label: 'Cancel',
274
+ onClick: (id) => {
275
+ KTToast.show({ message: 'Cancelled!', variant: 'info' });
276
+ }
277
+ }
278
+ });
279
+ });
280
+
281
+ // Custom icon
282
+ const btnCustomIcon = document.getElementById('toast-custom-icon');
283
+ btnCustomIcon.addEventListener('click', () => {
284
+ KTToast.show({
285
+ message: 'Custom Icon!',
286
+ icon: '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>',
287
+ variant: 'success'
288
+ });
289
+ });
290
+
291
+ // Inverted colors
292
+ const btnInvert = document.getElementById('toast-invert');
293
+ btnInvert.addEventListener('click', () => {
294
+ KTToast.show({
295
+ message: 'Inverted colors!',
296
+ invert: true,
297
+ variant: 'info'
298
+ });
299
+ });
300
+
301
+ // Long duration
302
+ const btnLong = document.getElementById('toast-long');
303
+ btnLong.addEventListener('click', () => {
304
+ KTToast.show({
305
+ message: 'This toast will last 10 seconds.',
306
+ duration: 10000,
307
+ variant: 'info'
308
+ });
309
+ });
310
+
311
+ // Important (no auto dismiss)
312
+ const btnImportant = document.getElementById('toast-important');
313
+ btnImportant.addEventListener('click', () => {
314
+ KTToast.show({
315
+ message: 'This toast will not auto-dismiss.',
316
+ important: true,
317
+ variant: 'error'
318
+ });
319
+ });
320
+
321
+ // No progress bar
322
+ const btnProgressOff = document.getElementById('toast-progress-off');
323
+ btnProgressOff.addEventListener('click', () => {
324
+ KTToast.show({
325
+ message: 'Progress bar!',
326
+ progress: true,
327
+ variant: 'info'
328
+ });
329
+ });
330
+
331
+ // No close button
332
+ const btnCloseBtnOff = document.getElementById('toast-close-btn-off');
333
+ btnCloseBtnOff.addEventListener('click', () => {
334
+ KTToast.show({
335
+ message: 'No close button!',
336
+ closeButton: false,
337
+ variant: 'warning'
338
+ });
339
+ });
340
+
341
+ // Non-dismissible
342
+ const btnNonDismiss = document.getElementById('toast-non-dismissible');
343
+ btnNonDismiss.addEventListener('click', () => {
344
+ KTToast.show({
345
+ message: 'You cannot dismiss this toast by clicking it.',
346
+ dismissible: false,
347
+ variant: 'info'
348
+ });
349
+ });
350
+
351
+ // Position top left
352
+ const btnTopLeft = document.getElementById('toast-position-top-left');
353
+ btnTopLeft.addEventListener('click', () => {
354
+ KTToast.show({
355
+ message: 'Top left!',
356
+ position: 'top-start',
357
+ variant: 'success'
358
+ });
359
+ });
360
+
361
+ // Position bottom center
362
+ const btnBottomCenter = document.getElementById('toast-position-bottom-center');
363
+ btnBottomCenter.addEventListener('click', () => {
364
+ KTToast.show({
365
+ message: 'Bottom center!',
366
+ position: 'bottom-center',
367
+ variant: 'info'
368
+ });
369
+ });
370
+
371
+ // Custom class
372
+ const btnCustomClass = document.getElementById('toast-custom-class');
373
+ btnCustomClass.addEventListener('click', () => {
374
+ KTToast.show({
375
+ message: 'Custom class!',
376
+ className: 'bg-pink-500 text-white',
377
+ variant: 'info'
378
+ });
379
+ });
380
+
381
+ // Custom ARIA role
382
+ const btnAria = document.getElementById('toast-aria');
383
+ btnAria.addEventListener('click', () => {
384
+ KTToast.show({
385
+ message: 'Custom ARIA role!',
386
+ role: 'alert',
387
+ variant: 'info'
388
+ });
389
+ });
390
+
391
+ // With callbacks
392
+ const btnCallbacks = document.getElementById('toast-callbacks');
393
+ btnCallbacks.addEventListener('click', () => {
394
+ KTToast.show({
395
+ message: 'Watch the console!',
396
+ variant: 'info',
397
+ onAutoClose: (id) => {
398
+ console.log('Toast auto-closed:', id);
399
+ },
400
+ onDismiss: (id) => {
401
+ console.log('Toast dismissed:', id);
402
+ }
403
+ });
404
+ });
405
+
406
+ // Custom headless toast
407
+ const btnCustomHeadless = document.getElementById('toast-custom-headless');
408
+ btnCustomHeadless.addEventListener('click', () => {
409
+ KTToast.show({
410
+ content: `
411
+ <div class="text-white flex items-center gap-2">
412
+ <span>Custom content</span>
413
+ <button data-kt-toast-dismiss="true" class="kt-btn">&times;</button>
414
+ </div>
415
+ `
416
+ });
417
+ });
418
+
419
+ // Clear all toasts
420
+ const btnClear = document.getElementById('toast-clear');
421
+ btnClear.addEventListener('click', () => {
422
+ KTToast.clearAll();
423
+ });
424
+ </script>
425
+ </body>
426
+
427
+ </html>
package/lib/cjs/components/component.js CHANGED
@@ -72,7 +72,7 @@ var KTComponent = /** @class */ (function () {
72
72
  if (config === void 0) { config = {}; }
73
73
  if (!this._element)
74
74
  return;
75
- this._config = __assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
75
+ this._config = __assign(__assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), dom_1.default.getDataAttributesByJson(this._element, this._dataOptionPrefix + this._name + '-config')), config);
76
76
  };
77
77
  KTComponent.prototype.dispose = function () {
78
78
  if (!this._element)
package/lib/cjs/components/component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/component.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/component.ts"],"names":[],"mappings":"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"}
package/lib/cjs/components/datatable/datatable.js CHANGED
@@ -113,6 +113,7 @@ var KTDataTable = /** @class */ (function (_super) {
113
113
  _this._originalTdClasses = []; // Store original td classes as a 2D array [row][col]
114
114
  _this._originalThClasses = []; // Store original th classes
115
115
  _this._data = [];
116
+ _this._isFetching = false;
116
117
  if (data_1.default.has(element, _this._name))
117
118
  return _this;
118
119
  _this._defaultConfig = _this._initDefaultConfig(config);
@@ -416,11 +417,20 @@ var KTDataTable = /** @class */ (function (_super) {
416
417
  KTDataTable.prototype._updateData = function () {
417
418
  return __awaiter(this, void 0, void 0, function () {
418
419
  return __generator(this, function (_a) {
419
- this._showSpinner(); // Show spinner before fetching data
420
- // Fetch data from the DOM and initialize the checkbox plugin
421
- return [2 /*return*/, typeof this._config.apiEndpoint === 'undefined'
422
- ? this._fetchDataFromLocal().then(this._finalize.bind(this))
423
- : this._fetchDataFromServer().then(this._finalize.bind(this))];
420
+ if (this._isFetching)
421
+ return [2 /*return*/]; // Prevent duplicate fetches
422
+ this._isFetching = true;
423
+ try {
424
+ this._showSpinner(); // Show spinner before fetching data
425
+ // Fetch data from the DOM and initialize the checkbox plugin
426
+ return [2 /*return*/, typeof this._config.apiEndpoint === 'undefined'
427
+ ? this._fetchDataFromLocal().then(this._finalize.bind(this))
428
+ : this._fetchDataFromServer().then(this._finalize.bind(this))];
429
+ }
430
+ finally {
431
+ this._isFetching = false;
432
+ }
433
+ return [2 /*return*/];
424
434
  });
425
435
  });
426
436
  };
@@ -860,7 +870,13 @@ var KTDataTable = /** @class */ (function (_super) {
860
870
  td.className = _this._originalTdClasses[rowIndex][colIndex];
861
871
  }
862
872
  if (typeof columnDef.render === 'function') {
863
- td.innerHTML = columnDef.render.call(_this, item[key], item, _this);
873
+ var result = columnDef.render.call(_this, item[key], item, _this);
874
+ if (result instanceof HTMLElement || result instanceof DocumentFragment) {
875
+ td.appendChild(result);
876
+ }
877
+ else if (typeof result === 'string') {
878
+ td.innerHTML = result;
879
+ }
864
880
  }
865
881
  else {
866
882
  td.textContent = item[key];