mtrl 0.2.6 → 0.2.8

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

@@ -0,0 +1,169 @@
+// 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

@@ -0,0 +1,197 @@
+// 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

@@ -0,0 +1,7 @@
+// 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

@@ -0,0 +1,52 @@
+// 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

@@ -0,0 +1,175 @@
+// 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;
+}

package/src/components/segmented-button/config.ts

@@ -0,0 +1,80 @@
+// src/components/segmented-button/config.ts
+import { createComponentConfig } from '../../core/config/component-config';
+import { SegmentedButtonConfig, SelectionMode } from './types';
+
+export const DEFAULT_CHECKMARK_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>`;
+
+/**
+ * Default configuration values for segmented buttons
+ * @internal
+ */
+export const DEFAULT_CONFIG = {
+  mode: SelectionMode.SINGLE,
+  ripple: true
+};
+
+/**
+ * Creates the base configuration for Segmented Button component
+ * @param {SegmentedButtonConfig} config - User provided configuration
+ * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
+ * @internal
+ */
+export const createBaseConfig = (config: SegmentedButtonConfig = {}): SegmentedButtonConfig => 
+  createComponentConfig(DEFAULT_CONFIG, config, 'segmented-button') as SegmentedButtonConfig;
+
+/**
+ * Generates element configuration for the Segmented Button container
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {Object} Element configuration object for withElement
+ * @internal
+ */
+export const getContainerConfig = (config: SegmentedButtonConfig) => ({
+  tag: 'div',
+  componentName: 'segmented-button',
+  attrs: {
+    role: 'group',
+    'aria-label': 'Segmented button',
+    'data-mode': config.mode || SelectionMode.SINGLE
+  },
+  className: [
+    config.class,
+    config.disabled ? `${config.prefix}-segmented-button--disabled` : null
+  ],
+  interactive: true
+});
+
+/**
+ * Generates configuration for a segment element
+ * @param {Object} segment - Segment configuration
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @returns {Object} Element configuration for the segment
+ * @internal
+ */
+export const getSegmentConfig = (segment, prefix, groupDisabled = false) => {
+  const isDisabled = groupDisabled || segment.disabled;
+  
+  return {
+    tag: 'button',
+    attrs: {
+      type: 'button',
+      role: 'button',
+      disabled: isDisabled ? true : undefined,
+      'aria-pressed': segment.selected ? 'true' : 'false',
+      value: segment.value
+    },
+    className: [
+      `${prefix}-segment`,
+      segment.selected ? `${prefix}-segment--selected` : null,
+      isDisabled ? `${prefix}-segment--disabled` : null,
+      segment.class
+    ],
+    forwardEvents: {
+      click: (component) => !isDisabled
+    },
+    interactive: !isDisabled
+  };
+};

package/src/components/segmented-button/index.ts

@@ -0,0 +1,4 @@
+// src/components/segmented-button/index.ts
+export { default, default as createSegmentedButton } from './segmented-button';
+export { SelectionMode } from './types';
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';