@rhavenside/baseline 2.0.0

package/dist/js/accordion.js

@@ -0,0 +1,103 @@
+/**
+ * Base-Line Accordion Component
+ * Baseline 2.0 compatible accordion with Base-Line naming
+ */
+
+import Collapse from './collapse.js'
+import { getElement, getElements, on } from './util.js'
+import { addClass, removeClass, hasClass } from './component.js'
+
+const NAME = 'accordion'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = `[data-c-${NAME}]`
+
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_COLLAPSED = 'c-collapsed'
+const SELECTOR_ACCORDION = '.c-accordion'
+const SELECTOR_ACCORDION_ITEM = '.c-accordion-item'
+const SELECTOR_ACCORDION_BUTTON = '.c-accordion-button'
+
+class Accordion {
+  constructor(element) {
+    this._element = element
+    this._items = getElements(SELECTOR_ACCORDION_ITEM, this._element)
+    this._init()
+  }
+
+  _init() {
+    this._items.forEach((item, index) => {
+      const button = getElement(SELECTOR_ACCORDION_BUTTON, item)
+      const collapse = getElement('.c-collapse', item)
+      
+      if (button && collapse) {
+        on(button, 'click', (e) => {
+          e.preventDefault()
+          this._toggleItem(item, index)
+        })
+      }
+    })
+  }
+
+  _toggleItem(item, index) {
+    const button = getElement(SELECTOR_ACCORDION_BUTTON, item)
+    const collapse = getElement('.c-collapse', item)
+    
+    if (!button || !collapse) {
+      return
+    }
+
+    const isExpanded = hasClass(button, CLASS_NAME_COLLAPSED) === false
+
+    // Close all other items
+    this._items.forEach((otherItem, otherIndex) => {
+      if (otherIndex !== index) {
+        const otherButton = getElement(SELECTOR_ACCORDION_BUTTON, otherItem)
+        const otherCollapse = getElement('.c-collapse', otherItem)
+        
+        if (otherButton && otherCollapse && !hasClass(otherButton, CLASS_NAME_COLLAPSED)) {
+          const collapseInstance = Collapse.getOrCreateInstance(otherCollapse)
+          collapseInstance.hide()
+          addClass(otherButton, CLASS_NAME_COLLAPSED)
+        }
+      }
+    })
+
+    // Toggle current item
+    const collapseInstance = Collapse.getOrCreateInstance(collapse)
+    
+    if (isExpanded) {
+      collapseInstance.hide()
+      addClass(button, CLASS_NAME_COLLAPSED)
+    } else {
+      collapseInstance.show()
+      removeClass(button, CLASS_NAME_COLLAPSED)
+    }
+  }
+
+  static getOrCreateInstance(element) {
+    return element._baseLineAccordion || new Accordion(element)
+  }
+}
+
+// Data API - Accordions are auto-initialized, no need for click handler
+
+// Auto-initialize accordions
+if (typeof document !== 'undefined') {
+  const initAccordions = () => {
+    const accordions = document.querySelectorAll(SELECTOR_ACCORDION)
+    accordions.forEach(accordion => {
+      Accordion.getOrCreateInstance(accordion)
+    })
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAccordions)
+  } else {
+    initAccordions()
+  }
+}
+
+export default Accordion
+

package/dist/js/alert.js

@@ -0,0 +1,91 @@
+/**
+ * Base-Line Alert Component
+ * Baseline 2.0 compatible alert with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on, executeAfterTransition } from './util.js'
+import { removeClass } from './component.js'
+
+const NAME = 'alert'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = `[data-c-${NAME}]`
+
+const EVENT_CLOSE = `close${EVENT_KEY}`
+const EVENT_CLOSED = `closed${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_FADE = 'c-fade'
+const CLASS_NAME_SHOW = 'is-show'
+const SELECTOR_DATA_DISMISS = '[data-c-dismiss="alert"]'
+
+class Alert extends BaseComponent {
+  constructor(element) {
+    super(element)
+    this._init()
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  _init() {
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    const dismissButtons = getElements(SELECTOR_DATA_DISMISS, this._element)
+    dismissButtons.forEach(button => {
+      on(button, 'click', () => this.close())
+    })
+  }
+
+  close() {
+    const closeEvent = new CustomEvent(EVENT_CLOSE, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._element.dispatchEvent(closeEvent)
+
+    if (closeEvent.defaultPrevented) {
+      return
+    }
+
+    this._element.classList.remove(CLASS_NAME_SHOW)
+
+    const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+    
+    if (isAnimated) {
+      executeAfterTransition(() => {
+        this._element.remove()
+        const closedEvent = new CustomEvent(EVENT_CLOSED, { bubbles: true })
+        this._element.dispatchEvent(closedEvent)
+      }, this._element)
+    } else {
+      this._element.remove()
+      const closedEvent = new CustomEvent(EVENT_CLOSED, { bubbles: true })
+      this._element.dispatchEvent(closedEvent)
+    }
+  }
+
+  static getOrCreateInstance(element) {
+    return element._baseLineComponent || new Alert(element)
+  }
+}
+
+// Data API
+on(document, 'click', SELECTOR_DATA_DISMISS, function (event) {
+  event.preventDefault()
+  const alert = this.closest('.c-alert')
+  if (alert) {
+    const alertInstance = Alert.getOrCreateInstance(alert)
+    alertInstance.close()
+  }
+})
+
+export default Alert
+
+
+

package/dist/js/base.js

@@ -0,0 +1,146 @@
+/**
+ * Base-Line JavaScript Base
+ * Data API and component initialization
+ */
+
+import { onDOMContentLoaded, getjQuery, executeAfterTransition, getDataAttributes } from './util.js'
+
+/**
+ * Data API - Initialize components via data attributes
+ */
+class DataAPI {
+  constructor() {
+    this.components = new Map()
+  }
+
+  /**
+   * Register a component
+   */
+  register(name, ComponentClass) {
+    this.components.set(name, ComponentClass)
+  }
+
+  /**
+   * Initialize components from data attributes
+   */
+  init() {
+    this.components.forEach((ComponentClass, name) => {
+      const selector = `[data-c-${name}]`
+      const elements = document.querySelectorAll(selector)
+      
+      elements.forEach(element => {
+        if (!element._baseLineComponent) {
+          const instance = new ComponentClass(element)
+          element._baseLineComponent = instance
+        }
+      })
+    })
+  }
+
+  /**
+   * Get component instance from element
+   */
+  getInstance(element, componentName) {
+    if (element._baseLineComponent) {
+      return element._baseLineComponent
+    }
+    
+    const ComponentClass = this.components.get(componentName)
+    if (ComponentClass) {
+      const instance = new ComponentClass(element)
+      element._baseLineComponent = instance
+      return instance
+    }
+    
+    return null
+  }
+}
+
+// Global Data API instance
+export const dataAPI = new DataAPI()
+
+/**
+ * Base Component Class
+ */
+export class BaseComponent {
+  constructor(element, config = {}) {
+    this._element = element
+    
+    // Merge config in order: Defaults → data-Attribute → config → _configAfterMerge
+    // This matches Baseline-main's behavior where data attributes are automatically read
+    const dataAttributes = getDataAttributes(element)
+    const mergedConfig = { 
+      ...this.constructor.Default, 
+      ...dataAttributes,
+      ...config 
+    }
+    this._config = this._configAfterMerge ? this._configAfterMerge(mergedConfig) : mergedConfig
+  }
+
+  static get NAME() {
+    throw new Error('You have to implement the static getter NAME')
+  }
+
+  static get Default() {
+    return {}
+  }
+
+  dispose() {
+    if (this._element) {
+      this._element._baseLineComponent = null
+      this._element = null
+    }
+  }
+
+  /**
+   * Queue callback for after transition
+   */
+  _queueCallback(callback, element, isAnimated = true) {
+    if (!isAnimated) {
+      callback()
+      return
+    }
+
+    executeAfterTransition(callback, element)
+  }
+
+  /**
+   * jQuery interface
+   */
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const $element = getjQuery()(this)
+      let data = $element.data('c-' + this.constructor.NAME.toLowerCase())
+      const _config = typeof config === 'object' && config ? config : {}
+
+      if (!data) {
+        data = new this.constructor(this, _config)
+        $element.data('c-' + this.constructor.NAME.toLowerCase(), data)
+      }
+
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+        data[config](this)
+      }
+    })
+  }
+}
+
+/**
+ * Initialize all components on DOM ready
+ */
+onDOMContentLoaded(() => {
+  dataAPI.init()
+})
+
+// Export for global access
+if (typeof window !== 'undefined') {
+  window.BaseLine = window.BaseLine || {}
+  window.BaseLine.dataAPI = dataAPI
+  window.BaseLine.BaseComponent = BaseComponent
+}
+
+
+

package/dist/js/button.js

@@ -0,0 +1,80 @@
+/**
+ * Base-Line Button Component
+ * Baseline 2.0 compatible button with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on } from './util.js'
+
+const NAME = 'button'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = `[data-c-${NAME}]`
+
+const CLASS_NAME_ACTIVE = 'is-active'
+const CLASS_NAME_BUTTON = 'c-button'
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="button"]'
+const SELECTOR_INPUT = 'input:not([type="hidden"])'
+const SELECTOR_ACTIVE = '.is-active'
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+class Button extends BaseComponent {
+  constructor(element) {
+    super(element)
+    this._init()
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  _init() {
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    on(this._element, 'click', () => this.toggle())
+  }
+
+  toggle() {
+    if (this._element.hasAttribute('disabled') || this._element.classList.contains('is-disabled')) {
+      return
+    }
+
+    const isActive = this._element.classList.contains(CLASS_NAME_ACTIVE)
+
+    if (this._element.tagName === 'INPUT' || this._element.tagName === 'BUTTON') {
+      this._element.classList.toggle(CLASS_NAME_ACTIVE, !isActive)
+    }
+
+    if (this._element.tagName === 'INPUT' && this._element.type === 'checkbox') {
+      this._element.checked = !isActive
+    }
+
+    if (this._element.tagName === 'INPUT' && this._element.type === 'radio') {
+      const group = document.querySelectorAll(`input[name="${this._element.name}"]`)
+      group.forEach(input => {
+        input.classList.remove(CLASS_NAME_ACTIVE)
+        input.checked = false
+      })
+      this._element.classList.add(CLASS_NAME_ACTIVE)
+      this._element.checked = true
+    }
+  }
+
+  static getOrCreateInstance(element) {
+    return element._baseLineComponent || new Button(element)
+  }
+}
+
+// Data API
+on(document, 'click', SELECTOR_DATA_TOGGLE, function (event) {
+  event.preventDefault()
+  const button = Button.getOrCreateInstance(this)
+  button.toggle()
+})
+
+export default Button
+
+
+