mtrl 0.1.2 → 0.2.0

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;
+};

package/src/components/menu/api.ts

@@ -0,0 +1,119 @@
+// src/components/menu/api.ts
+import { ApiOptions, BaseComponent, MenuComponent, MenuItemConfig, MenuPositionConfig } from './types';
+
+/**
+ * Enhances menu component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ lifecycle }: ApiOptions) => 
+  (component: BaseComponent): MenuComponent => ({
+    ...component as any,
+    element: component.element,
+
+    /**
+     * Shows the menu
+     * @returns {MenuComponent} Component instance
+     */
+    show(): MenuComponent {
+      component.show?.();
+      return this;
+    },
+
+    /**
+     * Hides the menu
+     * @returns {MenuComponent} Component instance
+     */
+    hide(): MenuComponent {
+      component.hide?.();
+      return this;
+    },
+
+    /**
+     * Positions the menu relative to a target
+     * @param {HTMLElement} target - Target element
+     * @param {MenuPositionConfig} options - Position options
+     * @returns {MenuComponent} Component instance
+     */
+    position(target: HTMLElement, options?: MenuPositionConfig): MenuComponent {
+      component.position?.(target, options);
+      return this;
+    },
+
+    /**
+     * Adds an item to the menu
+     * @param {MenuItemConfig} config - Item configuration
+     * @returns {MenuComponent} Component instance
+     */
+    addItem(config: MenuItemConfig): MenuComponent {
+      component.addItem?.(config);
+      return this;
+    },
+
+    /**
+     * Removes an item by name
+     * @param {string} name - Item name to remove
+     * @returns {MenuComponent} Component instance
+     */
+    removeItem(name: string): MenuComponent {
+      component.removeItem?.(name);
+      return this;
+    },
+
+    /**
+     * Gets all registered items
+     * @returns {Map<string, any>} Map of item names to configurations
+     */
+    getItems() {
+      return component.getItems?.() || new Map();
+    },
+
+    /**
+     * Checks if the menu is currently visible
+     * @returns {boolean} Whether the menu is visible
+     */
+    isVisible(): boolean {
+      return component.isVisible?.() || false;
+    },
+
+    /**
+     * Registers an event handler
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {MenuComponent} Component instance
+     */
+    on(event: string, handler: Function): MenuComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+
+    /**
+     * Unregisters an event handler
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {MenuComponent} Component instance
+     */
+    off(event: string, handler: Function): MenuComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    /**
+     * Destroys the menu component and cleans up resources
+     * @returns {MenuComponent} Component instance
+     */
+    destroy(): MenuComponent {
+      // First close any open submenus
+      component.hide?.();
+
+      // Then destroy the component
+      lifecycle.destroy?.();
+
+      // Final cleanup - forcibly remove from DOM if still attached
+      if (component.element && component.element.parentNode) {
+        component.element.remove();
+      }
+
+      return this;
+    }
+  });

package/src/components/menu/config.ts

@@ -0,0 +1,54 @@
+// src/components/menu/config.ts
+import { PREFIX } from '../../core/config';
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { MenuConfig, BaseComponent, ApiOptions } from './types';
+
+/**
+ * Default configuration for the Menu component
+ */
+export const defaultConfig: MenuConfig = {
+  items: [],
+  stayOpenOnSelect: false
+};
+
+/**
+ * Creates the base configuration for Menu component
+ * @param {MenuConfig} config - User provided configuration
+ * @returns {MenuConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: MenuConfig = {}): MenuConfig => 
+  createComponentConfig(defaultConfig, config, 'menu') as MenuConfig;
+
+/**
+ * Generates element configuration for the Menu component
+ * @param {MenuConfig} config - Menu configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: MenuConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    componentName: 'menu',
+    attrs: {
+      role: 'menu',
+      tabindex: '-1',
+      'aria-hidden': 'true'
+    },
+    className: config.class
+  });
+
+/**
+ * Creates API configuration for the Menu component
+ * @param {BaseComponent} comp - Component with lifecycle feature
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  lifecycle: {
+    destroy: comp.lifecycle?.destroy || (() => {})
+  }
+});
+
+export default defaultConfig;

package/src/components/menu/constants.ts

@@ -0,0 +1,154 @@
+// src/components/menu/constants.ts
+
+/**
+ * Menu alignment options
+ */
+export const MENU_ALIGN = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center'
+} as const;
+
+/**
+ * Menu vertical alignment options
+ */
+export const MENU_VERTICAL_ALIGN = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  MIDDLE: 'middle'
+} as const;
+
+/**
+ * Menu item types
+ */
+export const MENU_ITEM_TYPES = {
+  ITEM: 'item',
+  DIVIDER: 'divider'
+} as const;
+
+/**
+ * Menu events
+ */
+export const MENU_EVENTS = {
+  SELECT: 'select',
+  OPEN: 'open',
+  CLOSE: 'close',
+  SUBMENU_OPEN: 'submenuOpen',
+  SUBMENU_CLOSE: 'submenuClose'
+} as const;
+
+/**
+ * Menu states
+ */
+export const MENU_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden',
+  DISABLED: 'disabled'
+} as const;
+
+/**
+ * Menu element classes
+ */
+export const MENU_CLASSES = {
+  ROOT: 'menu',
+  ITEM: 'menu-item',
+  ITEM_CONTAINER: 'menu-item-container',
+  LIST: 'menu-list',
+  DIVIDER: 'menu-divider',
+  SUBMENU: 'menu--submenu'
+} as const;
+
+/**
+ * Menu positioning schema
+ * Used for validation in component creation
+ */
+export const MENU_POSITION_SCHEMA = {
+  type: 'object',
+  properties: {
+    align: {
+      type: 'string',
+      enum: Object.values(MENU_ALIGN),
+      optional: true,
+      default: MENU_ALIGN.LEFT
+    },
+    vAlign: {
+      type: 'string',
+      enum: Object.values(MENU_VERTICAL_ALIGN),
+      optional: true,
+      default: MENU_VERTICAL_ALIGN.BOTTOM
+    },
+    offsetX: {
+      type: 'number',
+      optional: true,
+      default: 0
+    },
+    offsetY: {
+      type: 'number',
+      optional: true,
+      default: 0
+    }
+  }
+} as const;
+
+/**
+ * Validation schema for menu configuration
+ */
+export const MENU_SCHEMA = {
+  type: 'object',
+  properties: {
+    items: {
+      type: 'array',
+      optional: true,
+      default: []
+    },
+    class: {
+      type: 'string',
+      optional: true
+    },
+    stayOpenOnSelect: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    },
+    openingButton: {
+      optional: true
+    }
+  }
+} as const;
+
+/**
+ * Menu item schema
+ */
+export const MENU_ITEM_SCHEMA = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      required: true
+    },
+    text: {
+      type: 'string',
+      required: true
+    },
+    type: {
+      type: 'string',
+      enum: Object.values(MENU_ITEM_TYPES),
+      optional: true,
+      default: MENU_ITEM_TYPES.ITEM
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    },
+    class: {
+      type: 'string',
+      optional: true
+    },
+    items: {
+      type: 'array',
+      optional: true,
+      description: 'Submenu items'
+    }
+  }
+} as const;