@kupola/kupola 1.2.0

package/js/theme.js

@@ -0,0 +1,363 @@
+const THEME_KEY = 'kupola-theme';
+const BRAND_KEY = 'kupola-brand';
+
+const BRAND_OPTIONS = [
+  { id: 'green', name: '翠绿', color: '#32F08C' },
+  { id: 'xionghuang', name: '雄黄', color: '#FF9900' },
+  { id: 'jianghuang', name: '姜黄', color: '#E2C027' },
+  { id: 'lanlv', name: '蓝绿', color: '#12A182' },
+  { id: 'kongquelan', name: '孔雀蓝', color: '#0EB0C9' },
+  { id: 'meiguizi', name: '玫瑰紫', color: '#BA2F7B' },
+  { id: 'shihong', name: '柿红', color: '#F2481B' },
+  { id: 'quhong', name: '紫云', color: '#B1A6CC' },
+  { id: 'shanchahong', name: '山茶红', color: '#F05A46' },
+  { id: 'zengqing', name: '曾青', color: '#535164' },
+  { id: 'roulan', name: '柔蓝', color: '#106898' }
+];
+
+function getTheme() {
+  return localStorage.getItem(THEME_KEY) || 'dark';
+}
+
+function setTheme(theme) {
+  if (theme !== 'dark' && theme !== 'light') return;
+  
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem(THEME_KEY, theme);
+  
+  const toggleBtn = document.querySelector('[data-theme-toggle]');
+  if (toggleBtn) {
+    toggleBtn.setAttribute('data-current-theme', theme);
+    const icon = toggleBtn.querySelector('.theme-icon');
+    if (icon) {
+      const iconPath = icon.src.substring(0, icon.src.lastIndexOf('/') + 1);
+      icon.src = theme === 'dark' 
+        ? iconPath + 'sun.svg' 
+        : iconPath + 'moon.svg';
+    }
+  }
+}
+
+function getBrand() {
+  return localStorage.getItem(BRAND_KEY) || 'zengqing';
+}
+
+function setBrand(brandId) {
+  const brand = BRAND_OPTIONS.find(b => b.id === brandId);
+  if (!brand) return;
+  
+  document.documentElement.setAttribute('data-brand', brandId);
+  localStorage.setItem(BRAND_KEY, brandId);
+  
+  const brandToggle = document.querySelector('[data-brand-toggle]');
+  if (brandToggle) {
+    brandToggle.setAttribute('data-current-brand', brandId);
+    const brandIcon = brandToggle.querySelector('.brand-icon');
+    if (brandIcon) {
+      brandIcon.style.backgroundColor = brand.color;
+    }
+    const brandName = brandToggle.querySelector('.brand-name');
+    if (brandName) {
+      brandName.textContent = brand.name;
+    }
+  }
+  
+  const brandButtons = document.querySelectorAll('[data-brand-btn]');
+  brandButtons.forEach(btn => {
+    if (btn.getAttribute('data-brand-btn') === brandId) {
+      btn.classList.add('is-active');
+    } else {
+      btn.classList.remove('is-active');
+    }
+  });
+}
+
+function initTheme() {
+  
+  const savedTheme = getTheme();
+  setTheme(savedTheme);
+  
+  const savedBrand = getBrand();
+  setBrand(savedBrand);
+  
+  const toggleBtn = document.querySelector('[data-theme-toggle]');
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      const currentTheme = getTheme();
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      setTheme(newTheme);
+    });
+  }
+  
+  let brandPicker = document.getElementById('brand-picker');
+  if (!brandPicker) {
+    brandPicker = document.createElement('div');
+    brandPicker.id = 'brand-picker';
+    brandPicker.style.position = 'fixed';
+    brandPicker.style.top = '64px';
+    brandPicker.style.right = '16px';
+    brandPicker.style.zIndex = '9998';
+    brandPicker.style.display = 'none';
+    brandPicker.style.padding = '12px';
+    brandPicker.style.width = '200px';
+    brandPicker.style.gridTemplateColumns = 'repeat(3, 1fr)';
+    brandPicker.style.gap = '6px';
+    brandPicker.style.backgroundColor = 'var(--bg-base-secondary)';
+    brandPicker.style.border = '1px solid var(--border-neutral-l1)';
+    brandPicker.style.borderRadius = '8px';
+    brandPicker.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.2)';
+    brandPicker.style.overflow = 'hidden';
+    
+    BRAND_OPTIONS.forEach(brand => {
+      const btn = document.createElement('button');
+      btn.setAttribute('data-brand-btn', brand.id);
+      btn.style.display = 'flex';
+      btn.style.justifyContent = 'center';
+      btn.style.alignItems = 'center';
+      btn.style.height = '60px';
+      btn.style.backgroundColor = brand.color;
+      btn.style.color = ['#32F08C', '#FF9900', '#E2C027', '#0EB0C9', '#B1A6CC'].includes(brand.color) ? '#0C0C0D' : '#FFFFFF';
+      btn.style.fontWeight = '500';
+      btn.style.borderRadius = '4px';
+      btn.style.border = 'none';
+      btn.style.cursor = 'pointer';
+      btn.style.margin = '0';
+      btn.style.padding = '0';
+      btn.textContent = brand.name;
+      brandPicker.appendChild(btn);
+    });
+    
+    document.body.appendChild(brandPicker);
+  }
+  
+  const brandToggle = document.querySelector('[data-brand-toggle]');
+  
+  if (brandToggle && brandPicker) {
+    brandToggle.onclick = function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      const isHidden = brandPicker.style.display === 'none';
+      brandPicker.style.display = isHidden ? 'grid' : 'none';
+      
+      if (isHidden) {
+        setTimeout(() => {
+          document.addEventListener('click', closeBrandPicker, true);
+        }, 0);
+      } else {
+        document.removeEventListener('click', closeBrandPicker, true);
+      }
+    };
+    
+    brandPicker.onclick = function(e) {
+      e.stopPropagation();
+    };
+  }
+  
+  function closeBrandPicker(e) {
+    if (brandPicker && brandToggle) {
+      if (!brandPicker.contains(e.target) && !brandToggle.contains(e.target)) {
+        brandPicker.style.display = 'none';
+        document.removeEventListener('click', closeBrandPicker, true);
+      }
+    }
+  }
+  
+  const brandButtons = document.querySelectorAll('[data-brand-btn]');
+  
+  brandButtons.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const brandId = btn.getAttribute('data-brand-btn');
+      setBrand(brandId);
+      if (brandPicker) {
+        brandPicker.style.display = 'none';
+      }
+    });
+  });
+}
+
+function createThemeToggle() {
+  const btn = document.createElement('button');
+  btn.setAttribute('data-theme-toggle', '');
+  btn.setAttribute('data-current-theme', getTheme());
+  btn.className = 'ds-btn ds-btn--ghost ds-btn--sm ds-btn--icon';
+  btn.style.position = 'fixed';
+  btn.style.top = '16px';
+  btn.style.right = '16px';
+  btn.style.zIndex = '9999';
+  
+  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);
+  icon.src = getTheme() === 'dark' 
+    ? scriptPath + '../icons/sun.svg' 
+    : scriptPath + '../icons/moon.svg';
+  icon.width = 14;
+  icon.height = 14;
+  icon.alt = 'Toggle theme';
+  
+  btn.appendChild(icon);
+  document.body.appendChild(btn);
+  
+  btn.addEventListener('click', () => {
+    const currentTheme = getTheme();
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+  });
+  
+  return btn;
+}
+
+function createBrandPicker() {
+  const container = document.createElement('div');
+  container.id = 'brand-picker-auto';
+  container.style.position = 'fixed';
+  container.style.top = '56px';
+  container.style.right = '16px';
+  container.style.zIndex = '9998';
+  container.style.display = 'none';
+  container.style.padding = '12px';
+  container.style.width = '200px';
+  container.style.gridTemplateColumns = 'repeat(3, 1fr)';
+  container.style.gap = '6px';
+  container.style.backgroundColor = 'var(--bg-base-secondary)';
+  container.style.border = '1px solid var(--border-neutral-l1)';
+  container.style.borderRadius = '8px';
+  container.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.2)';
+  container.style.overflow = 'hidden';
+  
+  BRAND_OPTIONS.forEach(brand => {
+    const btn = document.createElement('button');
+    btn.setAttribute('data-brand-btn', brand.id);
+    btn.style.display = 'flex';
+    btn.style.justifyContent = 'center';
+    btn.style.alignItems = 'center';
+    btn.style.height = '60px';
+    btn.style.backgroundColor = brand.color;
+    btn.style.color = ['#32F08C', '#FF9900', '#E2C027', '#0EB0C9', '#B1A6CC'].includes(brand.color) ? '#0C0C0D' : '#FFFFFF';
+    btn.style.fontWeight = '500';
+    btn.style.borderRadius = '4px';
+    btn.style.border = 'none';
+    btn.style.cursor = 'pointer';
+    btn.style.margin = '0';
+    btn.style.padding = '0';
+    btn.textContent = brand.name;
+    container.appendChild(btn);
+  });
+  
+  document.body.appendChild(container);
+  
+  const toggleBtn = document.createElement('button');
+  toggleBtn.setAttribute('data-brand-toggle', '');
+  toggleBtn.setAttribute('data-current-brand', getBrand());
+  toggleBtn.className = 'ds-btn ds-btn--ghost ds-btn--sm';
+  toggleBtn.style.position = 'fixed';
+  toggleBtn.style.top = '16px';
+  toggleBtn.style.right = '56px';
+  toggleBtn.style.zIndex = '9999';
+  toggleBtn.style.display = 'flex';
+  toggleBtn.style.alignItems = 'center';
+  toggleBtn.style.gap = '6px';
+  
+  const brandIcon = document.createElement('span');
+  brandIcon.className = 'brand-icon';
+  brandIcon.style.width = '12px';
+  brandIcon.style.height = '12px';
+  brandIcon.style.borderRadius = '50%';
+  brandIcon.style.backgroundColor = BRAND_OPTIONS.find(b => b.id === getBrand()).color;
+  
+  const brandName = document.createElement('span');
+  brandName.className = 'brand-name';
+  brandName.style.fontSize = '11px';
+  brandName.textContent = BRAND_OPTIONS.find(b => b.id === getBrand()).name;
+  
+  toggleBtn.appendChild(brandIcon);
+  toggleBtn.appendChild(brandName);
+  document.body.appendChild(toggleBtn);
+  
+  toggleBtn.onclick = function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    const isHidden = container.style.display === 'none';
+    container.style.display = isHidden ? 'grid' : 'none';
+    
+    if (isHidden) {
+      setTimeout(() => {
+        document.addEventListener('click', closeBrandPickerAuto, true);
+      }, 0);
+    } else {
+      document.removeEventListener('click', closeBrandPickerAuto, true);
+    }
+  };
+  
+  container.onclick = function(e) {
+    e.stopPropagation();
+  };
+  
+  function closeBrandPickerAuto(e) {
+    if (!container.contains(e.target) && !toggleBtn.contains(e.target)) {
+      container.style.display = 'none';
+      document.removeEventListener('click', closeBrandPickerAuto, true);
+    }
+  }
+  
+  const brandButtons = container.querySelectorAll('[data-brand-btn]');
+  brandButtons.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const brandId = btn.getAttribute('data-brand-btn');
+      setBrand(brandId);
+      container.style.display = 'none';
+    });
+  });
+  
+  return { toggleBtn, container };
+}
+
+function loadDevTools() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const enabled = urlParams.has('dev') || urlParams.has('debug');
+  
+  if (!enabled) return;
+  
+  const themeScript = document.querySelector('script[src*="theme.js"]');
+  if (!themeScript || !themeScript.src) return;
+  
+  const scriptPath = themeScript.src.substring(0, themeScript.src.lastIndexOf('/') + 1);
+  
+  const devToolsScript = document.createElement('script');
+  devToolsScript.src = scriptPath + 'kupola-devtools.js?v=15';
+  devToolsScript.async = true;
+  
+  document.head.appendChild(devToolsScript);
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { 
+    getTheme, setTheme, initTheme, createThemeToggle,
+    getBrand, setBrand, BRAND_OPTIONS, createBrandPicker,
+    loadDevTools
+  };
+} else {
+  if (!window.__kupolaThemeInitialized) {
+    window.__kupolaThemeInitialized = true;
+    
+    function runInit() {
+      initTheme();
+      loadDevTools();
+    }
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('readystatechange', function readyStateHandler() {
+        if (document.readyState !== 'loading') {
+          document.removeEventListener('readystatechange', readyStateHandler);
+          runInit();
+        }
+      });
+    } else {
+      setTimeout(runInit, 0);
+    }
+  }
+}

package/js/timepicker.js

@@ -0,0 +1,238 @@
+class Timepicker {
+  constructor(element) {
+    this.element = element;
+    this.input = element.querySelector('input');
+    this.inputWrap = element.querySelector('.ds-timepicker__input-wrap');
+    this.panelEl = null;
+    this.scope = `timepicker-${Math.random().toString(36).substr(2, 9)}`;
+    
+    this._inputWrapClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._resizeHandler = null;
+    this._resizeListener = null;
+    
+    this.selectedHour = 12;
+    this.selectedMinute = 0;
+  }
+
+  init() {
+    if (this.element.__kupolaInitialized) return;
+
+    this._inputWrapClickHandler = (e) => {
+      e.stopPropagation();
+      if (this.panelEl && this.panelEl.style.display === 'block') {
+        this.panelEl.style.display = 'none';
+      } else {
+        this.showTimepicker();
+      }
+    };
+
+    this.inputWrap.addEventListener('click', this._inputWrapClickHandler);
+
+    if (window.globalEvents) {
+      this._documentClickListener = window.globalEvents.on(document, 'click', (e) => this.hideTimepicker(e), { scope: this.scope });
+      this._resizeListener = window.globalEvents.on(window, 'resize', () => this.resizeHandler(), { scope: this.scope });
+    } else {
+      document.addEventListener('click', (e) => this.hideTimepicker(e));
+      window.addEventListener('resize', () => this.resizeHandler());
+      this._documentClickHandler = (e) => this.hideTimepicker(e);
+      this._resizeHandler = () => this.resizeHandler();
+    }
+
+    this.element.__kupolaInitialized = true;
+  }
+
+  calculatePosition() {
+    if (!this.panelEl) return;
+    
+    const pickerRect = this.element.getBoundingClientRect();
+    const panelRect = this.panelEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    
+    const spaceBelow = viewportHeight - pickerRect.bottom;
+    const spaceAbove = pickerRect.top;
+    const panelHeight = panelRect.height || 320;
+    
+    if (spaceBelow >= panelHeight) {
+      this.panelEl.style.top = 'calc(100% + 4px)';
+      this.panelEl.style.bottom = 'auto';
+    } else if (spaceAbove >= panelHeight) {
+      this.panelEl.style.top = 'auto';
+      this.panelEl.style.bottom = 'calc(100% + 4px)';
+    } else {
+      this.panelEl.style.top = 'calc(100% + 4px)';
+      this.panelEl.style.bottom = 'auto';
+    }
+  }
+
+  showTimepicker() {
+    if (this.panelEl) {
+      this.panelEl.style.display = 'block';
+      this.calculatePosition();
+      return;
+    }
+    
+    this.panelEl = document.createElement('div');
+    this.panelEl.className = 'ds-timepicker__panel';
+    this.panelEl.innerHTML = `
+      <div class="ds-timepicker__header">
+        <div class="ds-timepicker__display">
+          <span class="ds-timepicker__display-hour">12</span>
+          <span class="ds-timepicker__separator">:</span>
+          <span class="ds-timepicker__display-minute">00</span>
+        </div>
+      </div>
+      <div class="ds-timepicker__body">
+        <div class="ds-timepicker__section">
+          <div class="ds-timepicker__section-label">Hour</div>
+          <div class="ds-timepicker__grid ds-timepicker__grid--hour" data-type="hour"></div>
+        </div>
+        <div class="ds-timepicker__section">
+          <div class="ds-timepicker__section-label">Minute</div>
+          <div class="ds-timepicker__grid ds-timepicker__grid--minute" data-type="minute"></div>
+        </div>
+      </div>
+    `;
+    this.element.appendChild(this.panelEl);
+    
+    if (this.input.value) {
+      const timeParts = this.input.value.split(':');
+      if (timeParts.length >= 2) {
+        this.selectedHour = parseInt(timeParts[0]) || 0;
+        this.selectedMinute = parseInt(timeParts[1]) || 0;
+      }
+    }
+    
+    const displayHour = this.panelEl.querySelector('.ds-timepicker__display-hour');
+    const displayMinute = this.panelEl.querySelector('.ds-timepicker__display-minute');
+    
+    function updateDisplay() {
+      displayHour.textContent = String(this.selectedHour).padStart(2, '0');
+      displayMinute.textContent = String(this.selectedMinute).padStart(2, '0');
+    }
+    
+    function updateInput() {
+      this.input.value = `${String(this.selectedHour).padStart(2, '0')}:${String(this.selectedMinute).padStart(2, '0')}`;
+    }
+    
+    function selectTimeAndClose() {
+      updateInput.call(this);
+      this.panelEl.style.display = 'none';
+      this.input.dispatchEvent(new Event('change'));
+    }
+    
+    const hourGrid = this.panelEl.querySelector('[data-type="hour"]');
+    const minuteGrid = this.panelEl.querySelector('[data-type="minute"]');
+    
+    for (let i = 0; i < 24; i++) {
+      const btn = document.createElement('button');
+      btn.className = 'ds-timepicker__item';
+      btn.textContent = String(i).padStart(2, '0');
+      if (i === this.selectedHour) btn.classList.add('is-selected');
+      btn.addEventListener('click', () => {
+        hourGrid.querySelectorAll('.ds-timepicker__item').forEach(b => b.classList.remove('is-selected'));
+        btn.classList.add('is-selected');
+        this.selectedHour = i;
+        updateDisplay.call(this);
+        selectTimeAndClose.call(this);
+      });
+      hourGrid.appendChild(btn);
+    }
+    
+    for (let i = 0; i < 60; i += 5) {
+      const btn = document.createElement('button');
+      btn.className = 'ds-timepicker__item';
+      btn.textContent = String(i).padStart(2, '0');
+      if (i === this.selectedMinute) btn.classList.add('is-selected');
+      btn.addEventListener('click', () => {
+        minuteGrid.querySelectorAll('.ds-timepicker__item').forEach(b => b.classList.remove('is-selected'));
+        btn.classList.add('is-selected');
+        this.selectedMinute = i;
+        updateDisplay.call(this);
+        selectTimeAndClose.call(this);
+      });
+      minuteGrid.appendChild(btn);
+    }
+    
+    this.panelEl.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+    
+    updateDisplay.call(this);
+    updateInput.call(this);
+    
+    setTimeout(() => {
+      this.calculatePosition();
+    }, 0);
+  }
+
+  hideTimepicker(e) {
+    if (this.panelEl && this.panelEl.style.display === 'block') {
+      if (!this.element.contains(e.target)) {
+        this.panelEl.style.display = 'none';
+      }
+    }
+  }
+
+  resizeHandler() {
+    if (this.panelEl && this.panelEl.style.display === 'block') {
+      this.calculatePosition();
+    }
+  }
+
+  destroy() {
+    if (!this.element.__kupolaInitialized) return;
+
+    if (this.inputWrap && this._inputWrapClickHandler) {
+      this.inputWrap.removeEventListener('click', this._inputWrapClickHandler);
+    }
+
+    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.panelEl) {
+      this.panelEl.remove();
+      this.panelEl = null;
+    }
+
+    this._inputWrapClickHandler = null;
+    this._documentClickHandler = null;
+    this._documentClickListener = null;
+    this._resizeHandler = null;
+    this._resizeListener = null;
+    this.element.__kupolaInitialized = false;
+  }
+}
+
+function initTimepicker(element) {
+  const picker = new Timepicker(element);
+  picker.init();
+  element._kupolaTimepicker = picker;
+}
+
+function initTimepickers(root = document) {
+  root.querySelectorAll('.ds-timepicker').forEach(picker => {
+    initTimepicker(picker);
+  });
+}
+
+function cleanupTimepicker(element) {
+  if (element._kupolaTimepicker) {
+    element._kupolaTimepicker.destroy();
+    element._kupolaTimepicker = null;
+  }
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('timepicker', initTimepicker, cleanupTimepicker);
+}