mtrl 0.3.8 → 0.4.0

package/src/components/slider/features/states.ts

@@ -1,195 +0,0 @@
-// src/components/slider/features/states.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../types';
-import { SliderConfig } from '../types';
-
-/**
- * Add state management features to slider component
- * Combines appearance and disabled functionality into a single feature
- * 
- * @param config Slider configuration
- * @returns Component enhancer with state management features
- */
-export const withStates = (config: SliderConfig) => component => {
-  // Track initial disabled state
-  const isDisabled = config.disabled === true;
-  
-  // Apply initial disabled state if needed
-  if (isDisabled) {
-    setTimeout(() => {
-      disableComponent();
-    }, 0);
-  }
-  
-  /**
-   * Disables the component
-   */
-  function disableComponent() {
-    component.element.classList.add(`${component.getClass('slider')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'true');
-    
-    // Ensure handles cannot receive focus when disabled
-    if (component.structure?.handle) {
-      component.structure.handle.tabIndex = -1;
-      component.structure.handle.setAttribute('aria-disabled', 'true');
-    }
-    
-    if (config.range && component.structure?.secondHandle) {
-      component.structure.secondHandle.tabIndex = -1;
-      component.structure.secondHandle.setAttribute('aria-disabled', 'true');
-    }
-  }
-  
-  /**
-   * Enables the component
-   */
-  function enableComponent() {
-    component.element.classList.remove(`${component.getClass('slider')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'false');
-    
-    // Re-enable focus on handles
-    if (component.structure?.handle) {
-      component.structure.handle.tabIndex = 0;
-      component.structure.handle.setAttribute('aria-disabled', 'false');
-    }
-    
-    if (config.range && component.structure?.secondHandle) {
-      component.structure.secondHandle.tabIndex = 0;
-      component.structure.secondHandle.setAttribute('aria-disabled', 'false');
-    }
-  }
-  
-  /**
-   * Gets the active color class
-   */
-  function getActiveColor() {
-    return Object.values(SLIDER_COLORS).find(colorName => 
-      component.element.classList.contains(`${component.getClass('slider')}--${colorName}`)
-    ) || SLIDER_COLORS.PRIMARY;
-  }
-  
-  /**
-   * Gets the active size class
-   */
-  function getActiveSize() {
-    return Object.values(SLIDER_SIZES).find(sizeName => 
-      component.element.classList.contains(`${component.getClass('slider')}--${sizeName}`)
-    ) || SLIDER_SIZES.MEDIUM;
-  }
-  
-  // Return enhanced component
-  return {
-    ...component,
-    
-    // Disabled state management
-    disabled: {
-      /**
-       * Enables the component
-       * @returns Disabled manager for chaining
-       */
-      enable() {
-        enableComponent();
-        return this;
-      },
-      
-      /**
-       * Disables the component
-       * @returns Disabled manager for chaining
-       */
-      disable() {
-        disableComponent();
-        return this;
-      },
-      
-      /**
-       * Checks if component is disabled
-       * @returns True if disabled
-       */
-      isDisabled() {
-        return component.element.classList.contains(`${component.getClass('slider')}--disabled`);
-      }
-    },
-    
-    // Appearance management
-    appearance: {
-      /**
-       * Sets slider color
-       * @param color Color variant
-       * @returns Appearance manager for chaining
-       */
-      setColor(color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) {
-        // Remove existing color classes
-        Object.values(SLIDER_COLORS).forEach(colorName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${colorName}`);
-        });
-        
-        // Add new color class if not primary (default)
-        if (color !== SLIDER_COLORS.PRIMARY) {
-          component.element.classList.add(`${component.getClass('slider')}--${color}`);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider color
-       * @returns Current color name
-       */
-      getColor() {
-        return getActiveColor();
-      },
-      
-      /**
-       * Sets slider size
-       * @param size Size variant
-       * @returns Appearance manager for chaining
-       */
-      setSize(size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) {
-        // Remove existing size classes
-        Object.values(SLIDER_SIZES).forEach(sizeName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${sizeName}`);
-        });
-        
-        // Add new size class if not medium (default)
-        if (size !== SLIDER_SIZES.MEDIUM) {
-          component.element.classList.add(`${component.getClass('slider')}--${size}`);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider size
-       * @returns Current size name
-       */
-      getSize() {
-        return getActiveSize();
-      },
-      
-      /**
-       * Shows or hides tick marks
-       * @param show Whether to show ticks
-       * @returns Appearance manager for chaining
-       */
-      showTicks(show: boolean) {
-        config.ticks = show;
-        
-        // Regenerate ticks if slider is initialized
-        if (component.slider) {
-          component.slider.regenerateTicks();
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Shows or hides current value bubble during interaction
-       * @param show Whether to show value bubble
-       * @returns Appearance manager for chaining
-       */
-      showCurrentValue(show: boolean) {
-        config.showValue = show;
-        return this;
-      }
-    }
-  };
-};

package/src/components/slider/index.ts

@@ -1,17 +0,0 @@
-// src/components/slider/index.ts
-
-// Export main component creator
-export { default } from './slider';
-
-// Export constants and types 
-export { 
-  // Constants
-  SLIDER_COLORS,
-  SLIDER_SIZES,
-  SLIDER_EVENTS,
-  
-  // Types
-  type SliderConfig, 
-  type SliderComponent, 
-  type SliderEvent 
-} from './types';

package/src/components/slider/schema.ts

@@ -1,141 +0,0 @@
-// src/components/slider/structure.ts
-import { SliderConfig } from './types';
-
-/**
- * Creates the base slider structure definition
- * 
- * @param component Component for class name generation
- * @param config Slider configuration
- * @returns Structure schema object
- */
-export function createSliderSchema(component, config: SliderConfig) {
-  // Get prefixed class names
-  const getClass = (className) => component.getClass(className);
-
-  // Set default values
-  const min = config.min || 0;
-  const max = config.max || 100;
-  const value = config.value !== undefined ? config.value : min;
-  const isDisabled = config.disabled === true;
-  const formatter = config.valueFormatter || (val => val.toString());
-  
-  // Calculate initial position
-  const valuePercent = ((value - min) / (max - min)) * 100;
-  
-  // Return base structure definition formatted for createLayout
-  return {
-    element: {
-      options: {
-        className: [getClass('slider'), config.class].filter(Boolean),
-        attrs: {
-          tabindex: '-1',
-          role: 'none',
-          'aria-disabled': isDisabled ? 'true' : 'false'
-        }
-      },
-      children: {
-        // Container with all slider elements
-        container: {
-          options: {
-            className: getClass('slider-container')
-          },
-          children: {
-            // Track with segments
-            track: {
-              options: {
-                className: getClass('slider-track')
-              },
-              children: {
-                activeTrack: {
-                  options: {
-                    className: getClass('slider-active-track'),
-                    style: {
-                      width: `${valuePercent}%`
-                    }
-                  }
-                },
-                startTrack: {
-                  options: {
-                    className: getClass('slider-start-track'),
-                    style: {
-                      display: 'none', // Initially hidden for single slider
-                      width: '0%'
-                    }
-                  }
-                },
-                remainingTrack: {
-                  options: {
-                    className: getClass('slider-remaining-track'),
-                    style: {
-                      width: `${100 - valuePercent}%`
-                    }
-                  }
-                }
-              }
-            },
-            
-            // Ticks container
-            ticksContainer: {
-              options: {
-                className: getClass('slider-ticks-container')
-              }
-            },
-            
-            // Dots for ends
-            startDot: {
-              options: {
-                className: [
-                  getClass('slider-dot'),
-                  getClass('slider-dot--start')
-                ]
-              }
-            },
-            endDot: {
-              options: {
-                className: [
-                  getClass('slider-dot'),
-                  getClass('slider-dot--end')
-                ]
-              }
-            },
-            
-            // Main handle
-            handle: {
-              options: {
-                className: getClass('slider-handle'),
-                attrs: {
-                  role: 'slider',
-                  'aria-valuemin': String(min),
-                  'aria-valuemax': String(max),
-                  'aria-valuenow': String(value),
-                  'aria-orientation': 'horizontal',
-                  tabindex: isDisabled ? '-1' : '0',
-                  'aria-disabled': isDisabled ? 'true' : 'false',
-                  'data-value': String(value),
-                  'data-handle-index': '0'
-                },
-                style: {
-                  left: `${valuePercent}%`
-                }
-              }
-            }, 
-            // Main value bubble
-            valueBubble: {
-              options: {
-                className: getClass('slider-value'),
-                attrs: {
-                  'aria-hidden': 'true',
-                  'data-handle-index': '0'
-                },
-                text: formatter(value),
-                style: {
-                  left: `${valuePercent}%`
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  };
-}

package/src/components/slider/slider.ts

@@ -1,76 +0,0 @@
-// src/components/slider/slider.ts
-import { pipe } from '../../core/compose/pipe';
-import { createBase } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { withLayout, withIcon, withLabel, withDom  } from '../../core/composition/features';
-import { 
-  withRange,
-  withStates,
-  withController
-} from './features';
-import { withAPI } from './api';
-import { SliderConfig, SliderComponent } from './types';
-import { createBaseConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Slider component
- * 
- * Slider follows a clear architectural pattern:
- * 1. Structure definition - Describes the DOM structure declaratively
- * 2. Feature enhancement - Adds specific capabilities (range, icons, labels)
- * 3. DOM creation - Turns the structure into actual DOM elements
- * 4. State management - Handles visual states and appearance
- * 5. Controller - Manages behavior, events, and UI rendering
- * 6. Lifecycle - Handles component lifecycle events
- * 7. Public API - Exposes a clean, consistent API
- *
- * @param {SliderConfig} config - Slider configuration object
- * @returns {SliderComponent} Slider component instance
- */
-const createSlider = (config: SliderConfig = {}): SliderComponent => {
-  // Process configuration with defaults
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Create the component by composing features in a specific order
-    const component = pipe(
-      // Base component with event system
-      createBase,
-      withEvents(),
-      withLayout(baseConfig),
-      withIcon(baseConfig),
-      withLabel(baseConfig),
-      withRange(baseConfig),
-      
-      // Now create the actual DOM elements from the complete structure
-      withDom(),
-      
-      // Add state management and behavior
-      withStates(baseConfig),
-      withController(baseConfig),
-      withLifecycle()
-    )(baseConfig);
-    
-    // Generate the API configuration based on the enhanced component
-    const apiOptions = getApiConfig(component);
-    
-    // Apply the public API layer
-    const slider = withAPI(apiOptions)(component);
-
-    // Register event handlers from config for convenience
-    if (baseConfig.on && typeof slider.on === 'function') {
-      Object.entries(baseConfig.on).forEach(([event, handler]) => {
-        if (typeof handler === 'function') {
-          slider.on(event, handler);
-        }
-      });
-    }
-
-    return slider;
-  } catch (error) {
-    console.error('Slider creation error:', error);
-    throw new Error(`Failed to create slider: ${(error as Error).message}`);
-  }
-};
-
-export default createSlider;

package/src/components/slider/types.ts

@@ -1,223 +0,0 @@
-// src/components/slider/types.ts
-
-/**
- * Available slider color variants
- */
-export const SLIDER_COLORS = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  TERTIARY: 'tertiary',
-  ERROR: 'error'
-} as const;
-
-/**
- * Available slider size variants
- */
-export const SLIDER_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-} as const;
-
-/**
- * Available slider events
- */
-export const SLIDER_EVENTS = {
-  CHANGE: 'change',
-  INPUT: 'input',
-  FOCUS: 'focus',
-  BLUR: 'blur',
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Available slider color variants
- */
-export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
-
-/**
- * Available slider size variants
- */
-export type SliderSize = 'small' | 'medium' | 'large';
-
-/**
- * Available slider event types
- */
-export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
-
-/**
- * Configuration options for the slider component
- * @interface SliderConfig
- */
-export interface SliderConfig {
-  /** Minimum value of the slider */
-  min?: number;
-  
-  /** Maximum value of the slider */
-  max?: number;
-  
-  /** Current value of the slider */
-  value?: number;
-  
-  /** Secondary value for range slider (when using two handles) */
-  secondValue?: number;
-  
-  /** Step size for discrete slider */
-  step?: number;
-  
-  /** Whether the slider is disabled */
-  disabled?: boolean;
-  
-  /** Color variant of the slider */
-  color?: SliderColor;
-  
-  /** Size variant of the slider */
-  size?: SliderSize;
-  
-  /** Whether to show tick marks */
-  ticks?: boolean;
-  
-  /** Format function for displayed values */
-  valueFormatter?: (value: number) => string;
-  
-  /** Whether to show the current value while dragging */
-  showValue?: boolean;
-  
-  /** Whether to snap to steps while dragging (discrete slider) */
-  snapToSteps?: boolean;
-  
-  /** Whether the slider is a range slider (two handles) */
-  range?: boolean;
-  
-  /** Label text for the slider */
-  label?: string;
-  
-  /** Position of the label (start or end) - defaults to 'start' */
-  labelPosition?: 'start' | 'end';
-  
-  /** Icon to display with the slider */
-  icon?: string;
-  
-  /** Position of the icon (start or end) */
-  iconPosition?: 'start' | 'end';
-  
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Event handlers for slider events */
-  on?: {
-    [key in SliderEventType]?: (event: SliderEvent) => void;
-  };
-}
-
-/**
- * Slider event data
- * @interface SliderEvent
- */
-export interface SliderEvent {
-  /** The slider component that triggered the event */
-  slider: any;
-  
-  /** Current slider value */
-  value: number;
-  
-  /** Secondary value (for range sliders) */
-  secondValue: number | null;
-  
-  /** Original DOM event if available */
-  originalEvent: Event | null;
-  
-  /** Function to prevent default behavior */
-  preventDefault: () => void;
-  
-  /** Whether default behavior was prevented */
-  defaultPrevented: boolean;
-}
-
-/**
- * Slider component public API interface
- * @interface SliderComponent
- */
-export interface SliderComponent {
-  /** The root element of the slider */
-  element: HTMLElement;
-  
-  /** Sets slider value */
-  setValue: (value: number, triggerEvent?: boolean) => SliderComponent;
-  
-  /** Gets slider value */
-  getValue: () => number;
-  
-  /** Sets secondary slider value (for range slider) */
-  setSecondValue: (value: number, triggerEvent?: boolean) => SliderComponent;
-  
-  /** Gets secondary slider value */
-  getSecondValue: () => number | null;
-  
-  /** Sets slider minimum value */
-  setMin: (min: number) => SliderComponent;
-  
-  /** Gets slider minimum value */
-  getMin: () => number;
-  
-  /** Sets slider maximum value */
-  setMax: (max: number) => SliderComponent;
-  
-  /** Gets slider maximum value */
-  getMax: () => number;
-  
-  /** Sets slider step size */
-  setStep: (step: number) => SliderComponent;
-  
-  /** Gets slider step size */
-  getStep: () => number;
-  
-  /** Enables the slider */
-  enable: () => SliderComponent;
-  
-  /** Disables the slider */
-  disable: () => SliderComponent;
-  
-  /** Checks if slider is disabled */
-  isDisabled: () => boolean;
-  
-  /** Sets slider color */
-  setColor: (color: SliderColor) => SliderComponent;
-  
-  /** Gets slider color */
-  getColor: () => string;
-  
-  /** Sets slider size */
-  setSize: (size: SliderSize) => SliderComponent;
-  
-  /** Gets slider size */
-  getSize: () => string;
-  
-  /** Shows or hides tick marks */
-  showTicks: (show: boolean) => SliderComponent;
-  
-  /** Shows or hides current value while dragging */
-  showCurrentValue: (show: boolean) => SliderComponent;
-  
-  /** Sets label text */
-  setLabel: (text: string) => SliderComponent;
-  
-  /** Gets label text */
-  getLabel: () => string;
-  
-  /** Sets icon HTML */
-  setIcon: (iconHtml: string) => SliderComponent;
-  
-  /** Gets icon HTML */
-  getIcon: () => string;
-  
-  /** Adds event listener */
-  on: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
-  
-  /** Removes event listener */
-  off: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
-  
-  /** Destroys the slider component and cleans up resources */
-  destroy: () => void;
-}