mtrl 0.2.1 → 0.2.3

package/src/components/chip/chip.ts

@@ -1,6 +1,7 @@
-// src/components/chip/chip.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
+// src/components/chip/chip.js
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
 import {
   withEvents,
   withText,
@@ -10,72 +11,383 @@ import {
   withRipple,
   withDisabled,
   withLifecycle
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { ChipConfig, ChipComponent, BaseComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+} from '../../core/compose/features'
+import { withAPI } from './api'
+import { CHIP_VARIANTS, CHIP_SIZES } from './constants'
 
 /**
  * Creates a new Chip component
- * @param {ChipConfig} config - Chip configuration object
- * @returns {ChipComponent} Chip component instance
+ * @param {Object} config - Chip configuration
+ * @param {string} [config.variant='filled'] - Chip variant
+ * @param {string} [config.size='medium'] - Chip size
+ * @param {boolean} [config.selected=false] - Whether the chip is initially selected
+ * @param {boolean} [config.disabled=false] - Whether the chip is initially disabled
+ * @param {string} [config.text] - Chip text content
+ * @param {string} [config.leadingIcon] - Leading icon HTML content
+ * @param {string} [config.trailingIcon] - Trailing icon HTML content
+ * @param {string} [config.class] - Additional CSS classes
+ * @param {string} [config.value] - Chip value
+ * @param {boolean} [config.ripple=true] - Whether to enable ripple effect
+ * @param {Function} [config.onTrailingIconClick] - Callback when trailing icon is clicked
+ * @param {Function} [config.onSelect] - Callback when chip is selected
+ * @param {Function} [config.onChange] - Callback when chip selection changes
+ * @returns {Object} Chip component instance
  */
-const createChip = (config: ChipConfig = {}): ChipComponent => {
-  const baseConfig = createBaseConfig(config);
+const createChip = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    variant: config.variant || CHIP_VARIANTS.FILLED,
+    size: config.size || CHIP_SIZES.MEDIUM,
+    componentName: 'chip',
+    prefix: PREFIX,
+    ripple: config.ripple !== false
+  }
 
   try {
+    // Create base component with core features
     const chip = pipe(
       createBase,
       withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withSize(baseConfig),
-      withText(baseConfig),
-      withIcon({
-        ...baseConfig,
-        position: 'start',
-        iconContent: config.leadingIcon || config.icon
+      withElement({
+        tag: 'div',
+        componentName: 'chip',
+        attrs: {
+          role: 'button',
+          tabindex: '0',
+          'aria-disabled': config.disabled ? 'true' : 'false',
+          'aria-selected': config.selected ? 'true' : 'false',
+          'data-value': config.value || ''
+        },
+        className: config.class,
+        forwardEvents: {
+          click: (component) => component.element.getAttribute('aria-disabled') !== 'true',
+          focus: true,
+          blur: true
+        }
       }),
-      withDisabled(baseConfig),
-      withRipple(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
+      withLifecycle()
+    )(baseConfig)
+    
+    // Track selected state
+    let isSelectedState = !!config.selected;
+    
+    // Manually add the variant class
+    if (config.variant) {
+      chip.element.classList.add(`${chip.getClass('chip')}--${config.variant}`)
+    }
+    
+    // Manually add the size class
+    if (config.size) {
+      chip.element.classList.add(`${chip.getClass('chip')}--${config.size}`)
+    }
+    
+    // Add ripple if enabled
+    if (config.ripple) {
+      withRipple(baseConfig)(chip)
+    }
+    
+    // Add disabled state if needed
+    if (config.disabled) {
+      withDisabled(baseConfig)(chip)
+    }
+
+    // Add selected class if needed
+    if (config.selected) {
+      chip.element.classList.add(`${chip.getClass('chip')}--selected`)
+    }
+
+    // Create a container for the chip content to ensure proper ordering
+    const contentContainer = document.createElement('div')
+    contentContainer.className = `${chip.getClass('chip')}-content`
+    contentContainer.style.display = 'flex'
+    contentContainer.style.alignItems = 'center'
+    contentContainer.style.justifyContent = 'center'
+    contentContainer.style.width = '100%'
+    chip.element.appendChild(contentContainer)
+    
+    // Add leading icon if provided
+    if (config.leadingIcon) {
+      const leadingIconElement = document.createElement('span')
+      leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`
+      leadingIconElement.innerHTML = config.leadingIcon
+      contentContainer.appendChild(leadingIconElement)
+    }
+
+    // Add text element if provided
+    if (config.text) {
+      const textElement = document.createElement('span')
+      textElement.className = `${chip.getClass('chip')}-text`
+      textElement.textContent = config.text
+      contentContainer.appendChild(textElement)
+    }
 
     // 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
+      const trailingIconElement = document.createElement('span')
+      trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`
+      trailingIconElement.innerHTML = config.trailingIcon
+      
+      // Add click handler for trailing icon
       if (config.onTrailingIconClick) {
         trailingIconElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          config.onTrailingIconClick!(chip as ChipComponent);
-        });
+          e.stopPropagation() // Prevent chip click event
+          config.onTrailingIconClick(enhancedChip)
+        })
       }
+      
+      contentContainer.appendChild(trailingIconElement)
     }
 
-    // Initialize selected state if needed
-    if (config.selected) {
-      (chip as ChipComponent).setSelected(true);
-    }
+    // Create enhanced component with API
+    const enhancedChip = {
+      ...chip,
+      
+      /**
+       * Checks if the chip is disabled
+       * @returns {boolean} True if the chip is disabled
+       */
+      isDisabled() {
+        return chip.element.getAttribute('aria-disabled') === 'true';
+      },
+      
+      /**
+       * Checks if the chip is selected
+       * @returns {boolean} True if the chip is selected
+       */
+      isSelected() {
+        return isSelectedState;
+      },
+      
+      /**
+       * Sets the chip's selected state
+       * @param {boolean} selected - Whether the chip should be selected
+       * @returns {Object} The chip instance for chaining
+       */
+      setSelected(selected) {
+        isSelectedState = !!selected;
+        
+        if (selected) {
+          chip.element.classList.add(`${chip.getClass('chip')}--selected`);
+          chip.element.setAttribute('aria-selected', 'true');
+        } else {
+          chip.element.classList.remove(`${chip.getClass('chip')}--selected`);
+          chip.element.setAttribute('aria-selected', 'false');
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Toggles the chip's selected state
+       * @returns {Object} The chip instance for chaining
+       */
+      toggleSelected() {
+        return this.setSelected(!isSelectedState);
+      },
+      
+      /**
+       * Gets the chip's value
+       * @returns {string} The chip's value
+       */
+      getValue() {
+        return chip.element.getAttribute('data-value');
+      },
+      
+      /**
+       * Sets the chip's value
+       * @param {string} value - Value to set
+       * @returns {Object} The chip instance for chaining
+       */
+      setValue(value) {
+        chip.element.setAttribute('data-value', value);
+        return this;
+      },
+      
+      /**
+       * Enables the chip
+       * @returns {Object} The chip instance for chaining
+       */
+      enable() {
+        chip.element.classList.remove(`${chip.getClass('chip')}--disabled`);
+        chip.element.setAttribute('aria-disabled', 'false');
+        chip.element.setAttribute('tabindex', '0');
+        return this;
+      },
+      
+      /**
+       * Disables the chip
+       * @returns {Object} The chip instance for chaining
+       */
+      disable() {
+        chip.element.classList.add(`${chip.getClass('chip')}--disabled`);
+        chip.element.setAttribute('aria-disabled', 'true');
+        chip.element.setAttribute('tabindex', '-1');
+        return this;
+      },
+      
+      /**
+       * Sets the chip's text content
+       * @param {string} content - Text content
+       * @returns {Object} The chip instance for chaining
+       */
+      setText(content) {
+        const textElement = chip.element.querySelector(`.${chip.getClass('chip')}-text`);
+        
+        if (textElement) {
+          textElement.textContent = content;
+        } else if (content) {
+          const newTextElement = document.createElement('span');
+          newTextElement.className = `${chip.getClass('chip')}-text`;
+          newTextElement.textContent = content;
+          contentContainer.appendChild(newTextElement);
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets the chip's text content
+       * @returns {string} The chip's text content
+       */
+      getText() {
+        const textElement = chip.element.querySelector(`.${chip.getClass('chip')}-text`);
+        return textElement ? textElement.textContent : '';
+      },
+      
+      /**
+       * Sets the chip's icon
+       * @param {string} icon - Icon HTML content
+       * @returns {Object} The chip instance for chaining
+       */
+      setIcon(icon) {
+        return this.setLeadingIcon(icon);
+      },
+      
+      /**
+       * Gets the chip's icon
+       * @returns {string} The chip's icon HTML
+       */
+      getIcon() {
+        const iconElement = chip.element.querySelector(`.${chip.getClass('chip')}-leading-icon`);
+        return iconElement ? iconElement.innerHTML : '';
+      },
+      
+      /**
+       * Sets the chip's leading icon
+       * @param {string} icon - Icon HTML content
+       * @returns {Object} The chip instance for chaining
+       */
+      setLeadingIcon(icon) {
+        const leadingIconSelector = `.${chip.getClass('chip')}-leading-icon`;
+        let leadingIconElement = chip.element.querySelector(leadingIconSelector);
+        
+        if (!leadingIconElement && icon) {
+          leadingIconElement = document.createElement('span');
+          leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`;
+          
+          // Insert at the beginning of the content container
+          contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
+        }
+        
+        if (leadingIconElement) {
+          leadingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && leadingIconElement.parentNode) {
+            leadingIconElement.parentNode.removeChild(leadingIconElement);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Sets the chip's trailing icon
+       * @param {string} icon - Icon HTML content
+       * @param {Function} [onClick] - Click handler for the trailing icon
+       * @returns {Object} The chip instance for chaining
+       */
+      setTrailingIcon(icon, onClick) {
+        const trailingIconSelector = `.${chip.getClass('chip')}-trailing-icon`;
+        let trailingIconElement = chip.element.querySelector(trailingIconSelector);
+        
+        if (!trailingIconElement && icon) {
+          trailingIconElement = document.createElement('span');
+          trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`;
+          
+          // Add at the end of the content container
+          contentContainer.appendChild(trailingIconElement);
+          
+          // Add click handler if provided
+          if (onClick) {
+            trailingIconElement.addEventListener('click', (e) => {
+              e.stopPropagation(); // Prevent chip click event
+              onClick(this);
+            });
+          }
+        }
+        
+        if (trailingIconElement) {
+          trailingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && trailingIconElement.parentNode) {
+            trailingIconElement.parentNode.removeChild(trailingIconElement);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Destroys the chip component and cleans up resources
+       */
+      destroy() {
+        chip.lifecycle && chip.lifecycle.destroy && chip.lifecycle.destroy();
+        chip.element.remove();
+      },
+      
+      // Forward event methods from the original chip
+      on: chip.on,
+      off: chip.off,
+      
+      /**
+       * Add CSS classes to the chip element
+       * @param {...string} classes - CSS classes to add
+       * @returns {Object} The chip instance for chaining
+       */
+      addClass(...classes) {
+        chip.element.classList.add(...classes);
+        return this;
+      }
+    };
 
-    // Handle selection callback
-    if (config.onSelect) {
+    // Add click handler for selection toggle
+    if (config.variant === CHIP_VARIANTS.FILTER || 
+        config.variant === CHIP_VARIANTS.ASSIST ||
+        config.selectable) {
+      
       chip.element.addEventListener('click', () => {
-        if (chip.element.getAttribute('aria-disabled') !== 'true') {
-          config.onSelect!(chip as ChipComponent);
+        if (enhancedChip.isDisabled()) return;
+        
+        enhancedChip.toggleSelected();
+        
+        // Call onChange callback if provided
+        if (config.onChange) {
+          config.onChange(enhancedChip);
+        }
+        
+        // Call onSelect callback if provided
+        if (config.onSelect) {
+          config.onSelect(enhancedChip);
         }
       });
     }
 
-    return chip as ChipComponent;
+    return enhancedChip;
   } 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)}`);
+    console.error('Chip creation error:', error);
+    throw new Error(`Failed to create chip: ${error.message}`);
   }
 };
 

package/src/components/chip/constants.ts

@@ -1,4 +1,4 @@
-// src/components/chip/constants.ts
+// src/components/chip/constants.js
 
 /**
  * Available variants for the Chip component
@@ -25,7 +25,7 @@ export const CHIP_VARIANTS = {
 
   /** Suggestion chip for presenting options */
   SUGGESTION: 'suggestion'
-} as const;
+};
 
 /**
  * Available sizes for the Chip component
@@ -35,4 +35,4 @@ export const CHIP_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
-} as const;
+};

package/src/components/chip/index.ts

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

package/src/components/dialog/_styles.scss

@@ -0,0 +1,213 @@
+// src/components/dialog/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-dialog';
+
+// Dialog overlay - covers the entire screen
+.#{$component}-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: t.alpha('scrim', 0.32);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
+  overflow-y: auto;
+  
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.15s ease, visibility 0s linear;
+  }
+}
+
+// Dialog container
+.#{$component} {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  max-width: 90vw;
+  width: fit-content;
+  max-height: calc(100vh - 48px);
+  border-radius: 28px;
+  background-color: t.color('surface-container-high');
+  color: t.color('on-surface');
+  overflow: hidden;
+  box-sizing: border-box;
+  @include m.elevation(3);
+  transform: scale(0.8);
+  opacity: 0;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  
+  &--visible {
+    transform: scale(1);
+    opacity: 1;
+  }
+  
+  // Fullscreen variant
+  &--fullscreen {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+    margin: 0;
+  }
+  
+  // Fullwidth variant
+  &--fullwidth {
+    width: 100%;
+    max-width: 560px;
+  }
+  
+  // Dialog header
+  &-header {
+    display: flex;
+    align-items: flex-start;
+    padding: 24px 24px 16px;
+    
+    &-content {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    &-title {
+      @include m.typography('headline-small');
+      color: t.color('on-surface');
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    &-subtitle {
+      @include m.typography('body-medium');
+      color: t.color('on-surface-variant');
+      margin: 4px 0 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    &-close {
+      margin: -8px -8px -8px 8px;
+      padding: 8px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      color: t.color('on-surface-variant');
+      
+      &:hover {
+        background-color: t.alpha('on-surface', 0.08);
+      }
+      
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+      
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+  
+  // Dialog content
+  &-content {
+    flex: 1 1 auto;
+    padding: 0 24px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    @include m.typography('body-medium');
+    color: t.color('on-surface-variant');
+    
+    &:first-child {
+      padding-top: 24px;
+    }
+    
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+  
+  // Dialog footer
+  &-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 16px 24px 24px;
+    gap: 8px;
+    
+    &--left {
+      justify-content: flex-start;
+    }
+    
+    &--center {
+      justify-content: center;
+    }
+    
+    &--space-between {
+      justify-content: space-between;
+    }
+    
+    button {
+      margin: 0;
+    }
+  }
+  
+  // Size variants
+  &--small {
+    max-width: 400px;
+  }
+  
+  &--medium {
+    max-width: 560px;
+  }
+  
+  &--large {
+    max-width: 90vw;
+    width: 800px;
+  }
+  
+  // Animation variants
+  &--slide-up {
+    transform: translateY(20px) scale(1);
+    
+    &.#{$component}--visible {
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  &--slide-down {
+    transform: translateY(-20px) scale(1);
+    
+    &.#{$component}--visible {
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  &--fade {
+    transform: scale(1);
+    
+    &.#{$component}--visible {
+      transform: scale(1);
+    }
+  }
+}