mtrl 0.3.8 → 0.4.0

package/src/components/chips/features/label.ts

@@ -1,108 +0,0 @@
-// src/components/chips/features/label.ts
-import { ChipsConfig } from '../types';
-
-/**
- * Adds label functionality to chips component
- * 
- * @param config Chips configuration
- * @returns Component enhancer that adds label functionality
- */
-export const withLabel = (config: ChipsConfig) => component => {
-  // Track current label state
-  const state = {
-    text: config.label || '',
-    position: config.labelPosition || 'start'
-  };
-  
-  return {
-    ...component,
-    
-    // Label management API
-    label: {
-      /**
-       * Sets the label text
-       * @param {string} text - Label text
-       * @returns Label controller for chaining
-       */
-      setText(text: string) {
-        state.text = text || '';
-        
-        const labelElement = component.components?.label;
-        
-        if (labelElement) {
-          labelElement.textContent = state.text;
-          
-          // Update class based on whether label exists
-          if (state.text) {
-            component.element.classList.add(`${component.getClass('chips')}--with-label`);
-          } else {
-            component.element.classList.remove(`${component.getClass('chips')}--with-label`);
-          }
-        } else if (state.text && component.components && component.element) {
-          // Create label if it doesn't exist but we need one
-          const label = document.createElement('label');
-          label.className = component.getClass('chips-label');
-          label.textContent = state.text;
-          
-          // Add to beginning if start, end if end
-          if (state.position === 'end') {
-            component.element.appendChild(label);
-          } else {
-            component.element.insertBefore(label, component.element.firstChild);
-          }
-          
-          // Store for future reference
-          component.components.label = label;
-          component.element.classList.add(`${component.getClass('chips')}--with-label`);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets the label text
-       * @returns {string} Label text
-       */
-      getText() {
-        return state.text;
-      },
-      
-      /**
-       * Sets the label position
-       * @param {string} position - Label position ('start' or 'end')
-       * @returns Label controller for chaining
-       */
-      setPosition(position: 'start' | 'end') {
-        state.position = position || 'start';
-        
-        if (component.element && component.components?.label) {
-          const label = component.components.label;
-          
-          // Update position class
-          if (position === 'end') {
-            component.element.classList.add(`${component.getClass('chips')}--label-end`);
-          } else {
-            component.element.classList.remove(`${component.getClass('chips')}--label-end`);
-          }
-          
-          // Move label element to correct position
-          if (position === 'end') {
-            component.element.appendChild(label);
-          } else {
-            component.element.insertBefore(label, component.element.firstChild);
-          }
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets the label position
-       * @returns {string} Label position
-       */
-      getPosition() {
-        return state.position;
-      }
-    }
-  };
-};

package/src/components/chips/index.ts

@@ -1,11 +0,0 @@
-// src/components/chips/index.ts
-export { default as createChip } from './chip';
-export { default as createChips } from './chips';
-export * from './constants';
-export type { 
-  ChipConfig, 
-  ChipComponent,
-  ChipVariant,
-  ChipsConfig,
-  ChipsComponent
-} from './types';

package/src/components/chips/schema.ts

@@ -1,61 +0,0 @@
-// src/components/chips/schema.ts
-import { ChipsConfig } from './types';
-
-/**
- * Creates the base chips structure definition
- * 
- * @param component Component for class name generation
- * @param config Chips configuration
- * @returns Structure schema object
- */
-export function createChipsSchema(component, config: ChipsConfig) {
-  // Get prefixed class names
-  const getClass = (className) => component.getClass(className);
-
-  // Set default values
-  const scrollable = config.scrollable === true;
-  const vertical = config.vertical === true;
-  const isMultiSelect = config.multiSelect === true;
-  const hasLabel = config.label && config.label.trim().length > 0;
-  const labelPosition = config.labelPosition || 'start';
-  
-  // Return base structure definition formatted for createStructure
-  return {
-    element: {
-      options: {
-        className: [
-          getClass('chips'),
-          scrollable ? getClass('chips--scrollable') : null,
-          vertical ? getClass('chips--vertical') : null,
-          hasLabel ? getClass('chips--with-label') : null,
-          hasLabel && labelPosition === 'end' ? getClass('chips--label-end') : null,
-          config.class
-        ].filter(Boolean),
-        attrs: {
-          tabindex: '0',
-          role: 'group',
-          'aria-multiselectable': isMultiSelect ? 'true' : 'false'
-        }
-      },
-      children: {
-        // Label element if provided
-        ...(hasLabel ? {
-          label: {
-            options: {
-              tag: 'label',
-              className: getClass('chips-label'),
-              text: config.label
-            }
-          }
-        } : {}),
-        
-        // Chips container where chip instances will be inserted
-        chipContainer: {
-          options: {
-            className: getClass('chips-container')
-          }
-        }
-      }
-    }
-  };
-}

package/src/components/chips/types.ts

@@ -1,469 +0,0 @@
-// src/components/chips/types.ts
-
-/**
- * Chip variant types
- * @category Components
- */
-export type ChipVariant = 'filled' | 'outlined' | 'elevated' | 'assist' | 'filter' | 'input' | 'suggestion';
-
-/**
- * Available chip event types
- */
-export const CHIP_EVENTS = {
-  CHANGE: 'change',
-  SELECT: 'select',
-  DESELECT: 'deselect',
-  REMOVE: 'remove'
-} as const;
-
-/**
- * Available chips event types
- */
-export const CHIPS_EVENTS = {
-  CHANGE: 'change',
-  ADD: 'add',
-  REMOVE: 'remove'
-} as const;
-
-/**
- * Configuration interface for the Chip component
- * @category Components
- */
-export interface ChipConfig {
-  /** 
-   * Chip variant that determines visual styling
-   * @default 'filled'
-   */
-  variant?: ChipVariant | string;
-  
-  /** 
-   * Whether the chip is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /** 
-   * Whether the chip is initially selected
-   * @default false
-   */
-  selected?: boolean;
-  
-  /** 
-   * Initial chip text content
-   * @example 'Category'
-   */
-  text?: string;
-  
-  /** 
-   * Initial chip icon HTML content (alias for leadingIcon)
-   * @example '<svg>...</svg>'
-   */
-  icon?: string;
-  
-  /** 
-   * Leading icon HTML content
-   * @example '<svg>...</svg>'
-   */
-  leadingIcon?: string;
-  
-  /** 
-   * Trailing icon HTML content
-   * @example '<svg>...</svg>'
-   */
-  trailingIcon?: string;
-  
-  /** 
-   * Additional CSS classes to add to the chip
-   * @example 'filter-tag category-item'
-   */
-  class?: string;
-  
-  /** 
-   * Chip value attribute for identification
-   */
-  value?: string;
-  
-  /** 
-   * Whether to enable ripple effect
-   * @default true
-   */
-  ripple?: boolean;
-
-  /**
-   * 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];
-  };
-  
-  /**
-   * Flag to make any chip variant selectable
-   * @default false
-   */
-  selectable?: boolean;
-  
-  /**
-   * Function called when the trailing icon is clicked
-   */
-  onTrailingIconClick?: (chip: ChipComponent) => void;
-  
-  /**
-   * Function called when the chip is selected
-   */
-  onSelect?: (chip: ChipComponent) => void;
-  
-  /**
-   * Function called when the chip selection changes
-   * @param {boolean} selected - Whether the chip is selected
-   * @param {ChipComponent} chip - The chip component
-   */
-  onChange?: (selected: boolean, chip: ChipComponent) => void;
-}
-
-/**
- * Configuration interface for the Chips component
- * @category Components
- */
-export interface ChipsConfig {
-  /** 
-   * Array of chip configurations to initialize 
-   * @default []
-   */
-  chips?: ChipConfig[];
-  
-  /** 
-   * Whether the chip set is horizontally scrollable 
-   * @default false
-   */
-  scrollable?: boolean;
-  
-  /** 
-   * Whether the chip set is vertically stacked 
-   * @default false
-   */
-  vertical?: boolean;
-  
-  /** 
-   * Additional CSS classes 
-   */
-  class?: string;
-  
-  /** 
-   * CSS selector for filtering behavior 
-   */
-  selector?: string | null;
-  
-  /** 
-   * Whether multiple chips can be selected simultaneously 
-   * @default false
-   */
-  multiSelect?: boolean;
-  
-  /** 
-   * Callback function when chip selection changes 
-   */
-  onChange?: (selectedValues: (string | null)[], changedValue: string | null) => void;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Label text for the chips container
-   */
-  label?: string;
-  
-  /**
-   * Position of the label (start or end)
-   * @default 'start'
-   */
-  labelPosition?: 'start' | 'end';
-  
-  /** 
-   * Schema definition for the component structure
-   * @internal
-   */
-  schema?: any;
-  
-  /**
-   * Event handlers for component events
-   */
-  on?: {
-    [key: string]: Function;
-  };
-}
-
-/**
- * Chip component interface
- * @category Components
- */
-export interface ChipComponent {
-  /** The chip's DOM element */
-  element: HTMLElement;
-  
-  /**
-   * Gets the chip's value attribute
-   * @returns Chip value
-   */
-  getValue: () => string | null;
-  
-  /**
-   * Sets the chip's value attribute
-   * @param value - New value
-   * @returns The chip component for chaining
-   */
-  setValue: (value: string) => ChipComponent;
-  
-  /**
-   * Enables the chip (removes disabled attribute)
-   * @returns The chip component for chaining
-   */
-  enable: () => ChipComponent;
-  
-  /**
-   * Disables the chip (adds disabled attribute)
-   * @returns The chip component for chaining
-   */
-  disable: () => ChipComponent;
-  
-  /**
-   * Checks if the chip is disabled
-   * @returns True if the chip is disabled
-   */
-  isDisabled: () => boolean;
-  
-  /**
-   * Sets the chip's text content
-   * @param content - Text content
-   * @returns The chip component for chaining
-   */
-  setText: (content: string) => ChipComponent;
-  
-  /**
-   * Gets the chip's text content
-   * @returns Chip text content
-   */
-  getText: () => string;
-  
-  /**
-   * Sets the chip's icon (alias for setLeadingIcon)
-   * @param icon - Icon HTML content
-   * @returns The chip component for chaining
-   */
-  setIcon: (icon: string) => ChipComponent;
-  
-  /**
-   * Gets the chip's icon HTML content
-   * @returns Icon HTML
-   */
-  getIcon: () => string;
-  
-  /**
-   * Sets the chip's leading icon
-   * @param icon - Icon HTML content
-   * @returns The chip component for chaining
-   */
-  setLeadingIcon: (icon: string) => ChipComponent;
-  
-  /**
-   * Sets the chip's trailing icon
-   * @param icon - Icon HTML content
-   * @param onClick - Optional click handler for the trailing icon
-   * @returns The chip component for chaining
-   */
-  setTrailingIcon: (icon: string, onClick?: (chip: ChipComponent) => void) => ChipComponent;
-  
-  /**
-   * Checks if the chip is selected
-   * @returns True if the chip is selected
-   */
-  isSelected: () => boolean;
-  
-  /**
-   * Sets the chip's selected state
-   * @param selected - Whether the chip should be selected
-   * @returns The chip component for chaining
-   */
-  setSelected: (selected: boolean) => ChipComponent;
-  
-  /**
-   * Toggles the chip's selected state
-   * @returns The chip component for chaining
-   */
-  toggleSelected: () => ChipComponent;
-  
-  /**
-   * Destroys the chip component and cleans up resources
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds an event listener to the chip
-   * @param event - Event name ('click', 'focus', etc.)
-   * @param handler - Event handler function
-   * @returns The chip component for chaining
-   */
-  on: (event: string, handler: Function) => ChipComponent;
-  
-  /**
-   * Removes an event listener from the chip
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The chip component for chaining
-   */
-  off: (event: string, handler: Function) => ChipComponent;
-  
-  /**
-   * Adds CSS classes to the chip element
-   * @param classes - One or more class names to add
-   * @returns The chip component for chaining
-   */
-  addClass: (...classes: string[]) => ChipComponent;
-}
-
-/**
- * Chips component interface
- * @category Components
- */
-export interface ChipsComponent {
-  /** The chips container's DOM element */
-  element: HTMLElement;
-  
-  /**
-   * Adds a new chip to the chips container
-   * @param chipConfig - Configuration for the chip
-   * @returns The chips instance for chaining
-   */
-  addChip: (chipConfig: ChipConfig) => ChipsComponent;
-  
-  /**
-   * Removes a chip from the chips container
-   * @param chipOrIndex - Chip instance or index to remove
-   * @returns The chips instance for chaining
-   */
-  removeChip: (chipOrIndex: ChipComponent | number) => ChipsComponent;
-  
-  /**
-   * Gets all chip instances in the set
-   * @returns Array of chip instances
-   */
-  getChips: () => ChipComponent[];
-  
-  /**
-   * Gets currently selected chips
-   * @returns Array of selected chip instances
-   */
-  getSelectedChips: () => ChipComponent[];
-  
-  /**
-   * Gets the values of selected chips
-   * @returns Array of selected chip values
-   */
-  getSelectedValues: () => (string | null)[];
-  
-  /**
-   * Selects chips by their values
-   * @param values - Value or array of values to select
-   * @param triggerEvent - Whether to trigger change event (default: true)
-   * @returns The chips instance for chaining
-   */
-  selectByValue: (values: string | string[], triggerEvent?: boolean) => ChipsComponent;
-  
-  /**
-   * Clears all selections
-   * @returns The chips instance for chaining
-   */
-  clearSelection: () => ChipsComponent;
-  
-  /**
-   * Sets the scrollable state of the chips container
-   * @param isScrollable - Whether the chips container should be scrollable
-   * @returns The chips instance for chaining
-   */
-  setScrollable: (isScrollable: boolean) => ChipsComponent;
-  
-  /**
-   * Sets the vertical layout state
-   * @param isVertical - Whether the chips container should be vertically stacked
-   * @returns The chips instance for chaining
-   */
-  setVertical: (isVertical: boolean) => ChipsComponent;
-  
-  /**
-   * Sets the label text
-   * @param text - Label text
-   * @returns The chips instance for chaining
-   */
-  setLabel: (text: string) => ChipsComponent;
-  
-  /**
-   * Gets the label text
-   * @returns Label text
-   */
-  getLabel: () => string;
-  
-  /**
-   * Sets the label position
-   * @param position - Label position ('start' or 'end')
-   * @returns The chips instance for chaining
-   */
-  setLabelPosition: (position: 'start' | 'end') => ChipsComponent;
-  
-  /**
-   * Gets the label position
-   * @returns Label position
-   */
-  getLabelPosition: () => string;
-  
-  /**
-   * Scrolls to a specific chip
-   * @param chipOrIndex - Chip instance or index to scroll to
-   * @returns The chips instance for chaining 
-   */
-  scrollToChip: (chipOrIndex: ChipComponent | number) => ChipsComponent;
-  
-  /**
-   * Enables keyboard navigation between chips in the set
-   * @returns The chips instance for chaining
-   */
-  enableKeyboardNavigation: () => ChipsComponent;
-  
-  /**
-   * Destroys the chips container and all contained chips
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds an event listener to the chips container
-   * @param event - Event name ('change', etc.)
-   * @param handler - Event handler function
-   * @returns The chips instance for chaining
-   */
-  on: (event: string, handler: Function) => ChipsComponent;
-  
-  /**
-   * Removes an event listener from the chips container
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The chips instance for chaining
-   */
-  off: (event: string, handler: Function) => ChipsComponent;
-}