@vanduo-oss/framework 1.3.8 → 1.4.0

package/js/components/image-box.js

@@ -31,12 +31,20 @@
     // Store cleanup functions for event listeners
     _cleanupFunctions: [],
 
+    getTriggers: function (root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === 'function') {
+        return window.Vanduo.queryAll(root, '[data-image-box]');
+      }
+
+      return Array.from(document.querySelectorAll('[data-image-box]'));
+    },
+
     /**
      * Initialize Image Box component
      */
-    init: function () {
+    init: function (root) {
       this.createBackdrop();
-      this.bindTriggers();
+      this.bindTriggers(root);
     },
 
     /**
@@ -151,9 +159,9 @@
     /**
      * Bind triggers to all images with data-image-box attribute
      */
-    bindTriggers: function () {
+    bindTriggers: function (root) {
       const self = this;
-      const triggers = document.querySelectorAll('[data-image-box]');
+      const triggers = this.getTriggers(root);
 
       triggers.forEach(function (trigger) {
         // Skip if already initialized
@@ -181,6 +189,9 @@
             trigger.classList.remove('is-broken');
           };
           trigger.addEventListener('load', loadHandler);
+
+          trigger._imageBoxErrorHandler = errorHandler;
+          trigger._imageBoxLoadHandler = loadHandler;
         }
 
         // Bind click event
@@ -213,6 +224,19 @@
             trigger.removeEventListener('keydown', keyHandler);
           };
         }
+
+        const originalCleanup = trigger._imageBoxCleanup;
+        trigger._imageBoxCleanup = () => {
+          originalCleanup();
+          if (trigger._imageBoxErrorHandler) {
+            trigger.removeEventListener('error', trigger._imageBoxErrorHandler);
+            delete trigger._imageBoxErrorHandler;
+          }
+          if (trigger._imageBoxLoadHandler) {
+            trigger.removeEventListener('load', trigger._imageBoxLoadHandler);
+            delete trigger._imageBoxLoadHandler;
+          }
+        };
       });
     },
 
@@ -320,14 +344,27 @@
     /**
      * Reinitialize - useful after dynamic DOM changes
      */
-    reinit: function () {
-      this.bindTriggers();
+    reinit: function (root) {
+      this.bindTriggers(root);
     },
 
     /**
      * Destroy component and clean up
      */
-    destroy: function () {
+    destroy: function (root) {
+      if (root && root !== document) {
+        const triggersInRoot = this.getTriggers(root);
+        triggersInRoot.forEach(trigger => {
+          trigger.classList.remove('vd-image-box-trigger');
+          if (trigger._imageBoxCleanup) {
+            trigger._imageBoxCleanup();
+            delete trigger._imageBoxCleanup;
+          }
+          delete trigger.dataset.imageBoxInitialized;
+        });
+        return;
+      }
+
       // Close if open
       if (this.isOpen) {
         this.close();
@@ -343,7 +380,9 @@
       this._cleanupFunctions = [];
 
       // Remove trigger bindings
-      const triggers = document.querySelectorAll('[data-image-box-initialized]');
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(root, '[data-image-box-initialized]')
+        : document.querySelectorAll('[data-image-box-initialized]');
       triggers.forEach(trigger => {
         trigger.classList.remove('vd-image-box-trigger');
         if (trigger._imageBoxCleanup) {
@@ -362,8 +401,8 @@
       this.isOpen = false;
     },
 
-    destroyAll: function () {
-      this.destroy();
+    destroyAll: function (root) {
+      this.destroy(root);
     }
   };
 

package/js/components/lazy-load.js

@@ -32,6 +32,42 @@
     /** @type {Map<Element, IntersectionObserver>} */
     const _observerMap = new Map();
 
+    function _isRoot(root) {
+        return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    }
+
+    function _normalizeRoot(root) {
+        return _isRoot(root) ? root : document;
+    }
+
+    function _isInRoot(root, element) {
+        const scope = _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);
+    }
+
+    function _queryAll(root, selector) {
+        const scope = _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;
+    }
+
     /* ── Security helpers ─────────────────────────────── */
 
     /**
@@ -183,6 +219,9 @@
                     if (entry.isIntersecting) {
                         obs.unobserve(entry.target);
                         _observerMap.delete(entry.target);
+                        if (typeof window.VanduoLifecycle !== 'undefined' && window.VanduoLifecycle.has(entry.target, 'lazyLoad')) {
+                            window.VanduoLifecycle.unregister(entry.target, 'lazyLoad');
+                        }
                         try {
                             callback(entry.target);
                         } catch (e) {
@@ -193,6 +232,11 @@
             }, { threshold: threshold, rootMargin: rootMargin });
 
             _observerMap.set(element, observer);
+            if (typeof window.VanduoLifecycle !== 'undefined' && !window.VanduoLifecycle.has(element, 'lazyLoad')) {
+                window.VanduoLifecycle.register(element, 'lazyLoad', [() => {
+                    VanduoLazyLoad.unobserve(element, { skipLifecycle: true });
+                }]);
+            }
             observer.observe(element);
         },
 
@@ -200,22 +244,30 @@
          * Stop observing an element that was previously passed to observe().
          * @param {Element} element
          */
-        unobserve: function (element) {
+        unobserve: function (element, options) {
+            const opts = options || {};
             const observer = _observerMap.get(element);
             if (observer) {
                 observer.unobserve(element);
+                if (typeof observer.disconnect === 'function') {
+                    observer.disconnect();
+                }
                 _observerMap.delete(element);
             }
+
+            if (!opts.skipLifecycle && typeof window.VanduoLifecycle !== 'undefined' && window.VanduoLifecycle.has(element, 'lazyLoad')) {
+                window.VanduoLifecycle.unregister(element, 'lazyLoad');
+            }
         },
 
         /**
          * Stop observing ALL currently observed elements.
          */
         unobserveAll: function () {
-            _observerMap.forEach(function (observer, element) {
-                observer.unobserve(element);
+            const observed = Array.from(_observerMap.keys());
+            observed.forEach(function (element) {
+                VanduoLazyLoad.unobserve(element);
             });
-            _observerMap.clear();
         },
 
         /* ─────────────────────────────────────────────────
@@ -275,9 +327,9 @@
                         // raw innerHTML assignment of externally-sourced strings
                         _safeInjectHtml(containerEl, html);
                         _dispatch(containerEl, 'lazysection:loaded', { url: url });
-                        // Re-init Vanduo components inside the new content
+                        // Re-init Vanduo components only inside the injected subtree
                         if (typeof window.Vanduo !== 'undefined') {
-                            window.Vanduo.init();
+                            window.Vanduo.init(containerEl);
                         }
                         if (typeof opts.onLoaded === 'function') {
                             opts.onLoaded(containerEl);
@@ -316,9 +368,9 @@
          * Scan the DOM for [data-vd-lazy] elements and wire them up.
          * Safe to call multiple times — already-observed elements are skipped.
          */
-        init: function () {
+        init: function (root) {
             const self = this;
-            const elements = document.querySelectorAll('[data-vd-lazy]');
+            const elements = _queryAll(root, '[data-vd-lazy]');
             elements.forEach(function (el) {
                 // Skip already-observed or already-loaded elements
                 if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;
@@ -339,12 +391,32 @@
                     }
                 });
             });
+        },
+
+        destroy: function (element) {
+            this.unobserve(element);
+        },
+
+        destroyAll: function (root) {
+            const scope = _normalizeRoot(root);
+
+            if (scope === document) {
+                this.unobserveAll();
+                return;
+            }
+
+            const observed = Array.from(_observerMap.keys());
+            observed.forEach((element) => {
+                if (_isInRoot(scope, element)) {
+                    this.unobserve(element);
+                }
+            });
         }
     };
 
     /* ── Register with Vanduo ─────────────────────────── */
     if (typeof window.Vanduo !== 'undefined') {
-        window.Vanduo.register('LazyLoad', VanduoLazyLoad);
+        window.Vanduo.register('lazyLoad', VanduoLazyLoad, { aliases: ['LazyLoad'] });
     }
 
     /* ── Global convenience alias ─────────────────────── */

package/js/components/modals.js

@@ -13,6 +13,7 @@
     modals: new Map(),
     openModals: [],
     zIndexCounter: 1050,
+    __vanduoScopedDestroyAll: true,
 
     // Store trigger cleanup functions
     _triggerCleanups: [],
@@ -79,8 +80,8 @@
     /**
      * Initialize modals
      */
-    init: function () {
-      const modals = document.querySelectorAll('.vd-modal');
+    init: function (root) {
+      const modals = window.Vanduo.queryAll(root, '.vd-modal');
 
       modals.forEach(modal => {
         if (this.modals.has(modal)) {
@@ -90,7 +91,9 @@
       });
 
       // Handle data-modal triggers
-      const triggers = document.querySelectorAll('[data-modal]');
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(root, '[data-modal]')
+        : document.querySelectorAll('[data-modal]');
       triggers.forEach(trigger => {
         if (trigger.dataset.modalTriggerInitialized) return;
         trigger.dataset.modalTriggerInitialized = 'true';
@@ -104,7 +107,7 @@
           }
         };
         trigger.addEventListener('click', triggerClickHandler);
-        this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));
+        trigger._modalTriggerCleanup = () => trigger.removeEventListener('click', triggerClickHandler);
       });
     },
 
@@ -421,15 +424,29 @@
     /**
      * Destroy all modal instances
      */
-    destroyAll: function () {
+    destroyAll: function (root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === 'function'
+        ? window.Vanduo._normalizeRoot(root)
+        : (root || document);
+
       this.modals.forEach((data, modal) => {
-        this.destroy(modal);
+        if (scope === document || scope === modal || (typeof scope.contains === 'function' && scope.contains(modal))) {
+          this.destroy(modal);
+        }
+      });
+
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(scope, '[data-modal][data-modal-trigger-initialized]')
+        : document.querySelectorAll('[data-modal][data-modal-trigger-initialized]');
+      triggers.forEach(trigger => {
+        if (trigger._modalTriggerCleanup) {
+          trigger._modalTriggerCleanup();
+          delete trigger._modalTriggerCleanup;
+        }
+        delete trigger.dataset.modalTriggerInitialized;
       });
-      // Clean up trigger listeners
-      this._triggerCleanups.forEach(fn => fn());
-      this._triggerCleanups = [];
-      // Remove shared ESC handler
-      if (this._sharedEscHandler) {
+
+      if (scope === document && this._sharedEscHandler) {
         document.removeEventListener('keydown', this._sharedEscHandler);
         this._sharedEscHandler = null;
       }
@@ -445,4 +462,3 @@
   window.VanduoModals = Modals;
 
 })();
-

package/js/components/morph.js

@@ -21,8 +21,8 @@
   const Morph = {
     instances: new Map(),
 
-    init: function () {
-      const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');
+    init: function (root) {
+      const elements = window.Vanduo.queryAll(root, '.vd-morph, [data-vd-morph]');
       elements.forEach(function (el) {
         if (Morph.instances.has(el)) return;
         if (el.getAttribute('data-vd-morph') === 'manual') return;

package/js/components/music-player.js

@@ -155,8 +155,8 @@
      * Auto-initialize all .vd-music-player / [data-music-player] elements.
      * Options can be provided via data-music-player-options (JSON string).
      */
-    init: function () {
-      document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {
+    init: function (root) {
+      window.Vanduo.queryAll(root, '.vd-music-player, [data-music-player]').forEach((el) => {
         if (this.instances.has(el)) return;
 
         let opts = {};

package/js/components/navbar.js

@@ -29,8 +29,8 @@
     /**
      * Initialize navbar component
      */
-    init: function () {
-      const navbars = document.querySelectorAll('.vd-navbar');
+    init: function (root) {
+      const navbars = window.Vanduo.queryAll(root, '.vd-navbar');
 
       navbars.forEach(navbar => {
         // Skip if already initialized

package/js/components/pagination.js

@@ -16,8 +16,8 @@
     /**
      * Initialize pagination components
      */
-    init: function() {
-      const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');
+    init: function(root) {
+      const paginations = window.Vanduo.queryAll(root, '.vd-pagination[data-pagination]');
 
       paginations.forEach(pagination => {
         if (this.instances.has(pagination)) {
@@ -283,4 +283,3 @@
   window.VanduoPagination = Pagination;
   
 })();
-

package/js/components/parallax.js

@@ -21,20 +21,13 @@
     /**
      * Initialize parallax components
      */
-    init: function () {
-      if (this.isInitialized) {
-        this.refresh();
-        return;
-      }
-
-      this.isInitialized = true;
-
+    init: function (root) {
       // Check for reduced motion preference
       if (this.reducedMotion) {
         return; // Don't initialize if user prefers reduced motion
       }
 
-      const parallaxElements = document.querySelectorAll('.vd-parallax');
+      const parallaxElements = window.Vanduo.queryAll(root, '.vd-parallax');
 
       parallaxElements.forEach(element => {
         if (!element.dataset.parallaxInitialized) {
@@ -42,6 +35,13 @@
         }
       });
 
+      if (this.isInitialized) {
+        this.refresh();
+        return;
+      }
+
+      this.isInitialized = true;
+
       // Handle scroll
       this.handleScroll();
       this._onScroll = () => {
@@ -213,4 +213,3 @@
   window.VanduoParallax = Parallax;
 
 })();
-

package/js/components/preloader.js

@@ -10,11 +10,19 @@
    * Preloader Component
    */
   const Preloader = {
+    getProgressBars: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === 'function') {
+        return window.Vanduo.queryAll(root, '.vd-progress-bar[data-progress], .progress-bar[data-progress]');
+      }
+
+      return Array.from(document.querySelectorAll('.vd-progress-bar[data-progress], .progress-bar[data-progress]'));
+    },
+
     /**
      * Initialize preloader components
      */
-    init: function() {
-      const progressBars = document.querySelectorAll('.vd-progress-bar[data-progress], .progress-bar[data-progress]');
+    init: function(root) {
+      const progressBars = this.getProgressBars(root);
       
       progressBars.forEach(bar => {
         if (!bar.dataset.progressInitialized) {
@@ -163,8 +171,10 @@
     /**
      * Destroy all progress bar instances
      */
-    destroyAll: function() {
-      const progressBars = document.querySelectorAll('.vd-progress-bar[data-progress-initialized="true"], .progress-bar[data-progress-initialized="true"]');
+    destroyAll: function(root) {
+      const progressBars = this.getProgressBars(root || document).filter(function(bar) {
+        return bar.dataset.progressInitialized === 'true';
+      });
       progressBars.forEach(bar => {
         delete bar.dataset.progressInitialized;
       });
@@ -180,4 +190,3 @@
   window.VanduoPreloader = Preloader;
   
 })();
-

package/js/components/rating.js

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

package/js/components/ripple.js

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

package/js/components/select.js

@@ -16,8 +16,8 @@
     /**
      * Initialize select components
      */
-    init: function () {
-      const selects = document.querySelectorAll('select.vd-custom-select-input, select[data-custom-select]');
+    init: function (root) {
+      const selects = window.Vanduo.queryAll(root, 'select.vd-custom-select-input, select[data-custom-select]');
 
       selects.forEach(select => {
         if (this.instances.has(select)) {
@@ -443,4 +443,3 @@
   }
 
 })();
-

package/js/components/sidenav.js

@@ -13,9 +13,11 @@
     sidenavs: new Map(),
     breakpoint: 992, // Desktop breakpoint
     restoreDelayMs: 450,
+    __vanduoScopedDestroyAll: true,
     
     // Global cleanup functions (toggles, resize)
     _globalCleanups: [],
+    _resizeCleanup: null,
 
     isFixedVariant: function(sidenav) {
       return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');
@@ -140,8 +142,8 @@
     /**
      * Initialize sidenav components
      */
-    init: function() {
-      const sidenavs = document.querySelectorAll('.vd-sidenav, .vd-offcanvas');
+    init: function(root) {
+      const sidenavs = window.Vanduo.queryAll(root, '.vd-sidenav, .vd-offcanvas');
 
       sidenavs.forEach(sidenav => {
         if (this.sidenavs.has(sidenav)) {
@@ -151,7 +153,9 @@
       });
 
       // Handle toggle buttons
-      const toggles = document.querySelectorAll('[data-sidenav-toggle]');
+      const toggles = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(root, '[data-sidenav-toggle]')
+        : document.querySelectorAll('[data-sidenav-toggle]');
       toggles.forEach(toggle => {
         if (toggle.dataset.sidenavToggleInitialized) return;
         toggle.dataset.sidenavToggleInitialized = 'true';
@@ -165,16 +169,18 @@
           }
         };
         toggle.addEventListener('click', toggleClickHandler);
-        this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));
+        toggle._sidenavToggleCleanup = () => toggle.removeEventListener('click', toggleClickHandler);
       });
 
       // Handle responsive behavior
       this.handleResize();
-      const resizeHandler = () => {
-        this.handleResize();
-      };
-      window.addEventListener('resize', resizeHandler);
-      this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));
+      if (!this._resizeCleanup) {
+        const resizeHandler = () => {
+          this.handleResize();
+        };
+        window.addEventListener('resize', resizeHandler);
+        this._resizeCleanup = () => window.removeEventListener('resize', resizeHandler);
+      }
     },
 
     /**
@@ -406,12 +412,36 @@
     /**
      * Destroy all sidenav instances
      */
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === 'function'
+        ? window.Vanduo._normalizeRoot(root)
+        : (root || document);
+
       this.sidenavs.forEach((data, sidenav) => {
-        this.destroy(sidenav);
+        if (scope === document || scope === sidenav || (typeof scope.contains === 'function' && scope.contains(sidenav))) {
+          this.destroy(sidenav);
+        }
       });
-      this._globalCleanups.forEach(fn => fn());
-      this._globalCleanups = [];
+
+      const toggles = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(scope, '[data-sidenav-toggle][data-sidenav-toggle-initialized]')
+        : document.querySelectorAll('[data-sidenav-toggle][data-sidenav-toggle-initialized]');
+      toggles.forEach(toggle => {
+        if (toggle._sidenavToggleCleanup) {
+          toggle._sidenavToggleCleanup();
+          delete toggle._sidenavToggleCleanup;
+        }
+        delete toggle.dataset.sidenavToggleInitialized;
+      });
+
+      if (scope === document) {
+        if (this._resizeCleanup) {
+          this._resizeCleanup();
+          this._resizeCleanup = null;
+        }
+        this._globalCleanups.forEach(fn => fn());
+        this._globalCleanups = [];
+      }
     }
   };
   
@@ -424,4 +454,3 @@
   window.VanduoSidenav = Sidenav;
   
 })();
-

package/js/components/spotlight.js

@@ -15,8 +15,8 @@
     _boundTriggers: new WeakMap(),
     _triggerElement: null,
 
-    init: function () {
-      const triggers = document.querySelectorAll('[data-vd-spotlight]');
+    init: function (root) {
+      const triggers = window.Vanduo.queryAll(root, '[data-vd-spotlight]');
 
       triggers.forEach(trigger => {
         if (this._boundTriggers.has(trigger)) return;

package/js/components/stepper.js

@@ -9,8 +9,8 @@
   const Stepper = {
     instances: new Map(),
 
-    init: function () {
-      const steppers = document.querySelectorAll('.vd-stepper');
+    init: function (root) {
+      const steppers = window.Vanduo.queryAll(root, '.vd-stepper');
       steppers.forEach(el => {
         if (this.instances.has(el)) return;
         this.initInstance(el);