@kupola/kupola 1.2.0

package/js/collapse.js

@@ -0,0 +1,127 @@
+class Collapse {
+    constructor(element) {
+        this.element = element;
+        this.headers = [];
+        this._listeners = [];
+        this._init();
+    }
+
+    _init() {
+        const headers = this.element.querySelectorAll('.ds-collapse__header');
+        
+        headers.forEach(header => {
+            const item = header.closest('.ds-collapse__item');
+            const content = header.nextElementSibling;
+            
+            if (!item || !content || !content.classList.contains('ds-collapse__content')) return;
+            
+            const isActive = item.classList.contains('is-active');
+            content.style.height = isActive ? content.scrollHeight + 'px' : '0';
+            
+            const clickHandler = () => {
+                const isExpanded = content.style.height !== '0px';
+                
+                if (isExpanded) {
+                    content.style.height = '0';
+                    item.classList.remove('is-active');
+                } else {
+                    content.style.height = content.scrollHeight + 'px';
+                    item.classList.add('is-active');
+                    
+                    const transitionHandler = function onTransitionEnd() {
+                        content.removeEventListener('transitionend', transitionHandler);
+                        content.style.height = '';
+                    };
+                    content.addEventListener('transitionend', transitionHandler);
+                    this._listeners.push({ el: content, event: 'transitionend', handler: transitionHandler });
+                }
+            };
+            
+            header.addEventListener('click', clickHandler);
+            this.headers.push({ header, item, content, clickHandler });
+            this._listeners.push({ el: header, event: 'click', handler: clickHandler });
+        });
+    }
+
+    destroy() {
+        this._listeners.forEach(({ el, event, handler }) => {
+            el.removeEventListener(event, handler);
+        });
+        this._listeners = null;
+        this.headers = null;
+        this.element = null;
+    }
+
+    toggle(index) {
+        const headerInfo = this.headers[index];
+        if (headerInfo) {
+            headerInfo.clickHandler();
+        }
+    }
+
+    expand(index) {
+        const headerInfo = this.headers[index];
+        if (headerInfo && !headerInfo.item.classList.contains('is-active')) {
+            headerInfo.clickHandler();
+        }
+    }
+
+    collapse(index) {
+        const headerInfo = this.headers[index];
+        if (headerInfo && headerInfo.item.classList.contains('is-active')) {
+            headerInfo.clickHandler();
+        }
+    }
+
+    expandAll() {
+        this.headers.forEach((headerInfo, index) => {
+            if (!headerInfo.item.classList.contains('is-active')) {
+                this.toggle(index);
+            }
+        });
+    }
+
+    collapseAll() {
+        this.headers.forEach((headerInfo, index) => {
+            if (headerInfo.item.classList.contains('is-active')) {
+                this.toggle(index);
+            }
+        });
+    }
+}
+
+function initCollapse(element) {
+    if (element.__kupolaInitialized) return;
+
+    const collapse = new Collapse(element);
+    element.__kupolaInstance = collapse;
+    element.__kupolaInitialized = true;
+}
+
+function cleanupCollapse(element) {
+    if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+    const collapse = element.__kupolaInstance;
+    collapse.destroy();
+
+    element.__kupolaInstance = null;
+    element.__kupolaInitialized = false;
+}
+
+function initCollapses() {
+    document.querySelectorAll('.ds-collapse').forEach(collapse => {
+        initCollapse(collapse);
+    });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { Collapse, initCollapses, initCollapse, cleanupCollapse };
+} else {
+    window.Collapse = Collapse;
+    window.initCollapse = initCollapse;
+    window.cleanupCollapse = cleanupCollapse;
+}
+
+if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('collapse', initCollapse, cleanupCollapse);
+}

package/js/color-picker.js

@@ -0,0 +1,144 @@
+class ColorPicker {
+  constructor(element) {
+    this.element = element;
+    this.trigger = element.querySelector('.ds-color-picker__trigger');
+    this.panel = element.querySelector('.ds-color-picker__panel');
+    this.valueSpan = element.querySelector('.ds-color-picker__value');
+    this.customInput = element.querySelector('.ds-color-picker__input');
+    this.scope = `colorpicker-${Math.random().toString(36).substr(2, 9)}`;
+    
+    this._triggerClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._colorClickHandler = null;
+    this._inputInputHandler = null;
+  }
+
+  init() {
+    if (!this.trigger || !this.panel) return;
+    if (this.element.__kupolaInitialized) return;
+
+    this._triggerClickHandler = (e) => {
+      e.stopPropagation();
+      this.togglePanel();
+    };
+
+    this._colorClickHandler = (e) => {
+      const colorBtn = e.currentTarget;
+      const color = colorBtn.getAttribute('data-color');
+      this.updateColor(color);
+      this.hidePanel();
+    };
+
+    this._inputInputHandler = (e) => {
+      this.updateColor(e.target.value);
+    };
+
+    this._documentClickHandler = (e) => {
+      if (!this.element.contains(e.target)) {
+        this.hidePanel();
+      }
+    };
+
+    this.trigger.addEventListener('click', this._triggerClickHandler);
+
+    this.panel.querySelectorAll('.ds-color-picker__color').forEach(colorBtn => {
+      colorBtn.addEventListener('click', this._colorClickHandler);
+      colorBtn._colorPickerColorHandler = this._colorClickHandler;
+    });
+
+    if (this.customInput) {
+      this.customInput.addEventListener('input', this._inputInputHandler);
+      this.customInput._colorPickerInputHandler = this._inputInputHandler;
+    }
+
+    if (window.globalEvents) {
+      this._documentClickListener = window.globalEvents.on(document, 'click', this._documentClickHandler, { scope: this.scope });
+    } else {
+      document.addEventListener('click', this._documentClickHandler);
+    }
+
+    this.element.__kupolaInitialized = true;
+  }
+
+  togglePanel() {
+    this.panel.classList.toggle('is-visible');
+  }
+
+  hidePanel() {
+    this.panel.classList.remove('is-visible');
+  }
+
+  updateColor(color) {
+    this.trigger.style.backgroundColor = color;
+    if (this.valueSpan) {
+      this.valueSpan.textContent = color.toUpperCase();
+    }
+    if (this.customInput) {
+      this.customInput.value = color;
+    }
+    this.element.dispatchEvent(new CustomEvent('colorchange', { detail: { color } }));
+  }
+
+  destroy() {
+    if (!this.element.__kupolaInitialized) return;
+
+    if (this.trigger && this._triggerClickHandler) {
+      this.trigger.removeEventListener('click', this._triggerClickHandler);
+    }
+
+    if (this.panel) {
+      this.panel.querySelectorAll('.ds-color-picker__color').forEach(colorBtn => {
+        if (colorBtn._colorPickerColorHandler) {
+          colorBtn.removeEventListener('click', colorBtn._colorPickerColorHandler);
+        }
+      });
+    }
+
+    if (this.customInput && this._inputInputHandler) {
+      this.customInput.removeEventListener('input', this._inputInputHandler);
+    }
+
+    if (this._documentClickListener && this._documentClickListener.unsubscribe) {
+      this._documentClickListener.unsubscribe();
+    } else if (this._documentClickHandler) {
+      document.removeEventListener('click', this._documentClickHandler);
+    }
+
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._triggerClickHandler = null;
+    this._colorClickHandler = null;
+    this._inputInputHandler = null;
+    this.element.__kupolaInitialized = false;
+  }
+}
+
+function initColorPicker(element) {
+  const picker = new ColorPicker(element);
+  picker.init();
+  element._kupolaColorPicker = picker;
+}
+
+function initColorPickers(root = document) {
+  root.querySelectorAll('.ds-color-picker').forEach(picker => {
+    initColorPicker(picker);
+  });
+}
+
+function cleanupColorPicker(picker) {
+  if (picker._kupolaColorPicker) {
+    picker._kupolaColorPicker.destroy();
+    picker._kupolaColorPicker = null;
+  }
+}
+
+function cleanupAllColorPickers() {
+  document.querySelectorAll('.ds-color-picker').forEach(picker => {
+    cleanupColorPicker(picker);
+  });
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('color-picker', initColorPicker, cleanupColorPicker);
+}

package/js/component.js

@@ -0,0 +1,276 @@
+class KupolaComponent {
+  constructor(element) {
+    this.element = element;
+    this.isMounted = false;
+    this.isDestroyed = false;
+    this.props = this._parseProps();
+    this.state = {};
+    this.slots = this._parseSlots();
+    this._eventListeners = {};
+    this._appliedMixins = [];
+    this.lifecycle = window.KupolaLifecycle 
+      ? new window.KupolaLifecycle()
+      : {
+          on: () => () => {},
+          emit: () => {},
+          bootstrap: () => {},
+          mount: () => {},
+          update: () => {},
+          unmount: () => {},
+          destroy: () => {},
+          state: 'created'
+        };
+    this.setupContext = null;
+  }
+
+  _parseProps() {
+    const props = {};
+    for (const attr of this.element.attributes) {
+      if (attr.name.startsWith('data-prop-')) {
+        const name = attr.name.replace('data-prop-', '');
+        let value = attr.value;
+        try {
+          value = JSON.parse(value);
+        } catch (e) {}
+        props[name] = value;
+      }
+    }
+    return props;
+  }
+
+  _parseSlots() {
+    const slots = {};
+    const slotElements = this.element.querySelectorAll('[data-slot]');
+    
+    slotElements.forEach(slotEl => {
+      const slotName = slotEl.getAttribute('data-slot') || 'default';
+      slots[slotName] = slotEl.innerHTML.trim();
+      slotEl.remove();
+    });
+    
+    if (!slots.default && this.element.children.length > 0) {
+      slots.default = this.element.innerHTML.trim();
+    }
+    
+    return slots;
+  }
+
+  $slot(name = 'default') {
+    return this.slots[name] || '';
+  }
+
+  $emit(eventName, data) {
+    const handlers = this._eventListeners[eventName] || [];
+    handlers.forEach(handler => {
+      try {
+        handler(data);
+      } catch (e) {
+        console.error(`Error in event handler for ${eventName}:`, e);
+      }
+    });
+    
+    if (this.element) {
+      const customEvent = new CustomEvent(`kupola:${eventName}`, {
+        detail: data,
+        bubbles: true,
+        cancelable: true
+      });
+      this.element.dispatchEvent(customEvent);
+    }
+  }
+
+  $on(eventName, handler) {
+    if (!this._eventListeners[eventName]) {
+      this._eventListeners[eventName] = [];
+    }
+    this._eventListeners[eventName].push(handler);
+    return handler;
+  }
+
+  $off(eventName, handler) {
+    if (this._eventListeners[eventName]) {
+      this._eventListeners[eventName] = this._eventListeners[eventName].filter(cb => cb !== handler);
+    }
+  }
+
+  async setProps(newProps) {
+    try {
+      this.props = { ...this.props, ...newProps };
+      await this.lifecycle.update();
+      this.setupContext?._executeUpdated();
+    } catch (error) {
+      console.error(`[KupolaComponent] Error in setProps for "${this.constructor.name}":`, error);
+      
+      if (this.lifecycle && typeof this.lifecycle._handleError === 'function') {
+        await this.lifecycle._handleError({ phase: 'update', hook: 'setProps', error, args: [newProps] });
+      }
+    }
+  }
+
+  async setState(newState) {
+    try {
+      this.state = { ...this.state, ...newState };
+      await this.lifecycle.update();
+      this.setupContext?._executeUpdated();
+    } catch (error) {
+      console.error(`[KupolaComponent] Error in setState for "${this.constructor.name}":`, error);
+      
+      if (this.lifecycle && typeof this.lifecycle._handleError === 'function') {
+        await this.lifecycle._handleError({ phase: 'update', hook: 'setState', error, args: [newState] });
+      }
+    }
+  }
+
+  async mount() {
+    if (this.isMounted || this.isDestroyed) return;
+
+    try {
+      this._bindLifecycleHooks();
+
+      await this.lifecycle.bootstrap();
+
+      if (window._setCurrentSetupContext && window.SetupContext) {
+        this.setupContext = new window.SetupContext(this);
+        window._setCurrentSetupContext(this.setupContext);
+        
+        if (typeof this.setup === 'function') {
+          const result = this.setup();
+          if (result instanceof Promise) {
+            await result;
+          }
+        }
+      }
+
+      this.isMounted = true;
+      await this.lifecycle.mount();
+
+      this.setupContext?._executeMounted();
+      
+      if (window._clearSetupContext) {
+        window._clearSetupContext();
+      }
+    } catch (error) {
+      console.error(`[KupolaComponent] Error mounting component "${this.constructor.name}":`, error);
+      
+      if (this.lifecycle && typeof this.lifecycle._handleError === 'function') {
+        await this.lifecycle._handleError({ phase: 'mount', hook: 'component', error, args: [] });
+      }
+      
+      if (typeof this.renderError === 'function') {
+        try {
+          this.renderError(error);
+        } catch (e) {
+          console.error(`[KupolaComponent] Error in renderError for "${this.constructor.name}":`, e);
+        }
+      } else {
+        this.element.innerHTML = `
+          <div style="padding: 16px; background: #fee2e2; border: 1px solid #fecaca; border-radius: 8px; color: #991b1b;">
+            <div style="font-weight: bold; margin-bottom: 8px;">Component Error</div>
+            <div style="font-size: 12px; white-space: pre-wrap;">${error.message}</div>
+          </div>
+        `;
+      }
+    }
+  }
+
+  _bindLifecycleHooks() {
+    if (this._hooksBound) return;
+    
+    const hookMap = {
+      beforeMount: 'beforeMount',
+      render: ['mount', 'update'],
+      afterMount: 'afterMount',
+      updated: 'afterUpdate',
+      beforeUnmount: 'beforeUnmount',
+      afterUnmount: 'afterUnmount',
+      renderError: 'errorBoundary'
+    };
+    
+    let proto = Object.getPrototypeOf(this);
+    const registeredHooks = new Set();
+    
+    while (proto && proto.constructor !== Object && proto.constructor !== KupolaComponent) {
+      for (const [methodName, lifecyclePhase] of Object.entries(hookMap)) {
+        if (registeredHooks.has(methodName)) continue;
+        
+        if (proto.hasOwnProperty(methodName)) {
+          if (Array.isArray(lifecyclePhase)) {
+            lifecyclePhase.forEach(phase => {
+              if (methodName === 'render') {
+                this.lifecycle.on(phase, () => this.render?.());
+              }
+            });
+          } else if (methodName === 'renderError') {
+            this.lifecycle.on(lifecyclePhase, (errorInfo) => {
+              this.renderError(errorInfo.error);
+              return 'handled';
+            });
+          } else {
+            this.lifecycle.on(lifecyclePhase, () => this[methodName]?.());
+          }
+          registeredHooks.add(methodName);
+        }
+      }
+      proto = Object.getPrototypeOf(proto);
+    }
+    
+    this._hooksBound = true;
+  }
+
+  async unmount() {
+    if (!this.isMounted || this.isDestroyed) return;
+
+    try {
+      this.setupContext?._executeUnmounted();
+      
+      await this.lifecycle.unmount();
+      this.isMounted = false;
+      this.isDestroyed = true;
+      await this.lifecycle.destroy();
+    } catch (error) {
+      console.error(`[KupolaComponent] Error unmounting component "${this.constructor.name}":`, error);
+      
+      if (this.lifecycle && typeof this.lifecycle._handleError === 'function') {
+        await this.lifecycle._handleError({ phase: 'unmount', hook: 'component', error, args: [] });
+      }
+      
+      this.isMounted = false;
+      this.isDestroyed = true;
+    }
+  }
+
+  beforeMount() {}
+  afterMount() {}
+  beforeUnmount() {}
+  afterUnmount() {}
+  render() {}
+  renderError(error) {}
+  updated() {}
+  setup() {}
+}
+
+function applyMixin(componentClass, mixin) {
+  Object.keys(mixin).forEach(key => {
+    if (key === 'constructor') return;
+    if (typeof mixin[key] === 'function') {
+      const original = componentClass.prototype[key];
+      if (original) {
+        componentClass.prototype[key] = function(...args) {
+          mixin[key].apply(this, args);
+          return original.apply(this, args);
+        };
+      } else {
+        componentClass.prototype[key] = mixin[key];
+      }
+    } else {
+      componentClass.prototype[key] = mixin[key];
+    }
+  });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { KupolaComponent, applyMixin };
+} else {
+  window.KupolaComponent = KupolaComponent;
+  window.applyMixin = applyMixin;
+}