@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.
- package/dist/ktui.js +1283 -1096
- package/dist/ktui.min.js +1 -1
- package/dist/ktui.min.js.map +1 -1
- package/examples/select/basic-usage.html +43 -0
- package/examples/select/combobox-icons.html +58 -0
- package/examples/select/combobox.html +46 -0
- package/examples/select/description.html +69 -0
- package/examples/select/disable-option.html +43 -0
- package/examples/select/disable-select.html +34 -0
- package/examples/select/icon-description.html +56 -0
- package/examples/select/icon-multiple.html +58 -0
- package/examples/select/icon.html +58 -0
- package/examples/select/max-selection.html +39 -0
- package/examples/select/modal.html +70 -0
- package/examples/select/multiple.html +42 -0
- package/examples/select/placeholder.html +43 -0
- package/examples/select/remote-data.html +32 -0
- package/examples/select/search.html +49 -0
- package/examples/select/tags-icons.html +58 -0
- package/examples/select/tags-selected.html +59 -0
- package/examples/select/tags.html +58 -0
- package/examples/select/template-customization.html +65 -0
- package/examples/select/test.html +94 -0
- package/examples/toast/example.html +427 -0
- package/lib/cjs/components/component.js +1 -1
- package/lib/cjs/components/component.js.map +1 -1
- package/lib/cjs/components/datatable/datatable.js +22 -6
- package/lib/cjs/components/datatable/datatable.js.map +1 -1
- package/lib/cjs/components/select/combobox.js +38 -120
- package/lib/cjs/components/select/combobox.js.map +1 -1
- package/lib/cjs/components/select/config.js +4 -16
- package/lib/cjs/components/select/config.js.map +1 -1
- package/lib/cjs/components/select/dropdown.js +10 -49
- package/lib/cjs/components/select/dropdown.js.map +1 -1
- package/lib/cjs/components/select/index.js +2 -1
- package/lib/cjs/components/select/index.js.map +1 -1
- package/lib/cjs/components/select/option.js +21 -4
- package/lib/cjs/components/select/option.js.map +1 -1
- package/lib/cjs/components/select/remote.js +1 -37
- package/lib/cjs/components/select/remote.js.map +1 -1
- package/lib/cjs/components/select/search.js +11 -41
- package/lib/cjs/components/select/search.js.map +1 -1
- package/lib/cjs/components/select/select.js +213 -326
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/cjs/components/select/tags.js +39 -31
- package/lib/cjs/components/select/tags.js.map +1 -1
- package/lib/cjs/components/select/templates.js +120 -179
- package/lib/cjs/components/select/templates.js.map +1 -1
- package/lib/cjs/components/select/types.js +0 -12
- package/lib/cjs/components/select/types.js.map +1 -1
- package/lib/cjs/components/select/utils.js +204 -257
- package/lib/cjs/components/select/utils.js.map +1 -1
- package/lib/cjs/components/toast/index.js +10 -0
- package/lib/cjs/components/toast/index.js.map +1 -0
- package/lib/cjs/components/toast/toast.js +543 -0
- package/lib/cjs/components/toast/toast.js.map +1 -0
- package/lib/cjs/components/toast/types.js +7 -0
- package/lib/cjs/components/toast/types.js.map +1 -0
- package/lib/cjs/helpers/dom.js +24 -0
- package/lib/cjs/helpers/dom.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/component.js +1 -1
- package/lib/esm/components/component.js.map +1 -1
- package/lib/esm/components/datatable/datatable.js +22 -6
- package/lib/esm/components/datatable/datatable.js.map +1 -1
- package/lib/esm/components/select/combobox.js +39 -121
- package/lib/esm/components/select/combobox.js.map +1 -1
- package/lib/esm/components/select/config.js +3 -15
- package/lib/esm/components/select/config.js.map +1 -1
- package/lib/esm/components/select/dropdown.js +10 -49
- package/lib/esm/components/select/dropdown.js.map +1 -1
- package/lib/esm/components/select/index.js +1 -1
- package/lib/esm/components/select/index.js.map +1 -1
- package/lib/esm/components/select/option.js +21 -4
- package/lib/esm/components/select/option.js.map +1 -1
- package/lib/esm/components/select/remote.js +1 -37
- package/lib/esm/components/select/remote.js.map +1 -1
- package/lib/esm/components/select/search.js +12 -42
- package/lib/esm/components/select/search.js.map +1 -1
- package/lib/esm/components/select/select.js +214 -327
- package/lib/esm/components/select/select.js.map +1 -1
- package/lib/esm/components/select/tags.js +39 -31
- package/lib/esm/components/select/tags.js.map +1 -1
- package/lib/esm/components/select/templates.js +119 -178
- package/lib/esm/components/select/templates.js.map +1 -1
- package/lib/esm/components/select/types.js +1 -11
- package/lib/esm/components/select/types.js.map +1 -1
- package/lib/esm/components/select/utils.js +201 -255
- package/lib/esm/components/select/utils.js.map +1 -1
- package/lib/esm/components/toast/index.js +6 -0
- package/lib/esm/components/toast/index.js.map +1 -0
- package/lib/esm/components/toast/toast.js +540 -0
- package/lib/esm/components/toast/toast.js.map +1 -0
- package/lib/esm/components/toast/types.js +6 -0
- package/lib/esm/components/toast/types.js.map +1 -0
- package/lib/esm/helpers/dom.js +24 -0
- package/lib/esm/helpers/dom.js.map +1 -1
- package/lib/esm/index.js +3 -0
- package/lib/esm/index.js.map +1 -1
- package/package.json +8 -6
- package/src/components/alert/alert.css +15 -2
- package/src/components/component.ts +4 -0
- package/src/components/datatable/datatable.ts +24 -16
- package/src/components/input/input.css +3 -1
- package/src/components/link/link.css +2 -2
- package/src/components/select/combobox.ts +42 -149
- package/src/components/select/config.ts +38 -33
- package/src/components/select/dropdown.ts +8 -55
- package/src/components/select/index.ts +1 -1
- package/src/components/select/option.ts +28 -7
- package/src/components/select/remote.ts +2 -42
- package/src/components/select/search.ts +14 -54
- package/src/components/select/select.css +49 -0
- package/src/components/select/select.ts +231 -437
- package/src/components/select/tags.ts +40 -37
- package/src/components/select/templates.ts +166 -303
- package/src/components/select/types.ts +0 -10
- package/src/components/select/utils.ts +214 -304
- package/src/components/textarea/textarea.css +2 -1
- package/src/components/toast/index.ts +7 -0
- package/src/components/toast/toast.css +60 -0
- package/src/components/toast/toast.ts +605 -0
- package/src/components/toast/types.ts +169 -0
- package/src/helpers/dom.ts +30 -0
- package/src/index.ts +4 -0
- package/styles/main.css +3 -0
- package/styles/vars.css +138 -0
- package/styles.css +1 -0
|
@@ -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">×</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>
|
|
@@ -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)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/component.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;AAYH,wCAAqC;AACrC,sCAAmC;AACnC,0CAAuC;AAGvC;IAAA;QACW,sBAAiB,GAAW,KAAK,CAAC;QAKlC,SAAI,GAAkB,IAAI,CAAC;QAC3B,aAAQ,GAAuB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/component.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;AAYH,wCAAqC;AACrC,sCAAmC;AACnC,0CAAuC;AAGvC;IAAA;QACW,sBAAiB,GAAW,KAAK,CAAC;QAKlC,SAAI,GAAkB,IAAI,CAAC;QAC3B,aAAQ,GAAuB,IAAI,CAAC;IA4G/C,CAAC;IA1GU,2BAAK,GAAf,UAAgB,OAA2B;QAC1C,OAAO,GAAG,aAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,eAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,kBAAW,IAAI,CAAC,KAAK,iBAAc,EAAE,MAAM,CAAC,CAAC;QAExE,cAAM,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC;IAES,gCAAU,GAApB,UAAqB,SAAiB,EAAE,OAAsB;;QAAtB,wBAAA,EAAA,cAAsB;QAC7D,MAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,0CAAE,OAAO,CAAC,UAAC,QAAQ;YAC7C,QAAQ,CAAC,OAAO,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACJ,CAAC;IAES,oCAAc,GAAxB,UAAyB,SAAiB,EAAE,OAAsB;QAAtB,wBAAA,EAAA,cAAsB;QACjE,IAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACxC,MAAM,EAAE,EAAE,OAAO,SAAA,EAAE;YACnB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,KAAK;SACf,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAES,gCAAU,GAApB,UAAqB,IAAY;QAChC,IAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAoB,CAAC,CAAC;QACjD,IAAM,cAAc,GAAG,aAAK,CAAC,UAAU,CACtC,IAAI,CAAC,QAAQ,EACb,eAAQ,IAAI,CAAC,KAAK,cAAI,eAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAE,CACtD,CAAC;QAEF,OAAO,cAAc,IAAI,KAAK,CAAC;IAChC,CAAC;IAES,sCAAgB,GAA1B;QACC,IACC,MAAM,CAAC,wBAAwB;YAC9B,MAAM,CAAC,wBAAmC,CAAC,IAAI,CAAC,KAAqB,CAAC,EACtE,CAAC;YACF,OAAQ,MAAM,CAAC,wBAAmC,CACjD,IAAI,CAAC,KAAqB,CAChB,CAAC;QACb,CAAC;aAAM,CAAC;YACP,OAAO,EAAE,CAAC;QACX,CAAC;IACF,CAAC;IAES,kCAAY,GAAtB,UAAuB,MAAmB;QAAnB,uBAAA,EAAA,WAAmB;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,IAAI,CAAC,OAAO,oDACR,IAAI,CAAC,cAAc,GACnB,IAAI,CAAC,gBAAgB,EAAE,GACvB,aAAK,CAAC,iBAAiB,CACzB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CACnC,GACE,aAAK,CAAC,uBAAuB,CAC/B,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,CAC/C,GACE,MAAM,CACT,CAAC;IACH,CAAC;IAEM,6BAAO,GAAd;QACC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAW,IAAI,CAAC,KAAK,iBAAc,CAAC,CAAC;QACnE,cAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,wBAAE,GAAT,UAAU,SAAiB,EAAE,QAA0B;QACtD,IAAM,OAAO,GAAG,eAAO,CAAC,KAAK,EAAE,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAEnD,OAAO,OAAO,CAAC;IAChB,CAAC;IAEM,yBAAG,GAAV,UAAW,SAAiB,EAAE,OAAe;;QAC5C,MAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,0CAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IAEM,+BAAS,GAAhB,UAAiB,IAAY;QAC5B,OAAO,IAAI,CAAC,UAAU,CAAC,IAAoB,CAAC,CAAC;IAC9C,CAAC;IAEM,gCAAU,GAAjB;QACC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAChC,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IACF,kBAAC;AAAD,CAAC,AAnHD,IAmHC"}
|
|
@@ -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.
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
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
|
-
|
|
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];
|