mtrl 0.1.2 → 0.2.0

package/src/components/menu/menu.js

@@ -1,54 +0,0 @@
-// src/components/menu/menu.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withLifecycle } from '../../core/compose/features'
-import { withAPI } from './api'
-import { withVisibility } from './features/visibility'
-import { withItemsManager } from './features/items-manager'
-import { withPositioning } from './features/positioning'
-import { withKeyboardNavigation } from './features/keyboard-navigation'
-
-/**
- * Creates a new Menu component
- * @param {Object} config - Menu configuration
- * @param {Array} [config.items] - Menu items
- * @param {string} [config.class] - Additional CSS classes
- * @param {HTMLElement} [config.target] - Target element for positioning
- * @param {boolean} [config.stayOpenOnSelect] - Whether to keep the menu open after an item is selected
- * @param {HTMLElement} [config.openingButton] - Button that opens the menu
- * @returns {Object} Menu component instance
- */
-const createMenu = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'menu',
-    prefix: PREFIX
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      componentName: 'menu',
-      className: config.class,
-      attrs: {
-        role: 'menu',
-        tabindex: '-1',
-        'aria-hidden': 'true'
-      }
-    }),
-    withLifecycle(),
-    withItemsManager(baseConfig),
-    withVisibility(baseConfig),
-    withPositioning,
-    withKeyboardNavigation(baseConfig),
-    comp => withAPI({
-      lifecycle: comp.lifecycle
-    })(comp)
-  )(baseConfig)
-}
-
-export default createMenu

package/src/components/navigation/api.js

@@ -1,43 +0,0 @@
-// src/components/navigation/api.js
-
-/**
- * Enhances navigation component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.disabled - Disabled state handlers
- * @param {Object} options.lifecycle - Lifecycle handlers
- */
-export const withAPI = ({ disabled, lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Item management
-  addItem (config) {
-    component.addItem?.(config)
-    return this
-  },
-  removeItem (id) {
-    component.removeItem?.(id)
-    return this
-  },
-  getItem (id) {
-    return component.getItem?.(id)
-  },
-
-  // Active state management
-  setActive (id) {
-    component.setActive?.(id)
-    return this
-  },
-  getActive () {
-    return component.getActive?.()
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // State management
-  enable: disabled.enable,
-  disable: disabled.disable,
-  destroy: lifecycle.destroy
-})

package/src/components/navigation/index.js

@@ -1,2 +0,0 @@
-// src/components/navigation/index.js
-export { default } from './navigation.js'

package/src/components/navigation/nav-item.js

@@ -1,137 +0,0 @@
-// src/components/navigation/nav-item.js
-
-/**
- * Creates an expand/collapse icon element
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Expand icon element
- */
-const createExpandIcon = (prefix) => {
-  const icon = document.createElement('span')
-  icon.className = `${prefix}-nav-expand-icon`
-  icon.innerHTML = `
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-      <polyline points="9 18 15 12 9 6"></polyline>
-    </svg>
-  `
-  return icon
-}
-
-/**
- * Creates a nested items container
- * @param {Array} items - Nested items configuration
- * @param {string} prefix - CSS class prefix
- * @param {Function} createItem - Item creation function
- * @returns {HTMLElement} Nested items container
- */
-const createNestedContainer = (items, prefix, createItem) => {
-  const container = document.createElement('div')
-  container.className = `${prefix}-nav-nested-container`
-  container.setAttribute('role', 'group')
-  container.hidden = true
-
-  items.forEach(itemConfig => {
-    createItem(itemConfig, container, prefix)
-  })
-
-  return container
-}
-
-/**
- * Creates a navigation item element
- * @param {Object} config - Item configuration
- * @param {HTMLElement} container - Container element
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Created navigation item
- */
-export const createNavItem = (config, container, prefix) => {
-  const itemContainer = document.createElement('div')
-  itemContainer.className = `${prefix}-nav-item-container`
-
-  const item = document.createElement('button')
-  item.className = `${prefix}-nav-item`
-  item.setAttribute('role', config.items?.length ? 'button' : 'menuitem')
-  item.setAttribute('aria-selected', 'false')
-
-  if (config.id) {
-    item.dataset.id = config.id
-  }
-
-  if (config.disabled) {
-    item.disabled = true
-    item.setAttribute('aria-disabled', 'true')
-  }
-
-  // Add icon if provided
-  if (config.icon) {
-    const icon = document.createElement('span')
-    icon.className = `${prefix}-nav-item-icon`
-    icon.innerHTML = config.icon
-    item.appendChild(icon)
-  }
-
-  // Add label if provided
-  if (config.label) {
-    const label = document.createElement('span')
-    label.className = `${prefix}-nav-item-label`
-    label.textContent = config.label
-    item.appendChild(label)
-    item.setAttribute('aria-label', config.label)
-  }
-
-  // Add badge if provided
-  if (config.badge) {
-    const badge = document.createElement('span')
-    badge.className = `${prefix}-nav-item-badge`
-    badge.textContent = config.badge
-    badge.setAttribute('aria-label', `${config.badge} notifications`)
-    item.appendChild(badge)
-  }
-
-  itemContainer.appendChild(item)
-
-  // Handle nested items - only for drawer variant
-  if (config.items?.length && container.closest('.mtrl-nav--drawer, .mtrl-nav--drawer-modal, .mtrl-nav--drawer-standard')) {
-    const expandIcon = createExpandIcon(prefix)
-    item.appendChild(expandIcon)
-
-    item.setAttribute('aria-expanded', config.expanded ? 'true' : 'false')
-    item.setAttribute('aria-haspopup', 'true')
-
-    const nestedContainer = createNestedContainer(config.items, prefix, createNavItem)
-    nestedContainer.hidden = !config.expanded
-    itemContainer.appendChild(nestedContainer)
-
-    // Handle expand/collapse
-    item.addEventListener('click', (event) => {
-      event.stopPropagation()
-      const isExpanded = item.getAttribute('aria-expanded') === 'true'
-      item.setAttribute('aria-expanded', (!isExpanded).toString())
-      nestedContainer.hidden = isExpanded
-
-      // Toggle expand icon rotation
-      expandIcon.style.transform = isExpanded ? '' : 'rotate(90deg)'
-    })
-  }
-
-  container.appendChild(itemContainer)
-  return item
-}
-
-/**
- * Recursively gets all nested items from a navigation item
- * @param {HTMLElement} item - Navigation item element
- * @param {string} prefix - CSS class prefix
- * @returns {Array<HTMLElement>} Array of all nested items
- */
-export const getAllNestedItems = (item, prefix) => {
-  const container = item.closest(`.${prefix}-nav-item-container`)
-  if (!container) return []
-
-  const nestedContainer = container.querySelector(`.${prefix}-nav-nested-container`)
-  if (!nestedContainer) return []
-
-  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-nav-item`))
-  return items.reduce((acc, nestedItem) => {
-    return [...acc, nestedItem, ...getAllNestedItems(nestedItem, prefix)]
-  }, [])
-}

package/src/components/navigation/navigation.js

@@ -1,55 +0,0 @@
-// src/components/navigation/index.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withDisabled,
-  withLifecycle,
-  withVariant,
-  withPosition // Import core position feature
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { withNavItems } from './features/items'
-
-/**
- * Creates a new Navigation component
- * @param {Object} config - Navigation configuration
- * @param {string} [config.variant='rail'] - Navigation type (rail/drawer/bar)
- * @param {string} [config.position='left'] - Navigation position
- * @param {Array} [config.items=[]] - Navigation items
- * @param {boolean} [config.disabled=false] - Is navigation disabled
- * @param {string} [config.class] - Additional CSS classes
- */
-const createNavigation = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'nav',
-    prefix: PREFIX
-  }
-
-  return pipe(
-    createBase,
-    // First add events system
-    withEvents(),
-    // Then add the element and other features
-    withElement({
-      tag: 'nav',
-      role: 'navigation',
-      'aria-label': config.ariaLabel || 'Main Navigation',
-      componentName: 'nav',
-      className: config.class
-    }),
-    withVariant(baseConfig),
-    withPosition(baseConfig),
-    withNavItems(baseConfig),
-    withDisabled(),
-    withLifecycle(),
-    comp => withAPI({
-      disabled: comp.disabled,
-      lifecycle: comp.lifecycle
-    })(comp)
-  )(baseConfig)
-}
-
-export default createNavigation

package/src/components/snackbar/api.js

@@ -1,125 +0,0 @@
-// src/components/snackbar/api.js
-
-/**
- * Enhances snackbar component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.lifecycle - Lifecycle handlers
- * @param {Object} options.queue - Snackbar queue manager
- */
-export const withAPI = ({ lifecycle, queue }) => (component) => {
-  if (!queue) {
-    throw new Error('Snackbar queue is required')
-  }
-
-  let isVisible = false
-
-  const enhancedComponent = {
-    ...component,
-    element: component.element,
-
-    /**
-     * Shows the snackbar with animation
-     */
-    show () {
-      if (isVisible) return this
-      isVisible = true
-
-      queue.add({
-        ...this,
-        _show: () => {
-          document.body.appendChild(component.element)
-
-          // Force reflow for animation
-          const _ = component.element.offsetHeight
-
-          component.element.classList.add(`${component.getClass('snackbar')}--visible`)
-
-          if (component.timer) {
-            component.timer.start()
-          }
-
-          return this
-        }
-      })
-
-      return this
-    },
-
-    /**
-     * Hides the snackbar with animation and cleanup
-     */
-    hide () {
-      if (!isVisible) return this
-      isVisible = false
-
-      if (component.timer) {
-        component.timer.stop()
-      }
-
-      const handleTransitionEnd = (event) => {
-        if (event.propertyName !== 'opacity') return
-
-        component.element.removeEventListener('transitionend', handleTransitionEnd)
-        if (component.element.parentNode) {
-          component.element.remove()
-        }
-      }
-
-      component.element.addEventListener('transitionend', handleTransitionEnd)
-      component.element.classList.remove(`${component.getClass('snackbar')}--visible`)
-
-      return this
-    },
-
-    setMessage (text) {
-      component.text.setText(text)
-      return this
-    },
-
-    getMessage () {
-      return component.text.getText()
-    },
-
-    on: component.on,
-    off: component.off,
-
-    destroy () {
-      if (isVisible) {
-        component.element.remove()
-      }
-      if (component.timer) {
-        component.timer.stop()
-      }
-      lifecycle.destroy()
-    }
-  }
-
-  // Set up action button handler
-  if (component.actionButton) {
-    component.actionButton.addEventListener('click', () => {
-      component.emit('action')
-      component.emit('dismiss') // Emit dismiss to handle queue cleanup
-    })
-  }
-
-  // Set up dismiss handler
-  if (component.on) {
-    // Store the handler reference so it can be properly removed
-    const dismissHandler = () => {
-      if (isVisible) {
-        enhancedComponent.hide()
-      }
-    }
-
-    component.on('dismiss', dismissHandler)
-
-    // Add cleanup to lifecycle
-    const originalDestroy = lifecycle.destroy
-    lifecycle.destroy = () => {
-      component.off('dismiss', dismissHandler)
-      originalDestroy?.call(lifecycle)
-    }
-  }
-
-  return enhancedComponent
-}

package/src/components/snackbar/features.js

@@ -1,69 +0,0 @@
-// src/components/snackbar/features.js
-
-/**
- * Adds action button to snackbar
- */
-export const withActionButton = (config) => (component) => {
-  if (!config.action) return component
-
-  const button = document.createElement('button')
-  button.className = `${config.prefix}-snackbar-action`
-  button.textContent = config.action
-
-  component.element.appendChild(button)
-
-  return {
-    ...component,
-    actionButton: button
-  }
-}
-
-/**
- * Adds auto-dismiss timer functionality
- */
-export const withDismissTimer = (config) => (component) => {
-  let timeoutId = null
-
-  const startTimer = () => {
-    // Clear any existing timer
-    if (timeoutId) {
-      clearTimeout(timeoutId)
-      timeoutId = null
-    }
-
-    // Only start timer if duration is positive and numeric
-    if (typeof config.duration === 'number' && config.duration > 0) {
-      timeoutId = setTimeout(() => {
-        if (component.element && component.emit) {
-          component.emit('dismiss')
-        }
-      }, config.duration)
-    }
-  }
-
-  const stopTimer = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId)
-      timeoutId = null
-    }
-  }
-
-  // Clean up on destroy
-  const originalDestroy = component.lifecycle?.destroy
-  if (component.lifecycle) {
-    component.lifecycle.destroy = () => {
-      stopTimer()
-      if (originalDestroy) {
-        originalDestroy.call(component.lifecycle)
-      }
-    }
-  }
-
-  return {
-    ...component,
-    timer: {
-      start: startTimer,
-      stop: stopTimer
-    }
-  }
-}

package/src/components/snackbar/index.js

@@ -1,2 +0,0 @@
-// src/components/snackbar/index.js
-export { default } from './snackbar.js'

package/src/components/snackbar/position.js

@@ -1,63 +0,0 @@
-// src/components/snackbar/position.js
-
-import { SNACKBAR_POSITIONS } from './constants'
-
-/**
- * Adds position handling to snackbar
- * @param {Object} config - Position configuration
- * @param {string} config.prefix - Component prefix
- * @param {string} config.position - Position variant (start, center, end)
- */
-export const withPosition = (config) => (component) => {
-  const position = config.position || SNACKBAR_POSITIONS.CENTER
-  const positionClass = `${config.prefix}-snackbar--${position}`
-
-  // Add position class
-  component.element.classList.add(positionClass)
-
-  // Method to update position
-  const setPosition = (newPosition) => {
-    // Remove current position class
-    component.element.classList.remove(positionClass)
-
-    // Add new position class
-    const newPositionClass = `${config.prefix}-snackbar--${newPosition}`
-    component.element.classList.add(newPositionClass)
-
-    // Update visible state transform for center position
-    if (component.element.classList.contains(`${config.prefix}-snackbar--visible`)) {
-      if (newPosition === SNACKBAR_POSITIONS.CENTER) {
-        component.element.style.transform = 'translateX(-50%) scale(1)'
-      } else {
-        component.element.style.transform = 'scale(1)'
-      }
-    }
-  }
-
-  return {
-    ...component,
-    position: {
-      /**
-       * Get current position
-       * @returns {string} Current position
-       */
-      getPosition: () => position,
-
-      /**
-       * Set new position
-       * @param {string} newPosition - New position to set
-       * @returns {Object} Component instance
-       */
-      setPosition: (newPosition) => {
-        if (Object.values(SNACKBAR_POSITIONS).includes(newPosition)) {
-          setPosition(newPosition)
-          return component
-        } else {
-          console.warn(`Invalid position: ${newPosition}. Using default: ${SNACKBAR_POSITIONS.CENTER}`)
-          setPosition(SNACKBAR_POSITIONS.CENTER)
-          return component
-        }
-      }
-    }
-  }
-}

package/src/components/snackbar/queue.js

@@ -1,74 +0,0 @@
-// src/components/snackbar/queue.js
-
-/**
- * Creates a queue manager for snackbars
- * Ensures only one snackbar is visible at a time
- */
-export const createSnackbarQueue = () => {
-  const queue = []
-  let isProcessing = false
-
-  const processQueue = () => {
-    if (queue.length === 0) {
-      isProcessing = false
-      return
-    }
-
-    isProcessing = true
-    const snackbar = queue[0]
-
-    const handleDismiss = () => {
-      // Remove from queue
-      queue.shift()
-      // Remove listener and cleanup
-      snackbar.off?.('dismiss', handleDismiss)
-      // Reset processing state if queue is empty
-      if (queue.length === 0) {
-        isProcessing = false
-      } else {
-        // Process next after a small delay
-        setTimeout(processQueue, 200)
-      }
-    }
-
-    // Handle both normal dismiss and action button dismissal
-    snackbar.on?.('dismiss', handleDismiss)
-    snackbar._show()
-  }
-
-  return {
-    /**
-     * Adds a snackbar to the queue
-     * @param {Object} snackbar - Snackbar instance
-     */
-    add (snackbar) {
-      if (!snackbar._show) {
-        throw new Error('Snackbar must implement _show method')
-      }
-
-      queue.push(snackbar)
-
-      // Only start processing if not already processing
-      if (!isProcessing) {
-        processQueue()
-      }
-    },
-
-    /**
-     * Clears all pending snackbars
-     */
-    clear () {
-      // Remove all queued items
-      queue.length = 0
-      isProcessing = false
-    },
-
-    /**
-     * Gets current queue length
-     * @returns {number} Number of snackbars in queue
-     */
-    getLength () {
-      return queue.length
-    }
-  }
-}

package/src/components/snackbar/snackbar.js

@@ -1,70 +0,0 @@
-// src/components/snackbar/snackbar.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withActionButton, withDismissTimer } from './features'
-import { withPosition } from './position'
-import {
-  withEvents,
-  withText,
-  withVariant,
-  withLifecycle
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { createSnackbarQueue } from './queue'
-import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants'
-
-// Create a single queue instance to be shared across all snackbars
-const queue = createSnackbarQueue()
-
-/**
- * Creates a new Snackbar component
- * @param {Object} config - Snackbar configuration
- * @param {string} config.message - Message to display
- * @param {string} [config.action] - Action button text
- * @param {string} [config.variant='basic'] - Snackbar variant
- * @param {string} [config.position='center'] - Display position
- * @param {number} [config.duration=4000] - Display duration in ms
- * @param {string} [config.class] - Additional CSS classes
- */
-const createSnackbar = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'snackbar',
-    prefix: PREFIX,
-    variant: config.variant || SNACKBAR_VARIANTS.BASIC,
-    position: config.position || SNACKBAR_POSITIONS.CENTER,
-    duration: config.duration ?? 4000 // Use nullish coalescing to allow 0
-  }
-
-  try {
-    return pipe(
-      createBase,
-      withEvents(),
-      withElement({
-        tag: 'div',
-        componentName: 'snackbar',
-        className: config.class
-      }),
-      withVariant(baseConfig),
-      withPosition(baseConfig),
-      withText({
-        ...baseConfig,
-        text: config.message
-      }),
-      withActionButton(baseConfig),
-      withLifecycle(),
-      // First apply timer
-      withDismissTimer(baseConfig),
-      // Then apply API which needs timer
-      comp => withAPI({
-        lifecycle: comp.lifecycle,
-        queue
-      })(comp)
-    )(baseConfig)
-  } catch (error) {
-    throw new Error(`Failed to create snackbar: ${error.message}`)
-  }
-}
-
-export default createSnackbar