@kupola/kupola 1.5.2 → 1.5.4

package/js/dropdown.js

@@ -1,5 +1,6 @@
 import { globalEvents } from './global-events.js';
 import { kupolaInitializer } from './initializer.js';
+import { getUiConfig } from './kupola-config.js';
 
 class Dropdown {
   constructor(element, options = {}) {
@@ -8,22 +9,27 @@ class Dropdown {
     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
+    const uiConfig = getUiConfig();
     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.closeOnClick = options.closeOnClick !== undefined ? options.closeOnClick : (uiConfig.dropdown?.closeOnClick !== undefined ? uiConfig.dropdown.closeOnClick : true);
+    this.appendToBody = options.appendToBody !== 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._originalParent = null;
+    this._originalPosition = null;
+
     this._triggerClickHandler = null;
     this._documentClickHandler = null;
     this._documentClickListener = null;
@@ -37,24 +43,26 @@ class Dropdown {
   }
 
   init() {
-    if (!this.trigger || !this.menu) return;
-    if (this.element.__kupolaInitialized) return;
+    if (!this.trigger || !this.menu) {return;}
+    if (this.element.__kupolaInitialized) {return;}
 
     // Item click handler
     this._itemClickHandler = (e) => {
       const item = e.currentTarget;
-      if (item.classList.contains('is-disabled') || item.classList.contains('ds-dropdown__divider')) return;
-      
+      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();
+
+      if (this.closeOnClick) {
+        this.hideMenu();
+        this.trigger.focus();
+      }
     };
 
     this._bindMenuItems();
@@ -62,73 +70,73 @@ class Dropdown {
     // Trigger click
     this._triggerClickHandler = (e) => {
       e.stopPropagation();
-      if (this.disabled) return;
+      if (this.disabled) {return;}
       this.toggleMenu();
     };
 
     // Hover trigger
     this._triggerMouseenterHandler = () => {
-      if (this.disabled || this.triggerMode !== 'hover') return;
+      if (this.disabled || this.triggerMode !== 'hover') {return;}
       clearTimeout(this._hoverLeaveTimer);
       this._hoverTimer = setTimeout(() => this.showMenu(), this.hoverDelay);
     };
 
     this._triggerMouseleaveHandler = () => {
-      if (this.triggerMode !== 'hover') return;
+      if (this.triggerMode !== 'hover') {return;}
       clearTimeout(this._hoverTimer);
       this._hoverLeaveTimer = setTimeout(() => this.hideMenu(), this.hoverDelay);
     };
 
     this._mouseenterHandler = () => {
-      if (this.disabled || this.triggerMode !== 'hover') return;
+      if (this.disabled || this.triggerMode !== 'hover') {return;}
       clearTimeout(this._hoverLeaveTimer);
     };
 
     this._mouseleaveHandler = () => {
-      if (this.triggerMode !== 'hover') return;
+      if (this.triggerMode !== 'hover') {return;}
       this._hoverLeaveTimer = setTimeout(() => this.hideMenu(), this.hoverDelay);
     };
 
     // Keyboard navigation
     this._keydownHandler = (e) => {
-      if (!this.isOpen || this.disabled) return;
-      
+      if (!this.isOpen || this.disabled) {return;}
+
       const items = this._getNavigableItems();
-      if (!items.length) return;
+      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;
+      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;
       }
     };
 
@@ -144,7 +152,7 @@ class Dropdown {
 
     // Keyboard on trigger
     this._triggerKeydownHandler = (e) => {
-      if (this.disabled) return;
+      if (this.disabled) {return;}
       if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
         e.preventDefault();
         this.showMenu();
@@ -156,7 +164,7 @@ class Dropdown {
 
     // Document click to close
     this._documentClickHandler = (e) => {
-      if (!this.element.contains(e.target)) {
+      if (!this.element.contains(e.target) && !this.menu.contains(e.target)) {
         this.hideMenu();
       }
     };
@@ -188,64 +196,140 @@ class Dropdown {
   }
 
   _calculatePosition() {
-    if (!this.autoPosition) return;
-    
+    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';
+
+    if (this.appendToBody) {
+      this.menu.style.width = `${Math.max(triggerRect.width, menuRect.width)}px`;
+
+      const spaceBelow = viewportHeight - triggerRect.bottom;
+      const spaceAbove = triggerRect.top;
+
+      if (spaceBelow < menuRect.height && spaceAbove > spaceBelow) {
+        this.menu.style.top = `${triggerRect.top - menuRect.height - 4}px`;
+        this.menu.style.bottom = 'auto';
+      } else {
+        this.menu.style.top = `${triggerRect.bottom + 4}px`;
+        this.menu.style.bottom = 'auto';
+      }
+
+      if (triggerRect.left + menuRect.width > viewportWidth) {
+        this.menu.style.left = `${triggerRect.right - Math.max(triggerRect.width, menuRect.width)}px`;
+        this.menu.style.right = 'auto';
+      } else {
+        this.menu.style.left = `${triggerRect.left}px`;
+        this.menu.style.right = 'auto';
+      }
     } else {
-      this.menu.style.left = '0';
-      this.menu.style.right = 'auto';
+      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';
+      }
+
+      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;
+    if (this.disabled || this.isOpen) {return;}
     this.isOpen = true;
     this.focusIndex = -1;
-    this.menu.style.display = 'block';
     this.element.classList.add('is-open');
+
+    if (this.appendToBody) {
+      this._appendMenuToBody();
+      this._addScrollListener();
+    }
+
+    this.menu.style.display = 'block';
     this._calculatePosition();
-    if (this.onShow) this.onShow();
+    if (this.onShow) {this.onShow();}
     this.element.dispatchEvent(new CustomEvent('kupola:dropdown-show', { bubbles: true }));
   }
 
   hideMenu() {
-    if (!this.isOpen) return;
+    if (!this.isOpen) {return;}
     this.isOpen = false;
     this.menu.style.display = 'none';
     this.element.classList.remove('is-open');
-    
+
+    if (this.appendToBody) {
+      this._restoreMenuFromBody();
+      this._removeScrollListener();
+    }
+
     // Clear focus
     this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => item.classList.remove('is-focused'));
-    if (this.onHide) this.onHide();
+    if (this.onHide) {this.onHide();}
     this.element.dispatchEvent(new CustomEvent('kupola:dropdown-hide', { bubbles: true }));
   }
 
+  _appendMenuToBody() {
+    if (!this.menu) return;
+    this._originalParent = this.menu.parentNode;
+    this._originalPosition = this.menu.style.position;
+    this._originalTop = this.menu.style.top;
+    this._originalLeft = this.menu.style.left;
+    this._originalRight = this.menu.style.right;
+    this._originalBottom = this.menu.style.bottom;
+    this._originalMarginBottom = this.menu.style.marginBottom;
+    this._originalWidth = this.menu.style.width;
+
+    this.menu.style.position = 'fixed';
+    this.menu.style.zIndex = '9999';
+    document.body.appendChild(this.menu);
+  }
+
+  _restoreMenuFromBody() {
+    if (!this.menu || !this._originalParent) return;
+    this._originalParent.appendChild(this.menu);
+    this.menu.style.position = this._originalPosition || '';
+    this.menu.style.top = this._originalTop || '';
+    this.menu.style.left = this._originalLeft || '';
+    this.menu.style.right = this._originalRight || '';
+    this.menu.style.bottom = this._originalBottom || '';
+    this.menu.style.marginBottom = this._originalMarginBottom || '';
+    this.menu.style.width = this._originalWidth || '';
+    this.menu.style.zIndex = '';
+    this._originalParent = null;
+  }
+
+  _addScrollListener() {
+    this._scrollHandler = () => {
+      this.hideMenu();
+    };
+    window.addEventListener('scroll', this._scrollHandler, true);
+  }
+
+  _removeScrollListener() {
+    if (this._scrollHandler) {
+      window.removeEventListener('scroll', this._scrollHandler, true);
+      this._scrollHandler = null;
+    }
+  }
+
   toggleMenu() {
     if (this.isOpen) {
       this.hideMenu();
@@ -273,7 +357,7 @@ class Dropdown {
         item.removeEventListener('click', item._dropdownItemClickHandler);
       }
     });
-    
+
     // Rebuild menu content
     this.menu.innerHTML = '';
     items.forEach(item => {
@@ -285,27 +369,27 @@ class Dropdown {
         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');
+        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.element.__kupolaInitialized) {return;}
 
     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._triggerKeydownHandler) this.trigger.removeEventListener('keydown', this._triggerKeydownHandler);
+      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._triggerKeydownHandler) {this.trigger.removeEventListener('keydown', this._triggerKeydownHandler);}
     }
 
     if (this.menu) {
@@ -314,11 +398,11 @@ 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._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._keydownHandler) {document.removeEventListener('keydown', this._keydownHandler);}
 
     if (this._documentClickListener && this._documentClickListener.unsubscribe) {
       this._documentClickListener.unsubscribe();
@@ -326,6 +410,10 @@ class Dropdown {
       document.removeEventListener('click', this._documentClickHandler);
     }
 
+    if (this.appendToBody && this._originalParent) {
+      this._restoreMenuFromBody();
+    }
+
     this._documentClickHandler = null;
     this._documentClickListener = null;
     this._triggerClickHandler = null;
@@ -367,4 +455,4 @@ function cleanupAllDropdowns() {
 
 export { Dropdown, initDropdown, initDropdowns, cleanupDropdown, cleanupAllDropdowns };
 
-kupolaInitializer.register('dropdown', initDropdown, cleanupDropdown);
+kupolaInitializer.register('dropdown', initDropdown, cleanupDropdown);

package/js/kupola-config.js

@@ -1,63 +1,87 @@
 const config = {
   paths: {
     icons: '/icons/',
-    base: '/'
+    base: '/',
   },
   theme: {
     default: 'dark',
-    brand: 'zengqing'
+    brand: 'zengqing',
   },
   i18n: {
     locale: 'zh-CN',
-    fallbackLocale: 'en-US'
+    fallbackLocale: 'en-US',
   },
   http: {
     baseURL: '',
     timeout: 10000,
     headers: {},
-    withCredentials: false
+    withCredentials: false,
   },
   ui: {
     defaultSize: 'md',
-    defaultVariant: 'default'
+    modal: {
+      backdropClick: true,
+    },
+    dropdown: {
+      closeOnClick: true,
+    },
+    datepicker: {
+      weekStart: 1,
+    },
+    tooltip: {
+      delay: 300,
+    },
   },
   performance: {
-    lazyLoad: true,
-    debounceDelay: 300,
+    lazyLoad: false,
+    debounceDelay: 200,
     throttleDelay: 100,
-    animationEnabled: true
+    animationEnabled: true,
   },
   security: {
     xssProtection: true,
     sanitizeHtml: {
       enabled: true,
-      allowedTags: ['b', 'i', 'u', 'em', 'strong', 'a', 'br', 'p', 'span', 'div', 'img'],
+      allowedTags: [ 'b', 'i', 'u', 'em', 'strong', 'a', 'br', 'p', 'span', 'div', 'img' ],
       allowedAttributes: {
-        'a': ['href', 'target', 'rel'],
-        'img': ['src', 'alt', 'width', 'height'],
-        'span': ['class', 'style'],
-        'div': ['class', 'style']
-      }
-    }
+        'a': [ 'href', 'target', 'rel' ],
+        'img': [ 'src', 'alt', 'width', 'height' ],
+        'span': [ 'class', 'style' ],
+        'div': [ 'class', 'style' ],
+      },
+    },
+    maskData: {
+      enabled: true,
+      patterns: {
+        phone: { regex: '^(\\d{3})\\d{4}(\\d{4})$', replace: '$1****$2' },
+        email: { regex: '^(.)(.*)(@.*)$', replace: '$1***$3' },
+        idCard: { regex: '^(\\d{6})\\d{8}(\\d{4})$', replace: '$1********$2' },
+        bankCard: { regex: '^(\\d{4})\\d{8}(\\d{4})$', replace: '$1 **** **** $2' },
+      },
+    },
+    secureId: {
+      length: 16,
+      charset: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+    },
+  },
+  message: {
+    duration: 3000,
+    position: 'top-right',
+    maxCount: 5,
   },
-  dev: {
-    debug: false,
-    logLevel: 'warn'
+  notification: {
+    duration: 4500,
+    position: 'top-right',
   },
-  extend: {
-    themeVariables: {}
+  validation: {
+    defaultRules: [],
+    showErrors: true,
+    trigger: 'blur',
   },
   components: {
     autoInit: true,
-    silentErrors: false
+    silentErrors: false,
   },
-  store: {
-    persist: true,
-    prefix: 'kupola-'
-  },
-  events: {
-    global: true
-  }
 };
 
 export function setConfig(options) {
@@ -65,7 +89,7 @@ export function setConfig(options) {
 }
 
 export function getConfig(key) {
-  if (!key) return config;
+  if (!key) {return config;}
   return getNestedValue(config, key);
 }
 
@@ -97,16 +121,20 @@ export function getSecurityConfig() {
   return config.security;
 }
 
-export function getDevConfig() {
-  return config.dev;
-}
-
 export function getPerformanceConfig() {
   return config.performance;
 }
 
-export function getExtendConfig() {
-  return config.extend;
+export function getMessageConfig() {
+  return config.message;
+}
+
+export function getNotificationConfig() {
+  return config.notification;
+}
+
+export function getValidationConfig() {
+  return config.validation;
 }
 
 function mergeDeep(target, source) {
@@ -122,4 +150,4 @@ function mergeDeep(target, source) {
 
 function getNestedValue(obj, key) {
   return key.split('.').reduce((o, k) => (o && o[k]) !== undefined ? o[k] : undefined, obj);
-}
+}