mtrl 0.3.7 → 0.3.9

package/src/components/chips/chip/api.ts

@@ -1,233 +0,0 @@
-// src/components/chip/api.ts
-import { ApiOptions, ChipComponent } from './types'
-
-interface ComponentWithElements {
-  element: HTMLElement;
-  text?: {
-    setText: (content: string) => any;
-    getText: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  icon?: {
-    setIcon: (html: string) => any;
-    getIcon: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  getClass: (name: string) => string;
-}
-
-/**
- * Enhances a chip component with API methods
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Chip component
- */
-export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: ComponentWithElements): ChipComponent => {
-    // Track selected state internally
-    let isSelected = component.element.classList.contains(`${component.getClass('chip')}--selected`);
-    
-    // Store the value internally as well to ensure reliability
-    let chipValue = component.element.getAttribute('data-value') || null;
-    
-    return {
-      ...component as any,
-      element: component.element,
-      
-      getValue() {
-        // First try to get from the element's attribute
-        const attrValue = component.element.getAttribute('data-value');
-        
-        // If we have an attribute value, update our internal value and return it
-        if (attrValue !== null) {
-          chipValue = attrValue;
-          return attrValue;
-        }
-        
-        // If we have an internal value, set it on the element and return it
-        if (chipValue !== null) {
-          component.element.setAttribute('data-value', chipValue);
-          return chipValue;
-        }
-        
-        // If we have text content, derive a value from it
-        const textElement = component.element.querySelector(`.${component.getClass('chip')}-text`);
-        if (textElement && textElement.textContent) {
-          // Convert text like "Ocean Theme" to "ocean"
-          const text = textElement.textContent;
-          if (text.includes(' Theme')) {
-            chipValue = text.replace(' Theme', '').toLowerCase();
-          } else {
-            chipValue = text.toLowerCase().replace(/\s+/g, '-');
-          }
-          
-          // Set the derived value on the element
-          component.element.setAttribute('data-value', chipValue);
-          return chipValue;
-        }
-        
-        return null;
-      },
-      
-      setValue(value: string) {
-        if (value !== null && value !== undefined) {
-          chipValue = value;
-          component.element.setAttribute('data-value', value);
-        } else {
-          chipValue = null;
-          component.element.removeAttribute('data-value');
-        }
-        return this;
-      },
-      
-      isDisabled() {
-        return component.element.getAttribute('aria-disabled') === 'true';
-      },
-      
-      enable() {
-        disabled.enable();
-        component.element.classList.remove(`${component.getClass('chip')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'false');
-        component.element.setAttribute('tabindex', '0');
-        return this;
-      },
-      
-      disable() {
-        disabled.disable();
-        component.element.classList.add(`${component.getClass('chip')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'true');
-        component.element.setAttribute('tabindex', '-1');
-        return this;
-      },
-      
-      setText(content: string) {
-        const containerSelector = `.${component.getClass('chip')}-content`;
-        const contentContainer = component.element.querySelector(containerSelector) || component.element;
-        
-        const textSelector = `.${component.getClass('chip')}-text`;
-        let textElement = component.element.querySelector(textSelector);
-        
-        if (!textElement && content) {
-          textElement = document.createElement('span');
-          textElement.className = `${component.getClass('chip')}-text`;
-          
-          // Find the right position to insert (after leading icon if present, or as first child)
-          const leadingIcon = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
-          if (leadingIcon) {
-            contentContainer.insertBefore(textElement, leadingIcon.nextSibling);
-          } else {
-            contentContainer.insertBefore(textElement, contentContainer.firstChild);
-          }
-        }
-        
-        if (textElement) {
-          textElement.textContent = content || '';
-          
-          // Remove the element if content is empty
-          if (!content && textElement.parentNode) {
-            textElement.parentNode.removeChild(textElement);
-          }
-        }
-        
-        return this;
-      },
-      
-      getText() {
-        const textElement = component.element.querySelector(`.${component.getClass('chip')}-text`);
-        return textElement ? textElement.textContent || '' : '';
-      },
-      
-      setIcon(icon: string) {
-        return this.setLeadingIcon(icon);
-      },
-      
-      getIcon() {
-        const iconElement = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
-        return iconElement ? iconElement.innerHTML : '';
-      },
-      
-      setLeadingIcon(icon: string) {
-        const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
-        const leadingIconSelector = `.${component.getClass('chip')}-leading-icon`;
-        let leadingIconElement = component.element.querySelector(leadingIconSelector);
-        
-        if (!leadingIconElement && icon) {
-          leadingIconElement = document.createElement('span');
-          leadingIconElement.className = `${component.getClass('chip')}-leading-icon`;
-          
-          // Insert as first child of the content container
-          contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
-        }
-        
-        if (leadingIconElement) {
-          leadingIconElement.innerHTML = icon || '';
-          
-          // Remove the element if icon is empty
-          if (!icon && leadingIconElement.parentNode) {
-            leadingIconElement.parentNode.removeChild(leadingIconElement);
-          }
-        }
-        
-        return this;
-      },
-      
-      setTrailingIcon(icon: string, onClick?: (chip: ChipComponent) => void) {
-        const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
-        const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`;
-        let trailingIconElement = component.element.querySelector(trailingIconSelector);
-        
-        if (!trailingIconElement && icon) {
-          trailingIconElement = document.createElement('span');
-          trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`;
-          
-          // Add as last child of content container
-          contentContainer.appendChild(trailingIconElement);
-          
-          // Add click handler if provided
-          if (onClick) {
-            trailingIconElement.addEventListener('click', (e) => {
-              e.stopPropagation(); // Prevent chip click event
-              onClick(this as unknown as ChipComponent);
-            });
-          }
-        }
-        
-        if (trailingIconElement) {
-          trailingIconElement.innerHTML = icon || '';
-          
-          // Remove the element if icon is empty
-          if (!icon && trailingIconElement.parentNode) {
-            trailingIconElement.parentNode.removeChild(trailingIconElement);
-          }
-        }
-        
-        return this;
-      },
-      
-      isSelected() {
-        return isSelected;
-      },
-      
-      setSelected(selected: boolean) {
-        isSelected = !!selected;
-        
-        if (selected) {
-          component.element.classList.add(`${component.getClass('chip')}--selected`);
-          component.element.setAttribute('aria-selected', 'true');
-        } else {
-          component.element.classList.remove(`${component.getClass('chip')}--selected`);
-          component.element.setAttribute('aria-selected', 'false');
-        }
-        
-        return this;
-      },
-      
-      toggleSelected() {
-        return this.setSelected(!isSelected);
-      },
-      
-      destroy() {
-        lifecycle.destroy();
-      }
-    } as unknown as ChipComponent;
-  };

package/src/components/chips/chip/chip.ts

@@ -1,131 +0,0 @@
-// src/components/chips/chip/chip.ts
-import { PREFIX } from '../../../core/config';
-import { pipe } from '../../../core/compose';
-import { createBase, withElement } from '../../../core/compose/component';
-import {
-  withEvents,
-  withText,
-  withIcon,
-  withVariant,
-  withRipple,
-  withDisabled,
-  withLifecycle
-} from '../../../core/compose/features';
-import { withAPI } from './api';
-import { ChipConfig, ChipComponent } from '../types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Chip component
- * @param {ChipConfig} config - Chip configuration
- * @returns {ChipComponent} Chip component instance
- */
-const createChip = (config: ChipConfig = {}): ChipComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Create base component with core features
-    const chip = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withDisabled(baseConfig),
-      withRipple(baseConfig),
-      withLifecycle()
-    )(baseConfig);
-    
-    // Create a container for the chip content to ensure proper ordering
-    const contentContainer = document.createElement('div');
-    contentContainer.className = `${chip.getClass('chip')}-content`;
-    contentContainer.style.display = 'flex';
-    contentContainer.style.alignItems = 'center';
-    contentContainer.style.gap = '8px';
-    contentContainer.style.width = '100%';
-    chip.element.appendChild(contentContainer);
-    
-    // Add leading icon if provided
-    if (config.leadingIcon || config.icon) {
-      const leadingIconElement = document.createElement('span');
-      leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`;
-      leadingIconElement.innerHTML = config.leadingIcon || config.icon || '';
-      contentContainer.appendChild(leadingIconElement);
-    }
-
-    // Add text element if provided
-    if (config.text) {
-      const textElement = document.createElement('span');
-      textElement.className = `${chip.getClass('chip')}-text`;
-      textElement.textContent = config.text;
-      contentContainer.appendChild(textElement);
-    }
-
-    // Add trailing icon if provided
-    if (config.trailingIcon) {
-      const trailingIconElement = document.createElement('span');
-      trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`;
-      trailingIconElement.innerHTML = config.trailingIcon;
-      
-      // Add click handler for trailing icon
-      if (config.onTrailingIconClick) {
-        trailingIconElement.addEventListener('click', (e) => {
-          e.stopPropagation(); // Prevent chip click event
-          config.onTrailingIconClick(chip as unknown as ChipComponent);
-        });
-      }
-      
-      contentContainer.appendChild(trailingIconElement);
-    }
-    
-    // Add selected class if needed
-    if (config.selected) {
-      chip.element.classList.add(`${chip.getClass('chip')}--selected`);
-      chip.element.setAttribute('aria-selected', 'true');
-    }
-    
-    // Set data-value attribute if provided
-    if (config.value) {
-      chip.element.setAttribute('data-value', config.value);
-    }
-
-    // Add API methods to the component
-    const enhancedChip = withAPI(getApiConfig(chip))(chip);
-    
-    // Initialize value if not already set
-    if (!chip.element.hasAttribute('data-value') && config.text) {
-      enhancedChip.getValue(); // This will trigger the automatic value generation in our fixed API
-    }
-
-    // Add click handler for selection toggle
-    if (config.variant === 'filter' || 
-        config.variant === 'assist' ||
-        config.variant === 'suggestion' ||
-        config.selectable) {
-      
-      chip.element.addEventListener('click', () => {
-        if (enhancedChip.isDisabled()) return;
-        
-        const wasSelected = enhancedChip.isSelected();
-        enhancedChip.toggleSelected();
-        const isNowSelected = enhancedChip.isSelected();
-        
-        // Call onChange with correct parameters
-        if (config.onChange && wasSelected !== isNowSelected) {
-          config.onChange(isNowSelected, enhancedChip);
-        }
-        
-        // Call onSelect with consistent parameters
-        if (config.onSelect) {
-          config.onSelect(enhancedChip);
-        }
-      });
-    }
-
-    return enhancedChip as unknown as ChipComponent;
-  } catch (error) {
-    console.error('Chip creation error:', error);
-    throw new Error(`Failed to create chip: ${(error as Error).message}`);
-  }
-};
-
-export default createChip;

package/src/components/chips/chip/config.ts

@@ -1,91 +0,0 @@
-// src/components/chips/chip/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../../core/config/component-config';
-import { ChipConfig, BaseComponent } from '../types';
-
-/**
- * Default configuration for the Chip component
- */
-export const defaultConfig: ChipConfig = {
-  variant: 'filled',
-  ripple: true
-};
-
-/**
- * Creates the base configuration for Chip component
- * @param {ChipConfig} config - User provided configuration
- * @returns {ChipConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: ChipConfig = {}): ChipConfig => 
-  createComponentConfig(defaultConfig, config, 'chip') as ChipConfig;
-
-/**
- * Generates element configuration for the Chip component
- * @param {ChipConfig} config - Chip configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: ChipConfig) => {
-  // Create the attributes object
-  const attrs: Record<string, any> = {
-    role: 'button',
-    tabindex: '0'
-  };
-  
-  // Only add aria-disabled attribute if needed
-  if (config.disabled === true) {
-    attrs['aria-disabled'] = 'true';
-  }
-  
-  // Add aria-selected if specified
-  if (config.selected === true) {
-    attrs['aria-selected'] = 'true';
-  } else if (config.selected === false) {
-    attrs['aria-selected'] = 'false';
-  }
-
-  // Define additional classes
-  const className = [
-    config.class,
-    config.selected ? `${config.prefix}-chip--selected` : null
-  ];
-  
-  return createElementConfig(config, {
-    tag: 'div',
-    attrs,
-    className,
-    forwardEvents: {
-      click: (component: BaseComponent) => component.element.getAttribute('aria-disabled') !== 'true',
-      keydown: (component: BaseComponent, event: KeyboardEvent) => {
-        // Handle space and enter key for accessibility
-        if (event.key === ' ' || event.key === 'Enter') {
-          event.preventDefault();
-          component.element.click();
-          return true;
-        }
-        return false;
-      },
-      focus: true,
-      blur: true
-    }
-  });
-};
-
-/**
- * Creates API configuration for the Chip component
- * @param {BaseComponent} comp - Component with disabled and lifecycle features
- * @returns {Object} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent) => ({
-  disabled: {
-    enable: () => comp.disabled?.enable(),
-    disable: () => comp.disabled?.disable()
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle?.destroy?.()
-  }
-});
-
-export default defaultConfig;

package/src/components/chips/chip/index.ts

@@ -1,3 +0,0 @@
-// src/components/chips/chip/index.ts
-export { default } from './chip';
-export * from './config';