@kupola/kupola 1.2.0

package/js/dynamic-tags.js

@@ -0,0 +1,156 @@
+class DynamicTags {
+    constructor(element) {
+        this.element = element;
+        this.input = element.querySelector('.ds-dynamic-tags__input');
+        this._listeners = [];
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        this.element.querySelectorAll('.ds-dynamic-tags__remove').forEach(removeBtn => {
+            const removeHandler = (e) => {
+                e.stopPropagation();
+                const tag = removeBtn.closest('.ds-dynamic-tags__tag');
+                if (tag) {
+                    tag.remove();
+                    this.dispatchChange();
+                }
+            };
+            removeBtn.addEventListener('click', removeHandler);
+            this._listeners.push({ el: removeBtn, event: 'click', handler: removeHandler });
+        });
+
+        if (this.input) {
+            const addTag = () => {
+                const value = this.input.value.trim();
+                if (!value) return;
+
+                const tag = document.createElement('span');
+                tag.className = 'ds-dynamic-tags__tag';
+                const textNode = document.createTextNode(value);
+                tag.appendChild(textNode);
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'ds-dynamic-tags__remove';
+                removeBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+                tag.appendChild(removeBtn);
+
+                const tagRemoveHandler = (e) => {
+                    e.stopPropagation();
+                    tag.remove();
+                    this.dispatchChange();
+                };
+                removeBtn.addEventListener('click', tagRemoveHandler);
+                this._listeners.push({ el: removeBtn, event: 'click', handler: tagRemoveHandler });
+
+                this.element.insertBefore(tag, this.input);
+                this.input.value = '';
+                this.input.focus();
+                this.dispatchChange();
+            };
+
+            const keydownHandler = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    addTag();
+                }
+            };
+            this.input.addEventListener('keydown', keydownHandler);
+            this._listeners.push({ el: this.input, event: 'keydown', handler: keydownHandler });
+
+            const clickHandler = () => {
+                this.input.focus();
+            };
+            this.element.addEventListener('click', clickHandler);
+            this._listeners.push({ el: this.element, event: 'click', handler: clickHandler });
+        }
+    }
+
+    addTag(value) {
+        if (!value || !this.input) return;
+        this.input.value = value;
+        this.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    }
+
+    removeTag(index) {
+        const tags = this.element.querySelectorAll('.ds-dynamic-tags__tag');
+        const tag = tags[index];
+        if (tag) {
+            tag.remove();
+            this.dispatchChange();
+        }
+    }
+
+    getTags() {
+        const tags = [];
+        this.element.querySelectorAll('.ds-dynamic-tags__tag').forEach(tag => {
+            tags.push(tag.textContent);
+        });
+        return tags;
+    }
+
+    clearTags() {
+        this.element.querySelectorAll('.ds-dynamic-tags__tag').forEach(tag => {
+            tag.remove();
+        });
+        this.dispatchChange();
+    }
+
+    dispatchChange() {
+        this.element.dispatchEvent(new CustomEvent('ds-dynamic-tags-change', {
+            detail: {
+                tags: this.getTags(),
+                count: this.getTags().length
+            }
+        }));
+    }
+
+    destroy() {
+        this._listeners.forEach(({ el, event, handler }) => {
+            el.removeEventListener(event, handler);
+        });
+        this._listeners = null;
+        this.input = null;
+        this.element = null;
+    }
+}
+
+function initDynamicTags(element) {
+    if (element.__kupolaInitialized) return;
+
+    const instance = new DynamicTags(element);
+    element.__kupolaInstance = instance;
+    element.__kupolaInitialized = true;
+}
+
+function cleanupDynamicTags(element) {
+    if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+    const instance = element.__kupolaInstance;
+    instance.destroy();
+
+    element.__kupolaInstance = null;
+    element.__kupolaInitialized = false;
+}
+
+function initDynamicTagsAll() {
+    document.querySelectorAll('.ds-dynamic-tags').forEach(tags => {
+        initDynamicTags(tags);
+    });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DynamicTags, initDynamicTagsAll, initDynamicTags, cleanupDynamicTags };
+} else {
+    window.DynamicTags = DynamicTags;
+    window.initDynamicTags = initDynamicTags;
+    window.cleanupDynamicTags = cleanupDynamicTags;
+}
+
+if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('dynamic-tags', initDynamicTags, cleanupDynamicTags);
+}

package/js/error-handler.js

@@ -0,0 +1,181 @@
+class KupolaErrorHandler {
+  constructor() {
+    this.handlers = new Map();
+    this.errorLog = [];
+    this.maxLogs = 100;
+    this.globalHandler = null;
+  }
+
+  init() {
+    this._installGlobalHandlers();
+  }
+
+  _installGlobalHandlers() {
+    window.addEventListener('error', (event) => {
+      this.handleError(event.error || event.message, {
+        source: event.filename,
+        line: event.lineno,
+        column: event.colno,
+        type: 'global'
+      });
+    });
+
+    window.addEventListener('unhandledrejection', (event) => {
+      this.handleError(event.reason, {
+        type: 'promise',
+        rejection: true
+      });
+    });
+  }
+
+  setGlobalHandler(handler) {
+    if (typeof handler === 'function') {
+      this.globalHandler = handler;
+    }
+  }
+
+  handleError(error, context = {}) {
+    const errorInfo = this._normalizeError(error, context);
+    
+    this._logError(errorInfo);
+    this._notifyHandlers(errorInfo);
+    
+    if (this.globalHandler) {
+      try {
+        this.globalHandler(errorInfo);
+      } catch (e) {
+        console.error('[KupolaErrorHandler] Error in global handler:', e);
+      }
+    }
+    
+    return errorInfo;
+  }
+
+  _normalizeError(error, context) {
+    const errorInfo = {
+      id: this._generateId(),
+      timestamp: Date.now(),
+      message: '',
+      stack: '',
+      type: context.type || 'unknown',
+      source: context.source || '',
+      line: context.line || 0,
+      column: context.column || 0,
+      component: context.component || '',
+      hook: context.hook || '',
+      args: context.args || [],
+      ...context
+    };
+
+    if (error instanceof Error) {
+      errorInfo.message = error.message;
+      errorInfo.stack = error.stack || '';
+      errorInfo.name = error.name;
+    } else if (typeof error === 'string') {
+      errorInfo.message = error;
+    } else if (error && typeof error === 'object') {
+      errorInfo.message = error.message || JSON.stringify(error);
+      errorInfo.stack = error.stack || '';
+      errorInfo.name = error.name || '';
+    }
+
+    return errorInfo;
+  }
+
+  _generateId() {
+    return `err-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  _logError(errorInfo) {
+    this.errorLog.unshift(errorInfo);
+    if (this.errorLog.length > this.maxLogs) {
+      this.errorLog.pop();
+    }
+    
+    console.error(`[KupolaError] [${errorInfo.type}] ${errorInfo.message}`, errorInfo);
+  }
+
+  _notifyHandlers(errorInfo) {
+    this.handlers.forEach((handler, key) => {
+      try {
+        handler(errorInfo);
+      } catch (e) {
+        console.error(`[KupolaErrorHandler] Error in handler "${key}":`, e);
+      }
+    });
+  }
+
+  on(type, handler) {
+    if (!this.handlers.has(type)) {
+      this.handlers.set(type, []);
+    }
+    this.handlers.get(type).push(handler);
+  }
+
+  off(type, handler) {
+    if (!this.handlers.has(type)) return;
+    
+    const handlers = this.handlers.get(type);
+    const index = handlers.indexOf(handler);
+    if (index > -1) {
+      handlers.splice(index, 1);
+    }
+  }
+
+  getErrorLog() {
+    return [...this.errorLog];
+  }
+
+  clearErrorLog() {
+    this.errorLog = [];
+  }
+
+  getErrorCount() {
+    return this.errorLog.length;
+  }
+
+  getErrorByType(type) {
+    return this.errorLog.filter(err => err.type === type);
+  }
+
+  captureErrors(target, methodNames) {
+    if (!target || !methodNames || !Array.isArray(methodNames)) return;
+
+    methodNames.forEach(methodName => {
+      if (typeof target[methodName] === 'function') {
+        const originalMethod = target[methodName];
+        target[methodName] = function(...args) {
+          try {
+            const result = originalMethod.apply(this, args);
+            if (result instanceof Promise) {
+              return result.catch(error => {
+                kupolaErrorHandler.handleError(error, {
+                  type: 'method',
+                  component: target.constructor?.name || '',
+                  hook: methodName,
+                  args
+                });
+                throw error;
+              });
+            }
+            return result;
+          } catch (error) {
+            kupolaErrorHandler.handleError(error, {
+              type: 'method',
+              component: target.constructor?.name || '',
+              hook: methodName,
+              args
+            });
+            throw error;
+          }
+        };
+      }
+    });
+  }
+}
+
+const kupolaErrorHandler = new KupolaErrorHandler();
+window.kupolaErrorHandler = kupolaErrorHandler;
+window.KupolaErrorHandler = KupolaErrorHandler;
+
+export default KupolaErrorHandler;