mtrl 0.3.8 → 0.4.0

package/dist/components/select/constants.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Select variants
+ */
+export declare const SELECT_VARIANTS: {
+    /** Filled select field with solid background */
+    readonly FILLED: "filled";
+    /** Outlined select field with border */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Select menu placement options
+ */
+export declare const SELECT_PLACEMENT: {
+    /** Menu appears below the select field, aligned to the left edge */
+    readonly BOTTOM_START: "bottom-start";
+    /** Menu appears below the select field, centered */
+    readonly BOTTOM: "bottom";
+    /** Menu appears below the select field, aligned to the right edge */
+    readonly BOTTOM_END: "bottom-end";
+    /** Menu appears above the select field, aligned to the left edge */
+    readonly TOP_START: "top-start";
+    /** Menu appears above the select field, centered */
+    readonly TOP: "top";
+    /** Menu appears above the select field, aligned to the right edge */
+    readonly TOP_END: "top-end";
+};
+/**
+ * Select interaction types
+ */
+export declare const SELECT_INTERACTION: {
+    /** Interaction via mouse or touch */
+    readonly MOUSE: "mouse";
+    /** Interaction via keyboard */
+    readonly KEYBOARD: "keyboard";
+};
+/**
+ * Select event names
+ */
+export declare const SELECT_EVENTS: {
+    /** Fired when selected option changes */
+    readonly CHANGE: "change";
+    /** Fired when options menu opens */
+    readonly OPEN: "open";
+    /** Fired when options menu closes */
+    readonly CLOSE: "close";
+};
+/**
+ * Default icons for select
+ */
+export declare const SELECT_ICONS: {
+    /** Dropdown arrow icon */
+    readonly DROPDOWN: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5z\"/></svg>";
+    /** Checkmark icon for selected item */
+    readonly CHECKMARK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>";
+};
+/**
+ * Default configuration values
+ */
+export declare const SELECT_DEFAULTS: {
+    /** Default variant */
+    readonly VARIANT: "filled";
+    /** Default menu placement */
+    readonly PLACEMENT: "bottom-start";
+    /** Default label */
+    readonly LABEL: "Select";
+    /** Default value */
+    readonly VALUE: "";
+    /** Whether the select is required by default */
+    readonly REQUIRED: false;
+    /** Whether the select is disabled by default */
+    readonly DISABLED: false;
+    /** Default supporting text */
+    readonly SUPPORTING_TEXT: "";
+    /** Whether in error state by default */
+    readonly ERROR: false;
+};
+/**
+ * CSS classes for select elements
+ */
+export declare const SELECT_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "select";
+    /** Textfield element */
+    readonly TEXTFIELD: "select__textfield";
+    /** Dropdown icon */
+    readonly DROPDOWN_ICON: "select__dropdown-icon";
+    /** Menu container */
+    readonly MENU: "select__menu";
+    /** Menu item */
+    readonly MENU_ITEM: "select__menu-item";
+    /** Selected menu item */
+    readonly MENU_ITEM_SELECTED: "select__menu-item--selected";
+    /** Disabled menu item */
+    readonly MENU_ITEM_DISABLED: "select__menu-item--disabled";
+    /** Menu item checkmark */
+    readonly MENU_ITEM_CHECKMARK: "select__menu-item-checkmark";
+    /** Menu item icon */
+    readonly MENU_ITEM_ICON: "select__menu-item-icon";
+    /** Menu item text */
+    readonly MENU_ITEM_TEXT: "select__menu-item-text";
+    /** Filled variant */
+    readonly FILLED: "select--filled";
+    /** Outlined variant */
+    readonly OUTLINED: "select--outlined";
+    /** Open state */
+    readonly OPEN: "select--open";
+    /** Disabled state */
+    readonly DISABLED: "select--disabled";
+    /** Required state */
+    readonly REQUIRED: "select--required";
+    /** Error state */
+    readonly ERROR: "select--error";
+};

package/dist/components/select/features.d.ts

@@ -0,0 +1,13 @@
+import { SelectConfig, BaseComponent } from './types';
+/**
+ * Creates a textfield for the select component
+ * @param config - Select configuration
+ * @returns Function that enhances a component with textfield functionality
+ */
+export declare const withTextfield: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+/**
+ * Creates a menu for the select component
+ * @param config - Select configuration
+ * @returns Function that enhances a component with menu functionality
+ */
+export declare const withMenu: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;

package/{src/components/select/index.ts → dist/components/select/index.d.ts}

@@ -1,38 +1,25 @@
-// src/components/select/index.ts
-
 /**
  * Select Component Module
- * 
+ *
  * The Select component provides a dropdown select control,
  * combining a textfield and menu for a complete selection interface.
- * 
+ *
  * @module components/select
  * @category Components
  */
-
-// Export main component factory
 export { default } from './select';
-
-// Export types and interfaces
-export type { 
-  SelectConfig, 
-  SelectComponent,
-  SelectOption,
-  SelectEvent,
-  SelectChangeEvent
-} from './types';
-
+export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent } from './types';
 /**
  * Constants for select configuration
- * 
+ *
  * @example
  * import { createSelect, SELECT_VARIANTS } from 'mtrl';
- * 
+ *
  * const select = createSelect({
  *   variant: SELECT_VARIANTS.OUTLINED,
  *   options: [...]
  * });
- * 
+ *
  * @category Components
  */
-export { SELECT_VARIANTS } from './types';
+export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from './constants';

package/dist/components/select/select.d.ts

@@ -0,0 +1,36 @@
+import { SelectConfig, SelectComponent } from './types';
+/**
+ * Creates a new Select component with the specified configuration.
+ *
+ * The Select component implements a Material Design dropdown select control,
+ * combining a textfield and menu to provide a user-friendly selection interface.
+ *
+ * @param {SelectConfig} config - Configuration options for the select
+ *  This must include an array of selection options. See {@link SelectConfig} for all available options.
+ *
+ * @returns {SelectComponent} A fully configured select component
+ *
+ * @throws {Error} Throws an error if select creation fails
+ *
+ * @example
+ * // Create a simple country select
+ * const countrySelect = createSelect({
+ *   label: 'Country',
+ *   options: [
+ *     { id: 'us', text: 'United States' },
+ *     { id: 'ca', text: 'Canada' },
+ *     { id: 'mx', text: 'Mexico' }
+ *   ],
+ *   value: 'us' // Pre-select United States
+ * });
+ *
+ * // Add to the DOM
+ * document.body.appendChild(countrySelect.element);
+ *
+ * // Listen for changes
+ * countrySelect.on('change', (event) => {
+ *   console.log(`Selected: ${event.value} (${event.text})`);
+ * });
+ */
+declare const createSelect: (config: SelectConfig) => SelectComponent;
+export default createSelect;

package/dist/components/select/types.d.ts

@@ -0,0 +1,302 @@
+/**
+ * Available Select variants
+ */
+export type SelectVariant = 'filled' | 'outlined';
+/**
+ * Select variant constants
+ */
+export declare const SELECT_VARIANTS: {
+    readonly FILLED: "filled";
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Select option interface
+ */
+export interface SelectOption {
+    /**
+     * Unique identifier for the option
+     */
+    id: string;
+    /**
+     * Display text for the option
+     */
+    text: string;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon to display with the option
+     */
+    icon?: string;
+    /**
+     * Whether this option has a submenu
+     */
+    hasSubmenu?: boolean;
+    /**
+     * Optional array of submenu options
+     * Only used when hasSubmenu is true
+     */
+    submenu?: SelectOption[];
+    /**
+     * Additional data associated with the option
+     */
+    data?: any;
+}
+/**
+ * Configuration interface for the Select component
+ */
+export interface SelectConfig {
+    /**
+     * Array of options to display in the select menu
+     */
+    options?: SelectOption[];
+    /**
+     * Currently selected value (option id)
+     */
+    value?: string;
+    /**
+     * Visual variant (filled, outlined)
+     */
+    variant?: SelectVariant | string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Whether select is required
+     */
+    required?: boolean;
+    /**
+     * Whether select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * Menu placement relative to the textfield
+     */
+    placement?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Prefix for class names
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    /**
+     * Event callbacks
+     */
+    on?: {
+        /**
+         * Called when the select value changes
+         */
+        change?: (event: SelectChangeEvent) => void;
+        /**
+         * Called when the select menu opens
+         */
+        open?: (event: SelectEvent) => void;
+        /**
+         * Called when the select menu closes
+         */
+        close?: (event: SelectEvent) => void;
+    };
+}
+/**
+ * Select component interface
+ */
+export interface SelectComponent {
+    /**
+     * The root element of the select
+     */
+    element: HTMLElement;
+    /**
+     * The textfield component
+     */
+    textfield: any;
+    /**
+     * The menu component
+     */
+    menu: any;
+    /**
+     * Gets the select's current value (selected option id)
+     */
+    getValue: () => string | null;
+    /**
+     * Sets the select's value (by option id)
+     * @param value - Option id to select
+     * @returns Select component for chaining
+     */
+    setValue: (value: string) => SelectComponent;
+    /**
+     * Gets the select's current displayed text
+     */
+    getText: () => string;
+    /**
+     * Gets the selected option object
+     */
+    getSelectedOption: () => SelectOption | null;
+    /**
+     * Gets all available options
+     */
+    getOptions: () => SelectOption[];
+    /**
+     * Sets new options
+     * @param options - New options array
+     * @returns Select component for chaining
+     */
+    setOptions: (options: SelectOption[]) => SelectComponent;
+    /**
+     * Opens the select menu
+     * @param interactionType - The type of interaction ('mouse' or 'keyboard')
+     * @returns Select component for chaining
+     */
+    open: (interactionType?: 'mouse' | 'keyboard') => SelectComponent;
+    /**
+     * Closes the select menu
+     * @returns Select component for chaining
+     */
+    close: () => SelectComponent;
+    /**
+     * Checks if the menu is open
+     */
+    isOpen: () => boolean;
+    /**
+     * Adds an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Select component for chaining
+     */
+    on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+    /**
+     * Removes an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Select component for chaining
+     */
+    off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+    /**
+     * Enables the select
+     * @returns Select component for chaining
+     */
+    enable: () => SelectComponent;
+    /**
+     * Disables the select
+     * @returns Select component for chaining
+     */
+    disable: () => SelectComponent;
+    /**
+     * Destroys the select component
+     */
+    destroy: () => void;
+}
+/**
+ * Select event interface
+ */
+export interface SelectEvent {
+    /**
+     * The select component
+     */
+    select: SelectComponent;
+    /**
+     * Original DOM event if available
+     */
+    originalEvent?: Event;
+    /**
+     * Function to prevent default behavior
+     */
+    preventDefault: () => void;
+    /**
+     * Whether default behavior was prevented
+     */
+    defaultPrevented: boolean;
+}
+/**
+ * Select change event interface
+ */
+export interface SelectChangeEvent extends SelectEvent {
+    /**
+     * The selected option id
+     */
+    value: string;
+    /**
+     * The selected option text
+     */
+    text: string;
+    /**
+     * The complete selected option object
+     */
+    option: SelectOption;
+}
+/**
+ * Select events interface for type-checking
+ * @internal
+ */
+export interface SelectEvents {
+    'change': (event: SelectChangeEvent) => void;
+    'open': (event: SelectEvent) => void;
+    'close': (event: SelectEvent) => void;
+}
+/**
+ * API options interface
+ * @internal
+ */
+export interface ApiOptions {
+    select: {
+        getValue: () => string | null;
+        setValue: (value: string) => any;
+        getText: () => string;
+        getSelectedOption: () => SelectOption | null;
+        getOptions: () => SelectOption[];
+        setOptions: (options: SelectOption[]) => any;
+        open: () => any;
+        close: () => any;
+        isOpen: () => boolean;
+    };
+    events?: {
+        on: <T extends string>(event: T, handler: (event: any) => void) => any;
+        off: <T extends string>(event: T, handler: (event: any) => void) => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Base component interface
+ * @internal
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    textfield?: any;
+    menu?: any;
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    emit?: (event: string, data: any) => void;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    [key: string]: any;
+}

package/dist/components/sheet/api.d.ts

@@ -0,0 +1,37 @@
+import { SheetComponent } from './types';
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithElements {
+    element: HTMLElement;
+    container: HTMLElement;
+    content: {
+        setContent: (html: string) => any;
+        getContent: () => string;
+        getElement: () => HTMLElement | null;
+    };
+    title: {
+        setTitle: (text: string) => any;
+        getTitle: () => string;
+        getElement: () => HTMLElement | null;
+    };
+    getClass: (name: string) => string;
+    dragHandle?: {
+        setVisible: (visible: boolean) => any;
+    };
+    initialize?: () => void;
+}
+/**
+ * Enhances a sheet component with API methods
+ * @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 Sheet component
+ */
+export declare const withAPI: ({ state, lifecycle }: ApiOptions) => (component: ComponentWithElements) => SheetComponent;
+export {};

package/dist/components/sheet/config.d.ts

@@ -0,0 +1,42 @@
+import { SheetConfig } from './types';
+/**
+ * Default configuration for the Sheet component
+ */
+export declare const defaultConfig: SheetConfig;
+/**
+ * Creates the base configuration for Sheet component
+ * @param {SheetConfig} config - User provided configuration
+ * @returns {SheetConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SheetConfig) => SheetConfig;
+/**
+ * Generates element configuration for the Sheet component
+ * @param {SheetConfig} config - Sheet configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SheetConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Sheet component
+ * @param {Object} comp - Component with state and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    state: {
+        open: () => any;
+        close: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;