mtrl 0.3.8 → 0.4.0

package/src/components/list/types.ts

@@ -1,396 +0,0 @@
-// src/components/list/types.ts
-
-/**
- * List types/variants
- * 
- * Different selection modes available for lists.
- * 
- * @category Components
- */
-export const LIST_TYPES = {
-  DEFAULT: 'default', // Standard list
-  SINGLE_SELECT: 'single', // Single selection list
-  MULTI_SELECT: 'multi', // Multiple selection list
-  RADIO: 'radio' // Radio button list
-} as const;
-
-/**
- * List layout variants
- * 
- * Layout options for list items and content arrangement.
- * 
- * @category Components
- */
-export const LIST_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Items with more content stacked vertically
-} as const;
-
-/**
- * List item layouts
- * 
- * Individual item layout options controlling content arrangement.
- * 
- * @category Components
- */
-export const LIST_ITEM_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Stacked layout with vertical alignment
-} as const;
-
-/**
- * List element class names
- * 
- * CSS class names for the various elements that make up a list.
- * 
- * @internal
- */
-export const LIST_CLASSES = {
-  ROOT: 'list',
-  GROUP: 'list-group',
-  GROUP_TITLE: 'list-group-title',
-  DIVIDER: 'list-divider',
-  SECTION: 'list-section',
-  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 validation schema
- * 
- * JSON Schema for validating list configuration options.
- * 
- * @internal
- */
-export const LIST_SCHEMA = {
-  type: 'object',
-  properties: {
-    type: {
-      type: 'string',
-      enum: Object.values(LIST_TYPES),
-      default: LIST_TYPES.DEFAULT
-    },
-    layout: {
-      type: 'string',
-      enum: Object.values(LIST_LAYOUTS),
-      default: LIST_LAYOUTS.HORIZONTAL
-    },
-    items: {
-      type: 'array',
-      items: {
-        type: 'object'
-      },
-      default: []
-    },
-    groups: {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          id: { type: 'string', required: true },
-          title: { type: 'string' },
-          items: { type: 'array' }
-        }
-      },
-      optional: true
-    },
-    sections: {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          id: { type: 'string', required: true },
-          title: { type: 'string', required: true },
-          items: { type: 'array', required: true }
-        }
-      },
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * List item states
- * 
- * Visual states that list items can have.
- * 
- * @category Components
- */
-export const LIST_ITEM_STATES = {
-  SELECTED: 'selected',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused',
-  HOVERED: 'hovered'
-} as const;
-
-/**
- * List type variants
- * @category Components
- */
-export type ListType = 'default' | 'single' | 'multi' | 'radio';
-
-/**
- * List layout variants
- * @category Components
- */
-export type ListLayout = 'horizontal' | 'vertical';
-
-/**
- * List item layout variants
- * @category Components
- */
-export type ListItemLayout = 'horizontal' | 'vertical';
-
-/**
- * List element class names
- * @internal
- */
-export interface ListClasses {
-  ROOT: string;
-  GROUP: string;
-  GROUP_TITLE: string;
-  DIVIDER: string;
-  SECTION: string;
-  SECTION_TITLE: string;
-  ITEM: string;
-  ITEM_CONTENT: string;
-  ITEM_LEADING: string;
-  ITEM_TEXT: string;
-  ITEM_OVERLINE: string;
-  ITEM_HEADLINE: string;
-  ITEM_SUPPORTING: string;
-  ITEM_META: string;
-  ITEM_TRAILING: string;
-}
-
-/**
- * List item states
- * @internal
- */
-export type ListItemState = 'selected' | 'disabled' | 'focused' | 'hovered';
-
-/**
- * List item configuration
- * 
- * Configuration options for creating a list item with customizable content
- * and appearance following Material Design 3 guidelines.
- * 
- * @category Components
- */
-export interface ListItemConfig {
-  /** Unique identifier for the item */
-  id: string;
-  
-  /** Item layout (horizontal/vertical) */
-  layout?: ListLayout | 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
- * 
- * Configuration for a list section, which groups items under a title.
- * Sections help organize list content into logical groups.
- * 
- * @category Components
- */
-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
- * 
- * Data structure provided with selectionChange events
- * when list items are selected or deselected.
- * 
- * @category Components
- */
-export interface SelectionChangeEvent {
-  /** Array of selected item IDs */
-  selected: string[];
-  
-  /** The item that was clicked */
-  item?: ListItemData;
-  
-  /** List selection type */
-  type: ListType | string;
-}
-
-/**
- * List item data
- * 
- * Internal data structure for tracking list items and their state.
- * 
- * @internal
- */
-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
- * 
- * Comprehensive options for creating and customizing a List
- * according to Material Design 3 guidelines.
- * 
- * @category Components
- */
-export interface ListConfig {
-  /** List selection type */
-  type?: ListType | string;
-  
-  /** List layout */
-  layout?: ListLayout | 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
- * 
- * Public API for the List component, providing methods for
- * item management, selection handling, and event management.
- * 
- * @category Components
- */
-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
- * 
- * Internal interface for component composition in the List component.
- * 
- * @internal
- */
-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

@@ -1,98 +0,0 @@
-// src/components/list/utils.ts
-
-// List element class names as strings for internal use
-const LIST_CLASS_NAMES = {
-  ROOT: 'list',
-  GROUP: 'list-group',
-  GROUP_TITLE: 'list-group-title',
-  DIVIDER: 'list-divider',
-  SECTION: 'list-section',
-  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'
-};
-
-/**
- * Creates a divider element for lists
- * 
- * Creates a horizontal divider that can be used to separate list items
- * following Material Design 3 guidelines.
- * 
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Divider element
- * 
- * @internal
- */
-export const createDivider = (prefix: string): HTMLElement => {
-  const divider = document.createElement('div');
-  divider.className = `${prefix}-${LIST_CLASS_NAMES.DIVIDER}`;
-  divider.setAttribute('role', 'separator');
-  return divider;
-};
-
-/**
- * Creates a section title element for lists
- * 
- * Creates a section header element used to group list items into logical sections
- * following Material Design 3 guidelines for list organization.
- * 
- * @param {string} title - Section title text
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Section title element
- * 
- * @internal
- */
-export const createSectionTitle = (title: string, prefix: string): HTMLElement => {
-  const titleEl = document.createElement('div');
-  titleEl.className = `${prefix}-${LIST_CLASS_NAMES.SECTION_TITLE}`;
-  titleEl.textContent = title;
-  return titleEl;
-};
-
-/**
- * Creates a DOM element with optional class and content
- * 
- * Utility function for creating DOM elements with proper class names and content
- * for list items and their sub-elements.
- * 
- * @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
- * 
- * @internal
- */
-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;
-};
-
-/**
- * Gets the class name for a list element
- * 
- * Retrieves the standard class name for list elements from a consistent
- * centralized naming scheme.
- * 
- * @param {string} element - Element name
- * @returns {string} The class name string
- * 
- * @internal
- */
-export const getListClass = (element: keyof typeof LIST_CLASS_NAMES): string => {
-  return LIST_CLASS_NAMES[element];
-};

package/src/components/menu/api.ts

@@ -1,230 +0,0 @@
-// src/components/menu/api.ts
-
-import { MenuComponent, MenuContent, MenuPosition, MenuEvent, MenuSelectEvent } from './types';
-
-/**
- * API configuration options for menu component
- * @category Components
- * @internal
- */
-interface ApiOptions {
-  menu: {
-    open: (event?: Event, interactionType?: 'mouse' | 'keyboard') => any;
-    close: (event?: Event, restoreFocus?: boolean, skipAnimation?: boolean) => any;
-    toggle: (event?: Event, interactionType?: 'mouse' | 'keyboard') => any;
-    isOpen: () => boolean;
-    setItems: (items: MenuContent[]) => any;
-    getItems: () => MenuContent[];
-    setPosition: (position: MenuPosition) => any;
-    getPosition: () => MenuPosition;
-    setSelected: (itemId: string) => any;
-    getSelected: () => string | null;
-  };
-  anchor: {
-    setAnchor: (anchor: HTMLElement | string) => any;
-    getAnchor: () => HTMLElement;
-  };
-  events?: {
-    on: <T extends string>(event: T, handler: (event: any) => void) => any;
-    off: <T extends string>(event: T, handler: (event: any) => void) => any;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-/**
- * Component with required elements and methods for API enhancement
- * @category Components
- * @internal
- */
-interface ComponentWithElements {
-  element: HTMLElement;
-  on?: <T extends string>(event: T, handler: (event: any) => void) => any;
-  off?: <T extends string>(event: T, handler: (event: any) => void) => any;
-  emit?: (event: string, data: any) => void;
-}
-
-/**
- * Enhances a menu component with API methods.
- * This follows the higher-order function pattern to add public API methods
- * to the component, making them available to the end user.
- * 
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @category Components
- * @internal This is an internal utility for the Menu component
- */
-const withAPI = ({ menu, anchor, events, lifecycle }: ApiOptions) => 
-  (component: ComponentWithElements): MenuComponent => ({
-    ...component as any,
-    element: component.element,
-    
-
-    /**
-     * Opens the menu
-     * @param event - Optional event that triggered the open
-     * @param interactionType - The type of interaction that triggered the open ('mouse' or 'keyboard')
-     * @returns Menu component for chaining
-     */
-    open(event?: Event, interactionType: 'mouse' | 'keyboard' = 'mouse') {
-      // Determine interaction type from event if not explicitly provided
-      if (event && !interactionType) {
-        if (event instanceof KeyboardEvent) {
-          interactionType = 'keyboard';
-        }
-      }
-      
-      menu.open(event, interactionType);
-      return this;
-    },
-    
-    /**
-     * Closes the menu
-     * @param event - Optional event that triggered the close
-     * @returns Menu component for chaining
-     */
-    close(event?: Event, restoreFocus: boolean = true, skipAnimation: boolean = false) {
-      menu.close(event, restoreFocus, skipAnimation);
-      return this;
-    },
-    
-    /**
-     * Toggles the menu's open state
-     * @param event - Optional event that triggered the toggle
-     * @param interactionType - The type of interaction that triggered the toggle
-     * @returns Menu component for chaining
-     */
-    toggle(event?: Event, interactionType?: 'mouse' | 'keyboard') {
-      // Determine interaction type from event if not explicitly provided
-      if (event && !interactionType) {
-        if (event instanceof KeyboardEvent) {
-          interactionType = 'keyboard';
-        } else if (event instanceof MouseEvent) {
-          interactionType = 'mouse';
-        }
-      }
-      
-      menu.toggle(event, interactionType);
-      return this;
-    },
-    
-    /**
-     * Checks if the menu is currently open
-     * @returns True if the menu is open
-     */
-    isOpen() {
-      return menu.isOpen();
-    },
-    
-    /**
-     * Updates the menu items
-     * @param items - New array of menu items and dividers
-     * @returns Menu component for chaining
-     */
-    setItems(items: MenuContent[]) {
-      menu.setItems(items);
-      return this;
-    },
-    
-    /**
-     * Gets the current menu items
-     * @returns Array of current menu items and dividers
-     */
-    getItems() {
-      return menu.getItems();
-    },
-    
-    /**
-     * Updates the menu's anchor element
-     * @param anchorElement - New anchor element or selector
-     * @returns Menu component for chaining
-     */
-    setAnchor(anchorElement: HTMLElement | string) {
-      anchor.setAnchor(anchorElement);
-      return this;
-    },
-    
-    /**
-     * Gets the current anchor element
-     * @returns Current anchor element
-     */
-    getAnchor() {
-      return anchor.getAnchor();
-    },
-    
-    /**
-     * Updates the menu's position
-     * @param position - New position value
-     * @returns Menu component for chaining
-     */
-    setPosition(position: MenuPosition) {
-      menu.setPosition(position);
-      return this;
-    },
-    
-    /**
-     * Gets the current menu position
-     * @returns Current position
-     */
-    getPosition() {
-      return menu.getPosition();
-    },
-    
-    /**
-     * Sets the selected menu item
-     * @param itemId - ID of the menu item to mark as selected
-     * @returns Menu component for chaining
-     */
-    setSelected(itemId: string) {
-      menu.setSelected(itemId);
-      return this;
-    },
-    
-    /**
-     * Gets the currently selected menu item's ID
-     * @returns ID of the selected menu item or null if none is selected
-     */
-    getSelected() {
-      return menu.getSelected();
-    },
-    
-    /**
-     * Adds an event listener to the menu
-     * @param event - Event name ('open', 'close', 'select')
-     * @param handler - Event handler function
-     * @returns Menu component for chaining
-     */
-    on(event, handler) {
-      if (events?.on) {
-        events.on(event, handler);
-      } else if (component.on) {
-        component.on(event, handler);
-      }
-      return this;
-    },
-    
-    /**
-     * Removes an event listener from the menu
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns Menu component for chaining
-     */
-    off(event, handler) {
-      if (events?.off) {
-        events.off(event, handler);
-      } else if (component.off) {
-        component.off(event, handler);
-      }
-      return this;
-    },
-    
-    /**
-     * Destroys the menu component and cleans up resources
-     */
-    destroy() {
-      lifecycle.destroy();
-    }
-  });
-
-export { withAPI };