@kupola/kupola 1.2.0 → 1.4.0

package/js/kupola-core.js

@@ -1,66 +1,144 @@
-if (typeof window === 'undefined') {
-  const { KupolaComponent, applyMixin } = require('./component.js');
-  const { KupolaComponentRegistry } = require('./registry.js');
-  const { KupolaRouter, createRouter } = require('./router.js');
-  const { KupolaHttp, createHttp } = require('./http.js');
-  
-  module.exports = {
-    KupolaComponent,
-    applyMixin,
-    KupolaComponentRegistry,
-    KupolaRouter,
-    KupolaHttp,
-    createRouter,
-    createHttp
-  };
-}
+/**
+ * Kupola Core — Component system bootstrap, registry, and lifecycle management.
+ * @module kupola-core
+ */
+
+import { KupolaComponent, applyMixin } from './component.js';
+import { KupolaComponentRegistry } from './registry.js';
+import { KupolaLifecycle } from './kupola-lifecycle.js';
+import { kupolaInitializer } from './initializer.js';
+import { kupolaData } from './data-bind.js';
+import { initTheme } from './theme.js';
+
+let kupolaRegistry = null;
 
-if (window.KupolaComponentRegistry) {
-  window.kupolaRegistry = new window.KupolaComponentRegistry();
+if (typeof window !== 'undefined') {
+  kupolaRegistry = new KupolaComponentRegistry();
 }
 
+/** Bootstrap the Kupola component system (data binding, theme, component discovery). */
 async function kupolaBootstrap() {
-  if (window.kupolaData) {
-    window.kupolaData.loadPersisted();
-  }
-  if (window.kupolaRegistry) {
-    await window.kupolaRegistry.bootstrap();
+  if (typeof window !== 'undefined') {
+    // 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 (document.readyState === 'loading') {
+if (typeof document !== 'undefined' && document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', kupolaBootstrap);
-} else {
+} else if (typeof window !== 'undefined') {
   setTimeout(kupolaBootstrap, 0);
 }
 
-window.registerComponent = function(name, componentClass) {
-  if (window.kupolaRegistry) {
-    window.kupolaRegistry.register(name, componentClass);
+/** Register a class-based component. */
+function registerComponent(name, componentClass) {
+  if (kupolaRegistry) {
+    kupolaRegistry.register(name, componentClass);
   }
-};
+}
 
-window.registerLazyComponent = function(name, loader) {
-  if (window.kupolaRegistry) {
-    window.kupolaRegistry.registerLazy(name, loader);
+/** Register a lazy-loaded component (loaded on first use). */
+function registerLazyComponent(name, loader) {
+  if (kupolaRegistry) {
+    kupolaRegistry.registerLazy(name, loader);
   }
-};
+}
 
-window.bootstrapComponents = function(root) {
-  if (window.kupolaRegistry) {
-    return window.kupolaRegistry.bootstrap(root);
+/** Manually bootstrap components within a specific root element. */
+function bootstrapComponents(root) {
+  if (kupolaRegistry) {
+    return kupolaRegistry.bootstrap(root);
   }
   return Promise.resolve();
-};
+}
 
-window.defineMixin = function(name, mixin) {
-  if (window.kupolaRegistry) {
-    window.kupolaRegistry.defineMixin(name, mixin);
+/** Define a reusable mixin for component classes. */
+function defineMixin(name, mixin) {
+  if (kupolaRegistry) {
+    kupolaRegistry.defineMixin(name, mixin);
   }
-};
+}
 
-window.useMixin = function(componentClass, ...mixinNames) {
-  if (window.kupolaRegistry) {
-    window.kupolaRegistry.useMixin(componentClass, ...mixinNames);
+/** Apply named mixins to a component class. */
+function useMixin(componentClass, ...mixinNames) {
+  if (kupolaRegistry) {
+    kupolaRegistry.useMixin(componentClass, ...mixinNames);
+  }
+}
+
+/**
+ * Unified component registration API.
+ * @param {string} name - Component name
+ * @param {object} options
+ * @param {Function} [options.init] - Init function (for function-based components)
+ * @param {Function} [options.cleanup] - Cleanup function
+ * @param {Function} [options.componentClass] - Component class (for class-based components)
+ * @param {Function} [options.lazy] - Lazy loader function
+ * @param {string} [options.dataAttribute] - Custom data attribute (e.g. 'data-my-component')
+ * @param {string} [options.cssClass] - CSS class selector (e.g. 'ds-my-component')
+ */
+function defineComponent(name, options) {
+  if (!options || typeof options !== 'object') {
+    throw new Error(`defineComponent("${name}"): options must be an object`);
+  }
+  // Register with registry (class or lazy)
+  if (options.componentClass) {
+    if (kupolaRegistry) {
+      kupolaRegistry.register(name, options.componentClass);
+    }
+  } else if (options.lazy) {
+    if (kupolaRegistry) {
+      kupolaRegistry.registerLazy(name, options.lazy);
+    }
   }
-};
+  // Register with initializer (function-based)
+  if (options.init) {
+    kupolaInitializer.register(name, options.init, options.cleanup || null, {
+      dataAttribute: options.dataAttribute,
+      cssClass: options.cssClass
+    });
+  } else if (options.dataAttribute || options.cssClass) {
+    // Even without init, register selectors so MutationObserver can find them
+    kupolaInitializer.register(name, () => {}, null, {
+      dataAttribute: options.dataAttribute,
+      cssClass: options.cssClass
+    });
+  }
+}
+
+export {
+  KupolaComponent,
+  applyMixin,
+  KupolaComponentRegistry,
+  KupolaLifecycle,
+  kupolaRegistry,
+  kupolaInitializer,
+  kupolaBootstrap,
+  registerComponent,
+  registerLazyComponent,
+  bootstrapComponents,
+  defineMixin,
+  useMixin,
+  defineComponent
+};
+
+if (typeof window !== 'undefined') {
+  window.kupolaRegistry = kupolaRegistry;
+  window.kupolaInitializer = kupolaInitializer;
+  window.kupolaBootstrap = kupolaBootstrap;
+  window.registerComponent = registerComponent;
+  window.registerLazyComponent = registerLazyComponent;
+  window.bootstrapComponents = bootstrapComponents;
+  window.defineMixin = defineMixin;
+  window.useMixin = useMixin;
+  window.defineComponent = defineComponent;
+}

package/js/kupola-lifecycle.js

@@ -1,4 +1,4 @@
-class KupolaLifecycle {
+export class KupolaLifecycle {
   constructor(scope = 'app') {
     this.scope = scope;
     this.hooks = new Map();
@@ -345,7 +345,7 @@ class KupolaLifecycle {
   }
 }
 
-class KupolaPluginManager {
+export class KupolaPluginManager {
   constructor() {
     this.plugins = new Map();
     this.enabledPlugins = new Set();
@@ -477,7 +477,7 @@ class KupolaPluginManager {
     const pluginHooks = this.pluginHooks.get(pluginName);
     
     Object.keys(hooks).forEach(phase => {
-      const unsubscribe = window.kupolaLifecycle?.on(phase, hooks[phase], { name: `${pluginName}:${phase}` });
+      const unsubscribe = typeof window !== 'undefined' && window.kupolaLifecycle?.on(phase, hooks[phase], { name: `${pluginName}:${phase}` });
       if (unsubscribe) {
         pluginHooks.push({ phase, unsubscribe });
       }
@@ -496,15 +496,17 @@ class KupolaPluginManager {
   }
 }
 
-const kupolaLifecycle = new KupolaLifecycle('app');
-const kupolaPluginManager = new KupolaPluginManager();
+export const kupolaLifecycle = new KupolaLifecycle('app');
+export const kupolaPluginManager = new KupolaPluginManager();
 
-function createLifecycle(scope = 'app') {
+export function createLifecycle(scope = 'app') {
   return new KupolaLifecycle(scope);
 }
 
-window.KupolaLifecycle = KupolaLifecycle;
-window.KupolaPluginManager = KupolaPluginManager;
-window.kupolaLifecycle = kupolaLifecycle;
-window.kupolaPluginManager = kupolaPluginManager;
-window.createLifecycle = createLifecycle;
+if (typeof window !== 'undefined') {
+  window.KupolaLifecycle = KupolaLifecycle;
+  window.KupolaPluginManager = KupolaPluginManager;
+  window.kupolaLifecycle = kupolaLifecycle;
+  window.kupolaPluginManager = kupolaPluginManager;
+  window.createLifecycle = createLifecycle;
+}

package/js/message.js

@@ -57,4 +57,11 @@ const Message = {
     }
 };
 
-function initMessages() {}
+function initMessages() {}
+
+export { Message, initMessages };
+
+if (typeof window !== 'undefined') {
+  window.Message = Message;
+  window.initMessages = initMessages;
+}

package/js/modal.js

@@ -1,12 +1,23 @@
 class Modal {
-  constructor(element) {
+  constructor(element, options = {}) {
     this.element = element;
     this.mask = element.querySelector('.ds-modal-mask');
     this.modal = element.querySelector('.ds-modal');
     this.closeBtn = element.querySelector('.ds-modal__close');
     
+    // Options
+    this.fullscreen = options.fullscreen || element.hasAttribute('data-modal-fullscreen');
+    this.closableOnMask = options.closableOnMask !== false; // default true
+    this.escClose = options.escClose !== false;
+    this.width = options.width || element.getAttribute('data-modal-width') || '';
+    this.center = options.center !== false;
+    this.onBeforeOpen = options.onBeforeOpen || null;
+    this.onBeforeClose = options.onBeforeClose || null;
+    this.onOpened = options.onOpened || null;
+    this.onClosed = options.onClosed || null;
+    
     this._keydownHandler = (e) => {
-      if (e.key === 'Escape' && this.isVisible()) {
+      if (this.escClose && e.key === 'Escape' && this.isVisible()) {
         this.close();
       }
     };
@@ -14,7 +25,7 @@ class Modal {
     this._closeBtnClickHandler = () => this.close();
     
     this._maskClickHandler = (e) => {
-      if (e.target === this.mask) {
+      if (this.closableOnMask && e.target === this.mask) {
         this.close();
       }
     };
@@ -32,24 +43,93 @@ class Modal {
     }
     
     document.addEventListener('keydown', this._keydownHandler);
+    
+    // Apply fullscreen
+    if (this.fullscreen && this.modal) {
+      this.modal.classList.add('ds-modal--fullscreen');
+    }
+    
+    // Apply custom width
+    if (this.width && this.modal) {
+      this.modal.style.maxWidth = this.width;
+    }
   }
   
   open() {
-    this.mask.classList.add('is-visible');
+    if (this.onBeforeOpen) {
+      const result = this.onBeforeOpen();
+      if (result === false) return;
+    }
+    
+    if (this.mask) {
+      this.mask.classList.add('is-visible');
+      this.mask.classList.add('ds-modal-fade-enter');
+      requestAnimationFrame(() => {
+        this.mask.classList.add('ds-modal-fade-enter-active');
+      });
+    }
+    if (this.modal) {
+      this.modal.classList.add('ds-modal-zoom-enter');
+      requestAnimationFrame(() => {
+        this.modal.classList.add('ds-modal-zoom-enter-active');
+      });
+    }
+    
     Modal._openCount = (Modal._openCount || 0) + 1;
     document.body.style.overflow = 'hidden';
+    
+    if (this.onOpened) {
+      setTimeout(() => this.onOpened(), 300);
+    }
+    
+    this.element.dispatchEvent(new CustomEvent('kupola:modal-open', { bubbles: true }));
   }
   
   close() {
-    this.mask.classList.remove('is-visible');
+    if (this.onBeforeClose) {
+      const result = this.onBeforeClose();
+      if (result === false) return;
+    }
+    
+    if (this.mask) {
+      this.mask.classList.remove('ds-modal-fade-enter-active');
+      this.mask.classList.add('ds-modal-fade-leave-active');
+    }
+    if (this.modal) {
+      this.modal.classList.remove('ds-modal-zoom-enter-active');
+      this.modal.classList.add('ds-modal-zoom-leave-active');
+    }
+    
+    setTimeout(() => {
+      if (this.mask) {
+        this.mask.classList.remove('is-visible', 'ds-modal-fade-enter', 'ds-modal-fade-leave-active');
+      }
+      if (this.modal) {
+        this.modal.classList.remove('ds-modal-zoom-enter', 'ds-modal-zoom-leave-active');
+      }
+    }, 300);
+    
     Modal._openCount = Math.max(0, (Modal._openCount || 0) - 1);
     if (Modal._openCount === 0) {
       document.body.style.overflow = '';
     }
+    
+    if (this.onClosed) {
+      setTimeout(() => this.onClosed(), 300);
+    }
+    
+    this.element.dispatchEvent(new CustomEvent('kupola:modal-close', { bubbles: true }));
+  }
+  
+  toggleFullscreen() {
+    this.fullscreen = !this.fullscreen;
+    if (this.modal) {
+      this.modal.classList.toggle('ds-modal--fullscreen', this.fullscreen);
+    }
   }
   
   isVisible() {
-    return this.mask.classList.contains('is-visible');
+    return this.mask && this.mask.classList.contains('is-visible');
   }
   
   destroy() {
@@ -72,89 +152,151 @@ function createModal(options = {}) {
   const {
     title = '',
     content = '',
+    html = false,
     width = '480px',
+    fullscreen = false,
+    showCancel = true,
+    showConfirm = true,
+    confirmText = 'OK',
+    cancelText = 'Cancel',
+    confirmClass = 'ds-btn--brand',
+    cancelClass = 'ds-btn--ghost',
+    closable = true,
+    maskClosable = true,
     onConfirm,
-    onCancel
+    onCancel,
+    onOpen,
+    onClose,
+    footer = null
   } = options;
   
   const container = document.createElement('div');
   container.className = 'ds-modal-container';
+  
+  let footerHTML = '';
+  if (footer !== null) {
+    if (typeof footer === 'string') {
+      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>` : ''}
+      </div>`;
+    }
+  }
+  
   container.innerHTML = `
     <div class="ds-modal-mask">
-      <div class="ds-modal" style="max-width: ${width}">
+      <div class="ds-modal${fullscreen ? ' ds-modal--fullscreen' : ''}" style="${!fullscreen ? 'max-width: ' + width : ''}">
         <div class="ds-modal__header">
           <span class="ds-modal__title"></span>
-          <button class="ds-modal__close" aria-label="Close">
+          ${closable ? `<button class="ds-modal__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>
+          </button>` : ''}
         </div>
         <div class="ds-modal__body"></div>
-        ${onConfirm || onCancel ? `
-        <div class="ds-modal__footer">
-          ${onCancel ? `<button class="ds-btn ds-btn--ghost" data-modal-cancel>Cancel</button>` : ''}
-          ${onConfirm ? `<button class="ds-btn ds-btn--brand" data-modal-confirm>OK</button>` : ''}
-        </div>
-        ` : ''}
+        ${footerHTML}
       </div>
     </div>
   `;
   
   document.body.appendChild(container);
   
-  const modal = new Modal(container);
+  const modal = new Modal(container, { fullscreen, closableOnMask: maskClosable });
   
   const titleEl = container.querySelector('.ds-modal__title');
   if (titleEl) titleEl.textContent = title;
   const bodyEl = container.querySelector('.ds-modal__body');
-  if (bodyEl) bodyEl.textContent = content;
+  if (bodyEl) {
+    if (html) {
+      bodyEl.innerHTML = content;
+    } else {
+      bodyEl.textContent = content;
+    }
+  }
   
   const confirmBtn = container.querySelector('[data-modal-confirm]');
   const cancelBtn = container.querySelector('[data-modal-cancel]');
   
-  const confirmHandler = () => {
-      if (onConfirm) onConfirm();
-      modal.close();
-    };
-    
-    const cancelHandler = () => {
-      if (onCancel) onCancel();
-      modal.close();
-    };
-    
-    if (confirmBtn) {
-      confirmBtn.addEventListener('click', confirmHandler);
-    }
-    
-    if (cancelBtn) {
-      cancelBtn.addEventListener('click', cancelHandler);
-    }
-    
-    const closeAndDestroy = () => {
-      setTimeout(() => {
-        if (confirmBtn) {
-          confirmBtn.removeEventListener('click', confirmHandler);
-        }
-        if (cancelBtn) {
-          cancelBtn.removeEventListener('click', cancelHandler);
+  let isConfirming = false;
+  
+  const confirmHandler = async () => {
+    if (onConfirm) {
+      // Support async onConfirm
+      confirmBtn.disabled = true;
+      confirmBtn.classList.add('is-loading');
+      try {
+        const result = await onConfirm();
+        if (result === false) {
+          confirmBtn.disabled = false;
+          confirmBtn.classList.remove('is-loading');
+          return;
         }
-        modal.destroy();
-        container.remove();
-      }, 300);
-    };
-    
-    const originalClose = modal.close.bind(modal);
-    modal.close = () => {
-      originalClose();
-      closeAndDestroy();
-    };
+      } catch(e) {
+        confirmBtn.disabled = false;
+        confirmBtn.classList.remove('is-loading');
+        return;
+      }
+    }
+    isConfirming = true;
+    modal.close();
+  };
+  
+  const cancelHandler = () => {
+    if (onCancel) onCancel();
+    modal.close();
+  };
+  
+  if (confirmBtn) confirmBtn.addEventListener('click', confirmHandler);
+  if (cancelBtn) cancelBtn.addEventListener('click', cancelHandler);
+  
+  const closeAndDestroy = () => {
+    setTimeout(() => {
+      if (confirmBtn) confirmBtn.removeEventListener('click', confirmHandler);
+      if (cancelBtn) cancelBtn.removeEventListener('click', cancelHandler);
+      modal.destroy();
+      container.remove();
+      if (onClose) onClose(isConfirming);
+    }, 300);
+  };
+  
+  const originalClose = modal.close.bind(modal);
+  modal.close = () => {
+    originalClose();
+    closeAndDestroy();
+  };
   
   modal.open();
+  if (onOpen) setTimeout(() => onOpen(), 50);
   
   return modal;
 }
 
+// Convenience methods
+function confirmModal(options) {
+  if (typeof options === 'string') {
+    options = { content: options };
+  }
+  return createModal({
+    ...options,
+    showCancel: true,
+    showConfirm: true
+  });
+}
+
+function alertModal(options) {
+  if (typeof options === 'string') {
+    options = { content: options };
+  }
+  return createModal({
+    ...options,
+    showCancel: false,
+    showConfirm: true
+  });
+}
+
 function initModal(element) {
   if (element.__kupolaInitialized) return;
 
@@ -179,13 +321,19 @@ function initModals() {
   });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { Modal, initModals, initModal, cleanupModal, createModal };
-} else {
+export { Modal, initModals, initModal, cleanupModal, createModal, confirmModal, alertModal };
+
+if (typeof window !== 'undefined') {
+  window.Modal = Modal;
   window.initModal = initModal;
   window.cleanupModal = cleanupModal;
+  window.initModals = initModals;
+  window.createModal = createModal;
+  window.confirmModal = confirmModal;
+  window.alertModal = alertModal;
+  
+  if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('modal', initModal, cleanupModal);
+  }
 }
 
-if (window.kupolaInitializer) {
-  window.kupolaInitializer.register('modal', initModal, cleanupModal);
-}

package/js/notification.js

@@ -70,4 +70,11 @@ const Notification = {
     }
 };
 
-function initNotifications() {}
+function initNotifications() {}
+
+export { Notification, initNotifications };
+
+if (typeof window !== 'undefined') {
+  window.Notification = Notification;
+  window.initNotifications = initNotifications;
+}

package/js/numberinput.js

@@ -86,7 +86,7 @@ class NumberInput {
     }
 
     dispatchChange() {
-        this.element.dispatchEvent(new CustomEvent('ds-number-input-change', {
+        this.element.dispatchEvent(new CustomEvent('kupola:number-input-change', {
             detail: {
                 value: this.getValue()
             }
@@ -133,14 +133,15 @@ function initNumberInputs() {
     });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { NumberInput, initNumberInputs, initNumberInput, cleanupNumberInput };
-} else {
+export { NumberInput, initNumberInputs, initNumberInput, cleanupNumberInput };
+
+if (typeof window !== 'undefined') {
     window.NumberInput = NumberInput;
     window.initNumberInput = initNumberInput;
     window.cleanupNumberInput = cleanupNumberInput;
-}
-
-if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('number-input', initNumberInput, cleanupNumberInput);
+    window.initNumberInputs = initNumberInputs;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('number-input', initNumberInput, cleanupNumberInput);
+    }
 }