mtrl 0.1.2 → 0.2.0

package/src/components/chip/types.ts

@@ -0,0 +1,172 @@
+// src/components/chip/types.ts
+import { CHIP_VARIANTS, CHIP_SIZES } from './constants';
+
+/**
+ * Configuration interface for the Chip component
+ */
+export interface ChipConfig {
+  /** Chip variant (filled, outlined, elevated, assist, filter, input, suggestion) */
+  variant?: keyof typeof CHIP_VARIANTS | string;
+  
+  /** Chip size (small, medium, large) */
+  size?: keyof typeof CHIP_SIZES | string;
+  
+  /** Whether the chip is initially disabled */
+  disabled?: boolean;
+  
+  /** Whether the chip is initially selected */
+  selected?: boolean;
+  
+  /** Initial chip text content */
+  text?: string;
+  
+  /** Initial chip icon HTML content */
+  icon?: string;
+  
+  /** Optional leading icon HTML content */
+  leadingIcon?: string;
+  
+  /** Optional trailing icon HTML content */
+  trailingIcon?: string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Chip value attribute */
+  value?: string;
+  
+  /** Whether to enable ripple effect */
+  ripple?: boolean;
+  
+  /** Ripple effect configuration */
+  rippleConfig?: {
+    duration?: number;
+    timing?: string;
+    opacity?: [string, string];
+  };
+  
+  /** Function called when the trailing icon is clicked */
+  onTrailingIconClick?: (chip: ChipComponent) => void;
+  
+  /** Function called when the chip is selected */
+  onSelect?: (chip: ChipComponent) => void;
+}
+
+/**
+ * Icon API interface
+ */
+export interface IconAPI {
+  setIcon: (html: string) => IconAPI;
+  getIcon: () => string;
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Text API interface
+ */
+export interface TextAPI {
+  setText: (content: string) => TextAPI;
+  getText: () => string;
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Chip component interface
+ */
+export interface ChipComponent {
+  element: HTMLElement;
+  text: TextAPI;
+  icon: IconAPI;
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  
+  /** Gets the class with the specified name */
+  getClass: (name: string) => string;
+  
+  /** Gets the chip's value */
+  getValue: () => string | null;
+  
+  /** Sets the chip's value */
+  setValue: (value: string) => ChipComponent;
+  
+  /** Enables the chip */
+  enable: () => ChipComponent;
+  
+  /** Disables the chip */
+  disable: () => ChipComponent;
+  
+  /** Sets the chip's text content */
+  setText: (content: string) => ChipComponent;
+  
+  /** Gets the chip's text content */
+  getText: () => string;
+  
+  /** Sets the chip's icon */
+  setIcon: (icon: string) => ChipComponent;
+  
+  /** Gets the chip's icon */
+  getIcon: () => string;
+  
+  /** Sets the chip's trailing icon */
+  setTrailingIcon: (icon: string) => ChipComponent;
+  
+  /** Checks if the chip is selected */
+  isSelected: () => boolean;
+  
+  /** Sets the chip's selected state */
+  setSelected: (selected: boolean) => ChipComponent;
+  
+  /** Toggles the chip's selected state */
+  toggleSelected: () => ChipComponent;
+  
+  /** Destroys the chip component and cleans up resources */
+  destroy: () => void;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => ChipComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => ChipComponent;
+  
+  /** Add CSS classes */
+  addClass: (...classes: string[]) => ChipComponent;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  getClass: (name?: string) => string;
+  config: any;
+  text?: TextAPI;
+  icon?: IconAPI;
+  disabled?: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}

package/src/components/list/api.ts

@@ -0,0 +1,72 @@
+// src/components/list/api.ts
+import { BaseComponent, ListComponent, ListItemConfig } from './types';
+
+/**
+ * API options interface
+ */
+interface ApiOptions {
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Enhances list 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): ListComponent => ({
+    ...component as any,
+    element: component.element,
+    items: component.items as Map<string, any>,
+    selectedItems: component.selectedItems as Set<string>,
+
+    // Selection management
+    getSelected(): string[] {
+      return component.getSelected?.() || [];
+    },
+    
+    setSelected(ids: string[]): void {
+      component.setSelected?.(ids);
+    },
+
+    // Item management
+    addItem(itemConfig: ListItemConfig): void {
+      component.addItem?.(itemConfig);
+    },
+    
+    removeItem(id: string): void {
+      component.removeItem?.(id);
+    },
+
+    // Event handling
+    on(event: string, handler: Function): ListComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): ListComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): ListComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): ListComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });

package/src/components/list/config.ts

@@ -0,0 +1,43 @@
+// src/components/list/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { ListConfig, BaseComponent } from './types';
+import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+
+/**
+ * Default configuration for the List component
+ */
+export const defaultConfig: ListConfig = {
+  type: LIST_TYPES.DEFAULT,
+  layout: LIST_LAYOUTS.HORIZONTAL,
+  items: []
+};
+
+/**
+ * Creates the base configuration for List component
+ * @param {ListConfig} config - User provided configuration
+ * @returns {ListConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ListConfig = {}): ListConfig => 
+  createComponentConfig(defaultConfig, config, 'list') as ListConfig;
+
+/**
+ * Generates element configuration for the List component
+ * @param {ListConfig} config - List configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ListConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
+    attrs: {
+      'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined
+    },
+    componentName: 'list',
+    className: config.class
+  });
+
+export default defaultConfig;

package/src/components/list/{constants.js → constants.ts}

@@ -1,4 +1,4 @@
-// src/components/list/constants.js
+// src/components/list/constants.ts
 
 /**
  * List types/variants
@@ -8,7 +8,7 @@ export const LIST_TYPES = {
   SINGLE_SELECT: 'single', // Single selection list
   MULTI_SELECT: 'multi', // Multiple selection list
   RADIO: 'radio' // Radio button list
-}
+} as const;
 
 /**
  * List layout variants
@@ -16,7 +16,15 @@ export const LIST_TYPES = {
 export const LIST_LAYOUTS = {
   HORIZONTAL: 'horizontal', // Default horizontal layout
   VERTICAL: 'vertical' // Items with more content stacked vertically
-}
+} as const;
+
+/**
+ * List item layouts
+ */
+export const LIST_ITEM_LAYOUTS = {
+  HORIZONTAL: 'horizontal', // Default horizontal layout
+  VERTICAL: 'vertical' // Stacked layout with vertical alignment
+} as const;
 
 /**
  * List element class names
@@ -27,11 +35,20 @@ export const LIST_CLASSES = {
   GROUP_TITLE: 'list-group-title',
   DIVIDER: 'list-divider',
   SECTION: 'list-section',
-  SECTION_TITLE: 'list-section-title'
-}
+  SECTION_TITLE: 'list-section-title',
+  ITEM: 'list-item',
+  ITEM_CONTENT: 'list-item-content',
+  ITEM_LEADING: 'list-item-leading',
+  ITEM_TEXT: 'list-item-text',
+  ITEM_OVERLINE: 'list-item-overline',
+  ITEM_HEADLINE: 'list-item-headline',
+  ITEM_SUPPORTING: 'list-item-supporting',
+  ITEM_META: 'list-item-meta',
+  ITEM_TRAILING: 'list-item-trailing'
+} as const;
 
 /**
- * List configuration schema
+ * List validation schema
  */
 export const LIST_SCHEMA = {
   type: 'object',
@@ -86,4 +103,14 @@ export const LIST_SCHEMA = {
       optional: true
     }
   }
-}
+} as const;
+
+/**
+ * List item states
+ */
+export const LIST_ITEM_STATES = {
+  SELECTED: 'selected',
+  DISABLED: 'disabled',
+  FOCUSED: 'focused',
+  HOVERED: 'hovered'
+} as const;

package/src/components/list/features.ts

@@ -0,0 +1,224 @@
+// src/components/list/features.ts
+import { 
+  ListConfig, 
+  ListItemConfig, 
+  ListItemData, 
+  BaseComponent,
+  SelectionChangeEvent
+} from './types';
+import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+import { createDivider, createSectionTitle } from './utils';
+import createListItem from './list-item';
+
+/**
+ * Enhances component with list content and functionality
+ * @param {ListConfig} config - List configuration
+ * @returns {Function} Higher-order function that adds list features to component
+ */
+export const withListContent = (config: ListConfig) => 
+  (component: BaseComponent): BaseComponent => {
+    const { element } = component;
+    const prefix = component.prefix || config.prefix || '';
+    const items = new Map<string, ListItemData>();
+    const selectedItems = new Set<string>();
+
+    // Set list type
+    element.setAttribute('data-type', config.type || LIST_TYPES.DEFAULT);
+
+    // Handle keyboard navigation
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      const focusedItem = document.activeElement as HTMLElement;
+      if (!focusedItem?.classList.contains(`${prefix}-list-item`)) return;
+
+      const listItems = Array.from(element.querySelectorAll(`.${prefix}-list-item`)) as HTMLElement[];
+      const currentIndex = listItems.indexOf(focusedItem);
+
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowRight':
+          event.preventDefault();
+          const nextItem = listItems[currentIndex + 1];
+          if (nextItem) nextItem.focus();
+          break;
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          event.preventDefault();
+          const prevItem = listItems[currentIndex - 1];
+          if (prevItem) prevItem.focus();
+          break;
+        case 'Home':
+          event.preventDefault();
+          listItems[0]?.focus();
+          break;
+        case 'End':
+          event.preventDefault();
+          listItems[listItems.length - 1]?.focus();
+          break;
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          handleItemClick(focusedItem);
+          break;
+      }
+    };
+
+    // Handle item selection
+    const handleItemClick = (itemElement: HTMLElement): void => {
+      const id = itemElement.dataset.id;
+      if (!id) return;
+
+      const itemData = items.get(id);
+      if (!itemData || itemData.disabled) return;
+
+      switch (config.type) {
+        case LIST_TYPES.SINGLE_SELECT:
+          // Deselect previously selected item
+          selectedItems.forEach(selectedId => {
+            const selected = items.get(selectedId);
+            if (selected) {
+              selected.element.classList.remove(`${prefix}-list-item--selected`);
+              selected.element.setAttribute('aria-selected', 'false');
+            }
+          });
+          selectedItems.clear();
+
+          // Select new item
+          itemElement.classList.add(`${prefix}-list-item--selected`);
+          itemElement.setAttribute('aria-selected', 'true');
+          selectedItems.add(id);
+          break;
+
+        case LIST_TYPES.MULTI_SELECT:
+          const isSelected = selectedItems.has(id);
+          if (isSelected) {
+            itemElement.classList.remove(`${prefix}-list-item--selected`);
+            itemElement.setAttribute('aria-selected', 'false');
+            selectedItems.delete(id);
+          } else {
+            itemElement.classList.add(`${prefix}-list-item--selected`);
+            itemElement.setAttribute('aria-selected', 'true');
+            selectedItems.add(id);
+          }
+          break;
+      }
+
+      component.emit?.('selectionChange', {
+        selected: Array.from(selectedItems),
+        item: itemData,
+        type: config.type
+      } as SelectionChangeEvent);
+    };
+
+    // Create items from configuration
+    const createItems = (itemsConfig: ListItemConfig[] = [], container: HTMLElement = element): void => {
+      itemsConfig.forEach((itemConfig, index) => {
+        if (itemConfig.divider) {
+          container.appendChild(createDivider(prefix));
+          return;
+        }
+
+        const item = createListItem({
+          ...itemConfig,
+          layout: config.layout || LIST_LAYOUTS.HORIZONTAL,
+          role: config.type === LIST_TYPES.RADIO ? 'radio' : 'option'
+        });
+
+        item.element.dataset.id = itemConfig.id;
+        item.element.tabIndex = index === 0 ? 0 : -1;
+        items.set(itemConfig.id, item);
+
+        if (itemConfig.selected) {
+          selectedItems.add(itemConfig.id);
+          item.element.classList.add(`${prefix}-list-item--selected`);
+          item.element.setAttribute('aria-selected', 'true');
+        }
+
+        container.appendChild(item.element);
+      });
+    };
+
+    // Create sections if configured
+    if (config.sections?.length) {
+      config.sections.forEach(section => {
+        const sectionEl = document.createElement('div');
+        sectionEl.className = `${prefix}-list-section`;
+        sectionEl.setAttribute('role', 'group');
+        if (section.title) {
+          sectionEl.appendChild(createSectionTitle(section.title, prefix));
+        }
+        createItems(section.items, sectionEl);
+        element.appendChild(sectionEl);
+      });
+    } else if (config.items) {
+      createItems(config.items);
+    }
+
+    // Add event listeners
+    element.addEventListener('click', (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const item = target.closest(`.${prefix}-list-item`) as HTMLElement;
+      if (item) handleItemClick(item);
+    });
+
+    element.addEventListener('keydown', handleKeyDown);
+
+    // Clean up
+    if (component.lifecycle) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        items.clear();
+        selectedItems.clear();
+        element.removeEventListener('keydown', handleKeyDown);
+        originalDestroy?.();
+      };
+    }
+
+    return {
+      ...component,
+      items,
+      selectedItems,
+
+      // Public methods
+      getSelected: () => Array.from(selectedItems),
+
+      setSelected: (ids: string[]) => {
+        selectedItems.clear();
+        items.forEach((item, id) => {
+          const isSelected = ids.includes(id);
+          item.element.classList.toggle(`${prefix}-list-item--selected`, isSelected);
+          item.element.setAttribute('aria-selected', isSelected.toString());
+          if (isSelected) selectedItems.add(id);
+        });
+        component.emit?.('selectionChange', {
+          selected: Array.from(selectedItems),
+          type: config.type
+        } as SelectionChangeEvent);
+      },
+
+      addItem: (itemConfig: ListItemConfig) => {
+        if (items.has(itemConfig.id)) return;
+
+        const item = createListItem({
+          ...itemConfig,
+          layout: config.layout || LIST_LAYOUTS.HORIZONTAL
+        });
+
+        item.element.dataset.id = itemConfig.id;
+        items.set(itemConfig.id, item);
+        element.appendChild(item.element);
+
+        component.emit?.('itemAdded', { id: itemConfig.id, item });
+      },
+
+      removeItem: (id: string) => {
+        const item = items.get(id);
+        if (!item) return;
+
+        item.element.remove();
+        items.delete(id);
+        selectedItems.delete(id);
+
+        component.emit?.('itemRemoved', { id, item });
+      }
+    };
+  };

package/src/components/list/index.ts

@@ -0,0 +1,14 @@
+// src/components/list/index.ts
+export { default } from './list'
+export { default as createListItem } from './list-item'
+export {
+  LIST_TYPES,
+  LIST_LAYOUTS,
+  LIST_ITEM_LAYOUTS
+} from './constants'
+export {
+  ListConfig,
+  ListComponent,
+  ListItemConfig,
+  ListSectionConfig
+} from './types'