mtrl 0.2.6 → 0.2.8

package/src/components/radios/types.ts

@@ -1,5 +1,4 @@
 // src/components/radios/types.ts
-import { RADIO_DIRECTIONS } from './constants';
 
 /**
  * Configuration for a radio option in the Radios component
@@ -58,12 +57,6 @@ export interface RadiosConfig {
    */
   disabled?: boolean;
   
-  /** 
-   * Group layout direction
-   * @default 'vertical'
-   */
-  direction?: keyof typeof RADIO_DIRECTIONS | string;
-  
   /** 
    * Whether to enable ripple effect
    * @default true

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,86 @@
+// src/components/search/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { SearchConfig } from './types';
+
+/**
+ * Default configuration for the Search component
+ */
+export const defaultConfig: SearchConfig = {
+  variant: '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/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';