mtrl 0.2.5 → 0.2.7

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

@@ -1,43 +0,0 @@
-// src/components/slider/features/disabled.ts
-import { SliderConfig } from '../types';
-
-/**
- * Add disabled state functionality to component
- * @param config Slider configuration
- * @returns Component enhancer with disabled functionality
- */
-export const withDisabled = (config: SliderConfig) => component => {
-  // Initial disabled state
-  const isDisabled = config.disabled === true;
-  
-  return {
-    ...component,
-    disabled: {
-      enable() {
-        component.element.classList.remove(`${component.getClass('slider')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'false');
-        component.element.tabIndex = 0;
-        component.structure.thumb.tabIndex = 0;
-        
-        if (config.range && component.structure.secondThumb) {
-          component.structure.secondThumb.tabIndex = 0;
-        }
-      },
-      
-      disable() {
-        component.element.classList.add(`${component.getClass('slider')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'true');
-        component.element.tabIndex = -1;
-        component.structure.thumb.tabIndex = -1;
-        
-        if (config.range && component.structure.secondThumb) {
-          component.structure.secondThumb.tabIndex = -1;
-        }
-      },
-      
-      isDisabled() {
-        return component.element.classList.contains(`${component.getClass('slider')}--disabled`);
-      }
-    }
-  };
-};

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

@@ -1,164 +0,0 @@
-// src/components/slider/features/events.ts
-import { SliderEvent } from '../types';
-
-/**
- * Create event helper functions for the slider component
- * 
- * @param state Slider state object
- * @returns Event helper methods
- */
-export const createEventHelpers = (state) => {
-  /**
-   * Triggers a slider event
-   * @param eventName Name of the event to trigger
-   * @param originalEvent Original DOM event if applicable
-   * @returns Event data object
-   */
-  const triggerEvent = (eventName, originalEvent = null) => {
-    // Create event data object
-    const eventData: SliderEvent = {
-      slider: state.component,
-      value: state.value,
-      secondValue: state.secondValue,
-      originalEvent,
-      preventDefault: () => { eventData.defaultPrevented = true; },
-      defaultPrevented: false
-    };
-    
-    // Add a component events facade if it doesn't exist
-    if (!state.component.events) {
-      state.component.events = {
-        trigger: () => {},
-        on: () => {},
-        off: () => {}
-      };
-    }
-    
-    // Now we can safely trigger the event
-    state.component.events.trigger(eventName, eventData);
-    
-    return eventData;
-  };
-  
-  /**
-   * Set up event listeners for slider elements
-   * @param interactionHandlers Mouse/touch interaction handlers
-   * @param keyboardHandlers Keyboard interaction handlers
-   */
-  const setupEventListeners = (interactionHandlers, keyboardHandlers) => {
-    // Ensure needed component parts exist
-    if (!state.component || !state.component.structure) {
-      console.warn('Cannot set up event listeners: component structure is missing');
-      return;
-    }
-    
-    const { 
-      track = null, 
-      thumb = null, 
-      secondThumb = null 
-    } = state.component.structure;
-    
-    if (!track || !thumb) {
-      console.warn('Cannot set up event listeners: track or thumb is missing');
-      return;
-    }
-    
-    const {
-      handleThumbMouseDown,
-      handleTrackMouseDown
-    } = interactionHandlers;
-    
-    const {
-      handleKeyDown,
-      handleFocus,
-      handleBlur
-    } = keyboardHandlers;
-    
-    // Track events
-    track.addEventListener('mousedown', handleTrackMouseDown);
-    track.addEventListener('touchstart', handleTrackMouseDown, { passive: false });
-    
-    // Thumb events
-    thumb.addEventListener('mousedown', (e) => handleThumbMouseDown(e, false));
-    thumb.addEventListener('touchstart', (e) => handleThumbMouseDown(e, false), { passive: false });
-    thumb.addEventListener('keydown', (e) => handleKeyDown(e, false));
-    thumb.addEventListener('focus', (e) => handleFocus(e, false));
-    thumb.addEventListener('blur', (e) => handleBlur(e, false));
-    
-    // Second thumb events for range slider
-    if (state.component.config && state.component.config.range && secondThumb) {
-      secondThumb.addEventListener('mousedown', (e) => handleThumbMouseDown(e, true));
-      secondThumb.addEventListener('touchstart', (e) => handleThumbMouseDown(e, true), { passive: false });
-      secondThumb.addEventListener('keydown', (e) => handleKeyDown(e, true));
-      secondThumb.addEventListener('focus', (e) => handleFocus(e, true));
-      secondThumb.addEventListener('blur', (e) => handleBlur(e, true));
-    }
-  };
-  
-  /**
-   * Clean up event listeners
-   * @param interactionHandlers Mouse/touch interaction handlers
-   * @param keyboardHandlers Keyboard interaction handlers
-   */
-  const cleanupEventListeners = (interactionHandlers, keyboardHandlers) => {
-    // Ensure needed component parts exist
-    if (!state.component || !state.component.structure) {
-      return;
-    }
-    
-    const { 
-      track = null, 
-      thumb = null, 
-      secondThumb = null 
-    } = state.component.structure;
-    
-    if (!track || !thumb) {
-      return;
-    }
-    
-    const {
-      handleThumbMouseDown,
-      handleTrackMouseDown,
-      handleMouseMove,
-      handleMouseUp
-    } = interactionHandlers;
-    
-    const {
-      handleKeyDown,
-      handleFocus,
-      handleBlur
-    } = keyboardHandlers;
-    
-    // Track events
-    track.removeEventListener('mousedown', handleTrackMouseDown);
-    track.removeEventListener('touchstart', handleTrackMouseDown);
-    
-    // Thumb events
-    thumb.removeEventListener('mousedown', (e) => handleThumbMouseDown(e, false));
-    thumb.removeEventListener('touchstart', (e) => handleThumbMouseDown(e, false));
-    thumb.removeEventListener('keydown', (e) => handleKeyDown(e, false));
-    thumb.removeEventListener('focus', (e) => handleFocus(e, false));
-    thumb.removeEventListener('blur', (e) => handleBlur(e, false));
-    
-    // Second thumb events
-    if (state.component.config && state.component.config.range && secondThumb) {
-      secondThumb.removeEventListener('mousedown', (e) => handleThumbMouseDown(e, true));
-      secondThumb.removeEventListener('touchstart', (e) => handleThumbMouseDown(e, true));
-      secondThumb.removeEventListener('keydown', (e) => handleKeyDown(e, true));
-      secondThumb.removeEventListener('focus', (e) => handleFocus(e, true));
-      secondThumb.removeEventListener('blur', (e) => handleBlur(e, true));
-    }
-    
-    // Global events
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-    document.removeEventListener('touchmove', handleMouseMove);
-    document.removeEventListener('touchend', handleMouseUp);
-  };
-  
-  return {
-    triggerEvent,
-    setupEventListeners,
-    cleanupEventListeners
-  };
-};

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

@@ -1,261 +0,0 @@
-// src/components/slider/features/interactions.ts
-import { SLIDER_EVENTS } from '../constants';
-import { SliderConfig, SliderEvent } from '../types';
-
-/**
- * Add interaction event handlers to slider component
- * This function contains the core event handlers for mouse/touch interactions
- * 
- * @param config Slider configuration
- * @param state Slider state object
- * @param handlers Object containing handler methods
- * @returns Event handlers for slider interactions
- */
-export const createInteractionHandlers = (config: SliderConfig, state, handlers) => {
-  // Ensure state and handlers exist
-  if (!state || !handlers) {
-    console.error('Cannot create interaction handlers: state or handlers missing');
-    return {
-      handleThumbMouseDown: () => {},
-      handleTrackMouseDown: () => {},
-      handleMouseMove: () => {},
-      handleMouseUp: () => {}
-    };
-  }
-  
-  // Get required elements from structure (with fallbacks)
-  const {
-    track = null, 
-    thumb = null, 
-    valueBubble = null, 
-    secondThumb = null, 
-    secondValueBubble = null
-  } = state.component?.structure || {};
-  
-  // Get required handler methods (with fallbacks)
-  const {
-    getValueFromPosition = () => 0,
-    roundToStep = value => value,
-    clamp = (value, min, max) => value,
-    showValueBubble = () => {},
-    updateUi = () => {},
-    triggerEvent = () => ({ defaultPrevented: false })
-  } = handlers;
-  
-  // Event handlers
-  const handleThumbMouseDown = (e, isSecondThumb = false) => {
-    console.log('handleThumbMouseDown', e)
-    // Verify component exists and check if disabled
-    if (!state.component || (state.component.disabled && state.component.disabled.isDisabled())) {
-      return;
-    }
-    
-    e.preventDefault();
-    e.stopPropagation();
-    
-    state.dragging = true;
-    state.activeThumb = isSecondThumb ? secondThumb : thumb;
-    state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
-    
-    // Add dragging class to component element to style the thumb differently
-    state.component.element.classList.add(`${state.component.getClass('slider')}--dragging`);
-    
-    // Show value bubble if it exists
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, true);
-    }
-    
-    // Add global event listeners
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('touchmove', handleMouseMove, { passive: false });
-    document.addEventListener('touchend', handleMouseUp);
-    
-    // Try to trigger start event (with error handling)
-    try {
-      triggerEvent(SLIDER_EVENTS.START, e);
-    } catch (error) {
-      console.warn('Error triggering START event:', error);
-    }
-  };
-  
-  const handleTrackMouseDown = (e) => {
-    // Verify component exists and check if disabled
-    if (!state.component || (state.component.disabled && state.component.disabled.isDisabled()) || !track) {
-      return;
-    }
-    
-    e.preventDefault();
-    
-    // Determine which thumb to move based on click position
-    let isSecondThumb = false;
-    
-    try {
-      // Get track rect for calculating position
-      const trackRect = track.getBoundingClientRect();
-      
-      // Get position from mouse or touch event
-      const position = e.type.includes('touch')
-        ? e.touches[0].clientX
-        : e.clientX;
-      
-      // Calculate value at click position
-      let newValue = getValueFromPosition(position);
-      
-      // Round to step if needed
-      if (config.snapToSteps && state.step > 0) {
-        newValue = roundToStep(newValue);
-      }
-      
-      // Clamp value to min/max
-      newValue = clamp(newValue, state.min, state.max);
-      
-      if (config.range && state.secondValue !== null) {
-        // For range slider, determine which thumb to move (closest to click position)
-        const distToFirst = Math.abs(newValue - state.value);
-        const distToSecond = Math.abs(newValue - state.secondValue);
-        
-        isSecondThumb = distToSecond < distToFirst;
-        
-        // Update the appropriate value
-        if (isSecondThumb) {
-          state.secondValue = newValue;
-        } else {
-          state.value = newValue;
-        }
-      } else {
-        // Single thumb slider - just update the value
-        state.value = newValue;
-      }
-      
-      // Update UI immediately
-      updateUi();
-      
-      // Trigger events
-      triggerEvent(SLIDER_EVENTS.INPUT, e);
-      triggerEvent(SLIDER_EVENTS.CHANGE, e);
-    } catch (error) {
-      console.warn('Error handling track click:', error);
-    }
-    
-    // Set active elements
-    state.activeThumb = isSecondThumb ? secondThumb : thumb;
-    state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
-    
-    // Call thumb mouse down to start dragging
-    handleThumbMouseDown(e, isSecondThumb);
-  };
-  
-  const handleMouseMove = (e) => {
-    if (!state.dragging || !state.activeThumb) return;
-    
-    e.preventDefault();
-    
-    try {
-      // Get position
-      const position = e.type.includes('touch')
-        ? e.touches[0].clientX
-        : e.clientX;
-      
-      // Calculate new value
-      let newValue = getValueFromPosition(position);
-      
-      // Round to step if needed
-      if (config.snapToSteps && state.step > 0) {
-        newValue = roundToStep(newValue);
-      }
-      
-      // Clamp value to min/max
-      newValue = clamp(newValue, state.min, state.max);
-      
-      // Check if this is the second thumb
-      const isSecondThumb = state.activeThumb === secondThumb;
-      
-      // For range slider, ensure thumbs don't cross
-      if (config.range && state.secondValue !== null) {
-        if (isSecondThumb) {
-          // Don't allow second thumb to go below first thumb
-          if (newValue < state.value) {
-            state.secondValue = newValue;
-          } else {
-            // Thumbs are crossed, swap them
-            state.secondValue = state.value;
-            state.value = newValue;
-            
-            // Swap active thumb and bubble
-            state.activeThumb = thumb;
-            state.activeBubble = valueBubble;
-          }
-        } else {
-          // Don't allow first thumb to go above second thumb
-          if (newValue > state.secondValue) {
-            state.value = newValue;
-          } else {
-            // Thumbs are crossed, swap them
-            state.value = state.secondValue;
-            state.secondValue = newValue;
-            
-            // Swap active thumb and bubble
-            state.activeThumb = secondThumb;
-            state.activeBubble = secondValueBubble;
-          }
-        }
-      } else {
-        // Regular slider
-        state.value = newValue;
-      }
-      
-      // Update UI
-      updateUi();
-      
-      // Trigger input event (continuously while dragging)
-      triggerEvent(SLIDER_EVENTS.INPUT, e);
-    } catch (error) {
-      console.warn('Error during slider drag:', error);
-    }
-  };
-  
-  const handleMouseUp = (e) => {
-    if (!state.dragging) return;
-    
-    e.preventDefault();
-    
-    state.dragging = false;
-    
-    // Remove dragging class from component element
-    state.component.element.classList.remove(`${state.component.getClass('slider')}--dragging`);
-    
-    // Hide value bubble
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, false);
-    }
-    
-    // Remove global event listeners
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-    document.removeEventListener('touchmove', handleMouseMove);
-    document.removeEventListener('touchend', handleMouseUp);
-    
-    // Reset active elements
-    state.activeThumb = null;
-    state.activeBubble = null;
-    
-    try {
-      // Trigger change event (only when done dragging)
-      triggerEvent(SLIDER_EVENTS.CHANGE, e);
-      
-      // Trigger end event
-      triggerEvent(SLIDER_EVENTS.END, e);
-    } catch (error) {
-      console.warn('Error triggering events on mouse up:', error);
-    }
-  };
-  
-  // Return handlers
-  return {
-    handleThumbMouseDown,
-    handleTrackMouseDown,
-    handleMouseMove,
-    handleMouseUp
-  };
-};

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

@@ -1,112 +0,0 @@
-// src/components/slider/features/keyboard.ts
-import { SLIDER_EVENTS } from '../constants';
-
-/**
- * Add keyboard interaction handlers to slider component
- * 
- * @param state Slider state object
- * @param handlers Object containing handler methods
- * @returns Event handlers for keyboard interactions
- */
-export const createKeyboardHandlers = (state, handlers) => {
-  const {
-    secondThumb,
-    secondValueBubble,
-    valueBubble
-  } = state.component.structure;
-  
-  const {
-    showValueBubble,
-    updateUi,
-    triggerEvent
-  } = handlers;
-  
-  // Event handlers
-  const handleKeyDown = (e, isSecondThumb = false) => {
-    if (state.component.disabled && state.component.disabled.isDisabled()) return;
-    
-    const step = state.step || 1;
-    let newValue;
-    
-    // Determine which value to modify
-    if (isSecondThumb) {
-      newValue = state.secondValue;
-    } else {
-      newValue = state.value;
-    }
-    
-    switch (e.key) {
-      case 'ArrowRight':
-        e.preventDefault();
-        newValue = Math.min(newValue + step, state.max);
-        break;
-        
-      case 'ArrowLeft':
-        e.preventDefault();
-        newValue = Math.max(newValue - step, state.min);
-        break;
-        
-      case 'Home':
-        e.preventDefault();
-        newValue = state.min;
-        break;
-        
-      case 'End':
-        e.preventDefault();
-        newValue = state.max;
-        break;
-        
-      case 'PageUp':
-        e.preventDefault();
-        newValue = Math.min(newValue + (step * 10), state.max);
-        break;
-        
-      case 'PageDown':
-        e.preventDefault();
-        newValue = Math.max(newValue - (step * 10), state.min);
-        break;
-        
-      default:
-        return; // Exit if not a handled key
-    }
-    
-    // Update the value
-    if (isSecondThumb) {
-      state.secondValue = newValue;
-    } else {
-      state.value = newValue;
-    }
-    
-    // Update UI
-    updateUi();
-    
-    // Trigger events
-    triggerEvent(SLIDER_EVENTS.INPUT, e);
-    triggerEvent(SLIDER_EVENTS.CHANGE, e);
-  };
-  
-  const handleFocus = (e, isSecondThumb = false) => {
-    if (state.component.disabled && state.component.disabled.isDisabled()) return;
-    
-    // Show value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, true);
-    
-    // Trigger focus event
-    triggerEvent(SLIDER_EVENTS.FOCUS, e);
-  };
-  
-  const handleBlur = (e, isSecondThumb = false) => {
-    // Hide value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, false);
-    
-    // Trigger blur event
-    triggerEvent(SLIDER_EVENTS.BLUR, e);
-  };
-  
-  // Return handlers
-  return {
-    handleKeyDown,
-    handleFocus,
-    handleBlur
-  };
-};