mtrl 0.2.8 → 0.3.0

package/server.ts

@@ -1,86 +0,0 @@
-// server.ts - TypeScript version of the Bun server for the component library demo
-import { serve, type ServeOptions } from "bun";
-import { join } from "path";
-import { readFileSync, existsSync } from "fs";
-
-// Content type mapping
-const contentTypes: Record<string, string> = {
-  ".html": "text/html",
-  ".js": "text/javascript",
-  ".mjs": "text/javascript", // Add this for ES modules
-  ".css": "text/css",
-  ".json": "application/json",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".svg": "image/svg+xml"
-};
-
-// Define the port (hardcoded instead of using environment variable)
-const PORT: number = 3301;
-
-// Define demo directory path
-const DEMO_DIR: string = "./demo";
-
-/**
- * Serves a file from the demo directory
- * @param path Path to the file relative to the demo directory
- * @returns Response object with the file content or error message
- */
-function serveFile(path: string): Response {
-  // Add demo directory to path
-  const filePath: string = join(DEMO_DIR, path);
-  
-  // Handle index.html for directory request
-  let resolvedPath: string = filePath;
-  if (filePath.endsWith('/') || !filePath.includes('.')) {
-    resolvedPath = join(filePath, 'index.html');
-  }
-  
-  // Check if file exists
-  if (!existsSync(resolvedPath)) {
-    return new Response("File not found", { status: 404 });
-  }
-  
-  // Get file extension for content type
-  const ext: string = resolvedPath.substring(resolvedPath.lastIndexOf('.'));
-  const contentType: string = contentTypes[ext] || "application/octet-stream";
-  
-  // Read and serve the file
-  try {
-    const content: Buffer = readFileSync(resolvedPath);
-    
-    // For JavaScript files, ensure they're served with the correct MIME type
-    // and additionally add proper headers for modules
-    if (ext === '.js') {
-      return new Response(content, {
-        headers: { 
-          "Content-Type": "text/javascript",
-          "Cache-Control": "no-cache"
-        }
-      });
-    }
-    
-    return new Response(content, {
-      headers: { "Content-Type": contentType }
-    });
-  } catch (error) {
-    console.error(`Error serving ${resolvedPath}:`, error);
-    return new Response("Server error", { status: 500 });
-  }
-}
-
-// Server options with typings
-const serverOptions: ServeOptions = {
-  port: PORT,
-  fetch(req: Request): Response | Promise<Response> {
-    const url = new URL(req.url);
-    const path = url.pathname === '/' ? '/' : url.pathname;
-    
-    return serveFile(path);
-  },
-};
-
-// Create and start the server
-const server = serve(serverOptions);
-
-console.log(`Server running at http://localhost:${PORT}`);

package/src/components/slider/features/slider.ts

@@ -1,318 +0,0 @@
-// src/components/slider/features/slider.ts
-import { SLIDER_EVENTS } from '../constants';
-import { SliderConfig } from '../types';
-import { createUiHelpers } from './ui';
-import { createHandlers } from './handlers';
-
-/**
- * Add main slider functionality to component
- * @param config Slider configuration
- * @returns Component enhancer with slider functionality
- */
-export const withSlider = (config: SliderConfig) => component => {
-  // Ensure component has events
-  if (!component.events) {
-    component.events = {
-      listeners: {},
-      on(event, handler) {
-        if (!this.listeners[event]) this.listeners[event] = [];
-        this.listeners[event].push(handler);
-        return this;
-      },
-      off(event, handler) {
-        if (this.listeners[event]) {
-          this.listeners[event] = this.listeners[event].filter(h => h !== handler);
-        }
-        return this;
-      },
-      trigger(event, data) {
-        if (this.listeners[event]) {
-          this.listeners[event].forEach(handler => handler(data));
-        }
-        return this;
-      }
-    };
-  }
-  
-  // Initialize state
-  const state = {
-    value: config.value !== undefined ? config.value : 0,
-    secondValue: config.secondValue !== undefined ? config.secondValue : null,
-    min: config.min !== undefined ? config.min : 0,
-    max: config.max !== undefined ? config.max : 100,
-    step: config.step !== undefined ? config.step : 1,
-    dragging: false,
-    activeBubble: null,
-    activeHandle: null,
-    ticks: [],
-    valueHideTimer: null,
-    component
-  };
-  
-  // Create event helpers
-  const eventHelpers = {
-    triggerEvent(eventName, originalEvent = null) {
-      const eventData = {
-        slider: state.component,
-        value: state.value,
-        secondValue: state.secondValue,
-        originalEvent,
-        preventDefault: () => { eventData.defaultPrevented = true; },
-        defaultPrevented: false
-      };
-      
-      state.component.events.trigger(eventName, eventData);
-      return eventData;
-    }
-  };
-  
-  // Create UI helpers and handlers
-  const uiHelpers = createUiHelpers(config, state);
-  const handlers = createHandlers(config, state, uiHelpers, eventHelpers);
-  
-  // Initialize slider
-  const initSlider = () => {
-    // Set ARIA attributes
-    component.element.setAttribute('aria-valuemin', String(state.min));
-    component.element.setAttribute('aria-valuemax', String(state.max));
-    component.element.setAttribute('aria-valuenow', String(state.value));
-    
-    if (!component.structure) {
-      console.warn('Cannot initialize slider: missing structure');
-      return;
-    }
-    
-    const { handle, secondHandle } = component.structure;
-    
-    if (handle) {
-      handle.setAttribute('aria-valuemin', String(state.min));
-      handle.setAttribute('aria-valuemax', String(state.max));
-      handle.setAttribute('aria-valuenow', String(state.value));
-      
-      if (config.range && secondHandle && state.secondValue !== null) {
-        secondHandle.setAttribute('aria-valuemin', String(state.min));
-        secondHandle.setAttribute('aria-valuemax', String(state.max));
-        secondHandle.setAttribute('aria-valuenow', String(state.secondValue));
-      }
-    }
-    
-    // Initial UI update
-    uiHelpers.updateUi();
-    
-    // Generate ticks if needed
-    if (config.ticks || config.tickLabels) {
-      uiHelpers.generateTicks();
-    }
-    
-    // Setup event listeners
-    handlers.setupEventListeners();
-    
-    // Force one more UI update after a delay to ensure proper positioning
-    setTimeout(() => {
-      uiHelpers.updateUi();
-    }, 50);
-  };
-  
-  // Register with lifecycle if available
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy || (() => {});
-    component.lifecycle.destroy = () => {
-      handlers.cleanupEventListeners();
-      originalDestroy();
-    };
-  }
-  
-  // Initialize slider
-  initSlider();
-  
-  // Return enhanced component
-  return {
-    ...component,
-    slider: {
-      /**
-       * Sets slider value
-       * @param value New value
-       * @param triggerEvent Whether to trigger change event
-       * @returns Slider controller for chaining
-       */
-      setValue(value, triggerEvent = true) {
-        const newValue = uiHelpers.clamp(value, state.min, state.max);
-        state.value = newValue;
-        uiHelpers.updateUi();
-        
-        if (triggerEvent) {
-          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider value
-       * @returns Current value
-       */
-      getValue() {
-        return state.value;
-      },
-      
-      /**
-       * Sets secondary slider value (for range slider)
-       * @param value New secondary value
-       * @param triggerEvent Whether to trigger change event
-       * @returns Slider controller for chaining
-       */
-      setSecondValue(value, triggerEvent = true) {
-        if (!config.range) return this;
-        
-        const newValue = uiHelpers.clamp(value, state.min, state.max);
-        state.secondValue = newValue;
-        uiHelpers.updateUi();
-        
-        if (triggerEvent) {
-          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets secondary slider value
-       * @returns Current secondary value or null
-       */
-      getSecondValue() {
-        return config.range ? state.secondValue : null;
-      },
-      
-      /**
-       * Sets slider minimum value
-       * @param min New minimum value
-       * @returns Slider controller for chaining
-       */
-      setMin(min) {
-        state.min = min;
-        
-        // Update ARIA attributes
-        component.element.setAttribute('aria-valuemin', String(min));
-        if (component.structure.handle) {
-          component.structure.handle.setAttribute('aria-valuemin', String(min));
-        }
-        
-        if (config.range && component.structure.secondHandle) {
-          component.structure.secondHandle.setAttribute('aria-valuemin', String(min));
-        }
-        
-        // Clamp values to new min
-        if (state.value < min) state.value = min;
-        if (config.range && state.secondValue !== null && state.secondValue < min) {
-          state.secondValue = min;
-        }
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-        }
-        
-        uiHelpers.updateUi();
-        return this;
-      },
-      
-      /**
-       * Gets slider minimum value
-       * @returns Current minimum value
-       */
-      getMin() {
-        return state.min;
-      },
-      
-      /**
-       * Sets slider maximum value
-       * @param max New maximum value
-       * @returns Slider controller for chaining
-       */
-      setMax(max) {
-        state.max = max;
-        
-        // Update ARIA attributes
-        component.element.setAttribute('aria-valuemax', String(max));
-        if (component.structure.handle) {
-          component.structure.handle.setAttribute('aria-valuemax', String(max));
-        }
-        
-        if (config.range && component.structure.secondHandle) {
-          component.structure.secondHandle.setAttribute('aria-valuemax', String(max));
-        }
-        
-        // Clamp values to new max
-        if (state.value > max) state.value = max;
-        if (config.range && state.secondValue !== null && state.secondValue > max) {
-          state.secondValue = max;
-        }
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-        }
-        
-        uiHelpers.updateUi();
-        return this;
-      },
-      
-      /**
-       * Gets slider maximum value
-       * @returns Current maximum value
-       */
-      getMax() {
-        return state.max;
-      },
-      
-      /**
-       * Sets slider step size
-       * @param step New step size
-       * @returns Slider controller for chaining
-       */
-      setStep(step) {
-        state.step = step;
-        
-        // Add or remove discrete class
-        component.element.classList[step > 0 ? 'add' : 'remove'](
-          `${component.getClass('slider')}--discrete`
-        );
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-          uiHelpers.updateTicks();
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider step size
-       * @returns Current step size
-       */
-      getStep() {
-        return state.step;
-      },
-      
-      /**
-       * Regenerate tick marks and labels
-       * @returns Slider controller for chaining
-       */
-      regenerateTicks() {
-        uiHelpers.generateTicks();
-        uiHelpers.updateTicks();
-        return this;
-      },
-      
-      /**
-       * Update all UI elements
-       * @returns Slider controller for chaining
-       */
-      updateUi() {
-        uiHelpers.updateUi();
-        return this;
-      }
-    }
-  };
-};

package/src/components/slider/features/structure.ts

@@ -1,181 +0,0 @@
-// src/components/slider/features/structure.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
-import { SliderConfig } from '../types';
-import createLayout from '../../../core/layout';
-import { createElement } from '../../../core/dom/create';
-
-/**
- * Creates the slider DOM structure using layout system
- * @param config Slider configuration
- * @returns Component enhancer with DOM structure
- */
-export const withStructure = (config: SliderConfig) => component => {
-  // Set default values
-  const min = config.min || 0;
-  const max = config.max || 100;
-  const value = config.value !== undefined ? config.value : min;
-  const secondValue = config.secondValue !== undefined ? config.secondValue : null;
-  const isRangeSlider = config.range && secondValue !== null;
-  const isDisabled = config.disabled === true;
-  
-  // Format the values
-  const formatter = config.valueFormatter || (val => val.toString());
-  
-  // Get prefixed class names
-  const getClass = (className) => component.getClass(className);
-  
-  // Define slider structure
-  const structure = [
-    [createElement, 'container', { 
-      className: getClass('slider-container') 
-    }, [
-      // Track with segments
-      [createElement, 'track', { 
-        className: getClass('slider-track') 
-      }, [
-        [createElement, 'startTrack', { 
-          className: getClass('slider-start-track') 
-        }],
-        [createElement, 'activeTrack', { 
-          className: getClass('slider-active-track') 
-        }],
-        [createElement, 'remainingTrack', { 
-          className: getClass('slider-remaining-track') 
-        }]
-      ]],
-      
-      // Ticks container
-      [createElement, 'ticksContainer', { 
-        className: getClass('slider-ticks-container') 
-      }],
-      
-      // Dots for ends
-      [createElement, 'startDot', { 
-        className: [
-          getClass('slider-dot'),
-          getClass('slider-dot--start')
-        ]
-      }],
-      [createElement, 'endDot', { 
-        className: [
-          getClass('slider-dot'),
-          getClass('slider-dot--end')
-        ]
-      }],
-      
-      // Main handle
-      [createElement, 'handle', { 
-        className: getClass('slider-handle'),
-        attrs: {
-          'role': 'slider',
-          'aria-valuemin': String(min),
-          'aria-valuemax': String(max),
-          'aria-valuenow': String(value),
-          'aria-orientation': 'horizontal',
-          'tabindex': isDisabled ? '-1' : '0',
-          'aria-disabled': isDisabled ? 'true' : 'false'
-        },
-        style: {
-          left: `${((value - min) / (max - min)) * 100}%`
-        }
-      }],
-      
-      // Main value bubble
-      [createElement, 'valueBubble', { 
-        className: getClass('slider-value'),
-        text: formatter(value)
-      }]
-    ]]
-  ];
-  
-  // Add second handle and bubble for range slider
-  if (isRangeSlider) {
-    const secondHandlePos = ((secondValue - min) / (max - min)) * 100;
-    
-    // Add second handle to structure
-    structure[0][3].push(
-      [createElement, 'secondHandle', { 
-        className: getClass('slider-handle'),
-        attrs: {
-          'role': 'slider',
-          'aria-valuemin': String(min),
-          'aria-valuemax': String(max),
-          'aria-valuenow': String(secondValue),
-          'aria-orientation': 'horizontal',
-          'tabindex': isDisabled ? '-1' : '0',
-          'aria-disabled': isDisabled ? 'true' : 'false'
-        },
-        style: {
-          left: `${secondHandlePos}%`
-        }
-      }]
-    );
-    
-    // Add second bubble to structure
-    structure[0][3].push(
-      [createElement, 'secondValueBubble', { 
-        className: getClass('slider-value'),
-        text: formatter(secondValue)
-      }]
-    );
-  }
-  
-  // Create layout and get structure elements
-  const components = createLayout(structure, component.element).component;
-  
-  // Add component base class and accessibility attributes
-  component.element.classList.add(component.getClass('slider'));
-  component.element.setAttribute('tabindex', '-1');
-  component.element.setAttribute('role', 'none');
-  component.element.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
-  
-  // Position any icon properly
-  const iconElement = component.element.querySelector(`.${component.getClass('icon')}`);
-  if (iconElement && config.label) {
-    iconElement.classList.add(component.getClass('slider-icon'));
-    component.element.classList.add(component.getClass('slider--icon'));
-  }
-  
-  // Apply style classes
-  applyStyleClasses(component, config, isRangeSlider, isDisabled);
-  
-  // Return enhanced component with structure
-  return {
-    ...component,
-    structure: components
-  };
-};
-
-/**
- * Applies style classes based on configuration
- */
-function applyStyleClasses(component, config, isRangeSlider, isDisabled) {
-  const baseClass = component.getClass('slider');
-  
-  // Apply size class
-  const size = config.size || SLIDER_SIZES.MEDIUM;
-  if (size !== SLIDER_SIZES.MEDIUM) {
-    component.element.classList.add(`${baseClass}--${size}`);
-  }
-  
-  // Apply color class
-  const color = config.color || SLIDER_COLORS.PRIMARY;
-  if (color !== SLIDER_COLORS.PRIMARY) {
-    component.element.classList.add(`${baseClass}--${color}`);
-  }
-  
-  // Apply discrete class if step is specified
-  if (config.step !== undefined && config.step > 0) {
-    component.element.classList.add(`${baseClass}--discrete`);
-  }
-  
-  // Apply disabled class if needed
-  if (isDisabled) {
-    component.element.classList.add(`${baseClass}--disabled`);
-  }
-  
-  // Apply range class if needed
-  if (isRangeSlider) {
-    component.element.classList.add(`${baseClass}--range`);
-  }
-}