@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.
Files changed (46) hide show
  1. package/package.json +11 -1
  2. package/CONTRIBUTING.md +0 -101
  3. package/examples/datatable/checkbox-events-test.html +0 -400
  4. package/examples/datatable/credentials-test.html +0 -423
  5. package/examples/datatable/remote-checkbox-test.html +0 -365
  6. package/examples/datatable/sorting-test.html +0 -258
  7. package/examples/image-input/file-upload-example.html +0 -189
  8. package/examples/modal/persistent.html +0 -205
  9. package/examples/modal/remote-select-dropdown.html +0 -166
  10. package/examples/modal/select-dropdown-container.html +0 -129
  11. package/examples/select/avatar.html +0 -47
  12. package/examples/select/basic-usage.html +0 -39
  13. package/examples/select/country.html +0 -43
  14. package/examples/select/dark-mode.html +0 -93
  15. package/examples/select/description.html +0 -53
  16. package/examples/select/disable-option.html +0 -37
  17. package/examples/select/disable-select.html +0 -35
  18. package/examples/select/dropdowncontainer.html +0 -111
  19. package/examples/select/dynamic-methods.html +0 -273
  20. package/examples/select/formdata-remote.html +0 -161
  21. package/examples/select/global-config.html +0 -81
  22. package/examples/select/icon-multiple.html +0 -50
  23. package/examples/select/icon.html +0 -48
  24. package/examples/select/max-selection.html +0 -38
  25. package/examples/select/modal-container.html +0 -128
  26. package/examples/select/modal-positioning-test.html +0 -338
  27. package/examples/select/modal.html +0 -80
  28. package/examples/select/multiple.html +0 -40
  29. package/examples/select/native-selected.html +0 -64
  30. package/examples/select/placeholder.html +0 -40
  31. package/examples/select/remote-data-preselected.html +0 -283
  32. package/examples/select/remote-data.html +0 -38
  33. package/examples/select/search.html +0 -57
  34. package/examples/select/sizes.html +0 -94
  35. package/examples/select/tags-enhanced.html +0 -86
  36. package/examples/select/tags-icons.html +0 -57
  37. package/examples/select/template-customization.html +0 -61
  38. package/examples/sticky/README.md +0 -158
  39. package/examples/sticky/debug-sticky.html +0 -144
  40. package/examples/sticky/test-runner.html +0 -175
  41. package/examples/sticky/test-sticky-logic.js +0 -369
  42. package/examples/sticky/test-sticky-positioning.html +0 -386
  43. package/examples/toast/example.html +0 -479
  44. package/prettier.config.js +0 -9
  45. package/tsconfig.json +0 -17
  46. package/webpack.config.js +0 -118
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenthemes/ktui",
3
- "version": "1.0.28",
3
+ "version": "1.0.29",
4
4
  "description": "Free & Open-Source Tailwind UI Components by Keenthemes",
5
5
  "homepage": "https://ktui.io",
6
6
  "repository": {
@@ -56,6 +56,16 @@
56
56
  "main": "lib/cjs/index.js",
57
57
  "module": "lib/esm/index.js",
58
58
  "license": "MIT",
59
+ "files": [
60
+ "dist",
61
+ "lib",
62
+ "src",
63
+ "styles",
64
+ "styles.css",
65
+ "package.json",
66
+ "README.md",
67
+ "LICENSE.md"
68
+ ],
59
69
  "scripts": {
60
70
  "test": "echo \"Error: no test specified\" && exit 1",
61
71
  "build": "concurrently \"npm run build:webpack\" \"npm run build:css:once\"",
package/CONTRIBUTING.md DELETED
@@ -1,101 +0,0 @@
1
- # Contributing to KTUI
2
-
3
- Thank you for considering contributing to KTUI! Your contributions help improve the project for everyone.
4
- Please follow these guidelines to ensure a smooth collaboration. 
5
- If you need any help, feel free to reach out us via [@keenthemes](https://x.com/keenthemes).
6
-
7
- ## Getting Started
8
-
9
- 1. **Fork the Repository**: Click the 'Fork' button on the top right of the repository page.
10
- 2. **Clone Your Fork**:
11
- ```sh
12
- git clone https://github.com/keenthemes/ktui.git
13
- cd ktui
14
- ```
15
- 3. **Set Up Upstream Remote**:
16
- ```sh
17
- git remote add upstream https://github.com/keenthemes/ktui.git
18
- ```
19
-
20
- ## Setting Up the Development Environment
21
-
22
- 1. Install dependencies:
23
- ```sh
24
- npm install
25
- ```
26
- 2. Run format:
27
- ```sh
28
- npm run format
29
- ```
30
- 3. Lint your code:
31
- ```sh
32
- npm run lint
33
- ```
34
- 4. Build the project:
35
- ```sh
36
- npm run build
37
- ```
38
- 5. Start development mode (watch for changes):
39
- ```sh
40
- npm run dev
41
- ```
42
-
43
- ### Build Commands
44
-
45
- - **`npm run build`**: Performs a one-off build and exits. Use this for production builds and CI/CD pipelines.
46
- - **`npm run dev`**: Starts development mode with file watching. Use this during development for live reloading when files change.
47
-
48
- ## Format and lint your code
49
-
50
- Ensure your code is formatted and linted before submitting any changes. Run the following commands:
51
-
52
- ```sh
53
- npm run format
54
- npm run lint
55
- ```
56
-
57
- ## Commit Convention
58
-
59
- Please follow the commit message format below:
60
-
61
- - **feat:** All changes that introduce completely new code or new features.
62
- - **fix:** Changes that fix a bug (ideally, reference an issue if present).
63
- - **refactor:** Any code-related change that is not a fix nor a feature.
64
- - **docs:** Changing existing or creating new documentation (e.g., README, usage docs).
65
- - **build:** Changes regarding the build of the software, dependencies, or adding new dependencies.
66
- - **ci:** Changes regarding the configuration of continuous integration (e.g., GitHub Actions, CI systems).
67
- - **chore:** Repository changes that do not fit into any of the above categories.
68
-
69
- **Example commit message:**
70
-
71
- ```sh
72
- feat(components): add new prop to the avatar component
73
- ```
74
-
75
- ## Submitting a Pull Request
76
-
77
- 1. Create a new branch:
78
- ```sh
79
- git checkout -b feature-branch
80
- ```
81
- 2. Make changes and commit:
82
- ```sh
83
- git add .
84
- git commit -m "Add new feature"
85
- ```
86
- 3. Push to your fork:
87
- ```sh
88
- git push origin feature-branch
89
- ```
90
- 4. Open a pull request:
91
- - Go to the [ktui GitHub repository](https://github.com/keenthemes/ktui.git).
92
- - Click on 'New Pull Request'.
93
- - Select your branch and submit the PR.
94
-
95
- ## Code Review
96
-
97
- Code is reviewed under strict terms to make sure it matches ktui code standards and design guidelines.
98
-
99
- ---
100
-
101
- Thank you for contributing! 🚀
package/examples/datatable/checkbox-events-test.html DELETED
@@ -1,400 +0,0 @@
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>DataTable Checkbox Events Test</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen p-4">
12
- <div class="container mx-auto max-w-5xl">
13
- <div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
14
- <div class="mb-6">
15
- <h1 class="text-xl font-bold text-gray-900">DataTable Checkbox Events Test</h1>
16
- </div>
17
-
18
- <!-- Current Selection Display -->
19
- <div class="mb-6">
20
- <h2 class="text-lg font-semibold text-gray-800 mb-3">Current Selection</h2>
21
- <div id="selectionDisplay" class="bg-blue-50 border border-blue-200 rounded-md p-4">
22
- <div class="text-gray-700">
23
- <strong>Checked IDs:</strong> <span id="checkedIds" class="font-mono">[]</span>
24
- </div>
25
- <div class="text-gray-700 mt-2">
26
- <strong>Count:</strong> <span id="checkedCount" class="font-semibold">0</span>
27
- </div>
28
- </div>
29
- </div>
30
-
31
- <!-- Test Controls -->
32
- <div class="mb-6 flex gap-3 flex-wrap">
33
- <button
34
- onclick="testCheckAll()"
35
- class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors font-medium">
36
- Check All
37
- </button>
38
- <button
39
- onclick="testUncheckAll()"
40
- class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors font-medium">
41
- Uncheck All
42
- </button>
43
- <button
44
- onclick="testToggle()"
45
- class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors font-medium">
46
- Toggle All
47
- </button>
48
- </div>
49
-
50
- <!-- DataTable Container -->
51
- <div class="kt-card">
52
- <div class="kt-card-table" data-kt-datatable="true" data-kt-datatable-page-size="5">
53
- <div class="kt-table-wrapper kt-scrollable">
54
- <table id="checkbox-test-table" class="kt-table" data-kt-datatable-table="true">
55
- <thead>
56
- <tr>
57
- <th scope="col" class="w-12">
58
- <input
59
- type="checkbox"
60
- data-kt-datatable-check="true"
61
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
62
- </th>
63
- <th scope="col" class="w-20" data-kt-datatable-column="id">
64
- <span class="kt-table-col">
65
- <span class="kt-table-col-label">ID</span>
66
- </span>
67
- </th>
68
- <th scope="col" class="w-40" data-kt-datatable-column="name">
69
- <span class="kt-table-col">
70
- <span class="kt-table-col-label">Name</span>
71
- </span>
72
- </th>
73
- <th scope="col" class="w-48" data-kt-datatable-column="email">
74
- <span class="kt-table-col">
75
- <span class="kt-table-col-label">Email</span>
76
- </span>
77
- </th>
78
- <th scope="col" class="w-32" data-kt-datatable-column="department">
79
- <span class="kt-table-col">
80
- <span class="kt-table-col-label">Department</span>
81
- </span>
82
- </th>
83
- <th scope="col" class="w-24" data-kt-datatable-column="status">
84
- <span class="kt-table-col">
85
- <span class="kt-table-col-label">Status</span>
86
- </span>
87
- </th>
88
- </tr>
89
- </thead>
90
- <tbody>
91
- <tr>
92
- <td>
93
- <input
94
- type="checkbox"
95
- data-kt-datatable-row-check="true"
96
- value="1"
97
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
98
- </td>
99
- <td>1</td>
100
- <td>John Doe</td>
101
- <td>john.doe@example.com</td>
102
- <td>Engineering</td>
103
- <td><span class="kt-badge kt-badge-success">Active</span></td>
104
- </tr>
105
- <tr>
106
- <td>
107
- <input
108
- type="checkbox"
109
- data-kt-datatable-row-check="true"
110
- value="2"
111
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
112
- </td>
113
- <td>2</td>
114
- <td>Jane Smith</td>
115
- <td>jane.smith@example.com</td>
116
- <td>Marketing</td>
117
- <td><span class="kt-badge kt-badge-success">Active</span></td>
118
- </tr>
119
- <tr>
120
- <td>
121
- <input
122
- type="checkbox"
123
- data-kt-datatable-row-check="true"
124
- value="3"
125
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
126
- </td>
127
- <td>3</td>
128
- <td>Mike Johnson</td>
129
- <td>mike.johnson@example.com</td>
130
- <td>Engineering</td>
131
- <td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
132
- </tr>
133
- <tr>
134
- <td>
135
- <input
136
- type="checkbox"
137
- data-kt-datatable-row-check="true"
138
- value="4"
139
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
140
- </td>
141
- <td>4</td>
142
- <td>Sarah Wilson</td>
143
- <td>sarah.wilson@example.com</td>
144
- <td>Sales</td>
145
- <td><span class="kt-badge kt-badge-success">Active</span></td>
146
- </tr>
147
- <tr>
148
- <td>
149
- <input
150
- type="checkbox"
151
- data-kt-datatable-row-check="true"
152
- value="5"
153
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
154
- </td>
155
- <td>5</td>
156
- <td>David Brown</td>
157
- <td>david.brown@example.com</td>
158
- <td>HR</td>
159
- <td><span class="kt-badge kt-badge-success">Active</span></td>
160
- </tr>
161
- <tr>
162
- <td>
163
- <input
164
- type="checkbox"
165
- data-kt-datatable-row-check="true"
166
- value="6"
167
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
168
- </td>
169
- <td>6</td>
170
- <td>Lisa Davis</td>
171
- <td>lisa.davis@example.com</td>
172
- <td>Engineering</td>
173
- <td><span class="kt-badge kt-badge-primary">Verified</span></td>
174
- </tr>
175
- <tr>
176
- <td>
177
- <input
178
- type="checkbox"
179
- data-kt-datatable-row-check="true"
180
- value="7"
181
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
182
- </td>
183
- <td>7</td>
184
- <td>Tom Anderson</td>
185
- <td>tom.anderson@example.com</td>
186
- <td>Marketing</td>
187
- <td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
188
- </tr>
189
- <tr>
190
- <td>
191
- <input
192
- type="checkbox"
193
- data-kt-datatable-row-check="true"
194
- value="8"
195
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
196
- </td>
197
- <td>8</td>
198
- <td>Emma Taylor</td>
199
- <td>emma.taylor@example.com</td>
200
- <td>Sales</td>
201
- <td><span class="kt-badge kt-badge-success">Active</span></td>
202
- </tr>
203
- <tr>
204
- <td>
205
- <input
206
- type="checkbox"
207
- data-kt-datatable-row-check="true"
208
- value="9"
209
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
210
- </td>
211
- <td>9</td>
212
- <td>Chris Miller</td>
213
- <td>chris.miller@example.com</td>
214
- <td>Engineering</td>
215
- <td><span class="kt-badge kt-badge-success">Active</span></td>
216
- </tr>
217
- <tr>
218
- <td>
219
- <input
220
- type="checkbox"
221
- data-kt-datatable-row-check="true"
222
- value="10"
223
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
224
- </td>
225
- <td>10</td>
226
- <td>Amy Garcia</td>
227
- <td>amy.garcia@example.com</td>
228
- <td>HR</td>
229
- <td><span class="kt-badge kt-badge-success">Active</span></td>
230
- </tr>
231
- </tbody>
232
- </table>
233
- </div>
234
-
235
- <!-- Pagination Info -->
236
- <div class="flex items-center justify-between mt-4">
237
- <div class="flex items-center space-x-2">
238
- <span class="text-sm text-gray-700">Show</span>
239
- <select data-kt-datatable-size="true" class="border border-gray-300 rounded px-2 py-1 bg-white text-gray-900">
240
- <option value="5">5</option>
241
- <option value="10" selected>10</option>
242
- <option value="20">20</option>
243
- <option value="50">50</option>
244
- </select>
245
- <span class="text-sm text-gray-700">entries</span>
246
- </div>
247
- <div data-kt-datatable-info="true" class="text-sm text-gray-700"></div>
248
- </div>
249
-
250
- <!-- Pagination Controls -->
251
- <div class="flex justify-center mt-4">
252
- <div data-kt-datatable-pagination="true" class="flex space-x-1"></div>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <!-- Event Log Section -->
259
- <div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
260
- <div class="flex items-center justify-between mb-3">
261
- <h2 class="text-lg font-semibold text-gray-800">Event Log</h2>
262
- <button
263
- id="clearLog"
264
- onclick="clearEventLog()"
265
- class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
266
- Clear Log
267
- </button>
268
- </div>
269
- <div id="eventLog" class="bg-gray-50 border border-gray-200 rounded-md p-4 h-64 overflow-y-auto font-mono text-sm">
270
- <div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>
271
- </div>
272
- </div>
273
- </div>
274
-
275
- <script src="../../dist/ktui.js"></script>
276
- <script>
277
- let datatableInstance = null;
278
-
279
- // Event log helper functions
280
- function addEventLog(eventName, details = '') {
281
- const logElement = document.getElementById('eventLog');
282
- const timestamp = new Date().toLocaleTimeString();
283
- const logEntry = document.createElement('div');
284
- logEntry.className = 'mb-2 pb-2 border-b border-gray-200';
285
-
286
- let eventColor = 'text-gray-700';
287
- if (eventName === 'checked') {
288
- eventColor = 'text-green-600';
289
- } else if (eventName === 'unchecked') {
290
- eventColor = 'text-red-600';
291
- } else if (eventName === 'changed') {
292
- eventColor = 'text-blue-600';
293
- }
294
-
295
- logEntry.innerHTML = `
296
- <div class="flex items-start gap-2">
297
- <span class="text-gray-500 text-xs">[${timestamp}]</span>
298
- <span class="font-semibold ${eventColor}">${eventName.toUpperCase()}</span>
299
- ${details ? `<span class="text-gray-600">${details}</span>` : ''}
300
- </div>
301
- `;
302
-
303
- // Remove "No events yet" message if it exists
304
- const firstChild = logElement.firstChild;
305
- if (firstChild && firstChild.textContent.includes('No events yet')) {
306
- logElement.removeChild(firstChild);
307
- }
308
-
309
- logElement.insertBefore(logEntry, logElement.firstChild);
310
-
311
- // Keep only last 50 entries
312
- while (logElement.children.length > 50) {
313
- logElement.removeChild(logElement.lastChild);
314
- }
315
- }
316
-
317
- function clearEventLog() {
318
- const logElement = document.getElementById('eventLog');
319
- logElement.innerHTML = '<div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>';
320
- }
321
-
322
- function updateSelectionDisplay() {
323
- if (!datatableInstance) return;
324
- const checkedIds = datatableInstance.getChecked();
325
- document.getElementById('checkedIds').textContent = JSON.stringify(checkedIds);
326
- document.getElementById('checkedCount').textContent = checkedIds.length;
327
- }
328
-
329
- // Test functions
330
- function testCheckAll() {
331
- if (datatableInstance) {
332
- datatableInstance.check();
333
- }
334
- }
335
-
336
- function testUncheckAll() {
337
- if (datatableInstance) {
338
- datatableInstance.uncheck();
339
- }
340
- }
341
-
342
- function testToggle() {
343
- if (datatableInstance) {
344
- datatableInstance.toggle();
345
- }
346
- }
347
-
348
- // Initialize the datatable when page loads
349
- document.addEventListener('DOMContentLoaded', function() {
350
- setTimeout(() => {
351
- try {
352
- // Initialize KTUI components
353
- if (typeof KTDataTable !== 'undefined') {
354
- KTDataTable.init();
355
- }
356
-
357
- // Get the datatable instance
358
- const container = document.querySelector('[data-kt-datatable="true"]');
359
- if (container) {
360
- datatableInstance = KTDataTable.getInstance(container);
361
- if (datatableInstance) {
362
- console.log('✅ DataTable initialized successfully!');
363
-
364
- // Attach event listeners for all checkbox events
365
- datatableInstance.on('checked', function(event) {
366
- const checkedIds = datatableInstance.getChecked();
367
- addEventLog('checked', `Selected ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
368
- updateSelectionDisplay();
369
- });
370
-
371
- datatableInstance.on('unchecked', function(event) {
372
- const checkedIds = datatableInstance.getChecked();
373
- addEventLog('unchecked', `Deselected. Remaining: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
374
- updateSelectionDisplay();
375
- });
376
-
377
- datatableInstance.on('changed', function(event) {
378
- const checkedIds = datatableInstance.getChecked();
379
- addEventLog('changed', `Selection changed. Total: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
380
- updateSelectionDisplay();
381
- });
382
-
383
- // Initial display update
384
- updateSelectionDisplay();
385
- } else {
386
- console.error('❌ Failed to get DataTable instance');
387
- }
388
- } else {
389
- console.error('❌ DataTable container not found');
390
- }
391
- } catch (error) {
392
- console.error('❌ Error initializing DataTable: ' + error.message);
393
- }
394
- }, 100);
395
- });
396
- </script>
397
- </body>
398
-
399
- </html>
400
-