@kupola/kupola 1.2.0 → 1.3.1

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 (97) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +330 -286
  3. package/adapters/axios.d.ts +34 -0
  4. package/adapters/axios.js +122 -0
  5. package/adapters/navios-http.d.ts +110 -0
  6. package/adapters/navios-http.js +151 -0
  7. package/dist/css/accessibility.css +119 -0
  8. package/dist/css/animations.css +224 -0
  9. package/dist/css/brand-themes.css +300 -0
  10. package/dist/css/colors_and_type.css +441 -0
  11. package/dist/css/components-ext.css +4165 -0
  12. package/dist/css/components.css +1483 -0
  13. package/dist/css/responsive.css +697 -0
  14. package/dist/css/scaffold.css +145 -0
  15. package/dist/css/states.css +316 -0
  16. package/dist/css/theme-dark.css +296 -0
  17. package/dist/css/theme-light.css +296 -0
  18. package/dist/css/utilities.css +171 -0
  19. package/dist/kupola.cjs.js +219 -161
  20. package/dist/kupola.cjs.js.map +1 -1
  21. package/dist/kupola.esm.js +6643 -5709
  22. package/dist/kupola.esm.js.map +1 -1
  23. package/dist/kupola.umd.js +219 -161
  24. package/dist/kupola.umd.js.map +1 -1
  25. package/dist/plugins/vite-plugin-kupola.js +120 -0
  26. package/dist/types/kupola.d.ts +421 -323
  27. package/js/calendar.js +334 -25
  28. package/js/carousel.js +182 -48
  29. package/js/collapse.js +148 -34
  30. package/js/color-picker.js +416 -108
  31. package/js/component.js +8 -19
  32. package/js/countdown.js +9 -8
  33. package/js/data-bind.js +73 -16
  34. package/js/datepicker.js +488 -110
  35. package/js/depends.js +710 -0
  36. package/js/dialog.js +4 -2
  37. package/js/drawer.js +172 -8
  38. package/js/dropdown.js +272 -17
  39. package/js/dynamic-tags.js +156 -40
  40. package/js/fileupload.js +9 -8
  41. package/js/form.js +280 -254
  42. package/js/global-events.js +281 -188
  43. package/js/heatmap.js +10 -7
  44. package/js/i18n.js +18 -10
  45. package/js/icons.js +141 -161
  46. package/js/image-preview.js +146 -2
  47. package/js/initializer.js +113 -71
  48. package/js/kupola-core.js +123 -45
  49. package/js/kupola-lifecycle.js +13 -11
  50. package/js/message.js +8 -1
  51. package/js/modal.js +207 -59
  52. package/js/notification.js +8 -1
  53. package/js/numberinput.js +9 -8
  54. package/js/pagination.js +263 -0
  55. package/js/registry.js +29 -12
  56. package/js/select.js +482 -27
  57. package/js/slide-captcha.js +11 -2
  58. package/js/slider.js +442 -25
  59. package/js/statcard.js +9 -7
  60. package/js/table.js +1210 -0
  61. package/js/tag.js +268 -14
  62. package/js/theme.js +14 -43
  63. package/js/timepicker.js +335 -66
  64. package/js/tooltip.js +317 -86
  65. package/js/utils.js +6 -2
  66. package/js/validation.js +6 -2
  67. package/js/virtual-list.js +11 -7
  68. package/js/web-components.js +288 -0
  69. package/package.json +77 -67
  70. package/plugins/vite-plugin-kupola.js +120 -0
  71. package/types/kupola.d.ts +421 -323
  72. package/CHANGELOG.md +0 -130
  73. package/INTEGRATION.md +0 -440
  74. package/PROJECT_SUMMARY.md +0 -312
  75. package/SKILL.md +0 -572
  76. package/dist/utils/utils/Kupola.cs +0 -77
  77. package/dist/utils/utils/Kupola.java +0 -104
  78. package/dist/utils/utils/kupola.go +0 -120
  79. package/dist/utils/utils/kupola.js +0 -63
  80. package/dist/utils/utils/kupola.py +0 -1392
  81. package/dist/utils/utils/kupola.rb +0 -69
  82. package/js/composition-api.js +0 -458
  83. package/js/error-handler.js +0 -181
  84. package/js/http.js +0 -419
  85. package/js/kupola-devtools.js +0 -598
  86. package/js/performance.js +0 -250
  87. package/js/router.js +0 -396
  88. package/js/security.js +0 -189
  89. package/js/test-utils.js +0 -251
  90. package/templates/base.html +0 -30
  91. package/templates/base_dashboard.html +0 -99
  92. package/utils/Kupola.cs +0 -77
  93. package/utils/Kupola.java +0 -104
  94. package/utils/kupola.go +0 -120
  95. package/utils/kupola.js +0 -63
  96. package/utils/kupola.py +0 -1392
  97. package/utils/kupola.rb +0 -69
@@ -1,203 +1,296 @@
1
- class GlobalEventManager {
2
- constructor() {
3
- this.listeners = new Map();
4
- this.scopes = new Map();
5
- }
6
-
7
- on(target, eventType, handler, options = {}) {
8
- const key = this._getKey(target, eventType);
9
-
10
- if (!this.listeners.has(key)) {
11
- this.listeners.set(key, []);
12
- }
13
-
14
- const wrapper = (e) => {
15
- if (handler.before && typeof handler.before === 'function') {
16
- handler.before(e);
17
- }
18
-
19
- const result = handler(e);
20
-
21
- if (handler.after && typeof handler.after === 'function') {
22
- handler.after(e, result);
23
- }
24
-
25
- return result;
26
- };
27
-
28
- const listener = {
29
- handler,
30
- wrapper,
31
- options,
32
- active: true
33
- };
34
-
35
- this.listeners.get(key).push(listener);
36
-
37
- if (options.scope) {
38
- if (!this.scopes.has(options.scope)) {
39
- this.scopes.set(options.scope, []);
40
- }
41
- this.scopes.get(options.scope).push({ target, eventType, handler, wrapper });
42
- }
43
-
44
- target.addEventListener(eventType, wrapper, options);
45
-
46
- const unsubscribe = () => {
47
- target.removeEventListener(eventType, wrapper, options);
48
- if (this.listeners.has(key)) {
49
- const list = this.listeners.get(key);
50
- const idx = list.indexOf(listener);
51
- if (idx !== -1) {
52
- list.splice(idx, 1);
1
+ class GlobalEvents {
2
+ constructor() {
3
+ this._listeners = new Map();
4
+ this._scopeListeners = new Map();
5
+ }
6
+
7
+ on(target, eventName, handler, options = {}) {
8
+ const { scope = null, once = false, passive = false, capture = false } = options;
9
+
10
+ const listenerId = this._generateId();
11
+
12
+ const listener = {
13
+ id: listenerId,
14
+ target,
15
+ eventName,
16
+ handler,
17
+ scope,
18
+ once,
19
+ wrappedHandler: null
20
+ };
21
+
22
+ listener.wrappedHandler = (event) => {
23
+ if (once) {
24
+ this.offById(listenerId);
25
+ }
26
+ handler.call(target, event);
27
+ };
28
+
29
+ const eventKey = this._getEventKey(target, eventName);
30
+
31
+ if (!this._listeners.has(eventKey)) {
32
+ this._listeners.set(eventKey, []);
53
33
  }
54
- }
55
- if (options.scope && this.scopes.has(options.scope)) {
56
- const scopeList = this.scopes.get(options.scope);
57
- const idx = scopeList.findIndex(
58
- s => s.target === target && s.eventType === eventType && s.handler === handler
59
- );
60
- if (idx !== -1) {
61
- scopeList.splice(idx, 1);
34
+ this._listeners.get(eventKey).push(listener);
35
+
36
+ if (scope) {
37
+ if (!this._scopeListeners.has(scope)) {
38
+ this._scopeListeners.set(scope, []);
39
+ }
40
+ this._scopeListeners.get(scope).push(listenerId);
62
41
  }
63
- }
64
- listener.active = false;
65
- };
66
-
67
- listener.unsubscribe = unsubscribe;
68
-
69
- return listener;
70
- }
71
-
72
- off(target, eventType, handler) {
73
- const key = this._getKey(target, eventType);
74
-
75
- if (!this.listeners.has(key)) return;
76
-
77
- const listenerList = this.listeners.get(key);
78
- const index = listenerList.findIndex(l => l.handler === handler);
79
-
80
- if (index !== -1) {
81
- const listener = listenerList[index];
82
- target.removeEventListener(eventType, listener.wrapper, listener.options);
83
- listener.active = false;
84
- listenerList.splice(index, 1);
85
-
86
- if (listener.options.scope) {
87
- this._removeFromScope(listener.options.scope, target, eventType, handler);
88
- }
89
- }
90
- }
91
-
92
- once(target, eventType, handler, options = {}) {
93
- const onceHandler = (e) => {
94
- this.off(target, eventType, onceHandler);
95
- return handler(e);
96
- };
97
-
98
- return this.on(target, eventType, onceHandler, options);
99
- }
100
-
101
- clearScope(scope) {
102
- if (!this.scopes.has(scope)) return;
103
-
104
- const scopeListeners = this.scopes.get(scope);
105
-
106
- scopeListeners.forEach(({ target, eventType, handler, wrapper }) => {
107
- target.removeEventListener(eventType, wrapper);
108
-
109
- const key = this._getKey(target, eventType);
110
- if (this.listeners.has(key)) {
111
- const listenerList = this.listeners.get(key);
112
- const index = listenerList.findIndex(l => l.handler === handler);
113
- if (index !== -1) {
114
- listenerList[index].active = false;
115
- listenerList.splice(index, 1);
42
+
43
+ target.addEventListener(eventName, listener.wrappedHandler, {
44
+ passive,
45
+ capture
46
+ });
47
+
48
+ return {
49
+ unsubscribe: () => this.offById(listenerId)
50
+ };
51
+ }
52
+
53
+ once(target, eventName, handler, options = {}) {
54
+ return this.on(target, eventName, handler, { ...options, once: true });
55
+ }
56
+
57
+ off(target, eventName, handler) {
58
+ const eventKey = this._getEventKey(target, eventName);
59
+
60
+ if (!this._listeners.has(eventKey)) return;
61
+
62
+ const listeners = this._listeners.get(eventKey);
63
+ const filtered = listeners.filter(listener => listener.handler !== handler);
64
+
65
+ listeners.forEach(listener => {
66
+ if (listener.handler === handler) {
67
+ target.removeEventListener(eventName, listener.wrappedHandler);
68
+ this._removeFromScope(listener);
69
+ }
70
+ });
71
+
72
+ if (filtered.length === 0) {
73
+ this._listeners.delete(eventKey);
74
+ } else {
75
+ this._listeners.set(eventKey, filtered);
76
+ }
77
+ }
78
+
79
+ offById(listenerId) {
80
+ for (const [eventKey, listeners] of this._listeners) {
81
+ const index = listeners.findIndex(l => l.id === listenerId);
82
+
83
+ if (index !== -1) {
84
+ const listener = listeners[index];
85
+ listener.target.removeEventListener(listener.eventName, listener.wrappedHandler);
86
+
87
+ listeners.splice(index, 1);
88
+
89
+ if (listeners.length === 0) {
90
+ this._listeners.delete(eventKey);
91
+ }
92
+
93
+ this._removeFromScope(listener);
94
+
95
+ return true;
96
+ }
97
+ }
98
+ return false;
99
+ }
100
+
101
+ offByScope(scope) {
102
+ if (!this._scopeListeners.has(scope)) return;
103
+
104
+ const listenerIds = this._scopeListeners.get(scope);
105
+
106
+ listenerIds.forEach(listenerId => {
107
+ this.offById(listenerId);
108
+ });
109
+
110
+ this._scopeListeners.delete(scope);
111
+ }
112
+
113
+ offAll(target, eventName = null) {
114
+ if (eventName) {
115
+ const eventKey = this._getEventKey(target, eventName);
116
+
117
+ if (!this._listeners.has(eventKey)) return;
118
+
119
+ const listeners = this._listeners.get(eventKey);
120
+
121
+ listeners.forEach(listener => {
122
+ target.removeEventListener(eventName, listener.wrappedHandler);
123
+ this._removeFromScope(listener);
124
+ });
125
+
126
+ this._listeners.delete(eventKey);
127
+ } else {
128
+ for (const [eventKey, listeners] of this._listeners) {
129
+ const [targetId] = eventKey.split(':');
130
+
131
+ if (this._getTargetId(target) === targetId) {
132
+ listeners.forEach(listener => {
133
+ target.removeEventListener(listener.eventName, listener.wrappedHandler);
134
+ this._removeFromScope(listener);
135
+ });
136
+
137
+ this._listeners.delete(eventKey);
138
+ }
139
+ }
140
+ }
141
+ }
142
+
143
+ emit(target, eventName, detail = {}) {
144
+ const event = new CustomEvent(eventName, {
145
+ detail,
146
+ bubbles: true,
147
+ cancelable: true
148
+ });
149
+
150
+ target.dispatchEvent(event);
151
+ return event;
152
+ }
153
+
154
+ emitGlobal(eventName, detail = {}) {
155
+ return this.emit(document, eventName, detail);
156
+ }
157
+
158
+ emitToScope(scope, eventName, detail = {}) {
159
+ if (!this._scopeListeners.has(scope)) return;
160
+
161
+ const listenerIds = this._scopeListeners.get(scope);
162
+ const targets = new Set();
163
+
164
+ for (const [eventKey, listeners] of this._listeners) {
165
+ listeners.forEach(listener => {
166
+ if (listenerIds.includes(listener.id)) {
167
+ targets.add(listener.target);
168
+ }
169
+ });
116
170
  }
117
- }
118
- });
119
-
120
- this.scopes.delete(scope);
121
- }
122
-
123
- _removeFromScope(scope, target, eventType, handler) {
124
- if (!this.scopes.has(scope)) return;
125
-
126
- const scopeListeners = this.scopes.get(scope);
127
- const index = scopeListeners.findIndex(
128
- l => l.target === target && l.eventType === eventType && l.handler === handler
129
- );
130
-
131
- if (index !== -1) {
132
- scopeListeners.splice(index, 1);
133
- }
134
- }
135
-
136
- _getKey(target, eventType) {
137
- const targetName = target === document ? 'document' :
138
- target === window ? 'window' :
139
- target === document.body ? 'body' :
140
- target.nodeName ? target.nodeName :
141
- 'unknown';
142
-
143
- return `${targetName}:${eventType}`;
144
- }
145
-
146
- getListenerCount(target, eventType) {
147
- const key = this._getKey(target, eventType);
148
- return this.listeners.has(key) ? this.listeners.get(key).length : 0;
149
- }
150
-
151
- getAllListenerCounts() {
152
- const counts = {};
153
- this.listeners.forEach((listeners, key) => {
154
- counts[key] = listeners.filter(l => l.active).length;
155
- });
156
- return counts;
157
- }
158
-
159
- cleanup() {
160
- this.listeners.forEach((listenerList, key) => {
161
- const [targetName, eventType] = key.split(':');
162
- let target;
163
-
164
- if (targetName === 'document') target = document;
165
- else if (targetName === 'window') target = window;
166
- else if (targetName === 'body') target = document.body;
167
-
168
- if (target) {
169
- listenerList.forEach(listener => {
170
- target.removeEventListener(eventType, listener.wrapper, listener.options);
171
+
172
+ targets.forEach(target => {
173
+ this.emit(target, eventName, detail);
171
174
  });
172
- }
173
- });
174
-
175
- this.listeners.clear();
176
- this.scopes.clear();
177
- }
175
+ }
176
+
177
+ getListenerCount(target, eventName = null) {
178
+ if (eventName) {
179
+ const eventKey = this._getEventKey(target, eventName);
180
+ return this._listeners.has(eventKey) ? this._listeners.get(eventKey).length : 0;
181
+ }
182
+
183
+ let count = 0;
184
+ const targetId = this._getTargetId(target);
185
+
186
+ for (const [eventKey, listeners] of this._listeners) {
187
+ const [keyTargetId] = eventKey.split(':');
188
+ if (keyTargetId === targetId) {
189
+ count += listeners.length;
190
+ }
191
+ }
192
+
193
+ return count;
194
+ }
195
+
196
+ getScopeListenerCount(scope) {
197
+ return this._scopeListeners.has(scope) ? this._scopeListeners.get(scope).length : 0;
198
+ }
199
+
200
+ hasListeners(target, eventName = null) {
201
+ return this.getListenerCount(target, eventName) > 0;
202
+ }
203
+
204
+ _getEventKey(target, eventName) {
205
+ return `${this._getTargetId(target)}:${eventName}`;
206
+ }
207
+
208
+ _getTargetId(target) {
209
+ if (target === document) return 'document';
210
+ if (target === window) return 'window';
211
+ if (target === document.body) return 'body';
212
+ if (target._kupolaId) return target._kupolaId;
213
+
214
+ target._kupolaId = this._generateId();
215
+ return target._kupolaId;
216
+ }
217
+
218
+ _generateId() {
219
+ return `ge-${Math.random().toString(36).substr(2, 9)}-${Date.now()}`;
220
+ }
221
+
222
+ _removeFromScope(listener) {
223
+ if (!listener.scope || !this._scopeListeners.has(listener.scope)) return;
224
+
225
+ const scopeListeners = this._scopeListeners.get(listener.scope);
226
+ const index = scopeListeners.indexOf(listener.id);
227
+
228
+ if (index !== -1) {
229
+ scopeListeners.splice(index, 1);
230
+
231
+ if (scopeListeners.length === 0) {
232
+ this._scopeListeners.delete(listener.scope);
233
+ }
234
+ }
235
+ }
236
+
237
+ destroy() {
238
+ for (const [eventKey, listeners] of this._listeners) {
239
+ listeners.forEach(listener => {
240
+ listener.target.removeEventListener(listener.eventName, listener.wrappedHandler);
241
+ });
242
+ }
243
+
244
+ this._listeners.clear();
245
+ this._scopeListeners.clear();
246
+ }
247
+ }
248
+
249
+ const globalEvents = new GlobalEvents();
250
+
251
+ function on(target, eventName, handler, options) {
252
+ return globalEvents.on(target, eventName, handler, options);
253
+ }
254
+
255
+ function once(target, eventName, handler, options) {
256
+ return globalEvents.once(target, eventName, handler, options);
178
257
  }
179
258
 
180
- const globalEvents = new GlobalEventManager();
259
+ function off(target, eventName, handler) {
260
+ globalEvents.off(target, eventName, handler);
261
+ }
262
+
263
+ function emit(target, eventName, detail) {
264
+ return globalEvents.emit(target, eventName, detail);
265
+ }
181
266
 
182
- function on(target, eventType, handler, options) {
183
- return globalEvents.on(target, eventType, handler, options);
267
+ function emitGlobal(eventName, detail) {
268
+ return globalEvents.emitGlobal(eventName, detail);
184
269
  }
185
270
 
186
- function off(target, eventType, handler) {
187
- globalEvents.off(target, eventType, handler);
271
+ function offByScope(scope) {
272
+ globalEvents.offByScope(scope);
188
273
  }
189
274
 
190
- function once(target, eventType, handler, options) {
191
- return globalEvents.once(target, eventType, handler, options);
275
+ function offAll(target, eventName) {
276
+ globalEvents.offAll(target, eventName);
192
277
  }
193
278
 
194
- function clearScope(scope) {
195
- globalEvents.clearScope(scope);
279
+ function getListenerCount(target, eventName) {
280
+ return globalEvents.getListenerCount(target, eventName);
196
281
  }
197
282
 
198
- window.GlobalEventManager = GlobalEventManager;
199
- window.globalEvents = globalEvents;
200
- window.on = on;
201
- window.off = off;
202
- window.once = once;
203
- window.clearScope = clearScope;
283
+ export { GlobalEvents, globalEvents, on, once, off, emit, emitGlobal, offByScope, offAll, getListenerCount };
284
+
285
+ if (typeof window !== 'undefined') {
286
+ window.GlobalEvents = GlobalEvents;
287
+ window.globalEvents = globalEvents;
288
+ window.kupolaOn = on;
289
+ window.kupolaOnce = once;
290
+ window.kupolaOff = off;
291
+ window.kupolaEmit = emit;
292
+ window.kupolaEmitGlobal = emitGlobal;
293
+ window.kupolaOffByScope = offByScope;
294
+ window.kupolaOffAll = offAll;
295
+ window.kupolaGetListenerCount = getListenerCount;
296
+ }
package/js/heatmap.js CHANGED
@@ -392,14 +392,17 @@ function createHeatmap(selector, options = {}) {
392
392
  return null;
393
393
  }
394
394
 
395
- if (typeof module !== 'undefined' && module.exports) {
396
- module.exports = { Heatmap, initHeatmaps, initHeatmap, cleanupHeatmap, createHeatmap, generateMockHeatmapData };
397
- } else {
395
+ export { Heatmap, initHeatmaps, initHeatmap, cleanupHeatmap, createHeatmap, generateMockHeatmapData };
396
+
397
+ if (typeof window !== 'undefined') {
398
398
  window.Heatmap = Heatmap;
399
399
  window.initHeatmap = initHeatmap;
400
400
  window.cleanupHeatmap = cleanupHeatmap;
401
- }
402
-
403
- if (window.kupolaInitializer) {
404
- window.kupolaInitializer.register('heatmap', initHeatmap, cleanupHeatmap);
401
+ window.initHeatmaps = initHeatmaps;
402
+ window.createHeatmap = createHeatmap;
403
+ window.generateMockHeatmapData = generateMockHeatmapData;
404
+
405
+ if (window.kupolaInitializer) {
406
+ window.kupolaInitializer.register('heatmap', initHeatmap, cleanupHeatmap);
407
+ }
405
408
  }
package/js/i18n.js CHANGED
@@ -216,13 +216,21 @@ function formatCurrency(number, currency, options = {}) {
216
216
  return kupolaI18n.formatCurrency(number, currency, options);
217
217
  }
218
218
 
219
- window.KupolaI18n = KupolaI18n;
220
- window.kupolaI18n = kupolaI18n;
221
- window.createI18n = createI18n;
222
- window.t = t;
223
- window.n = n;
224
- window.setLocale = setLocale;
225
- window.getLocale = getLocale;
226
- window.formatDate = formatDate;
227
- window.formatNumber = formatNumber;
228
- window.formatCurrency = formatCurrency;
219
+ export {
220
+ KupolaI18n, kupolaI18n, createI18n,
221
+ t, n, setLocale, getLocale,
222
+ formatDate, formatNumber, formatCurrency
223
+ };
224
+
225
+ if (typeof window !== 'undefined') {
226
+ window.KupolaI18n = KupolaI18n;
227
+ window.kupolaI18n = kupolaI18n;
228
+ window.createI18n = createI18n;
229
+ window.t = t;
230
+ window.n = n;
231
+ window.setLocale = setLocale;
232
+ window.getLocale = getLocale;
233
+ window.formatDate = formatDate;
234
+ window.formatNumber = formatNumber;
235
+ window.formatCurrency = formatCurrency;
236
+ }