mtrl 0.2.6 → 0.2.7

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

@@ -1,94 +0,0 @@
-// src/components/slider/features/appearance.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
-import { SliderConfig } from '../types';
-
-/**
- * Add appearance management features to slider component
- * @param config Slider configuration
- * @returns Component enhancer with appearance features
- */
-export const withAppearance = (config: SliderConfig) => component => {
-  return {
-    ...component,
-    appearance: {
-      /**
-       * Sets slider color
-       * @param color Color variant
-       */
-      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}`);
-        }
-      },
-      
-      /**
-       * Gets slider color
-       * @returns Current color name
-       */
-      getColor() {
-        // Find which color class is active
-        const colorClass = Object.values(SLIDER_COLORS).find(colorName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${colorName}`)
-        );
-        
-        return colorClass || SLIDER_COLORS.PRIMARY;
-      },
-      
-      /**
-       * Sets slider size
-       * @param size Size variant
-       */
-      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}`);
-        }
-      },
-      
-      /**
-       * Gets slider size
-       * @returns Current size name
-       */
-      getSize() {
-        // Find which size class is active
-        const sizeClass = Object.values(SLIDER_SIZES).find(sizeName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${sizeName}`)
-        );
-        
-        return sizeClass || SLIDER_SIZES.MEDIUM;
-      },
-      
-      /**
-       * Shows or hides tick marks
-       * @param show Whether to show ticks
-       */
-      showTicks(show: boolean) {
-        config.ticks = show;
-        
-        // Regenerate ticks if slider is initialized
-        if (component.slider) {
-          component.slider.regenerateTicks();
-        }
-      },
-      
-      /**
-       * Shows or hides current value bubble while dragging
-       * @param show Whether to show value bubble
-       */
-      showCurrentValue(show: boolean) {
-        config.showValue = show;
-      }
-    }
-  };
-};

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

@@ -1,68 +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;
-  
-  // Apply initial disabled state if needed
-  if (isDisabled && component.structure) {
-    setTimeout(() => {
-      disableComponent();
-    }, 0);
-  }
-  
-  function disableComponent() {
-    component.element.classList.add(`${component.getClass('slider')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'true');
-    
-    // Ensure thumbs cannot receive focus when disabled
-    if (component.structure.thumb) {
-      component.structure.thumb.tabIndex = -1;
-      component.structure.thumb.setAttribute('aria-disabled', 'true');
-    }
-    
-    if (config.range && component.structure.secondThumb) {
-      component.structure.secondThumb.tabIndex = -1;
-      component.structure.secondThumb.setAttribute('aria-disabled', 'true');
-    }
-  }
-  
-  function enableComponent() {
-    component.element.classList.remove(`${component.getClass('slider')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'false');
-    
-    // Re-enable focus on thumbs
-    if (component.structure.thumb) {
-      component.structure.thumb.tabIndex = 0;
-      component.structure.thumb.setAttribute('aria-disabled', 'false');
-    }
-    
-    if (config.range && component.structure.secondThumb) {
-      component.structure.secondThumb.tabIndex = 0;
-      component.structure.secondThumb.setAttribute('aria-disabled', 'false');
-    }
-  }
-  
-  return {
-    ...component,
-    disabled: {
-      enable() {
-        enableComponent();
-      },
-      
-      disable() {
-        disableComponent();
-      },
-      
-      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
-  };
-};