mtrl 0.3.8 → 0.4.0

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

@@ -1,306 +0,0 @@
-// src/components/segmented-button/types.ts
-
-/**
- * Segmented button selection mode
- * @category Components
- */
-export enum SelectionMode {
-  /** Only one segment can be selected at a time */
-  SINGLE = 'single',
-  /** Multiple segments can be selected */
-  MULTI = 'multi'
-}
-
-/**
- * Density options for segmented button
- * Controls the overall sizing and spacing of the component.
- * @category Components
- */
-export enum Density {
-  /** Default size with standard spacing */
-  DEFAULT = 'default',
-  /** Reduced size and spacing, more compact */
-  COMFORTABLE = 'comfortable',
-  /** Minimal size and spacing, most compact */
-  COMPACT = 'compact'
-}
-
-/**
- * Event types for segmented button
- */
-export type SegmentedButtonEventType = 'change';
-
-/**
- * Event data for segmented button events
- */
-export interface SegmentedButtonEvent {
-  /** The segmented button component that triggered the event */
-  segmentedButton: SegmentedButtonComponent;
-  
-  /** The selected segments */
-  selected: Segment[];
-  
-  /** Values of the selected segments */
-  values: string[];
-  
-  /** Original DOM event if available */
-  originalEvent: Event | null;
-  
-  /** Function to prevent default behavior */
-  preventDefault: () => void;
-  
-  /** Whether default behavior was prevented */
-  defaultPrevented: boolean;
-}
-
-/**
- * Configuration for a single segment within a segmented button
- * @category Components
- */
-export interface SegmentConfig {
-  /**
-   * Text content for the segment
-   * @example 'Day'
-   */
-  text?: string;
-
-  /**
-   * Icon HTML content
-   * @example '<svg>...</svg>'
-   */
-  icon?: string;
-
-  /**
-   * Whether this segment is initially selected
-   * @default false
-   */
-  selected?: boolean;
-
-  /**
-   * Value associated with this segment
-   */
-  value?: string;
-
-  /**
-   * Whether this segment is disabled
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Additional CSS class names for this segment
-   */
-  class?: string;
-  
-  /**
-   * Custom icon to display when segment is selected (replaces default checkmark)
-   */
-  checkmarkIcon?: string;
-}
-
-/**
- * Configuration interface for the Segmented Button component
- * @category Components
- */
-export interface SegmentedButtonConfig {
-  /**
-   * Selection mode for the segmented button group
-   * @default SelectionMode.SINGLE
-   */
-  mode?: SelectionMode;
-
-  /**
-   * Array of segment configurations
-   */
-  segments?: SegmentConfig[];
-
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-
-  /**
-   * Component name used in class generation
-   */
-  componentName?: string;
-
-  /**
-   * Whether the entire segmented button is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Additional CSS class for the segmented button container
-   */
-  class?: string;
-
-  /**
-   * Whether to enable ripple effect
-   * @default true
-   */
-  ripple?: boolean;
-  
-  /**
-   * Density setting that controls the component's size and spacing
-   * @default Density.DEFAULT
-   */
-  density?: Density | string;
-
-  /**
-   * Ripple effect configuration
-   */
-  rippleConfig?: {
-    /** Duration of the ripple animation in milliseconds */
-    duration?: number;
-    /** Timing function for the ripple animation */
-    timing?: string;
-    /** Opacity values for ripple start and end [start, end] */
-    opacity?: [string, string];
-  };
-  
-  /**
-   * Event handlers for segmented button events
-   */
-  on?: {
-    [key in SegmentedButtonEventType]?: (event: SegmentedButtonEvent) => void;
-  };
-}
-
-/**
- * Interface for a segment within a segmented button
- * @category Components
- */
-export interface Segment {
-  /** The segment's DOM element */
-  element: HTMLElement;
-
-  /** The segment's value */
-  value: string;
-
-  /**
-   * Gets whether the segment is selected
-   */
-  isSelected: () => boolean;
-
-  /**
-   * Sets the segment's selected state
-   * @param selected - Whether the segment should be selected
-   */
-  setSelected: (selected: boolean) => void;
-
-  /**
-   * Gets whether the segment is disabled
-   */
-  isDisabled: () => boolean;
-
-  /**
-   * Sets the segment's disabled state
-   * @param disabled - Whether the segment should be disabled
-   */
-  setDisabled: (disabled: boolean) => void;
-
-  /**
-   * Destroys the segment and cleans up resources
-   */
-  destroy: () => void;
-}
-
-/**
- * Segmented Button component interface
- * @category Components
- */
-export interface SegmentedButtonComponent {
-  /** The component's container DOM element */
-  element: HTMLElement;
-
-  /** Array of segment objects */
-  segments: Segment[];
-
-  /**
-   * Gets the selected segment(s)
-   * @returns An array of selected segments
-   */
-  getSelected: () => Segment[];
-
-  /**
-   * Gets the values of selected segment(s)
-   * @returns An array of selected segment values
-   */
-  getValue: () => string[];
-
-  /**
-   * Selects a segment by its value
-   * @param value - The value of the segment to select
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  select: (value: string) => SegmentedButtonComponent;
-
-  /**
-   * Deselects a segment by its value
-   * @param value - The value of the segment to deselect
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  deselect: (value: string) => SegmentedButtonComponent;
-
-  /**
-   * Enables the segmented button
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  enable: () => SegmentedButtonComponent;
-
-  /**
-   * Disables the segmented button
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  disable: () => SegmentedButtonComponent;
-  
-  /**
-   * Enables a specific segment by its value
-   * @param value - The value of the segment to enable
-   * @returns The SegmentedButtonComponent for chaining 
-   */
-  enableSegment: (value: string) => SegmentedButtonComponent;
-  
-  /**
-   * Disables a specific segment by its value
-   * @param value - The value of the segment to disable
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  disableSegment: (value: string) => SegmentedButtonComponent;
-  
-  /**
-   * Sets the density of the segmented button
-   * @param density - The density level to set
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  setDensity: (density: Density | string) => SegmentedButtonComponent;
-  
-  /**
-   * Gets the current density setting
-   * @returns The current density
-   */
-  getDensity: () => string;
-
-  /**
-   * Adds an event listener to the segmented button
-   * @param event - Event name ('change', etc.)
-   * @param handler - Event handler function
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  on: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
-
-  /**
-   * Removes an event listener from the segmented button
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The SegmentedButtonComponent for chaining
-   */
-  off: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
-
-  /**
-   * Destroys the component and cleans up resources
-   */
-  destroy: () => void;
-}

package/src/components/select/api.ts

@@ -1,78 +0,0 @@
-// src/components/select/api.ts
-import { SelectComponent, ApiOptions, SelectOption } from './types';
-
-/**
- * Enhances a select component with API methods
- * @param options - API configuration options
- * @returns Higher-order function that adds API methods to component
- * @internal
- */
-export const withAPI = (options: ApiOptions) => 
-  (component: any): SelectComponent => ({
-    ...component,
-    element: component.element,
-    textfield: component.textfield,
-    menu: component.menu,
-    
-    getValue: options.select.getValue,
-    
-    setValue(value: string): SelectComponent {
-      options.select.setValue(value);
-      return this;
-    },
-    
-    getText: options.select.getText,
-    
-    getSelectedOption: options.select.getSelectedOption,
-    
-    getOptions: options.select.getOptions,
-    
-    setOptions(options: SelectOption[]): SelectComponent {
-      options.select.setOptions(options);
-      return this;
-    },
-    
-    open(interactionType: 'mouse' | 'keyboard' = 'mouse'): SelectComponent {
-      options.select.open(undefined, interactionType);
-      return this;
-    },
-    
-    close(): SelectComponent {
-      options.select.close();
-      return this;
-    },
-    
-    isOpen: options.select.isOpen,
-    
-    on(event, handler) {
-      if (options.events?.on) {
-        options.events.on(event, handler);
-      } else if (component.on) {
-        component.on(event, handler);
-      }
-      return this;
-    },
-    
-    off(event, handler) {
-      if (options.events?.off) {
-        options.events.off(event, handler);
-      } else if (component.off) {
-        component.off(event, handler);
-      }
-      return this;
-    },
-    
-    enable(): SelectComponent {
-      options.disabled.enable();
-      return this;
-    },
-    
-    disable(): SelectComponent {
-      options.disabled.disable();
-      return this;
-    },
-    
-    destroy() {
-      options.lifecycle.destroy();
-    }
-  });

package/src/components/select/config.ts

@@ -1,76 +0,0 @@
-// src/components/select/config.ts
-
-import { 
-  createComponentConfig, 
-  createElementConfig
-} from '../../core/config/component-config';
-import { SelectConfig, BaseComponent, ApiOptions } from './types';
-
-/**
- * Default configuration for the Select component
- */
-export const defaultConfig: SelectConfig = {
-  options: [],
-  variant: 'filled',
-  placement: 'bottom-start'
-};
-
-/**
- * Creates the base configuration for Select component
- * @param {SelectConfig} config - User provided configuration
- * @returns {SelectConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: SelectConfig = {}): SelectConfig => 
-  createComponentConfig(defaultConfig, config, 'select') as SelectConfig;
-
-/**
- * Creates API configuration for the Select component
- * @param {BaseComponent} comp - Component with select features
- * @returns {ApiOptions} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
-  select: {
-    getValue: comp.select?.getValue || (() => null),
-    setValue: comp.select?.setValue || (() => comp),
-    getText: comp.select?.getText || (() => ''),
-    getSelectedOption: comp.select?.getSelectedOption || (() => null),
-    getOptions: comp.select?.getOptions || (() => []),
-    setOptions: comp.select?.setOptions || (() => comp),
-    open: comp.select?.open || (() => comp),
-    close: comp.select?.close || (() => comp),
-    isOpen: comp.select?.isOpen || (() => false)
-  },
-  events: {
-    on: comp.on || (() => comp),
-    off: comp.off || (() => comp)
-  },
-  disabled: {
-    enable: () => {
-      if (comp.textfield?.enable) {
-        comp.textfield.enable();
-      }
-      return comp;
-    },
-    disable: () => {
-      if (comp.textfield?.disable) {
-        comp.textfield.disable();
-      }
-      return comp;
-    }
-  },
-  lifecycle: {
-    destroy: () => {
-      if (comp.textfield?.destroy) {
-        comp.textfield.destroy();
-      }
-      if (comp.menu?.destroy) {
-        comp.menu.destroy();
-      }
-      if (comp.lifecycle?.destroy) {
-        comp.lifecycle.destroy();
-      }
-    }
-  }
-});
-
-export default defaultConfig;