mtrl 0.3.8 → 0.4.0

package/src/components/progress/types.ts

@@ -1,255 +0,0 @@
-// src/components/progress/types.ts
-
-/**
- * Progress variant types
- * @category Components
- */
-export type ProgressVariant = 'linear' | 'circular';
-
-/**
- * Progress component event types
- * @category Components
- */
-export type ProgressEvent = 'change' | 'complete';
-
-// /**
-//  * Progress variants object for internal reference
-//  * @internal
-//  */
-// export const PROGRESS_VARIANTS: Record<string, ProgressVariant> = {
-//   LINEAR: 'linear',
-//   CIRCULAR: 'circular'
-// };
-
-// /**
-//  * Progress events object for internal reference
-//  * @internal
-//  */
-// export const PROGRESS_EVENTS: Record<string, ProgressEvent> = {
-//   CHANGE: 'change',
-//   COMPLETE: 'complete'
-// };
-
-/**
- * Configuration interface for the Progress component
- * @category Components
- */
-export interface ProgressConfig {
-  /** 
-   * Progress variant that determines visual style
-   * @default 'linear'
-   */
-  variant?: ProgressVariant | string;
-  
-  /** 
-   * Initial progress value (0-100)
-   * @default 0
-   */
-  value?: number;
-  
-  /** 
-   * Whether the progress indicator is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /** 
-   * Maximum value 
-   * @default 100
-   */
-  max?: number;
-  
-  /** 
-   * Buffer value for linear progress with buffer (like video loading)
-   * @default 0
-   */
-  buffer?: number;
-  
-  /** 
-   * Additional CSS classes to add to the progress component
-   * @example 'page-loader main-progress'
-   */
-  class?: string;
-  
-  /** 
-   * Whether to show text label with percentage
-   * @default false
-   */
-  showLabel?: boolean;
-  
-  /** 
-   * Whether progress is indeterminate (shows animation without specific value)
-   * @default false
-   */
-  indeterminate?: boolean;
-  
-  /** 
-   * Custom label formatter function
-   * @example (value, max) => `${Math.round((value/max) * 100)}%`
-   */
-  labelFormatter?: (value: number, max: number) => string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   * @default 'progress'
-   */
-  componentName?: string;
-}
-
-/**
- * Progress component interface
- * @category Components
- */
-export interface ProgressComponent {
-  /** The component's root DOM element */
-  element: HTMLElement;
-  
-  /** The track element (background) */
-  trackElement: HTMLElement;
-  
-  /** The indicator element (filled part) */
-  indicatorElement: HTMLElement;
-  
-  /** The buffer element for linear variant (pre-loaded state) */
-  bufferElement?: HTMLElement;
-  
-  /** The label element if showLabel is enabled */
-  labelElement?: HTMLElement;
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Sets the current progress value
-   * @param value - Progress value (between 0 and max)
-   * @returns The progress component for chaining
-   */
-  setValue: (value: number) => ProgressComponent;
-  
-  /**
-   * Gets the current progress value
-   * @returns Current progress value
-   */
-  getValue: () => number;
-  
-  /**
-   * Sets the buffer value (for linear variant with buffer indicators)
-   * @param value - Buffer value (between 0 and max)
-   * @returns The progress component for chaining
-   */
-  setBuffer: (value: number) => ProgressComponent;
-  
-  /**
-   * Gets the current buffer value
-   * @returns Current buffer value
-   */
-  getBuffer: () => number;
-  
-  /**
-   * Enables the progress component
-   * @returns The progress component for chaining
-   */
-  enable: () => ProgressComponent;
-  
-  /**
-   * Disables the progress component
-   * @returns The progress component for chaining
-   */
-  disable: () => ProgressComponent;
-  
-  /**
-   * Checks if the component is disabled
-   * @returns Whether the component is disabled
-   */
-  isDisabled: () => boolean;
-  
-  /**
-   * Shows the label element
-   * @returns The progress component for chaining
-   */
-  showLabel: () => ProgressComponent;
-  
-  /**
-   * Hides the label element
-   * @returns The progress component for chaining
-   */
-  hideLabel: () => ProgressComponent;
-  
-  /**
-   * Sets a custom formatter for the label
-   * @param formatter - Function that formats the label text
-   * @returns The progress component for chaining
-   */
-  setLabelFormatter: (formatter: (value: number, max: number) => string) => ProgressComponent;
-  
-  /**
-   * Sets the indeterminate state
-   * @param indeterminate - Whether progress is indeterminate
-   * @returns The progress component for chaining
-   */
-  setIndeterminate: (indeterminate: boolean) => ProgressComponent;
-  
-  /**
-   * Checks if the component is in indeterminate state
-   * @returns Whether the component is indeterminate
-   */
-  isIndeterminate: () => boolean;
-  
-  /**
-   * Adds an event listener to the progress
-   * @param event - Event name ('change', 'complete')
-   * @param handler - Event handler function
-   * @returns The progress component for chaining
-   */
-  on: (event: string, handler: Function) => ProgressComponent;
-  
-  /**
-   * Removes an event listener from the progress
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The progress component for chaining
-   */
-  off: (event: string, handler: Function) => ProgressComponent;
-  
-  /**
-   * Destroys the progress component and cleans up resources
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds CSS classes to the progress element
-   * @param classes - One or more class names to add
-   * @returns The progress component for chaining
-   */
-  addClass: (...classes: string[]) => ProgressComponent;
-  
-  /**
-   * API for managing disabled state
-   */
-  disabled: {
-    /** Enables the progress */
-    enable: () => void;
-    /** Disables the progress */
-    disable: () => void;
-    /** Checks if the progress is disabled */
-    isDisabled: () => boolean;
-  };
-  
-  /**
-   * API for managing component lifecycle
-   */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
-}

package/src/components/radios/api.ts

@@ -1,125 +0,0 @@
-// src/components/radios/api.ts
-import { RadiosComponent } from './types';
-
-interface ApiOptions {
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-interface ComponentWithRadio {
-  element: HTMLElement;
-  radios: any[];
-  getValue: () => string;
-  setValue: (value: string) => any;
-  getSelected: () => any;
-  addOption: (option: any) => any;
-  removeOption: (value: string) => any;
-  enable: () => any;
-  disable: () => any;
-  enableOption: (value: string) => any;
-  disableOption: (value: string) => any;
-  getClass: (name: string) => string;
-  events: {
-    on: (event: string, handler: Function) => void;
-    off: (event: string, handler: Function) => void;
-    emit?: (event: string, data: any) => void;
-  };
-}
-
-/**
- * Enhances a radios 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 Radios component
- */
-export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: ComponentWithRadio): RadiosComponent => {
-    // Ensure component has events
-    if (!component.events) {
-      component.events = {
-        on: (event, handler) => {
-          component.element.addEventListener(event, (e) => handler(e.detail));
-        },
-        off: (event, handler) => {
-          component.element.removeEventListener(event, handler);
-        },
-        emit: (event, data) => {
-          const customEvent = new CustomEvent(event, { detail: data });
-          component.element.dispatchEvent(customEvent);
-        }
-      };
-    } else if (!component.events.emit) {
-      // Add emit method if not present
-      component.events.emit = (event, data) => {
-        const customEvent = new CustomEvent(event, { detail: data });
-        component.element.dispatchEvent(customEvent);
-      };
-    }
-    
-    return {
-      ...component as any,
-      element: component.element,
-      radios: component.radios,
-      
-      getValue: () => component.getValue(),
-      
-      setValue(value: string) {
-        component.setValue(value);
-        return this;
-      },
-      
-      getSelected: () => component.getSelected(),
-      
-      addOption(option) {
-        component.addOption(option);
-        return this;
-      },
-      
-      removeOption(value: string) {
-        component.removeOption(value);
-        return this;
-      },
-      
-      enable() {
-        disabled.enable();
-        return this;
-      },
-      
-      disable() {
-        disabled.disable();
-        return this;
-      },
-      
-      enableOption(value: string) {
-        component.enableOption(value);
-        return this;
-      },
-      
-      disableOption(value: string) {
-        component.disableOption(value);
-        return this;
-      },
-      
-      on(event: string, handler: Function) {
-        component.events.on(event, handler);
-        return this;
-      },
-      
-      off(event: string, handler: Function) {
-        component.events.off(event, handler);
-        return this;
-      },
-      
-      destroy() {
-        // First destroy all radio items
-        component.radios.forEach(radio => radio.destroy());
-        // Then destroy the component
-        lifecycle.destroy();
-      }
-    };
-  };

package/src/components/radios/config.ts

@@ -1,59 +0,0 @@
-// src/components/radios/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { RadiosConfig } from './types';
-import { RADIO_DIRECTIONS } from './constants';
-
-/**
- * Default configuration for the Radios component
- */
-export const defaultConfig: RadiosConfig = {
-  name: '',
-  direction: 'vertical',
-  disabled: false,
-  ripple: true,
-  options: []
-};
-
-/**
- * Creates the base configuration for Radios component
- * @param {RadiosConfig} config - User provided configuration
- * @returns {RadiosConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: RadiosConfig): RadiosConfig => 
-  createComponentConfig(defaultConfig, config, 'radios') as RadiosConfig;
-
-/**
- * Generates element configuration for the Radios container
- * @param {RadiosConfig} config - Radios configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: RadiosConfig) => {
-  return createElementConfig(config, {
-    tag: 'div',
-    attrs: {
-      role: 'radiogroup'
-    },
-    className: config.class
-  });
-};
-
-/**
- * Creates API configuration for the Radios component
- * @param {Object} comp - Component with disabled and lifecycle features
- * @returns {Object} API configuration object
- */
-export const getApiConfig = (comp) => ({
-  disabled: {
-    enable: () => comp.disabled.enable(),
-    disable: () => comp.disabled.disable()
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle.destroy()
-  }
-});
-
-export default defaultConfig;

package/src/components/radios/constants.ts

@@ -1,19 +0,0 @@
-// src/components/radios/constants.ts
-
-/**
- * Radio states for styling and behavior
- */
-export const RADIO_STATES = {
-  CHECKED: 'checked',
-  UNCHECKED: 'unchecked',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused'
-};
-
-/**
- * Radio layout directions
- */
-export const RADIO_DIRECTIONS = {
-  VERTICAL: 'vertical',
-  HORIZONTAL: 'horizontal'
-};

package/src/components/radios/index.ts

@@ -1,3 +0,0 @@
-// src/components/radios/index.ts
-export { default } from './radios';
-export { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';