mtrl 0.3.8 → 0.4.0

package/src/core/layout/array.ts

@@ -1,180 +0,0 @@
-// src/core/layout/array.ts
-/**
- * @module core/layout
- * @description Processor for array-based layout schemas
- */
-
-import { createElement } from '../dom/create';
-import { LayoutResult, LayoutOptions } from './types';
-import { isComponent, createFragment, processClassNames } from './utils';
-import { createLayoutResult } from './result';
-import { createComponentInstance } from './processor';
-import { isObject } from '../utils';
-
-/**
- * Processes an array-based layout definition
- * 
- * @param schema - Array-based layout definition
- * @param parentElement - Optional parent element to attach layout to
- * @param level - Current recursion level
- * @param options - Layout creation options
- * @returns Layout result object
- */
-export function processArraySchema(
-  schema: any[], 
-  parentElement: HTMLElement | null = null, 
-  level: number = 0,
-  options: LayoutOptions = {}
-): LayoutResult {
-  level++;
-  const layout = {};
-  const components = [];
-  const fragment = createFragment();
-  let component = null;
-
-  if (!Array.isArray(schema)) {
-    console.error('Schema is not an array!', parentElement, level, schema);
-    return createLayoutResult(layout);
-  }
-
-  // Get default creator function from options or use createElement
-  const defaultCreator = options.creator || createElement;
-
-  for (let i = 0; i < schema.length; i++) {
-    const item = schema[i];
-    if (!item) continue;
-
-    // Handle nested arrays recursively
-    if (Array.isArray(item)) {
-      const container = component || parentElement;
-      // Use this function for recursion, not the external processSchema
-      const result = processArraySchema(item, container, level, options);
-      Object.assign(layout, result.layout);
-      continue;
-    }
-
-    // Handle different item types
-    let creator, name, itemOptions;
-
-    // Case 1: Item is a function (component creator)
-    if (typeof item === 'function') {
-      creator = item;
-      
-      // Check next items for name (string) and options (object)
-      const nextItem = schema[i+1];
-      const afterNextItem = schema[i+2];
-      
-      if (typeof nextItem === 'string') {
-        name = nextItem;
-        i++; // Skip the name on next iteration
-        
-        // Check if options are provided after the name
-        if (isObject(afterNextItem)) {
-          itemOptions = afterNextItem;
-          i++; // Skip the options on next iteration
-        } else {
-          itemOptions = {};
-        }
-      } else if (isObject(nextItem)) {
-        // No name provided, just options
-        itemOptions = nextItem;
-        i++; // Skip the options on next iteration
-      } else {
-        // No name or options
-        itemOptions = {};
-      }
-    }
-    // Case 2: Item is a string (component name using default creator)
-    else if (typeof item === 'string') {
-      creator = defaultCreator;
-      name = item;
-      
-      // Check next item for options
-      const nextItem = schema[i+1];
-      if (isObject(nextItem)) {
-        itemOptions = nextItem;
-        i++; // Skip the options on next iteration
-      } else {
-        itemOptions = {};
-      }
-      
-      // Default to div if no tag is specified
-      if (creator === createElement && !('tag' in itemOptions)) {
-        itemOptions.tag = 'div';
-      }
-    }
-    // Case 3: Item is an object (options for default creator with no name)
-    else if (isObject(item)) {
-      creator = defaultCreator;
-      itemOptions = item;
-    } 
-    else {
-      // Skip unsupported item types
-      console.warn('Skipping unsupported item type:', item);
-      continue;
-    }
-    
-    // Check for additional options object after main options
-    const maybeAdditionalOptions = schema[i+1];
-    if (isObject(maybeAdditionalOptions) && !Array.isArray(maybeAdditionalOptions) && 
-        typeof maybeAdditionalOptions.prefix !== 'undefined') {
-      // Merge the additional options into main options
-      Object.assign(itemOptions, maybeAdditionalOptions);
-      i++; // Skip on next iteration
-    }
-
-    // Process options based on prefix setting
-    const shouldApplyPrefix = 
-      // Use item-specific prefix setting if available
-      'prefix' in itemOptions ? 
-        itemOptions.prefix : 
-        // Otherwise use global options prefix setting (default to true)
-        options.prefix !== false;
-
-    const processedOptions = shouldApplyPrefix ? 
-      processClassNames(itemOptions) : 
-      { ...itemOptions };
-
-    // Add name to options if needed and not a DOM element tag
-    if (name && !('name' in processedOptions) && 
-        !(creator === createElement || creator.isElement)) {
-      processedOptions.name = name;
-    }
-
-    // Create and store component
-    component = createComponentInstance(creator, processedOptions, options);
-    const element = isComponent(component) ? component.element : component;
-    
-    if (level === 1) layout.element = element;
-    if (name) {
-      layout[name] = component;
-      components.push([name, component]);
-    }
-
-    // Append to DOM
-    if (component) {
-      if ('insert' in component && typeof component.insert === 'function') {
-        component.insert(fragment);
-      } else {
-        fragment.appendChild(element);
-      }
-
-      if (parentElement) {
-        component._container = parentElement;
-        
-        if ('onInserted' in component && typeof component.onInserted === 'function') {
-          component.onInserted(parentElement);
-        }
-      }
-    }
-  }
-
-  // Append fragment to parent in a single operation
-  if (parentElement && fragment.hasChildNodes()) {
-    const wrapper = isComponent(parentElement) ? parentElement.element : parentElement;
-    wrapper.appendChild(fragment);
-  }
-
-  layout.components = components;
-  return createLayoutResult(layout);
-}

package/src/core/layout/config.ts

@@ -1,193 +0,0 @@
-// src/core/layout/config.ts
-/**
- * @module core/layout
- * @description Layout configuration utilities
- */
-
-import { addClass, removeClass, hasClass } from '../dom/classes';
-
-/**
- * Helper function to clean up previous layout classes from an element
- * 
- * @param element - Element to clean layout classes from
- */
-export function cleanupLayoutClasses(element: HTMLElement): void {
-  if (!element) return;
-  
-  // Get all classes from the element
-  const classList = Array.from(element.classList);
-  
-  // Find and remove layout-related classes
-  const layoutClasses = classList.filter(cls => 
-    cls.startsWith('layout--') || 
-    cls.includes('-layout--')
-  );
-  
-  // Remove each layout class
-  layoutClasses.forEach(cls => {
-    element.classList.remove(cls);
-  });
-}
-
-/**
- * Helper function to get the layout type from element classes
- * 
- * @param element - Element to check
- * @returns Layout type if found, empty string otherwise
- */
-export function getLayoutType(element: HTMLElement): string {
-  return hasClass(element, 'layout--stack') ? 'stack' : 
-         hasClass(element, 'layout--row') ? 'row' : 
-         hasClass(element, 'layout--grid') ? 'grid' : '';
-}
-
-/**
- * Applies layout classes based on the layout configuration
- * 
- * @param element - Element to apply layout classes to
- * @param layoutConfig - Layout configuration
- * @param cleanupFirst - Whether to clean up previous layout classes first
- */
-export function applyLayoutClasses(
-  element: HTMLElement, 
-  layoutConfig: any,
-  cleanupFirst: boolean = true
-): void {
-  if (!element || !layoutConfig) return;
-  
-  // First remove any existing layout classes to avoid accumulation
-  if (cleanupFirst) {
-    cleanupLayoutClasses(element);
-  }
-  
-  // Apply base layout type
-  if (layoutConfig.type) {
-    addClass(element, `layout--${layoutConfig.type}`);
-  }
-  
-  // Apply common layout properties
-  if (layoutConfig.gap !== undefined) {
-    // Get current layout type for prefixed gap class
-    const layoutType = layoutConfig.type || getLayoutType(element);
-       
-    if (layoutType) {
-      // Add the new gap class
-      addClass(element, `layout--${layoutType}-gap-${layoutConfig.gap}`);
-    }
-  }
-  
-  // Apply alignment properties
-  if (layoutConfig.align) {
-    const layoutType = layoutConfig.type || getLayoutType(element);
-       
-    if (layoutType) {
-      addClass(element, `layout--${layoutType}-${layoutConfig.align}`);
-    }
-  }
-  
-  // Apply justification
-  if (layoutConfig.justify) {
-    const layoutType = layoutConfig.type || getLayoutType(element);
-       
-    if (layoutType) {
-      addClass(element, `layout--${layoutType}-justify-${layoutConfig.justify}`);
-    }
-  }
-  
-  // Apply grid-specific properties
-  if (layoutConfig.type === 'grid' || getLayoutType(element) === 'grid') {
-    // Grid columns
-    if (typeof layoutConfig.columns === 'number') {
-      addClass(element, `layout--grid-cols-${layoutConfig.columns}`);
-    } else if (layoutConfig.columns === 'auto-fill') {
-      addClass(element, 'layout--grid-fill');
-    } else if (layoutConfig.columns === 'auto-fit') {
-      addClass(element, 'layout--grid-cols-auto-fit');
-    }
-    
-    // Other grid properties
-    if (layoutConfig.dense) {
-      addClass(element, 'layout--grid-dense');
-    }
-    
-    if (layoutConfig.autoHeight) {
-      addClass(element, 'layout--grid-auto-height');
-    }
-  }
-  
-  // Apply row-specific properties
-  if (layoutConfig.type === 'row' || getLayoutType(element) === 'row') {
-    // Wrap behavior
-    if (layoutConfig.wrap === false || layoutConfig.wrap === 'nowrap') {
-      addClass(element, 'layout--row-nowrap');
-    } else if (layoutConfig.wrap === 'reverse') {
-      addClass(element, 'layout--row-wrap-reverse');
-    }
-    
-    // Mobile responsiveness
-    if (layoutConfig.mobileStack) {
-      addClass(element, 'layout--row-mobile-stack');
-    }
-    
-    if (layoutConfig.mobileScroll) {
-      addClass(element, 'layout--row-mobile-scroll');
-    }
-  }
-  
-  // No masonry, split or sidebar specific properties anymore
-  
-  // Add any additional custom classes
-  if (layoutConfig.class) {
-    layoutConfig.class.split(' ').filter(Boolean).forEach(cls => {
-      // Don't prefix these classes as they're user-defined
-      element.classList.add(cls);
-    });
-  }
-}
-
-/**
- * Applies layout item classes based on the configuration
- * 
- * @param element - Element to apply layout item classes to
- * @param itemConfig - Layout item configuration
- */
-export function applyLayoutItemClasses(element: HTMLElement, itemConfig: any): void {
-  if (!element || !itemConfig) return;
-  
-  // Add the base layout item class
-  addClass(element, 'layout__item');
-  
-  // Add width classes
-  if (itemConfig.width && itemConfig.width >= 1 && itemConfig.width <= 12) {
-    addClass(element, `layout__item--${itemConfig.width}`);
-  }
-  
-  // Add responsive classes
-  if (itemConfig.sm) addClass(element, `layout__item--sm-${itemConfig.sm}`);
-  if (itemConfig.md) addClass(element, `layout__item--md-${itemConfig.md}`);
-  if (itemConfig.lg) addClass(element, `layout__item--lg-${itemConfig.lg}`);
-  if (itemConfig.xl) addClass(element, `layout__item--xl-${itemConfig.xl}`);
-  
-  // Add grid span classes
-  if (itemConfig.span) addClass(element, `layout__item--span-${itemConfig.span}`);
-  if (itemConfig.rowSpan) addClass(element, `layout__item--row-span-${itemConfig.rowSpan}`);
-  
-  // Add ordering
-  if (itemConfig.order) {
-    if (typeof itemConfig.order === 'number') {
-      addClass(element, `layout__item--order-${itemConfig.order}`);
-    } else {
-      addClass(element, `layout__item--order-${itemConfig.order}`);
-    }
-  }
-  
-  // Add alignment
-  if (itemConfig.align) {
-    addClass(element, `layout__item--self-${itemConfig.align}`);
-  }
-  
-  // Add auto class
-  if (itemConfig.auto) {
-    addClass(element, 'layout__item--auto');
-  }
-}

package/src/core/layout/create.ts

@@ -1,54 +0,0 @@
-// src/core/layout/create.ts
-/**
- * @module core/layout
- * @description Main layout creation functionality
- */
-
-import { Schema, LayoutResult, LayoutOptions } from './types';
-import { processSchema } from './processor';
-import { createLayoutResult } from './result';
-
-/**
- * Creates a DOM or component layout based on a layout definition
- * 
- * @param schema - Layout definition (array-based, object-based, or HTML string)
- * @param parentElement - Optional parent element to attach layout to
- * @param options - Additional options for layout creation
- * @returns Object containing the layout and utility functions
- */
-export function createLayout(
-  schema: Schema | any[] | string | Function, 
-  parentElement: HTMLElement | null = null,
-  options: LayoutOptions = {}
-): LayoutResult {
-  // If schema is a function, execute it to get the actual schema
-  if (typeof schema === 'function') {
-    schema = schema();
-  }
-  
-  // Parse HTML string into a layout if needed
-  if (typeof schema === 'string') {
-    // Create a temporary element to parse HTML
-    const template = document.createElement('template');
-    template.innerHTML = schema.trim();
-    
-    // Use the parsed DOM structure directly
-    const fragment = template.content;
-    
-    if (parentElement && fragment.hasChildNodes()) {
-      // Batch DOM operation - append all nodes at once
-      parentElement.appendChild(fragment);
-    }
-    
-    // Create a basic layout for HTML string
-    const layout = { 
-      element: fragment.firstElementChild as HTMLElement 
-    };
-    
-    // Create layout result with HTML content
-    return createLayoutResult(layout);
-  }
-  
-  // Process the schema using our unified processor with options
-  return processSchema(schema, parentElement, 0, options);
-}

package/src/core/layout/index.ts

@@ -1,36 +0,0 @@
-// src/core/layout/index.ts
-/**
- * @module core/layout
- * @description Layout creation system with simplified API
- */
-
-// Export essential types
-export type { 
-  ComponentLike, 
-  ElementDefinition, 
-  Schema, 
-  LayoutResult,
-  LayoutOptions,
-  LayoutConfig,
-  LayoutItemConfig
-} from './types';
-
-// Export utility functions
-export { isComponent, processClassNames, flattenLayout } from './utils';
-
-// Export core functionality
-export { createLayout } from './create';
-export { createLayoutResult } from './result';
-export { processSchema, createComponentInstance } from './processor';
-
-// Export configuration utilities
-export { 
-  applyLayoutClasses, 
-  applyLayoutItemClasses, 
-  getLayoutType,
-  cleanupLayoutClasses
-} from './config';
-
-// Default export for backward compatibility and simpler usage
-import { createLayout } from './create';
-export default createLayout;

package/src/core/layout/object.ts

@@ -1,123 +0,0 @@
-// src/core/layout/object.ts
-/**
- * @module core/layout
- * @description Processor for object-based layout schemas
- */
-
-import { createElement } from '../dom/create';
-import { Schema, LayoutResult, LayoutOptions } from './types';
-import { isComponent, createFragment, processClassNames } from './utils';
-import { createLayoutResult } from './result';
-import { createComponentInstance } from './processor'; 
-
-/**
- * Processes an object-based layout definition
- * 
- * @param schema - Object-based layout definition
- * @param parentElement - Optional parent element to attach layout to
- * @param options - Layout creation options
- * @returns Layout result object
- */
-export function processObjectSchema(
-  schema: Schema, 
-  parentElement: HTMLElement | null = null,
-  options: LayoutOptions = {}
-): LayoutResult {
-  const layout = {};
-  
-  // Get default creator function from options or use createElement
-  const defaultCreator = options.creator || createElement;
-
-  // Handle root element creation
-  if (schema.element && !parentElement) {
-    const elementDef = schema.element;
-    const createElementFn = elementDef.creator || defaultCreator;
-    
-    // Process class names based on prefix option
-    const elementOptions = elementDef.options || {};
-    const processedOptions = options.prefix !== false ? 
-      processClassNames(elementOptions) : 
-      { ...elementOptions };
-      
-    const rootComponent = createComponentInstance(createElementFn, processedOptions, options);
-    const rootElement = isComponent(rootComponent) ? rootComponent.element : rootComponent;
-    
-    layout.element = rootComponent;
-    if (elementDef.name) layout[elementDef.name] = rootComponent;
-    
-    // Process children
-    if (elementDef.children) {
-      const fragment = createFragment();
-      const childLayouts = [];
-      
-      for (const key in elementDef.children) {
-        const childResult = processObjectSchema(
-          { [key]: elementDef.children[key] }, 
-          fragment,
-          options
-        );
-        childLayouts.push(childResult.layout);
-      }
-      
-      rootElement.appendChild(fragment);
-      
-      // Merge child layouts
-      for (const childLayout of childLayouts) {
-        Object.assign(layout, childLayout);
-      }
-    }
-    
-    return createLayoutResult(layout);
-  }
-  
-  // Process normal schema elements
-  const fragment = parentElement ? createFragment() : null;
-  const childLayouts = [];
-  
-  for (const key in schema) {
-    const def = schema[key];
-    if (!def) continue;
-    
-    // Use appropriate creator
-    const elementCreator = def.creator || defaultCreator;
-    
-    // Process class names based on prefix option
-    const elementOptions = def.options || {};
-    const shouldApplyPrefix = 
-      'prefix' in elementOptions ? elementOptions.prefix : options.prefix !== false;
-      
-    const processedOptions = shouldApplyPrefix ? 
-      processClassNames(elementOptions) : 
-      { ...elementOptions };
-      
-    // Create element
-    const created = createComponentInstance(elementCreator, processedOptions, options);
-    
-    // Store in layout
-    layout[key] = created;
-    if (def.name && def.name !== key) layout[def.name] = created;
-    
-    // Handle DOM operations
-    const element = isComponent(created) ? created.element : created;
-    if (fragment) fragment.appendChild(element);
-    
-    // Process children
-    if (def.children) {
-      const childResult = processObjectSchema(def.children, element, options);
-      childLayouts.push(childResult.layout);
-    }
-  }
-  
-  // Append to parent
-  if (parentElement && fragment) {
-    const parentDom = isComponent(parentElement) ? parentElement.element : parentElement;
-    parentDom.appendChild(fragment);
-  }
-  
-  // Merge child layouts
-  for (const childLayout of childLayouts) {
-    Object.assign(layout, childLayout);
-  }
-  
-  return createLayoutResult(layout);
-}

package/src/core/layout/processor.ts

@@ -1,106 +0,0 @@
-// src/core/layout/processor.ts
-/**
- * @module core/layout
- * @description Processor for layout creation
- */
-
-import { Schema, LayoutResult, LayoutOptions } from './types';
-import { isComponent } from './utils';
-import { processArraySchema } from './array';
-import { processObjectSchema } from './object';
-import { isObject } from '../utils';
-import { applyLayoutClasses, applyLayoutItemClasses } from './config';
-
-/**
- * Creates a component from a constructor or factory function
- * 
- * @param Component - Component constructor or factory function
- * @param options - Component creation options 
- * @param layoutOptions - Global layout options
- * @returns Created component instance
- */
-export function createComponentInstance(
-  Component: any, 
-  options: Record<string, any> = {}, 
-  layoutOptions: LayoutOptions = {}
-): any {
-  try {
-    // Save layout and layoutItem configs before creating component
-    const layoutConfig = options.layout;
-    const layoutItemConfig = options.layoutItem;
-    
-    // Remove layout and layoutItem from options to prevent them becoming attributes
-    const cleanOptions = { ...options };
-    delete cleanOptions.layout;
-    delete cleanOptions.layoutItem;
-    
-    // Check if Component is a class constructor
-    const isClass = typeof Component === 'function' && 
-                   Component.prototype && 
-                   Component.prototype.constructor === Component &&
-                   // Exclude native constructors like Object, Array, etc.
-                   Object.getPrototypeOf(Component) !== Function.prototype;
-
-    // Create the component with clean options
-    const component = isClass
-      ? new Component(cleanOptions)
-      : Component(cleanOptions);
-      
-    // Apply layout configuration to the created component
-    if (component) {
-      // Get the actual DOM element
-      const element = component.element || (component instanceof HTMLElement ? component : null);
-      if (element) {
-        // Apply layout classes if layout config exists
-        if (layoutConfig) {
-          applyLayoutClasses(element, layoutConfig);
-        }
-        
-        // Apply layout item classes if layoutItem config exists
-        if (layoutItemConfig) {
-          applyLayoutItemClasses(element, layoutItemConfig);
-        }
-      }
-    }
-    
-    return component;
-  } catch (error) {
-    console.error('Error creating component instance:', error);
-    // Return a basic element as fallback
-    return document.createElement('div');
-  }
-}
-
-/**
- * Processes any type of layout definition (array or object)
- * 
- * @param schema - Layout schema to process
- * @param parentElement - Parent element to attach to
- * @param level - Current nesting level 
- * @param options - Layout creation options
- * @returns Layout result object
- */
-export function processSchema(
-  schema: any, 
-  parentElement: HTMLElement | null = null, 
-  level: number = 0,
-  options: LayoutOptions = {}
-): LayoutResult {
-  // Validate input to provide helpful error messages
-  if (!schema) {
-    console.warn('Empty schema provided to layout processor');
-    return {
-      layout: {},
-      element: document.createElement('div'),
-      component: {},
-      get: () => null,
-      getAll: () => ({}),
-      destroy: () => {}
-    };
-  }
-  
-  // Process based on schema type
-  return Array.isArray(schema)
-    ? processArraySchema(schema, parentElement, level, options)
-    : processObjectSchema(schema, parentElement, options);
-}