vanduo-framework 1.1.8-docs-update

package/js/components/sidenav.js

@@ -0,0 +1,303 @@
+/**
+ * Vanduo Framework - Sidenav Component
+ * JavaScript functionality for side navigation drawer
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Sidenav Component
+   */
+  const Sidenav = {
+    sidenavs: new Map(),
+    breakpoint: 992, // Desktop breakpoint
+    
+    // Global cleanup functions (toggles, resize)
+    _globalCleanups: [],
+
+    isFixedVariant: function(sidenav) {
+      return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');
+    },
+
+    isPushVariant: function(sidenav) {
+      return sidenav.classList.contains('vd-sidenav-push') || sidenav.classList.contains('sidenav-push');
+    },
+
+    isRightVariant: function(sidenav) {
+      return sidenav.classList.contains('vd-sidenav-right') || sidenav.classList.contains('sidenav-right');
+    },
+
+    /**
+     * Initialize sidenav components
+     */
+    init: function() {
+      const sidenavs = document.querySelectorAll('.vd-sidenav');
+
+      sidenavs.forEach(sidenav => {
+        if (this.sidenavs.has(sidenav)) {
+          return;
+        }
+        this.initSidenav(sidenav);
+      });
+
+      // Handle toggle buttons
+      const toggles = document.querySelectorAll('[data-sidenav-toggle]');
+      toggles.forEach(toggle => {
+        if (toggle.dataset.sidenavToggleInitialized) return;
+        toggle.dataset.sidenavToggleInitialized = 'true';
+
+        const toggleClickHandler = (e) => {
+          e.preventDefault();
+          const targetId = toggle.dataset.sidenavToggle;
+          const sidenav = document.querySelector(targetId);
+          if (sidenav) {
+            this.toggle(sidenav);
+          }
+        };
+        toggle.addEventListener('click', toggleClickHandler);
+        this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));
+      });
+
+      // Handle responsive behavior
+      this.handleResize();
+      const resizeHandler = () => {
+        this.handleResize();
+      };
+      window.addEventListener('resize', resizeHandler);
+      this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));
+    },
+
+    /**
+     * Initialize a single sidenav
+     * @param {HTMLElement} sidenav - Sidenav element
+     */
+    initSidenav: function(sidenav) {
+      const overlay = this.createOverlay(sidenav);
+      const closeButton = sidenav.querySelector('.vd-sidenav-close');
+      const cleanupFunctions = [];
+
+      // Set ARIA attributes
+      sidenav.setAttribute('role', 'navigation');
+      sidenav.setAttribute('aria-hidden', 'true');
+
+      // Close button handler
+      if (closeButton) {
+        const closeHandler = () => {
+          this.close(sidenav);
+        };
+        closeButton.addEventListener('click', closeHandler);
+        cleanupFunctions.push(() => closeButton.removeEventListener('click', closeHandler));
+      }
+
+      // Overlay click handler
+      const overlayClickHandler = () => {
+        if (sidenav.dataset.backdrop !== 'static') {
+          this.close(sidenav);
+        }
+      };
+      overlay.addEventListener('click', overlayClickHandler);
+      cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));
+
+      // ESC key handler
+      const escKeyHandler = (e) => {
+        if (e.key === 'Escape' && sidenav.classList.contains('is-open')) {
+          if (sidenav.dataset.keyboard !== 'false') {
+            this.close(sidenav);
+          }
+        }
+      };
+      document.addEventListener('keydown', escKeyHandler);
+      cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));
+
+      this.sidenavs.set(sidenav, { overlay, cleanup: cleanupFunctions });
+    },
+    
+    /**
+     * Create overlay element
+     * @param {HTMLElement} sidenav - Sidenav element
+     * @returns {HTMLElement} Overlay element
+     */
+    createOverlay: function(sidenav) {
+      let overlay = sidenav.querySelector('.vd-sidenav-overlay');
+      
+      if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.className = 'vd-sidenav-overlay';
+        document.body.appendChild(overlay);
+      }
+      
+      return overlay;
+    },
+    
+    /**
+     * Open sidenav
+     * @param {HTMLElement|string} sidenav - Sidenav element or selector
+     */
+    open: function(sidenav) {
+      const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;
+      
+      if (!el || !this.sidenavs.has(el)) {
+        return;
+      }
+      
+      const { overlay } = this.sidenavs.get(el);
+      
+      // Show overlay (if not fixed)
+      if (!this.isFixedVariant(el)) {
+        overlay.classList.add('is-visible');
+      }
+      
+      // Open sidenav
+      el.classList.add('is-open');
+      el.setAttribute('aria-hidden', 'false');
+      
+      // Lock body scroll
+      document.body.classList.add('body-sidenav-open');
+      
+      // Handle push variant
+      if (this.isPushVariant(el)) {
+        this.handlePushVariant(el, true);
+      }
+      
+      // Dispatch event
+      el.dispatchEvent(new CustomEvent('sidenav:open', { bubbles: true }));
+    },
+    
+    /**
+     * Close sidenav
+     * @param {HTMLElement|string} sidenav - Sidenav element or selector
+     */
+    close: function(sidenav) {
+      const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;
+      
+      if (!el || !this.sidenavs.has(el)) {
+        return;
+      }
+      
+      const { overlay } = this.sidenavs.get(el);
+      
+      // Hide overlay
+      overlay.classList.remove('is-visible');
+      
+      // Close sidenav
+      el.classList.remove('is-open');
+      el.setAttribute('aria-hidden', 'true');
+      
+      // Unlock body scroll
+      document.body.classList.remove('body-sidenav-open');
+      
+      // Handle push variant
+      if (this.isPushVariant(el)) {
+        this.handlePushVariant(el, false);
+      }
+      
+      // Dispatch event
+      el.dispatchEvent(new CustomEvent('sidenav:close', { bubbles: true }));
+    },
+    
+    /**
+     * Toggle sidenav
+     * @param {HTMLElement|string} sidenav - Sidenav element or selector
+     */
+    toggle: function(sidenav) {
+      const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;
+      if (el) {
+        if (el.classList.contains('is-open')) {
+          this.close(el);
+        } else {
+          this.open(el);
+        }
+      }
+    },
+    
+    /**
+     * Handle push variant
+     * @param {HTMLElement} sidenav - Sidenav element
+     * @param {boolean} isOpen - Whether sidenav is open
+     */
+    handlePushVariant: function(sidenav, isOpen) {
+      // Find the main content wrapper
+      const content = document.querySelector('main, .main-content, .content, [role="main"]') || document.body;
+      
+      if (isOpen) {
+        if (window.innerWidth >= this.breakpoint) {
+          if (this.isRightVariant(sidenav)) {
+            content.style.marginRight = sidenav.offsetWidth + 'px';
+          } else {
+            content.style.marginLeft = sidenav.offsetWidth + 'px';
+          }
+        }
+      } else {
+        content.style.marginLeft = '';
+        content.style.marginRight = '';
+      }
+    },
+    
+    /**
+     * Handle window resize
+     */
+    handleResize: function() {
+      this.sidenavs.forEach(({ overlay }, sidenav) => {
+        // Close overlay sidenavs on resize to desktop if they're open
+        if (window.innerWidth >= this.breakpoint) {
+          if (this.isFixedVariant(sidenav) && !sidenav.classList.contains('is-open')) {
+            // Fixed sidenavs should be visible on desktop
+            sidenav.classList.add('is-open');
+            sidenav.setAttribute('aria-hidden', 'false');
+            overlay.classList.remove('is-visible');
+          }
+        } else {
+          // On mobile, fixed sidenavs become overlay
+          if (this.isFixedVariant(sidenav) && sidenav.classList.contains('is-open')) {
+            this.close(sidenav);
+          }
+        }
+      });
+    },
+
+    /**
+     * Destroy a sidenav instance and clean up event listeners
+     * @param {HTMLElement} sidenav - Sidenav element
+     */
+    destroy: function(sidenav) {
+      const data = this.sidenavs.get(sidenav);
+      if (!data) return;
+
+      // Close if open
+      if (sidenav.classList.contains('is-open')) {
+        this.close(sidenav);
+      }
+
+      data.cleanup.forEach(fn => fn());
+
+      // Remove created overlay
+      if (data.overlay && data.overlay.parentNode) {
+        data.overlay.parentNode.removeChild(data.overlay);
+      }
+
+      this.sidenavs.delete(sidenav);
+    },
+
+    /**
+     * Destroy all sidenav instances
+     */
+    destroyAll: function() {
+      this.sidenavs.forEach((data, sidenav) => {
+        this.destroy(sidenav);
+      });
+      this._globalCleanups.forEach(fn => fn());
+      this._globalCleanups = [];
+    }
+  };
+  
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('sidenav', Sidenav);
+  }
+  
+  // Expose globally
+  window.VanduoSidenav = Sidenav;
+  
+})();
+

package/js/components/tabs.js

@@ -0,0 +1,303 @@
+/**
+ * Vanduo Framework - Tabs Component
+ * Tabbed content navigation with keyboard support
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Tabs Component
+   */
+  const Tabs = {
+    // Store initialized tab containers and their cleanup functions
+    instances: new Map(),
+
+    /**
+     * Initialize all tab components
+     */
+    init: function() {
+      const tabContainers = document.querySelectorAll('.vd-tabs, [data-tabs]');
+
+      tabContainers.forEach(container => {
+        if (this.instances.has(container)) {
+          return;
+        }
+        this.initTabs(container);
+      });
+    },
+
+    /**
+     * Initialize a single tab container
+     * @param {HTMLElement} container - Tabs container element
+     */
+    initTabs: function(container) {
+      const tabList = container.querySelector('.vd-tab-list, [role="tablist"]');
+      const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');
+      const tabPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');
+
+      if (!tabList || tabLinks.length === 0) return;
+
+      const cleanupFunctions = [];
+
+      // Set up ARIA attributes
+      tabList.setAttribute('role', 'tablist');
+
+      tabLinks.forEach((link, index) => {
+        const tabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '') || `tab-${index}`;
+        const pane = this.findPane(container, tabId, tabPanes);
+
+        // Set up tab attributes
+        link.setAttribute('role', 'tab');
+        link.setAttribute('aria-selected', link.classList.contains('is-active') ? 'true' : 'false');
+        link.setAttribute('tabindex', link.classList.contains('is-active') ? '0' : '-1');
+
+        if (!link.id) {
+          link.id = `tab-btn-${tabId}`;
+        }
+
+        // Set up pane attributes
+        if (pane) {
+          pane.setAttribute('role', 'tabpanel');
+          pane.setAttribute('aria-labelledby', link.id);
+          if (!pane.id) {
+            pane.id = `tab-pane-${tabId}`;
+          }
+          link.setAttribute('aria-controls', pane.id);
+        }
+
+        // Click handler
+        const clickHandler = (e) => {
+          e.preventDefault();
+          if (!link.classList.contains('disabled') && !link.disabled) {
+            this.activateTab(container, link, tabLinks, tabPanes);
+          }
+        };
+        link.addEventListener('click', clickHandler);
+        cleanupFunctions.push(() => link.removeEventListener('click', clickHandler));
+
+        // Keyboard navigation
+        const keydownHandler = (e) => {
+          this.handleKeydown(e, container, link, tabLinks, tabPanes);
+        };
+        link.addEventListener('keydown', keydownHandler);
+        cleanupFunctions.push(() => link.removeEventListener('keydown', keydownHandler));
+      });
+
+      // Ensure one tab is active
+      const activeTab = container.querySelector('.vd-tab-link.is-active, [data-tab].is-active');
+      if (!activeTab && tabLinks.length > 0) {
+        this.activateTab(container, tabLinks[0], tabLinks, tabPanes);
+      }
+
+      this.instances.set(container, { cleanup: cleanupFunctions });
+    },
+
+    /**
+     * Find the pane associated with a tab
+     * @param {HTMLElement} container - Tabs container
+     * @param {string} tabId - Tab identifier
+     * @param {NodeList} tabPanes - All tab panes
+     * @returns {HTMLElement|null} The matching pane
+     */
+    findPane: function(container, tabId, tabPanes) {
+      // Try data attribute first
+      let pane = container.querySelector(`[data-tab-pane="${tabId}"]`);
+
+      // Try ID
+      if (!pane) {
+        pane = container.querySelector(`#${tabId}`);
+      }
+
+      // Try matching by index
+      if (!pane) {
+        const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');
+        tabLinks.forEach((link, index) => {
+          const linkTabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '');
+          if (linkTabId === tabId && tabPanes[index]) {
+            pane = tabPanes[index];
+          }
+        });
+      }
+
+      return pane;
+    },
+
+    /**
+     * Activate a tab
+     * @param {HTMLElement} container - Tabs container
+     * @param {HTMLElement} tab - Tab to activate
+     * @param {NodeList} allTabs - All tab links
+     * @param {NodeList} allPanes - All tab panes
+     */
+    activateTab: function(container, tab, allTabs, allPanes) {
+      const tabId = tab.dataset.tab || tab.getAttribute('href')?.replace('#', '') || tab.id;
+
+      // Deactivate all tabs
+      allTabs.forEach(t => {
+        t.classList.remove('is-active');
+        t.setAttribute('aria-selected', 'false');
+        t.setAttribute('tabindex', '-1');
+
+        // Also handle parent li if exists
+        if (t.parentElement && t.parentElement.classList.contains('tab-item')) {
+          t.parentElement.classList.remove('is-active');
+        }
+      });
+
+      // Hide all panes
+      allPanes.forEach(p => {
+        p.classList.remove('is-active');
+      });
+
+      // Activate selected tab
+      tab.classList.add('is-active');
+      tab.setAttribute('aria-selected', 'true');
+      tab.setAttribute('tabindex', '0');
+
+      // Also handle parent li if exists
+      if (tab.parentElement && tab.parentElement.classList.contains('tab-item')) {
+        tab.parentElement.classList.add('is-active');
+      }
+
+      // Show corresponding pane
+      const pane = this.findPane(container, tabId, allPanes);
+      if (pane) {
+        pane.classList.add('is-active');
+      }
+
+      // Dispatch custom event
+      const event = new CustomEvent('tab:change', {
+        bubbles: true,
+        detail: {
+          tab: tab,
+          pane: pane,
+          tabId: tabId
+        }
+      });
+      container.dispatchEvent(event);
+    },
+
+    /**
+     * Handle keyboard navigation
+     * @param {KeyboardEvent} e - Keyboard event
+     * @param {HTMLElement} container - Tabs container
+     * @param {HTMLElement} currentTab - Currently focused tab
+     * @param {NodeList} allTabs - All tab links
+     * @param {NodeList} allPanes - All tab panes
+     */
+    handleKeydown: function(e, container, currentTab, allTabs, allPanes) {
+      const isVertical = container.classList.contains('tabs-vertical');
+      const tabs = Array.from(allTabs).filter(t => !t.classList.contains('disabled') && !t.disabled);
+      const currentIndex = tabs.indexOf(currentTab);
+
+      let newIndex = currentIndex;
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          if (!isVertical) {
+            e.preventDefault();
+            newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+          }
+          break;
+
+        case 'ArrowRight':
+          if (!isVertical) {
+            e.preventDefault();
+            newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+          }
+          break;
+
+        case 'ArrowUp':
+          if (isVertical) {
+            e.preventDefault();
+            newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+          }
+          break;
+
+        case 'ArrowDown':
+          if (isVertical) {
+            e.preventDefault();
+            newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+          }
+          break;
+
+        case 'Home':
+          e.preventDefault();
+          newIndex = 0;
+          break;
+
+        case 'End':
+          e.preventDefault();
+          newIndex = tabs.length - 1;
+          break;
+
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          this.activateTab(container, currentTab, allTabs, allPanes);
+          return;
+
+        default:
+          return;
+      }
+
+      // Focus and activate new tab
+      if (newIndex !== currentIndex) {
+        tabs[newIndex].focus();
+        this.activateTab(container, tabs[newIndex], allTabs, allPanes);
+      }
+    },
+
+    /**
+     * Programmatically show a tab
+     * @param {string|HTMLElement} tab - Tab identifier or element
+     */
+    show: function(tab) {
+      let tabElement;
+
+      if (typeof tab === 'string') {
+        tabElement = document.querySelector(`[data-tab="${tab}"], [href="#${tab}"]`);
+      } else {
+        tabElement = tab;
+      }
+
+      if (!tabElement) return;
+
+      const container = tabElement.closest('.vd-tabs, [data-tabs]');
+      if (!container) return;
+
+      const allTabs = container.querySelectorAll('.vd-tab-link, [data-tab]');
+      const allPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');
+
+      this.activateTab(container, tabElement, allTabs, allPanes);
+    },
+
+    /**
+     * Destroy a tabs instance and clean up event listeners
+     * @param {HTMLElement} container - Tabs container
+     */
+    destroy: function(container) {
+      const instance = this.instances.get(container);
+      if (!instance) return;
+
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(container);
+    },
+
+    /**
+     * Destroy all tabs instances
+     */
+    destroyAll: function() {
+      this.instances.forEach((instance, container) => {
+        this.destroy(container);
+      });
+    }
+  };
+
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('tabs', Tabs);
+  }
+
+})();