mtrl 0.3.6 → 0.3.8

package/src/components/select/types.ts

@@ -0,0 +1,355 @@
+// src/components/select/types.ts
+
+/**
+ * Available Select variants
+ */
+export type SelectVariant = 'filled' | 'outlined';
+
+/**
+ * Select variant constants
+ */
+export const SELECT_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+} as const;
+
+/**
+ * Select option interface
+ */
+export interface SelectOption {
+  /**
+   * Unique identifier for the option
+   */
+  id: string;
+  
+  /**
+   * Display text for the option
+   */
+  text: string;
+  
+  /**
+   * Whether the option is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Optional icon to display with the option
+   */
+  icon?: string;
+  
+  /**
+   * Whether this option has a submenu
+   */
+  hasSubmenu?: boolean;
+  
+  /**
+   * Optional array of submenu options
+   * Only used when hasSubmenu is true
+   */
+  submenu?: SelectOption[];
+  
+  /**
+   * Additional data associated with the option
+   */
+  data?: any;
+}
+
+/**
+ * Configuration interface for the Select component
+ */
+export interface SelectConfig {
+  /**
+   * Array of options to display in the select menu
+   */
+  options: SelectOption[];
+  
+  /**
+   * Currently selected value (option id)
+   */
+  value?: string;
+  
+  /**
+   * Visual variant (filled, outlined)
+   */
+  variant?: SelectVariant | string;
+  
+  /**
+   * Label text
+   */
+  label?: string;
+  
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  
+  /**
+   * Whether select is required
+   */
+  required?: boolean;
+  
+  /**
+   * Whether select is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Supporting text content
+   */
+  supportingText?: string;
+  
+  /**
+   * Whether supporting text indicates an error
+   */
+  error?: boolean;
+  
+  /**
+   * Menu placement relative to the textfield
+   */
+  placement?: string;
+  
+  /**
+   * Additional CSS classes
+   */
+  class?: string;
+  
+  /**
+   * Prefix for class names
+   */
+  prefix?: string;
+  
+  /**
+   * Component name
+   */
+  componentName?: string;
+  
+  /**
+   * Event callbacks
+   */
+  on?: {
+    /**
+     * Called when the select value changes
+     */
+    change?: (event: SelectChangeEvent) => void;
+    
+    /**
+     * Called when the select menu opens
+     */
+    open?: (event: SelectEvent) => void;
+    
+    /**
+     * Called when the select menu closes
+     */
+    close?: (event: SelectEvent) => void;
+  };
+}
+
+/**
+ * Select component interface
+ */
+export interface SelectComponent {
+  /**
+   * The root element of the select
+   */
+  element: HTMLElement;
+  
+  /**
+   * The textfield component
+   */
+  textfield: any;
+  
+  /**
+   * The menu component
+   */
+  menu: any;
+  
+  /**
+   * Gets the select's current value (selected option id)
+   */
+  getValue: () => string | null;
+  
+  /**
+   * Sets the select's value (by option id)
+   * @param value - Option id to select
+   * @returns Select component for chaining
+   */
+  setValue: (value: string) => SelectComponent;
+  
+  /**
+   * Gets the select's current displayed text
+   */
+  getText: () => string;
+  
+  /**
+   * Gets the selected option object
+   */
+  getSelectedOption: () => SelectOption | null;
+  
+  /**
+   * Gets all available options
+   */
+  getOptions: () => SelectOption[];
+  
+  /**
+   * Sets new options
+   * @param options - New options array
+   * @returns Select component for chaining
+   */
+  setOptions: (options: SelectOption[]) => SelectComponent;
+  
+  /**
+   * Opens the select menu
+   * @param interactionType - The type of interaction ('mouse' or 'keyboard')
+   * @returns Select component for chaining
+   */
+  open: (interactionType?: 'mouse' | 'keyboard') => SelectComponent;
+  
+  /**
+   * Closes the select menu
+   * @returns Select component for chaining
+   */
+  close: () => SelectComponent;
+  
+  /**
+   * Checks if the menu is open
+   */
+  isOpen: () => boolean;
+  
+  /**
+   * Adds an event listener
+   * @param event - Event name
+   * @param handler - Event handler
+   * @returns Select component for chaining
+   */
+  on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+  
+  /**
+   * Removes an event listener
+   * @param event - Event name
+   * @param handler - Event handler
+   * @returns Select component for chaining 
+   */
+  off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+  
+  /**
+   * Enables the select
+   * @returns Select component for chaining
+   */
+  enable: () => SelectComponent;
+  
+  /**
+   * Disables the select
+   * @returns Select component for chaining
+   */
+  disable: () => SelectComponent;
+  
+  /**
+   * Destroys the select component
+   */
+  destroy: () => void;
+}
+
+/**
+ * Select event interface
+ */
+export interface SelectEvent {
+  /**
+   * The select component
+   */
+  select: SelectComponent;
+  
+  /**
+   * Original DOM event if available
+   */
+  originalEvent?: Event;
+  
+  /**
+   * Function to prevent default behavior
+   */
+  preventDefault: () => void;
+  
+  /**
+   * Whether default behavior was prevented
+   */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Select change event interface
+ */
+export interface SelectChangeEvent extends SelectEvent {
+  /**
+   * The selected option id
+   */
+  value: string;
+  
+  /**
+   * The selected option text
+   */
+  text: string;
+  
+  /**
+   * The complete selected option object
+   */
+  option: SelectOption;
+}
+
+/**
+ * Select events interface for type-checking
+ * @internal
+ */
+export interface SelectEvents {
+  'change': (event: SelectChangeEvent) => void;
+  'open': (event: SelectEvent) => void;
+  'close': (event: SelectEvent) => void;
+}
+
+/**
+ * API options interface
+ * @internal
+ */
+export interface ApiOptions {
+  select: {
+    getValue: () => string | null;
+    setValue: (value: string) => any;
+    getText: () => string;
+    getSelectedOption: () => SelectOption | null;
+    getOptions: () => SelectOption[];
+    setOptions: (options: SelectOption[]) => any;
+    open: () => any;
+    close: () => any;
+    isOpen: () => boolean;
+  };
+  events?: {
+    on: <T extends string>(event: T, handler: (event: any) => void) => any;
+    off: <T extends string>(event: T, handler: (event: any) => void) => any;
+  };
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Base component interface
+ * @internal
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  textfield?: any;
+  menu?: any;
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  emit?: (event: string, data: any) => void;
+  disabled?: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}

package/src/components/textfield/api.ts

@@ -1,18 +1,14 @@
 // src/components/textfield/api.ts
 import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
+import { PlacementComponent } from './features/placement';
 
-/**
- * Enhances textfield component with API methods
- * @param {ApiOptions} options - API configuration
- * @returns {Function} Higher-order function that adds API methods to component
- */
 /**
  * Enhances textfield 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 }: ApiOptions) => 
-  (component: BaseComponent): TextfieldComponent => ({
+  (component: BaseComponent & Partial<PlacementComponent>): TextfieldComponent => ({
     ...component as any,
     element: component.element,
     input: component.input as HTMLInputElement | HTMLTextAreaElement,
@@ -42,6 +38,10 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     // Label management
     setLabel(text: string): TextfieldComponent {
       component.label?.setText(text);
+      // Update positions after changing label
+      if (component.updateElementPositions) {
+        setTimeout(() => component.updateElementPositions(), 10);
+      }
       return this;
     },
     
@@ -54,6 +54,10 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     setLeadingIcon(html: string): TextfieldComponent {
       if (component.setLeadingIcon) {
         component.setLeadingIcon(html);
+        // Update positions after changing icon
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
       }
       return this;
     },
@@ -61,6 +65,10 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     removeLeadingIcon(): TextfieldComponent {
       if (component.removeLeadingIcon) {
         component.removeLeadingIcon();
+        // Update positions after removing icon
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
       }
       return this;
     },
@@ -70,6 +78,10 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     setTrailingIcon(html: string): TextfieldComponent {
       if (component.setTrailingIcon) {
         component.setTrailingIcon(html);
+        // Update positions after changing icon
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
       }
       return this;
     },
@@ -77,6 +89,10 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     removeTrailingIcon(): TextfieldComponent {
       if (component.removeTrailingIcon) {
         component.removeTrailingIcon();
+        // Update positions after removing icon
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
       }
       return this;
     },
@@ -96,6 +112,62 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
       }
       return this;
     },
+    
+    // Prefix text management (if present)
+    prefixTextElement: component.prefixTextElement || null,
+    setPrefixText(text: string): TextfieldComponent {
+      if (component.setPrefixText) {
+        component.setPrefixText(text);
+        // Update positions after changing prefix
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
+      }
+      return this;
+    },
+    
+    removePrefixText(): TextfieldComponent {
+      if (component.removePrefixText) {
+        component.removePrefixText();
+        // Update positions after removing prefix
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
+      }
+      return this;
+    },
+    
+    // Suffix text management (if present)
+    suffixTextElement: component.suffixTextElement || null,
+    setSuffixText(text: string): TextfieldComponent {
+      if (component.setSuffixText) {
+        component.setSuffixText(text);
+        // Update positions after changing suffix
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
+      }
+      return this;
+    },
+    
+    removeSuffixText(): TextfieldComponent {
+      if (component.removeSuffixText) {
+        component.removeSuffixText();
+        // Update positions after removing suffix
+        if (component.updateElementPositions) {
+          setTimeout(() => component.updateElementPositions(), 10);
+        }
+      }
+      return this;
+    },
+
+    // Update positioning manually (useful after DOM updates)
+    updatePositions(): TextfieldComponent {
+      if (component.updateElementPositions) {
+        component.updateElementPositions();
+      }
+      return this;
+    },
 
     // Event handling
     on(event: string, handler: Function): TextfieldComponent {

package/src/components/textfield/features/index.ts

@@ -0,0 +1,17 @@
+// src/components/textfield/features/index.ts
+
+// Export features
+export { withLeadingIcon } from './leading-icon';
+export { withTrailingIcon } from './trailing-icon';
+export { withPrefixText } from './prefix-text';
+export { withSuffixText } from './suffix-text';
+export { withSupportingText } from './supporting-text';
+export { withPlacement } from './placement';
+
+// Export interfaces
+export type { LeadingIconComponent, LeadingIconConfig } from './leading-icon';
+export type { TrailingIconComponent, TrailingIconConfig } from './trailing-icon';
+export type { PrefixTextComponent, PrefixTextConfig } from './prefix-text';
+export type { SuffixTextComponent, SuffixTextConfig } from './suffix-text';
+export type { SupportingTextComponent, SupportingTextConfig } from './supporting-text';
+export type { PlacementComponent } from './placement';

package/src/components/textfield/features/leading-icon.ts

@@ -0,0 +1,127 @@
+// src/components/textfield/features/leading-icon.ts
+
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+
+/**
+ * Configuration for leading icon feature
+ */
+export interface LeadingIconConfig {
+  /**
+   * Leading icon HTML content
+   */
+  leadingIcon?: string;
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with leading icon capabilities
+ */
+export interface LeadingIconComponent extends BaseComponent {
+  /**
+   * Leading icon element
+   */
+  leadingIcon: HTMLElement | null;
+  
+  /**
+   * Sets leading icon content
+   * @param html - HTML content for the icon
+   * @returns Component instance for chaining
+   */
+  setLeadingIcon: (html: string) => LeadingIconComponent;
+  
+  /**
+   * Removes leading icon
+   * @returns Component instance for chaining
+   */
+  removeLeadingIcon: () => LeadingIconComponent;
+}
+
+/**
+ * Adds leading icon to a textfield component
+ * @param config - Configuration with leading icon settings
+ * @returns Function that enhances a component with leading icon
+ */
+export const withLeadingIcon = <T extends LeadingIconConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & LeadingIconComponent => {
+    if (!config.leadingIcon) {
+      return component as any;
+    }
+    
+    // Create icon element
+    const PREFIX = config.prefix || 'mtrl';
+    const iconElement = document.createElement('span');
+    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-leading-icon`;
+    iconElement.innerHTML = config.leadingIcon;
+    
+    // Add leading icon to the component
+    component.element.appendChild(iconElement);
+    
+    // Add leading-icon class to the component
+    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
+    
+    // When there's a leading icon, adjust input padding
+    if (component.input) {
+      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
+    }
+    
+    // Add lifecycle integration if available
+    if ('lifecycle' in component && component.lifecycle?.destroy) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        iconElement.remove();
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+    
+    // Update label position based on icon
+    setTimeout(() => {
+      const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
+      if (labelEl) {
+        if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
+          (labelEl as HTMLElement).style.left = '44px';
+        }
+      }
+    }, 10);
+
+    return {
+      ...component,
+      leadingIcon: iconElement,
+      
+      setLeadingIcon(html: string) {
+        iconElement.innerHTML = html;
+        return this;
+      },
+      
+      removeLeadingIcon() {
+        if (iconElement.parentNode) {
+          iconElement.remove();
+          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
+          if (component.input) {
+            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
+          }
+          
+          // Reset label position if no prefix
+          if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
+            const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
+            if (labelEl) {
+              (labelEl as HTMLElement).style.left = '';
+            }
+          }
+          
+          this.leadingIcon = null;
+        }
+        return this;
+      }
+    };
+  };