mtrl 0.2.6 → 0.2.7

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

@@ -0,0 +1,165 @@
+// src/components/search/features/states.ts
+import { SEARCH_VARIANTS } from '../constants';
+import { SearchConfig } from '../types';
+
+/**
+ * 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,198 @@
+// src/components/search/features/structure.ts
+import { SEARCH_VARIANTS } from '../constants';
+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 || SEARCH_VARIANTS.BAR;
+  const isViewMode = variant === SEARCH_VARIANTS.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 || SEARCH_VARIANTS.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,10 @@
+// src/components/search/index.ts
+
+// Export main component creator
+export { default } from './search';
+
+// Export constants
+export { SEARCH_VARIANTS, SEARCH_EVENTS } from './constants';
+
+// 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,163 @@
+// src/components/search/types.ts
+import { SEARCH_VARIANTS, SEARCH_EVENTS } from './constants';
+
+/**
+ * Configuration options for the search component
+ */
+export interface SearchConfig {
+  /** The variant of the search component (bar or view) */
+  variant?: keyof typeof SEARCH_VARIANTS | typeof SEARCH_VARIANTS[keyof typeof SEARCH_VARIANTS];
+  
+  /** 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 keyof typeof SEARCH_EVENTS | typeof SEARCH_EVENTS[keyof typeof SEARCH_EVENTS]]?: (event: SearchEvent) => void;
+  };
+}
+
+/**
+ * Search event data
+ */
+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
+ */
+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: keyof typeof SEARCH_EVENTS | typeof SEARCH_EVENTS[keyof typeof SEARCH_EVENTS], handler: (event: SearchEvent) => void) => SearchComponent;
+  
+  /** Removes event listener */
+  off: (event: keyof typeof SEARCH_EVENTS | typeof SEARCH_EVENTS[keyof typeof SEARCH_EVENTS], handler: (event: SearchEvent) => void) => SearchComponent;
+  
+  /** Destroys the search component and cleans up resources */
+  destroy: () => void;
+}

package/src/components/segmented-button/_styles.scss

@@ -0,0 +1,117 @@
+// src/components/segmented-button/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-segmented-button';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: v.shape('full');
+  border: 1px solid t.color('outline');
+  background-color: transparent;
+  overflow: hidden;
+  
+  // Disabled state
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  // Segment container
+  &-segment {
+    // Base styles
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-width: 48px;
+    padding: 0 12px;
+    border: none;
+    background-color: transparent;
+    color: t.color('on-surface');
+    cursor: pointer;
+    user-select: none;
+    
+    // Fix segmented borders
+    &:not(:first-child) {
+      border-left: 1px solid t.color('outline');
+    }
+    
+    // Typography
+    @include m.typography('label-large');
+    
+    // Transition
+    @include m.motion-transition(
+      background-color, 
+      color
+    );
+    
+    // States
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      outline-offset: -2px;
+    }
+    
+    &:hover:not(.#{$component}-segment--disabled) {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    // Selected state
+    &--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover:not(.#{$component}-segment--disabled) {
+        background-color: t.alpha('secondary-container', 0.8);
+      }
+    }
+    
+    // Disabled state
+    &--disabled {
+      opacity: 0.38;
+      cursor: not-allowed;
+    }
+    
+    // Text element
+    &-text {
+      // For when both icon and text are present
+      margin: 0 auto;
+    }
+    
+    // Icon styles
+    &-icon, &-checkmark {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+      
+      + .#{$component}-segment-text {
+        margin-left: 8px;
+      }
+    }
+    
+    // Space the checkmark icon
+    &-checkmark + .#{$component}-segment-text {
+      margin-left: 8px;
+    }
+  }
+}