mtrl 0.2.8 → 0.2.9

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

@@ -1,181 +0,0 @@
-// src/components/slider/features/structure.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
-import { SliderConfig } from '../types';
-import createLayout from '../../../core/layout';
-import { createElement } from '../../../core/dom/create';
-
-/**
- * Creates the slider DOM structure using layout system
- * @param config Slider configuration
- * @returns Component enhancer with DOM structure
- */
-export const withStructure = (config: SliderConfig) => component => {
-  // Set default values
-  const min = config.min || 0;
-  const max = config.max || 100;
-  const value = config.value !== undefined ? config.value : min;
-  const secondValue = config.secondValue !== undefined ? config.secondValue : null;
-  const isRangeSlider = config.range && secondValue !== null;
-  const isDisabled = config.disabled === true;
-  
-  // Format the values
-  const formatter = config.valueFormatter || (val => val.toString());
-  
-  // Get prefixed class names
-  const getClass = (className) => component.getClass(className);
-  
-  // Define slider structure
-  const structure = [
-    [createElement, 'container', { 
-      className: getClass('slider-container') 
-    }, [
-      // Track with segments
-      [createElement, 'track', { 
-        className: getClass('slider-track') 
-      }, [
-        [createElement, 'startTrack', { 
-          className: getClass('slider-start-track') 
-        }],
-        [createElement, 'activeTrack', { 
-          className: getClass('slider-active-track') 
-        }],
-        [createElement, 'remainingTrack', { 
-          className: getClass('slider-remaining-track') 
-        }]
-      ]],
-      
-      // Ticks container
-      [createElement, 'ticksContainer', { 
-        className: getClass('slider-ticks-container') 
-      }],
-      
-      // Dots for ends
-      [createElement, 'startDot', { 
-        className: [
-          getClass('slider-dot'),
-          getClass('slider-dot--start')
-        ]
-      }],
-      [createElement, 'endDot', { 
-        className: [
-          getClass('slider-dot'),
-          getClass('slider-dot--end')
-        ]
-      }],
-      
-      // Main handle
-      [createElement, 'handle', { 
-        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'
-        },
-        style: {
-          left: `${((value - min) / (max - min)) * 100}%`
-        }
-      }],
-      
-      // Main value bubble
-      [createElement, 'valueBubble', { 
-        className: getClass('slider-value'),
-        text: formatter(value)
-      }]
-    ]]
-  ];
-  
-  // Add second handle and bubble for range slider
-  if (isRangeSlider) {
-    const secondHandlePos = ((secondValue - min) / (max - min)) * 100;
-    
-    // Add second handle to structure
-    structure[0][3].push(
-      [createElement, 'secondHandle', { 
-        className: getClass('slider-handle'),
-        attrs: {
-          'role': 'slider',
-          'aria-valuemin': String(min),
-          'aria-valuemax': String(max),
-          'aria-valuenow': String(secondValue),
-          'aria-orientation': 'horizontal',
-          'tabindex': isDisabled ? '-1' : '0',
-          'aria-disabled': isDisabled ? 'true' : 'false'
-        },
-        style: {
-          left: `${secondHandlePos}%`
-        }
-      }]
-    );
-    
-    // Add second bubble to structure
-    structure[0][3].push(
-      [createElement, 'secondValueBubble', { 
-        className: getClass('slider-value'),
-        text: formatter(secondValue)
-      }]
-    );
-  }
-  
-  // Create layout and get structure elements
-  const components = createLayout(structure, component.element).component;
-  
-  // Add component base class and accessibility attributes
-  component.element.classList.add(component.getClass('slider'));
-  component.element.setAttribute('tabindex', '-1');
-  component.element.setAttribute('role', 'none');
-  component.element.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
-  
-  // Position any icon properly
-  const iconElement = component.element.querySelector(`.${component.getClass('icon')}`);
-  if (iconElement && config.label) {
-    iconElement.classList.add(component.getClass('slider-icon'));
-    component.element.classList.add(component.getClass('slider--icon'));
-  }
-  
-  // Apply style classes
-  applyStyleClasses(component, config, isRangeSlider, isDisabled);
-  
-  // Return enhanced component with structure
-  return {
-    ...component,
-    structure: components
-  };
-};
-
-/**
- * Applies style classes based on configuration
- */
-function applyStyleClasses(component, config, isRangeSlider, isDisabled) {
-  const baseClass = component.getClass('slider');
-  
-  // Apply size class
-  const size = config.size || SLIDER_SIZES.MEDIUM;
-  if (size !== SLIDER_SIZES.MEDIUM) {
-    component.element.classList.add(`${baseClass}--${size}`);
-  }
-  
-  // Apply color class
-  const color = config.color || SLIDER_COLORS.PRIMARY;
-  if (color !== SLIDER_COLORS.PRIMARY) {
-    component.element.classList.add(`${baseClass}--${color}`);
-  }
-  
-  // Apply discrete class if step is specified
-  if (config.step !== undefined && config.step > 0) {
-    component.element.classList.add(`${baseClass}--discrete`);
-  }
-  
-  // Apply disabled class if needed
-  if (isDisabled) {
-    component.element.classList.add(`${baseClass}--disabled`);
-  }
-  
-  // Apply range class if needed
-  if (isRangeSlider) {
-    component.element.classList.add(`${baseClass}--range`);
-  }
-}

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

@@ -1,388 +0,0 @@
-// src/components/slider/features/ui.ts
-import { SliderConfig } from '../types';
-
-/**
- * Create optimized UI update helpers for slider component
- * 
- * @param config Slider configuration
- * @param state Slider state object
- * @returns UI update helper methods
- */
-export const createUiHelpers = (config: SliderConfig, state) => {
-  // Return empty implementations if component structure is missing
-  if (!state.component?.structure) {
-    console.error('Cannot create UI helpers: component structure is missing');
-    return {
-      getPercentage: () => 0,
-      getValueFromPosition: () => 0,
-      roundToStep: v => v,
-      clamp: (v, min, max) => Math.min(Math.max(v, min), max),
-      updateUi: () => {},
-      showValueBubble: () => {},
-      generateTicks: () => {},
-      updateTicks: () => {}
-    };
-  }
-  
-  const {
-    container = null,
-    track = null, 
-    activeTrack = null, 
-    startTrack = null, 
-    remainingTrack = null, 
-    handle = null, 
-    valueBubble = null, 
-    secondHandle = null, 
-    secondValueBubble = null, 
-    ticksContainer = null
-  } = state.component.structure;
-  
-  /**
-   * Calculates percentage position for a value
-   */
-  const getPercentage = (value) => {
-    const range = state.max - state.min;
-    return range === 0 ? 0 : ((value - state.min) / range) * 100;
-  };
-  
-  /**
-   * Gets track dimensions and constraints for positioning calculations
-   */
-  const getTrackDimensions = () => {
-    if (!track || !handle || !container) return null;
-    
-    const handleRect = handle.getBoundingClientRect();
-    const trackRect = container.getBoundingClientRect();
-    const handleSize = handleRect.width || 20;
-    const trackSize = trackRect.width;
-    
-    const edgeConstraint = (handleSize / 2) / trackSize * 100;
-    const paddingPixels = state.activeHandle ? 6 : 8; 
-    const paddingPercent = (paddingPixels / trackSize) * 100;
-    
-    return { handleSize, trackSize, edgeConstraint, paddingPercent };
-  };
-  
-  /**
-   * Maps value percentage to visual position with edge constraints
-   */
-  const mapValueToVisualPercent = (valuePercent, edgeConstraint) => {
-    const minEdge = edgeConstraint;
-    const maxEdge = 100 - edgeConstraint;
-    const visualRange = maxEdge - minEdge;
-    
-    if (valuePercent <= 0) return minEdge;
-    if (valuePercent >= 100) return maxEdge;
-    return minEdge + (valuePercent / 100) * visualRange;
-  };
-  
-  /**
-   * Gets slider value from a position on the track
-   */
-  const getValueFromPosition = (position) => {
-    if (!track || !container) return state.min;
-    
-    try {
-      const containerRect = container.getBoundingClientRect();
-      const range = state.max - state.min;
-      const handleWidth = handle.getBoundingClientRect().width || 20;
-      
-      const leftEdge = containerRect.left + (handleWidth / 2);
-      const rightEdge = containerRect.right - (handleWidth / 2);
-      const effectiveWidth = rightEdge - leftEdge;
-      
-      const adjustedPosition = Math.max(leftEdge, Math.min(rightEdge, position));
-      const percentageFromLeft = (adjustedPosition - leftEdge) / effectiveWidth;
-      
-      return state.min + percentageFromLeft * range;
-    } catch (error) {
-      console.warn('Error calculating value from position:', error);
-      return state.min;
-    }
-  };
-  
-  /**
-   * Rounds a value to the nearest step
-   */
-  const roundToStep = (value) => {
-    const step = state.step;
-    if (step <= 0) return value;
-    
-    const steps = Math.round((value - state.min) / step);
-    return state.min + (steps * step);
-  };
-  
-  /**
-   * Clamps a value between min and max
-   */
-  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-  
-  /**
-   * Updates handle and bubble positions and transforms
-   */
-  const updateHandlePositions = () => {
-    if (!handle || !container) return;
-    
-    const dims = getTrackDimensions();
-    if (!dims) return;
-    
-    const { edgeConstraint } = dims;
-    
-    // Update main handle position
-    const percent = getPercentage(state.value);
-    const adjustedPercent = mapValueToVisualPercent(percent, edgeConstraint);
-    
-    handle.style.left = `${adjustedPercent}%`;
-    handle.style.transform = 'translate(-50%, -50%)';
-    if (valueBubble) {
-      valueBubble.style.left = `${adjustedPercent}%`;
-      valueBubble.style.transform = 'translateX(-50%)';
-    }
-    
-    // Update second handle if range slider
-    if (config.range && secondHandle && state.secondValue !== null) {
-      const secondPercent = getPercentage(state.secondValue);
-      const adjustedSecondPercent = mapValueToVisualPercent(secondPercent, edgeConstraint);
-      
-      secondHandle.style.left = `${adjustedSecondPercent}%`;
-      secondHandle.style.transform = 'translate(-50%, -50%)';
-      if (secondValueBubble) {
-        secondValueBubble.style.left = `${adjustedSecondPercent}%`;
-        secondValueBubble.style.transform = 'translateX(-50%)';
-      }
-    }
-    
-    // Update ARIA attributes
-    handle.setAttribute('aria-valuenow', String(state.value));
-    if (config.range && secondHandle && state.secondValue !== null) {
-      secondHandle.setAttribute('aria-valuenow', String(state.secondValue));
-    }
-  };
-  
-  /**
-   * Updates all track segments at once with optimized positioning
-   */
-  const updateTrackSegments = () => {
-    if (!track || !container || !handle) return;
-    
-    const dims = getTrackDimensions();
-    if (!dims) return;
-    
-    const { handleSize, trackSize, paddingPercent } = dims;
-    const edgeConstraint = (handleSize / 2) / trackSize * 100;
-    
-    if (config.range && state.secondValue !== null) {
-      // Range slider setup
-      const lowerValue = Math.min(state.value, state.secondValue);
-      const higherValue = Math.max(state.value, state.secondValue);
-      const lowerPercent = getPercentage(lowerValue);
-      const higherPercent = getPercentage(higherValue);
-      
-      const adjustedLower = mapValueToVisualPercent(lowerPercent, edgeConstraint);
-      const adjustedHigher = mapValueToVisualPercent(higherPercent, edgeConstraint);
-      
-      // Start track (before first handle)
-      if (lowerPercent > 1) {
-        startTrack.style.display = 'block';
-        startTrack.style.left = '0';
-        startTrack.style.right = `${100 - (adjustedLower - paddingPercent)}%`;
-        startTrack.style.width = 'auto';
-      } else {
-        startTrack.style.display = 'none';
-      }
-      
-      // Active track (between handles)
-      const valueDiffPercent = Math.abs(higherPercent - lowerPercent);
-      const hideThreshold = (handleSize / trackSize) * 100;
-      
-      if (valueDiffPercent <= hideThreshold) {
-        activeTrack.style.display = 'none';
-      } else {
-        activeTrack.style.display = 'block';
-        activeTrack.style.left = `${adjustedLower + paddingPercent}%`;
-        activeTrack.style.right = `${100 - (adjustedHigher - paddingPercent)}%`;
-        activeTrack.style.width = 'auto';
-      }
-      
-      // Remaining track (after second handle)
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.left = `${adjustedHigher + paddingPercent}%`;
-      remainingTrack.style.right = '0';
-      remainingTrack.style.width = 'auto';
-    } else {
-      // Single handle slider
-      const valuePercent = getPercentage(state.value);
-      const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint);
-      
-      // Hide start track for single slider
-      startTrack.style.display = 'none';
-      
-      // Active track (filled part)
-      activeTrack.style.display = 'block';
-      activeTrack.style.left = '0';
-      activeTrack.style.right = `${100 - (adjustedPercent - paddingPercent)}%`;
-      activeTrack.style.width = 'auto';
-      
-      // Remaining track (unfilled part)
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.left = `${adjustedPercent + paddingPercent}%`;
-      remainingTrack.style.right = '0';
-      remainingTrack.style.width = 'auto';
-    }
-  };
-  
-  /**
-   * Updates value bubble content
-   */
-  const updateValueBubbles = () => {
-    if (!valueBubble) return;
-    
-    const formatter = config.valueFormatter || (value => value.toString());
-    valueBubble.textContent = formatter(state.value);
-    
-    if (config.range && secondValueBubble && state.secondValue !== null) {
-      secondValueBubble.textContent = formatter(state.secondValue);
-    }
-  };
-  
-  /**
-   * Shows or hides value bubble
-   */
-  const showValueBubble = (bubbleElement, show) => {
-    if (!bubbleElement || !config.showValue) return;
-    
-    bubbleElement.classList[show ? 'add' : 'remove'](`${state.component.getClass('slider-value')}--visible`);
-  };
-  
-  /**
-   * Generates tick marks
-   */
-  const generateTicks = () => {
-    if (!ticksContainer || !container) return;
-    
-    // Clear existing ticks
-    while (ticksContainer.firstChild) {
-      ticksContainer.removeChild(ticksContainer.firstChild);
-    }
-    
-    state.ticks = [];
-    if (!config.ticks) return;
-    
-    const numSteps = Math.floor((state.max - state.min) / state.step);
-    const tickValues = [];
-    
-    // Generate tick values
-    for (let i = 0; i <= numSteps; i++) {
-      const value = state.min + (i * state.step);
-      if (value <= state.max) tickValues.push(value);
-    }
-    
-    // Ensure max value is included
-    if (tickValues[tickValues.length - 1] !== state.max) {
-      tickValues.push(state.max);
-    }
-    
-    // CSS classes
-    const tickClass = state.component.getClass('slider-tick');
-    const activeClass = `${tickClass}--active`;
-    const inactiveClass = `${tickClass}--inactive`;
-    const hiddenClass = `${tickClass}--hidden`;
-    
-    // Create tick elements
-    tickValues.forEach(value => {
-      const percent = getPercentage(value);
-      const tick = document.createElement('div');
-      tick.classList.add(tickClass);
-      tick.style.left = `${percent}%`;
-      
-      // Determine tick active state
-      const isExactlySelected = (value === state.value || 
-                               (config.range && state.secondValue !== null && value === state.secondValue));
-      
-      if (isExactlySelected) {
-        tick.classList.add(hiddenClass);
-      } else if (config.range && state.secondValue !== null) {
-        const lowerValue = Math.min(state.value, state.secondValue);
-        const higherValue = Math.max(state.value, state.secondValue);
-        
-        tick.classList.add(value >= lowerValue && value <= higherValue ? activeClass : inactiveClass);
-      } else {
-        tick.classList.add(value <= state.value ? activeClass : inactiveClass);
-      }
-      
-      ticksContainer.appendChild(tick);
-      state.ticks.push(tick);
-    });
-  };
-  
-  /**
-   * Updates active state of tick marks
-   */
-  const updateTicks = () => {
-    if (!state.ticks || state.ticks.length === 0) return;
-    
-    const tickClass = state.component.getClass('slider-tick');
-    const activeClass = `${tickClass}--active`;
-    const inactiveClass = `${tickClass}--inactive`;
-    const hiddenClass = `${tickClass}--hidden`;
-    
-    state.ticks.forEach((tick, index) => {
-      // Calculate the value for this tick
-      const tickValue = state.min + (index * state.step);
-      
-      // Reset visibility first
-      tick.classList.remove(hiddenClass);
-      
-      // Check if this tick should be hidden (matches exactly a selected value)
-      const isExactlySelected = (tickValue === state.value || 
-                              (config.range && state.secondValue !== null && tickValue === state.secondValue));
-      
-      if (isExactlySelected) {
-        tick.classList.add(hiddenClass);
-      } else if (config.range && state.secondValue !== null) {
-        // Range slider - ticks between values should be active
-        const lowerValue = Math.min(state.value, state.secondValue);
-        const higherValue = Math.max(state.value, state.secondValue);
-        
-        if (tickValue >= lowerValue && tickValue <= higherValue) {
-          tick.classList.add(activeClass);
-          tick.classList.remove(inactiveClass);
-        } else {
-          tick.classList.remove(activeClass);
-          tick.classList.add(inactiveClass);
-        }
-      } else {
-        // Single slider - ticks below value should be active
-        if (tickValue <= state.value) {
-          tick.classList.add(activeClass);
-          tick.classList.remove(inactiveClass);
-        } else {
-          tick.classList.remove(activeClass);
-          tick.classList.add(inactiveClass);
-        }
-      }
-    });
-  };
-  
-  /**
-   * Updates all UI elements
-   */
-  const updateUi = () => {
-    updateHandlePositions();
-    updateTrackSegments();
-    updateValueBubbles();
-    updateTicks();
-  };
-  
-  // Return consolidated helper methods
-  return {
-    getPercentage,
-    getValueFromPosition,
-    roundToStep,
-    clamp,
-    showValueBubble,
-    generateTicks,
-    updateTicks,
-    updateUi
-  };
-}

package/src/components/textfield/constants.ts

@@ -1,100 +0,0 @@
-// src/components/textfield/constants.ts
-
-/**
- * Textfield visual variants
- */
-export const TEXTFIELD_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-
-/**
- * Textfield input types
- */
-export const TEXTFIELD_TYPES = {
-  TEXT: 'text',
-  PASSWORD: 'password',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  TEL: 'tel',
-  URL: 'url',
-  SEARCH: 'search',
-  MULTILINE: 'multiline'
-} as const;
-
-/**
- * Validation schema for textfield configuration
- */
-export const TEXTFIELD_SCHEMA = {
-  type: {
-    type: 'string',
-    enum: Object.values(TEXTFIELD_TYPES),
-    required: false
-  },
-  variant: {
-    type: 'string',
-    enum: Object.values(TEXTFIELD_VARIANTS),
-    required: false
-  },
-  name: {
-    type: 'string',
-    required: false
-  },
-  label: {
-    type: 'string',
-    required: false
-  },
-  placeholder: {
-    type: 'string',
-    required: false
-  },
-  value: {
-    type: 'string',
-    required: false
-  },
-  required: {
-    type: 'boolean',
-    required: false
-  },
-  disabled: {
-    type: 'boolean',
-    required: false
-  },
-  maxLength: {
-    type: 'number',
-    required: false
-  },
-  pattern: {
-    type: 'string',
-    required: false
-  },
-  autocomplete: {
-    type: 'string',
-    required: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  }
-} as const;
-
-/**
- * Textfield state classes
- */
-export const TEXTFIELD_STATES = {
-  FOCUSED: 'focused',
-  FILLED: 'filled',
-  DISABLED: 'disabled',
-  INVALID: 'invalid'
-} as const;
-
-/**
- * Textfield element classes
- */
-export const TEXTFIELD_CLASSES = {
-  ROOT: 'textfield',
-  INPUT: 'textfield-input',
-  LABEL: 'textfield-label',
-  HELPER: 'textfield-helper',
-  COUNTER: 'textfield-counter'
-} as const;