mtrl 0.3.8 → 0.4.0

package/src/components/radios/radio.ts

@@ -1,292 +0,0 @@
-// src/components/radios/radio.ts
-import { RadiosConfig, RadioOptionConfig, RadioItem } from './types';
-
-/**
- * Creates a feature that adds radio functionality to a component
- * @param {RadiosConfig} config - Configuration with radio options
- * @returns {Function} Higher-order function that adds radio to component
- */
-export const withRadio = (config: RadiosConfig) => (component) => {
-  const radios: RadioItem[] = [];
-  const radiosClass = component.getClass('radios');
-  let selectedValue = config.value || '';
-  
-  // Add direction class
-  component.element.classList.add(
-    `${radiosClass}--${config.direction || 'vertical'}`
-  );
-  
-  // Setup disabled state if needed
-  if (config.disabled) {
-    component.element.classList.add(`${radiosClass}--disabled`);
-  }
-  
-  /**
-   * Creates a radio item DOM structure
-   * @param {RadioOptionConfig} option - Radio option configuration
-   * @returns {RadioItem} Radio item object
-   */
-  const createRadioItem = (option: RadioOptionConfig): RadioItem => {
-    // Create container
-    const radioContainer = document.createElement('div');
-    radioContainer.classList.add(`${radiosClass}-item`);
-    
-    // Create input
-    const input = document.createElement('input');
-    input.type = 'radio';
-    input.name = config.name;
-    input.value = option.value;
-    input.classList.add(`${radiosClass}-input`);
-    
-    // Set checked state if value matches
-    if (selectedValue === option.value) {
-      input.checked = true;
-    }
-    
-    // Set disabled state if needed
-    if (config.disabled || option.disabled) {
-      input.disabled = true;
-      radioContainer.classList.add(`${radiosClass}-item--disabled`);
-    }
-    
-    // Create label
-    const label = document.createElement('label');
-    label.classList.add(`${radiosClass}-label`);
-    
-    // Create a container for the radio visual
-    const radioControl = document.createElement('span');
-    radioControl.classList.add(`${radiosClass}-control`);
-    
-    // Create the radio circle
-    const radioCircle = document.createElement('span');
-    radioCircle.classList.add(`${radiosClass}-circle`);
-    
-    // Add ripple container if ripple is enabled
-    if (config.ripple !== false) {
-      const rippleContainer = document.createElement('span');
-      rippleContainer.classList.add(`${radiosClass}-ripple`);
-      radioControl.appendChild(rippleContainer);
-    }
-    
-    // Add circle to control
-    radioControl.appendChild(radioCircle);
-    
-    // Create text span
-    const textSpan = document.createElement('span');
-    textSpan.classList.add(`${radiosClass}-text`);
-    textSpan.textContent = option.label;
-    
-    // Set label position
-    if (option.labelBefore) {
-      label.classList.add(`${radiosClass}-label--before`);
-      label.appendChild(textSpan);
-      label.appendChild(radioControl);
-    } else {
-      label.appendChild(radioControl);
-      label.appendChild(textSpan);
-    }
-    
-    // Setup ID for label-input connection
-    const inputId = `${radiosClass}-${option.value}-${Math.random().toString(36).substring(2, 9)}`;
-    input.id = inputId;
-    label.htmlFor = inputId;
-    
-    // Add elements to container
-    radioContainer.appendChild(input);
-    radioContainer.appendChild(label);
-    
-    // Add change event listener
-    const handleChange = (e) => {
-      if (input.checked) {
-        selectedValue = option.value;
-        
-        // Update other radio inputs
-        radios.forEach(radio => {
-          if (radio.input !== input) {
-            radio.input.checked = false;
-          }
-        });
-        
-        // Safely emit change event if events exist
-        if (component.events && typeof component.events.emit === 'function') {
-          component.events.emit('change', {
-            value: option.value,
-            originalEvent: e,
-            option
-          });
-        } else if (typeof component.on === 'function') {
-          // Fallback to trigger handlers directly if they were registered with on()
-          const changeEvent = new CustomEvent('change', {
-            detail: {
-              value: option.value,
-              originalEvent: e,
-              option
-            }
-          });
-          component.element.dispatchEvent(changeEvent);
-        }
-      }
-    };
-    
-    input.addEventListener('change', handleChange);
-    
-    // Return radio item
-    return {
-      element: radioContainer,
-      input,
-      label,
-      config: option,
-      destroy: () => {
-        input.removeEventListener('change', handleChange);
-        if (radioContainer.parentNode) {
-          radioContainer.parentNode.removeChild(radioContainer);
-        }
-      }
-    };
-  };
-  
-  /**
-   * Adds a radio option to the radios component
-   * @param {RadioOptionConfig} option - Radio option configuration
-   * @returns {Component} The component for chaining
-   */
-  const addOption = (option: RadioOptionConfig) => {
-    // Create radio item
-    const radioItem = createRadioItem(option);
-    
-    // Add to DOM
-    component.element.appendChild(radioItem.element);
-    
-    // Add to radios array
-    radios.push(radioItem);
-    
-    return component;
-  };
-  
-  /**
-   * Removes a radio option from the radios component
-   * @param {string} value - Value of the radio to remove
-   * @returns {Component} The component for chaining
-   */
-  const removeOption = (value: string) => {
-    const index = radios.findIndex(radio => radio.config.value === value);
-    
-    if (index !== -1) {
-      // Get radio item
-      const radioItem = radios[index];
-      
-      // Remove from DOM and cleanup
-      radioItem.destroy();
-      
-      // Remove from array
-      radios.splice(index, 1);
-      
-      // If we removed the selected value, reset the selection
-      if (selectedValue === value) {
-        selectedValue = '';
-      }
-    }
-    
-    return component;
-  };
-  
-  // Initialize radios from config
-  if (config.options && Array.isArray(config.options)) {
-    config.options.forEach(option => addOption(option));
-  }
-  
-  // Create events object if it doesn't exist
-  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);
-      }
-    };
-  }
-  
-  // Return enhanced component
-  return {
-    ...component,
-    radios,
-    
-    getValue: () => selectedValue,
-    
-    setValue: (value: string) => {
-      selectedValue = value;
-      
-      radios.forEach(radio => {
-        radio.input.checked = radio.config.value === value;
-      });
-      
-      return component;
-    },
-    
-    getSelected: () => {
-      const selected = radios.find(radio => radio.config.value === selectedValue);
-      return selected ? selected.config : null;
-    },
-    
-    addOption,
-    removeOption,
-    
-    enable: () => {
-      component.element.classList.remove(`${radiosClass}--disabled`);
-      
-      radios.forEach(radio => {
-        radio.input.disabled = radio.config.disabled || false;
-        if (!radio.config.disabled) {
-          radio.element.classList.remove(`${radiosClass}-item--disabled`);
-        }
-      });
-      
-      return component;
-    },
-    
-    disable: () => {
-      component.element.classList.add(`${radiosClass}--disabled`);
-      
-      radios.forEach(radio => {
-        radio.input.disabled = true;
-        radio.element.classList.add(`${radiosClass}-item--disabled`);
-      });
-      
-      return component;
-    },
-    
-    enableOption: (value: string) => {
-      const radio = radios.find(r => r.config.value === value);
-      
-      if (radio) {
-        radio.config.disabled = false;
-        radio.input.disabled = component.element.classList.contains(`${radiosClass}--disabled`);
-        
-        if (!radio.input.disabled) {
-          radio.element.classList.remove(`${radiosClass}-item--disabled`);
-        }
-      }
-      
-      return component;
-    },
-    
-    disableOption: (value: string) => {
-      const radio = radios.find(r => r.config.value === value);
-      
-      if (radio) {
-        radio.config.disabled = true;
-        radio.input.disabled = true;
-        radio.element.classList.add(`${radiosClass}-item--disabled`);
-      }
-      
-      return component;
-    }
-  };
-};
-
-export default withRadio;

package/src/components/radios/radios.ts

@@ -1,43 +0,0 @@
-// src/components/radios/radios.ts
-import { PREFIX } from '../../core/config';
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withDisabled, withLifecycle } from '../../core/compose/features';
-import { withRadio } from './radio';
-import { withAPI } from './api';
-import { RadiosConfig, RadiosComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Radios component
- * @param {RadiosConfig} config - Radios configuration object
- * @returns {RadiosComponent} Radios component instance
- */
-const createRadios = (config: RadiosConfig): RadiosComponent => {
-  // Ensure name is provided
-  if (!config.name) {
-    config.name = `radios-${Math.random().toString(36).substring(2, 9)}`;
-  }
-  
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // First add events support before radio functionality
-    const radios = pipe(
-      createBase,
-      withEvents(), // Make sure this runs first to provide events
-      withElement(getElementConfig(baseConfig)),
-      withRadio(baseConfig),
-      withDisabled(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
-
-    return radios as RadiosComponent;
-  } catch (error) {
-    console.error('Radios creation error:', error);
-    throw new Error(`Failed to create radios component: ${(error as Error).message}`);
-  }
-};
-
-export default createRadios;

package/src/components/radios/types.ts

@@ -1,219 +0,0 @@
-// src/components/radios/types.ts
-
-/**
- * Configuration for a radio option in the Radios component
- * @category Components
- */
-export interface RadioOptionConfig {
-  /** 
-   * Radio input value attribute
-   * @example 'option1'
-   */
-  value: string;
-  
-  /** 
-   * Radio label text content
-   * @example 'Option 1'
-   */
-  label: string;
-  
-  /** 
-   * Whether the radio is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /**
-   * Whether to position the label before the radio
-   * @default false
-   */
-  labelBefore?: boolean;
-}
-
-/**
- * Configuration interface for the Radios component
- * @category Components
- */
-export interface RadiosConfig {
-  /** 
-   * Radio input name attribute used for grouping radios
-   * @example 'options'
-   */
-  name: string;
-  
-  /** 
-   * Array of radio option configurations
-   */
-  options?: RadioOptionConfig[];
-  
-  /** 
-   * Initial selected value
-   */
-  value?: string;
-  
-  /** 
-   * Whether the entire group is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /** 
-   * Whether to enable ripple effect
-   * @default true
-   */
-  ripple?: boolean;
-  
-  /** 
-   * Additional CSS classes to add to the radios component
-   */
-  class?: string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   */
-  componentName?: string;
-  
-  /** 
-   * Ripple effect configuration
-   */
-  rippleConfig?: {
-    /** Duration of the ripple animation in milliseconds */
-    duration?: number;
-    /** Timing function for the ripple animation */
-    timing?: string;
-    /** Opacity values for ripple start and end [start, end] */
-    opacity?: [string, string];
-  };
-}
-
-/**
- * Interface for a single radio in the Radios component
- * @category Components
- */
-export interface RadioItem {
-  /** The radio container element */
-  element: HTMLElement;
-  
-  /** The actual radio input element */
-  input: HTMLInputElement;
-  
-  /** The label element */
-  label: HTMLLabelElement;
-  
-  /** The radio option configuration */
-  config: RadioOptionConfig;
-  
-  /** Destroys the radio and removes event listeners */
-  destroy: () => void;
-}
-
-/**
- * Radios component interface
- * @category Components
- */
-export interface RadiosComponent {
-  /** The radios container DOM element */
-  element: HTMLElement;
-  
-  /** Array of radio items in the group */
-  radios: RadioItem[];
-  
-  /** API for managing component lifecycle */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Gets the radios component name
-   * @returns Selected radio value or empty string if none selected
-   */
-  getValue: () => string;
-  
-  /**
-   * Sets the radios component value (selects a radio)
-   * @param value - Value to select
-   * @returns The radios component for chaining
-   */
-  setValue: (value: string) => RadiosComponent;
-  
-  /**
-   * Gets the selected radio option's configuration
-   * @returns The selected radio option config or null
-   */
-  getSelected: () => RadioOptionConfig | null;
-  
-  /**
-   * Adds a radio option to the radios component
-   * @param option - Radio option configuration
-   * @returns The radios component for chaining
-   */
-  addOption: (option: RadioOptionConfig) => RadiosComponent;
-  
-  /**
-   * Removes a radio option from the radios component
-   * @param value - Value of the radio to remove
-   * @returns The radios component for chaining
-   */
-  removeOption: (value: string) => RadiosComponent;
-  
-  /**
-   * Enables the radios component
-   * @returns The radios component for chaining
-   */
-  enable: () => RadiosComponent;
-  
-  /**
-   * Disables the radios component
-   * @returns The radios component for chaining
-   */
-  disable: () => RadiosComponent;
-  
-  /**
-   * Enables a specific radio option
-   * @param value - Value of the radio to enable
-   * @returns The radios component for chaining
-   */
-  enableOption: (value: string) => RadiosComponent;
-  
-  /**
-   * Disables a specific radio option
-   * @param value - Value of the radio to disable
-   * @returns The radios component for chaining
-   */
-  disableOption: (value: string) => RadiosComponent;
-  
-  /**
-   * Destroys the radios component and all radio items
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds an event listener to the radios component
-   * @param event - Event name ('change')
-   * @param handler - Event handler function
-   * @returns The radios component for chaining
-   */
-  on: (event: string, handler: Function) => RadiosComponent;
-  
-  /**
-   * Removes an event listener from the radios component
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The radios component for chaining
-   */
-  off: (event: string, handler: Function) => RadiosComponent;
-}