mtrl 0.2.4 → 0.2.5

package/src/components/slider/config.ts

@@ -4,7 +4,7 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
 
 /**
  * Default configuration for the Slider component
@@ -17,9 +17,7 @@ export const defaultConfig: SliderConfig = {
   disabled: false,
   color: SLIDER_COLORS.PRIMARY,
   size: SLIDER_SIZES.MEDIUM,
-  orientation: SLIDER_ORIENTATIONS.HORIZONTAL,
   ticks: false,
-  tickLabels: false,
   showValue: true,
   snapToSteps: true,
   range: false,
@@ -49,7 +47,7 @@ export const getElementConfig = (config: SliderConfig) => {
       'aria-valuemin': config.min,
       'aria-valuemax': config.max,
       'aria-valuenow': config.value,
-      'aria-orientation': config.orientation
+      'aria-orientation': 'horizontal'
     },
     className: config.class
   });
@@ -61,85 +59,40 @@ export const getElementConfig = (config: SliderConfig) => {
  * @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
+  // Create API configuration using accessor pattern
   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)()
+      setValue: (value, triggerEvent) => comp.slider?.setValue(value, triggerEvent),
+      getValue: () => comp.slider?.getValue() ?? 0,
+      setSecondValue: (value, triggerEvent) => comp.slider?.setSecondValue(value, triggerEvent),
+      getSecondValue: () => comp.slider?.getSecondValue() ?? null,
+      setMin: (min) => comp.slider?.setMin(min),
+      getMin: () => comp.slider?.getMin() ?? 0,
+      setMax: (max) => comp.slider?.setMax(max),
+      getMax: () => comp.slider?.getMax() ?? 100,
+      setStep: (step) => comp.slider?.setStep(step),
+      getStep: () => comp.slider?.getStep() ?? 1,
+      regenerateTicks: () => comp.slider?.regenerateTicks?.()
     },
     disabled: {
-      enable: () => safeCall(comp, 'disabled.enable')(),
-      disable: () => safeCall(comp, 'disabled.disable')(),
-      isDisabled: () => safeGetter(comp, 'disabled.isDisabled', false)()
+      enable: () => comp.disabled?.enable?.(),
+      disable: () => comp.disabled?.disable?.(),
+      isDisabled: () => 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)
+      setColor: (color) => comp.appearance?.setColor?.(color),
+      getColor: () => comp.appearance?.getColor?.() ?? 'primary',
+      setSize: (size) => comp.appearance?.setSize?.(size),
+      getSize: () => comp.appearance?.getSize?.() ?? 'medium',
+      showTicks: (show) => comp.appearance?.showTicks?.(show),
+      showCurrentValue: (show) => 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;
-      }
+      on: (event, handler) => comp.on?.(event, handler),
+      off: (event, handler) => comp.off?.(event, handler)
     },
     lifecycle: {
-      destroy: () => safeCall(comp, 'lifecycle.destroy')()
+      destroy: () => comp.lifecycle?.destroy?.()
     }
   };
 };

package/src/components/slider/constants.ts

@@ -1,23 +1,27 @@
 // src/components/slider/constants.ts
 
+/**
+ * Available slider color variants
+ */
 export const SLIDER_COLORS = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
   ERROR: 'error'
-};
+} as const;
 
+/**
+ * Available slider size variants
+ */
 export const SLIDER_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
-};
-
-export const SLIDER_ORIENTATIONS = {
-  HORIZONTAL: 'horizontal',
-  VERTICAL: 'vertical'
-};
+} as const;
 
+/**
+ * Available slider events
+ */
 export const SLIDER_EVENTS = {
   CHANGE: 'change',
   INPUT: 'input',
@@ -25,4 +29,4 @@ export const SLIDER_EVENTS = {
   BLUR: 'blur',
   START: 'start',
   END: 'end'
-};
+} as const;

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

@@ -1,5 +1,5 @@
 // src/components/slider/features/appearance.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from '../constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
 import { SliderConfig } from '../types';
 
 /**
@@ -69,39 +69,6 @@ export const withAppearance = (config: SliderConfig) => component => {
         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
@@ -115,19 +82,6 @@ export const withAppearance = (config: SliderConfig) => component => {
         }
       },
       
-      /**
-       * 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

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

@@ -1,5 +1,5 @@
 // src/components/slider/features/interactions.ts
-import { SLIDER_EVENTS, SLIDER_ORIENTATIONS } from '../constants';
+import { SLIDER_EVENTS } from '../constants';
 import { SliderConfig, SliderEvent } from '../types';
 
 /**
@@ -44,6 +44,7 @@ export const createInteractionHandlers = (config: SliderConfig, state, 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;
@@ -56,6 +57,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     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);
@@ -89,15 +93,14 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     try {
       // Get track rect for calculating position
       const trackRect = track.getBoundingClientRect();
-      const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
       
       // Get position from mouse or touch event
       const position = e.type.includes('touch')
-        ? isVertical ? e.touches[0].clientY : e.touches[0].clientX
-        : isVertical ? e.clientY : e.clientX;
+        ? e.touches[0].clientX
+        : e.clientX;
       
       // Calculate value at click position
-      let newValue = getValueFromPosition(position, isVertical);
+      let newValue = getValueFromPosition(position);
       
       // Round to step if needed
       if (config.snapToSteps && state.step > 0) {
@@ -150,13 +153,12 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     try {
       // Get position
-      const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
       const position = e.type.includes('touch')
-        ? isVertical ? e.touches[0].clientY : e.touches[0].clientX
-        : isVertical ? e.clientY : e.clientX;
+        ? e.touches[0].clientX
+        : e.clientX;
       
       // Calculate new value
-      let newValue = getValueFromPosition(position, isVertical);
+      let newValue = getValueFromPosition(position);
       
       // Round to step if needed
       if (config.snapToSteps && state.step > 0) {
@@ -220,6 +222,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     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);

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

@@ -37,13 +37,11 @@ export const createKeyboardHandlers = (state, handlers) => {
     
     switch (e.key) {
       case 'ArrowRight':
-      case 'ArrowUp':
         e.preventDefault();
         newValue = Math.min(newValue + step, state.max);
         break;
         
       case 'ArrowLeft':
-      case 'ArrowDown':
         e.preventDefault();
         newValue = Math.max(newValue - step, state.min);
         break;