mtrl 0.2.5 → 0.2.7

package/src/components/search/_styles.scss

@@ -0,0 +1,306 @@
+// src/components/search/_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}-search';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 720px;
+  min-width: 360px;
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  z-index: 1; 
+  
+  // Container
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 0 16px;
+    border-radius: v.shape('pill');
+    background-color: t.color('surface-container-high');
+    transition: background-color 0.2s ease;
+    overflow: hidden; 
+    
+    .#{$component}--disabled & {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+  }
+  
+  // Leading Icon
+  &-leading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-right: 16px;
+    color: t.color('on-surface');
+    cursor: pointer;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Input wrapper
+  &-input-wrapper {
+    flex: 1;
+    min-width: 0;
+    height: 100%; 
+    display: flex;
+    align-items: center;
+  }
+  
+  // Input field
+  &-input {
+    width: 100%;
+    height: 100%; 
+    min-height: 36px; 
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    color: t.color('on-surface');
+    padding: 8px 0; 
+    box-sizing: border-box;
+    outline: none;
+    
+    &::placeholder {
+      color: t.color('on-surface-variant');
+    }
+    
+    .#{$component}--disabled & {
+      cursor: not-allowed;
+    }
+  }
+  
+  // Clear button
+  &-clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-left: 16px;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    flex-shrink: 0;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.2s ease, visibility 0s;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+    
+    &--hidden {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s ease, visibility 0s 0.2s;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Trailing icons
+  &-trailing-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-left: 16px;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Avatar
+  &-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16px;
+    min-width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  // Search variants
+  &--bar {
+    border-radius: v.shape('pill');
+    overflow: hidden;
+    transition: max-width 0.3s ease, width 0.3s ease;
+  }
+  
+  &--view {
+    border-radius: 0;
+    max-width: 100%;
+    width: 100%;
+    
+    .#{$component}-container {
+      border-radius: 0;
+    }
+    
+    // For docked view mode
+    @include m.breakpoint-up('md') {
+      border-radius: v.shape('extra-large');
+      
+      .#{$component}-container {
+        border-radius: v.shape('extra-large') v.shape('extra-large') 0 0;
+        height: 56px;
+      }
+    }
+  }
+  
+  // Divider
+  &-divider {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: t.color('outline');
+    opacity: 0.5;
+  }
+  
+  // Suggestions container
+  &-suggestions-container {
+    display: none;
+    background-color: t.color('surface-container-high');
+    max-height: 400px;
+    overflow-y: auto;
+    border-bottom-left-radius: v.shape('medium');
+    border-bottom-right-radius: v.shape('medium');
+    
+    &--visible {
+      display: block;
+    }
+    
+    // For docked view mode
+    @include m.breakpoint-up('md') {
+      border-radius: 0 0 v.shape('extra-large') v.shape('extra-large');
+    }
+  }
+  
+  // Suggestions list
+  &-suggestions-list {
+    list-style: none;
+    padding: 8px 0;
+    margin: 0;
+  }
+  
+  // Suggestion item
+  &-suggestion-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    min-height: 48px; 
+    font-size: 16px;
+    color: t.color('on-surface');
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    
+    &:hover, &:focus {
+      background-color: t.alpha('on-surface', 0.05);
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    // Highlight matched text
+    strong {
+      font-weight: 600;
+      color: t.color('on-surface');
+    }
+  }
+  
+  // Suggestion item icon
+  &-suggestion-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+    color: t.color('on-surface-variant');
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Suggestion item text
+  &-suggestion-text {
+    flex: 1;
+  }
+  
+  // Focus state
+  &--focused {
+    .#{$component}-container {
+      // No additional styles needed for focus in MD3
+    }
+  }
+  
+  // Full width
+  &--fullwidth {
+    max-width: 100%;
+  }
+  
+  // Expanded state (transitioning from bar to view)
+  &--expanded {
+    max-width: 100%;
+    width: 100%;
+  }
+}

package/src/components/search/api.ts

@@ -0,0 +1,203 @@
+// src/components/search/api.ts
+import { SearchComponent, SearchEvent } from './types';
+import { SEARCH_COLORS, SEARCH_SIZES, SEARCH_EVENTS } from './constants';
+
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+  search: {
+    setValue: (value: string, triggerEvent?: boolean) => any;
+    getValue: () => string;
+    setPlaceholder: (text: string) => any;
+    getPlaceholder: () => string;
+    focus: () => any;
+    blur: () => any;
+    expand: () => any;
+    collapse: () => any;
+    clear: () => any;
+    submit: () => any;
+    setSuggestions: (suggestions: any[]) => any;
+    showSuggestions: (show: boolean) => any;
+  };
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  appearance: {
+    setColor: (color: string) => void;
+    getColor: () => string;
+    setSize: (size: string) => void;
+    getSize: () => string;
+  };
+  icons: {
+    setLeadingIcon: (iconHtml: string) => void;
+    setTrailingIcon: (iconHtml: string) => void;
+    setTrailingIcon2: (iconHtml: string) => void;
+    setAvatar: (avatarHtml: string) => void;
+    showClearButton: (show: boolean) => void;
+  };
+  events: {
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Enhances a search component with a streamlined API
+ * @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 Search component
+ */
+export const withAPI = (options: ApiOptions) => 
+  (component: { element: HTMLElement }): SearchComponent => {
+    return {
+      ...component as any,
+      
+      // Element access
+      element: component.element,
+      
+      // Value management
+      setValue(value: string, triggerEvent: boolean = true) {
+        options.search.setValue(value, triggerEvent);
+        return this;
+      },
+      
+      getValue() {
+        return options.search.getValue();
+      },
+      
+      // Placeholder management
+      setPlaceholder(text: string) {
+        options.search.setPlaceholder(text);
+        return this;
+      },
+      
+      getPlaceholder() {
+        return options.search.getPlaceholder();
+      },
+      
+      // Icon management
+      setLeadingIcon(iconHtml: string) {
+        options.icons.setLeadingIcon(iconHtml);
+        return this;
+      },
+      
+      setTrailingIcon(iconHtml: string) {
+        options.icons.setTrailingIcon(iconHtml);
+        return this;
+      },
+      
+      setTrailingIcon2(iconHtml: string) {
+        options.icons.setTrailingIcon2(iconHtml);
+        return this;
+      },
+      
+      setAvatar(avatarHtml: string) {
+        options.icons.setAvatar(avatarHtml);
+        return this;
+      },
+      
+      // Controls
+      showClearButton(show: boolean) {
+        options.icons.showClearButton(show);
+        return this;
+      },
+      
+      setSuggestions(suggestions) {
+        options.search.setSuggestions(suggestions);
+        return this;
+      },
+      
+      showSuggestions(show: boolean) {
+        options.search.showSuggestions(show);
+        return this;
+      },
+      
+      focus() {
+        options.search.focus();
+        return this;
+      },
+      
+      blur() {
+        options.search.blur();
+        return this;
+      },
+      
+      expand() {
+        options.search.expand();
+        return this;
+      },
+      
+      collapse() {
+        options.search.collapse();
+        return this;
+      },
+      
+      clear() {
+        options.search.clear();
+        return this;
+      },
+      
+      submit() {
+        options.search.submit();
+        return this;
+      },
+      
+      // State management
+      enable() {
+        options.disabled.enable();
+        return this;
+      },
+      
+      disable() {
+        options.disabled.disable();
+        return this;
+      },
+      
+      isDisabled() {
+        return options.disabled.isDisabled();
+      },
+      
+      // Appearance management
+      setColor(color: keyof typeof SEARCH_COLORS | typeof SEARCH_COLORS[keyof typeof SEARCH_COLORS]) {
+        options.appearance.setColor(color);
+        return this;
+      },
+      
+      getColor() {
+        return options.appearance.getColor();
+      },
+      
+      setSize(size: keyof typeof SEARCH_SIZES | typeof SEARCH_SIZES[keyof typeof SEARCH_SIZES]) {
+        options.appearance.setSize(size);
+        return this;
+      },
+      
+      getSize() {
+        return options.appearance.getSize();
+      },
+      
+      // Event management
+      on(event: keyof typeof SEARCH_EVENTS | typeof SEARCH_EVENTS[keyof typeof SEARCH_EVENTS], handler: (event: SearchEvent) => void) {
+        options.events.on(event, handler);
+        return this;
+      },
+      
+      off(event: keyof typeof SEARCH_EVENTS | typeof SEARCH_EVENTS[keyof typeof SEARCH_EVENTS], handler: (event: SearchEvent) => void) {
+        options.events.off(event, handler);
+        return this;
+      },
+      
+      // Lifecycle management
+      destroy() {
+        if (options.lifecycle?.destroy) {
+          options.lifecycle.destroy();
+        }
+      }
+    };
+  };

package/src/components/search/config.ts

@@ -0,0 +1,87 @@
+// src/components/search/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { SearchConfig } from './types';
+import { SEARCH_VARIANTS } from './constants';
+
+/**
+ * Default configuration for the Search component
+ */
+export const defaultConfig: SearchConfig = {
+  variant: SEARCH_VARIANTS.BAR,
+  disabled: false,
+  placeholder: 'Search',
+  value: '',
+  leadingIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+  showClearButton: true,
+  minWidth: 360,
+  maxWidth: 720,
+  fullWidth: false,
+  showDividers: true
+};
+
+/**
+ * Creates the base configuration for Search component
+ * @param {SearchConfig} config - User provided configuration
+ * @returns {SearchConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: SearchConfig = {}): SearchConfig => 
+  createComponentConfig(defaultConfig, config, 'search') as SearchConfig;
+
+/**
+ * Generates element configuration for the Search component
+ * @param {SearchConfig} config - Search configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: SearchConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      role: 'search',
+      'aria-disabled': config.disabled === true ? 'true' : 'false'
+    },
+    className: config.class
+  });
+
+/**
+ * Creates API configuration for the Search component
+ * @param {Object} comp - Component with search features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  search: {
+    setValue: (v, t) => comp.search?.setValue(v, t),
+    getValue: () => comp.search?.getValue() ?? '',
+    setPlaceholder: (p) => comp.search?.setPlaceholder(p),
+    getPlaceholder: () => comp.search?.getPlaceholder() ?? '',
+    focus: () => comp.search?.focus(),
+    blur: () => comp.search?.blur(),
+    expand: () => comp.search?.expand(),
+    collapse: () => comp.search?.collapse(),
+    clear: () => comp.search?.clear(),
+    submit: () => comp.search?.submit(),
+    setSuggestions: (s) => comp.search?.setSuggestions(s),
+    showSuggestions: (s) => comp.search?.showSuggestions(s)
+  },
+  disabled: {
+    enable: () => comp.disabled?.enable?.(),
+    disable: () => comp.disabled?.disable?.(),
+    isDisabled: () => comp.disabled?.isDisabled?.() ?? false
+  },
+  appearance: {
+    setLeadingIcon: (i) => comp.icons?.setLeadingIcon?.(i),
+    setTrailingIcon: (i) => comp.icons?.setTrailingIcon?.(i),
+    setTrailingIcon2: (i) => comp.icons?.setTrailingIcon2?.(i),
+    setAvatar: (a) => comp.icons?.setAvatar?.(a),
+    showClearButton: (s) => comp.icons?.showClearButton?.(s)
+  },
+  events: {
+    on: (e, h) => comp.on?.(e, h),
+    off: (e, h) => comp.off?.(e, h)
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});

package/src/components/search/constants.ts

@@ -0,0 +1,21 @@
+// src/components/search/constants.ts
+
+/**
+ * Available search component variants
+ */
+export const SEARCH_VARIANTS = {
+  BAR: 'bar',
+  VIEW: 'view'
+} as const;
+
+/**
+ * Available search component events
+ */
+export const SEARCH_EVENTS = {
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  INPUT: 'input',
+  SUBMIT: 'submit',
+  CLEAR: 'clear',
+  ICON_CLICK: 'iconClick'
+} as const;

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

@@ -0,0 +1,4 @@
+// src/components/search/features/index.ts
+export { withStructure } from './structure';
+export { withStates } from './states';
+export { withSearch } from './search';