mtrl 0.2.8 → 0.2.9

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,7 +172,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);
     } catch (error) {
@@ -244,7 +247,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 +277,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 +358,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 +409,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 +439,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 +495,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.structureDefinition) {
+    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 structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    
+    // Add range class to root element
+    const rootClasses = structureDefinition.element.options.className || [];
+    if (Array.isArray(rootClasses)) {
+      rootClasses.push(getClass('slider--range'));
+    } else {
+      structureDefinition.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
+    }
+    
+    // Add start track segment to track children
+    const trackChildren = structureDefinition.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 = structureDefinition.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,
+      structureDefinition
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with range functionality:', error);
+    return component;
+  }
+};

package/src/components/slider/slider.ts

@@ -1,42 +1,62 @@
 // 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 { withStructure, 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)),
-      withIcon(baseConfig),
-      withTextLabel(baseConfig),
       withStructure(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),
-      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/slider/structure.ts

@@ -0,0 +1,152 @@
+// 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 definition object
+ */
+export function createSliderDefinition(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: {
+        tag: 'div',
+        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: {
+            tag: 'div',
+            className: getClass('slider-container')
+          },
+          children: {
+            // Track with segments
+            track: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-track')
+              },
+              children: {
+                activeTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-active-track'),
+                    style: {
+                      width: `${valuePercent}%`
+                    }
+                  }
+                },
+                startTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-start-track'),
+                    style: {
+                      display: 'none', // Initially hidden for single slider
+                      width: '0%'
+                    }
+                  }
+                },
+                remainingTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-remaining-track'),
+                    style: {
+                      width: `${100 - valuePercent}%`
+                    }
+                  }
+                }
+              }
+            },
+            
+            // Ticks container
+            ticksContainer: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-ticks-container')
+              }
+            },
+            
+            // Dots for ends
+            startDot: {
+              options: {
+                tag: 'div',
+                className: [
+                  getClass('slider-dot'),
+                  getClass('slider-dot--start')
+                ]
+              }
+            },
+            endDot: {
+              options: {
+                tag: 'div',
+                className: [
+                  getClass('slider-dot'),
+                  getClass('slider-dot--end')
+                ]
+              }
+            },
+            
+            // Main handle
+            handle: {
+              options: {
+                tag: 'div',
+                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: {
+                tag: 'div',
+                className: getClass('slider-value'),
+                attrs: {
+                  'aria-hidden': 'true',
+                  'data-handle-index': '0'
+                },
+                text: formatter(value),
+                style: {
+                  left: `${valuePercent}%`
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

package/src/components/textfield/api.ts

@@ -1,6 +1,11 @@
 // src/components/textfield/api.ts
 import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
 
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
 /**
  * Enhances textfield component with API methods
  * @param {ApiOptions} options - API configuration
@@ -43,6 +48,54 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     getLabel(): string {
       return component.label?.getText() || '';
     },
+    
+    // Leading icon management (if present)
+    leadingIcon: component.leadingIcon || null,
+    setLeadingIcon(html: string): TextfieldComponent {
+      if (component.setLeadingIcon) {
+        component.setLeadingIcon(html);
+      }
+      return this;
+    },
+    
+    removeLeadingIcon(): TextfieldComponent {
+      if (component.removeLeadingIcon) {
+        component.removeLeadingIcon();
+      }
+      return this;
+    },
+    
+    // Trailing icon management (if present)
+    trailingIcon: component.trailingIcon || null,
+    setTrailingIcon(html: string): TextfieldComponent {
+      if (component.setTrailingIcon) {
+        component.setTrailingIcon(html);
+      }
+      return this;
+    },
+    
+    removeTrailingIcon(): TextfieldComponent {
+      if (component.removeTrailingIcon) {
+        component.removeTrailingIcon();
+      }
+      return this;
+    },
+    
+    // Supporting text management (if present)
+    supportingTextElement: component.supportingTextElement || null,
+    setSupportingText(text: string, isError?: boolean): TextfieldComponent {
+      if (component.setSupportingText) {
+        component.setSupportingText(text, isError);
+      }
+      return this;
+    },
+    
+    removeSupportingText(): TextfieldComponent {
+      if (component.removeSupportingText) {
+        component.removeSupportingText();
+      }
+      return this;
+    },
 
     // Event handling
     on(event: string, handler: Function): TextfieldComponent {