@kupola/kupola 1.2.0 → 1.4.0

package/js/tag.js

@@ -1,17 +1,30 @@
 class Tag {
-    constructor(element) {
+    constructor(element, options = {}) {
         this.element = element;
         this.closeBtn = element.querySelector('.ds-tag__close');
+        this.checkbox = element.querySelector('.ds-tag__checkbox');
+        this.editInput = element.querySelector('.ds-tag__input');
+        
         this._listeners = [];
+        
+        this.color = options.color || element.getAttribute('data-tag-color') || 'default';
+        this.size = options.size || element.getAttribute('data-tag-size') || 'default';
+        this.checkable = options.checkable || element.hasAttribute('data-tag-checkable');
+        this.checked = options.checked || element.hasAttribute('data-tag-checked');
+        this.editable = options.editable || element.hasAttribute('data-tag-editable');
+        this.maxLength = options.maxLength || parseInt(element.getAttribute('data-tag-maxlength')) || 50;
+        
         this.init();
     }
 
     init() {
+        this._applyStyles();
+        
         if (this.closeBtn) {
             const closeHandler = (e) => {
                 e.stopPropagation();
-                this.element.dispatchEvent(new CustomEvent('ds-tag-remove', {
-                    detail: { tag: this.element },
+                this.element.dispatchEvent(new CustomEvent('kupola:tag-remove', {
+                    detail: { tag: this.element, content: this.getContent() },
                     bubbles: true
                 }));
                 this.element.remove();
@@ -19,9 +32,81 @@ class Tag {
             this.closeBtn.addEventListener('click', closeHandler);
             this._listeners.push({ el: this.closeBtn, event: 'click', handler: closeHandler });
         }
+        
+        if (this.checkable) {
+            const clickHandler = (e) => {
+                if (e.target !== this.checkbox && e.target !== this.closeBtn) {
+                    this.toggleChecked();
+                }
+            };
+            this.element.addEventListener('click', clickHandler);
+            this._listeners.push({ el: this.element, event: 'click', handler: clickHandler });
+            
+            if (this.checkbox) {
+                const checkboxHandler = () => {
+                    this.toggleChecked();
+                };
+                this.checkbox.addEventListener('change', checkboxHandler);
+                this._listeners.push({ el: this.checkbox, event: 'change', handler: checkboxHandler });
+            }
+        }
+        
+        if (this.editable) {
+            const dblclickHandler = () => {
+                this.startEdit();
+            };
+            this.element.addEventListener('dblclick', dblclickHandler);
+            this._listeners.push({ el: this.element, event: 'dblclick', handler: dblclickHandler });
+            
+            if (this.editInput) {
+                const blurHandler = () => {
+                    this.endEdit();
+                };
+                const keydownHandler = (e) => {
+                    if (e.key === 'Enter') {
+                        this.endEdit();
+                    } else if (e.key === 'Escape') {
+                        this.cancelEdit();
+                    }
+                };
+                this.editInput.addEventListener('blur', blurHandler);
+                this.editInput.addEventListener('keydown', keydownHandler);
+                this._listeners.push({ el: this.editInput, event: 'blur', handler: blurHandler });
+                this._listeners.push({ el: this.editInput, event: 'keydown', handler: keydownHandler });
+            }
+        }
+    }
+
+    _applyStyles() {
+        const colorClasses = ['ds-tag--default', 'ds-tag--primary', 'ds-tag--success', 'ds-tag--warning', 'ds-tag--danger', 'ds-tag--info'];
+        const sizeClasses = ['ds-tag--default', 'ds-tag--small', 'ds-tag--large'];
+        
+        colorClasses.forEach(cls => this.element.classList.remove(cls));
+        sizeClasses.forEach(cls => this.element.classList.remove(cls));
+        
+        if (colorClasses.includes(`ds-tag--${this.color}`)) {
+            this.element.classList.add(`ds-tag--${this.color}`);
+        }
+        if (sizeClasses.includes(`ds-tag--${this.size}`)) {
+            this.element.classList.add(`ds-tag--${this.size}`);
+        }
+        
+        if (this.checkable) {
+            this.element.classList.add('ds-tag--checkable');
+        }
+        if (this.checked) {
+            this.element.classList.add('is-checked');
+        }
+        if (this.editable) {
+            this.element.classList.add('ds-tag--editable');
+        }
     }
 
     setContent(content) {
+        if (this.editable && this.editInput) {
+            this.editInput.value = content;
+        }
+        
         const textNodes = [];
         this.element.childNodes.forEach(node => {
             if (node.nodeType === Node.TEXT_NODE) {
@@ -29,27 +114,195 @@ class Tag {
             }
         });
         textNodes.forEach(node => node.remove());
-        this.element.insertBefore(document.createTextNode(content), this.closeBtn || null);
+        
+        const closeBtn = this.element.querySelector('.ds-tag__close');
+        const checkbox = this.element.querySelector('.ds-tag__checkbox');
+        const input = this.element.querySelector('.ds-tag__input');
+        
+        const insertBeforeEl = closeBtn || checkbox || input || null;
+        this.element.insertBefore(document.createTextNode(content), insertBeforeEl);
+        
+        this.element.dispatchEvent(new CustomEvent('kupola:tag-change', {
+            detail: { tag: this.element, content },
+            bubbles: true
+        }));
     }
 
     getContent() {
+        if (this.editable && this.editInput && this.element.classList.contains('is-editing')) {
+            return this.editInput.value;
+        }
         return this.element.textContent.trim();
     }
 
+    setColor(color) {
+        const validColors = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+        if (validColors.includes(color)) {
+            this.color = color;
+            this.element.setAttribute('data-tag-color', color);
+            this._applyStyles();
+        }
+    }
+
+    getColor() {
+        return this.color;
+    }
+
+    setSize(size) {
+        const validSizes = ['default', 'small', 'large'];
+        if (validSizes.includes(size)) {
+            this.size = size;
+            this.element.setAttribute('data-tag-size', size);
+            this._applyStyles();
+        }
+    }
+
+    getSize() {
+        return this.size;
+    }
+
+    toggleChecked() {
+        this.checked = !this.checked;
+        this.element.setAttribute('data-tag-checked', this.checked ? 'true' : 'false');
+        this._applyStyles();
+        
+        if (this.checkbox) {
+            this.checkbox.checked = this.checked;
+        }
+        
+        this.element.dispatchEvent(new CustomEvent('kupola:tag-check', {
+            detail: { tag: this.element, checked: this.checked, content: this.getContent() },
+            bubbles: true
+        }));
+    }
+
+    setChecked(checked) {
+        this.checked = checked;
+        this.element.setAttribute('data-tag-checked', checked ? 'true' : 'false');
+        this._applyStyles();
+        
+        if (this.checkbox) {
+            this.checkbox.checked = checked;
+        }
+    }
+
+    isChecked() {
+        return this.checked;
+    }
+
+    startEdit() {
+        if (!this.editable) return;
+        
+        const content = this.getContent();
+        
+        if (!this.editInput) {
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.className = 'ds-tag__input';
+            input.value = content;
+            input.maxLength = this.maxLength;
+            this.editInput = input;
+            
+            const closeBtn = this.element.querySelector('.ds-tag__close');
+            this.element.insertBefore(input, closeBtn);
+            
+            const blurHandler = () => this.endEdit();
+            const keydownHandler = (e) => {
+                if (e.key === 'Enter') {
+                    this.endEdit();
+                } else if (e.key === 'Escape') {
+                    this.cancelEdit();
+                }
+            };
+            input.addEventListener('blur', blurHandler);
+            input.addEventListener('keydown', keydownHandler);
+            this._listeners.push({ el: input, event: 'blur', handler: blurHandler });
+            this._listeners.push({ el: input, event: 'keydown', handler: keydownHandler });
+        } else {
+            this.editInput.value = content;
+        }
+        
+        this.element.classList.add('is-editing');
+        
+        setTimeout(() => {
+            if (this.editInput) {
+                this.editInput.focus();
+                this.editInput.select();
+            }
+        }, 0);
+    }
+
+    endEdit() {
+        if (!this.editable || !this.element.classList.contains('is-editing')) return;
+        
+        const newContent = this.editInput.value.trim();
+        this.element.classList.remove('is-editing');
+        
+        if (newContent && newContent !== this.getContent()) {
+            this.setContent(newContent);
+            this.element.dispatchEvent(new CustomEvent('kupola:tag-edit', {
+                detail: { tag: this.element, content: newContent },
+                bubbles: true
+            }));
+        }
+    }
+
+    cancelEdit() {
+        if (!this.editable || !this.element.classList.contains('is-editing')) return;
+        
+        this.element.classList.remove('is-editing');
+        if (this.editInput) {
+            this.editInput.value = this.getContent();
+        }
+    }
+
+    setEditable(editable) {
+        this.editable = editable;
+        if (editable) {
+            this.element.setAttribute('data-tag-editable', '');
+        } else {
+            this.element.removeAttribute('data-tag-editable');
+        }
+        this._applyStyles();
+    }
+
+    isEditable() {
+        return this.editable;
+    }
+
+    setCheckable(checkable) {
+        if (this.checkable !== checkable) {
+            this.destroy();
+            this.checkable = checkable;
+            if (checkable) {
+                this.element.setAttribute('data-tag-checkable', '');
+            } else {
+                this.element.removeAttribute('data-tag-checkable');
+            }
+            this.init();
+        }
+    }
+
+    isCheckable() {
+        return this.checkable;
+    }
+
     destroy() {
         this._listeners.forEach(({ el, event, handler }) => {
             el.removeEventListener(event, handler);
         });
-        this._listeners = null;
+        this._listeners = [];
         this.closeBtn = null;
+        this.checkbox = null;
+        this.editInput = null;
         this.element = null;
     }
 }
 
-function initTag(element) {
+function initTag(element, options) {
     if (element.__kupolaInitialized) return;
 
-    const instance = new Tag(element);
+    const instance = new Tag(element, options);
     element.__kupolaInstance = instance;
     element.__kupolaInitialized = true;
 }
@@ -70,14 +323,15 @@ function initTags() {
     });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { Tag, initTags, initTag, cleanupTag };
-} else {
+export { Tag, initTags, initTag, cleanupTag };
+
+if (typeof window !== 'undefined') {
     window.Tag = Tag;
     window.initTag = initTag;
     window.cleanupTag = cleanupTag;
-}
-
-if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('tag', initTag, cleanupTag);
+    window.initTags = initTags;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('tag', initTag, cleanupTag);
+    }
 }

package/js/theme-standalone.js

@@ -0,0 +1,88 @@
+/**
+ * Kupola Theme Standalone — lightweight theme toggle (~1KB).
+ * 
+ * Usage: Include this single script in your page. No other Kupola JS required.
+ *   <script src="theme-standalone.js"></script>
+ * 
+ * Features:
+ *   - Reads/writes theme preference from localStorage
+ *   - Sets data-theme attribute on <html>
+ *   - Auto-binds [data-theme-toggle] buttons
+ *   - Supports prefers-color-scheme as default
+ *   - Optional: auto-detects brand preference
+ */
+(function () {
+  'use strict';
+
+  var THEME_KEY = 'kupola-theme';
+  var BRAND_KEY = 'kupola-brand';
+
+  function getPreferred() {
+    var saved = localStorage.getItem(THEME_KEY);
+    if (saved === 'dark' || saved === 'light') return saved;
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+      return 'light';
+    }
+    return 'dark';
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(THEME_KEY, theme);
+  }
+
+  function applyBrand(brand) {
+    if (brand) {
+      document.documentElement.setAttribute('data-brand', brand);
+      localStorage.setItem(BRAND_KEY, brand);
+    }
+  }
+
+  function toggleTheme() {
+    var current = document.documentElement.getAttribute('data-theme') || getPreferred();
+    var next = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+  }
+
+  function bindToggleButtons() {
+    var buttons = document.querySelectorAll('[data-theme-toggle]');
+    buttons.forEach(function (btn) {
+      btn.addEventListener('click', function (e) {
+        e.preventDefault();
+        toggleTheme();
+      });
+    });
+  }
+
+  // Initialize immediately (works even before DOMContentLoaded)
+  applyTheme(getPreferred());
+  applyBrand(localStorage.getItem(BRAND_KEY));
+
+  // Bind toggle buttons when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bindToggleButtons);
+  } else {
+    bindToggleButtons();
+  }
+
+  // Listen for system theme changes
+  if (window.matchMedia) {
+    var mq = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mq.addEventListener) {
+      mq.addEventListener('change', function (e) {
+        if (!localStorage.getItem(THEME_KEY)) {
+          applyTheme(e.matches ? 'dark' : 'light');
+        }
+      });
+    }
+  }
+
+  // Expose minimal API
+  window.KupolaTheme = {
+    toggle: toggleTheme,
+    set: applyTheme,
+    get: function () {
+      return document.documentElement.getAttribute('data-theme') || 'dark';
+    }
+  };
+})();

package/js/theme.js

@@ -316,48 +316,19 @@ function createBrandPicker() {
   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);
-}
+export { 
+  getTheme, setTheme, initTheme, createThemeToggle,
+  getBrand, setBrand, BRAND_OPTIONS, createBrandPicker,
+  THEME_KEY, BRAND_KEY
+};
 
-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);
-    }
-  }
+if (typeof window !== 'undefined') {
+  window.getTheme = getTheme;
+  window.setTheme = setTheme;
+  window.initTheme = initTheme;
+  window.createThemeToggle = createThemeToggle;
+  window.getBrand = getBrand;
+  window.setBrand = setBrand;
+  window.BRAND_OPTIONS = BRAND_OPTIONS;
+  window.createBrandPicker = createBrandPicker;
 }