mtrl 0.3.0 → 0.3.2

package/src/components/chips/config.ts

@@ -0,0 +1,109 @@
+// src/components/chips/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { ChipsConfig } from './types';
+import { createChipsSchema } from './schema';
+
+/**
+ * Default configuration for the Chips component
+ */
+export const defaultConfig: ChipsConfig = {
+  chips: [],
+  scrollable: false,
+  vertical: false,
+  multiSelect: false,
+  onChange: null,
+  selector: null,
+  labelPosition: 'start'
+};
+
+/**
+ * Creates the base configuration for Chips component
+ * @param {ChipsConfig} config - User provided configuration
+ * @returns {ChipsConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ChipsConfig = {}): ChipsConfig => {
+  // Create the base config with defaults applied
+  const baseConfig = createComponentConfig(defaultConfig, config, 'chips') as ChipsConfig;
+  
+  // Create a basic component object for structure generation
+  const baseComponent = {
+    componentName: 'chips',
+    config: baseConfig,
+    getClass: (className) => {
+      const prefix = baseConfig.prefix || 'mtrl';
+      return className ? `${prefix}-${className}` : prefix;
+    }
+  };
+  
+  // Add the structure definition to the config
+  baseConfig.schema = createChipsSchema(baseComponent, baseConfig);
+  
+  return baseConfig;
+};
+
+/**
+ * Generates element configuration for the Chips component
+ * @param {ChipsConfig} config - Chips configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ChipsConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      tabindex: '0',
+      role: 'group',
+      'aria-multiselectable': config.multiSelect === true ? 'true' : 'false'
+    },
+    className: [
+      config.class
+    ].filter(Boolean)
+  });
+
+/**
+ * Creates API configuration for the Chips component
+ * @param {Object} comp - Component with chips features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  chips: {
+    addChip: function(chipConfig) {
+      if (comp.chips && typeof comp.chips.addChip === 'function') {
+        return comp.chips.addChip(chipConfig);
+      }
+      return null;
+    },
+    removeChip: (chipOrIndex) => comp.chips?.removeChip?.(chipOrIndex),
+    getChips: () => comp.chips?.getChips?.() ?? [],
+    getSelectedChips: () => comp.chips?.getSelectedChips?.() ?? [],
+    getSelectedValues: () => comp.chips?.getSelectedValues?.() ?? [],
+    selectByValue: (values) => comp.chips?.selectByValue?.(values),
+    clearSelection: () => comp.chips?.clearSelection?.(),
+    scrollToChip: (chipOrIndex) => comp.chips?.scrollToChip?.(chipOrIndex)
+  },
+  layout: {
+    setScrollable: (isScrollable) => comp.layout?.setScrollable?.(isScrollable),
+    isScrollable: () => comp.layout?.isScrollable?.() ?? false,
+    setVertical: (isVertical) => comp.layout?.setVertical?.(isVertical),
+    isVertical: () => comp.layout?.isVertical?.() ?? false
+  },
+  label: {
+    setText: (t) => comp.label?.setText?.(t),
+    getText: () => comp.label?.getText?.() ?? '',
+    setPosition: (p) => comp.label?.setPosition?.(p),
+    getPosition: () => comp.label?.getPosition?.() ?? 'start'
+  },
+  keyboard: {
+    enableKeyboardNavigation: () => comp.keyboard?.enable?.(),
+    disableKeyboardNavigation: () => comp.keyboard?.disable?.()
+  },
+  events: {
+    on: (e, h) => comp.on?.(e, h),
+    off: (e, h) => comp.off?.(e, h)
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});

package/src/components/chips/constants.ts

@@ -0,0 +1,61 @@
+// src/components/chips/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'
+};
+
+/**
+ * Available event types for Chip component
+ * @enum {string}
+ */
+export const CHIP_EVENTS = {
+  /** Fired when chip selection state changes */
+  CHANGE: 'change',
+  
+  /** Fired when chip is selected */
+  SELECT: 'select',
+  
+  /** Fired when chip is deselected */
+  DESELECT: 'deselect',
+  
+  /** Fired when chip is about to be removed */
+  REMOVE: 'remove'
+};
+
+/**
+ * Available event types for Chips container component
+ * @enum {string}
+ */
+export const CHIPS_EVENTS = {
+  /** Fired when any chip selection changes */
+  CHANGE: 'change',
+  
+  /** Fired when a chip is added to the container */
+  ADD: 'add',
+  
+  /** Fired when a chip is removed from the container */
+  REMOVE: 'remove'
+};

package/src/components/chips/features/chip-items.ts

@@ -0,0 +1,33 @@
+// src/components/chips/features/chip-items.ts
+import { ChipsConfig } from '../types';
+import createChip from '../chip/chip';
+
+/**
+ * Adds chip item management to chips component
+ * 
+ * @param config Chips configuration
+ * @returns Component enhancer that adds chip items functionality
+ */
+export const withChipItems = (config: ChipsConfig) => component => {
+  // Chip instances stored in component state
+  const chipInstances = [];
+  
+  return {
+    ...component,
+    chipInstances,
+    
+    // When DOM is created, add initial chips
+    onCreated() {
+      if (typeof component.onCreated === 'function') {
+        component.onCreated();
+      }
+      
+      // Initialize with provided chips
+      if (Array.isArray(config.chips) && config.chips.length > 0) {
+        config.chips.forEach(chipConfig => {
+          this.chips?.addChip?.(chipConfig);
+        });
+      }
+    }
+  };
+};

package/src/components/chips/features/container.ts

@@ -0,0 +1,77 @@
+// src/components/chips/features/container.ts
+import { ChipsConfig } from '../types';
+
+/**
+ * Adds container layout features to chips component
+ * 
+ * @param config Chips configuration
+ * @returns Component enhancer that adds container layout functionality
+ */
+export const withContainer = (config: ChipsConfig) => component => {
+  // Track current layout state
+  const state = {
+    scrollable: config.scrollable === true,
+    vertical: config.vertical === true
+  };
+  
+  return {
+    ...component,
+    
+    // Layout management API
+    layout: {
+      /**
+       * Sets the scrollable state of the chips container
+       * @param {boolean} isScrollable - Whether the chips container should be scrollable
+       * @returns Layout controller for chaining
+       */
+      setScrollable(isScrollable: boolean) {
+        state.scrollable = isScrollable;
+        
+        if (component.element) {
+          if (isScrollable) {
+            component.element.classList.add(`${component.getClass('chips')}--scrollable`);
+          } else {
+            component.element.classList.remove(`${component.getClass('chips')}--scrollable`);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets the scrollable state
+       * @returns {boolean} Whether the container is scrollable
+       */
+      isScrollable() {
+        return state.scrollable;
+      },
+      
+      /**
+       * Sets the vertical layout state
+       * @param {boolean} isVertical - Whether the chips container should be vertically stacked
+       * @returns Layout controller for chaining
+       */
+      setVertical(isVertical: boolean) {
+        state.vertical = isVertical;
+        
+        if (component.element) {
+          if (isVertical) {
+            component.element.classList.add(`${component.getClass('chips')}--vertical`);
+          } else {
+            component.element.classList.remove(`${component.getClass('chips')}--vertical`);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets the vertical state
+       * @returns {boolean} Whether the container has vertical layout
+       */
+      isVertical() {
+        return state.vertical;
+      }
+    }
+  };
+};