mtrl 0.2.2 → 0.2.3

package/src/components/radios/config.ts

@@ -0,0 +1,60 @@
+// src/components/radios/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { RadiosConfig } from './types';
+import { RADIO_DIRECTIONS, RADIO_SIZES } from './constants';
+
+/**
+ * Default configuration for the Radios component
+ */
+export const defaultConfig: RadiosConfig = {
+  name: '',
+  direction: RADIO_DIRECTIONS.VERTICAL,
+  size: RADIO_SIZES.MEDIUM,
+  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

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

package/src/components/radios/index.ts

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

package/src/components/radios/radio.ts

@@ -0,0 +1,269 @@
+// 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'}`
+  );
+  
+  // Add size class
+  component.element.classList.add(
+    `${radiosClass}--${config.size || 'medium'}`
+  );
+  
+  // 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;
+          }
+        });
+        
+        // Emit change event
+        component.events.emit('change', {
+          value: option.value,
+          originalEvent: e,
+          option
+        });
+      }
+    };
+    
+    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));
+  }
+  
+  // 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

@@ -0,0 +1,42 @@
+// 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 {
+    const radios = pipe(
+      createBase,
+      withEvents(),
+      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

@@ -0,0 +1,232 @@
+// src/components/radios/types.ts
+import { RADIO_SIZES, RADIO_DIRECTIONS } from './constants';
+
+/**
+ * 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;
+  
+  /** 
+   * Group layout direction
+   * @default 'vertical'
+   */
+  direction?: keyof typeof RADIO_DIRECTIONS | string;
+  
+  /**
+   * Radio size
+   * @default 'medium'
+   */
+  size?: keyof typeof RADIO_SIZES | string;
+  
+  /** 
+   * 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;
+}