mtrl 0.3.8 → 0.4.0

package/src/components/switch/api.ts

@@ -1,93 +0,0 @@
-// src/components/switch/api.ts
-import { BaseComponent, SwitchComponent, ApiOptions } from './types';
-
-/**
- * Enhances switch component with API methods
- * @param {ApiOptions} options - API configuration
- * @returns {Function} Higher-order function that adds API methods to component
- */
-export const withAPI = ({ disabled, lifecycle, checkable }: ApiOptions) => 
-  (component: BaseComponent): SwitchComponent => ({
-    ...component as any,
-    element: component.element,
-    input: component.input as HTMLInputElement,
-
-    // Value management
-    getValue: component.getValue || (() => ''),
-    setValue(value: string): SwitchComponent {
-      component.setValue?.(value);
-      return this;
-    },
-
-    // State management
-    check(): SwitchComponent {
-      checkable.check();
-      return this;
-    },
-    
-    uncheck(): SwitchComponent {
-      checkable.uncheck();
-      return this;
-    },
-    
-    toggle(): SwitchComponent {
-      checkable.toggle();
-      return this;
-    },
-    
-    isChecked(): boolean {
-      return checkable.isChecked();
-    },
-
-    // Label management
-    setLabel(text: string): SwitchComponent {
-      component.text?.setText(text);
-      return this;
-    },
-    
-    getLabel(): string {
-      return component.text?.getText() || '';
-    },
-    
-    // Supporting text management (if present)
-    supportingTextElement: component.supportingTextElement || null,
-    setSupportingText(text: string, isError?: boolean): SwitchComponent {
-      if (component.setSupportingText) {
-        component.setSupportingText(text, isError);
-      }
-      return this;
-    },
-    
-    removeSupportingText(): SwitchComponent {
-      if (component.removeSupportingText) {
-        component.removeSupportingText();
-      }
-      return this;
-    },
-
-    // Event handling
-    on(event: string, handler: Function): SwitchComponent {
-      component.on?.(event, handler);
-      return this;
-    },
-    
-    off(event: string, handler: Function): SwitchComponent {
-      component.off?.(event, handler);
-      return this;
-    },
-
-    // State management
-    enable(): SwitchComponent {
-      disabled.enable();
-      return this;
-    },
-    
-    disable(): SwitchComponent {
-      disabled.disable();
-      return this;
-    },
-    
-    destroy(): void {
-      lifecycle.destroy();
-    }
-  });

package/src/components/switch/config.ts

@@ -1,56 +0,0 @@
-// src/components/switch/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { SwitchConfig, BaseComponent, ApiOptions } from './types';
-
-/**
- * Default configuration for the Switch component
- */
-export const defaultConfig: SwitchConfig = {};
-
-/**
- * Creates the base configuration for Switch component
- * @param {SwitchConfig} config - User provided configuration
- * @returns {SwitchConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: SwitchConfig = {}): SwitchConfig => 
-  createComponentConfig(defaultConfig, config, 'switch') as SwitchConfig;
-
-/**
- * Generates element configuration for the Switch component
- * @param {SwitchConfig} config - Switch configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: SwitchConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    componentName: 'switch',
-    className: config.class,
-    interactive: true
-  });
-
-/**
- * Creates API configuration for the Switch component
- * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
- * @returns {ApiOptions} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
-  disabled: {
-    enable: comp.disabled?.enable,
-    disable: comp.disabled?.disable
-  },
-  lifecycle: {
-    destroy: comp.lifecycle?.destroy
-  },
-  checkable: {
-    check: comp.checkable?.check,
-    uncheck: comp.checkable?.uncheck,
-    toggle: comp.checkable?.toggle,
-    isChecked: comp.checkable?.isChecked
-  }
-});
-
-export default defaultConfig;

package/src/components/switch/features.ts

@@ -1,198 +0,0 @@
-// src/components/switch/features.ts
-import { BaseComponent, ElementComponent } from '../../core/compose/component';
-
-/**
- * Configuration for supporting text feature
- */
-export interface SupportingTextConfig {
-  /**
-   * Supporting text content
-   */
-  supportingText?: string;
-  
-  /**
-   * Whether supporting text indicates an error
-   */
-  error?: boolean;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Component with supporting text capabilities
- */
-export interface SupportingTextComponent extends BaseComponent {
-  /**
-   * Supporting text element
-   */
-  supportingTextElement: HTMLElement | null;
-  
-  /**
-   * Sets supporting text content
-   * @param text - Text content
-   * @param isError - Whether text represents an error
-   * @returns Component instance for chaining
-   */
-  setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
-  
-  /**
-   * Removes supporting text
-   * @returns Component instance for chaining
-   */
-  removeSupportingText: () => SupportingTextComponent;
-}
-
-/**
- * Helper to ensure the switch has the proper container/content structure
- * @param component - The component to enhance
- * @param prefix - CSS class prefix
- * @param componentName - Component name
- * @returns The container and content elements
- */
-const ensureSwitchStructure = (
-  component: ElementComponent, 
-  prefix: string, 
-  componentName: string
-) => {
-  const PREFIX = prefix || 'mtrl';
-  const COMPONENT = componentName || 'switch';
-  
-  // Create or find container
-  let container = component.element.querySelector(`.${PREFIX}-${COMPONENT}-container`);
-  if (!container) {
-    container = document.createElement('div');
-    container.className = `${PREFIX}-${COMPONENT}-container`;
-    
-    // Find input and track to move them to container
-    const input = component.element.querySelector(`.${PREFIX}-${COMPONENT}-input`);
-    const track = component.element.querySelector(`.${PREFIX}-${COMPONENT}-track`);
-    
-    // Gather all elements except container
-    const elementsToMove = [];
-    if (input) elementsToMove.push(input);
-    if (track) elementsToMove.push(track);
-    
-    // Create content wrapper
-    const contentWrapper = document.createElement('div');
-    contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
-    
-    // Find label and move to content
-    const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
-    if (label) {
-      contentWrapper.appendChild(label);
-    }
-    
-    // Add content wrapper to container first
-    container.appendChild(contentWrapper);
-    
-    // Add other elements to container
-    elementsToMove.forEach(el => container.appendChild(el));
-    
-    // Add container to component
-    component.element.appendChild(container);
-    
-    return { container, contentWrapper };
-  }
-  
-  // Container exists, find or create content wrapper
-  let contentWrapper = component.element.querySelector(`.${PREFIX}-${COMPONENT}-content`);
-  if (!contentWrapper) {
-    contentWrapper = document.createElement('div');
-    contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
-    
-    // Find label to move to content
-    const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
-    if (label) {
-      contentWrapper.appendChild(label);
-    }
-    
-    // Insert content wrapper at beginning of container
-    container.insertBefore(contentWrapper, container.firstChild);
-  }
-  
-  return { container, contentWrapper };
-};
-
-/**
- * Creates and manages supporting text for a component
- * @param config - Configuration object with supporting text settings
- * @returns Function that enhances a component with supporting text functionality
- */
-export const withSupportingText = <T extends SupportingTextConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & SupportingTextComponent => {
-    const PREFIX = config.prefix || 'mtrl';
-    const COMPONENT = config.componentName || 'switch';
-    
-    // Ensure we have the proper container/content structure
-    const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
-    
-    // Create supporting text element if needed
-    let supportingElement = null;
-    if (config.supportingText) {
-      supportingElement = document.createElement('div');
-      supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
-      supportingElement.textContent = config.supportingText;
-      
-      if (config.error) {
-        supportingElement.classList.add(`${PREFIX}-${COMPONENT}-helper--error`);
-        component.element.classList.add(`${PREFIX}-${COMPONENT}--error`);
-      }
-      
-      // Add supporting text to the content wrapper
-      contentWrapper.appendChild(supportingElement);
-    }
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy && supportingElement) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        if (supportingElement) supportingElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      supportingTextElement: supportingElement,
-      
-      setSupportingText(text: string, isError = false) {
-        const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
-        let supportingElement = this.supportingTextElement;
-        
-        if (!supportingElement) {
-          // Create if it doesn't exist
-          supportingElement = document.createElement('div');
-          supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
-          contentWrapper.appendChild(supportingElement);
-          this.supportingTextElement = supportingElement;
-        }
-        
-        supportingElement.textContent = text;
-        
-        // Handle error state
-        supportingElement.classList.toggle(`${PREFIX}-${COMPONENT}-helper--error`, isError);
-        component.element.classList.toggle(`${PREFIX}-${COMPONENT}--error`, isError);
-        
-        return this;
-      },
-      
-      removeSupportingText() {
-        if (this.supportingTextElement && this.supportingTextElement.parentNode) {
-          this.supportingTextElement.remove();
-          this.supportingTextElement = null;
-          component.element.classList.remove(`${PREFIX}-${COMPONENT}--error`);
-        }
-        return this;
-      }
-    };
-  };

package/src/components/switch/index.ts

@@ -1,8 +0,0 @@
-// src/components/switch/index.ts
-export { default } from './switch'
-export { 
-  SwitchConfig, 
-  SwitchComponent,
-  SWITCH_LABEL_POSITION
-} from './types'
-export { withSupportingText, SupportingTextComponent } from './features'

package/src/components/switch/switch.ts

@@ -1,52 +0,0 @@
-// src/components/switch/switch.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withTextLabel,
-  withDisabled,
-  withLifecycle,
-  withInput,
-  withTrack,
-  withCheckable
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { withSupportingText } from './features';
-import { SwitchConfig, SwitchComponent, BaseComponent } from './types';
-import { 
-  createBaseConfig, 
-  getElementConfig, 
-  getApiConfig
-} from './config';
-
-/**
- * Creates a new Switch component
- * @param {SwitchConfig} config - Switch configuration
- * @returns {SwitchComponent} Switch component instance
- */
-const createSwitch = (config: SwitchConfig = {}): SwitchComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    const switchComponent = pipe(
-      createBase,
-      withEvents(), // Move events first to ensure system is available
-      withElement(getElementConfig(baseConfig)),
-      withTextLabel(baseConfig),
-      withInput(baseConfig),
-      withTrack(baseConfig),
-      withSupportingText(baseConfig),
-      withCheckable(baseConfig),
-      withDisabled(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
-
-    return switchComponent as SwitchComponent;
-  } catch (error) {
-    console.error('Switch creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create switch: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createSwitch;

package/src/components/switch/types.ts

@@ -1,168 +0,0 @@
-// src/components/switch/types.ts
-
-export type SwitchPosition = 'center' | 'start' | 'end';
-
-/**
- * Switch label position types
- */
-export type SwitchLabelPosition = 'start' | 'end';
-
-/**
- * Switch label positions
- */
-export const SWITCH_LABEL_POSITION = {
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Configuration interface for the Switch component
- */
-export interface SwitchConfig {
-  /** Input name attribute */
-  name?: string;
-  
-  /** Initial checked state */
-  checked?: boolean;
-  
-  /** Whether input is required */
-  required?: boolean;
-  
-  /** Whether switch is disabled */
-  disabled?: boolean;
-  
-  /** Input value attribute */
-  value?: string;
-  
-  /** Label text */
-  label?: string;
-  
-  /** Supporting text content */
-  supportingText?: string;
-  
-  /** Whether supporting text indicates an error */
-  error?: boolean;
-  
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** ARIA label for accessibility */
-  ariaLabel?: string;
-  
-  /** Prefix for class names */
-  prefix?: string;
-  
-  /** Component name */
-  componentName?: string;
-  
-  /** Icon HTML content */
-  icon?: string;
-}
-
-/**
- * Switch component interface
- */
-export interface SwitchComponent {
-  /** The root element of the switch */
-  element: HTMLElement;
-  
-  /** The input element */
-  input: HTMLInputElement;
-  
-  /** Gets the switch's value */
-  getValue: () => string;
-  
-  /** Sets the switch's value */
-  setValue: (value: string) => SwitchComponent;
-  
-  /** Checks/activates the switch */
-  check: () => SwitchComponent;
-  
-  /** Unchecks/deactivates the switch */
-  uncheck: () => SwitchComponent;
-  
-  /** Toggles the switch's checked state */
-  toggle: () => SwitchComponent;
-  
-  /** Returns whether the switch is checked */
-  isChecked: () => boolean;
-  
-  /** Sets the switch's label text */
-  setLabel: (text: string) => SwitchComponent;
-  
-  /** Gets the switch's label text */
-  getLabel: () => string;
-  
-  /** Supporting text element */
-  supportingTextElement: HTMLElement | null;
-  
-  /** Sets supporting text content */
-  setSupportingText: (text: string, isError?: boolean) => SwitchComponent;
-  
-  /** Removes supporting text */
-  removeSupportingText: () => SwitchComponent;
-  
-  /** Adds event listener */
-  on: (event: string, handler: Function) => SwitchComponent;
-  
-  /** Removes event listener */
-  off: (event: string, handler: Function) => SwitchComponent;
-  
-  /** Enables the switch */
-  enable: () => SwitchComponent;
-  
-  /** Disables the switch */
-  disable: () => SwitchComponent;
-  
-  /** Destroys the switch component and cleans up resources */
-  destroy: () => void;
-}
-
-/**
- * API options interface
- */
-export interface ApiOptions {
-  disabled: {
-    enable: () => any;
-    disable: () => any;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-  checkable: {
-    check: () => any;
-    uncheck: () => any;
-    toggle: () => any;
-    isChecked: () => boolean;
-  };
-}
-
-/**
- * Base component interface
- */
-export interface BaseComponent {
-  element: HTMLElement;
-  input?: HTMLInputElement;
-  getValue?: () => string;
-  setValue?: (value: string) => any;
-  text?: {
-    setText: (content: string) => any;
-    getText: () => string;
-  };
-  on?: (event: string, handler: Function) => any;
-  off?: (event: string, handler: Function) => any;
-  disabled?: {
-    enable: () => any;
-    disable: () => any;
-  };
-  lifecycle?: {
-    destroy: () => void;
-  };
-  checkable?: {
-    check: () => any;
-    uncheck: () => any;
-    toggle: () => any;
-    isChecked: () => boolean;
-  };
-  [key: string]: any;
-}