@keenthemes/ktui 1.0.28 → 1.0.29
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/package.json +11 -1
- package/CONTRIBUTING.md +0 -101
- package/examples/datatable/checkbox-events-test.html +0 -400
- package/examples/datatable/credentials-test.html +0 -423
- package/examples/datatable/remote-checkbox-test.html +0 -365
- package/examples/datatable/sorting-test.html +0 -258
- package/examples/image-input/file-upload-example.html +0 -189
- package/examples/modal/persistent.html +0 -205
- package/examples/modal/remote-select-dropdown.html +0 -166
- package/examples/modal/select-dropdown-container.html +0 -129
- package/examples/select/avatar.html +0 -47
- package/examples/select/basic-usage.html +0 -39
- package/examples/select/country.html +0 -43
- package/examples/select/dark-mode.html +0 -93
- package/examples/select/description.html +0 -53
- package/examples/select/disable-option.html +0 -37
- package/examples/select/disable-select.html +0 -35
- package/examples/select/dropdowncontainer.html +0 -111
- package/examples/select/dynamic-methods.html +0 -273
- package/examples/select/formdata-remote.html +0 -161
- package/examples/select/global-config.html +0 -81
- package/examples/select/icon-multiple.html +0 -50
- package/examples/select/icon.html +0 -48
- package/examples/select/max-selection.html +0 -38
- package/examples/select/modal-container.html +0 -128
- package/examples/select/modal-positioning-test.html +0 -338
- package/examples/select/modal.html +0 -80
- package/examples/select/multiple.html +0 -40
- package/examples/select/native-selected.html +0 -64
- package/examples/select/placeholder.html +0 -40
- package/examples/select/remote-data-preselected.html +0 -283
- package/examples/select/remote-data.html +0 -38
- package/examples/select/search.html +0 -57
- package/examples/select/sizes.html +0 -94
- package/examples/select/tags-enhanced.html +0 -86
- package/examples/select/tags-icons.html +0 -57
- package/examples/select/template-customization.html +0 -61
- package/examples/sticky/README.md +0 -158
- package/examples/sticky/debug-sticky.html +0 -144
- package/examples/sticky/test-runner.html +0 -175
- package/examples/sticky/test-sticky-logic.js +0 -369
- package/examples/sticky/test-sticky-positioning.html +0 -386
- package/examples/toast/example.html +0 -479
- package/prettier.config.js +0 -9
- package/tsconfig.json +0 -17
- package/webpack.config.js +0 -118
|
@@ -1,386 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>KTUI Sticky Component - Positioning Test</title>
|
|
7
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
-
<style>
|
|
9
|
-
.test-section {
|
|
10
|
-
min-height: 100vh;
|
|
11
|
-
padding: 2rem;
|
|
12
|
-
border-bottom: 1px solid #e5e7eb;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.sticky-element {
|
|
16
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
-
color: white;
|
|
18
|
-
padding: 1rem;
|
|
19
|
-
border-radius: 8px;
|
|
20
|
-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
21
|
-
font-weight: 600;
|
|
22
|
-
text-align: center;
|
|
23
|
-
min-width: 200px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.sticky-element.active {
|
|
27
|
-
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.position-indicator {
|
|
31
|
-
position: fixed;
|
|
32
|
-
top: 10px;
|
|
33
|
-
right: 10px;
|
|
34
|
-
background: rgba(0, 0, 0, 0.8);
|
|
35
|
-
color: white;
|
|
36
|
-
padding: 0.5rem;
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
font-size: 0.875rem;
|
|
39
|
-
z-index: 9999;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.test-info {
|
|
43
|
-
background: #f3f4f6;
|
|
44
|
-
padding: 1rem;
|
|
45
|
-
border-radius: 8px;
|
|
46
|
-
margin-bottom: 1rem;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.scroll-indicator {
|
|
50
|
-
position: fixed;
|
|
51
|
-
bottom: 20px;
|
|
52
|
-
left: 20px;
|
|
53
|
-
background: rgba(0, 0, 0, 0.8);
|
|
54
|
-
color: white;
|
|
55
|
-
padding: 0.5rem 1rem;
|
|
56
|
-
border-radius: 4px;
|
|
57
|
-
font-size: 0.875rem;
|
|
58
|
-
}
|
|
59
|
-
</style>
|
|
60
|
-
</head>
|
|
61
|
-
<body class="bg-gray-50">
|
|
62
|
-
<!-- Position Indicator -->
|
|
63
|
-
<div class="position-indicator" id="positionIndicator">
|
|
64
|
-
Scroll to test positioning
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<!-- Scroll Indicator -->
|
|
68
|
-
<div class="scroll-indicator" id="scrollIndicator">
|
|
69
|
-
Scroll: 0px
|
|
70
|
-
</div>
|
|
71
|
-
|
|
72
|
-
<!-- Test 1: Top positioning -->
|
|
73
|
-
<div class="test-section">
|
|
74
|
-
<div class="test-info">
|
|
75
|
-
<h2 class="text-xl font-bold mb-2">Test 1: Top Positioning</h2>
|
|
76
|
-
<p>Element should stick to top: 20px when scrolling</p>
|
|
77
|
-
</div>
|
|
78
|
-
<div class="sticky-element"
|
|
79
|
-
data-kt-sticky="true"
|
|
80
|
-
data-kt-sticky-top="20"
|
|
81
|
-
data-kt-sticky-offset="100"
|
|
82
|
-
data-kt-sticky-zindex="1000"
|
|
83
|
-
data-kt-sticky-name="top-test">
|
|
84
|
-
Top: 20px
|
|
85
|
-
</div>
|
|
86
|
-
<div class="mt-8">
|
|
87
|
-
<p>Scroll down to see the element stick to the top with 20px offset.</p>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
<!-- Test 2: Middle positioning -->
|
|
92
|
-
<div class="test-section">
|
|
93
|
-
<div class="test-info">
|
|
94
|
-
<h2 class="text-xl font-bold mb-2">Test 2: Middle (Vertical Center) Positioning</h2>
|
|
95
|
-
<p>Element should be vertically centered when sticky</p>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="sticky-element"
|
|
98
|
-
data-kt-sticky="true"
|
|
99
|
-
data-kt-sticky-middle="true"
|
|
100
|
-
data-kt-sticky-offset="200"
|
|
101
|
-
data-kt-sticky-zindex="1001"
|
|
102
|
-
data-kt-sticky-name="middle-test">
|
|
103
|
-
Middle (Vertical Center)
|
|
104
|
-
</div>
|
|
105
|
-
<div class="mt-8">
|
|
106
|
-
<p>Scroll down to see the element stick to the vertical center of the viewport.</p>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<!-- Test 3: Center positioning -->
|
|
111
|
-
<div class="test-section">
|
|
112
|
-
<div class="test-info">
|
|
113
|
-
<h2 class="text-xl font-bold mb-2">Test 3: Center (Horizontal Center) Positioning</h2>
|
|
114
|
-
<p>Element should be horizontally centered when sticky</p>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="sticky-element"
|
|
117
|
-
data-kt-sticky="true"
|
|
118
|
-
data-kt-sticky-center="true"
|
|
119
|
-
data-kt-sticky-offset="300"
|
|
120
|
-
data-kt-sticky-zindex="1002"
|
|
121
|
-
data-kt-sticky-name="center-test">
|
|
122
|
-
Center (Horizontal)
|
|
123
|
-
</div>
|
|
124
|
-
<div class="mt-8">
|
|
125
|
-
<p>Scroll down to see the element stick to the horizontal center of the viewport.</p>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
<!-- Test 4: Middle + Center positioning -->
|
|
130
|
-
<div class="test-section">
|
|
131
|
-
<div class="test-info">
|
|
132
|
-
<h2 class="text-xl font-bold mb-2">Test 4: Middle + Center (Fully Centered)</h2>
|
|
133
|
-
<p>Element should be both vertically and horizontally centered when sticky</p>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="sticky-element"
|
|
136
|
-
data-kt-sticky="true"
|
|
137
|
-
data-kt-sticky-middle="true"
|
|
138
|
-
data-kt-sticky-center="true"
|
|
139
|
-
data-kt-sticky-offset="400"
|
|
140
|
-
data-kt-sticky-zindex="1003"
|
|
141
|
-
data-kt-sticky-name="middle-center-test">
|
|
142
|
-
Middle + Center
|
|
143
|
-
</div>
|
|
144
|
-
<div class="mt-8">
|
|
145
|
-
<p>Scroll down to see the element stick to the center of the viewport (both axes).</p>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
<!-- Test 5: Bottom positioning -->
|
|
150
|
-
<div class="test-section">
|
|
151
|
-
<div class="test-info">
|
|
152
|
-
<h2 class="text-xl font-bold mb-2">Test 5: Bottom Positioning</h2>
|
|
153
|
-
<p>Element should stick to bottom: 20px when scrolling</p>
|
|
154
|
-
</div>
|
|
155
|
-
<div class="sticky-element"
|
|
156
|
-
data-kt-sticky="true"
|
|
157
|
-
data-kt-sticky-bottom="20"
|
|
158
|
-
data-kt-sticky-offset="500"
|
|
159
|
-
data-kt-sticky-zindex="1004"
|
|
160
|
-
data-kt-sticky-name="bottom-test">
|
|
161
|
-
Bottom: 20px
|
|
162
|
-
</div>
|
|
163
|
-
<div class="mt-8">
|
|
164
|
-
<p>Scroll down to see the element stick to the bottom with 20px offset.</p>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
|
-
<!-- Test 6: Auto positioning with offset calculation -->
|
|
169
|
-
<div class="test-section">
|
|
170
|
-
<div class="test-info">
|
|
171
|
-
<h2 class="text-xl font-bold mb-2">Test 6: Auto Positioning with Offset</h2>
|
|
172
|
-
<p>Element should use calculated offset when start/end is 'auto'</p>
|
|
173
|
-
</div>
|
|
174
|
-
<div class="sticky-element"
|
|
175
|
-
data-kt-sticky="true"
|
|
176
|
-
data-kt-sticky-start="auto"
|
|
177
|
-
data-kt-sticky-top="50"
|
|
178
|
-
data-kt-sticky-offset="600"
|
|
179
|
-
data-kt-sticky-zindex="1005"
|
|
180
|
-
data-kt-sticky-name="auto-test">
|
|
181
|
-
Auto Start + Top: 50px
|
|
182
|
-
</div>
|
|
183
|
-
<div class="mt-8">
|
|
184
|
-
<p>Scroll down to see the element stick with auto-calculated horizontal position.</p>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
|
|
188
|
-
<!-- Test 7: Exclusive positioning (top vs bottom) -->
|
|
189
|
-
<div class="test-section">
|
|
190
|
-
<div class="test-info">
|
|
191
|
-
<h2 class="text-xl font-bold mb-2">Test 7: Exclusive Positioning Logic</h2>
|
|
192
|
-
<p>Only one of top/bottom should be applied (top takes precedence)</p>
|
|
193
|
-
</div>
|
|
194
|
-
<div class="sticky-element"
|
|
195
|
-
data-kt-sticky="true"
|
|
196
|
-
data-kt-sticky-top="30"
|
|
197
|
-
data-kt-sticky-bottom="30"
|
|
198
|
-
data-kt-sticky-offset="700"
|
|
199
|
-
data-kt-sticky-zindex="1006"
|
|
200
|
-
data-kt-sticky-name="exclusive-test">
|
|
201
|
-
Top: 30px (should ignore bottom)
|
|
202
|
-
</div>
|
|
203
|
-
<div class="mt-8">
|
|
204
|
-
<p>This element has both top and bottom set - only top should be applied.</p>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
|
|
208
|
-
<!-- Test 8: RTL Support Test -->
|
|
209
|
-
<div class="test-section">
|
|
210
|
-
<div class="test-info">
|
|
211
|
-
<h2 class="text-xl font-bold mb-2">Test 8: RTL Support (Logical Properties)</h2>
|
|
212
|
-
<p>Element should work correctly in RTL layouts using logical properties</p>
|
|
213
|
-
</div>
|
|
214
|
-
<div class="sticky-element"
|
|
215
|
-
data-kt-sticky="true"
|
|
216
|
-
data-kt-sticky-end="20"
|
|
217
|
-
data-kt-sticky-top="40"
|
|
218
|
-
data-kt-sticky-offset="800"
|
|
219
|
-
data-kt-sticky-zindex="1007"
|
|
220
|
-
data-kt-sticky-name="rtl-test">
|
|
221
|
-
End: 20px, Top: 40px (RTL Ready)
|
|
222
|
-
</div>
|
|
223
|
-
<div class="mt-8">
|
|
224
|
-
<p>This element uses logical properties (end instead of right) for RTL compatibility.</p>
|
|
225
|
-
</div>
|
|
226
|
-
</div>
|
|
227
|
-
|
|
228
|
-
<!-- Additional content for scrolling -->
|
|
229
|
-
<div class="test-section">
|
|
230
|
-
<div class="test-info">
|
|
231
|
-
<h2 class="text-xl font-bold mb-2">Additional Content</h2>
|
|
232
|
-
<p>Scroll through this content to test all sticky elements</p>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="space-y-4">
|
|
235
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
236
|
-
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
237
|
-
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
|
238
|
-
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
|
|
242
|
-
<!-- Test Controls -->
|
|
243
|
-
<div class="test-section">
|
|
244
|
-
<div class="test-info">
|
|
245
|
-
<h2 class="text-xl font-bold mb-2">Test Controls</h2>
|
|
246
|
-
<div class="space-y-2">
|
|
247
|
-
<button onclick="toggleRTL()" class="bg-blue-500 text-white px-4 py-2 rounded">
|
|
248
|
-
Toggle RTL Layout
|
|
249
|
-
</button>
|
|
250
|
-
<button onclick="resetAll()" class="bg-green-500 text-white px-4 py-2 rounded">
|
|
251
|
-
Reset All Sticky Elements
|
|
252
|
-
</button>
|
|
253
|
-
<button onclick="scrollToTop()" class="bg-purple-500 text-white px-4 py-2 rounded">
|
|
254
|
-
Scroll to Top
|
|
255
|
-
</button>
|
|
256
|
-
</div>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
<!-- Load KTUI -->
|
|
261
|
-
<script src="../../dist/ktui.js"></script>
|
|
262
|
-
<script>
|
|
263
|
-
// Wait for KTUI to load
|
|
264
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
265
|
-
console.log('DOM loaded, checking KTUI...');
|
|
266
|
-
console.log('window.KTSticky:', window.KTSticky);
|
|
267
|
-
|
|
268
|
-
if (window.KTSticky) {
|
|
269
|
-
console.log('KTSticky found, initializing...');
|
|
270
|
-
|
|
271
|
-
// Check sticky elements before initialization
|
|
272
|
-
const stickyElements = document.querySelectorAll('[data-kt-sticky]');
|
|
273
|
-
console.log('Found sticky elements:', stickyElements.length);
|
|
274
|
-
|
|
275
|
-
// Initialize all sticky elements
|
|
276
|
-
window.KTSticky.init();
|
|
277
|
-
console.log('KTSticky initialized');
|
|
278
|
-
|
|
279
|
-
// Check if elements were initialized
|
|
280
|
-
const initializedElements = document.querySelectorAll('[data-kt-sticky-initialized]');
|
|
281
|
-
console.log('Initialized sticky elements:', initializedElements.length);
|
|
282
|
-
|
|
283
|
-
// Log viewport height
|
|
284
|
-
console.log('Viewport height:', window.innerHeight);
|
|
285
|
-
|
|
286
|
-
// Check each sticky element
|
|
287
|
-
stickyElements.forEach((element, index) => {
|
|
288
|
-
const computedStyle = window.getComputedStyle(element);
|
|
289
|
-
const height = element.offsetHeight;
|
|
290
|
-
const top = element.getAttribute('data-kt-sticky-top') || '0';
|
|
291
|
-
console.log(`Sticky ${index + 1}: height=${height}, top=${top}, height+top=${height + parseInt(top)}`);
|
|
292
|
-
});
|
|
293
|
-
} else {
|
|
294
|
-
console.error('KTSticky not found!');
|
|
295
|
-
}
|
|
296
|
-
});
|
|
297
|
-
|
|
298
|
-
// Initialize sticky components
|
|
299
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
300
|
-
// Initialize all sticky elements
|
|
301
|
-
if (window.KTSticky) {
|
|
302
|
-
window.KTSticky.init();
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
// Update scroll indicator
|
|
306
|
-
window.addEventListener('scroll', function() {
|
|
307
|
-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
308
|
-
document.getElementById('scrollIndicator').textContent = `Scroll: ${scrollTop}px`;
|
|
309
|
-
|
|
310
|
-
// Update position indicator
|
|
311
|
-
const activeSticky = document.querySelector('[data-kt-sticky-initialized].active');
|
|
312
|
-
if (activeSticky) {
|
|
313
|
-
const name = activeSticky.getAttribute('data-kt-sticky-name');
|
|
314
|
-
const computedStyle = window.getComputedStyle(activeSticky);
|
|
315
|
-
const position = {
|
|
316
|
-
top: computedStyle.top,
|
|
317
|
-
bottom: computedStyle.bottom,
|
|
318
|
-
left: computedStyle.left,
|
|
319
|
-
right: computedStyle.right,
|
|
320
|
-
insetBlockStart: computedStyle.insetBlockStart,
|
|
321
|
-
insetInlineStart: computedStyle.insetInlineStart,
|
|
322
|
-
insetInlineEnd: computedStyle.insetInlineEnd
|
|
323
|
-
};
|
|
324
|
-
|
|
325
|
-
document.getElementById('positionIndicator').innerHTML = `
|
|
326
|
-
Active: ${name}<br>
|
|
327
|
-
Top: ${position.top}<br>
|
|
328
|
-
Bottom: ${position.bottom}<br>
|
|
329
|
-
Left: ${position.left}<br>
|
|
330
|
-
Right: ${position.right}<br>
|
|
331
|
-
InsetBlockStart: ${position.insetBlockStart}<br>
|
|
332
|
-
InsetInlineStart: ${position.insetInlineStart}<br>
|
|
333
|
-
InsetInlineEnd: ${position.insetInlineEnd}
|
|
334
|
-
`;
|
|
335
|
-
} else {
|
|
336
|
-
document.getElementById('positionIndicator').textContent = 'No active sticky elements';
|
|
337
|
-
}
|
|
338
|
-
});
|
|
339
|
-
});
|
|
340
|
-
|
|
341
|
-
// Test functions
|
|
342
|
-
window.toggleRTL = function() {
|
|
343
|
-
const html = document.documentElement;
|
|
344
|
-
const currentDir = html.getAttribute('dir');
|
|
345
|
-
const newDir = currentDir === 'rtl' ? 'ltr' : 'rtl';
|
|
346
|
-
html.setAttribute('dir', newDir);
|
|
347
|
-
|
|
348
|
-
// Reinitialize sticky elements
|
|
349
|
-
if (window.KTSticky) {
|
|
350
|
-
window.KTSticky.init();
|
|
351
|
-
}
|
|
352
|
-
};
|
|
353
|
-
|
|
354
|
-
window.resetAll = function() {
|
|
355
|
-
// Remove all sticky instances
|
|
356
|
-
document.querySelectorAll('[data-kt-sticky-initialized]').forEach(element => {
|
|
357
|
-
const instance = window.KTSticky ? window.KTSticky.getInstance(element) : null;
|
|
358
|
-
if (instance) {
|
|
359
|
-
// Force disable
|
|
360
|
-
element.classList.remove('active');
|
|
361
|
-
element.style.position = '';
|
|
362
|
-
element.style.top = '';
|
|
363
|
-
element.style.bottom = '';
|
|
364
|
-
element.style.left = '';
|
|
365
|
-
element.style.right = '';
|
|
366
|
-
element.style.insetBlockStart = '';
|
|
367
|
-
element.style.insetInlineStart = '';
|
|
368
|
-
element.style.insetInlineEnd = '';
|
|
369
|
-
}
|
|
370
|
-
});
|
|
371
|
-
|
|
372
|
-
// Reinitialize
|
|
373
|
-
if (window.KTSticky) {
|
|
374
|
-
window.KTSticky.init();
|
|
375
|
-
}
|
|
376
|
-
};
|
|
377
|
-
|
|
378
|
-
window.scrollToTop = function() {
|
|
379
|
-
window.scrollTo({
|
|
380
|
-
top: 0,
|
|
381
|
-
behavior: 'smooth'
|
|
382
|
-
});
|
|
383
|
-
};
|
|
384
|
-
</script>
|
|
385
|
-
</body>
|
|
386
|
-
</html>
|