@rhavenside/baseline 2.0.1 → 2.0.3

package/README.md

@@ -1,6 +1,6 @@
 # Base-Line Design System
 
-A strict, layer-based design system with semantic tokens. Built on Bootstrap 5.3 architecture with a custom naming convention and token-based theming system.
+A strict, layer-based design system with semantic tokens. Features a custom naming convention and token-based theming system.
 
 [![npm version](https://img.shields.io/npm/v/@rhavenside/baseline.svg)](https://www.npmjs.com/package/@rhavenside/baseline)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -469,4 +469,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for the strict contribution rules.
 
 ---
 
-Built with ❤️ using Bootstrap 5.3 architecture and RFS for responsive typography.
+Built with ❤️ using RFS for responsive typography.

package/dist/js/base.js

@@ -11,6 +11,8 @@ import { onDOMContentLoaded, getjQuery, executeAfterTransition, getDataAttribute
 class DataAPI {
   constructor() {
     this.components = new Map()
+    this.observer = null
+    this.autoObserve = true
   }
 
   /**
@@ -23,10 +25,10 @@ class DataAPI {
   /**
    * Initialize components from data attributes
    */
-  init() {
+  init(rootElement = document) {
     this.components.forEach((ComponentClass, name) => {
       const selector = `[data-c-${name}]`
-      const elements = document.querySelectorAll(selector)
+      const elements = rootElement.querySelectorAll(selector)
       
       elements.forEach(element => {
         if (!element._baseLineComponent) {
@@ -34,7 +36,158 @@ class DataAPI {
           element._baseLineComponent = instance
         }
       })
+      
+      // Special handling for collapse - also check data-c-toggle="collapse"
+      if (name === 'collapse') {
+        const toggleElements = rootElement.querySelectorAll('[data-c-toggle="collapse"]')
+        toggleElements.forEach(toggleElement => {
+          const target = toggleElement.getAttribute('data-c-target') || toggleElement.getAttribute('href')
+          if (target) {
+            const targetElement = rootElement.querySelector(target)
+            if (targetElement && !targetElement._baseLineComponent) {
+              const parentSelector = toggleElement.getAttribute('data-c-parent')
+              const config = parentSelector ? { parent: parentSelector } : {}
+              const instance = new ComponentClass(targetElement, config)
+              targetElement._baseLineComponent = instance
+            }
+          }
+        })
+      }
+      
+      // Special handling for tooltip - also check data-c-toggle="tooltip"
+      if (name === 'tooltip') {
+        const tooltipElements = rootElement.querySelectorAll('[data-c-toggle="tooltip"], [data-bl-toggle="tooltip"]')
+        tooltipElements.forEach(element => {
+          if (!element._baseLineComponent) {
+            const title = element.getAttribute('title') || 
+                         element.getAttribute('data-c-title') || 
+                         element.getAttribute('data-bl-title')
+            const placement = element.getAttribute('data-c-placement') || 
+                             element.getAttribute('data-bl-placement') || 
+                             'top'
+            const html = element.getAttribute('data-c-html') === 'true' || 
+                        element.getAttribute('data-bl-html') === 'true'
+            
+            if (title) {
+              const instance = new ComponentClass(element, {
+                title: title,
+                placement: placement,
+                html: html
+              })
+              element._baseLineComponent = instance
+            }
+          }
+        })
+      }
+      
+      // Special handling for tab - also check data-c-toggle="tab"
+      if (name === 'tab') {
+        const tabElements = rootElement.querySelectorAll('[data-c-toggle="tab"], [data-c-toggle="pill"], [data-bl-toggle="tab"], [data-bl-toggle="pill"]')
+        tabElements.forEach(element => {
+          if (!element._baseLineComponent) {
+            const instance = new ComponentClass(element)
+            element._baseLineComponent = instance
+          }
+        })
+      }
+      
+      // Special handling for toast - check for .c-toast elements
+      if (name === 'toast') {
+        const toastElements = rootElement.querySelectorAll('.c-toast')
+        toastElements.forEach(element => {
+          if (!element._baseLineComponent) {
+            const instance = new ComponentClass(element)
+            element._baseLineComponent = instance
+          }
+        })
+      }
+      
+      // Special handling for popover - also check data-c-toggle="popover"
+      if (name === 'popover') {
+        const popoverElements = rootElement.querySelectorAll('[data-c-toggle="popover"], [data-bl-toggle="popover"]')
+        popoverElements.forEach(element => {
+          if (!element._baseLineComponent) {
+            const title = element.getAttribute('data-c-title') || element.getAttribute('data-bl-title')
+            const content = element.getAttribute('data-c-content') || element.getAttribute('data-bl-content')
+            const placement = element.getAttribute('data-c-placement') || 
+                             element.getAttribute('data-bl-placement') || 
+                             'right'
+            
+            if (title || content) {
+              const instance = new ComponentClass(element, {
+                title: title,
+                content: content,
+                placement: placement
+              })
+              element._baseLineComponent = instance
+            }
+          }
+        })
+      }
+    })
+  }
+
+  /**
+   * Start observing DOM changes for automatic initialization
+   */
+  startObserving() {
+    if (!this.autoObserve || this.observer) {
+      return
+    }
+
+    // Debounce function to avoid too many init calls
+    let initTimeout
+    const debouncedInit = () => {
+      clearTimeout(initTimeout)
+      initTimeout = setTimeout(() => {
+        this.init()
+      }, 100)
+    }
+
+    this.observer = new MutationObserver((mutations) => {
+      let hasNewElements = false
+      
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            // Check if this node or its children have data-c-* attributes
+            if (node.hasAttribute && Array.from(node.attributes).some(attr => 
+              attr.name.startsWith('data-c-')
+            )) {
+              hasNewElements = true
+            } else if (node.querySelectorAll) {
+              // Check children for data-c-* attributes or data-c-toggle
+              const hasDataAttributes = node.querySelectorAll('[data-c-toggle], [data-c-target], [data-c-parent]').length > 0
+              if (hasDataAttributes) {
+                hasNewElements = true
+              }
+            }
+          }
+        })
+      })
+      
+      if (hasNewElements) {
+        debouncedInit()
+      }
     })
+
+    // Only observe if document.body exists
+    if (document.body) {
+      this.observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      })
+    }
+  }
+
+  /**
+   * Stop observing DOM changes
+   */
+  stopObserving() {
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
   }
 
   /**
@@ -133,6 +286,8 @@ export class BaseComponent {
  */
 onDOMContentLoaded(() => {
   dataAPI.init()
+  // Start observing for dynamically added elements
+  dataAPI.startObserving()
 })
 
 // Export for global access

package/dist/js/index.js

@@ -47,6 +47,10 @@ Object.keys(components).forEach(name => {
 // Initialize on DOM ready
 onDOMContentLoaded(() => {
   dataAPI.init()
+  // Start observing for dynamically added elements (already called in base.js, but ensure it's called here too)
+  if (document.body) {
+    dataAPI.startObserving()
+  }
   
   // Trigger load event for components that need it (e.g., Tab)
   const loadEvent = new Event('load.c.tab')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhavenside/baseline",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "A strict, layer-based design system with semantic tokens",
   "main": "dist/base-line.css",
   "module": "dist/js/index.js",