mtrl 0.1.3 → 0.2.0

package/src/components/menu/api.ts

@@ -0,0 +1,119 @@
+// src/components/menu/api.ts
+import { ApiOptions, BaseComponent, MenuComponent, MenuItemConfig, MenuPositionConfig } from './types';
+
+/**
+ * Enhances menu component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ lifecycle }: ApiOptions) => 
+  (component: BaseComponent): MenuComponent => ({
+    ...component as any,
+    element: component.element,
+
+    /**
+     * Shows the menu
+     * @returns {MenuComponent} Component instance
+     */
+    show(): MenuComponent {
+      component.show?.();
+      return this;
+    },
+
+    /**
+     * Hides the menu
+     * @returns {MenuComponent} Component instance
+     */
+    hide(): MenuComponent {
+      component.hide?.();
+      return this;
+    },
+
+    /**
+     * Positions the menu relative to a target
+     * @param {HTMLElement} target - Target element
+     * @param {MenuPositionConfig} options - Position options
+     * @returns {MenuComponent} Component instance
+     */
+    position(target: HTMLElement, options?: MenuPositionConfig): MenuComponent {
+      component.position?.(target, options);
+      return this;
+    },
+
+    /**
+     * Adds an item to the menu
+     * @param {MenuItemConfig} config - Item configuration
+     * @returns {MenuComponent} Component instance
+     */
+    addItem(config: MenuItemConfig): MenuComponent {
+      component.addItem?.(config);
+      return this;
+    },
+
+    /**
+     * Removes an item by name
+     * @param {string} name - Item name to remove
+     * @returns {MenuComponent} Component instance
+     */
+    removeItem(name: string): MenuComponent {
+      component.removeItem?.(name);
+      return this;
+    },
+
+    /**
+     * Gets all registered items
+     * @returns {Map<string, any>} Map of item names to configurations
+     */
+    getItems() {
+      return component.getItems?.() || new Map();
+    },
+
+    /**
+     * Checks if the menu is currently visible
+     * @returns {boolean} Whether the menu is visible
+     */
+    isVisible(): boolean {
+      return component.isVisible?.() || false;
+    },
+
+    /**
+     * Registers an event handler
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {MenuComponent} Component instance
+     */
+    on(event: string, handler: Function): MenuComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+
+    /**
+     * Unregisters an event handler
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {MenuComponent} Component instance
+     */
+    off(event: string, handler: Function): MenuComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    /**
+     * Destroys the menu component and cleans up resources
+     * @returns {MenuComponent} Component instance
+     */
+    destroy(): MenuComponent {
+      // First close any open submenus
+      component.hide?.();
+
+      // Then destroy the component
+      lifecycle.destroy?.();
+
+      // Final cleanup - forcibly remove from DOM if still attached
+      if (component.element && component.element.parentNode) {
+        component.element.remove();
+      }
+
+      return this;
+    }
+  });

package/src/components/menu/config.ts

@@ -0,0 +1,54 @@
+// src/components/menu/config.ts
+import { PREFIX } from '../../core/config';
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { MenuConfig, BaseComponent, ApiOptions } from './types';
+
+/**
+ * Default configuration for the Menu component
+ */
+export const defaultConfig: MenuConfig = {
+  items: [],
+  stayOpenOnSelect: false
+};
+
+/**
+ * Creates the base configuration for Menu component
+ * @param {MenuConfig} config - User provided configuration
+ * @returns {MenuConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: MenuConfig = {}): MenuConfig => 
+  createComponentConfig(defaultConfig, config, 'menu') as MenuConfig;
+
+/**
+ * Generates element configuration for the Menu component
+ * @param {MenuConfig} config - Menu configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: MenuConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    componentName: 'menu',
+    attrs: {
+      role: 'menu',
+      tabindex: '-1',
+      'aria-hidden': 'true'
+    },
+    className: config.class
+  });
+
+/**
+ * Creates API configuration for the Menu component
+ * @param {BaseComponent} comp - Component with lifecycle feature
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  lifecycle: {
+    destroy: comp.lifecycle?.destroy || (() => {})
+  }
+});
+
+export default defaultConfig;

package/src/components/menu/constants.ts

@@ -0,0 +1,154 @@
+// src/components/menu/constants.ts
+
+/**
+ * Menu alignment options
+ */
+export const MENU_ALIGN = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center'
+} as const;
+
+/**
+ * Menu vertical alignment options
+ */
+export const MENU_VERTICAL_ALIGN = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  MIDDLE: 'middle'
+} as const;
+
+/**
+ * Menu item types
+ */
+export const MENU_ITEM_TYPES = {
+  ITEM: 'item',
+  DIVIDER: 'divider'
+} as const;
+
+/**
+ * Menu events
+ */
+export const MENU_EVENTS = {
+  SELECT: 'select',
+  OPEN: 'open',
+  CLOSE: 'close',
+  SUBMENU_OPEN: 'submenuOpen',
+  SUBMENU_CLOSE: 'submenuClose'
+} as const;
+
+/**
+ * Menu states
+ */
+export const MENU_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden',
+  DISABLED: 'disabled'
+} as const;
+
+/**
+ * Menu element classes
+ */
+export const MENU_CLASSES = {
+  ROOT: 'menu',
+  ITEM: 'menu-item',
+  ITEM_CONTAINER: 'menu-item-container',
+  LIST: 'menu-list',
+  DIVIDER: 'menu-divider',
+  SUBMENU: 'menu--submenu'
+} as const;
+
+/**
+ * Menu positioning schema
+ * Used for validation in component creation
+ */
+export const MENU_POSITION_SCHEMA = {
+  type: 'object',
+  properties: {
+    align: {
+      type: 'string',
+      enum: Object.values(MENU_ALIGN),
+      optional: true,
+      default: MENU_ALIGN.LEFT
+    },
+    vAlign: {
+      type: 'string',
+      enum: Object.values(MENU_VERTICAL_ALIGN),
+      optional: true,
+      default: MENU_VERTICAL_ALIGN.BOTTOM
+    },
+    offsetX: {
+      type: 'number',
+      optional: true,
+      default: 0
+    },
+    offsetY: {
+      type: 'number',
+      optional: true,
+      default: 0
+    }
+  }
+} as const;
+
+/**
+ * Validation schema for menu configuration
+ */
+export const MENU_SCHEMA = {
+  type: 'object',
+  properties: {
+    items: {
+      type: 'array',
+      optional: true,
+      default: []
+    },
+    class: {
+      type: 'string',
+      optional: true
+    },
+    stayOpenOnSelect: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    },
+    openingButton: {
+      optional: true
+    }
+  }
+} as const;
+
+/**
+ * Menu item schema
+ */
+export const MENU_ITEM_SCHEMA = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      required: true
+    },
+    text: {
+      type: 'string',
+      required: true
+    },
+    type: {
+      type: 'string',
+      enum: Object.values(MENU_ITEM_TYPES),
+      optional: true,
+      default: MENU_ITEM_TYPES.ITEM
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    },
+    class: {
+      type: 'string',
+      optional: true
+    },
+    items: {
+      type: 'array',
+      optional: true,
+      description: 'Submenu items'
+    }
+  }
+} as const;