@vanduo-oss/framework 1.3.8 → 1.4.0

package/js/components/affix.js

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

package/js/components/bubble.js

@@ -10,8 +10,8 @@
     instances: new Map(),
     _globalCleanups: [],
 
-    init: function () {
-      const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');
+    init: function (root) {
+      const triggers = window.Vanduo.queryAll(root, '[data-vd-bubble], [data-vd-popover]');
       triggers.forEach(el => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -82,7 +82,7 @@
       body.className = 'vd-bubble-body';
       if (htmlContent) {
         if (typeof sanitizeHtml === 'function') {
-          body.innerHTML = sanitizeHtml(htmlContent, { allowSvg });
+          body.innerHTML = sanitizeHtml(htmlContent, { allowSvg, allowStyle: false });
         } else {
           body.textContent = htmlContent;
         }

package/js/components/code-snippet.js

@@ -12,6 +12,31 @@
   const CodeSnippet = {
     _snippetIdCounter: 0,
 
+    resolveRoot: function (root) {
+      if (root && (root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11)) {
+        return root;
+      }
+      return document;
+    },
+
+    queryWithin: function (root, selector) {
+      const scope = this.resolveRoot(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;
+    },
+
     getSnippetInstanceId: function (snippet) {
       if (snippet.dataset.codeSnippetId) {
         return snippet.dataset.codeSnippetId;
@@ -40,8 +65,8 @@
     /**
      * Initialize all code snippet components
      */
-    init: function () {
-      const snippets = document.querySelectorAll('.vd-code-snippet');
+    init: function (root) {
+      const snippets = this.queryWithin(root, '.vd-code-snippet');
 
       snippets.forEach(snippet => {
         if (!snippet.dataset.initialized) {
@@ -86,6 +111,11 @@
         this.extractHtml(pane);
       });
 
+      const panesToHighlight = snippet.querySelectorAll('.vd-code-snippet-pane:not([data-extract])');
+      panesToHighlight.forEach(pane => {
+        this.applyPaneHighlighting(pane);
+      });
+
       // Handle line numbers
       const lineNumberPanes = snippet.querySelectorAll('.has-line-numbers');
       lineNumberPanes.forEach(pane => {
@@ -383,6 +413,7 @@
       codeEl.innerHTML = html;
       pane.replaceChildren(codeEl);
       pane.dataset.extracted = 'true';
+      pane.dataset.highlighted = 'true';
     },
 
     /**
@@ -441,6 +472,94 @@
       return div.innerHTML;
     },
 
+    needsHighlighting: function (pane, codeEl) {
+      if (!codeEl) return false;
+      if (pane.dataset.highlighted === 'true') return false;
+      if (codeEl.querySelector('[class^="code-"], [class*=" code-"]')) return false;
+      return true;
+    },
+
+    getHighlightMode: function (lang) {
+      const normalized = String(lang || '').trim().toLowerCase();
+
+      if ([
+        'html',
+        'xml',
+        'svg',
+        'vue',
+        'svelte',
+        'astro'
+      ].includes(normalized)) {
+        return 'html';
+      }
+
+      if ([
+        'css',
+        'scss',
+        'sass',
+        'less'
+      ].includes(normalized)) {
+        return 'css';
+      }
+
+      if ([
+        'js',
+        'mjs',
+        'cjs',
+        'ts',
+        'jsx',
+        'tsx',
+        'json',
+        'bash',
+        'sh'
+      ].includes(normalized)) {
+        return 'js';
+      }
+
+      return 'plain';
+    },
+
+    highlightCodeByLang: function (rawCode, lang) {
+      const escaped = this.escapeHtml(rawCode);
+      const mode = this.getHighlightMode(lang);
+
+      if (mode === 'html') {
+        return this.highlightHtml(escaped);
+      }
+
+      if (mode === 'css') {
+        return this.highlightCss(escaped);
+      }
+
+      if (mode === 'js') {
+        return this.highlightJs(escaped);
+      }
+
+      return escaped;
+    },
+
+    applyPaneHighlighting: function (pane) {
+      if (!pane) return;
+
+      const codeEl = pane.querySelector('code') || pane;
+      if (!this.needsHighlighting(pane, codeEl)) {
+        pane.dataset.highlighted = 'true';
+        return;
+      }
+
+      const rawCode = codeEl.textContent || '';
+      const highlighted = this.highlightCodeByLang(rawCode, pane.dataset.lang);
+      const nextCodeEl = codeEl.tagName === 'CODE' ? codeEl : document.createElement('code');
+
+      nextCodeEl.innerHTML = highlighted;
+
+      if (nextCodeEl !== codeEl) {
+        pane.replaceChildren(nextCodeEl);
+      }
+
+      pane.dataset.highlighted = 'true';
+    },
+
     /**
      * Apply syntax highlighting to HTML
      * @param {string} html - Escaped HTML string
@@ -451,9 +570,11 @@
       html = html.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="code-tag">$2</span>');
 
       // Highlight attributes
+      html = html.replace(/([\w-]+)(=)(["'])/g, '<span class="code-attr">$1</span>$2$3');
       html = html.replace(/([\w-]+)(=)(&quot;|&#39;)/g, '<span class="code-attr">$1</span>$2$3');
 
       // Highlight attribute values (strings)
+      html = html.replace(/(["'])([^"']*)(["'])/g, '$1<span class="code-string">$2</span>$3');
       html = html.replace(/(&quot;|&#39;)([^&]*)(&quot;|&#39;)/g, '$1<span class="code-string">$2</span>$3');
 
       // Highlight comments
@@ -625,9 +746,12 @@
     /**
      * Destroy all code snippet instances
      */
-    destroyAll: function () {
-      const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized="true"]');
-      snippets.forEach(snippet => this.destroy(snippet));
+    destroyAll: function (root) {
+      const scope = this.resolveRoot(root);
+      const snippets = this.queryWithin(scope, '.vd-code-snippet[data-initialized="true"]');
+      snippets.forEach(snippet => {
+        this.destroy(snippet);
+      });
     }
   };
 

package/js/components/collapsible.js

@@ -16,8 +16,8 @@
     /**
      * Initialize collapsible components
      */
-    init: function() {
-      const collapsibles = document.querySelectorAll('.vd-collapsible, .accordion');
+    init: function(root) {
+      const collapsibles = window.Vanduo.queryAll(root, '.vd-collapsible, .accordion');
 
       collapsibles.forEach(container => {
         if (this.instances.has(container)) {
@@ -223,4 +223,3 @@
   window.VanduoCollapsible = Collapsible;
   
 })();
-

package/js/components/datepicker.js

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

package/js/components/doc-search.js

@@ -84,6 +84,26 @@
     placeholder: 'Search...'
   };
 
+  const ALLOWED_HIGHLIGHT_TAGS = {
+    mark: true,
+    span: true,
+    strong: true,
+    em: true
+  };
+
+  function isRoot(value) {
+    return typeof window.VanduoLifecycle !== 'undefined' && window.VanduoLifecycle.isRoot(value);
+  }
+
+  function normalizeRoot(root) {
+    return isRoot(root) ? root : document;
+  }
+
+  function normalizeHighlightTag(tagName) {
+    const normalized = typeof tagName === 'string' ? tagName.toLowerCase() : 'mark';
+    return ALLOWED_HIGHLIGHT_TAGS[normalized] ? normalized : 'mark';
+  }
+
   /**
    * Search Component Factory
    * Creates a new search instance with the given configuration
@@ -93,6 +113,8 @@
    */
   function createSearch(options) {
     const config = Object.assign({}, DEFAULTS, options || {});
+    config.root = normalizeRoot(config.root);
+    config.highlightTag = normalizeHighlightTag(config.highlightTag);
     
     // Instance state
     const state = {
@@ -109,6 +131,28 @@
       boundHandlers: {}
     };
 
+    function queryAll(selector) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === 'function') {
+        return window.Vanduo.queryAll(config.root, selector);
+      }
+
+      const scope = normalizeRoot(config.root);
+      if (scope === document) {
+        return Array.from(document.querySelectorAll(selector));
+      }
+
+      const matches = [];
+      if (scope instanceof Element && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      return matches.concat(Array.from(scope.querySelectorAll(selector)));
+    }
+
+    function queryOne(selector) {
+      const matches = queryAll(selector);
+      return matches.length ? matches[0] : null;
+    }
+
     function safeInvokeCallback(name, fn, ...args) {
       try {
         fn(...args);
@@ -136,7 +180,7 @@
         return instance;
       }
 
-      state.container = document.querySelector(config.containerSelector);
+      state.container = queryOne(config.containerSelector);
       if (!state.container) {
         state.initialized = false;
         return null;
@@ -192,7 +236,7 @@
       }
 
       // Build from DOM
-      const sections = document.querySelectorAll(config.contentSelector);
+      const sections = queryAll(config.contentSelector);
       const categoryMap = buildCategoryMap();
 
       sections.forEach(function(section) {
@@ -234,7 +278,7 @@
     function buildCategoryMap() {
       const map = {};
       let currentCategory = 'Documentation';
-      const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);
+      const navItems = queryAll(config.navSelector + ', ' + config.sectionSelector);
 
       navItems.forEach(function(item) {
         if (item.classList.contains('doc-nav-section')) {
@@ -736,7 +780,7 @@
       }
 
       // Default behavior: navigate to section
-      const section = document.querySelector(result.url);
+      const section = queryOne(result.url) || document.querySelector(result.url);
       if (section) {
         section.scrollIntoView({ behavior: 'smooth', block: 'start' });
         window.history.pushState(null, '', result.url);
@@ -748,7 +792,7 @@
      * Update sidebar navigation active state
      */
     function updateSidebarActive(sectionId) {
-      const navLinks = document.querySelectorAll(config.navSelector);
+      const navLinks = queryAll(config.navSelector);
       navLinks.forEach(function(link) {
         link.classList.remove('active');
         if (link.getAttribute('href') === '#' + sectionId) {
@@ -822,6 +866,8 @@
      */
     function setConfig(newConfig) {
       Object.assign(config, newConfig);
+      config.root = normalizeRoot(config.root);
+      config.highlightTag = normalizeHighlightTag(config.highlightTag);
     }
 
     /**
@@ -848,7 +894,10 @@
       close: close,
       setConfig: setConfig,
       getConfig: getConfig,
-      getIndex: getIndex
+      getIndex: getIndex,
+      getContainer: function () {
+        return state.container;
+      }
     };
 
     return instance;
@@ -878,7 +927,10 @@
     /**
      * Initialize the default search instance
      */
-    init: function(options) {
+    init: function(rootOrOptions, maybeOptions) {
+      const root = isRoot(rootOrOptions) ? rootOrOptions : null;
+      const options = root ? maybeOptions : rootOrOptions;
+
       if (this._instance) {
         this._instance.destroy();
       }
@@ -887,22 +939,28 @@
         Object.assign(this.config, options);
       }
       
-      this._instance = createSearch(this.config);
+      this._instance = createSearch(Object.assign({}, this.config, root ? { root: root } : {}));
       return this._instance ? this._instance.init() : null;
     },
 
     /**
      * Destroy the default instance
      */
-    destroy: function() {
+    destroy: function(root) {
+      if (root && this._instance && this._instance.getContainer() && typeof window.VanduoLifecycle !== 'undefined') {
+        if (!window.VanduoLifecycle.isInRoot(root, this._instance.getContainer())) {
+          return;
+        }
+      }
+
       if (this._instance) {
         this._instance.destroy();
         this._instance = null;
       }
     },
 
-    destroyAll: function() {
-      this.destroy();
+    destroyAll: function(root) {
+      this.destroy(root);
     },
 
     /**

package/js/components/draggable.js

@@ -24,8 +24,8 @@
     /**
      * Initialize draggable components
      */
-    init: function () {
-      const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');
+    init: function (root) {
+      const draggables = window.Vanduo.queryAll(root, '.vd-draggable, [data-draggable]');
 
       draggables.forEach(element => {
         if (this.instances.has(element)) {
@@ -34,14 +34,14 @@
         this.initDraggable(element);
       });
 
-      const containers = document.querySelectorAll(this.containerSelector);
+      const containers = window.Vanduo.queryAll(root, this.containerSelector);
       containers.forEach(container => {
         if (!this.instances.has(container)) {
           this.initContainer(container);
         }
       });
 
-      const dropZones = document.querySelectorAll('.vd-drop-zone');
+      const dropZones = window.Vanduo.queryAll(root, '.vd-drop-zone');
       dropZones.forEach(zone => {
         if (!this.instances.has(zone)) {
           this.initDropZone(zone);

package/js/components/dropdown.js

@@ -16,8 +16,8 @@
     /**
      * Initialize dropdown components
      */
-    init: function() {
-      const dropdowns = document.querySelectorAll('.vd-dropdown');
+    init: function(root) {
+      const dropdowns = window.Vanduo.queryAll(root, '.vd-dropdown');
 
       dropdowns.forEach(dropdown => {
         if (this.instances.has(dropdown)) {
@@ -367,4 +367,3 @@
   window.VanduoDropdown = Dropdown;
   
 })();
-

package/js/components/expanding-cards.js

@@ -13,8 +13,8 @@
   const ExpandingCards = {
     instances: new Map(),
 
-    init: function () {
-      document.querySelectorAll('.vd-expanding-cards').forEach(function (el) {
+    init: function (root) {
+      window.Vanduo.queryAll(root, '.vd-expanding-cards').forEach(function (el) {
         if (el.getAttribute('data-vd-expanding-cards') === 'manual') return;
         if (ExpandingCards.instances.has(el)) return;
         ExpandingCards.initContainer(el);

package/js/components/flow.js

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

package/js/components/font-switcher.js

@@ -40,36 +40,42 @@
       }
     },
 
-    init: function() {
+    getToggles: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === 'function') {
+        return window.Vanduo.queryAll(root, '[data-toggle="font"]');
+      }
+
+      return Array.from(document.querySelectorAll('[data-toggle="font"]'));
+    },
+
+    init: function(root) {
       this.state = {
         preference: this.getPreference()
       };
       if (!this.fonts[this.state.preference]) {
-        this.state.preference = 'lato';
+        this.state.preference = 'ubuntu';
         this.setStorageValue(this.STORAGE_KEY, this.state.preference);
       }
 
       if (this.isInitialized) {
         this.applyFont();
-        this.renderUI();
-        this.updateUI();
+        this.renderUI(root);
+        this.updateUI(root);
         return;
       }
 
       this.isInitialized = true;
 
       this.applyFont();
-      this.renderUI();
-
-      console.log('Vanduo Font Switcher initialized');
+      this.renderUI(root);
     },
 
     /**
      * Get saved font preference from localStorage
-     * @returns {string} Font key or 'lato' (default)
+     * @returns {string} Font key or 'ubuntu' (default)
      */
     getPreference: function() {
-      return this.getStorageValue(this.STORAGE_KEY, 'lato');
+      return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');
     },
 
     /**
@@ -113,8 +119,8 @@
     /**
      * Initialize UI elements with data-toggle="font"
      */
-    renderUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"]');
+    renderUI: function(root) {
+      const toggles = this.getToggles(root);
 
       toggles.forEach(toggle => {
         if (toggle.getAttribute('data-font-initialized') === 'true') {
@@ -153,8 +159,8 @@
     /**
      * Update all UI elements to reflect current state
      */
-    updateUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"]');
+    updateUI: function(root) {
+      const toggles = this.getToggles(root);
 
       toggles.forEach(toggle => {
         if (toggle.tagName === 'SELECT') {
@@ -186,8 +192,10 @@
       return this.fonts[fontKey] || null;
     },
 
-    destroyAll: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]');
+    destroyAll: function(root) {
+      const toggles = this.getToggles(root || document).filter(function(toggle) {
+        return toggle.getAttribute('data-font-initialized') === 'true';
+      });
       toggles.forEach(toggle => {
         if (toggle._fontToggleHandler) {
           const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';
@@ -197,7 +205,9 @@
         toggle.removeAttribute('data-font-initialized');
       });
 
-      this.isInitialized = false;
+      if (!root || root === document) {
+        this.isInitialized = false;
+      }
     },
 
     getStorageValue: function(key, fallback) {

package/js/components/glass.js

@@ -18,8 +18,8 @@
     /** @type {Map<Element, IntersectionObserver>} */
     observers: new Map(),
 
-    init: function () {
-      document.querySelectorAll('[data-glass-scroll]').forEach(el => {
+    init: function (root) {
+      window.Vanduo.queryAll(root, '[data-glass-scroll]').forEach(el => {
         if (this.observers.has(el)) return;
         this.initElement(el);
       });

package/js/components/grid.js

@@ -20,12 +20,13 @@
    */
   const GridLayout = {
     instances: new Map(),
+    __vanduoScopedDestroyAll: true,
 
     /**
      * Initialize all grid layout containers
      */
-    init: function () {
-      const containers = document.querySelectorAll('[data-layout-mode]');
+    init: function (root) {
+      const containers = window.Vanduo.queryAll(root, '[data-layout-mode]');
 
       containers.forEach(function (container) {
         if (this.instances.has(container)) {
@@ -34,7 +35,7 @@
         this.initContainer(container);
       }.bind(this));
 
-      this.initToggleButtons();
+      this.initToggleButtons(root);
     },
 
     /**
@@ -59,8 +60,10 @@
     /**
      * Initialize toggle buttons that target grid containers
      */
-    initToggleButtons: function () {
-      const toggleButtons = document.querySelectorAll('[data-grid-toggle]');
+    initToggleButtons: function (root) {
+      const toggleButtons = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(root, '[data-grid-toggle]')
+        : document.querySelectorAll('[data-grid-toggle]');
 
       toggleButtons.forEach(function (button) {
         if (button.getAttribute('data-grid-initialized') === 'true') {
@@ -253,12 +256,20 @@
     /**
      * Destroy all grid layout instances and clean up toggle buttons
      */
-    destroyAll: function () {
+    destroyAll: function (root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === 'function'
+        ? window.Vanduo._normalizeRoot(root)
+        : (root || document);
+
       this.instances.forEach(function (instance, container) {
-        this.destroy(container);
+        if (scope === document || scope === container || (typeof scope.contains === 'function' && scope.contains(container))) {
+          this.destroy(container);
+        }
       }.bind(this));
 
-      const toggleButtons = document.querySelectorAll('[data-grid-initialized="true"]');
+      const toggleButtons = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(scope, '[data-grid-toggle][data-grid-initialized="true"]')
+        : document.querySelectorAll('[data-grid-initialized="true"]');
       toggleButtons.forEach(function (button) {
         if (button._gridCleanup) {
           button._gridCleanup();