@vanduo-oss/framework 1.3.9 → 1.4.1

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;
+          }
+        };
       });
     },
 
@@ -256,7 +280,7 @@
 
       // Calculate scrollbar width and lock body scroll
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+      document.body.style.setProperty('--vd-scrollbar-width', `${scrollbarWidth}px`);
       document.body.classList.add('body-image-box-open');
 
       // Show backdrop
@@ -294,7 +318,7 @@
 
       // Unlock body scroll
       document.body.classList.remove('body-image-box-open');
-      document.body.style.removeProperty('--scrollbar-width');
+      document.body.style.removeProperty('--vd-scrollbar-width');
 
       // Return focus to trigger
       if (this.currentTrigger) {
@@ -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;
@@ -102,7 +102,7 @@
       el.classList.add('is-morphing');
 
       let duration = MORPH_DURATION_MS;
-      const custom = getComputedStyle(el).getPropertyValue('--morph-duration');
+      const custom = getComputedStyle(el).getPropertyValue('--vd-morph-duration');
       if (custom) {
         const parsed = parseFloat(custom);
         if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);

package/js/components/music-player.js

@@ -101,13 +101,13 @@
     const max = parseFloat(input.max) || 1;
     const val = parseFloat(input.value) || 0;
     const pct = ((val - min) / (max - min)) * 100;
-    input.style.setProperty('--fill', pct + '%');
+    input.style.setProperty('--vd-fill', pct + '%');
     // Fallback inline gradient for browsers without ::-moz-range-progress
     input.style.backgroundImage =
-      'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +
-      'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +
-      'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +
-      'var(--music-player-track-bg, #ccc) 100%)';
+      'linear-gradient(to right, var(--vd-music-player-track-fill, currentColor) 0%, ' +
+      'var(--vd-music-player-track-fill, currentColor) ' + pct + '%, ' +
+      'var(--vd-music-player-track-bg, #ccc) ' + pct + '%, ' +
+      'var(--vd-music-player-track-bg, #ccc) 100%)';
   }
 
   /* ─── Phosphor icon helper (matches framework icon style) ─ */
@@ -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 = {};
@@ -911,8 +911,8 @@
         'vd-music-player-floating-bottom-right',
         'is-position-custom'
       );
-      container.style.removeProperty('--music-player-floating-top');
-      container.style.removeProperty('--music-player-floating-left');
+      container.style.removeProperty('--vd-music-player-floating-top');
+      container.style.removeProperty('--vd-music-player-floating-left');
       if (r && r.parent && r.parent.isConnected) {
         r.parent.insertBefore(container, r.next);
       }
@@ -1014,8 +1014,8 @@
      */
     _setCornerPosition: function (container, which) {
       container.classList.remove('is-position-custom', 'vd-music-player-floating-bottom-left', 'vd-music-player-floating-bottom-right');
-      container.style.removeProperty('--music-player-floating-top');
-      container.style.removeProperty('--music-player-floating-left');
+      container.style.removeProperty('--vd-music-player-floating-top');
+      container.style.removeProperty('--vd-music-player-floating-left');
       if (which === 'bottom-left') {
         container.classList.add('vd-music-player-floating-bottom-left');
       } else {
@@ -1031,8 +1031,8 @@
     _setCustomPositionFromRect: function (container, left, top) {
       container.classList.remove('vd-music-player-floating-bottom-left', 'vd-music-player-floating-bottom-right');
       container.classList.add('is-position-custom');
-      container.style.setProperty('--music-player-floating-left', left + 'px');
-      container.style.setProperty('--music-player-floating-top', top + 'px');
+      container.style.setProperty('--vd-music-player-floating-left', left + 'px');
+      container.style.setProperty('--vd-music-player-floating-top', top + 'px');
     },
 
     /**

package/js/components/navbar.js

@@ -19,7 +19,7 @@
      */
     getBreakpoint: function () {
       const root = getComputedStyle(document.documentElement);
-      const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();
+      const breakpointValue = root.getPropertyValue('--vd-breakpoint-lg').trim();
 
       // Parse the value (could be "992px" or just "992")
       const parsed = parseInt(breakpointValue, 10);
@@ -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) {
@@ -52,7 +60,7 @@
       
       // Update width
       if (animate) {
-        el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';
+        el.style.transition = 'width var(--vd-transition-duration-slow) var(--vd-transition-ease)';
       } else {
         el.style.transition = 'none';
         setTimeout(() => {
@@ -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 @@
   }
 
 })();
-