@kupola/kupola 1.2.0

package/js/datepicker.js

@@ -0,0 +1,270 @@
+class Datepicker {
+  constructor(element) {
+    this.element = element;
+    this.input = element.querySelector('input');
+    this.icon = element.querySelector('.ds-datepicker__icon');
+    this.calendarEl = element.querySelector('.ds-datepicker__calendar');
+    this.scope = `datepicker-${Math.random().toString(36).substr(2, 9)}`;
+    
+    this._iconClickHandler = null;
+    this._inputClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._resizeHandler = null;
+    this._resizeListener = null;
+  }
+
+  init() {
+    if (!this.calendarEl) return;
+    if (this.element.__kupolaInitialized) return;
+
+    this._iconClickHandler = (e) => this.toggleCalendar(e);
+    this._inputClickHandler = (e) => this.toggleCalendar(e);
+
+    if (this.icon) {
+      this.icon.addEventListener('click', this._iconClickHandler);
+    }
+
+    this.input.addEventListener('click', this._inputClickHandler);
+
+    if (window.globalEvents) {
+      this._documentClickListener = window.globalEvents.on(document, 'click', (e) => this.hideCalendar(e), { scope: this.scope });
+      this._resizeListener = window.globalEvents.on(window, 'resize', () => this.resizeHandler(), { scope: this.scope });
+    } else {
+      document.addEventListener('click', (e) => this.hideCalendar(e));
+      window.addEventListener('resize', () => this.resizeHandler());
+      this._documentClickHandler = (e) => this.hideCalendar(e);
+      this._resizeHandler = () => this.resizeHandler();
+    }
+
+    this.element.__kupolaInitialized = true;
+    this.initCalendar();
+  }
+
+  calculatePosition() {
+    const pickerRect = this.element.getBoundingClientRect();
+    const calendarRect = this.calendarEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    
+    const spaceBelow = viewportHeight - pickerRect.bottom;
+    const spaceAbove = pickerRect.top;
+    const calendarHeight = calendarRect.height || 280;
+    
+    if (spaceBelow >= calendarHeight) {
+      this.calendarEl.style.top = 'calc(100% + 4px)';
+      this.calendarEl.style.bottom = 'auto';
+    } else if (spaceAbove >= calendarHeight) {
+      this.calendarEl.style.top = 'auto';
+      this.calendarEl.style.bottom = 'calc(100% + 4px)';
+    } else {
+      this.calendarEl.style.top = 'calc(100% + 4px)';
+      this.calendarEl.style.bottom = 'auto';
+    }
+  }
+
+  toggleCalendar(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const isVisible = this.calendarEl.style.display === 'block';
+    
+    document.querySelectorAll('.ds-datepicker__calendar').forEach(c => {
+      c.style.display = 'none';
+      c.setAttribute('hidden', '');
+    });
+    
+    if (!isVisible) {
+      this.calendarEl.style.display = 'block';
+      this.calendarEl.removeAttribute('hidden');
+      this.calculatePosition();
+    }
+  }
+
+  hideCalendar(e) {
+    if (!this.element.contains(e.target)) {
+      this.calendarEl.style.display = 'none';
+      this.calendarEl.setAttribute('hidden', '');
+    }
+  }
+
+  resizeHandler() {
+    if (this.calendarEl.style.display === 'block') {
+      this.calculatePosition();
+    }
+  }
+
+  initCalendar() {
+    const calendar = this.calendarEl;
+    const input = this.input;
+    const titleEl = calendar.querySelector('.ds-datepicker__title');
+    const daysEl = calendar.querySelector('.ds-datepicker__days');
+    const prevBtn = calendar.querySelector('.ds-datepicker__nav--prev');
+    const nextBtn = calendar.querySelector('.ds-datepicker__nav--next');
+    
+    let currentDate = new Date();
+    if (input.value) {
+      const parts = input.value.split('-');
+      if (parts.length === 3) {
+        currentDate = new Date(parts[0], parts[1] - 1, parts[2]);
+      }
+    }
+    
+    function renderCalendar() {
+      daysEl.querySelectorAll('.ds-datepicker__day').forEach(dayEl => {
+        if (dayEl._dayClickHandler) {
+          dayEl.removeEventListener('click', dayEl._dayClickHandler);
+        }
+      });
+      
+      daysEl.innerHTML = '';
+      
+      const year = currentDate.getFullYear();
+      const month = currentDate.getMonth();
+      
+      titleEl.textContent = `${year} ${['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][month]}`;
+      
+      const firstDay = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      
+      for (let i = 0; i < firstDay; i++) {
+        const emptyDay = document.createElement('span');
+        emptyDay.className = 'ds-datepicker__day--empty';
+        daysEl.appendChild(emptyDay);
+      }
+      
+      for (let day = 1; day <= daysInMonth; day++) {
+        const dayEl = document.createElement('button');
+        dayEl.className = 'ds-datepicker__day';
+        dayEl.textContent = day;
+        
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        if (input.value === dateStr) {
+          dayEl.classList.add('is-selected');
+        }
+        
+        const today = new Date();
+        const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+        if (dateStr === todayStr) {
+          dayEl.classList.add('is-today');
+        }
+        
+        const dayClickHandler = () => {
+          input.value = dateStr;
+          calendar.style.display = 'none';
+          calendar.setAttribute('hidden', '');
+          input.dispatchEvent(new Event('change'));
+        };
+        
+        dayEl.addEventListener('click', dayClickHandler);
+        dayEl._dayClickHandler = dayClickHandler;
+        
+        daysEl.appendChild(dayEl);
+      }
+    }
+    
+    const prevClickHandler = (e) => {
+      e.stopPropagation();
+      currentDate.setMonth(currentDate.getMonth() - 1);
+      renderCalendar();
+    };
+    
+    const nextClickHandler = (e) => {
+      e.stopPropagation();
+      currentDate.setMonth(currentDate.getMonth() + 1);
+      renderCalendar();
+    };
+    
+    if (prevBtn) {
+      prevBtn.addEventListener('click', prevClickHandler);
+      prevBtn._prevClickHandler = prevClickHandler;
+    }
+    
+    if (nextBtn) {
+      nextBtn.addEventListener('click', nextClickHandler);
+      nextBtn._nextClickHandler = nextClickHandler;
+    }
+    
+    calendar._calendarInitialized = true;
+    renderCalendar();
+  }
+
+  destroy() {
+    if (!this.element.__kupolaInitialized) return;
+
+    if (this.icon && this._iconClickHandler) {
+      this.icon.removeEventListener('click', this._iconClickHandler);
+    }
+
+    if (this.input && this._inputClickHandler) {
+      this.input.removeEventListener('click', this._inputClickHandler);
+    }
+
+    if (this._documentClickListener && this._documentClickListener.unsubscribe) {
+      this._documentClickListener.unsubscribe();
+    } else if (this._documentClickHandler) {
+      document.removeEventListener('click', this._documentClickHandler);
+    }
+
+    if (this._resizeListener && this._resizeListener.unsubscribe) {
+      this._resizeListener.unsubscribe();
+    } else if (this._resizeHandler) {
+      window.removeEventListener('resize', this._resizeHandler);
+    }
+
+    if (this.calendarEl) {
+      const daysEl = this.calendarEl.querySelector('.ds-datepicker__days');
+      if (daysEl) {
+        daysEl.querySelectorAll('.ds-datepicker__day').forEach(dayEl => {
+          if (dayEl._dayClickHandler) {
+            dayEl.removeEventListener('click', dayEl._dayClickHandler);
+          }
+        });
+      }
+      const prevBtn = this.calendarEl.querySelector('.ds-datepicker__nav--prev');
+      const nextBtn = this.calendarEl.querySelector('.ds-datepicker__nav--next');
+      if (prevBtn && prevBtn._prevClickHandler) {
+        prevBtn.removeEventListener('click', prevBtn._prevClickHandler);
+      }
+      if (nextBtn && nextBtn._nextClickHandler) {
+        nextBtn.removeEventListener('click', nextBtn._nextClickHandler);
+      }
+    }
+
+    this._documentClickHandler = null;
+    this._resizeHandler = null;
+    this._documentClickListener = null;
+    this._resizeListener = null;
+    this._iconClickHandler = null;
+    this._inputClickHandler = null;
+    this.element.__kupolaInitialized = false;
+  }
+}
+
+function initDatepicker(element) {
+  const picker = new Datepicker(element);
+  picker.init();
+  element._kupolaDatepicker = picker;
+}
+
+function initDatepickers(root = document) {
+  root.querySelectorAll('.ds-datepicker').forEach(picker => {
+    initDatepicker(picker);
+  });
+}
+
+function cleanupDatepicker(picker) {
+  if (picker._kupolaDatepicker) {
+    picker._kupolaDatepicker.destroy();
+    picker._kupolaDatepicker = null;
+  }
+}
+
+function cleanupAllDatepickers() {
+  document.querySelectorAll('.ds-datepicker').forEach(picker => {
+    cleanupDatepicker(picker);
+  });
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('datepicker', initDatepicker, cleanupDatepicker);
+}

package/js/dialog.js

@@ -0,0 +1,131 @@
+class Dialog {
+  static normal(options = {}) {
+    return this._create({ type: 'normal', ...options });
+  }
+  
+  static success(options = {}) {
+    return this._create({ type: 'success', ...options });
+  }
+  
+  static warning(options = {}) {
+    return this._create({ type: 'warning', ...options });
+  }
+  
+  static error(options = {}) {
+    return this._create({ type: 'error', ...options });
+  }
+  
+  static info(options = {}) {
+    return this._create({ type: 'info', ...options });
+  }
+  
+  static confirm(options = {}) {
+    return this._create({ type: 'confirm', ...options });
+  }
+  
+  static _create(options) {
+    const {
+      type = 'normal',
+      title = '',
+      content = '',
+      onConfirm,
+      onCancel
+    } = options;
+    
+    const icons = {
+      normal: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+      success: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>`,
+      warning: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>`,
+      error: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+      info: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+      confirm: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>`
+    };
+    
+    const container = document.createElement('div');
+    container.className = 'ds-modal-container';
+    container.innerHTML = `
+      <div class="ds-modal-mask">
+        <div class="ds-modal" style="max-width: 360px">
+          <div class="ds-modal__body" style="text-align: center; padding: 24px 16px;">
+            <div class="ds-dialog__icon ds-dialog__icon--${type}">${icons[type]}</div>
+            ${title ? '<div class="ds-dialog__title"></div>' : ''}
+            <div class="ds-dialog__content"></div>
+            <div class="ds-dialog__actions">
+              ${type === 'confirm' || onCancel ? `<button class="ds-btn ds-btn--ghost" data-dialog-cancel>Cancel</button>` : ''}
+              <button class="ds-btn ${type === 'confirm' ? 'ds-btn--brand' : 'ds-btn--ghost'}" data-dialog-confirm>
+                ${type === 'confirm' ? 'Confirm' : 'OK'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    document.body.appendChild(container);
+    
+    if (title) container.querySelector('.ds-dialog__title').textContent = title;
+    container.querySelector('.ds-dialog__content').textContent = content;
+    
+    const mask = container.querySelector('.ds-modal-mask');
+    const confirmBtn = container.querySelector('[data-dialog-confirm]');
+    const cancelBtn = container.querySelector('[data-dialog-cancel]');
+    
+    const keydownHandler = function(e) {
+      if (e.key === 'Escape') {
+        if (onCancel) onCancel();
+        close();
+      }
+    };
+    
+    const maskClickHandler = function(e) {
+      if (e.target === mask) {
+        if (onCancel) onCancel();
+        close();
+      }
+    };
+    
+    const confirmClickHandler = function() {
+      if (onConfirm) onConfirm();
+      close();
+    };
+    
+    const cancelClickHandler = function() {
+      if (onCancel) onCancel();
+      close();
+    };
+    
+    const close = () => {
+      mask.classList.remove('is-visible');
+      document.body.style.overflow = '';
+      document.removeEventListener('keydown', keydownHandler);
+      mask.removeEventListener('click', maskClickHandler);
+      if (confirmBtn) {
+        confirmBtn.removeEventListener('click', confirmClickHandler);
+      }
+      if (cancelBtn) {
+        cancelBtn.removeEventListener('click', cancelClickHandler);
+      }
+      setTimeout(() => container.remove(), 300);
+    };
+    
+    mask.classList.add('is-visible');
+    document.body.style.overflow = 'hidden';
+    
+    if (confirmBtn) {
+      confirmBtn.addEventListener('click', confirmClickHandler);
+    }
+    
+    if (cancelBtn) {
+      cancelBtn.addEventListener('click', cancelClickHandler);
+    }
+    
+    mask.addEventListener('click', maskClickHandler);
+    document.addEventListener('keydown', keydownHandler);
+    
+    return { close };
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = Dialog;
+}

package/js/drawer.js

@@ -0,0 +1,118 @@
+class Drawer {
+    constructor(element) {
+        this.element = element;
+        this.mask = element.querySelector('.ds-drawer-mask');
+        this.drawerEl = element.querySelector('.ds-drawer');
+        this._bindEvents();
+    }
+
+    _bindEvents() {
+        const closeBtn = this.mask?.querySelector('.ds-drawer__close');
+        const cancelBtn = this.mask?.querySelector('.ds-drawer__footer .ds-btn--ghost');
+        const confirmBtn = this.mask?.querySelector('.ds-drawer__footer .ds-btn--brand');
+
+        this.closeDrawer = () => {
+            if (this.mask) {
+                this.mask.classList.remove('is-visible');
+            }
+            if (this.drawerEl) {
+                this.drawerEl.classList.remove('is-visible');
+            }
+        };
+
+        this.handleMaskClick = (e) => {
+            if (e.target === this.mask) {
+                this.closeDrawer();
+            }
+        };
+
+        if (this.mask) {
+            this.mask.addEventListener('click', this.handleMaskClick);
+        }
+
+        if (closeBtn) {
+            closeBtn.addEventListener('click', this.closeDrawer);
+        }
+
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', this.closeDrawer);
+        }
+
+        if (confirmBtn) {
+            confirmBtn.addEventListener('click', this.closeDrawer);
+        }
+
+        this._listeners = [
+            { el: this.mask, event: 'click', handler: this.handleMaskClick },
+            { el: closeBtn, event: 'click', handler: this.closeDrawer },
+            { el: cancelBtn, event: 'click', handler: this.closeDrawer },
+            { el: confirmBtn, event: 'click', handler: this.closeDrawer }
+        ].filter(item => item.el);
+    }
+
+    destroy() {
+        this._listeners?.forEach(({ el, event, handler }) => {
+            el.removeEventListener(event, handler);
+        });
+        this._listeners = null;
+        this.mask = null;
+        this.drawerEl = null;
+        this.element = null;
+    }
+
+    open() {
+        if (this.mask) {
+            this.mask.classList.add('is-visible');
+        }
+        if (this.drawerEl) {
+            this.drawerEl.classList.add('is-visible');
+        }
+    }
+
+    close() {
+        this.closeDrawer();
+    }
+}
+
+function initDrawer(element) {
+    if (element.__kupolaInitialized) return;
+
+    const drawer = new Drawer(element);
+    element.__kupolaInstance = drawer;
+    element.__kupolaInitialized = true;
+}
+
+function cleanupDrawer(element) {
+    if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+    const drawer = element.__kupolaInstance;
+    drawer.destroy();
+
+    element.__kupolaInstance = null;
+    element.__kupolaInitialized = false;
+}
+
+function initDrawers() {
+    document.querySelectorAll('[data-drawer]').forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            const drawerId = trigger.getAttribute('data-drawer');
+            const drawer = document.getElementById(drawerId);
+
+            if (!drawer) return;
+
+            initDrawer(drawer);
+            drawer.__kupolaInstance?.open();
+        });
+    });
+
+    document.querySelectorAll('.ds-drawer-mask').forEach(mask => {
+        const drawerEl = mask.parentElement;
+        if (drawerEl) {
+            initDrawer(drawerEl);
+        }
+    });
+}
+
+if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('drawer', initDrawer, cleanupDrawer);
+}

package/js/dropdown.js

@@ -0,0 +1,122 @@
+class Dropdown {
+  constructor(element) {
+    this.element = element;
+    this.trigger = element.querySelector('.ds-dropdown__trigger');
+    this.menu = element.querySelector('.ds-dropdown__menu');
+    this.triggerText = this.trigger ? this.trigger.querySelector('span') : null;
+    this.scope = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+    
+    this._triggerClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._itemClickHandler = null;
+  }
+
+  init() {
+    if (!this.trigger || !this.menu) return;
+    if (this.element.__kupolaInitialized) return;
+
+    this._itemClickHandler = (e) => {
+      const item = e.currentTarget;
+      if (this.triggerText) {
+        this.triggerText.textContent = item.textContent.trim();
+      }
+      this.hideMenu();
+    };
+
+    this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
+      item.addEventListener('click', this._itemClickHandler);
+      item._dropdownItemClickHandler = this._itemClickHandler;
+    });
+
+    this._triggerClickHandler = (e) => {
+      e.stopPropagation();
+      this.toggleMenu();
+    };
+
+    this.trigger.addEventListener('click', this._triggerClickHandler);
+
+    this._documentClickHandler = (e) => {
+      if (!this.element.contains(e.target)) {
+        this.hideMenu();
+      }
+    };
+
+    if (window.globalEvents) {
+      this._documentClickListener = window.globalEvents.on(document, 'click', this._documentClickHandler, { scope: this.scope });
+    } else {
+      document.addEventListener('click', this._documentClickHandler);
+    }
+
+    this.menu.style.display = 'none';
+    this.element.__kupolaInitialized = true;
+  }
+
+  toggleMenu() {
+    const isOpen = this.menu.style.display === 'block';
+    this.menu.style.display = isOpen ? 'none' : 'block';
+    this.element.classList.toggle('is-open', !isOpen);
+  }
+
+  hideMenu() {
+    this.menu.style.display = 'none';
+    this.element.classList.remove('is-open');
+  }
+
+  destroy() {
+    if (!this.element.__kupolaInitialized) return;
+
+    if (this.trigger && this._triggerClickHandler) {
+      this.trigger.removeEventListener('click', this._triggerClickHandler);
+    }
+
+    if (this.menu) {
+      this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
+        if (item._dropdownItemClickHandler) {
+          item.removeEventListener('click', item._dropdownItemClickHandler);
+        }
+      });
+    }
+
+    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._itemClickHandler = null;
+    this.element.__kupolaInitialized = false;
+  }
+}
+
+function initDropdown(element) {
+  const dropdown = new Dropdown(element);
+  dropdown.init();
+  element._kupolaDropdown = dropdown;
+}
+
+function initDropdowns(root = document) {
+  root.querySelectorAll('.ds-dropdown').forEach(dropdown => {
+    initDropdown(dropdown);
+  });
+}
+
+function cleanupDropdown(dropdown) {
+  if (dropdown._kupolaDropdown) {
+    dropdown._kupolaDropdown.destroy();
+    dropdown._kupolaDropdown = null;
+  }
+}
+
+function cleanupAllDropdowns() {
+  document.querySelectorAll('.ds-dropdown').forEach(dropdown => {
+    cleanupDropdown(dropdown);
+  });
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('dropdown', initDropdown, cleanupDropdown);
+}