mtrl 0.2.5 → 0.2.7

package/src/components/segmented-button/config.ts

@@ -0,0 +1,67 @@
+// src/components/segmented-button/config.ts
+import { createComponentConfig } from '../../core/config/component-config';
+import { SegmentedButtonConfig, SelectionMode } from './types';
+import { DEFAULT_CONFIG, CLASSES } from './constants';
+
+/**
+ * Creates the base configuration for Segmented Button component
+ * @param {SegmentedButtonConfig} config - User provided configuration
+ * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
+ * @internal
+ */
+export const createBaseConfig = (config: SegmentedButtonConfig = {}): SegmentedButtonConfig => 
+  createComponentConfig(DEFAULT_CONFIG, config, CLASSES.CONTAINER) as SegmentedButtonConfig;
+
+/**
+ * Generates element configuration for the Segmented Button container
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {Object} Element configuration object for withElement
+ * @internal
+ */
+export const getContainerConfig = (config: SegmentedButtonConfig) => ({
+  tag: 'div',
+  componentName: CLASSES.CONTAINER,
+  attrs: {
+    role: 'group',
+    'aria-label': 'Segmented button',
+    'data-mode': config.mode || SelectionMode.SINGLE
+  },
+  className: [
+    config.class,
+    config.disabled ? `${config.prefix}-${CLASSES.CONTAINER}--disabled` : null
+  ],
+  interactive: true
+});
+
+/**
+ * Generates configuration for a segment element
+ * @param {Object} segment - Segment configuration
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @returns {Object} Element configuration for the segment
+ * @internal
+ */
+export const getSegmentConfig = (segment, prefix, groupDisabled = false) => {
+  const isDisabled = groupDisabled || segment.disabled;
+  
+  return {
+    tag: 'button',
+    attrs: {
+      type: 'button',
+      role: 'button',
+      disabled: isDisabled ? true : undefined,
+      'aria-pressed': segment.selected ? 'true' : 'false',
+      value: segment.value
+    },
+    className: [
+      `${prefix}-${CLASSES.SEGMENT}`,
+      segment.selected ? `${prefix}-${CLASSES.SEGMENT}--${CLASSES.SELECTED}` : null,
+      isDisabled ? `${prefix}-${CLASSES.SEGMENT}--${CLASSES.DISABLED}` : null,
+      segment.class
+    ],
+    forwardEvents: {
+      click: (component) => !isDisabled
+    },
+    interactive: !isDisabled
+  };
+};

package/src/components/segmented-button/constants.ts

@@ -0,0 +1,42 @@
+// src/components/segmented-button/constants.ts
+import { SelectionMode } from './types';
+
+/**
+ * Default checkbox icon SVG used for selected state
+ * @internal
+ */
+export const DEFAULT_CHECKMARK_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>`;
+
+/**
+ * Default configuration values for segmented buttons
+ * @internal
+ */
+export const DEFAULT_CONFIG = {
+  mode: SelectionMode.SINGLE,
+  ripple: true
+};
+
+/**
+ * Event names used by the segmented button component
+ * @internal
+ */
+export const EVENTS = {
+  CHANGE: 'change'
+};
+
+/**
+ * CSS classes used by the segmented button component
+ * @internal
+ */
+export const CLASSES = {
+  CONTAINER: 'segmented-button',
+  SEGMENT: 'segmented-button-segment',
+  SELECTED: 'selected',
+  DISABLED: 'disabled',
+  ICON: 'icon',
+  CHECKMARK: 'checkmark',
+  TEXT: 'text'
+};

package/src/components/segmented-button/index.ts

@@ -0,0 +1,4 @@
+// src/components/segmented-button/index.ts
+export { default, default as createSegmentedButton } from './segmented-button';
+export { SelectionMode } from './types';
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';

package/src/components/segmented-button/segment.ts

@@ -0,0 +1,155 @@
+// src/components/segmented-button/segment.ts
+import { createElement } from '../../core/dom/create';
+import { createRipple } from '../../core/build/ripple';
+import { SegmentConfig, Segment } from './types';
+import { DEFAULT_CHECKMARK_ICON, CLASSES } from './constants';
+import { getSegmentConfig } from './config';
+
+/**
+ * Creates a segment for the segmented button
+ * @param {SegmentConfig} config - Segment configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @param {Object} options - Additional options
+ * @returns {Segment} Segment object
+ * @internal
+ */
+export const createSegment = (
+  config: SegmentConfig, 
+  container: HTMLElement,
+  prefix: string,
+  groupDisabled = false,
+  options = { ripple: true, rippleConfig: {} }
+): Segment => {
+  const segmentConfig = getSegmentConfig(config, prefix, groupDisabled);
+  const element = createElement(segmentConfig);
+  
+  // Add to container
+  container.appendChild(element);
+  
+  // Create ripple effect if enabled
+  let ripple;
+  if (options.ripple) {
+    ripple = createRipple(options.rippleConfig);
+    ripple.mount(element);
+  }
+  
+  // Create text element if provided
+  let textElement;
+  if (config.text) {
+    textElement = createElement({
+      tag: 'span',
+      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.TEXT}`,
+      text: config.text,
+      container: element
+    });
+  }
+  
+  // Create icon and checkmark elements
+  let iconElement, checkmarkElement;
+  if (config.icon) {
+    // Create icon element
+    iconElement = createElement({
+      tag: 'span',
+      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.ICON}`,
+      html: config.icon,
+      container: element
+    });
+    
+    // Create checkmark element (hidden initially)
+    checkmarkElement = createElement({
+      tag: 'span',
+      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.CHECKMARK}`,
+      html: DEFAULT_CHECKMARK_ICON,
+      container: element
+    });
+    
+    // Hide checkmark if not selected
+    if (!config.selected) {
+      checkmarkElement.style.display = 'none';
+    }
+    
+    // Hide icon if selected and we have text (icon replaced by checkmark)
+    if (config.selected && config.text) {
+      iconElement.style.display = 'none';
+    }
+  }
+  
+  /**
+   * Updates the visual state based on selection
+   * @param {boolean} selected - Whether the segment is selected
+   * @private
+   */
+  const updateSelectedState = (selected: boolean) => {
+    element.classList.toggle(`${prefix}-${CLASSES.SEGMENT}--${CLASSES.SELECTED}`, selected);
+    element.setAttribute('aria-pressed', selected ? 'true' : 'false');
+    
+    // Handle icon/checkmark swap if we have both text and icon
+    if (iconElement && checkmarkElement && config.text) {
+      iconElement.style.display = selected ? 'none' : '';
+      checkmarkElement.style.display = selected ? '' : 'none';
+    } else if (checkmarkElement) {
+      // If we have only icons (no text), show checkmark based on selection
+      checkmarkElement.style.display = selected ? '' : 'none';
+    }
+  };
+  
+  /**
+   * Updates the disabled state
+   * @param {boolean} disabled - Whether the segment is disabled
+   * @private
+   */
+  const updateDisabledState = (disabled: boolean) => {
+    const isDisabled = disabled || groupDisabled;
+    element.classList.toggle(`${prefix}-${CLASSES.SEGMENT}--${CLASSES.DISABLED}`, isDisabled);
+    
+    if (isDisabled) {
+      element.setAttribute('disabled', 'true');
+    } else {
+      element.removeAttribute('disabled');
+    }
+  };
+  
+  // Value to use for the segment
+  const value = config.value || config.text || '';
+  
+  // Initialize state
+  let isSelected = config.selected || false;
+  let isDisabled = config.disabled || false;
+  
+  return {
+    element,
+    value,
+    
+    isSelected() {
+      return isSelected;
+    },
+    
+    setSelected(selected: boolean) {
+      isSelected = selected;
+      updateSelectedState(selected);
+    },
+    
+    isDisabled() {
+      return isDisabled || groupDisabled;
+    },
+    
+    setDisabled(disabled: boolean) {
+      isDisabled = disabled;
+      updateDisabledState(disabled);
+    },
+    
+    destroy() {
+      // Clean up ripple if it exists
+      if (ripple) {
+        ripple.unmount(element);
+      }
+      
+      // Remove from DOM
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  };
+};

package/src/components/segmented-button/segmented-button.ts

@@ -0,0 +1,250 @@
+// src/components/segmented-button/segmented-button.ts
+import { pipe } from '../../core/compose/pipe';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { createEmitter } from '../../core/state/emitter';
+import { SegmentedButtonConfig, SegmentedButtonComponent, SelectionMode, Segment } from './types';
+import { createBaseConfig, getContainerConfig } from './config';
+import { createSegment } from './segment';
+import { EVENTS } from './constants';
+
+/**
+ * Creates a new Segmented Button component
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {SegmentedButtonComponent} Segmented Button component instance
+ */
+const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedButtonComponent => {
+  // Process configuration
+  const baseConfig = createBaseConfig(config);
+  const mode = baseConfig.mode || SelectionMode.SINGLE;
+  const emitter = createEmitter();
+  
+  try {
+    // Create the base component
+    const component = pipe(
+      createBase,
+      withEvents(),
+      withElement(getContainerConfig(baseConfig)),
+      withLifecycle()
+    )(baseConfig);
+    
+    // Create segments
+    const segments: Segment[] = [];
+    if (baseConfig.segments && baseConfig.segments.length) {
+      baseConfig.segments.forEach(segmentConfig => {
+        const segment = createSegment(
+          segmentConfig,
+          component.element,
+          baseConfig.prefix,
+          baseConfig.disabled,
+          {
+            ripple: baseConfig.ripple,
+            rippleConfig: baseConfig.rippleConfig
+          }
+        );
+        
+        segments.push(segment);
+      });
+    }
+    
+    // Ensure at least one item is selected in single-select mode
+    if (mode === SelectionMode.SINGLE && !segments.some(s => s.isSelected())) {
+      // Select the first non-disabled segment by default
+      const firstSelectable = segments.find(s => !s.isDisabled());
+      if (firstSelectable) {
+        firstSelectable.setSelected(true);
+      }
+    }
+    
+    /**
+     * Handles click events on segments
+     * @param {Event} event - DOM click event
+     * @private
+     */
+    const handleSegmentClick = (event: Event) => {
+      const segmentElement = event.currentTarget as HTMLElement;
+      const clickedSegment = segments.find(s => s.element === segmentElement);
+      
+      if (!clickedSegment || clickedSegment.isDisabled()) {
+        return;
+      }
+      
+      const oldValue = getSelectedValues();
+      
+      // Handle selection based on mode
+      if (mode === SelectionMode.SINGLE) {
+        // In single-select, deselect all other segments
+        segments.forEach(segment => {
+          segment.setSelected(segment === clickedSegment);
+        });
+      } else {
+        // In multi-select, toggle the clicked segment
+        clickedSegment.setSelected(!clickedSegment.isSelected());
+      }
+      
+      // Emit change event
+      const newValue = getSelectedValues();
+      
+      // Only emit if values actually changed
+      if (
+        oldValue.length !== newValue.length || 
+        oldValue.some(v => !newValue.includes(v)) ||
+        newValue.some(v => !oldValue.includes(v))
+      ) {
+        emitter.emit(EVENTS.CHANGE, {
+          selected: getSelected(),
+          value: newValue,
+          oldValue
+        });
+      }
+    };
+    
+    // Attach click handlers to segments
+    segments.forEach(segment => {
+      segment.element.addEventListener('click', handleSegmentClick);
+    });
+    
+    /**
+     * Gets an array of selected segments
+     * @returns {Segment[]} Array of selected segments
+     * @private
+     */
+    const getSelected = () => segments.filter(segment => segment.isSelected());
+    
+    /**
+     * Gets an array of selected segment values
+     * @returns {string[]} Array of selected segment values
+     * @private
+     */
+    const getSelectedValues = () => getSelected().map(segment => segment.value);
+    
+    /**
+     * Finds a segment by its value
+     * @param {string} value - Segment value to find
+     * @returns {Segment|undefined} The found segment or undefined
+     * @private
+     */
+    const findSegmentByValue = (value: string) => segments.find(segment => segment.value === value);
+    
+    // Create the component API
+    const segmentedButton: SegmentedButtonComponent = {
+      element: component.element,
+      segments,
+      
+      getSelected,
+      
+      getValue() {
+        return getSelectedValues();
+      },
+      
+      select(value) {
+        const segment = findSegmentByValue(value);
+        if (segment && !segment.isDisabled()) {
+          const oldValue = getSelectedValues();
+          
+          if (mode === SelectionMode.SINGLE) {
+            // Deselect all other segments
+            segments.forEach(s => s.setSelected(s === segment));
+          } else {
+            // Just select this segment
+            segment.setSelected(true);
+          }
+          
+          // Emit change event
+          const newValue = getSelectedValues();
+          if (oldValue.join(',') !== newValue.join(',')) {
+            emitter.emit(EVENTS.CHANGE, {
+              selected: getSelected(),
+              value: newValue,
+              oldValue
+            });
+          }
+        }
+        return this;
+      },
+      
+      deselect(value) {
+        const segment = findSegmentByValue(value);
+        if (segment && !segment.isDisabled()) {
+          // In single select mode, only deselect if there's another selected segment
+          if (mode === SelectionMode.SINGLE) {
+            const selectedSegments = getSelected();
+            // Only allow deselection if there's more than one selected or we're selecting a different segment
+            if (selectedSegments.length > 1 || !segment.isSelected()) {
+              const oldValue = getSelectedValues();
+              segment.setSelected(false);
+              
+              // Emit change event
+              const newValue = getSelectedValues();
+              if (oldValue.join(',') !== newValue.join(',')) {
+                emitter.emit(EVENTS.CHANGE, {
+                  selected: getSelected(),
+                  value: newValue,
+                  oldValue
+                });
+              }
+            }
+          } else {
+            // In multi-select, always allow deselection
+            const oldValue = getSelectedValues();
+            segment.setSelected(false);
+            
+            // Emit change event
+            const newValue = getSelectedValues();
+            if (oldValue.join(',') !== newValue.join(',')) {
+              emitter.emit(EVENTS.CHANGE, {
+                selected: getSelected(),
+                value: newValue,
+                oldValue
+              });
+            }
+          }
+        }
+        return this;
+      },
+      
+      enable() {
+        // Enable the entire component
+        component.element.classList.remove(`${baseConfig.prefix}-segmented-button--disabled`);
+        return this;
+      },
+      
+      disable() {
+        // Disable the entire component
+        component.element.classList.add(`${baseConfig.prefix}-segmented-button--disabled`);
+        return this;
+      },
+      
+      on(event, handler) {
+        emitter.on(event, handler);
+        return this;
+      },
+      
+      off(event, handler) {
+        emitter.off(event, handler);
+        return this;
+      },
+      
+      destroy() {
+        // Remove event listeners
+        segments.forEach(segment => {
+          segment.element.removeEventListener('click', handleSegmentClick);
+          segment.destroy();
+        });
+        
+        // Clear emitter
+        emitter.clear();
+        
+        // Destroy base component
+        component.lifecycle.destroy();
+      }
+    };
+    
+    return segmentedButton;
+  } catch (error) {
+    console.error('Segmented Button creation error:', error);
+    throw new Error(`Failed to create segmented button: ${(error as Error).message}`);
+  }
+};
+
+export default createSegmentedButton;