mtrl 0.3.8 → 0.4.0

package/src/components/tooltip/types.ts

@@ -1,223 +0,0 @@
-// src/components/tooltip/types.ts
-
-/**
- * Tooltip positions
- */
-export const TOOLTIP_POSITIONS = {
-  TOP: 'top',
-  RIGHT: 'right',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  TOP_START: 'top-start',
-  TOP_END: 'top-end',
-  RIGHT_START: 'right-start',
-  RIGHT_END: 'right-end',
-  BOTTOM_START: 'bottom-start',
-  BOTTOM_END: 'bottom-end',
-  LEFT_START: 'left-start',
-  LEFT_END: 'left-end'
-} as const;
-
-/**
- * Tooltip variants
- */
-export const TOOLTIP_VARIANTS = {
-  DEFAULT: 'default',
-  RICH: 'rich',
-  PLAIN: 'plain'
-} as const;
-
-/**
- * Default values
- */
-export const DEFAULT_SHOW_DELAY = 300;
-export const DEFAULT_HIDE_DELAY = 100;
-export const DEFAULT_OFFSET = 8;
-export const DEFAULT_ARROW_SIZE = 8;
-
-/**
- * Available Tooltip variants
- */
-export type TooltipVariant = 'default' | 'rich' | 'plain';
-
-/**
- * Available Tooltip positions
- */
-export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
-
-
-/**
- * Configuration interface for the Tooltip component
- * @category Components
- */
-export interface TooltipConfig {
-  /** 
-   * Tooltip content text
-   * @example 'Delete item'
-   */
-  text?: string;
-  
-  /** 
-   * HTML element that triggers the tooltip
-   * @example document.querySelector('#my-button')
-   */
-  target?: HTMLElement;
-  
-  /** 
-   * Tooltip position relative to the target
-   * @default 'bottom'
-   */
-  position?: TooltipPosition | string;
-  
-  /** 
-   * Tooltip variant that determines visual styling
-   * @default 'default'
-   */
-  variant?: TooltipVariant | string;
-  
-  /** 
-   * Whether the tooltip is initially visible
-   * @default false
-   */
-  visible?: boolean;
-  
-  /** 
-   * Show delay in milliseconds
-   * @default 300
-   */
-  showDelay?: number;
-  
-  /** 
-   * Hide delay in milliseconds
-   * @default 100
-   */
-  hideDelay?: number;
-  
-  /** 
-   * Whether to show the tooltip on focus
-   * @default true
-   */
-  showOnFocus?: boolean;
-  
-  /** 
-   * Whether to show the tooltip on hover
-   * @default true
-   */
-  showOnHover?: boolean;
-  
-  /** 
-   * Additional CSS classes to add to the tooltip
-   */
-  class?: string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   */
-  componentName?: string;
-  
-  /**
-   * Optional z-index for the tooltip
-   */
-  zIndex?: number;
-  
-  /**
-   * Whether to enable rich (HTML) content
-   * @default false
-   */
-  rich?: boolean;
-}
-
-/**
- * Tooltip component interface
- * @category Components
- */
-export interface TooltipComponent {
-  /** The tooltip's DOM element */
-  element: HTMLElement;
-  
-  /** The tooltip's target element */
-  target: HTMLElement | null;
-  
-  /** API for managing component lifecycle */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Sets the tooltip text content
-   * @param text - New text content
-   * @returns The tooltip component for chaining
-   */
-  setText: (text: string) => TooltipComponent;
-  
-  /**
-   * Gets the tooltip text content
-   * @returns Tooltip text content
-   */
-  getText: () => string;
-  
-  /**
-   * Sets the tooltip position
-   * @param position - Position value
-   * @returns The tooltip component for chaining
-   */
-  setPosition: (position: keyof typeof TOOLTIP_POSITIONS | string) => TooltipComponent;
-  
-  /**
-   * Gets the current tooltip position
-   * @returns Current position
-   */
-  getPosition: () => string;
-  
-  /**
-   * Sets the tooltip target element
-   * @param target - Element to attach tooltip to
-   * @returns The tooltip component for chaining
-   */
-  setTarget: (target: HTMLElement) => TooltipComponent;
-  
-  /**
-   * Shows the tooltip
-   * @param immediate - Whether to show immediately (bypassing delay)
-   * @returns The tooltip component for chaining
-   */
-  show: (immediate?: boolean) => TooltipComponent;
-  
-  /**
-   * Hides the tooltip
-   * @param immediate - Whether to hide immediately (bypassing delay)
-   * @returns The tooltip component for chaining
-   */
-  hide: (immediate?: boolean) => TooltipComponent;
-  
-  /**
-   * Checks if the tooltip is currently visible
-   * @returns Whether the tooltip is visible
-   */
-  isVisible: () => boolean;
-  
-  /**
-   * Updates the tooltip's position relative to its target
-   * @returns The tooltip component for chaining
-   */
-  updatePosition: () => TooltipComponent;
-  
-  /**
-   * Destroys the tooltip component and cleans up resources
-   */
-  destroy: () => void;
-}

package/src/components/top-app-bar/config.ts

@@ -1,83 +0,0 @@
-// src/components/top-app-bar/config.ts
-/**
- * @module components/top-app-bar
- * @description Configuration for top app bar component
- */
-
-import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
-import { PREFIX } from '../../core/config';
-
-/**
- * Top App Bar types
- */
-export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
-
-/**
- * Configuration options for top app bar
- */
-export interface TopAppBarConfig extends BaseComponentConfig {
-  /**
-   * Element to use for the container
-   * @default 'header'
-   */
-  tag?: string;
-  
-  /**
-   * Type of top app bar to display
-   * @default 'small'
-   */
-  type?: TopAppBarType;
-  
-  /**
-   * Title text to display in the app bar
-   */
-  title?: string;
-  
-  /**
-   * Whether to enable scrolling behavior
-   * @default true
-   */
-  scrollable?: boolean;
-  
-  /**
-   * Whether to compress medium/large variants to small on scroll
-   * @default true
-   */
-  compressible?: boolean;
-  
-  /**
-   * Scroll threshold in pixels to trigger the scrolled state
-   * @default 4
-   */
-  scrollThreshold?: number;
-  
-  /**
-   * Additional CSS classes to apply
-   */
-  class?: string;
-
-  /**
-   * Optional callback when scrolling changes the bar appearance
-   */
-  onScroll?: (scrolled: boolean) => void;
-}
-
-/**
- * Default configuration for top app bar
- */
-export const defaultConfig: Partial<TopAppBarConfig> = {
-  tag: 'header',
-  type: 'small',
-  scrollable: true,
-  compressible: true,
-  scrollThreshold: 4
-};
-
-/**
- * Creates the configuration for a top app bar component
- * 
- * @param {TopAppBarConfig} config - User provided configuration
- * @returns {TopAppBarConfig} Complete configuration with defaults applied
- */
-export const createConfig = (config: TopAppBarConfig = {} as TopAppBarConfig): TopAppBarConfig => 
-  createComponentConfig(defaultConfig, config, 'top-app-bar') as TopAppBarConfig;

package/src/components/top-app-bar/top-app-bar.ts

@@ -1,316 +0,0 @@
-// src/components/top-app-bar/top-app-bar.ts
-/**
- * @module components/top-app-bar
- * @description Top app bar implementation
- */
-
-import { 
-  createBase, 
-  withElement, 
-  withEvents, 
-  withLifecycle,
-  ElementComponent, 
-  BaseComponent 
-} from '../../core/compose';
-
-import { createConfig, TopAppBarConfig, TopAppBarType } from './config';
-
-/**
- * Top app bar component interface
- */
-export interface TopAppBar extends ElementComponent {
-  /**
-   * Sets the title of the top app bar
-   * @param {string} title - Title text
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setTitle: (title: string) => TopAppBar;
-  
-  /**
-   * Gets the current title
-   * @returns {string} Current title text
-   */
-  getTitle: () => string;
-  
-  /**
-   * Adds a leading navigation icon or element
-   * @param {HTMLElement} element - Element to add to the leading section
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  addLeadingElement: (element: HTMLElement) => TopAppBar;
-  
-  /**
-   * Adds a trailing action icon or element
-   * @param {HTMLElement} element - Element to add to the trailing section
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  addTrailingElement: (element: HTMLElement) => TopAppBar;
-  
-  /**
-   * Changes the top app bar type
-   * @param {TopAppBarType} type - New app bar type
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setType: (type: TopAppBarType) => TopAppBar;
-  
-  /**
-   * Manually sets the scrolled state
-   * @param {boolean} scrolled - Whether to show the scrolled state
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setScrollState: (scrolled: boolean) => TopAppBar;
-  
-  /**
-   * Gets the headline element
-   * @returns {HTMLElement} Headline element
-   */
-  getHeadlineElement: () => HTMLElement;
-  
-  /**
-   * Gets the leading container element
-   * @returns {HTMLElement} Leading container element
-   */
-  getLeadingContainer: () => HTMLElement;
-  
-  /**
-   * Gets the trailing container element
-   * @returns {HTMLElement} Trailing container element
-   */
-  getTrailingContainer: () => HTMLElement;
-}
-
-/**
- * Creates a top app bar component
- * 
- * @param {TopAppBarConfig} config - Configuration options
- * @returns {TopAppBar} Top app bar component instance
- */
-export const createTopAppBar = (config: TopAppBarConfig = {}): TopAppBar => {
-  // Process configuration with defaults
-  const componentConfig = createConfig(config);
-  
-  // Create base component
-  const component = createBase(componentConfig);
-  
-  // Create containers for the top app bar structure
-  const createContainers = () => {
-    // Leading section container
-    const leadingContainer = document.createElement('div');
-    leadingContainer.className = `${component.getClass('top-app-bar')}-leading`;
-
-    // Headline element
-    const headlineElement = document.createElement('h1');
-    headlineElement.className = `${component.getClass('top-app-bar')}-headline`;
-    if (componentConfig.title) {
-      headlineElement.textContent = componentConfig.title;
-    }
-
-    // Trailing section container
-    const trailingContainer = document.createElement('div');
-    trailingContainer.className = `${component.getClass('top-app-bar')}-trailing`;
-    
-    return { leadingContainer, headlineElement, trailingContainer };
-  };
-  
-  // Create the main containers
-  const { leadingContainer, headlineElement, trailingContainer } = createContainers();
-  
-  // Determine initial classes based on type
-  const getInitialClasses = () => {
-    const classes = [componentConfig.class];
-    
-    // Add type class if not the default 'small' type
-    if (componentConfig.type !== 'small') {
-      classes.push(`${component.getClass('top-app-bar')}--${componentConfig.type}`);
-    }
-    
-    // Add compressible class if enabled and type is medium or large
-    if (componentConfig.compressible && 
-        (componentConfig.type === 'medium' || componentConfig.type === 'large')) {
-      classes.push(`${component.getClass('top-app-bar')}--compressible`);
-    }
-    
-    return classes.filter(Boolean);
-  };
-  
-  // Apply Element enhancer
-  const enhancedComponent = withElement({
-    tag: componentConfig.tag,
-    componentName: 'top-app-bar',
-    className: getInitialClasses(),
-    attrs: {
-      role: 'banner',
-      'aria-label': 'Top app bar'
-    },
-    interactive: true
-  })(component);
-  
-  // Apply events enhancer for component events
-  const withEventsComponent = withEvents()(enhancedComponent);
-  
-  // Apply lifecycle enhancer for cleanup
-  const withLifecycleComponent = withLifecycle()(withEventsComponent);
-  
-  // Create the DOM structure based on the type
-  const setupDomStructure = () => {
-    if (componentConfig.type === 'medium' || componentConfig.type === 'large') {
-      // For medium and large, create rows
-      const topRow = document.createElement('div');
-      topRow.className = `${component.getClass('top-app-bar')}-row`;
-      topRow.appendChild(leadingContainer);
-      topRow.appendChild(trailingContainer);
-      
-      const bottomRow = document.createElement('div');
-      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
-      bottomRow.appendChild(headlineElement);
-      
-      withLifecycleComponent.element.appendChild(topRow);
-      withLifecycleComponent.element.appendChild(bottomRow);
-    } else {
-      // For small and center-aligned
-      withLifecycleComponent.element.appendChild(leadingContainer);
-      withLifecycleComponent.element.appendChild(headlineElement);
-      withLifecycleComponent.element.appendChild(trailingContainer);
-    }
-  };
-  
-  // Set up the initial DOM structure
-  setupDomStructure();
-  
-  // Track scrolled state
-  let isScrolled = false;
-  
-  // Handle scrolling behavior if enabled
-  if (componentConfig.scrollable) {
-    const handleScroll = () => {
-      const shouldBeScrolled = window.scrollY > componentConfig.scrollThreshold;
-      
-      if (isScrolled !== shouldBeScrolled) {
-        isScrolled = shouldBeScrolled;
-        
-        // Toggle scrolled class
-        if (isScrolled) {
-          withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
-        } else {
-          withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
-        }
-        
-        // Call the onScroll callback if provided
-        componentConfig.onScroll?.(isScrolled);
-      }
-    };
-    
-    // Add scroll event listener
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    
-    // Initial check
-    handleScroll();
-    
-    // Clean up event listener on destroy
-    const originalDestroy = withLifecycleComponent.lifecycle.destroy;
-    withLifecycleComponent.lifecycle.destroy = () => {
-      window.removeEventListener('scroll', handleScroll);
-      originalDestroy();
-    };
-  }
-  
-  // Reorganize the DOM for the given type
-  const reorganizeDom = (type: TopAppBarType) => {
-    // Clear existing content
-    while (withLifecycleComponent.element.firstChild) {
-      withLifecycleComponent.element.removeChild(withLifecycleComponent.element.firstChild);
-    }
-    
-    // Update component type class
-    ['small', 'medium', 'large', 'center'].forEach(t => {
-      withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--${t}`);
-    });
-    
-    if (type !== 'small') {
-      withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--${type}`);
-    }
-    
-    // Update compressible class
-    withLifecycleComponent.element.classList.toggle(
-      `${component.getClass('top-app-bar')}--compressible`,
-      componentConfig.compressible && (type === 'medium' || type === 'large')
-    );
-    
-    // Rebuild the DOM structure
-    if (type === 'medium' || type === 'large') {
-      // For medium and large, create rows
-      const topRow = document.createElement('div');
-      topRow.className = `${component.getClass('top-app-bar')}-row`;
-      topRow.appendChild(leadingContainer);
-      topRow.appendChild(trailingContainer);
-      
-      const bottomRow = document.createElement('div');
-      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
-      bottomRow.appendChild(headlineElement);
-      
-      withLifecycleComponent.element.appendChild(topRow);
-      withLifecycleComponent.element.appendChild(bottomRow);
-    } else {
-      // For small and center-aligned
-      withLifecycleComponent.element.appendChild(leadingContainer);
-      withLifecycleComponent.element.appendChild(headlineElement);
-      withLifecycleComponent.element.appendChild(trailingContainer);
-    }
-  };
-  
-  // Create the top app bar interface
-  const topAppBar: TopAppBar = {
-    ...withLifecycleComponent,
-    
-    setTitle(title: string) {
-      headlineElement.textContent = title;
-      return this;
-    },
-    
-    getTitle() {
-      return headlineElement.textContent || '';
-    },
-    
-    addLeadingElement(element: HTMLElement) {
-      leadingContainer.appendChild(element);
-      return this;
-    },
-    
-    addTrailingElement(element: HTMLElement) {
-      trailingContainer.appendChild(element);
-      return this;
-    },
-    
-    setType(type: TopAppBarType) {
-      componentConfig.type = type;
-      reorganizeDom(type);
-      return this;
-    },
-    
-    setScrollState(scrolled: boolean) {
-      isScrolled = scrolled;
-      
-      if (scrolled) {
-        this.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
-      } else {
-        this.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
-      }
-      
-      return this;
-    },
-    
-    getHeadlineElement() {
-      return headlineElement;
-    },
-    
-    getLeadingContainer() {
-      return leadingContainer;
-    },
-    
-    getTrailingContainer() {
-      return trailingContainer;
-    }
-  };
-  
-  return topAppBar;
-};