mtrl 0.3.8 → 0.4.0

package/src/components/select/types.ts

@@ -1,355 +0,0 @@
-// src/components/select/types.ts
-
-/**
- * Available Select variants
- */
-export type SelectVariant = 'filled' | 'outlined';
-
-/**
- * Select variant constants
- */
-export const SELECT_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-
-/**
- * Select option interface
- */
-export interface SelectOption {
-  /**
-   * Unique identifier for the option
-   */
-  id: string;
-  
-  /**
-   * Display text for the option
-   */
-  text: string;
-  
-  /**
-   * Whether the option is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * Optional icon to display with the option
-   */
-  icon?: string;
-  
-  /**
-   * Whether this option has a submenu
-   */
-  hasSubmenu?: boolean;
-  
-  /**
-   * Optional array of submenu options
-   * Only used when hasSubmenu is true
-   */
-  submenu?: SelectOption[];
-  
-  /**
-   * Additional data associated with the option
-   */
-  data?: any;
-}
-
-/**
- * Configuration interface for the Select component
- */
-export interface SelectConfig {
-  /**
-   * Array of options to display in the select menu
-   */
-  options: SelectOption[];
-  
-  /**
-   * Currently selected value (option id)
-   */
-  value?: string;
-  
-  /**
-   * Visual variant (filled, outlined)
-   */
-  variant?: SelectVariant | string;
-  
-  /**
-   * Label text
-   */
-  label?: string;
-  
-  /**
-   * Input name attribute
-   */
-  name?: string;
-  
-  /**
-   * Whether select is required
-   */
-  required?: boolean;
-  
-  /**
-   * Whether select is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * Supporting text content
-   */
-  supportingText?: string;
-  
-  /**
-   * Whether supporting text indicates an error
-   */
-  error?: boolean;
-  
-  /**
-   * Menu placement relative to the textfield
-   */
-  placement?: string;
-  
-  /**
-   * Additional CSS classes
-   */
-  class?: string;
-  
-  /**
-   * Prefix for class names
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  /**
-   * Event callbacks
-   */
-  on?: {
-    /**
-     * Called when the select value changes
-     */
-    change?: (event: SelectChangeEvent) => void;
-    
-    /**
-     * Called when the select menu opens
-     */
-    open?: (event: SelectEvent) => void;
-    
-    /**
-     * Called when the select menu closes
-     */
-    close?: (event: SelectEvent) => void;
-  };
-}
-
-/**
- * Select component interface
- */
-export interface SelectComponent {
-  /**
-   * The root element of the select
-   */
-  element: HTMLElement;
-  
-  /**
-   * The textfield component
-   */
-  textfield: any;
-  
-  /**
-   * The menu component
-   */
-  menu: any;
-  
-  /**
-   * Gets the select's current value (selected option id)
-   */
-  getValue: () => string | null;
-  
-  /**
-   * Sets the select's value (by option id)
-   * @param value - Option id to select
-   * @returns Select component for chaining
-   */
-  setValue: (value: string) => SelectComponent;
-  
-  /**
-   * Gets the select's current displayed text
-   */
-  getText: () => string;
-  
-  /**
-   * Gets the selected option object
-   */
-  getSelectedOption: () => SelectOption | null;
-  
-  /**
-   * Gets all available options
-   */
-  getOptions: () => SelectOption[];
-  
-  /**
-   * Sets new options
-   * @param options - New options array
-   * @returns Select component for chaining
-   */
-  setOptions: (options: SelectOption[]) => SelectComponent;
-  
-  /**
-   * Opens the select menu
-   * @param interactionType - The type of interaction ('mouse' or 'keyboard')
-   * @returns Select component for chaining
-   */
-  open: (interactionType?: 'mouse' | 'keyboard') => SelectComponent;
-  
-  /**
-   * Closes the select menu
-   * @returns Select component for chaining
-   */
-  close: () => SelectComponent;
-  
-  /**
-   * Checks if the menu is open
-   */
-  isOpen: () => boolean;
-  
-  /**
-   * Adds an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Select component for chaining
-   */
-  on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
-  
-  /**
-   * Removes an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Select component for chaining 
-   */
-  off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
-  
-  /**
-   * Enables the select
-   * @returns Select component for chaining
-   */
-  enable: () => SelectComponent;
-  
-  /**
-   * Disables the select
-   * @returns Select component for chaining
-   */
-  disable: () => SelectComponent;
-  
-  /**
-   * Destroys the select component
-   */
-  destroy: () => void;
-}
-
-/**
- * Select event interface
- */
-export interface SelectEvent {
-  /**
-   * The select component
-   */
-  select: SelectComponent;
-  
-  /**
-   * Original DOM event if available
-   */
-  originalEvent?: Event;
-  
-  /**
-   * Function to prevent default behavior
-   */
-  preventDefault: () => void;
-  
-  /**
-   * Whether default behavior was prevented
-   */
-  defaultPrevented: boolean;
-}
-
-/**
- * Select change event interface
- */
-export interface SelectChangeEvent extends SelectEvent {
-  /**
-   * The selected option id
-   */
-  value: string;
-  
-  /**
-   * The selected option text
-   */
-  text: string;
-  
-  /**
-   * The complete selected option object
-   */
-  option: SelectOption;
-}
-
-/**
- * Select events interface for type-checking
- * @internal
- */
-export interface SelectEvents {
-  'change': (event: SelectChangeEvent) => void;
-  'open': (event: SelectEvent) => void;
-  'close': (event: SelectEvent) => void;
-}
-
-/**
- * API options interface
- * @internal
- */
-export interface ApiOptions {
-  select: {
-    getValue: () => string | null;
-    setValue: (value: string) => any;
-    getText: () => string;
-    getSelectedOption: () => SelectOption | null;
-    getOptions: () => SelectOption[];
-    setOptions: (options: SelectOption[]) => any;
-    open: () => any;
-    close: () => any;
-    isOpen: () => boolean;
-  };
-  events?: {
-    on: <T extends string>(event: T, handler: (event: any) => void) => any;
-    off: <T extends string>(event: T, handler: (event: any) => void) => any;
-  };
-  disabled: {
-    enable: () => any;
-    disable: () => any;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-/**
- * Base component interface
- * @internal
- */
-export interface BaseComponent {
-  element: HTMLElement;
-  textfield?: any;
-  menu?: any;
-  on?: (event: string, handler: Function) => any;
-  off?: (event: string, handler: Function) => any;
-  emit?: (event: string, data: any) => void;
-  disabled?: {
-    enable: () => any;
-    disable: () => any;
-  };
-  lifecycle?: {
-    destroy: () => void;
-  };
-  [key: string]: any;
-}

package/src/components/sheet/api.ts

@@ -1,96 +0,0 @@
-// src/components/sheet/api.ts
-import { SheetComponent } from './types';
-
-interface ApiOptions {
-  state: {
-    open: () => void;
-    close: () => void;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-interface ComponentWithElements {
-  element: HTMLElement;
-  container: HTMLElement;
-  content: {
-    setContent: (html: string) => any;
-    getContent: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  title: {
-    setTitle: (text: string) => any;
-    getTitle: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  getClass: (name: string) => string;
-  dragHandle?: {
-    setVisible: (visible: boolean) => any;
-  };
-  initialize?: () => void;
-}
-
-/**
- * Enhances a sheet component with API methods
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Sheet component
- */
-export const withAPI = ({ state, lifecycle }: ApiOptions) => 
-  (component: ComponentWithElements): SheetComponent => ({
-    ...component as any,
-    element: component.element,
-    container: component.container,
-    
-    open() {
-      state.open();
-      return this;
-    },
-    
-    close() {
-      state.close();
-      return this;
-    },
-    
-    setContent(html: string) {
-      component.content.setContent(html);
-      return this;
-    },
-    
-    getContent() {
-      return component.content.getContent();
-    },
-    
-    setTitle(text: string) {
-      component.title.setTitle(text);
-      return this;
-    },
-    
-    getTitle() {
-      return component.title.getTitle();
-    },
-    
-    setDragHandle(enabled: boolean) {
-      if (component.dragHandle) {
-        component.dragHandle.setVisible(enabled);
-      }
-      return this;
-    },
-    
-    setMaxHeight(height: string) {
-      component.container.style.maxHeight = height;
-      return this;
-    },
-    
-    destroy() {
-      lifecycle.destroy();
-    },
-    
-    initialize() {
-      if (component.initialize) {
-        component.initialize();
-      }
-      return this;
-    }
-  });

package/src/components/sheet/config.ts

@@ -1,65 +0,0 @@
-// src/components/sheet/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { SheetConfig, SHEET_VARIANTS, SHEET_POSITIONS } from './types';
-
-/**
- * Default configuration for the Sheet component
- */
-export const defaultConfig: SheetConfig = {
-  variant: SHEET_VARIANTS.STANDARD,
-  position: SHEET_POSITIONS.BOTTOM,
-  open: false,
-  dismissible: true,
-  dragHandle: true,
-  elevation: 3,
-  enableGestures: true
-};
-
-/**
- * Creates the base configuration for Sheet component
- * @param {SheetConfig} config - User provided configuration
- * @returns {SheetConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: SheetConfig = {}): SheetConfig => 
-  createComponentConfig(defaultConfig, config, 'sheet') as SheetConfig;
-
-/**
- * Generates element configuration for the Sheet component
- * @param {SheetConfig} config - Sheet configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: SheetConfig) => {
-  return createElementConfig(config, {
-    tag: 'div',
-    attrs: {
-      role: 'dialog',
-      'aria-modal': config.variant === SHEET_VARIANTS.MODAL ? 'true' : 'false'
-    },
-    className: config.class,
-    forwardEvents: {
-      click: true,
-      keydown: true
-    }
-  });
-};
-
-/**
- * Creates API configuration for the Sheet component
- * @param {Object} comp - Component with state and lifecycle features
- * @returns {Object} API configuration object
- */
-export const getApiConfig = (comp) => ({
-  state: {
-    open: () => comp.state.open(),
-    close: () => comp.state.close()
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle.destroy()
-  }
-});
-
-export default defaultConfig;

package/src/components/sheet/features/content.ts

@@ -1,51 +0,0 @@
-// src/components/sheet/features/content.ts
-/**
- * Adds content management functionality to a component
- * @param {Object} config - Component configuration with optional content
- * @returns {Function} Higher-order function that adds content to a component
- */
-export const withContent = (config) => (component) => {
-  const { content = '' } = config;
-  
-  // Create content element
-  const contentElement = document.createElement('div');
-  contentElement.className = `${component.getClass('sheet')}-content`;
-  contentElement.innerHTML = content;
-  
-  // Add content element to component
-  component.container = document.createElement('div');
-  component.container.className = `${component.getClass('sheet')}-container`;
-  component.container.appendChild(contentElement);
-  component.element.appendChild(component.container);
-  
-  return {
-    ...component,
-    content: {
-      /**
-       * Sets the HTML content
-       * @param {string} html - HTML content
-       * @returns {Object} Content API for chaining
-       */
-      setContent(html: string) {
-        contentElement.innerHTML = html;
-        return this;
-      },
-      
-      /**
-       * Gets the current HTML content
-       * @returns {string} HTML content
-       */
-      getContent() {
-        return contentElement.innerHTML;
-      },
-      
-      /**
-       * Gets the content DOM element
-       * @returns {HTMLElement} Content element
-       */
-      getElement() {
-        return contentElement;
-      }
-    }
-  };
-};