mtrl 0.2.7 → 0.2.9

package/src/core/compose/features/textinput.ts

@@ -112,14 +112,14 @@ export interface TextInputComponent extends ElementComponent {
  */
 export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) => 
   <C extends ElementComponent>(component: C): C & TextInputComponent => {
-    const input = document.createElement(config.multiline ? 'textarea' : 'input') as 
+    const isMultiline = config.multiline || config.type === 'multiline';
+    const input = document.createElement(isMultiline ? 'textarea' : 'input') as 
       HTMLInputElement | HTMLTextAreaElement;
     
     input.className = `${component.getClass('textfield')}-input`;
 
     // Set input attributes
     const attributes: Record<string, string | number | boolean | undefined> = {
-      type: config.multiline ? undefined : (config.type || 'text'),
       name: config.name,
       required: config.required,
       disabled: config.disabled,
@@ -129,6 +129,14 @@ export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) =>
       value: config.value || ''
     };
 
+    // Only set type attribute for input elements, not for textarea
+    if (!isMultiline) {
+      attributes.type = config.type || 'text';
+    } else {
+      // For textarea, add a data attribute to identify it as multiline
+      attributes['data-type'] = 'multiline';
+    }
+
     Object.entries(attributes).forEach(([key, value]) => {
       if (value !== null && value !== undefined) {
         if (typeof value === 'boolean') {
@@ -188,6 +196,11 @@ export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) =>
     // Initial state
     updateInputState();
 
+    // Add multiline class to the component if it's a textarea
+    if (isMultiline) {
+      component.element.classList.add(`${component.getClass('textfield')}--multiline`);
+    }
+
     component.element.appendChild(input);
 
     // Cleanup

package/src/core/compose/features/textlabel.ts

@@ -89,9 +89,6 @@ export const withTextLabel = <T extends TextLabelConfig>(config: T = {} as T) =>
       component.element.appendChild(labelElement);
     }
 
-    console.log('componentName', component.componentName)
-    console.log('position', position)
-
     if (position && component.componentName !== 'slider') {
       component.element.classList.add(`${config.prefix}-${config.componentName}--label-${position}`);
     }

package/src/core/composition/features/dom.ts

@@ -0,0 +1,33 @@
+// src/core/composition/features/dom.ts
+import { createStructure, flattenStructure } from '../../structure';
+
+/**
+ * Creates DOM elements from structure definition using the core createStructure utility
+ * This is a key feature that bridges the gap between declarative structure and actual DOM
+ * 
+ * @returns Component enhancer that creates DOM structure
+ */
+export const withDom = () => component => {
+  // Return unmodified component if no structure definition
+  if (!component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Use the existing createStructure function to build the DOM
+    const structure = createStructure(component.structureDefinition);
+    
+    // Use the existing flattenStructure function to create a flat reference map
+    const components = structure.getAll();
+
+    // Return enhanced component with DOM structure
+    return {
+      ...component,
+      element: structure.element, // Root element
+      components                  // All component elements
+    };
+  } catch (error) {
+    console.error('Failed to create DOM structure:', error);
+    throw new Error(`Failed to create slider DOM: ${error.message}`);
+  }
+};

package/src/core/composition/features/icon.ts

@@ -0,0 +1,131 @@
+// src/core/composition/features/icon.ts
+import { createElement } from '../../dom/create';
+
+/**
+ * Configuration for icon feature
+ */
+export interface IconConfig {
+  /**
+   * Icon HTML content
+   */
+  icon?: string;
+  
+  /**
+   * Position of the icon ('start' or 'end')
+   */
+  iconPosition?: 'start' | 'end';
+  
+  /**
+   * Size variant for the icon
+   */
+  iconSize?: string;
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Enhances structure definition with an icon element
+ * Unlike the traditional withIcon, this modifies the structure definition
+ * without creating actual DOM elements.
+ * 
+ * @param config Configuration containing icon information
+ * @returns Component enhancer that adds icon to structure definition
+ * 
+ * @example
+ * ```ts
+ * // Add icon to a structure definition
+ * const component = pipe(
+ *   createBase,
+ *   withStructure(config),
+ *   withIcon(config)
+ * )(config);
+ * ```
+ */
+export const withIcon = (config: IconConfig) => component => {
+  // If no icon or missing structure definition, return unmodified
+  if (!config.icon || !component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Get component details for class names
+    const prefix = config.prefix || component.config?.prefix || 'mtrl';
+    const componentName = config.componentName || component.componentName || 'component';
+    
+    // Clone the structure definition
+    const structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    
+    // Determine icon position
+    const position = config.iconPosition || 'start';
+    
+    // Add the --icon modifier class to the main element
+    const elementClasses = structureDefinition.element.options.className || [];
+    const iconModifierClass = `${prefix}-${componentName}--icon`;
+    
+    if (Array.isArray(elementClasses)) {
+      if (!elementClasses.includes(iconModifierClass)) {
+        elementClasses.push(iconModifierClass);
+      }
+    } else if (typeof elementClasses === 'string') {
+      if (!elementClasses.includes(iconModifierClass)) {
+        structureDefinition.element.options.className = `${elementClasses} ${iconModifierClass}`.trim();
+      }
+    } else {
+      structureDefinition.element.options.className = [iconModifierClass];
+    }
+    
+    // Create icon element definition with component-specific class
+    const iconDef = {
+      name: 'icon',
+      creator: createElement,
+      options: {
+        tag: 'span',
+        className: [
+          `${prefix}-${componentName}-icon`,
+          `${prefix}-${componentName}-icon--${position}`
+        ],
+        html: config.icon
+      }
+    };
+    
+    // Add size class if specified
+    if (config.iconSize) {
+      const classes = iconDef.options.className;
+      if (Array.isArray(classes)) {
+        classes.push(`${prefix}-${componentName}-icon--${config.iconSize}`);
+      }
+    }
+    
+    // Add icon directly to the main element's children
+    if (position === 'start') {
+      // Create new children object with icon first
+      const existingChildren = { ...structureDefinition.element.children };
+      structureDefinition.element.children = {
+        icon: iconDef,
+        ...existingChildren
+      };
+    } else {
+      // Add icon after existing children
+      structureDefinition.element.children.icon = iconDef;
+    }
+    
+    // Return component with updated structure definition
+    return {
+      ...component,
+      structureDefinition
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with icon:', error);
+    return component;
+  }
+};

package/src/core/composition/features/index.ts

@@ -0,0 +1,11 @@
+// src/core/composition/features/index.ts
+
+// Export composition features
+export { withIcon } from './icon';
+export { withLabel } from './label';
+export { withDom } from './dom';
+export { withStructure } from './structure';
+
+// Re-export interface types for better developer experience
+export type { IconConfig } from './icon';
+export type { LabelConfig } from './label';

package/src/core/composition/features/label.ts

@@ -0,0 +1,156 @@
+// src/core/composition/features/label.ts
+import { createElement } from '../../dom/create';
+
+/**
+ * Configuration for label feature
+ */
+export interface LabelConfig {
+  /**
+   * Label text content
+   */
+  label?: string;
+  
+  /**
+   * Position of the label ('start', 'end', 'top', or 'bottom')
+   */
+  labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+  
+  /**
+   * ID for the input element this label is associated with
+   */
+  id?: string;
+  
+  /**
+   * Whether the labeled element is required
+   */
+  required?: boolean;
+  
+  [key: string]: any;
+}
+
+/**
+ * Enhances structure definition with a label element
+ * Unlike the traditional withLabel, this modifies the structure definition
+ * without creating actual DOM elements.
+ * 
+ * @param config Configuration containing label information
+ * @returns Component enhancer that adds label to structure definition
+ * 
+ * @example
+ * ```ts
+ * // Add label to a structure definition
+ * const component = pipe(
+ *   createBase,
+ *   withStructure(config),
+ *   withLabel(config)
+ * )(config);
+ * ```
+ */
+export const withLabel = (config: LabelConfig) => component => {
+  // If no label or missing structure definition, return unmodified
+
+  if (!config.label || !component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Get class name generator
+    const getClass = (className) => {
+      if (typeof component.getClass === 'function') {
+        return component.getClass(className);
+      }
+      const prefix = config.prefix || 'mtrl';
+      return `${prefix}-${className}`;
+    };
+    
+    // Get component details
+    const prefix = config.prefix || component.config?.prefix || 'mtrl';
+    const componentName = config.componentName || component.componentName || 'component';
+    
+    // Clone the structure definition
+    const structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    
+    // Determine position (default to 'start')
+    const position = config.labelPosition || 'start';
+    
+    // Create the label element definition
+    let labelContent = config.label;
+    let labelChildren = null;
+    
+    // Add required indicator if specified
+    if (config.required) {
+      // For structure definition we need to define a child element
+      labelChildren = {
+        requiredIndicator: {
+          name: 'requiredIndicator',
+          creator: createElement,
+          options: {
+            tag: 'span',
+            className: `${prefix}-${componentName}-label-required`,
+            text: '*',
+            attrs: {
+              'aria-hidden': 'true'
+            }
+          }
+        }
+      };
+      
+      // Clear the content since we'll use children instead
+      labelContent = config.label;
+    }
+    
+    // Create label element definition
+    const labelDef = {
+      name: 'label',
+      creator: createElement,
+      options: {
+        tag: 'label',
+        className: [
+          `${prefix}-${componentName}-label`,
+          `${prefix}-${componentName}-label--${position}`
+        ],
+        attrs: {
+          'for': config.id // Optional connection to input by ID
+        },
+        text: labelContent
+      }
+    };
+    
+    // Add children if we have them
+    if (labelChildren) {
+      labelDef.children = labelChildren;
+    }
+    
+    // Add label to root element's children
+    if (position === 'end' || position === 'bottom') {
+      // Add at end of root element
+      structureDefinition.element.children.label = labelDef;
+    } else {
+      // Add at beginning of root element (start/top)
+      const existingChildren = { ...structureDefinition.element.children };
+      structureDefinition.element.children = {
+        label: labelDef,
+        ...existingChildren
+      };
+    }
+    
+    // Return component with updated structure definition
+    return {
+      ...component,
+      structureDefinition
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with label:', error);
+    return component;
+  }
+};

package/src/core/composition/features/structure.ts

@@ -0,0 +1,22 @@
+// src/core/composition/features/structure.ts
+
+/**
+ * Adds structure definition to component without creating DOM
+ * Now uses the structure from the baseConfig
+ * 
+ * @param configuration
+ * @returns Component enhancer with structure definition
+ */
+export const withStructure = (config: SliderConfig) => component => {
+  // Use the structure definition from the config
+  if (!config.structureDefinition) {
+    console.warn('No structure definition found in slider config');
+    return component;
+  }
+  
+  // Return enhanced component with structure definition
+  return {
+    ...component,
+    structureDefinition: config.structureDefinition
+  };
+};

package/src/core/composition/index.ts

@@ -0,0 +1,26 @@
+// src/core/composition/index.ts
+
+/**
+ * @module core/composition
+ * @description Composition utilities for creating components using the structure-based approach
+ * 
+ * The composition module provides features that work with the structure definition
+ * mechanism. Unlike traditional features that directly modify the DOM, these
+ * features modify a structure definition that is later used to create DOM elements.
+ * 
+ * This approach provides several advantages:
+ * - Clearer separation between structure definition and DOM creation
+ * - More predictable component creation process
+ * - Better support for server-side rendering
+ * - Enhanced testability
+ */
+
+// Export features
+export {
+  withStructure
+  withDom
+  withIcon,
+  withLabel,
+} from './features';
+
+export type { IconConfig, LabelConfig } from './features';

package/src/core/index.ts

@@ -11,7 +11,7 @@ export type {
   ComponentConfig, 
   ThemedComponentConfig, 
   VariantComponentConfig, 
-  StateComponentConfig 
+  StateComponentConfig
 } from './config';
 
 // Build