mtrl 0.3.8 → 0.4.0

package/src/components/search/features/states.ts

@@ -1,169 +0,0 @@
-// src/components/search/features/states.ts
-import { SearchConfig } from '../types';
-
-const SEARCH_VARIANTS = {
-  BAR: 'bar',
-  VIEW: 'view'
-}
-
-/**
- * Add state management features to search component
- * 
- * @param config Search configuration
- * @returns Component enhancer with state management features
- */
-export const withStates = (config: SearchConfig) => component => {
-  // Track initial disabled state
-  const isDisabled = config.disabled === true;
-  
-  // Apply initial disabled state if needed
-  if (isDisabled) {
-    setTimeout(() => {
-      disableComponent();
-    }, 0);
-  }
-  
-  /**
-   * Disables the component
-   */
-  function disableComponent() {
-    component.element.classList.add(`${component.getClass('search')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'true');
-    
-    // Disable input - important to use the disabled property not the attribute
-    if (component.structure?.input) {
-      component.structure.input.disabled = true;
-    }
-    
-    // Ensure buttons cannot receive focus when disabled
-    const buttons = [
-      component.structure?.leadingIcon,
-      component.structure?.clearButton,
-      component.structure?.trailingIcon,
-      component.structure?.trailingIcon2
-    ].filter(Boolean);
-    
-    buttons.forEach(button => {
-      button.tabIndex = -1;
-      button.setAttribute('aria-disabled', 'true');
-    });
-  }
-  
-  /**
-   * Enables the component
-   */
-  function enableComponent() {
-    component.element.classList.remove(`${component.getClass('search')}--disabled`);
-    component.element.setAttribute('aria-disabled', 'false');
-    
-    // Enable input - important to use the disabled property not the attribute
-    if (component.structure?.input) {
-      component.structure.input.disabled = false;
-    }
-    
-    // Re-enable buttons
-    const buttons = [
-      component.structure?.leadingIcon,
-      component.structure?.clearButton,
-      component.structure?.trailingIcon,
-      component.structure?.trailingIcon2
-    ].filter(Boolean);
-    
-    buttons.forEach(button => {
-      button.tabIndex = 0;
-      button.setAttribute('aria-disabled', 'false');
-    });
-    
-    // Clear button special case - only enable if there's text
-    if (component.structure?.clearButton && 
-        component.structure.input && 
-        !component.structure.input.value) {
-      component.structure.clearButton.tabIndex = -1;
-    }
-  }
-  
-  /**
-   * Gets the active variant
-   */
-  function getActiveVariant() {
-    return Object.values(SEARCH_VARIANTS).find(variantName => 
-      component.element.classList.contains(`${component.getClass('search')}--${variantName}`)
-    ) || SEARCH_VARIANTS.BAR;
-  }
-  
-  // Return enhanced component
-  return {
-    ...component,
-    
-    // Disabled state management
-    disabled: {
-      /**
-       * Enables the component
-       * @returns Disabled manager for chaining
-       */
-      enable() {
-        enableComponent();
-        return this;
-      },
-      
-      /**
-       * Disables the component
-       * @returns Disabled manager for chaining
-       */
-      disable() {
-        disableComponent();
-        return this;
-      },
-      
-      /**
-       * Checks if component is disabled
-       * @returns True if disabled
-       */
-      isDisabled() {
-        return component.element.classList.contains(`${component.getClass('search')}--disabled`);
-      }
-    },
-    
-    // Appearance management
-    appearance: {
-      /**
-       * Sets search variant
-       * @param variant Variant name
-       * @returns Appearance manager for chaining
-       */
-      setVariant(variant) {
-        const currentVariant = getActiveVariant();
-        
-        // If already this variant, do nothing
-        if (currentVariant === variant) {
-          return this;
-        }
-        
-        // Remove existing variant classes
-        Object.values(SEARCH_VARIANTS).forEach(variantName => {
-          component.element.classList.remove(`${component.getClass('search')}--${variantName}`);
-        });
-        
-        // Add new variant class
-        component.element.classList.add(`${component.getClass('search')}--${variant}`);
-        
-        // Toggle expanded state class
-        if (variant === SEARCH_VARIANTS.VIEW) {
-          component.element.classList.add(`${component.getClass('search')}--expanded`);
-        } else {
-          component.element.classList.remove(`${component.getClass('search')}--expanded`);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets search variant
-       * @returns Current variant name
-       */
-      getVariant() {
-        return getActiveVariant();
-      }
-    }
-  };
-};

package/src/components/search/features/structure.ts

@@ -1,197 +0,0 @@
-// src/components/search/features/structure.ts
-import { SearchConfig } from '../types';
-import { createElement } from '../../../core/dom/create';
-
-/**
- * Creates the search component DOM structure
- * @param config Search configuration
- * @returns Component enhancer with DOM structure
- */
-export const withStructure = (config: SearchConfig) => component => {
-  // Get initial config values
-  const isDisabled = config.disabled === true;
-  const variant = config.variant || 'bar';
-  const isViewMode = variant === 'view';
-  const placeholder = config.placeholder || 'Search';
-  const value = config.value || '';
-  
-  // Get prefixed class names
-  const getClass = (className) => component.getClass(className);
-  
-  // Build attributes object for the input
-  const inputAttrs = {
-    'type': 'text',
-    'placeholder': placeholder,
-    'value': value,
-    'aria-label': placeholder
-  };
-  
-  // Only add disabled attribute if the input should be disabled
-  if (isDisabled) {
-    inputAttrs['disabled'] = 'disabled';
-  }
-  
-  // Create container element
-  const container = createElement({
-    tag: 'div',
-    className: getClass('search-container'),
-    container: component.element,
-    attrs: {
-      style: `
-        ${config.minWidth ? `min-width: ${config.minWidth}px;` : ''}
-        ${config.maxWidth ? `max-width: ${config.maxWidth}px;` : ''}
-        ${config.fullWidth ? 'width: 100%;' : ''}
-      `
-    }
-  });
-  
-  // Create leading icon
-  const leadingIcon = createElement({
-    tag: 'div',
-    className: getClass('search-leading-icon'),
-    container: container,
-    html: config.leadingIcon || '',
-    attrs: {
-      'role': 'button',
-      'tabindex': isDisabled ? '-1' : '0',
-      'aria-label': 'Search'
-    }
-  });
-  
-  // Create input wrapper
-  const inputWrapper = createElement({
-    tag: 'div',
-    className: getClass('search-input-wrapper'),
-    container: container
-  });
-  
-  // Create input element with properly handled disabled state
-  const input = createElement({
-    tag: 'input',
-    className: getClass('search-input'),
-    container: inputWrapper,
-    attrs: inputAttrs
-  });
-  
-  // Create clear button
-  const clearButton = createElement({
-    tag: 'div',
-    className: [
-      getClass('search-clear-button'),
-      value ? '' : getClass('search-clear-button--hidden')
-    ],
-    container: container,
-    html: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
-    attrs: {
-      'role': 'button',
-      'tabindex': isDisabled || !value ? '-1' : '0',
-      'aria-label': 'Clear search'
-    }
-  });
-  
-  // Create optional trailing elements
-  let trailingIcon, trailingIcon2, avatar;
-  
-  if (config.trailingIcon) {
-    trailingIcon = createElement({
-      tag: 'div',
-      className: getClass('search-trailing-icon'),
-      container: container,
-      html: config.trailingIcon,
-      attrs: {
-        'role': 'button',
-        'tabindex': isDisabled ? '-1' : '0',
-        'aria-label': 'Search option'
-      }
-    });
-  }
-  
-  if (config.trailingIcon2) {
-    trailingIcon2 = createElement({
-      tag: 'div',
-      className: getClass('search-trailing-icon'),
-      container: container,
-      html: config.trailingIcon2,
-      attrs: {
-        'role': 'button',
-        'tabindex': isDisabled ? '-1' : '0',
-        'aria-label': 'Search option'
-      }
-    });
-  }
-  
-  if (config.avatar) {
-    avatar = createElement({
-      tag: 'div',
-      className: getClass('search-avatar'),
-      container: container,
-      html: config.avatar
-    });
-  }
-  
-  // Create divider and suggestions container for view variant
-  let divider, suggestionsContainer;
-  
-  if (isViewMode || config.suggestions) {
-    divider = createElement({
-      tag: 'div',
-      className: getClass('search-divider')
-    });
-    
-    suggestionsContainer = createElement({
-      tag: 'div',
-      className: getClass('search-suggestions-container'),
-      container: component.element
-    });
-  }
-  
-  // Add component base class and accessibility attributes
-  component.element.classList.add(component.getClass('search'));
-  component.element.setAttribute('role', 'search');
-  component.element.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
-  
-  // Apply style classes
-  applyStyleClasses(component, config, isViewMode, isDisabled);
-  
-  // Return enhanced component with structure
-  return {
-    ...component,
-    structure: {
-      container,
-      input,
-      inputWrapper,
-      leadingIcon,
-      clearButton,
-      trailingIcon,
-      trailingIcon2,
-      avatar,
-      divider,
-      suggestionsContainer
-    }
-  };
-};
-
-/**
- * Applies style classes based on configuration
- */
-function applyStyleClasses(component, config, isViewMode, isDisabled) {
-  const baseClass = component.getClass('search');
-  
-  // Apply variant class
-  component.element.classList.add(`${baseClass}--${config.variant || 'bar'}`);
-    
-  // Apply disabled class if needed
-  if (isDisabled) {
-    component.element.classList.add(`${baseClass}--disabled`);
-  }
-  
-  // Apply expanded class for view mode
-  if (isViewMode) {
-    component.element.classList.add(`${baseClass}--expanded`);
-  }
-  
-  // Apply fullwidth class if needed
-  if (config.fullWidth) {
-    component.element.classList.add(`${baseClass}--fullwidth`);
-  }
-}

package/src/components/search/index.ts

@@ -1,7 +0,0 @@
-// src/components/search/index.ts
-
-// Export main component creator
-export { default } from './search';
-
-// Export types for TypeScript users
-export type { SearchConfig, SearchComponent, SearchEvent } from './types';

package/src/components/search/search.ts

@@ -1,52 +0,0 @@
-// src/components/search/search.ts
-import { pipe } from '../../core/compose/pipe';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { withStructure, withSearch, withStates } from './features';
-import { withAPI } from './api';
-import { SearchConfig, SearchComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Search component
- * @param {SearchConfig} config - Search configuration object
- * @returns {SearchComponent} Search component instance
- */
-const createSearch = (config: SearchConfig = {}): SearchComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Create the component with all required features
-    const component = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withStructure(baseConfig),
-      withStates(baseConfig),
-      withSearch(baseConfig),
-      withLifecycle()
-    )(baseConfig);
-    
-    // Generate the API configuration
-    const apiOptions = getApiConfig(component);
-    
-    // Apply the API layer
-    const search = withAPI(apiOptions)(component);
-
-    // Register event handlers from config
-    if (baseConfig.on && typeof search.on === 'function') {
-      Object.entries(baseConfig.on).forEach(([event, handler]) => {
-        if (typeof handler === 'function') {
-          search.on(event, handler);
-        }
-      });
-    }
-
-    return search;
-  } catch (error) {
-    console.error('Search creation error:', error);
-    throw new Error(`Failed to create search: ${(error as Error).message}`);
-  }
-};
-
-export default createSearch;

package/src/components/search/types.ts

@@ -1,175 +0,0 @@
-// src/components/search/types.ts
-
-/**
- * Navigation variants for the search component
- */
-export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
-
-/**
- * Valid event types for search component
- */
-export type SearchEventType = 'focus' | 'blur' | 'input' | 'submit' | 'clear' | 'iconClick';
-
-/**
- * Configuration options for the search component
- * @interface SearchConfig
- */
-export interface SearchConfig {
-  /** The variant of the search component (rail, drawer, bar, modal, or standard) */
-  variant?: NavVariant | string;
-  
-  /** Whether the search component is disabled */
-  disabled?: boolean;
-  
-  /** Placeholder text for the search input */
-  placeholder?: string;
-  
-  /** Initial value for the search input */
-  value?: string;
-  
-  /** Leading icon HTML or 'none' to remove */
-  leadingIcon?: string;
-  
-  /** Trailing icon HTML (optional) */
-  trailingIcon?: string;
-  
-  /** Second trailing icon HTML (optional) */
-  trailingIcon2?: string;
-  
-  /** Avatar HTML for trailing avatar (optional) */
-  avatar?: string;
-
-  /** If true, will show the clear button when the input has text */
-  showClearButton?: boolean;
-  
-  /** Callback function when a search is submitted */
-  onSubmit?: (value: string) => void;
-  
-  /** Callback function when the input value changes */
-  onInput?: (value: string) => void;
-  
-  /** Callback function when the clear button is clicked */
-  onClear?: () => void;
-  
-  /** Suggestions to show when the search is focused (array of strings or objects) */
-  suggestions?: string[] | Array<{text: string, value?: string, icon?: string}>;
-  
-  /** Whether to show dividers between suggestion groups */
-  showDividers?: boolean;
-
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Maximum width of the search component in pixels */
-  maxWidth?: number;
-  
-  /** Minimum width of the search component in pixels */
-  minWidth?: number;
-  
-  /** Whether the search component is full-width */
-  fullWidth?: boolean;
-  
-  /** Event handlers for search events */
-  on?: {
-    [key in SearchEventType]?: (event: SearchEvent) => void;
-  };
-}
-
-/**
- * Search event data
- * @interface SearchEvent
- */
-export interface SearchEvent {
-  /** The search component that triggered the event */
-  search: any;
-  
-  /** Current search value */
-  value: string;
-  
-  /** Original DOM event if available */
-  originalEvent: Event | null;
-  
-  /** Function to prevent default behavior */
-  preventDefault: () => void;
-  
-  /** Whether default behavior was prevented */
-  defaultPrevented: boolean;
-}
-
-/**
- * Search component public API interface
- * @interface SearchComponent
- */
-export interface SearchComponent {
-  /** The root element of the search component */
-  element: HTMLElement;
-  
-  /** Sets the search value */
-  setValue: (value: string, triggerEvent?: boolean) => SearchComponent;
-  
-  /** Gets the search value */
-  getValue: () => string;
-  
-  /** Sets placeholder text */
-  setPlaceholder: (text: string) => SearchComponent;
-  
-  /** Gets placeholder text */
-  getPlaceholder: () => string;
-  
-  /** Sets leading icon */
-  setLeadingIcon: (iconHtml: string) => SearchComponent;
-  
-  /** Sets trailing icon */
-  setTrailingIcon: (iconHtml: string) => SearchComponent;
-  
-  /** Sets second trailing icon */
-  setTrailingIcon2: (iconHtml: string) => SearchComponent;
-  
-  /** Sets avatar */
-  setAvatar: (avatarHtml: string) => SearchComponent;
-  
-  /** Shows or hides clear button */
-  showClearButton: (show: boolean) => SearchComponent;
-  
-  /** Updates suggestions */
-  setSuggestions: (suggestions: string[] | Array<{text: string, value?: string, icon?: string}>) => SearchComponent;
-  
-  /** Shows or hides suggestions */
-  showSuggestions: (show: boolean) => SearchComponent;
-  
-  /** Focuses the search input */
-  focus: () => SearchComponent;
-  
-  /** Blurs the search input */
-  blur: () => SearchComponent;
-  
-  /** Expands the search bar into view mode (if in bar mode) */
-  expand: () => SearchComponent;
-  
-  /** Collapses the search view back to bar mode */
-  collapse: () => SearchComponent;
-  
-  /** Clears the search input */
-  clear: () => SearchComponent;
-  
-  /** Submits the search */
-  submit: () => SearchComponent;
-  
-  /** Enables the search component */
-  enable: () => SearchComponent;
-  
-  /** Disables the search component */
-  disable: () => SearchComponent;
-  
-  /** Checks if search is disabled */
-  isDisabled: () => boolean;
-  
-  /** Adds event listener */
-  on: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
-  
-  /** Removes event listener */
-  off: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
-  
-  /** Destroys the search component and cleans up resources */
-  destroy: () => void;
-}