mtrl 0.1.2 → 0.2.0

package/src/components/chip/api.ts

@@ -0,0 +1,115 @@
+// src/components/chip/api.js
+
+/**
+ * Enhances a chip component with API methods
+ * @param {Object} options - API configuration options
+ * @param {Object} options.disabled - Object containing enable/disable methods
+ * @param {Object} options.lifecycle - Object containing lifecycle methods
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Chip component
+ */
+export const withAPI = ({ disabled, lifecycle }) => (component) => ({
+  ...component,
+  element: component.element,
+
+  /**
+   * Gets the chip's value
+   * @returns {string} The chip's value attribute
+   */
+  getValue: () => component.element.getAttribute('data-value'),
+
+  /**
+   * Sets the chip's value
+   * @param {string} value - Value to set
+   * @returns {Object} The chip instance for chaining
+   */
+  setValue (value) {
+    component.element.setAttribute('data-value', value)
+    return this
+  },
+
+  /**
+   * Enables the chip
+   * @returns {Object} The chip instance for chaining
+   */
+  enable () {
+    disabled.enable()
+    component.element.setAttribute('aria-disabled', 'false')
+    return this
+  },
+
+  /**
+   * Disables the chip
+   * @returns {Object} The chip instance for chaining
+   */
+  disable () {
+    disabled.disable()
+    component.element.setAttribute('aria-disabled', 'true')
+    return this
+  },
+
+  /**
+   * Sets the chip's text content
+   * @param {string} content - Text content
+   * @returns {Object} The chip instance for chaining
+   */
+  setText (content) {
+    component.text.setText(content)
+    return this
+  },
+
+  /**
+   * Gets the chip's text content
+   * @returns {string} The chip's text content
+   */
+  getText () {
+    return component.text.getText()
+  },
+
+  /**
+   * Sets the chip's leading icon
+   * @param {string} icon - Icon HTML content
+   * @returns {Object} The chip instance for chaining
+   */
+  setIcon (icon) {
+    component.icon.setIcon(icon)
+    return this
+  },
+
+  /**
+   * Gets the chip's icon content
+   * @returns {string} The chip's icon HTML
+   */
+  getIcon () {
+    return component.icon.getIcon()
+  },
+
+  /**
+   * Sets the chip's trailing icon
+   * @param {string} icon - Icon HTML content
+   * @returns {Object} The chip instance for chaining
+   */
+  setTrailingIcon (icon) {
+    const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`
+    let trailingIconElement = component.element.querySelector(trailingIconSelector)
+
+    if (!trailingIconElement && icon) {
+      trailingIconElement = document.createElement('span')
+      trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`
+      component.element.appendChild(trailingIconElement)
+    }
+
+    if (trailingIconElement) {
+      trailingIconElement.innerHTML = icon || ''
+    }
+
+    return this
+  },
+
+  /**
+   * Destroys the chip component and cleans up resources
+   */
+  destroy () {
+    lifecycle.destroy()
+  }
+})

package/src/components/chip/chip-set.ts

@@ -0,0 +1,225 @@
+// src/components/chip/chip-set.js
+import { PREFIX } from '../../core/config'
+import createChip from './chip'
+
+/**
+ * Creates a chip set container for grouping related chips
+ * @param {Object} config - ChipSet configuration
+ * @param {Array} [config.chips=[]] - Array of chip configurations to initialize
+ * @param {boolean} [config.scrollable=false] - Whether the chip set is horizontally scrollable
+ * @param {boolean} [config.vertical=false] - Whether the chip set is vertically stacked
+ * @param {string} [config.class] - Additional CSS classes
+ * @param {string} [config.selector] - CSS selector for filtering behavior
+ * @param {boolean} [config.multiSelect=false] - Whether multiple chips can be selected simultaneously
+ * @param {Function} [config.onChange] - Callback function when chip selection changes
+ * @returns {Object} ChipSet component instance
+ */
+const createChipSet = (config = {}) => {
+  const {
+    chips = [],
+    scrollable = false,
+    vertical = false,
+    class: customClass,
+    selector = null,
+    multiSelect = false,
+    onChange = null
+  } = config
+
+  // Create container element
+  const element = document.createElement('div')
+  element.className = `${PREFIX}-chip-set`
+
+  if (customClass) {
+    element.classList.add(customClass)
+  }
+
+  if (scrollable) {
+    element.classList.add(`${PREFIX}-chip-set--scrollable`)
+  }
+
+  if (vertical) {
+    element.classList.add(`${PREFIX}-chip-set--vertical`)
+  }
+
+  // Store chip instances
+  const chipInstances = []
+
+  /**
+   * Updates chip selection states based on multiSelect configuration
+   * @param {Object} selectedChip - The chip that was clicked/selected
+   */
+  const handleSelection = (selectedChip) => {
+    if (!multiSelect) {
+      // Single selection mode - deselect all other chips
+      chipInstances.forEach(chip => {
+        if (chip !== selectedChip && chip.isSelected()) {
+          chip.setSelected(false)
+        }
+      })
+    }
+
+    // Call onChange callback if provided
+    if (typeof onChange === 'function') {
+      const selectedChips = chipInstances.filter(chip => chip.isSelected())
+      onChange(selectedChips, selectedChip)
+    }
+  }
+
+  /**
+   * Adds a chip to the chip set
+   * @param {Object} chipConfig - Configuration for the chip
+   * @returns {Object} The created chip instance
+   */
+  const addChip = (chipConfig) => {
+    const chipInstance = createChip({
+      ...chipConfig,
+      onSelect: (chip) => {
+        handleSelection(chip)
+        if (chipConfig.onSelect) {
+          chipConfig.onSelect(chip)
+        }
+      }
+    })
+
+    element.appendChild(chipInstance.element)
+    chipInstances.push(chipInstance)
+
+    // Add click handler to toggle selection
+    chipInstance.element.addEventListener('click', () => {
+      if (!chipInstance.element.getAttribute('aria-disabled') === 'true') {
+        chipInstance.toggleSelected()
+        handleSelection(chipInstance)
+      }
+    })
+
+    return chipInstance
+  }
+
+  // Initialize with provided chips
+  chips.forEach(chipConfig => addChip(chipConfig))
+
+  return {
+    element,
+
+    /**
+     * Adds a new chip to the chip set
+     * @param {Object} chipConfig - Configuration for the chip
+     * @returns {Object} The chip set instance for chaining
+     */
+    addChip (chipConfig) {
+      addChip(chipConfig)
+      return this
+    },
+
+    /**
+     * Removes a chip from the chip set
+     * @param {Object|number} chipOrIndex - Chip instance or index to remove
+     * @returns {Object} The chip set instance for chaining
+     */
+    removeChip (chipOrIndex) {
+      const index = typeof chipOrIndex === 'number'
+        ? chipOrIndex
+        : chipInstances.indexOf(chipOrIndex)
+
+      if (index >= 0 && index < chipInstances.length) {
+        const chip = chipInstances[index]
+        chip.destroy()
+        chipInstances.splice(index, 1)
+      }
+
+      return this
+    },
+
+    /**
+     * Gets all chip instances in the set
+     * @returns {Array} Array of chip instances
+     */
+    getChips () {
+      return [...chipInstances]
+    },
+
+    /**
+     * Gets currently selected chips
+     * @returns {Array} Array of selected chip instances
+     */
+    getSelectedChips () {
+      return chipInstances.filter(chip => chip.isSelected())
+    },
+
+    /**
+     * Gets the values of selected chips
+     * @returns {Array} Array of selected chip values
+     */
+    getSelectedValues () {
+      return this.getSelectedChips().map(chip => chip.getValue())
+    },
+
+    /**
+     * Selects chips by their values
+     * @param {Array|string} values - Value or array of values to select
+     * @returns {Object} The chip set instance for chaining
+     */
+    selectByValue (values) {
+      const valueArray = Array.isArray(values) ? values : [values]
+
+      chipInstances.forEach(chip => {
+        const shouldSelect = valueArray.includes(chip.getValue())
+        if (shouldSelect !== chip.isSelected()) {
+          chip.setSelected(shouldSelect)
+        }
+      })
+
+      return this
+    },
+
+    /**
+     * Clears all selections
+     * @returns {Object} The chip set instance for chaining
+     */
+    clearSelection () {
+      chipInstances.forEach(chip => {
+        chip.setSelected(false)
+      })
+      return this
+    },
+
+    /**
+     * Sets the scrollable state of the chip set
+     * @param {boolean} isScrollable - Whether the chip set should be scrollable
+     * @returns {Object} The chip set instance for chaining
+     */
+    setScrollable (isScrollable) {
+      if (isScrollable) {
+        element.classList.add(`${PREFIX}-chip-set--scrollable`)
+      } else {
+        element.classList.remove(`${PREFIX}-chip-set--scrollable`)
+      }
+      return this
+    },
+
+    /**
+     * Sets the vertical layout state
+     * @param {boolean} isVertical - Whether the chip set should be vertically stacked
+     * @returns {Object} The chip set instance for chaining
+     */
+    setVertical (isVertical) {
+      if (isVertical) {
+        element.classList.add(`${PREFIX}-chip-set--vertical`)
+      } else {
+        element.classList.remove(`${PREFIX}-chip-set--vertical`)
+      }
+      return this
+    },
+
+    /**
+     * Destroys the chip set and all contained chips
+     */
+    destroy () {
+      chipInstances.forEach(chip => chip.destroy())
+      chipInstances.length = 0
+      element.remove()
+    }
+  }
+}
+
+export default createChipSet

package/src/components/chip/chip.ts

@@ -0,0 +1,82 @@
+// src/components/chip/chip.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withText,
+  withIcon,
+  withVariant,
+  withSize,
+  withRipple,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { ChipConfig, ChipComponent, BaseComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Chip component
+ * @param {ChipConfig} config - Chip configuration object
+ * @returns {ChipComponent} Chip component instance
+ */
+const createChip = (config: ChipConfig = {}): ChipComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const chip = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withSize(baseConfig),
+      withText(baseConfig),
+      withIcon({
+        ...baseConfig,
+        position: 'start',
+        iconContent: config.leadingIcon || config.icon
+      }),
+      withDisabled(baseConfig),
+      withRipple(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    // Add trailing icon if provided
+    if (config.trailingIcon) {
+      const trailingIconElement = document.createElement('span');
+      trailingIconElement.className = `${baseConfig.prefix}-chip-trailing-icon`;
+      trailingIconElement.innerHTML = config.trailingIcon;
+      chip.element.appendChild(trailingIconElement);
+
+      // Add event listener for remove/close action if needed
+      if (config.onTrailingIconClick) {
+        trailingIconElement.addEventListener('click', (e) => {
+          e.stopPropagation();
+          config.onTrailingIconClick!(chip as ChipComponent);
+        });
+      }
+    }
+
+    // Initialize selected state if needed
+    if (config.selected) {
+      (chip as ChipComponent).setSelected(true);
+    }
+
+    // Handle selection callback
+    if (config.onSelect) {
+      chip.element.addEventListener('click', () => {
+        if (chip.element.getAttribute('aria-disabled') !== 'true') {
+          config.onSelect!(chip as ChipComponent);
+        }
+      });
+    }
+
+    return chip as ChipComponent;
+  } catch (error) {
+    console.error('Chip creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create chip: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createChip;

package/src/components/chip/config.ts

@@ -0,0 +1,92 @@
+// src/components/chip/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { ChipConfig, BaseComponent } from './types';
+import { CHIP_VARIANTS } from './constants';
+
+/**
+ * Default configuration for the Chip component
+ */
+export const defaultConfig: ChipConfig = {
+  variant: CHIP_VARIANTS.FILLED,
+  ripple: true
+};
+
+/**
+ * Creates the base configuration for Chip component
+ * @param {ChipConfig} config - User provided configuration
+ * @returns {ChipConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ChipConfig = {}): ChipConfig => 
+  createComponentConfig(defaultConfig, config, 'chip') as ChipConfig;
+
+/**
+ * Generates element configuration for the Chip component
+ * @param {ChipConfig} config - Chip configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ChipConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    role: 'button',
+    tabindex: '0'
+  };
+  
+  // Only add aria-disabled attribute if needed
+  if (config.disabled === true) {
+    attrs['aria-disabled'] = 'true';
+  }
+  
+  // Add aria-selected if specified
+  if (config.selected === true) {
+    attrs['aria-selected'] = 'true';
+  } else if (config.selected === false) {
+    attrs['aria-selected'] = 'false';
+  }
+
+  // Define additional classes
+  const className = [
+    config.class,
+    config.selected ? `${config.prefix}-chip--selected` : null
+  ];
+  
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs,
+    className,
+    forwardEvents: {
+      click: (component: BaseComponent) => component.element.getAttribute('aria-disabled') !== 'true',
+      keydown: (component: BaseComponent, event: KeyboardEvent) => {
+        // Handle space and enter key for accessibility
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          component.element.click();
+          return true;
+        }
+        return false;
+      },
+      focus: true,
+      blur: true
+    }
+  });
+};
+
+/**
+ * Creates API configuration for the Chip component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent) => ({
+  disabled: {
+    enable: () => comp.disabled?.enable(),
+    disable: () => comp.disabled?.disable()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});
+
+export default defaultConfig;

package/src/components/chip/constants.ts

@@ -0,0 +1,38 @@
+// src/components/chip/constants.ts
+
+/**
+ * Available variants for the Chip component
+ * @enum {string}
+ */
+export const CHIP_VARIANTS = {
+  /** Standard filled chip with solid background */
+  FILLED: 'filled',
+
+  /** Outlined chip with transparent background and border */
+  OUTLINED: 'outlined',
+
+  /** Elevated chip with shadow */
+  ELEVATED: 'elevated',
+
+  /** Assist chip for suggesting actions */
+  ASSIST: 'assist',
+
+  /** Filter chip for filtering content */
+  FILTER: 'filter',
+
+  /** Input chip for representing user input */
+  INPUT: 'input',
+
+  /** Suggestion chip for presenting options */
+  SUGGESTION: 'suggestion'
+} as const;
+
+/**
+ * Available sizes for the Chip component
+ * @enum {string}
+ */
+export const CHIP_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;

package/src/components/chip/index.ts

@@ -0,0 +1,4 @@
+// src/components/chip/index.ts
+export { default } from './chip'
+export { CHIP_VARIANTS, CHIP_SIZES } from './constants'
+export { ChipConfig, ChipComponent } from './types'