mtrl 0.2.2 → 0.2.3

package/src/components/slider/api.ts

@@ -0,0 +1,336 @@
+// src/components/slider/api.ts
+import { SliderComponent, SliderEvent } from './types';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS, SLIDER_EVENTS } from './constants';
+
+interface ApiOptions {
+  slider: {
+    setValue: (value: number, triggerEvent?: boolean) => any;
+    getValue: () => number;
+    setSecondValue: (value: number, triggerEvent?: boolean) => any;
+    getSecondValue: () => number | null;
+    setMin: (min: number) => any;
+    getMin: () => number;
+    setMax: (max: number) => any;
+    getMax: () => number;
+    setStep: (step: number) => any;
+    getStep: () => number;
+    regenerateTicks: () => any;
+  };
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  appearance: {
+    setColor: (color: string) => void;
+    getColor: () => string;
+    setSize: (size: string) => void;
+    getSize: () => string;
+    setOrientation: (orientation: string) => void;
+    getOrientation: () => string;
+    showTicks: (show: boolean) => void;
+    showTickLabels: (show: boolean | string[]) => void;
+    showCurrentValue: (show: boolean) => void;
+  };
+  events: {
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+}
+
+/**
+ * Enhances a slider component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Slider component
+ */
+export const withAPI = (options: ApiOptions) => 
+  (component: ComponentWithElements): SliderComponent => {
+    // Make sure options is defined with fallbacks
+    const safeOptions: ApiOptions = options || {
+      slider: {
+        setValue: () => {},
+        getValue: () => 0,
+        setSecondValue: () => {},
+        getSecondValue: () => null,
+        setMin: () => {},
+        getMin: () => 0,
+        setMax: () => {},
+        getMax: () => 100,
+        setStep: () => {},
+        getStep: () => 1,
+        regenerateTicks: () => {}
+      },
+      disabled: {
+        enable: () => {},
+        disable: () => {},
+        isDisabled: () => false
+      },
+      appearance: {
+        setColor: () => {},
+        getColor: () => 'primary',
+        setSize: () => {},
+        getSize: () => 'medium',
+        setOrientation: () => {},
+        getOrientation: () => 'horizontal',
+        showTicks: () => {},
+        showTickLabels: () => {},
+        showCurrentValue: () => {}
+      },
+      events: {
+        on: () => {},
+        off: () => {}
+      },
+      lifecycle: {
+        destroy: () => {}
+      }
+    };
+    
+    return {
+      ...component as any,
+      
+      /**
+       * Sets slider value
+       * @param {number} value - New slider value
+       * @param {boolean} [triggerEvent=true] - Whether to trigger change event
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setValue(value: number, triggerEvent: boolean = true) {
+        safeOptions.slider.setValue(value, triggerEvent);
+        return this;
+      },
+      
+      /**
+       * Gets slider value
+       * @returns {number} Current slider value
+       */
+      getValue() {
+        return safeOptions.slider.getValue();
+      },
+      
+      /**
+       * Sets secondary slider value (for range slider)
+       * @param {number} value - New secondary value
+       * @param {boolean} [triggerEvent=true] - Whether to trigger change event
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setSecondValue(value: number, triggerEvent: boolean = true) {
+        safeOptions.slider.setSecondValue(value, triggerEvent);
+        return this;
+      },
+      
+      /**
+       * Gets secondary slider value
+       * @returns {number|null} Current secondary value or null
+       */
+      getSecondValue() {
+        return safeOptions.slider.getSecondValue();
+      },
+      
+      /**
+       * Sets slider minimum value
+       * @param {number} min - New minimum value
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setMin(min: number) {
+        safeOptions.slider.setMin(min);
+        return this;
+      },
+      
+      /**
+       * Gets slider minimum value
+       * @returns {number} Current minimum value
+       */
+      getMin() {
+        return safeOptions.slider.getMin();
+      },
+      
+      /**
+       * Sets slider maximum value
+       * @param {number} max - New maximum value
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setMax(max: number) {
+        safeOptions.slider.setMax(max);
+        return this;
+      },
+      
+      /**
+       * Gets slider maximum value
+       * @returns {number} Current maximum value
+       */
+      getMax() {
+        return safeOptions.slider.getMax();
+      },
+      
+      /**
+       * Sets slider step size
+       * @param {number} step - New step size
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setStep(step: number) {
+        safeOptions.slider.setStep(step);
+        return this;
+      },
+      
+      /**
+       * Gets slider step size
+       * @returns {number} Current step size
+       */
+      getStep() {
+        return safeOptions.slider.getStep();
+      },
+      
+      /**
+       * Enables the slider
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      enable() {
+        safeOptions.disabled.enable();
+        return this;
+      },
+      
+      /**
+       * Disables the slider
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      disable() {
+        safeOptions.disabled.disable();
+        return this;
+      },
+      
+      /**
+       * Checks if slider is disabled
+       * @returns {boolean} True if slider is disabled
+       */
+      isDisabled() {
+        return safeOptions.disabled.isDisabled();
+      },
+      
+      /**
+       * Sets slider color
+       * @param {string} color - Color variant
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setColor(color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) {
+        safeOptions.appearance.setColor(color);
+        return this;
+      },
+      
+      /**
+       * Gets slider color
+       * @returns {string} Current color name
+       */
+      getColor() {
+        return safeOptions.appearance.getColor();
+      },
+      
+      /**
+       * Sets slider size
+       * @param {string} size - Size variant
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setSize(size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) {
+        safeOptions.appearance.setSize(size);
+        return this;
+      },
+      
+      /**
+       * Gets slider size
+       * @returns {string} Current size name
+       */
+      getSize() {
+        return safeOptions.appearance.getSize();
+      },
+      
+      /**
+       * Sets slider orientation
+       * @param {string} orientation - Orientation variant
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      setOrientation(orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) {
+        safeOptions.appearance.setOrientation(orientation);
+        return this;
+      },
+      
+      /**
+       * Gets slider orientation
+       * @returns {string} Current orientation name
+       */
+      getOrientation() {
+        return safeOptions.appearance.getOrientation();
+      },
+      
+      /**
+       * Shows or hides tick marks
+       * @param {boolean} show - Whether to show ticks
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      showTicks(show: boolean) {
+        safeOptions.appearance.showTicks(show);
+        return this;
+      },
+      
+      /**
+       * Shows or hides tick labels
+       * @param {boolean|string[]} show - Whether to show labels or array of label texts
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      showTickLabels(show: boolean | string[]) {
+        safeOptions.appearance.showTickLabels(show);
+        return this;
+      },
+      
+      /**
+       * Shows or hides current value while dragging
+       * @param {boolean} show - Whether to show value bubble
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      showCurrentValue(show: boolean) {
+        safeOptions.appearance.showCurrentValue(show);
+        return this;
+      },
+      
+      /**
+       * Adds event listener
+       * @param {string} event - Event name
+       * @param {Function} handler - Event handler
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      on(event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) {
+        if (safeOptions.events && typeof safeOptions.events.on === 'function') {
+          safeOptions.events.on(event, handler);
+        }
+        return this;
+      },
+      
+      /**
+       * Removes event listener
+       * @param {string} event - Event name
+       * @param {Function} handler - Event handler
+       * @returns {SliderComponent} Slider component instance for chaining
+       */
+      off(event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) {
+        if (safeOptions.events && typeof safeOptions.events.off === 'function') {
+          safeOptions.events.off(event, handler);
+        }
+        return this;
+      },
+      
+      /**
+       * Destroys the slider component and cleans up resources
+       */
+      destroy() {
+        if (safeOptions.lifecycle && typeof safeOptions.lifecycle.destroy === 'function') {
+          safeOptions.lifecycle.destroy();
+        }
+      }
+    };
+  };

package/src/components/slider/config.ts

@@ -0,0 +1,145 @@
+// src/components/slider/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { SliderConfig } from './types';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from './constants';
+
+/**
+ * Default configuration for the Slider component
+ */
+export const defaultConfig: SliderConfig = {
+  min: 0,
+  max: 100,
+  value: 0,
+  step: 1,
+  disabled: false,
+  color: SLIDER_COLORS.PRIMARY,
+  size: SLIDER_SIZES.MEDIUM,
+  orientation: SLIDER_ORIENTATIONS.HORIZONTAL,
+  ticks: false,
+  tickLabels: false,
+  showValue: true,
+  snapToSteps: true,
+  range: false,
+  valueFormatter: (value: number) => value.toString()
+};
+
+/**
+ * Creates the base configuration for Slider component
+ * @param {SliderConfig} config - User provided configuration
+ * @returns {SliderConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => 
+  createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
+
+/**
+ * Generates element configuration for the Slider component
+ * @param {SliderConfig} config - Slider configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: SliderConfig) => {
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      'role': 'slider',
+      'tabindex': config.disabled ? -1 : 0,
+      'aria-disabled': config.disabled === true ? true : false,
+      'aria-valuemin': config.min,
+      'aria-valuemax': config.max,
+      'aria-valuenow': config.value,
+      'aria-orientation': config.orientation
+    },
+    className: config.class
+  });
+};
+
+/**
+ * Creates API configuration for the Slider component
+ * @param {Object} comp - Component with slider features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => {
+  // Create safe accessor functions to avoid undefined errors
+  const safeCall = (obj, path, fallback = () => {}) => {
+    try {
+      const parts = path.split('.');
+      let current = obj;
+      
+      for (const part of parts) {
+        if (current === undefined || current === null) return fallback;
+        current = current[part];
+      }
+      
+      return typeof current === 'function' ? current : fallback;
+    } catch {
+      return fallback;
+    }
+  };
+
+  const safeGetter = (obj, path, defaultValue = null) => {
+    try {
+      const parts = path.split('.');
+      let current = obj;
+      
+      for (const part of parts) {
+        if (current === undefined || current === null) return defaultValue;
+        current = current[part];
+      }
+      
+      return current === undefined ? defaultValue : current;
+    } catch {
+      return defaultValue;
+    }
+  };
+
+  // Create API configuration using safe accessors
+  return {
+    slider: {
+      setValue: (value, triggerEvent) => safeCall(comp, 'slider.setValue')(value, triggerEvent),
+      getValue: () => safeGetter(comp, 'slider.getValue', 0)(),
+      setSecondValue: (value, triggerEvent) => safeCall(comp, 'slider.setSecondValue')(value, triggerEvent),
+      getSecondValue: () => safeGetter(comp, 'slider.getSecondValue', null)(),
+      setMin: (min) => safeCall(comp, 'slider.setMin')(min),
+      getMin: () => safeGetter(comp, 'slider.getMin', 0)(),
+      setMax: (max) => safeCall(comp, 'slider.setMax')(max),
+      getMax: () => safeGetter(comp, 'slider.getMax', 100)(),
+      setStep: (step) => safeCall(comp, 'slider.setStep')(step),
+      getStep: () => safeGetter(comp, 'slider.getStep', 1)()
+    },
+    disabled: {
+      enable: () => safeCall(comp, 'disabled.enable')(),
+      disable: () => safeCall(comp, 'disabled.disable')(),
+      isDisabled: () => safeGetter(comp, 'disabled.isDisabled', false)()
+    },
+    appearance: {
+      setColor: (color) => safeCall(comp, 'appearance.setColor')(color),
+      getColor: () => safeGetter(comp, 'appearance.getColor', 'primary')(),
+      setSize: (size) => safeCall(comp, 'appearance.setSize')(size),
+      getSize: () => safeGetter(comp, 'appearance.getSize', 'medium')(),
+      setOrientation: (orientation) => safeCall(comp, 'appearance.setOrientation')(orientation),
+      getOrientation: () => safeGetter(comp, 'appearance.getOrientation', 'horizontal')(),
+      showTicks: (show) => safeCall(comp, 'appearance.showTicks')(show),
+      showTickLabels: (show) => safeCall(comp, 'appearance.showTickLabels')(show),
+      showCurrentValue: (show) => safeCall(comp, 'appearance.showCurrentValue')(show)
+    },
+    events: {
+      on: (event, handler) => {
+        if (comp && comp.events && typeof comp.events.on === 'function') {
+          return comp.events.on(event, handler);
+        }
+        return undefined;
+      },
+      off: (event, handler) => {
+        if (comp && comp.events && typeof comp.events.off === 'function') {
+          return comp.events.off(event, handler);
+        }
+        return undefined;
+      }
+    },
+    lifecycle: {
+      destroy: () => safeCall(comp, 'lifecycle.destroy')()
+    }
+  };
+};

package/src/components/slider/constants.ts

@@ -0,0 +1,28 @@
+// src/components/slider/constants.ts
+
+export const SLIDER_COLORS = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  ERROR: 'error'
+};
+
+export const SLIDER_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+
+export const SLIDER_ORIENTATIONS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+
+export const SLIDER_EVENTS = {
+  CHANGE: 'change',
+  INPUT: 'input',
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  START: 'start',
+  END: 'end'
+};

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

@@ -0,0 +1,140 @@
+// src/components/slider/features/appearance.ts
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } 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;
+      },
+      
+      /**
+       * Sets slider orientation
+       * @param orientation Orientation variant
+       */
+      setOrientation(orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) {
+        // Clear existing orientation class
+        component.element.classList.remove(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`);
+        
+        // Add orientation class if vertical
+        if (orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+          component.element.classList.add(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`);
+        }
+        
+        // Update ARIA attribute
+        component.element.setAttribute('aria-orientation', orientation);
+        
+        // Update visual elements
+        if (component.slider) {
+          const eventData = { slider: component, value: component.slider.getValue() };
+          component.events.trigger('change', eventData);
+        }
+      },
+      
+      /**
+       * Gets slider orientation
+       * @returns Current orientation name
+       */
+      getOrientation() {
+        return component.element.classList.contains(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`)
+          ? SLIDER_ORIENTATIONS.VERTICAL
+          : SLIDER_ORIENTATIONS.HORIZONTAL;
+      },
+      
+      /**
+       * 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 tick labels
+       * @param show Whether to show labels or array of label texts
+       */
+      showTickLabels(show: boolean | string[]) {
+        config.tickLabels = 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

@@ -0,0 +1,43 @@
+// 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`);
+      }
+    }
+  };
+};