@kupola/kupola 1.2.0 → 1.4.0

package/js/dialog.js

@@ -126,6 +126,8 @@ class Dialog {
   }
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = Dialog;
+export { Dialog };
+
+if (typeof window !== 'undefined') {
+  window.Dialog = Dialog;
 }

package/js/drawer.js

@@ -1,8 +1,21 @@
 class Drawer {
-    constructor(element) {
+    constructor(element, options = {}) {
         this.element = element;
         this.mask = element.querySelector('.ds-drawer-mask');
         this.drawerEl = element.querySelector('.ds-drawer');
+        
+        // Options
+        this.placement = options.placement || element.getAttribute('data-drawer-placement') || 'right'; // right | left | top | bottom
+        this.width = options.width || element.getAttribute('data-drawer-width') || '400px';
+        this.height = options.height || element.getAttribute('data-drawer-height') || '400px';
+        this.escClose = options.escClose !== false;
+        this.maskClosable = options.maskClosable !== false;
+        this.showMask = options.showMask !== false;
+        this.onOpen = options.onOpen || null;
+        this.onClose = options.onClose || null;
+        this.onBeforeClose = options.onBeforeClose || null;
+        
+        this._keydownHandler = null;
         this._bindEvents();
     }
 
@@ -12,16 +25,25 @@ class Drawer {
         const confirmBtn = this.mask?.querySelector('.ds-drawer__footer .ds-btn--brand');
 
         this.closeDrawer = () => {
+            if (this.onBeforeClose) {
+                const result = this.onBeforeClose();
+                if (result === false) return;
+            }
+            
             if (this.mask) {
                 this.mask.classList.remove('is-visible');
             }
             if (this.drawerEl) {
                 this.drawerEl.classList.remove('is-visible');
             }
+            document.body.style.overflow = '';
+            
+            if (this.onClose) this.onClose();
+            this.element.dispatchEvent(new CustomEvent('kupola:drawer-close', { bubbles: true }));
         };
 
         this.handleMaskClick = (e) => {
-            if (e.target === this.mask) {
+            if (this.maskClosable && e.target === this.mask) {
                 this.closeDrawer();
             }
         };
@@ -42,6 +64,16 @@ class Drawer {
             confirmBtn.addEventListener('click', this.closeDrawer);
         }
 
+        // ESC key
+        if (this.escClose) {
+            this._keydownHandler = (e) => {
+                if (e.key === 'Escape' && this.drawerEl?.classList.contains('is-visible')) {
+                    this.closeDrawer();
+                }
+            };
+            document.addEventListener('keydown', this._keydownHandler);
+        }
+
         this._listeners = [
             { el: this.mask, event: 'click', handler: this.handleMaskClick },
             { el: closeBtn, event: 'click', handler: this.closeDrawer },
@@ -50,10 +82,35 @@ class Drawer {
         ].filter(item => item.el);
     }
 
+    _applyPlacement() {
+        if (!this.drawerEl) return;
+        
+        // Set direction class
+        this.drawerEl.classList.remove('ds-drawer--right', 'ds-drawer--left', 'ds-drawer--top', 'ds-drawer--bottom');
+        this.drawerEl.classList.add(`ds-drawer--${this.placement}`);
+        
+        // Set size
+        if (this.placement === 'left' || this.placement === 'right') {
+            this.drawerEl.style.width = this.width;
+        } else {
+            this.drawerEl.style.height = this.height;
+        }
+        
+        // Hide mask if configured
+        if (!this.showMask && this.mask) {
+            this.mask.style.background = 'transparent';
+            this.mask.style.pointerEvents = 'none';
+            this.drawerEl.style.boxShadow = '0 0 24px rgba(0,0,0,0.15)';
+        }
+    }
+
     destroy() {
         this._listeners?.forEach(({ el, event, handler }) => {
             el.removeEventListener(event, handler);
         });
+        if (this._keydownHandler) {
+            document.removeEventListener('keydown', this._keydownHandler);
+        }
         this._listeners = null;
         this.mask = null;
         this.drawerEl = null;
@@ -61,23 +118,116 @@ class Drawer {
     }
 
     open() {
+        this._applyPlacement();
+        
         if (this.mask) {
             this.mask.classList.add('is-visible');
         }
         if (this.drawerEl) {
             this.drawerEl.classList.add('is-visible');
         }
+        document.body.style.overflow = 'hidden';
+        
+        if (this.onOpen) this.onOpen();
+        this.element.dispatchEvent(new CustomEvent('kupola:drawer-open', { bubbles: true }));
     }
 
     close() {
         this.closeDrawer();
     }
+
+    isOpen() {
+        return this.drawerEl?.classList.contains('is-visible') || false;
+    }
 }
 
-function initDrawer(element) {
+function createDrawer(options = {}) {
+    const {
+        title = '',
+        content = '',
+        html = false,
+        placement = 'right',
+        width = '400px',
+        height = '400px',
+        closable = true,
+        showMask = true,
+        footer = null,
+        onClose,
+        onOpen
+    } = options;
+    
+    const container = document.createElement('div');
+    container.className = 'ds-drawer-container';
+    
+    let footerHTML = '';
+    if (footer !== null) {
+        if (typeof footer === 'string') {
+            footerHTML = `<div class="ds-drawer__footer">${footer}</div>`;
+        } else {
+            footerHTML = `<div class="ds-drawer__footer">
+                <button class="ds-btn ds-btn--ghost" data-drawer-cancel>Cancel</button>
+                <button class="ds-btn ds-btn--brand" data-drawer-confirm>OK</button>
+            </div>`;
+        }
+    }
+    
+    container.innerHTML = `
+        <div class="ds-drawer-mask">
+            <div class="ds-drawer ds-drawer--${placement}" style="${placement === 'left' || placement === 'right' ? 'width:' + width : 'height:' + height}">
+                <div class="ds-drawer__header">
+                    <span class="ds-drawer__title"></span>
+                    ${closable ? `<button class="ds-drawer__close" aria-label="Close">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M18 6L6 18M6 6l12 12"/>
+                        </svg>
+                    </button>` : ''}
+                </div>
+                <div class="ds-drawer__body"></div>
+                ${footerHTML}
+            </div>
+        </div>
+    `;
+    
+    document.body.appendChild(container);
+    
+    const drawer = new Drawer(container, { placement, width, height, showMask, onClose, onOpen });
+    
+    const titleEl = container.querySelector('.ds-drawer__title');
+    if (titleEl) titleEl.textContent = title;
+    const bodyEl = container.querySelector('.ds-drawer__body');
+    if (bodyEl) {
+        if (html) bodyEl.innerHTML = content;
+        else bodyEl.textContent = content;
+    }
+    
+    const confirmBtn = container.querySelector('[data-drawer-confirm]');
+    const cancelBtn = container.querySelector('[data-drawer-cancel]');
+    
+    if (cancelBtn) cancelBtn.addEventListener('click', () => drawer.close());
+    if (confirmBtn) {
+        confirmBtn.addEventListener('click', () => {
+            if (options.onConfirm) options.onConfirm();
+            drawer.close();
+        });
+    }
+    
+    const origClose = drawer.closeDrawer;
+    drawer.closeDrawer = () => {
+        origClose();
+        setTimeout(() => {
+            drawer.destroy();
+            container.remove();
+        }, 300);
+    };
+    
+    drawer.open();
+    return drawer;
+}
+
+function initDrawer(element, options) {
     if (element.__kupolaInitialized) return;
 
-    const drawer = new Drawer(element);
+    const drawer = new Drawer(element, options);
     element.__kupolaInstance = drawer;
     element.__kupolaInitialized = true;
 }
@@ -100,7 +250,11 @@ function initDrawers() {
 
             if (!drawer) return;
 
-            initDrawer(drawer);
+            initDrawer(drawer, {
+                placement: trigger.getAttribute('data-drawer-placement') || 'right',
+                width: trigger.getAttribute('data-drawer-width'),
+                height: trigger.getAttribute('data-drawer-height')
+            });
             drawer.__kupolaInstance?.open();
         });
     });
@@ -113,6 +267,16 @@ function initDrawers() {
     });
 }
 
-if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('drawer', initDrawer, cleanupDrawer);
-}
+export { Drawer, initDrawer, initDrawers, cleanupDrawer, createDrawer };
+
+if (typeof window !== 'undefined') {
+    window.Drawer = Drawer;
+    window.initDrawer = initDrawer;
+    window.initDrawers = initDrawers;
+    window.cleanupDrawer = cleanupDrawer;
+    window.createDrawer = createDrawer;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('drawer', initDrawer, cleanupDrawer);
+    }
+}

package/js/dropdown.js

@@ -1,41 +1,155 @@
 class Dropdown {
-  constructor(element) {
+  constructor(element, options = {}) {
     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)}`;
     
+    // Options
+    this.triggerMode = options.trigger || element.getAttribute('data-dropdown-trigger') || 'click'; // click | hover
+    this.hoverDelay = options.hoverDelay || parseInt(element.getAttribute('data-dropdown-hover-delay')) || 150;
+    this.disabled = options.disabled || element.hasAttribute('data-dropdown-disabled');
+    this.keyboardNav = options.keyboardNav !== false;
+    this.autoPosition = options.autoPosition !== false;
+    this.onSelect = options.onSelect || null;
+    this.onShow = options.onShow || null;
+    this.onHide = options.onHide || null;
+    
+    this.isOpen = false;
+    this.focusIndex = -1;
+    this._hoverTimer = null;
+    this._hoverLeaveTimer = null;
+    
     this._triggerClickHandler = null;
     this._documentClickHandler = null;
     this._documentClickListener = null;
     this._itemClickHandler = null;
+    this._keydownHandler = null;
+    this._mouseenterHandler = null;
+    this._mouseleaveHandler = null;
+    this._triggerMouseenterHandler = null;
+    this._triggerMouseleaveHandler = null;
   }
 
   init() {
     if (!this.trigger || !this.menu) return;
     if (this.element.__kupolaInitialized) return;
 
+    // Item click handler
     this._itemClickHandler = (e) => {
       const item = e.currentTarget;
-      if (this.triggerText) {
+      if (item.classList.contains('is-disabled') || item.classList.contains('ds-dropdown__divider')) return;
+      
+      if (this.triggerText && !item.hasAttribute('data-no-update-trigger')) {
         this.triggerText.textContent = item.textContent.trim();
       }
+      
+      if (this.onSelect) {
+        this.onSelect({ item, value: item.getAttribute('data-value'), text: item.textContent.trim() });
+      }
+      
       this.hideMenu();
+      this.trigger.focus();
     };
 
-    this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
-      item.addEventListener('click', this._itemClickHandler);
-      item._dropdownItemClickHandler = this._itemClickHandler;
-    });
+    this._bindMenuItems();
 
+    // Trigger click
     this._triggerClickHandler = (e) => {
       e.stopPropagation();
+      if (this.disabled) return;
       this.toggleMenu();
     };
 
-    this.trigger.addEventListener('click', this._triggerClickHandler);
+    // Hover trigger
+    this._triggerMouseenterHandler = () => {
+      if (this.disabled || this.triggerMode !== 'hover') return;
+      clearTimeout(this._hoverLeaveTimer);
+      this._hoverTimer = setTimeout(() => this.showMenu(), this.hoverDelay);
+    };
+
+    this._triggerMouseleaveHandler = () => {
+      if (this.triggerMode !== 'hover') return;
+      clearTimeout(this._hoverTimer);
+      this._hoverLeaveTimer = setTimeout(() => this.hideMenu(), this.hoverDelay);
+    };
+
+    this._mouseenterHandler = () => {
+      if (this.disabled || this.triggerMode !== 'hover') return;
+      clearTimeout(this._hoverLeaveTimer);
+    };
+
+    this._mouseleaveHandler = () => {
+      if (this.triggerMode !== 'hover') return;
+      this._hoverLeaveTimer = setTimeout(() => this.hideMenu(), this.hoverDelay);
+    };
+
+    // Keyboard navigation
+    this._keydownHandler = (e) => {
+      if (!this.isOpen || this.disabled) return;
+      
+      const items = this._getNavigableItems();
+      if (!items.length) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          this.focusIndex = Math.min(this.focusIndex + 1, items.length - 1);
+          this._focusItem(items);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.focusIndex = Math.max(this.focusIndex - 1, 0);
+          this._focusItem(items);
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (this.focusIndex >= 0 && items[this.focusIndex]) {
+            items[this.focusIndex].click();
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          this.hideMenu();
+          this.trigger.focus();
+          break;
+        case 'Home':
+          e.preventDefault();
+          this.focusIndex = 0;
+          this._focusItem(items);
+          break;
+        case 'End':
+          e.preventDefault();
+          this.focusIndex = items.length - 1;
+          this._focusItem(items);
+          break;
+      }
+    };
+
+    // Bind trigger events
+    if (this.triggerMode === 'hover') {
+      this.trigger.addEventListener('mouseenter', this._triggerMouseenterHandler);
+      this.trigger.addEventListener('mouseleave', this._triggerMouseleaveHandler);
+      this.menu.addEventListener('mouseenter', this._mouseenterHandler);
+      this.menu.addEventListener('mouseleave', this._mouseleaveHandler);
+    } else {
+      this.trigger.addEventListener('click', this._triggerClickHandler);
+    }
 
+    // Keyboard on trigger
+    this.trigger.addEventListener('keydown', (e) => {
+      if (this.disabled) return;
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        this.showMenu();
+      }
+    });
+
+    document.addEventListener('keydown', this._keydownHandler);
+
+    // Document click to close
     this._documentClickHandler = (e) => {
       if (!this.element.contains(e.target)) {
         this.hideMenu();
@@ -52,22 +166,144 @@ class Dropdown {
     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);
+  _bindMenuItems() {
+    this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
+      item.addEventListener('click', this._itemClickHandler);
+      item._dropdownItemClickHandler = this._itemClickHandler;
+    });
+  }
+
+  _getNavigableItems() {
+    return Array.from(this.menu.querySelectorAll('.ds-dropdown__item'))
+      .filter(item => !item.classList.contains('is-disabled') && !item.classList.contains('ds-dropdown__divider'));
+  }
+
+  _focusItem(items) {
+    items.forEach(item => item.classList.remove('is-focused'));
+    if (items[this.focusIndex]) {
+      items[this.focusIndex].classList.add('is-focused');
+      items[this.focusIndex].scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  _calculatePosition() {
+    if (!this.autoPosition) return;
+    
+    const triggerRect = this.element.getBoundingClientRect();
+    const menuRect = this.menu.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    
+    // Reset
+    this.menu.classList.remove('ds-dropdown--top', 'ds-dropdown--right', 'ds-dropdown--dropup');
+    
+    // Vertical: prefer below, flip to above if needed
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    
+    if (spaceBelow < menuRect.height && spaceAbove > spaceBelow) {
+      this.menu.classList.add('ds-dropdown--dropup');
+      this.menu.style.top = 'auto';
+      this.menu.style.bottom = '100%';
+      this.menu.style.marginBottom = '4px';
+    } else {
+      this.menu.style.top = '100%';
+      this.menu.style.bottom = 'auto';
+      this.menu.style.marginBottom = '0';
+    }
+    
+    // Horizontal: prevent overflow right
+    if (triggerRect.left + menuRect.width > viewportWidth) {
+      this.menu.style.left = 'auto';
+      this.menu.style.right = '0';
+    } else {
+      this.menu.style.left = '0';
+      this.menu.style.right = 'auto';
+    }
+  }
+
+  showMenu() {
+    if (this.disabled || this.isOpen) return;
+    this.isOpen = true;
+    this.focusIndex = -1;
+    this.menu.style.display = 'block';
+    this.element.classList.add('is-open');
+    this._calculatePosition();
+    if (this.onShow) this.onShow();
+    this.element.dispatchEvent(new CustomEvent('kupola:dropdown-show', { bubbles: true }));
   }
 
   hideMenu() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
     this.menu.style.display = 'none';
     this.element.classList.remove('is-open');
+    
+    // Clear focus
+    this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => item.classList.remove('is-focused'));
+    if (this.onHide) this.onHide();
+    this.element.dispatchEvent(new CustomEvent('kupola:dropdown-hide', { bubbles: true }));
+  }
+
+  toggleMenu() {
+    if (this.isOpen) {
+      this.hideMenu();
+    } else {
+      this.showMenu();
+    }
+  }
+
+  enable() {
+    this.disabled = false;
+    this.element.removeAttribute('data-dropdown-disabled');
+  }
+
+  disable() {
+    this.disabled = true;
+    this.element.setAttribute('data-dropdown-disabled', '');
+    this.hideMenu();
+  }
+
+  // Update menu items dynamically
+  setItems(items) {
+    // Remove old item listeners
+    this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
+      if (item._dropdownItemClickHandler) {
+        item.removeEventListener('click', item._dropdownItemClickHandler);
+      }
+    });
+    
+    // Rebuild menu content
+    this.menu.innerHTML = '';
+    items.forEach(item => {
+      if (item.type === 'divider') {
+        const divider = document.createElement('div');
+        divider.className = 'ds-dropdown__divider';
+        this.menu.appendChild(divider);
+      } else {
+        const el = document.createElement('div');
+        el.className = 'ds-dropdown__item' + (item.disabled ? ' is-disabled' : '') + (item.active ? ' is-selected' : '');
+        el.textContent = item.text || item.label || '';
+        if (item.value !== undefined) el.setAttribute('data-value', item.value);
+        if (item.icon) el.innerHTML = item.icon + el.innerHTML;
+        if (item.disabled) el.classList.add('is-disabled');
+        this.menu.appendChild(el);
+      }
+    });
+    
+    this._bindMenuItems();
   }
 
   destroy() {
     if (!this.element.__kupolaInitialized) return;
 
-    if (this.trigger && this._triggerClickHandler) {
-      this.trigger.removeEventListener('click', this._triggerClickHandler);
+    clearTimeout(this._hoverTimer);
+    clearTimeout(this._hoverLeaveTimer);
+
+    if (this.trigger) {
+      if (this._triggerClickHandler) this.trigger.removeEventListener('click', this._triggerClickHandler);
+      if (this._triggerMouseenterHandler) this.trigger.removeEventListener('mouseenter', this._triggerMouseenterHandler);
+      if (this._triggerMouseleaveHandler) this.trigger.removeEventListener('mouseleave', this._triggerMouseleaveHandler);
     }
 
     if (this.menu) {
@@ -76,8 +312,12 @@ class Dropdown {
           item.removeEventListener('click', item._dropdownItemClickHandler);
         }
       });
+      if (this._mouseenterHandler) this.menu.removeEventListener('mouseenter', this._mouseenterHandler);
+      if (this._mouseleaveHandler) this.menu.removeEventListener('mouseleave', this._mouseleaveHandler);
     }
 
+    if (this._keydownHandler) document.removeEventListener('keydown', this._keydownHandler);
+
     if (this._documentClickListener && this._documentClickListener.unsubscribe) {
       this._documentClickListener.unsubscribe();
     } else if (this._documentClickHandler) {
@@ -88,12 +328,17 @@ class Dropdown {
     this._documentClickListener = null;
     this._triggerClickHandler = null;
     this._itemClickHandler = null;
+    this._keydownHandler = null;
+    this._mouseenterHandler = null;
+    this._mouseleaveHandler = null;
+    this._triggerMouseenterHandler = null;
+    this._triggerMouseleaveHandler = null;
     this.element.__kupolaInitialized = false;
   }
 }
 
-function initDropdown(element) {
-  const dropdown = new Dropdown(element);
+function initDropdown(element, options) {
+  const dropdown = new Dropdown(element, options);
   dropdown.init();
   element._kupolaDropdown = dropdown;
 }
@@ -117,6 +362,16 @@ function cleanupAllDropdowns() {
   });
 }
 
-if (window.kupolaInitializer) {
-  window.kupolaInitializer.register('dropdown', initDropdown, cleanupDropdown);
+export { Dropdown, initDropdown, initDropdowns, cleanupDropdown, cleanupAllDropdowns };
+
+if (typeof window !== 'undefined') {
+  window.Dropdown = Dropdown;
+  window.initDropdown = initDropdown;
+  window.initDropdowns = initDropdowns;
+  window.cleanupDropdown = cleanupDropdown;
+  window.cleanupAllDropdowns = cleanupAllDropdowns;
+  
+  if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('dropdown', initDropdown, cleanupDropdown);
+  }
 }