mtrl 0.2.8 → 0.3.0

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

@@ -7,20 +7,23 @@ import { SliderConfig, SliderEvent } from '../types';
  * 
  * @param config Slider configuration
  * @param state Slider state object
- * @param uiHelpers UI helper methods
+ * @param uiRenderer UI renderer interface from controller
  * @param eventHelpers Event helper methods
  * @returns Event handlers for all slider interactions
  */
-export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelpers) => {
+export const createHandlers = (config: SliderConfig, state, uiRenderer, eventHelpers) => {
   // Get required elements from structure (with fallbacks)
+  const components = state.component?.components || {};
+  
+  // Extract needed components
   const {
     container = null,
-    track = null, 
-    handle = null, 
+    handle = null,
+    track = null,
     valueBubble = null, 
     secondHandle = null, 
     secondValueBubble = null
-  } = state.component?.structure || {};
+  } = components;
   
   // Get required helper methods (with fallbacks)
   const {
@@ -28,8 +31,8 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     roundToStep = value => value,
     clamp = (value, min, max) => value,
     showValueBubble = () => {},
-    updateUi = () => {}
-  } = uiHelpers;
+    render = () => {}
+  } = uiRenderer;
   
   const { triggerEvent = () => ({ defaultPrevented: false }) } = eventHelpers;
   
@@ -127,7 +130,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     document.addEventListener('touchmove', handleMouseMove, { passive: false });
     document.addEventListener('touchend', handleMouseUp);
     
-    updateUi();
+    render();
     triggerEvent(SLIDER_EVENTS.START, e);
   };
   
@@ -169,9 +172,8 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
       }
       
       // Update UI and trigger events
-      updateUi();
+      render();
       triggerEvent(SLIDER_EVENTS.INPUT, e);
-      triggerEvent(SLIDER_EVENTS.CHANGE, e);
     } catch (error) {
       console.warn('Error handling track click:', error);
     }
@@ -244,7 +246,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
         state.value = newValue;
       }
       
-      updateUi();
+      render();
       triggerEvent(SLIDER_EVENTS.INPUT, e);
     } catch (error) {
       console.warn('Error during slider drag:', error);
@@ -274,7 +276,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     
     // Reset active handle and update UI
     state.activeHandle = null;
-    updateUi();
+    render();
     
     // Trigger events
     triggerEvent(SLIDER_EVENTS.CHANGE, e);
@@ -355,7 +357,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     }
     
     // Update UI and trigger events
-    updateUi();
+    render();
     triggerEvent(SLIDER_EVENTS.INPUT, e);
     triggerEvent(SLIDER_EVENTS.CHANGE, e);
   };
@@ -406,7 +408,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
    * Set up all event listeners
    */
   const setupEventListeners = () => {
-    if (!state.component || !state.component.structure) {
+    if (!state.component || !state.component.components) {
       console.warn('Cannot set up event listeners: missing component structure');
       return;
     }
@@ -436,7 +438,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
    * Clean up all event listeners
    */
   const cleanupEventListeners = () => {
-    if (!state.component || !state.component.structure) return;
+    if (!state.component || !state.component.components) return;
     
     // Clean up container listeners
     if (container) {
@@ -492,4 +494,4 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     hideAllBubbles,
     clearKeyboardFocus
   };
-};
+}

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

@@ -1,4 +1,5 @@
 // src/components/slider/features/index.ts
-export { withStructure } from './structure';
+// Export slider-specific features
+export { withRange } from './range';
 export { withStates } from './states';
-export { withSlider } from './slider';
+export { withController } from './controller';

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

@@ -0,0 +1,104 @@
+// src/components/slider/features/range.ts
+import { SliderConfig } from '../types';
+import { createElement } from '../../../core/dom/create';
+
+/**
+ * Enhances structure definition with range slider elements
+ * 
+ * @param config Slider configuration
+ * @returns Component enhancer that adds range slider to structure
+ */
+export const withRange = (config: SliderConfig) => component => {
+  // If not a range slider or missing structure definition, return unmodified
+  if (!config.range || !config.secondValue || !component.schema) {
+    return component;
+  }
+  
+  try {
+    // Calculate values for second handle
+    const min = config.min || 0;
+    const max = config.max || 100;
+    const secondValue = config.secondValue;
+    const secondValuePercent = ((secondValue - min) / (max - min)) * 100;
+    const formatter = config.valueFormatter || (val => val.toString());
+    const isDisabled = config.disabled === true;
+    const getClass = component.getClass;
+    
+    // Clone the structure definition (deep copy)
+    const schema = JSON.parse(JSON.stringify(component.schema));
+    
+    // Add range class to root element
+    const rootClasses = schema.element.options.className || [];
+    if (Array.isArray(rootClasses)) {
+      rootClasses.push(getClass('slider--range'));
+    } else {
+      schema.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
+    }
+    
+    // Add start track segment to track children
+    const trackChildren = schema.element.children.container.children.track.children;
+    trackChildren.startTrack = {
+      name: 'startTrack',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        className: getClass('slider-start-track'),
+        style: {
+          width: '0%'
+        }
+      }
+    };
+    
+    // Add second handle to container children
+    const containerChildren = schema.element.children.container.children;
+    containerChildren.secondHandle = {
+      name: 'secondHandle',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        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',
+          'data-value': String(secondValue),
+          'data-handle-index': '1'
+        },
+        style: {
+          left: `${secondValuePercent}%`
+        }
+      }
+    };
+    
+    // Add second value bubble to container children
+    containerChildren.secondValueBubble = {
+      name: 'secondValueBubble',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        className: getClass('slider-value'),
+        attrs: {
+          'aria-hidden': 'true',
+          'data-handle-index': '1'
+        },
+        text: formatter(secondValue),
+        style: {
+          left: `${secondValuePercent}%`
+        }
+      }
+    };
+    
+    // Return component with updated structure definition
+    return {
+      ...component,
+      schema
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with range functionality:', error);
+    return component;
+  }
+};

package/src/components/slider/schema.ts

@@ -0,0 +1,141 @@
+// 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 createStructure
+  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,42 +1,63 @@
 // src/components/slider/slider.ts
 import { pipe } from '../../core/compose/pipe';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withLifecycle, withTextLabel, withIcon } from '../../core/compose/features';
-import { withStructure, withSlider } from './features';
-import { withStates } from './features/states';
+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, getElementConfig, getApiConfig } from './config';
+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 with all required features
+    // Create the component by composing features in a specific order
     const component = pipe(
+      // Base component with event system
       createBase,
       withEvents(),
-      withElement(getElementConfig(baseConfig)),
+      withLayout(baseConfig),
       withIcon(baseConfig),
-      withTextLabel(baseConfig),
-      withStructure(baseConfig),
+      withLabel(baseConfig),
+      withRange(baseConfig),
+      
+      // Now create the actual DOM elements from the complete structure
+      withDom(),
+      
+      // Add state management and behavior
       withStates(baseConfig),
-      withSlider(baseConfig),
+      withController(baseConfig),
       withLifecycle()
     )(baseConfig);
     
-    // Generate the API configuration
+    // Generate the API configuration based on the enhanced component
     const apiOptions = getApiConfig(component);
     
-    // Apply the API layer
+    // Apply the public API layer
     const slider = withAPI(apiOptions)(component);
 
-    // Register event handlers from config
+    // 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') {

package/src/components/switch/api.ts

@@ -48,6 +48,22 @@ export const withAPI = ({ disabled, lifecycle, checkable }: ApiOptions) =>
     getLabel(): string {
       return component.text?.getText() || '';
     },
+    
+    // Supporting text management (if present)
+    supportingTextElement: component.supportingTextElement || null,
+    setSupportingText(text: string, isError?: boolean): SwitchComponent {
+      if (component.setSupportingText) {
+        component.setSupportingText(text, isError);
+      }
+      return this;
+    },
+    
+    removeSupportingText(): SwitchComponent {
+      if (component.removeSupportingText) {
+        component.removeSupportingText();
+      }
+      return this;
+    },
 
     // Event handling
     on(event: string, handler: Function): SwitchComponent {

package/src/components/switch/config.ts

@@ -9,9 +9,7 @@ import { SwitchConfig, BaseComponent, ApiOptions } from './types';
 /**
  * Default configuration for the Switch component
  */
-export const defaultConfig: SwitchConfig = {
-  labelPosition: 'end'
-};
+export const defaultConfig: SwitchConfig = {};
 
 /**
  * Creates the base configuration for Switch component
@@ -34,21 +32,6 @@ export const getElementConfig = (config: SwitchConfig) =>
     interactive: true
   });
 
-/**
- * Applies label position class to the component
- * @param {SwitchConfig} config - Component configuration
- */
-export const withLabelPosition = (config: SwitchConfig) => (component: BaseComponent): BaseComponent => {
-  if (!config.label) return component;
-
-  const position = config.labelPosition || 'end';
-  const positionClass = `${config.prefix}-switch--label-${position}`;
-
-  component.element.classList.add(positionClass);
-
-  return component;
-};
-
 /**
  * Creates API configuration for the Switch component
  * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features

package/src/components/switch/features.ts

@@ -0,0 +1,198 @@
+// src/components/switch/features.ts
+import { BaseComponent, ElementComponent } from '../../core/compose/component';
+
+/**
+ * Configuration for supporting text feature
+ */
+export interface SupportingTextConfig {
+  /**
+   * Supporting text content
+   */
+  supportingText?: string;
+  
+  /**
+   * Whether supporting text indicates an error
+   */
+  error?: boolean;
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with supporting text capabilities
+ */
+export interface SupportingTextComponent extends BaseComponent {
+  /**
+   * Supporting text element
+   */
+  supportingTextElement: HTMLElement | null;
+  
+  /**
+   * Sets supporting text content
+   * @param text - Text content
+   * @param isError - Whether text represents an error
+   * @returns Component instance for chaining
+   */
+  setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
+  
+  /**
+   * Removes supporting text
+   * @returns Component instance for chaining
+   */
+  removeSupportingText: () => SupportingTextComponent;
+}
+
+/**
+ * Helper to ensure the switch has the proper container/content structure
+ * @param component - The component to enhance
+ * @param prefix - CSS class prefix
+ * @param componentName - Component name
+ * @returns The container and content elements
+ */
+const ensureSwitchStructure = (
+  component: ElementComponent, 
+  prefix: string, 
+  componentName: string
+) => {
+  const PREFIX = prefix || 'mtrl';
+  const COMPONENT = componentName || 'switch';
+  
+  // Create or find container
+  let container = component.element.querySelector(`.${PREFIX}-${COMPONENT}-container`);
+  if (!container) {
+    container = document.createElement('div');
+    container.className = `${PREFIX}-${COMPONENT}-container`;
+    
+    // Find input and track to move them to container
+    const input = component.element.querySelector(`.${PREFIX}-${COMPONENT}-input`);
+    const track = component.element.querySelector(`.${PREFIX}-${COMPONENT}-track`);
+    
+    // Gather all elements except container
+    const elementsToMove = [];
+    if (input) elementsToMove.push(input);
+    if (track) elementsToMove.push(track);
+    
+    // Create content wrapper
+    const contentWrapper = document.createElement('div');
+    contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
+    
+    // Find label and move to content
+    const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
+    if (label) {
+      contentWrapper.appendChild(label);
+    }
+    
+    // Add content wrapper to container first
+    container.appendChild(contentWrapper);
+    
+    // Add other elements to container
+    elementsToMove.forEach(el => container.appendChild(el));
+    
+    // Add container to component
+    component.element.appendChild(container);
+    
+    return { container, contentWrapper };
+  }
+  
+  // Container exists, find or create content wrapper
+  let contentWrapper = component.element.querySelector(`.${PREFIX}-${COMPONENT}-content`);
+  if (!contentWrapper) {
+    contentWrapper = document.createElement('div');
+    contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
+    
+    // Find label to move to content
+    const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
+    if (label) {
+      contentWrapper.appendChild(label);
+    }
+    
+    // Insert content wrapper at beginning of container
+    container.insertBefore(contentWrapper, container.firstChild);
+  }
+  
+  return { container, contentWrapper };
+};
+
+/**
+ * Creates and manages supporting text for a component
+ * @param config - Configuration object with supporting text settings
+ * @returns Function that enhances a component with supporting text functionality
+ */
+export const withSupportingText = <T extends SupportingTextConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & SupportingTextComponent => {
+    const PREFIX = config.prefix || 'mtrl';
+    const COMPONENT = config.componentName || 'switch';
+    
+    // Ensure we have the proper container/content structure
+    const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
+    
+    // Create supporting text element if needed
+    let supportingElement = null;
+    if (config.supportingText) {
+      supportingElement = document.createElement('div');
+      supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
+      supportingElement.textContent = config.supportingText;
+      
+      if (config.error) {
+        supportingElement.classList.add(`${PREFIX}-${COMPONENT}-helper--error`);
+        component.element.classList.add(`${PREFIX}-${COMPONENT}--error`);
+      }
+      
+      // Add supporting text to the content wrapper
+      contentWrapper.appendChild(supportingElement);
+    }
+    
+    // Add lifecycle integration if available
+    if ('lifecycle' in component && component.lifecycle?.destroy && supportingElement) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        if (supportingElement) supportingElement.remove();
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+
+    return {
+      ...component,
+      supportingTextElement: supportingElement,
+      
+      setSupportingText(text: string, isError = false) {
+        const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
+        let supportingElement = this.supportingTextElement;
+        
+        if (!supportingElement) {
+          // Create if it doesn't exist
+          supportingElement = document.createElement('div');
+          supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
+          contentWrapper.appendChild(supportingElement);
+          this.supportingTextElement = supportingElement;
+        }
+        
+        supportingElement.textContent = text;
+        
+        // Handle error state
+        supportingElement.classList.toggle(`${PREFIX}-${COMPONENT}-helper--error`, isError);
+        component.element.classList.toggle(`${PREFIX}-${COMPONENT}--error`, isError);
+        
+        return this;
+      },
+      
+      removeSupportingText() {
+        if (this.supportingTextElement && this.supportingTextElement.parentNode) {
+          this.supportingTextElement.remove();
+          this.supportingTextElement = null;
+          component.element.classList.remove(`${PREFIX}-${COMPONENT}--error`);
+        }
+        return this;
+      }
+    };
+  };