mtrl 0.1.2 → 0.2.0

package/src/components/switch/api.js

@@ -1,44 +0,0 @@
-// src/components/switch/api.js
-
-/**
- * Enhances switch component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.disabled - Disabled state handlers
- * @param {Object} options.lifecycle - Lifecycle handlers
- * @param {Object} options.checkable - Checked state handlers
- */
-export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Value management
-  getValue: component.getValue,
-  setValue (value) {
-    component.setValue(value)
-    return this
-  },
-
-  // State management
-  check: checkable.check,
-  uncheck: checkable.uncheck,
-  toggle: checkable.toggle,
-  isChecked: checkable.isChecked,
-
-  // Label management
-  setLabel (text) {
-    component.text?.setText(text)
-    return this
-  },
-  getLabel () {
-    return component.text?.getText() || ''
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // State management
-  enable: disabled.enable,
-  disable: disabled.disable,
-  destroy: lifecycle.destroy
-})

package/src/components/switch/index.js

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

package/src/components/switch/switch.js

@@ -1,71 +0,0 @@
-// src/components/switch/switch.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withTextLabel,
-  withDisabled,
-  withLifecycle,
-  withInput,
-  withTrack,
-  withCheckable
-} from '../../core/compose/features'
-import { withAPI } from './api'
-
-/**
- * Adds label position handling to switch
- */
-const withLabelPosition = (config) => (component) => {
-  if (!config.label) return component
-
-  const position = config.labelPosition || 'end'
-  component.element.classList.add(`${PREFIX}-switch--label-${position}`)
-
-  return component
-}
-
-/**
- * Creates a new Switch component
- * @param {Object} config - Switch configuration
- * @param {string} [config.name] - Input name
- * @param {boolean} [config.checked] - Initial checked state
- * @param {boolean} [config.required] - Is input required
- * @param {boolean} [config.disabled] - Is switch disabled
- * @param {string} [config.value] - Input value
- * @param {string} [config.label] - Label text
- * @param {string} [config.labelPosition='end'] - Label position (start/end)
- * @param {string} [config.class] - Additional CSS classes
- */
-const createSwitch = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'switch',
-    prefix: PREFIX
-  }
-
-  return pipe(
-    createBase,
-    withEvents(), // Move events first to ensure system is available
-    withElement({
-      tag: 'div',
-      componentName: 'switch',
-      className: config.class,
-      interactive: true
-    }),
-    withInput(baseConfig),
-    withTrack(baseConfig),
-    withTextLabel(baseConfig),
-    withLabelPosition(baseConfig),
-    withCheckable(baseConfig),
-    withDisabled(baseConfig), // Pass the config to ensure disabled state is properly initialized
-    withLifecycle(),
-    comp => withAPI({
-      disabled: comp.disabled,
-      lifecycle: comp.lifecycle,
-      checkable: comp.checkable
-    })(comp)
-  )(baseConfig)
-}
-
-export default createSwitch

package/src/components/textfield/api.js

@@ -1,49 +0,0 @@
-// src/components/textfield/api.js
-
-/**
- * Enhances textfield 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,
-  // Core element reference
-  element: component.element,
-
-  // Value management
-  getValue: () => component.getValue(),
-  setValue (value) {
-    component.setValue(value)
-    return this
-  },
-
-  // Attributes API
-  setAttribute (name, value) {
-    component.setAttribute(name, value)
-    return this
-  },
-  getAttribute: component.getAttribute,
-  removeAttribute (name) {
-    component.removeAttribute(name)
-    return this
-  },
-
-  // Label management
-  setLabel (text) {
-    component.label?.setText(text)
-    return this
-  },
-  getLabel () {
-    return component.label?.getText() || ''
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // State management
-  enable: disabled.enable,
-  disable: disabled.disable,
-  destroy: lifecycle.destroy
-})

package/src/components/textfield/index.js

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

package/src/components/textfield/textfield.js

@@ -1,68 +0,0 @@
-// src/components/textfield/textfield.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withDisabled,
-  withLifecycle,
-  withVariant,
-  withSize,
-  withTextInput,
-  withTextLabel
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { TEXTFIELD_VARIANTS } from './constants'
-
-/**
- * Creates a new Textfield component
- * @param {Object} config - Textfield configuration
- * @param {string} [config.type] - Input type (text, password, email, etc.)
- * @param {string} [config.variant] - Visual variant (filled, outlined)
- * @param {string} [config.size] - Size variant (small, medium, large)
- * @param {string} [config.name] - Input name attribute
- * @param {string} [config.label] - Label text
- * @param {string} [config.placeholder] - Placeholder text
- * @param {string} [config.value] - Initial value
- * @param {boolean} [config.required] - Whether the input is required
- * @param {boolean} [config.disabled] - Whether the input is disabled
- * @param {number} [config.maxLength] - Maximum input length
- * @param {string} [config.pattern] - Input pattern for validation
- * @param {string} [config.autocomplete] - Autocomplete attribute
- * @param {string} [config.class] - Additional CSS classes
- * @returns {Object} Textfield component instance
- */
-const createTextfield = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'textfield',
-    prefix: PREFIX,
-    variant: config.variant || TEXTFIELD_VARIANTS.FILLED
-  }
-
-  try {
-    return pipe(
-      createBase,
-      withEvents(),
-      withElement({
-        tag: 'div',
-        componentName: 'textfield',
-        className: config.class
-      }),
-      withVariant(baseConfig),
-      withSize(baseConfig),
-      withTextInput(baseConfig),
-      withTextLabel(baseConfig),
-      withDisabled(baseConfig),
-      withLifecycle(),
-      comp => withAPI({
-        disabled: comp.disabled,
-        lifecycle: comp.lifecycle
-      })(comp)
-    )(baseConfig)
-  } catch (error) {
-    throw new Error(`Failed to create textfield: ${error.message}`)
-  }
-}
-
-export default createTextfield

package/src/core/build/_ripple.scss

@@ -1,79 +0,0 @@
-// src/components/ripple/_ripple.scss
-@use '../../styles/abstract/base' as base;
-@use '../../styles/abstract/variables' as v;
-@use '../../styles/abstract/functions' as f;
-@use '../../styles/abstract/mixins' as m;
-@use '../../styles/abstract/theme' as t;
-
-$component: '#{base.$prefix}-ripple';
-
-.#{$component} {
-  // Ripple container
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  border-radius: inherit;
-  pointer-events: none;
-  z-index: 0;
-  
-  // Ripple element
-  &-wave {
-    position: absolute;
-    border-radius: 50%;
-    background-color: currentColor;
-    transform: scale(0);
-    opacity: 0;
-    pointer-events: none;
-    will-change: transform, opacity;
-    
-    // Animation
-    transition-property: transform, opacity;
-    transition-duration: v.motion('duration-short4');
-    transition-timing-function: v.motion('easing-standard');
-    
-    // Active ripple
-    &.active {
-      transform: scale(1);
-      opacity: v.state('hover-state-layer-opacity');
-    }
-    
-    &.fade-out {
-      opacity: 0;
-    }
-  }
-}
-
-// Standalone utility for adding ripple to any element
-[data-ripple] {
-  position: relative;
-  overflow: hidden;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-    pointer-events: none;
-  }
-  
-  // Handle ripple color based on data attribute
-  &[data-ripple="light"]::after {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  
-  &[data-ripple="dark"]::after {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  
-  // Make content appear above ripple
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-}

package/src/core/build/constants.js

@@ -1,51 +0,0 @@
-// src/core/build/constants.js
-
-/**
- * Animation timing functions for ripple effect
- * @enum {string}
- */
-export const RIPPLE_TIMING = {
-  LINEAR: 'linear',
-  EASE: 'ease',
-  EASE_IN: 'ease-in',
-  EASE_OUT: 'ease-out',
-  EASE_IN_OUT: 'ease-in-out',
-  MATERIAL: 'cubic-bezier(0.4, 0.0, 0.2, 1)'
-}
-
-/**
- * Default configuration for ripple effect
- * @type {Object}
- */
-export const RIPPLE_CONFIG = {
-  duration: 375,
-  timing: RIPPLE_TIMING.LINEAR,
-  opacity: ['1', '0.3']
-}
-
-/**
- * Validation schema for ripple configuration
- * @type {Object}
- */
-export const RIPPLE_SCHEMA = {
-  duration: {
-    type: 'number',
-    minimum: 0,
-    default: RIPPLE_CONFIG.duration
-  },
-  timing: {
-    type: 'string',
-    enum: Object.values(RIPPLE_TIMING),
-    default: RIPPLE_CONFIG.timing
-  },
-  opacity: {
-    type: 'array',
-    items: {
-      type: 'string',
-      pattern: '^[0-1](\\.\\d+)?$'
-    },
-    minItems: 2,
-    maxItems: 2,
-    default: RIPPLE_CONFIG.opacity
-  }
-}

package/src/core/build/icon.js

@@ -1,78 +0,0 @@
-// src/core/build/icon.js
-/**
- * @module core/build
- */
-
-/**
- * Creates an icon DOM element
- * @memberof module:core/build
- * @private
- * @param {string} html - Icon HTML content
- * @param {Object} [options] - Icon options
- * @param {string} [options.prefix='mtrl'] - Class prefix
- * @param {string} [options.class] - Additional CSS class
- * @param {string} [options.size] - Icon size variant
- * @returns {HTMLElement} Icon element
- */
-const createIconElement = (html, options = {}) => {
-  const PREFIX = options.prefix || 'mtrl'
-  const element = document.createElement('span')
-  element.className = `${PREFIX}-icon`
-
-  if (options.class) {
-    element.classList.add(options.class)
-  }
-  if (options.size) {
-    element.classList.add(`${PREFIX}-icon--${options.size}`)
-  }
-
-  element.innerHTML = html
-  return element
-}
-
-/**
- * Creates an icon manager for a component
- * @memberof module:core/build
- * @function createIcon
- * @param {HTMLElement} element - Parent element
- * @param {Object} [config] - Icon configuration
- * @param {string} [config.prefix='mtrl'] - Class prefix
- * @param {string} [config.type='component'] - Component type
- * @param {string} [config.position] - Icon position ('start' or 'end')
- * @returns {Object} Icon manager interface
- * @property {Function} setIcon - Sets icon content
- * @property {Function} getIcon - Gets current icon content
- * @property {Function} getElement - Gets icon element
- */
-export const createIcon = (element, config = {}) => {
-  let iconElement = null
-  const PREFIX = config.prefix || 'mtrl'
-
-  return {
-    setIcon (html) {
-      if (!iconElement && html) {
-        iconElement = createIconElement(html, {
-          prefix: PREFIX,
-          class: `${PREFIX}-${config.type || 'component'}-icon`,
-          size: config.iconSize
-        })
-        if (config.position === 'end') {
-          element.appendChild(iconElement)
-        } else {
-          element.insertBefore(iconElement, element.firstChild)
-        }
-      } else if (iconElement && html) {
-        iconElement.innerHTML = html
-      }
-      return this
-    },
-
-    getIcon () {
-      return iconElement ? iconElement.innerHTML : ''
-    },
-
-    getElement () {
-      return iconElement
-    }
-  }
-}

package/src/core/build/ripple.js

@@ -1,159 +0,0 @@
-// src/core/build/ripple.js
-
-import { RIPPLE_CONFIG } from './constants'
-
-const DEFAULT_CONFIG = RIPPLE_CONFIG
-
-/**
- * Creates a ripple effect instance
- * @param {Object} [config] - Ripple configuration
- * @param {number} [config.duration] - Animation duration in ms
- * @param {string} [config.timing] - Animation timing function
- * @param {string[]} [config.opacity] - Start and end opacity values
- * @returns {Object} Ripple controller instance
- */
-export const createRipple = (config = {}) => {
-  // Make sure we fully merge the config options
-  const options = {
-    ...DEFAULT_CONFIG,
-    ...config,
-    // Handle nested objects like opacity array
-    opacity: config.opacity || DEFAULT_CONFIG.opacity
-  }
-
-  const getEndCoordinates = (bounds) => {
-    const size = Math.max(bounds.width, bounds.height)
-    const top = bounds.height > bounds.width
-      ? -bounds.height / 2
-      : -(bounds.width - bounds.height / 2)
-
-    return {
-      size: `${size * 2}px`,
-      top: `${top}px`,
-      left: `${size / -2}px`
-    }
-  }
-
-  const createRippleElement = () => {
-    const ripple = document.createElement('div')
-    ripple.className = 'ripple'
-    // Initial styles already set in CSS
-    ripple.style.transition = `all ${options.duration}ms ${options.timing}`
-    return ripple
-  }
-
-  // Store document event listeners for cleanup
-  let documentListeners = []
-
-  // Safe document event handling
-  const addDocumentListener = (event, handler) => {
-    if (typeof document.addEventListener === 'function') {
-      document.addEventListener(event, handler)
-      documentListeners.push({ event, handler })
-    }
-  }
-
-  const removeDocumentListener = (event, handler) => {
-    if (typeof document.removeEventListener === 'function') {
-      document.removeEventListener(event, handler)
-      documentListeners = documentListeners.filter(
-        listener => !(listener.event === event && listener.handler === handler)
-      )
-    }
-  }
-
-  const animate = (event, container) => {
-    if (!container) return
-
-    const bounds = container.getBoundingClientRect()
-    const ripple = createRippleElement()
-
-    // Set initial position and state
-    Object.assign(ripple.style, {
-      left: `${event.offsetX || bounds.width / 2}px`,
-      top: `${event.offsetY || bounds.height / 2}px`,
-      transform: 'scale(0)',
-      opacity: options.opacity[0]
-    })
-
-    container.appendChild(ripple)
-
-    // Force reflow
-    // eslint-disable-next-line no-unused-expressions
-    ripple.offsetHeight
-
-    // Animate to end position
-    const end = getEndCoordinates(bounds)
-    Object.assign(ripple.style, {
-      ...end,
-      transform: 'scale(1)',
-      opacity: options.opacity[1]
-    })
-
-    const cleanup = () => {
-      ripple.style.opacity = '0'
-
-      // Use setTimeout to remove element after animation
-      setTimeout(() => {
-        if (ripple.parentNode) {
-          ripple.parentNode.removeChild(ripple)
-        }
-      }, options.duration)
-
-      removeDocumentListener('mouseup', cleanup)
-      removeDocumentListener('mouseleave', cleanup)
-    }
-
-    addDocumentListener('mouseup', cleanup)
-    addDocumentListener('mouseleave', cleanup)
-  }
-
-  return {
-    mount: (element) => {
-      if (!element) return
-
-      // Ensure proper positioning context
-      const currentPosition = window.getComputedStyle(element).position
-      if (currentPosition === 'static') {
-        element.style.position = 'relative'
-      }
-      element.style.overflow = 'hidden'
-
-      // Store the mousedown handler to be able to remove it later
-      const mousedownHandler = (e) => animate(e, element)
-
-      // Store handler reference on the element
-      if (!element.__rippleHandlers) {
-        element.__rippleHandlers = []
-      }
-      element.__rippleHandlers.push(mousedownHandler)
-
-      element.addEventListener('mousedown', mousedownHandler)
-    },
-
-    unmount: (element) => {
-      if (!element) return
-
-      // Clear document event listeners
-      documentListeners.forEach(({ event, handler }) => {
-        removeDocumentListener(event, handler)
-      })
-      documentListeners = []
-
-      // Remove event listeners
-      if (element.__rippleHandlers) {
-        element.__rippleHandlers.forEach(handler => {
-          element.removeEventListener('mousedown', handler)
-        })
-        element.__rippleHandlers = []
-      }
-
-      // Remove all ripple elements
-      const ripples = element.querySelectorAll('.ripple')
-      ripples.forEach(ripple => {
-        // Call remove directly to match the test expectation
-        ripple.remove()
-      })
-    }
-  }
-}

package/src/core/build/text.js

@@ -1,54 +0,0 @@
-// src/core/build/text.js
-/**
- * @module core/build
- */
-
-/**
- * Creates a text manager for a component
- * @memberof module:core/build
- * @function createText
- * @param {HTMLElement} element - Parent element
- * @param {Object} [config] - Text configuration
- * @param {string} [config.prefix='mtrl'] - Class prefix
- * @param {string} [config.type='component'] - Component type
- * @param {HTMLElement} [config.beforeElement] - Element to insert before
- * @returns {Object} Text manager interface
- * @property {Function} setText - Sets text content
- * @property {Function} getText - Gets current text
- * @property {Function} getElement - Gets text element
- */
-export const createText = (element, config = {}) => {
-  let textElement = null
-  const PREFIX = config.prefix || 'mtrl'
-
-  const createElement = (content) => {
-    const span = document.createElement('span')
-    span.className = `${PREFIX}-${config.type || 'component'}-text`
-    span.textContent = content
-    return span
-  }
-
-  return {
-    setText (text) {
-      if (!textElement && text) {
-        textElement = createElement(text)
-        if (config.beforeElement) {
-          element.insertBefore(textElement, config.beforeElement)
-        } else {
-          element.appendChild(textElement)
-        }
-      } else if (textElement) {
-        textElement.textContent = text
-      }
-      return this
-    },
-
-    getText () {
-      return textElement ? textElement.textContent : ''
-    },
-
-    getElement () {
-      return textElement
-    }
-  }
-}

package/src/core/compose/base.js

@@ -1,8 +0,0 @@
-// src/core/compose/base.js
-export const createComponent = (config = {}) => ({
-  element: null,
-  config,
-  setup () {
-    return this
-  }
-})