mtrl 0.2.8 → 0.3.0

package/src/components/navigation/system/state.ts

@@ -0,0 +1,77 @@
+// src/components/navigation/system/state.ts
+
+import { NavigationSystemConfig, NavigationSystemState } from './types';
+
+/**
+ * Create the initial state for the navigation system
+ * 
+ * @param options - Configuration options
+ * @returns Initial system state
+ */
+export const createInitialState = (options: NavigationSystemConfig = {}): NavigationSystemState => {
+  return {
+    rail: null,
+    drawer: null,
+    activeSection: options.activeSection || null,
+    activeSubsection: options.activeSubsection || null,
+    items: options.items || {},
+    mouseInDrawer: false,
+    mouseInRail: false,
+    hoverTimer: null,
+    closeTimer: null,
+    processingChange: false,
+    isMobile: false,
+    overlayElement: null,
+    closeButtonElement: null,
+    resizeObserver: null,
+    outsideClickHandler: null,
+    outsideClickHandlerSet: false
+  };
+};
+
+/**
+ * Create default configuration with sensible defaults
+ * 
+ * @param options - User-provided configuration
+ * @returns Complete configuration with defaults
+ */
+export const createConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
+  'animateDrawer' | 'showLabelsOnRail' | 'hideDrawerOnClick' | 'expanded' | 
+  'hoverDelay' | 'closeDelay' | 'railOptions' | 'drawerOptions'>> => {
+  return {
+    // Display options
+    animateDrawer: options.animateDrawer !== false,
+    showLabelsOnRail: options.showLabelsOnRail !== false,
+    hideDrawerOnClick: options.hideDrawerOnClick || false,
+    expanded: options.expanded === true,
+    
+    // Timing options (ms)
+    hoverDelay: options.hoverDelay || 200,
+    closeDelay: options.closeDelay || 100,
+    
+    // Component options
+    railOptions: options.railOptions || {},
+    drawerOptions: options.drawerOptions || {}
+  };
+};
+
+/**
+ * Create mobile configuration with defaults
+ * 
+ * @param options - User-provided configuration
+ * @returns Mobile-specific configuration
+ */
+export const createMobileConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
+  'breakpoint' | 'lockBodyScroll' | 'hideOnClickOutside' | 'enableSwipeGestures' | 
+  'optimizeForTouch' | 'overlayClass' | 'closeButtonClass' | 'bodyLockClass'>> => {
+  return {
+    breakpoint: options.breakpoint || 960,
+    lockBodyScroll: options.lockBodyScroll !== false,
+    hideOnClickOutside: options.hideOnClickOutside !== false,
+    enableSwipeGestures: options.enableSwipeGestures !== false,
+    optimizeForTouch: options.optimizeForTouch !== false,
+    overlayClass: options.overlayClass || 'mtrl-nav-overlay',
+    closeButtonClass: options.closeButtonClass || 'mtrl-nav-close-btn',
+    bodyLockClass: options.bodyLockClass || 'mtrl-body-drawer-open'
+  };
+};

package/src/components/navigation/system/types.ts

@@ -0,0 +1,364 @@
+// src/components/navigation/system/types.ts
+
+/**
+ * Configuration options for the navigation system
+ */
+export interface NavigationSystemConfig {
+  /**
+   * Screen width breakpoint for mobile mode (in pixels)
+   * @default 960
+   */
+  breakpoint?: number;
+  
+  /**
+   * Prevent body scrolling when mobile drawer is open
+   * @default true
+   */
+  lockBodyScroll?: boolean;
+  
+  /**
+   * Close drawer when clicking outside of it in mobile mode
+   * @default true
+   */
+  hideOnClickOutside?: boolean;
+  
+  /**
+   * Enable swipe gestures for mobile navigation
+   * @default true
+   */
+  enableSwipeGestures?: boolean;
+  
+  /**
+   * Optimize touch targets for mobile devices
+   * @default true
+   */
+  optimizeForTouch?: boolean;
+  
+  /**
+   * CSS class for the overlay element
+   * @default 'mtrl-nav-overlay'
+   */
+  overlayClass?: string;
+  
+  /**
+   * CSS class for the close button
+   * @default 'mtrl-nav-close-btn'
+   */
+  closeButtonClass?: string;
+  
+  /**
+   * CSS class applied to body when drawer is open (to prevent scrolling)
+   * @default 'mtrl-body-drawer-open'
+   */
+  bodyLockClass?: string;
+  
+  /**
+   * Display labels on rail navigation items
+   * @default true
+   */
+  showLabelsOnRail?: boolean;
+  
+  /**
+   * Hide drawer when an item is clicked
+   * @default false
+   */
+  hideDrawerOnClick?: boolean;
+  
+  /**
+   * Start with drawer expanded
+   * @default false
+   */
+  expanded?: boolean;
+  
+  /**
+   * Delay before opening drawer on hover (in ms)
+   * @default 200
+   */
+  hoverDelay?: number;
+  
+  /**
+   * Delay before closing drawer after mouseleave (in ms)
+   * @default 100
+   */
+  closeDelay?: number;
+  
+  /**
+   * ID of the initially active section
+   */
+  activeSection?: string;
+  
+  /**
+   * ID of the initially active subsection
+   */
+  activeSubsection?: string;
+  
+  /**
+   * Navigation items configuration
+   */
+  items?: Record<string, NavigationSection>;
+  
+  /**
+   * Additional options for the rail component
+   */
+  railOptions?: Record<string, any>;
+  
+  /**
+   * Additional options for the drawer component
+   */
+  drawerOptions?: Record<string, any>;
+}
+
+/**
+ * Navigation section configuration
+ */
+export interface NavigationSection {
+  /**
+   * Display label for the section
+   */
+  label: string;
+  
+  /**
+   * Icon for the section
+   */
+  icon?: string;
+  
+  /**
+   * Subsection items
+   */
+  items?: NavigationItem[];
+}
+
+/**
+ * Navigation item configuration
+ */
+export interface NavigationItem {
+  /**
+   * Unique identifier for the item
+   */
+  id: string;
+  
+  /**
+   * Display label for the item
+   */
+  label: string;
+  
+  /**
+   * Icon for the item
+   */
+  icon?: string;
+  
+  /**
+   * Whether the item is currently active
+   */
+  active?: boolean;
+  
+  /**
+   * Additional properties
+   */
+  [key: string]: any;
+}
+
+/**
+ * Navigation system state interface
+ */
+export interface NavigationSystemState {
+  /**
+   * Rail navigation component instance
+   */
+  rail: any;
+  
+  /**
+   * Drawer navigation component instance
+   */
+  drawer: any;
+  
+  /**
+   * ID of the active section
+   */
+  activeSection: string | null;
+  
+  /**
+   * ID of the active subsection
+   */
+  activeSubsection: string | null;
+  
+  /**
+   * Navigation items configuration
+   */
+  items: Record<string, NavigationSection>;
+  
+  /**
+   * Whether the mouse is currently inside the drawer
+   */
+  mouseInDrawer: boolean;
+  
+  /**
+   * Whether the mouse is currently inside the rail
+   */
+  mouseInRail: boolean;
+  
+  /**
+   * Timer ID for hover delay
+   */
+  hoverTimer: number | null;
+  
+  /**
+   * Timer ID for close delay
+   */
+  closeTimer: number | null;
+  
+  /**
+   * Whether the system is currently processing a change
+   */
+  processingChange: boolean;
+  
+  /**
+   * Whether the system is in mobile mode
+   */
+  isMobile: boolean;
+  
+  /**
+   * Overlay element for mobile mode
+   */
+  overlayElement: HTMLElement | null;
+  
+  /**
+   * Close button element for mobile mode
+   */
+  closeButtonElement: HTMLElement | null;
+  
+  /**
+   * ResizeObserver instance for responsive behavior
+   */
+  resizeObserver: ResizeObserver | null;
+  
+  /**
+   * Handler function for outside clicks
+   */
+  outsideClickHandler: ((event: Event) => void) | null;
+  
+  /**
+   * Whether outside click handling is set up
+   */
+  outsideClickHandlerSet: boolean;
+}
+
+/**
+ * View change event data
+ */
+export interface ViewChangeEvent {
+  /**
+   * Whether the system is now in mobile mode
+   */
+  mobile: boolean;
+  
+  /**
+   * Whether the system was previously in mobile mode
+   */
+  previousMobile: boolean;
+  
+  /**
+   * Current window width
+   */
+  width: number;
+}
+
+/**
+ * Navigation system API interface
+ */
+export interface NavigationSystem {
+  /**
+   * Initialize the navigation system
+   */
+  initialize(): NavigationSystem;
+  
+  /**
+   * Clean up resources
+   */
+  cleanup(): void;
+  
+  /**
+   * Navigate to a specific section and subsection
+   * @param section - Section ID
+   * @param subsection - Subsection ID (optional)
+   * @param silent - Whether to suppress change events
+   */
+  navigateTo(section: string, subsection?: string, silent?: boolean): void;
+  
+  /**
+   * Get the rail navigation component
+   */
+  getRail(): any;
+  
+  /**
+   * Get the drawer navigation component
+   */
+  getDrawer(): any;
+  
+  /**
+   * Get the active section ID
+   */
+  getActiveSection(): string | null;
+  
+  /**
+   * Get the active subsection ID
+   */
+  getActiveSubsection(): string | null;
+  
+  /**
+   * Show the drawer
+   */
+  showDrawer(): void;
+  
+  /**
+   * Hide the drawer
+   */
+  hideDrawer(): void;
+  
+  /**
+   * Check if the drawer is visible
+   */
+  isDrawerVisible(): boolean;
+  
+  /**
+   * Update configuration
+   * @param newConfig - New configuration options
+   */
+  configure(newConfig: Partial<NavigationSystemConfig>): NavigationSystem;
+  
+  /**
+   * Set processing change state
+   * @param isProcessing - Whether a change is being processed
+   */
+  setProcessingChange(isProcessing: boolean): void;
+  
+  /**
+   * Check if a change is being processed
+   */
+  isProcessingChange(): boolean;
+  
+  /**
+   * Check if the system is in mobile mode
+   */
+  isMobile(): boolean;
+  
+  /**
+   * Check and update mobile state
+   */
+  checkMobileState(): void;
+  
+  /**
+   * Handler for section changes
+   */
+  onSectionChange?: (sectionId: string, eventData: any) => void;
+  
+  /**
+   * Handler for item selection
+   */
+  onItemSelect?: (event: any) => void;
+  
+  /**
+   * Handler for view changes (mobile/desktop)
+   */
+  onViewChange?: (event: ViewChangeEvent) => void;
+}

package/src/components/slider/config.ts

@@ -5,6 +5,7 @@ import {
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
 import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
+import { createSliderSchema } from './schema';
 
 /**
  * Default configuration for the Slider component
@@ -31,8 +32,25 @@ export const defaultConfig: SliderConfig = {
  * @param {SliderConfig} config - User provided configuration
  * @returns {SliderConfig} Complete configuration with defaults applied
  */
-export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => 
-  createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
+export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => {
+  // Create the base config with defaults applied
+  const baseConfig = createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
+  
+  // Create a basic component object for structure generation
+  const baseComponent = {
+    componentName: 'slider',
+    config: baseConfig,
+    getClass: (className) => {
+      const prefix = baseConfig.prefix || 'mtrl';
+      return `${prefix}-${className}`;
+    }
+  };
+  
+  // Add the structure definition to the config
+  baseConfig.schema = createSliderSchema(baseComponent, baseConfig);
+  
+  return baseConfig;
+};
 
 /**
  * Generates element configuration for the Slider component