@kupola/kupola 1.4.9 → 1.5.2

package/js/depends.js

@@ -1,4 +1,5 @@
 import { ref } from './data-bind.js';
+import { getConfig } from './kupola-config.js';
 
 // ============================================================
 // Scheduler - 批量更新、去重、微任务调度
@@ -273,6 +274,11 @@ class FetchedSource extends DependsSource {
 
     async fetch(params) {
         let url = this.config.source;
+        const httpConfig = getConfig('http');
+        
+        if (httpConfig?.baseURL && !url.startsWith('http://') && !url.startsWith('https://')) {
+            url = httpConfig.baseURL + url.replace(/^\//, '');
+        }
 
         // Replace path params (:id -> value)
         for (const key in params) {
@@ -293,11 +299,16 @@ class FetchedSource extends DependsSource {
             url += (url.includes('?') ? '&' : '?') + queryParts.join('&');
         }
 
+        const globalHeaders = httpConfig?.headers || {};
         const fetchOptions = {
             method: this.method.toUpperCase(),
-            headers: { 'Content-Type': 'application/json', ...this.headers }
+            headers: { 'Content-Type': 'application/json', ...globalHeaders, ...this.headers }
         };
 
+        if (httpConfig?.withCredentials) {
+            fetchOptions.credentials = 'include';
+        }
+
         if (['POST', 'PUT', 'PATCH'].includes(fetchOptions.method)) {
             fetchOptions.body = JSON.stringify(params);
         }

package/js/i18n.js

@@ -1,8 +1,11 @@
+import { getConfig } from './kupola-config.js';
+
 class KupolaI18n {
   constructor(options = {}) {
+    const config = getConfig();
     this.locales = options.locales || {};
-    this.currentLocale = options.defaultLocale || 'zh-CN';
-    this.fallbackLocale = options.fallbackLocale || 'zh-CN';
+    this.currentLocale = options.defaultLocale || config.i18n?.locale || 'zh-CN';
+    this.fallbackLocale = options.fallbackLocale || config.i18n?.fallbackLocale || 'en-US';
     this.delimiter = options.delimiter || '.';
     this.missingHandler = options.missingHandler || ((key) => {
       console.warn(`Missing translation: ${key}`);

package/js/kupola-config.js

@@ -0,0 +1,125 @@
+const config = {
+  paths: {
+    icons: '/icons/',
+    base: '/'
+  },
+  theme: {
+    default: 'dark',
+    brand: 'zengqing'
+  },
+  i18n: {
+    locale: 'zh-CN',
+    fallbackLocale: 'en-US'
+  },
+  http: {
+    baseURL: '',
+    timeout: 10000,
+    headers: {},
+    withCredentials: false
+  },
+  ui: {
+    defaultSize: 'md',
+    defaultVariant: 'default'
+  },
+  performance: {
+    lazyLoad: true,
+    debounceDelay: 300,
+    throttleDelay: 100,
+    animationEnabled: true
+  },
+  security: {
+    xssProtection: true,
+    sanitizeHtml: {
+      enabled: true,
+      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']
+      }
+    }
+  },
+  dev: {
+    debug: false,
+    logLevel: 'warn'
+  },
+  extend: {
+    themeVariables: {}
+  },
+  components: {
+    autoInit: true,
+    silentErrors: false
+  },
+  store: {
+    persist: true,
+    prefix: 'kupola-'
+  },
+  events: {
+    global: true
+  }
+};
+
+export function setConfig(options) {
+  mergeDeep(config, options);
+}
+
+export function getConfig(key) {
+  if (!key) return config;
+  return getNestedValue(config, key);
+}
+
+export function getIconsPath() {
+  return config.paths.base + config.paths.icons.replace(/^\//, '');
+}
+
+export function getBasePath() {
+  return config.paths.base;
+}
+
+export function getDefaultTheme() {
+  return config.theme.default;
+}
+
+export function getDefaultBrand() {
+  return config.theme.brand;
+}
+
+export function getHttpConfig() {
+  return config.http;
+}
+
+export function getUiConfig() {
+  return config.ui;
+}
+
+export function getSecurityConfig() {
+  return config.security;
+}
+
+export function getDevConfig() {
+  return config.dev;
+}
+
+export function getPerformanceConfig() {
+  return config.performance;
+}
+
+export function getExtendConfig() {
+  return config.extend;
+}
+
+function mergeDeep(target, source) {
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target && target[key] instanceof Object) {
+      mergeDeep(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+function getNestedValue(obj, key) {
+  return key.split('.').reduce((o, k) => (o && o[k]) !== undefined ? o[k] : undefined, obj);
+}

package/js/kupola-core.js

@@ -9,6 +9,7 @@ import { KupolaLifecycle } from './kupola-lifecycle.js';
 import { kupolaInitializer } from './initializer.js';
 import { kupolaData } from './data-bind.js';
 import { initTheme } from './theme.js';
+import { getConfig, getSecurityConfig } from './kupola-config.js';
 
 let kupolaRegistry = null;
 
@@ -16,19 +17,55 @@ if (typeof window !== 'undefined') {
   kupolaRegistry = new KupolaComponentRegistry();
 }
 
+function _applySecurityHeaders() {
+  const securityConfig = getSecurityConfig();
+  
+  if (securityConfig.xssProtection && typeof document !== 'undefined') {
+    let metaTag = document.querySelector('meta[http-equiv="X-XSS-Protection"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-XSS-Protection');
+      metaTag.setAttribute('content', '1; mode=block');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+    
+    metaTag = document.querySelector('meta[http-equiv="X-Content-Type-Options"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-Content-Type-Options');
+      metaTag.setAttribute('content', 'nosniff');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+    
+    metaTag = document.querySelector('meta[http-equiv="X-Frame-Options"]');
+    if (!metaTag) {
+      metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'X-Frame-Options');
+      metaTag.setAttribute('content', 'SAMEORIGIN');
+      document.head.insertBefore(metaTag, document.head.firstChild);
+    }
+  }
+}
+
 /** Bootstrap the Kupola component system (data binding, theme, component discovery). */
 async function kupolaBootstrap() {
   if (typeof window !== 'undefined') {
+    _applySecurityHeaders();
+    
+    const config = getConfig();
     // Load persisted data and bind data-bind elements
     kupolaData.loadPersisted();
     kupolaData.bind();
     // Initialize theme
     initTheme();
-    // Initialize function-based components first
-    await kupolaInitializer.initializeAll();
-    // Then bootstrap class-based components
-    if (kupolaRegistry) {
-      await kupolaRegistry.bootstrap();
+    
+    if (config.components?.autoInit !== false) {
+      // Initialize function-based components first
+      await kupolaInitializer.initializeAll();
+      // Then bootstrap class-based components
+      if (kupolaRegistry) {
+        await kupolaRegistry.bootstrap();
+      }
     }
   }
 }

package/js/modal.js

@@ -1,4 +1,5 @@
 import { kupolaInitializer } from './initializer.js';
+import { getUiConfig } from './kupola-config.js';
 
 class Modal {
   constructor(element, options = {}) {
@@ -182,9 +183,12 @@ function createModal(options = {}) {
     onCancel,
     onOpen,
     onClose,
-    footer = null
+    footer = null,
+    size = getUiConfig().defaultSize
   } = options;
   
+  const sizeClass = size === 'sm' ? 'ds-btn--sm' : size === 'lg' ? 'ds-btn--lg' : '';
+  
   const container = document.createElement('div');
   container.className = 'ds-modal-container';
   
@@ -194,8 +198,8 @@ function createModal(options = {}) {
       footerHTML = `<div class="ds-modal__footer">${footer}</div>`;
     } else if (showConfirm || showCancel) {
       footerHTML = `<div class="ds-modal__footer">
-        ${showCancel ? `<button class="ds-btn ${cancelClass}" data-modal-cancel>${cancelText}</button>` : ''}
-        ${showConfirm ? `<button class="ds-btn ${confirmClass}" data-modal-confirm>${confirmText}</button>` : ''}
+        ${showCancel ? `<button class="ds-btn ${sizeClass} ${cancelClass}" data-modal-cancel>${cancelText}</button>` : ''}
+        ${showConfirm ? `<button class="ds-btn ${sizeClass} ${confirmClass}" data-modal-confirm>${confirmText}</button>` : ''}
       </div>`;
     }
   }

package/js/security.js

@@ -0,0 +1,61 @@
+import { getSecurityConfig } from './kupola-config.js';
+
+export function sanitizeHtml(html, options = {}) {
+  const securityConfig = getSecurityConfig();
+  const sanitizeConfig = securityConfig?.sanitizeHtml || {};
+  
+  if (!sanitizeConfig.enabled && !options.force) {
+    return html;
+  }
+  
+  const allowedTags = options.allowedTags || sanitizeConfig.allowedTags || [];
+  const allowedAttributes = options.allowedAttributes || sanitizeConfig.allowedAttributes || {};
+  
+  if (typeof html !== 'string') {
+    return html;
+  }
+  
+  const domParser = new DOMParser();
+  const doc = domParser.parseFromString(html, 'text/html');
+  const elements = doc.body.querySelectorAll('*');
+  
+  elements.forEach(element => {
+    const tagName = element.tagName.toLowerCase();
+    
+    if (!allowedTags.includes(tagName)) {
+      element.remove();
+      return;
+    }
+    
+    Array.from(element.attributes).forEach(attr => {
+      const attrName = attr.name.toLowerCase();
+      const tagAllowedAttrs = allowedAttributes[tagName] || [];
+      
+      if (!tagAllowedAttrs.includes(attrName)) {
+        element.removeAttribute(attr.name);
+      }
+    });
+  });
+  
+  return doc.body.innerHTML;
+}
+
+export function escapeHtml(text) {
+  if (typeof text !== 'string') {
+    return text;
+  }
+  
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+export function stripHtml(html) {
+  if (typeof html !== 'string') {
+    return html;
+  }
+  
+  const domParser = new DOMParser();
+  const doc = domParser.parseFromString(html, 'text/html');
+  return doc.body.textContent || '';
+}

package/js/theme.js

@@ -1,3 +1,5 @@
+import { getIconsPath, getDefaultTheme, getDefaultBrand } from './kupola-config.js';
+
 const THEME_KEY = 'kupola-theme';
 const BRAND_KEY = 'kupola-brand';
 
@@ -16,7 +18,7 @@ const BRAND_OPTIONS = [
 ];
 
 function getTheme() {
-  return localStorage.getItem(THEME_KEY) || 'dark';
+  return localStorage.getItem(THEME_KEY) || getDefaultTheme();
 }
 
 function setTheme(theme) {
@@ -39,7 +41,7 @@ function setTheme(theme) {
 }
 
 function getBrand() {
-  return localStorage.getItem(BRAND_KEY) || 'zengqing';
+  return localStorage.getItem(BRAND_KEY) || getDefaultBrand();
 }
 
 function setBrand(brandId) {
@@ -76,7 +78,8 @@ function updateThemeIcon(toggleBtn) {
   const iconEl = toggleBtn.querySelector('.theme-icon');
   if (iconEl) {
     const currentTheme = getTheme();
-    iconEl.src = currentTheme === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg';
+    const iconsPath = getIconsPath();
+    iconEl.src = currentTheme === 'dark' ? iconsPath + 'sun.svg' : iconsPath + 'moon.svg';
   }
 }
 
@@ -203,12 +206,10 @@ function createThemeToggle() {
   
   const icon = document.createElement('img');
   icon.className = 'theme-icon';
-  const scripts = document.getElementsByTagName('script');
-  const currentScript = scripts[scripts.length - 1];
-  const scriptPath = currentScript.src.substring(0, currentScript.src.lastIndexOf('/') + 1);
+  const iconsPath = getIconsPath();
   icon.src = getTheme() === 'dark' 
-    ? scriptPath + '../icons/sun.svg' 
-    : scriptPath + '../icons/moon.svg';
+    ? iconsPath + 'sun.svg' 
+    : iconsPath + 'moon.svg';
   icon.width = 14;
   icon.height = 14;
   icon.alt = 'Toggle theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.4.9",
+  "version": "1.5.2",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",