mtrl 0.1.3 → 0.2.0

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'

package/src/components/list/list-item.ts

@@ -0,0 +1,120 @@
+// src/components/list/list-item.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withDisabled } from '../../core/compose/features';
+import { ListItemConfig } from './types';
+import { LIST_ITEM_LAYOUTS, LIST_CLASSES } from './constants';
+import { createElement } from './utils';
+
+/**
+ * Creates list item content based on configuration
+ * @param {BaseComponent} component - Component to enhance
+ * @param {ListItemConfig} config - List item configuration
+ * @returns {BaseComponent} Enhanced component
+ */
+const withItemContent = (config: ListItemConfig) => (component: any): any => {
+  const { element } = component;
+  const prefix = config.prefix || PREFIX;
+  const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL;
+
+  // Create content container
+  const content = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_CONTENT}`);
+
+  // Add leading content (icon/avatar)
+  if (config.leading) {
+    const leading = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_LEADING}`);
+    if (typeof config.leading === 'string') {
+      leading.innerHTML = config.leading;
+    } else {
+      leading.appendChild(config.leading);
+    }
+    element.appendChild(leading);
+  }
+
+  // Text wrapper for proper alignment
+  const textWrapper = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TEXT}`);
+
+  // Add overline text (vertical only)
+  if (isVertical && config.overline) {
+    const overline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_OVERLINE}`, config.overline);
+    textWrapper.appendChild(overline);
+  }
+
+  // Add headline (primary text)
+  if (config.headline) {
+    const headline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_HEADLINE}`, config.headline);
+    textWrapper.appendChild(headline);
+  }
+
+  // Add supporting text (secondary text)
+  if (config.supportingText) {
+    const supporting = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_SUPPORTING}`, config.supportingText);
+    textWrapper.appendChild(supporting);
+  }
+
+  content.appendChild(textWrapper);
+
+  // Add meta information (vertical only)
+  if (isVertical && config.meta) {
+    const meta = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_META}`);
+    if (typeof config.meta === 'string') {
+      meta.textContent = config.meta;
+    } else {
+      meta.appendChild(config.meta);
+    }
+    content.appendChild(meta);
+  }
+
+  element.appendChild(content);
+
+  // Add trailing content (icon/meta)
+  if (config.trailing) {
+    const trailing = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TRAILING}`);
+    if (typeof config.trailing === 'string') {
+      trailing.innerHTML = config.trailing;
+    } else {
+      trailing.appendChild(config.trailing);
+    }
+    element.appendChild(trailing);
+  }
+
+  // Handle selected state
+  if (config.selected) {
+    element.setAttribute('aria-selected', 'true');
+    element.classList.add(`${prefix}-${LIST_CLASSES.ITEM}--selected`);
+  }
+
+  return component;
+};
+
+/**
+ * Creates a list item component
+ * @param {ListItemConfig} config - List item configuration
+ * @returns {Object} List item component instance
+ */
+const createListItem = (config: ListItemConfig): any => {
+  const baseConfig = {
+    ...config,
+    componentName: 'list-item',
+    prefix: PREFIX
+  };
+
+  const layoutClass = config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : '';
+  const combinedClass = `${layoutClass} ${config.class || ''}`.trim();
+
+  return pipe(
+    createBase,
+    withEvents(),
+    withElement({
+      tag: 'div',
+      role: config.role || 'listitem',
+      componentName: 'list-item',
+      className: combinedClass
+    }),
+    withDisabled(baseConfig),
+    withItemContent(baseConfig)
+  )(baseConfig);
+};
+
+export default createListItem;

package/src/components/list/list.ts

@@ -0,0 +1,37 @@
+// src/components/list/list.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withDisabled, withLifecycle } from '../../core/compose/features';
+import { withAPI } from './api';
+import { withListContent } from './features';
+import { ListConfig } from './types';
+import { createBaseConfig, getElementConfig } from './config';
+
+/**
+ * Creates a List component
+ * @param {ListConfig} config - List configuration
+ * @returns {Object} List component instance
+ */
+const createList = (config: ListConfig = {}): any => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    return pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      withListContent(baseConfig),
+      comp => withAPI({
+        disabled: comp.disabled,
+        lifecycle: comp.lifecycle
+      })(comp)
+    )(baseConfig);
+  } catch (error) {
+    console.error('List creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create list: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createList;

package/src/components/list/types.ts

@@ -0,0 +1,179 @@
+// src/components/list/types.ts
+import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+
+/**
+ * List item configuration
+ */
+export interface ListItemConfig {
+  /** Unique identifier for the item */
+  id: string;
+  
+  /** Item layout (horizontal/vertical) */
+  layout?: keyof typeof LIST_LAYOUTS | string;
+  
+  /** Leading content (icon/avatar) */
+  leading?: string | HTMLElement;
+  
+  /** Primary text */
+  headline?: string;
+  
+  /** Secondary text */
+  supportingText?: string;
+  
+  /** Trailing content (icon/meta) */
+  trailing?: string | HTMLElement;
+  
+  /** Text above headline (vertical only) */
+  overline?: string;
+  
+  /** Meta information (vertical only) */
+  meta?: string | HTMLElement;
+  
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  
+  /** Whether the item is selected */
+  selected?: boolean;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** ARIA role */
+  role?: string;
+  
+  /** Whether this is a divider instead of an item */
+  divider?: boolean;
+}
+
+/**
+ * List section configuration
+ */
+export interface ListSectionConfig {
+  /** Unique identifier for the section */
+  id: string;
+  
+  /** Section title text */
+  title: string;
+  
+  /** Items in this section */
+  items: ListItemConfig[];
+}
+
+/**
+ * Selection change event data
+ */
+export interface SelectionChangeEvent {
+  /** Array of selected item IDs */
+  selected: string[];
+  
+  /** The item that was clicked */
+  item?: ListItemData;
+  
+  /** List selection type */
+  type: keyof typeof LIST_TYPES | string;
+}
+
+/**
+ * List item data
+ */
+export interface ListItemData {
+  /** The item's DOM element */
+  element: HTMLElement;
+  
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  
+  /** Internal properties */
+  [key: string]: any;
+}
+
+/**
+ * Configuration interface for the List component
+ */
+export interface ListConfig {
+  /** List selection type */
+  type?: keyof typeof LIST_TYPES | string;
+  
+  /** List layout */
+  layout?: keyof typeof LIST_LAYOUTS | string;
+  
+  /** List items */
+  items?: ListItemConfig[];
+  
+  /** List sections */
+  sections?: ListSectionConfig[];
+  
+  /** Whether the list is disabled */
+  disabled?: boolean;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+}
+
+/**
+ * List component interface
+ */
+export interface ListComponent {
+  /** The root element of the list */
+  element: HTMLElement;
+  
+  /** Map of list items */
+  items: Map<string, ListItemData>;
+  
+  /** Set of selected item IDs */
+  selectedItems: Set<string>;
+  
+  /** Gets the currently selected items */
+  getSelected: () => string[];
+  
+  /** Sets the selected items */
+  setSelected: (ids: string[]) => void;
+  
+  /** Adds a new item to the list */
+  addItem: (itemConfig: ListItemConfig) => void;
+  
+  /** Removes an item from the list */
+  removeItem: (id: string) => void;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => ListComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => ListComponent;
+  
+  /** Enables the list */
+  enable: () => ListComponent;
+  
+  /** Disables the list */
+  disable: () => ListComponent;
+  
+  /** Destroys the list component and cleans up resources */
+  destroy: () => void;
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  prefix?: string;
+  items?: Map<string, ListItemData>;
+  selectedItems?: Set<string>;
+  emit?: (event: string, data: any) => void;
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  lifecycle?: {
+    destroy: () => void;
+  };
+  disabled?: {
+    enable: () => any;
+    disable: () => any;
+  };
+  [key: string]: any;
+}

package/src/components/list/utils.ts

@@ -0,0 +1,47 @@
+// src/components/list/utils.ts
+import { LIST_CLASSES } from './constants';
+
+/**
+ * Creates a divider element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Divider element
+ */
+export const createDivider = (prefix: string): HTMLElement => {
+  const divider = document.createElement('div');
+  divider.className = `${prefix}-${LIST_CLASSES.DIVIDER}`;
+  divider.setAttribute('role', 'separator');
+  return divider;
+};
+
+/**
+ * Creates a section title element
+ * @param {string} title - Section title text
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Section title element
+ */
+export const createSectionTitle = (title: string, prefix: string): HTMLElement => {
+  const titleEl = document.createElement('div');
+  titleEl.className = `${prefix}-${LIST_CLASSES.SECTION_TITLE}`;
+  titleEl.textContent = title;
+  return titleEl;
+};
+
+/**
+ * Creates a DOM element with optional class and content
+ * @param {string} tag - HTML tag name
+ * @param {string} className - CSS class name
+ * @param {string|HTMLElement} [content] - Element content or child element
+ * @returns {HTMLElement} Created element
+ */
+export const createElement = (tag: string, className: string, content?: string | HTMLElement): HTMLElement => {
+  const element = document.createElement(tag);
+  element.className = className;
+  if (content) {
+    if (typeof content === 'string') {
+      element.textContent = content;
+    } else {
+      element.appendChild(content);
+    }
+  }
+  return element;
+};