mtrl 0.3.6 → 0.3.8

package/src/components/textfield/features.ts

@@ -1,322 +0,0 @@
-// src/components/textfield/features.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;
-}
-
-/**
- * Configuration for trailing icon feature
- */
-export interface TrailingIconConfig {
-  /**
-   * Trailing icon HTML content
-   */
-  trailingIcon?: string;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * 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 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;
-}
-
-/**
- * Component with trailing icon capabilities
- */
-export interface TrailingIconComponent extends BaseComponent {
-  /**
-   * Trailing icon element
-   */
-  trailingIcon: HTMLElement | null;
-  
-  /**
-   * Sets trailing icon content
-   * @param html - HTML content for the icon
-   * @returns Component instance for chaining
-   */
-  setTrailingIcon: (html: string) => TrailingIconComponent;
-  
-  /**
-   * Removes trailing icon
-   * @returns Component instance for chaining
-   */
-  removeTrailingIcon: () => TrailingIconComponent;
-}
-
-/**
- * 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;
-}
-
-/**
- * Creates and manages a leading icon for a component
- * @param config - Configuration object with leading icon settings
- * @returns Function that enhances a component with leading icon functionality
- */
-export const withLeadingIcon = <T extends LeadingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & LeadingIconComponent => {
-    if (!config.leadingIcon) {
-      return component as C & LeadingIconComponent;
-    }
-    
-    // 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);
-      };
-    }
-
-    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`);
-          }
-          this.leadingIcon = null;
-        }
-        return this;
-      }
-    };
-  };
-
-/**
- * Creates and manages a trailing icon for a component
- * @param config - Configuration object with trailing icon settings
- * @returns Function that enhances a component with trailing icon functionality
- */
-export const withTrailingIcon = <T extends TrailingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & TrailingIconComponent => {
-    if (!config.trailingIcon) {
-      return component as C & TrailingIconComponent;
-    }
-    
-    // Create icon element
-    const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-trailing-icon`;
-    iconElement.innerHTML = config.trailingIcon;
-    
-    // Add trailing icon to the component
-    component.element.appendChild(iconElement);
-    
-    // Add trailing-icon class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-    
-    // When there's a trailing icon, adjust input padding
-    if (component.input) {
-      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-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);
-      };
-    }
-
-    return {
-      ...component,
-      trailingIcon: iconElement,
-      
-      setTrailingIcon(html: string) {
-        iconElement.innerHTML = html;
-        return this;
-      },
-      
-      removeTrailingIcon() {
-        if (iconElement.parentNode) {
-          iconElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-          if (component.input) {
-            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-          }
-          this.trailingIcon = null;
-        }
-        return this;
-      }
-    };
-  };
-
-/**
- * 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 => {
-    if (!config.supportingText) {
-      return component as C & SupportingTextComponent;
-    }
-    
-    // Create supporting text element
-    const PREFIX = config.prefix || 'mtrl';
-    const supportingElement = document.createElement('div');
-    supportingElement.className = `${PREFIX}-${config.componentName || 'textfield'}-helper`;
-    supportingElement.textContent = config.supportingText;
-    
-    if (config.error) {
-      supportingElement.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`);
-      component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-    }
-    
-    // Add supporting text to the component
-    component.element.appendChild(supportingElement);
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        supportingElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      supportingTextElement: supportingElement,
-      
-      setSupportingText(text: string, isError = false) {
-        supportingElement.textContent = text;
-        
-        // Handle error state
-        supportingElement.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`, isError);
-        component.element.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}--error`, isError);
-        
-        return this;
-      },
-      
-      removeSupportingText() {
-        if (supportingElement.parentNode) {
-          supportingElement.remove();
-          this.supportingTextElement = null;
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-        }
-        return this;
-      }
-    };
-  };

package/src/core/collection/adapters/base.js

@@ -1,26 +0,0 @@
-// src/core/collection/adapters/base.js
-
-export const OPERATORS = {
-  EQ: 'eq',
-  NE: 'ne',
-  GT: 'gt',
-  GTE: 'gte',
-  LT: 'lt',
-  LTE: 'lte',
-  IN: 'in',
-  NIN: 'nin',
-  CONTAINS: 'contains',
-  STARTS_WITH: 'startsWith',
-  ENDS_WITH: 'endsWith'
-}
-
-export const createBaseAdapter = ({ onError } = {}) => {
-  const handleError = (error, context) => {
-    onError?.(error, context)
-    throw error
-  }
-
-  return {
-    handleError
-  }
-}

package/src/core/collection/collection.js

@@ -1,259 +0,0 @@
-// src/core/collection/collection.js
-
-/**
- * Event types for collection changes
- */
-export const COLLECTION_EVENTS = {
-  CHANGE: 'change',
-  ADD: 'add',
-  UPDATE: 'update',
-  REMOVE: 'remove',
-  ERROR: 'error',
-  LOADING: 'loading'
-}
-
-/**
- * Query operators for filtering
- */
-export const OPERATORS = {
-  EQ: 'eq',
-  NE: 'ne',
-  GT: 'gt',
-  GTE: 'gte',
-  LT: 'lt',
-  LTE: 'lte',
-  IN: 'in',
-  NIN: 'nin',
-  CONTAINS: 'contains',
-  STARTS_WITH: 'startsWith',
-  ENDS_WITH: 'endsWith'
-}
-
-/**
- * Base Collection class providing data management interface
- * @template T - Type of items in collection
- */
-export class Collection {
-  #items = new Map()
-  #observers = new Set()
-  #query = null
-  #sort = null
-  #loading = false
-  #error = null
-
-  /**
-   * Creates a new collection instance
-   * @param {Object} config - Collection configuration
-   * @param {Function} config.transform - Transform function for items
-   * @param {Function} config.validate - Validation function for items
-   */
-  constructor (config = {}) {
-    this.transform = config.transform || (item => item)
-    this.validate = config.validate || (() => true)
-  }
-
-  /**
-   * Subscribe to collection changes
-   * @param {Function} observer - Observer callback
-   * @returns {Function} Unsubscribe function
-   */
-  subscribe (observer) {
-    this.#observers.add(observer)
-    return () => this.#observers.delete(observer)
-  }
-
-  /**
-   * Notify observers of collection changes
-   * @param {string} event - Event type
-   * @param {*} data - Event data
-   */
-  #notify (event, data) {
-    this.#observers.forEach(observer => observer({ event, data }))
-  }
-
-  /**
-   * Set loading state
-   * @param {boolean} loading - Loading state
-   */
-  #setLoading (loading) {
-    this.#loading = loading
-    this.#notify(COLLECTION_EVENTS.LOADING, loading)
-  }
-
-  /**
-   * Set error state
-   * @param {Error} error - Error object
-   */
-  #setError (error) {
-    this.#error = error
-    this.#notify(COLLECTION_EVENTS.ERROR, error)
-  }
-
-  /**
-   * Get collection items based on current query and sort
-   * @returns {Array<T>} Collection items
-   */
-  get items () {
-    let result = Array.from(this.#items.values())
-
-    if (this.#query) {
-      result = result.filter(this.#query)
-    }
-
-    if (this.#sort) {
-      result.sort(this.#sort)
-    }
-
-    return result
-  }
-
-  /**
-   * Get collection size
-   * @returns {number} Number of items
-   */
-  get size () {
-    return this.#items.size
-  }
-
-  /**
-   * Get loading state
-   * @returns {boolean} Loading state
-   */
-  get loading () {
-    return this.#loading
-  }
-
-  /**
-   * Get error state
-   * @returns {Error|null} Error object
-   */
-  get error () {
-    return this.#error
-  }
-
-  /**
-   * Set query filter
-   * @param {Function} queryFn - Query function
-   */
-  query (queryFn) {
-    this.#query = queryFn
-    this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-  }
-
-  /**
-   * Set sort function
-   * @param {Function} sortFn - Sort function
-   */
-  sort (sortFn) {
-    this.#sort = sortFn
-    this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-  }
-
-  /**
-   * Add items to collection
-   * @param {T|Array<T>} items - Items to add
-   * @returns {Promise<Array<T>>} Added items
-   */
-  async add (items) {
-    try {
-      this.#setLoading(true)
-      const toAdd = Array.isArray(items) ? items : [items]
-
-      const validated = toAdd.filter(this.validate)
-      const transformed = validated.map(this.transform)
-
-      transformed.forEach(item => {
-        if (!item.id) {
-          throw new Error('Items must have an id property')
-        }
-        this.#items.set(item.id, item)
-      })
-
-      this.#notify(COLLECTION_EVENTS.ADD, transformed)
-      this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-
-      return transformed
-    } catch (error) {
-      this.#setError(error)
-      throw error
-    } finally {
-      this.#setLoading(false)
-    }
-  }
-
-  /**
-   * Update items in collection
-   * @param {T|Array<T>} items - Items to update
-   * @returns {Promise<Array<T>>} Updated items
-   */
-  async update (items) {
-    try {
-      this.#setLoading(true)
-      const toUpdate = Array.isArray(items) ? items : [items]
-
-      const updated = toUpdate.map(item => {
-        if (!this.#items.has(item.id)) {
-          throw new Error(`Item with id ${item.id} not found`)
-        }
-
-        const validated = this.validate(item)
-        if (!validated) {
-          throw new Error(`Invalid item: ${item.id}`)
-        }
-
-        const transformed = this.transform(item)
-        this.#items.set(item.id, transformed)
-        return transformed
-      })
-
-      this.#notify(COLLECTION_EVENTS.UPDATE, updated)
-      this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-
-      return updated
-    } catch (error) {
-      this.#setError(error)
-      throw error
-    } finally {
-      this.#setLoading(false)
-    }
-  }
-
-  /**
-   * Remove items from collection
-   * @param {string|Array<string>} ids - Item IDs to remove
-   * @returns {Promise<Array<string>>} Removed item IDs
-   */
-  async remove (ids) {
-    try {
-      this.#setLoading(true)
-      const toRemove = Array.isArray(ids) ? ids : [ids]
-
-      toRemove.forEach(id => {
-        if (!this.#items.has(id)) {
-          throw new Error(`Item with id ${id} not found`)
-        }
-        this.#items.delete(id)
-      })
-
-      this.#notify(COLLECTION_EVENTS.REMOVE, toRemove)
-      this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-
-      return toRemove
-    } catch (error) {
-      this.#setError(error)
-      throw error
-    } finally {
-      this.#setLoading(false)
-    }
-  }
-
-  /**
-   * Clear all items from collection
-   */
-  clear () {
-    this.#items.clear()
-    this.#query = null
-    this.#sort = null
-    this.#notify(COLLECTION_EVENTS.CHANGE, this.items)
-  }
-}