mtrl 0.2.6 → 0.2.7

package/src/components/slider/api.ts

@@ -32,6 +32,14 @@ interface ApiOptions {
     showTicks: (show: boolean) => void;
     showCurrentValue: (show: boolean) => void;
   };
+  text: {
+    setText: (text: string) => void;
+    getText: () => string;
+  };
+  icon: {
+    setIcon: (html: string) => void;
+    getIcon: () => string;
+  };
   events: {
     on: (event: string, handler: Function) => void;
     off: (event: string, handler: Function) => void;
@@ -42,230 +50,143 @@ interface ApiOptions {
 }
 
 /**
- * Component with elements
- */
-interface ComponentWithElements {
-  element: HTMLElement;
-}
-
-/**
- * Enhances a slider component with API methods
+ * Enhances a slider component with a streamlined API
  * @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 => {
+  (component: { element: HTMLElement }): SliderComponent => {
     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
-       */
+      // Element access
+      element: component.element,
+      
+      // Value management
       setValue(value: number, triggerEvent: boolean = true) {
         options.slider.setValue(value, triggerEvent);
         return this;
       },
       
-      /**
-       * Gets slider value
-       * @returns {number} Current slider value
-       */
       getValue() {
         return options.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) {
         options.slider.setSecondValue(value, triggerEvent);
         return this;
       },
       
-      /**
-       * Gets secondary slider value
-       * @returns {number|null} Current secondary value or null
-       */
       getSecondValue() {
         return options.slider.getSecondValue();
       },
       
-      /**
-       * Sets slider minimum value
-       * @param {number} min - New minimum value
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
+      // Range management
       setMin(min: number) {
         options.slider.setMin(min);
         return this;
       },
       
-      /**
-       * Gets slider minimum value
-       * @returns {number} Current minimum value
-       */
       getMin() {
         return options.slider.getMin();
       },
       
-      /**
-       * Sets slider maximum value
-       * @param {number} max - New maximum value
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
       setMax(max: number) {
         options.slider.setMax(max);
         return this;
       },
       
-      /**
-       * Gets slider maximum value
-       * @returns {number} Current maximum value
-       */
       getMax() {
         return options.slider.getMax();
       },
       
-      /**
-       * Sets slider step size
-       * @param {number} step - New step size
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
       setStep(step: number) {
         options.slider.setStep(step);
         return this;
       },
       
-      /**
-       * Gets slider step size
-       * @returns {number} Current step size
-       */
       getStep() {
         return options.slider.getStep();
       },
       
-      /**
-       * Enables the slider
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
+      // State management
       enable() {
         options.disabled.enable();
         return this;
       },
       
-      /**
-       * Disables the slider
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
       disable() {
         options.disabled.disable();
         return this;
       },
       
-      /**
-       * Checks if slider is disabled
-       * @returns {boolean} True if slider is disabled
-       */
       isDisabled() {
         return options.disabled.isDisabled();
       },
       
-      /**
-       * Sets slider color
-       * @param {string} color - Color variant
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
+      // Appearance management
       setColor(color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) {
         options.appearance.setColor(color);
         return this;
       },
       
-      /**
-       * Gets slider color
-       * @returns {string} Current color name
-       */
       getColor() {
         return options.appearance.getColor();
       },
       
-      /**
-       * Sets slider size
-       * @param {string} size - Size variant
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
       setSize(size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) {
         options.appearance.setSize(size);
         return this;
       },
       
-      /**
-       * Gets slider size
-       * @returns {string} Current size name
-       */
       getSize() {
         return options.appearance.getSize();
       },
       
-      /**
-       * Shows or hides tick marks
-       * @param {boolean} show - Whether to show ticks
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
       showTicks(show: boolean) {
         options.appearance.showTicks(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) {
         options.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
-       */
+      // Label and icon management
+      setLabel(text: string) {
+        if (options.text?.setText) options.text.setText(text);
+        return this;
+      },
+      
+      getLabel() {
+        return options.text?.getText ? options.text.getText() : '';
+      },
+      
+      setIcon(iconHtml: string) {
+        if (options.icon?.setIcon) options.icon.setIcon(iconHtml);
+        return this;
+      },
+      
+      getIcon() {
+        return options.icon?.getIcon ? options.icon.getIcon() : '';
+      },
+      
+      // Event management
       on(event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
-        if (options.events && typeof options.events.on === 'function') {
-          options.events.on(event, handler);
-        }
+        if (options.events?.on) options.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 | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
-        if (options.events && typeof options.events.off === 'function') {
-          options.events.off(event, handler);
-        }
+        if (options.events?.off) options.events.off(event, handler);
         return this;
       },
       
-      /**
-       * Destroys the slider component and cleans up resources
-       */
+      // Lifecycle management
       destroy() {
-        if (options.lifecycle && typeof options.lifecycle.destroy === 'function') {
-          options.lifecycle.destroy();
-        }
+        if (options.lifecycle?.destroy) options.lifecycle.destroy();
       }
     };
   };

package/src/components/slider/config.ts

@@ -21,7 +21,9 @@ export const defaultConfig: SliderConfig = {
   showValue: true,
   snapToSteps: true,
   range: false,
-  valueFormatter: (value: number) => value.toString()
+  iconPosition: 'start',
+  labelPosition: 'start',
+  valueFormatter: (value) => value.toString()
 };
 
 /**
@@ -37,60 +39,62 @@ export const createBaseConfig = (config: SliderConfig = {}): SliderConfig =>
  * @param {SliderConfig} config - Slider configuration
  * @returns {Object} Element configuration object for withElement
  */
-export const getElementConfig = (config: SliderConfig) => {
-  return createElementConfig(config, {
+export const getElementConfig = (config: SliderConfig) => 
+  createElementConfig(config, {
     tag: 'div',
     attrs: {
-      // Accessibility improvement: Container is not focusable; only thumbs are
-      'tabindex': '-1',
-      'aria-disabled': config.disabled === true ? true : false,
-      // ARIA attributes will be set directly on thumbs instead
-      'role': 'none',
+      tabindex: '-1',
+      'aria-disabled': config.disabled === true ? 'true' : 'false',
+      role: 'none'
     },
     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 API configuration using accessor pattern
-  return {
-    slider: {
-      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: () => comp.disabled?.enable?.(),
-      disable: () => comp.disabled?.disable?.(),
-      isDisabled: () => comp.disabled?.isDisabled?.() ?? false
-    },
-    appearance: {
-      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) => comp.on?.(event, handler),
-      off: (event, handler) => comp.off?.(event, handler)
-    },
-    lifecycle: {
-      destroy: () => comp.lifecycle?.destroy?.()
-    }
-  };
-};
+export const getApiConfig = (comp) => ({
+  slider: {
+    setValue: (v, t) => comp.slider?.setValue(v, t),
+    getValue: () => comp.slider?.getValue() ?? 0,
+    setSecondValue: (v, t) => comp.slider?.setSecondValue(v, t),
+    getSecondValue: () => comp.slider?.getSecondValue() ?? null,
+    setMin: (m) => comp.slider?.setMin(m),
+    getMin: () => comp.slider?.getMin() ?? 0,
+    setMax: (m) => comp.slider?.setMax(m),
+    getMax: () => comp.slider?.getMax() ?? 100,
+    setStep: (s) => comp.slider?.setStep(s),
+    getStep: () => comp.slider?.getStep() ?? 1,
+    regenerateTicks: () => comp.slider?.regenerateTicks?.()
+  },
+  disabled: {
+    enable: () => comp.disabled?.enable?.(),
+    disable: () => comp.disabled?.disable?.(),
+    isDisabled: () => comp.disabled?.isDisabled?.() ?? false
+  },
+  appearance: {
+    setColor: (c) => comp.appearance?.setColor?.(c),
+    getColor: () => comp.appearance?.getColor?.() ?? 'primary',
+    setSize: (s) => comp.appearance?.setSize?.(s),
+    getSize: () => comp.appearance?.getSize?.() ?? 'medium',
+    showTicks: (s) => comp.appearance?.showTicks?.(s),
+    showCurrentValue: (s) => comp.appearance?.showCurrentValue?.(s)
+  },
+  text: {
+    setText: (t) => comp.label?.setText?.(t),
+    getText: () => comp.label?.getText?.() ?? ''
+  },
+  icon: {
+    setIcon: (h) => comp.icon?.setIcon?.(h),
+    getIcon: () => comp.icon?.getIcon?.() ?? ''
+  },
+  events: {
+    on: (e, h) => comp.on?.(e, h),
+    off: (e, h) => comp.off?.(e, h)
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});