@vanduo-oss/framework 1.3.9 → 1.4.1

package/js/components/toast.js

@@ -94,7 +94,7 @@
       if (config.icon) {
         const allowSvg = config.iconAllowSvg === true;
         const safeIcon = typeof sanitizeHtml === 'function'
-          ? sanitizeHtml(config.icon, { allowSvg })
+          ? sanitizeHtml(config.icon, { allowSvg, allowStyle: false })
           : escapeHtml(config.icon);
         html += `<span class="vd-toast-icon">${safeIcon}</span>`;
       } else if (config.type) {

package/js/components/tooltips.js

@@ -31,8 +31,8 @@
     /**
      * Initialize tooltips
      */
-    init: function () {
-      const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');
+    init: function (root) {
+      const elements = window.Vanduo.queryAll(root, '[data-tooltip], [data-tooltip-html]');
 
       elements.forEach(element => {
         if (this.tooltips.has(element)) {
@@ -93,7 +93,7 @@
 
       if (htmlContent) {
         const allowSvg = element.hasAttribute('data-tooltip-allow-svg');
-        tooltip.innerHTML = this.sanitizeHtml(htmlContent, { allowSvg });
+        tooltip.innerHTML = this.sanitizeHtml(htmlContent, { allowSvg, allowStyle: false });
         tooltip.classList.add('vd-tooltip-html');
       } else if (textContent) {
         tooltip.textContent = textContent;
@@ -253,7 +253,7 @@
         const { tooltip } = this.tooltips.get(el);
         if (isHtml) {
           const allowSvg = el.hasAttribute('data-tooltip-allow-svg');
-          tooltip.innerHTML = this.sanitizeHtml(content, { allowSvg });
+          tooltip.innerHTML = this.sanitizeHtml(content, { allowSvg, allowStyle: false });
           tooltip.classList.add('vd-tooltip-html');
         } else {
           tooltip.textContent = content;

package/js/components/transfer.js

@@ -9,8 +9,8 @@
   const Transfer = {
     instances: new Map(),
 
-    init: function () {
-      const transfers = document.querySelectorAll('[data-vd-transfer]');
+    init: function (root) {
+      const transfers = window.Vanduo.queryAll(root, '[data-vd-transfer]');
       transfers.forEach(el => {
         if (this.instances.has(el)) return;
         this.initInstance(el);

package/js/components/tree.js

@@ -9,8 +9,8 @@
   const Tree = {
     instances: new Map(),
 
-    init: function () {
-      const trees = document.querySelectorAll('[data-vd-tree]');
+    init: function (root) {
+      const trees = window.Vanduo.queryAll(root, '[data-vd-tree]');
       trees.forEach(el => {
         if (this.instances.has(el)) return;
         this.initInstance(el);

package/js/components/validate.js

@@ -49,8 +49,8 @@
       match: 'Fields do not match'
     },
 
-    init: function () {
-      const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');
+    init: function (root) {
+      const forms = window.Vanduo.queryAll(root, '[data-vd-validate], .vd-validate');
       forms.forEach(form => {
         if (this.instances.has(form)) return;
         this.initInstance(form);

package/js/components/vd-hex.js

@@ -90,13 +90,17 @@ export class VdHexGrid {
         const root = document.documentElement;
         const style = getComputedStyle(root);
         
+        const readToken = (token, defaultValue) => {
+            return style.getPropertyValue(token).trim() || defaultValue;
+        };
+
         return {
-            bgPrimary: style.getPropertyValue('--bg-primary').trim() || '#ffffff',
-            bgSecondary: style.getPropertyValue('--bg-secondary').trim() || '#f5f5f5',
-            borderColor: style.getPropertyValue('--border-color').trim() || '#e0e0e0',
-            colorPrimary: style.getPropertyValue('--color-primary').trim() || '#3b82f6',
-            textColor: style.getPropertyValue('--text-primary').trim() || '#1f2937',
-            textMuted: style.getPropertyValue('--text-muted').trim() || '#6b7280'
+            bgPrimary: readToken('--vd-bg-primary', '#ffffff'),
+            bgSecondary: readToken('--vd-bg-secondary', '#f5f5f5'),
+            borderColor: readToken('--vd-border-color', '#e0e0e0'),
+            colorPrimary: readToken('--vd-color-primary', '#3b82f6'),
+            textColor: readToken('--vd-text-primary', '#1f2937'),
+            textMuted: readToken('--vd-text-muted', '#6b7280')
         };
     }
     

package/js/components/waypoint.js

@@ -9,8 +9,8 @@
   const Waypoint = {
     instances: new Map(),
 
-    init: function () {
-      const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');
+    init: function (root) {
+      const navs = window.Vanduo.queryAll(root, '[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');
       navs.forEach(nav => {
         if (this.instances.has(nav)) return;
         this.initInstance(nav);

package/js/utils/helpers.js

@@ -258,7 +258,7 @@ function escapeHtml(str) {
  * Keeps a small set of tags and strips disallowed tags and attributes. Safe for
  * simple rich text (use server-side or DOMPurify for stronger guarantees).
  * @param {string} input
- * @param {{ allowSvg?: boolean }} [options]
+ * @param {{ allowSvg?: boolean, allowStyle?: boolean }} [options]
  * @returns {string} sanitized HTML
  */
 function sanitizeHtml(input, options = {}) {
@@ -271,6 +271,7 @@ function sanitizeHtml(input, options = {}) {
     return escapeHtml(input);
   }
   const allowSvg = options && options.allowSvg === true;
+  const allowStyle = !options || options.allowStyle !== false;
   const baseAllowed = ['B', 'STRONG', 'I', 'EM', 'BR', 'A', 'SPAN', 'U', 'DIV', 'P', 'KBD', 'CODE', 'SMALL', 'MARK'];
   const svgAllowed = ['SVG', 'PATH', 'LINE', 'CIRCLE', 'POLYLINE', 'RECT', 'G'];
   const allowed = allowSvg ? baseAllowed.concat(svgAllowed) : baseAllowed;
@@ -310,8 +311,11 @@ function sanitizeHtml(input, options = {}) {
           }
         });
       } else {
-        // Keep class and style; strip everything else (no event handlers, no src, etc.)
-        const safeAttrs = new Set(['class', 'style']);
+        // Keep class and optionally inline style; strip everything else.
+        const safeAttrs = new Set(['class']);
+        if (allowStyle) {
+          safeAttrs.add('style');
+        }
         const otherAttrs = Array.from(child.attributes || []);
         otherAttrs.forEach(function (a) {
           if (!safeAttrs.has(a.name)) { child.removeAttribute(a.name); }
@@ -327,4 +331,3 @@ function sanitizeHtml(input, options = {}) {
 }
 
 
-

package/js/utils/lifecycle.js

@@ -1,135 +1,210 @@
 /**
  * Vanduo Framework - Lifecycle Manager
- * Central registry for component instances and cleanup
- * Prevents memory leaks in SPAs by tracking event listeners
+ * Central registry for scoped init/destroy, instance cleanup, and DOM queries.
  */
 
-(function() {
+(function () {
   'use strict';
 
-  /**
-   * Lifecycle Manager
-   * Simple registry that tracks component instances and their cleanup functions
-   */
+  function normalizeCallbacks(value) {
+    if (!value) return [];
+    if (Array.isArray(value)) {
+      return value.filter(function (fn) {
+        return typeof fn === 'function';
+      });
+    }
+    return typeof value === 'function' ? [value] : [];
+  }
+
+  function normalizeOptions(options) {
+    if (typeof options === 'function') {
+      return { onDestroy: [options] };
+    }
+    return options || {};
+  }
+
+  function callSafely(label, fn) {
+    try {
+      fn();
+    } catch (error) {
+      console.warn('[Vanduo Lifecycle] ' + label + ' error:', error);
+    }
+  }
+
   const Lifecycle = {
-    // Map of element -> { componentName, cleanupFunctions }
+    // Map<Element, Map<componentName, { cleanup, onDestroy, registeredAt }>>
     instances: new Map(),
 
-    /**
-     * Register a component instance
-     * @param {HTMLElement} element - The DOM element
-     * @param {string} componentName - Name of the component
-     * @param {Array<Function>} cleanupFns - Functions to call on destroy
-     */
-    register: function(element, componentName, cleanupFns = []) {
-      if (this.instances.has(element)) {
-        // Already registered, merge cleanup functions
-        const existing = this.instances.get(element);
-        existing.cleanup = existing.cleanup.concat(cleanupFns);
+    isRoot: function (root) {
+      return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    },
+
+    normalizeRoot: function (root) {
+      return this.isRoot(root) ? root : document;
+    },
+
+    isInRoot: function (root, element) {
+      const scope = this.normalizeRoot(root);
+      if (!(element instanceof Element)) return false;
+      if (scope === document) {
+        return document.documentElement ? document.documentElement.contains(element) : document.contains(element);
+      }
+      if (scope === element) return true;
+      return typeof scope.contains === 'function' && scope.contains(element);
+    },
+
+    queryAll: function (root, selector) {
+      const scope = this.normalizeRoot(root);
+      const matches = [];
+      if (scope instanceof Element && typeof scope.matches === 'function' && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      if (typeof scope.querySelectorAll === 'function') {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+      return matches;
+    },
+
+    queryOne: function (root, selector) {
+      const matches = this.queryAll(root, selector);
+      return matches.length ? matches[0] : null;
+    },
+
+    runInRoot: function (root, fn) {
+      const scope = this.normalizeRoot(root);
+      return fn(scope);
+    },
+
+    register: function (element, componentName, cleanupFns, options) {
+      if (!(element instanceof Element) || !componentName) return;
+
+      const optionBag = normalizeOptions(options);
+      const cleanup = normalizeCallbacks(cleanupFns);
+      const onDestroy = normalizeCallbacks(optionBag.onDestroy);
+      const componentEntries = this.instances.get(element) || new Map();
+      const existing = componentEntries.get(componentName);
+
+      if (existing) {
+        existing.cleanup = existing.cleanup.concat(cleanup);
+        existing.onDestroy = existing.onDestroy.concat(onDestroy);
         return;
       }
 
-      this.instances.set(element, {
+      componentEntries.set(componentName, {
         component: componentName,
-        cleanup: cleanupFns,
+        cleanup: cleanup,
+        onDestroy: onDestroy,
         registeredAt: Date.now()
       });
+
+      this.instances.set(element, componentEntries);
     },
 
-    /**
-     * Unregister a single element and run its cleanup
-     * @param {HTMLElement} element - The element to unregister
-     */
-    unregister: function(element) {
-      const instance = this.instances.get(element);
-      if (!instance) return;
-
-      // Run all cleanup functions
-      instance.cleanup.forEach(function(fn) {
-        try {
-          fn();
-        } catch (e) {
-          console.warn('[Vanduo Lifecycle] Cleanup error:', e);
+    unregister: function (element, componentName) {
+      const componentEntries = this.instances.get(element);
+      if (!componentEntries) return;
+
+      if (componentName) {
+        const entry = componentEntries.get(componentName);
+        if (!entry) return;
+
+        componentEntries.delete(componentName);
+        if (!componentEntries.size) {
+          this.instances.delete(element);
         }
-      });
 
+        entry.cleanup.forEach(function (fn) {
+          callSafely('Cleanup', fn);
+        });
+        entry.onDestroy.forEach(function (fn) {
+          callSafely('Destroy', fn);
+        });
+        return;
+      }
+
+      const entries = Array.from(componentEntries.values());
       this.instances.delete(element);
+      entries.forEach(function (entry) {
+        entry.cleanup.forEach(function (fn) {
+          callSafely('Cleanup', fn);
+        });
+        entry.onDestroy.forEach(function (fn) {
+          callSafely('Destroy', fn);
+        });
+      });
     },
 
-    /**
-     * Destroy all instances of a specific component
-     * @param {string} componentName - Optional component name filter
-     */
-    destroyAll: function(componentName) {
+    destroyAll: function (componentName) {
       const toRemove = [];
+      this.instances.forEach(function (componentEntries, element) {
+        if (!componentName) {
+          toRemove.push([element, null]);
+          return;
+        }
 
-      this.instances.forEach(function(instance, element) {
-        if (!componentName || instance.component === componentName) {
-          toRemove.push(element);
+        if (componentEntries.has(componentName)) {
+          toRemove.push([element, componentName]);
         }
       });
 
-      toRemove.forEach(function(element) {
-        Lifecycle.unregister(element);
+      toRemove.forEach(function (entry) {
+        Lifecycle.unregister(entry[0], entry[1] || undefined);
       });
+
+      return toRemove.length;
     },
 
-    /**
-     * Destroy all instances within a specific container
-     * Useful for SPAs when navigating between pages
-     * @param {HTMLElement} container - Container element
-     */
-    destroyAllInContainer: function(container) {
+    destroyAllInContainer: function (container, componentName) {
+      const scope = this.normalizeRoot(container);
       const toRemove = [];
 
-      this.instances.forEach(function(instance, element) {
-        if (container.contains(element)) {
-          toRemove.push(element);
+      this.instances.forEach(function (componentEntries, element) {
+        if (!Lifecycle.isInRoot(scope, element)) return;
+
+        if (!componentName) {
+          toRemove.push([element, null]);
+          return;
+        }
+
+        if (componentEntries.has(componentName)) {
+          toRemove.push([element, componentName]);
         }
       });
 
-      toRemove.forEach(function(element) {
-        Lifecycle.unregister(element);
+      toRemove.forEach(function (entry) {
+        Lifecycle.unregister(entry[0], entry[1] || undefined);
       });
+
+      return toRemove.length;
     },
 
-    /**
-     * Get all registered instances (for debugging)
-     * @returns {Array} Array of instance info objects
-     */
-    getAll: function() {
+    getAll: function () {
       const result = [];
-      this.instances.forEach(function(instance, element) {
-        result.push({
-          element: element,
-          component: instance.component,
-          registeredAt: instance.registeredAt
+      this.instances.forEach(function (componentEntries, element) {
+        componentEntries.forEach(function (entry) {
+          result.push({
+            element: element,
+            component: entry.component,
+            registeredAt: entry.registeredAt
+          });
         });
       });
       return result;
     },
 
-    /**
-     * Check if an element is registered
-     * @param {HTMLElement} element - The element to check
-     * @returns {boolean}
-     */
-    has: function(element) {
-      return this.instances.has(element);
+    has: function (element, componentName) {
+      const componentEntries = this.instances.get(element);
+      if (!componentEntries) return false;
+      return componentName ? componentEntries.has(componentName) : componentEntries.size > 0;
     }
   };
 
-  // Auto-cleanup on page unload
-  window.addEventListener('beforeunload', function() {
+  window.addEventListener('beforeunload', function () {
     Lifecycle.destroyAll();
   });
 
-  // Expose globally
   window.VanduoLifecycle = Lifecycle;
-
-  // Register with Vanduo framework if available
-  if (typeof window.Vanduo !== 'undefined') {
-    window.Vanduo.register('lifecycle', Lifecycle);
-  }
-
 })();