mtrl 0.1.3 → 0.2.0

package/src/components/chip/_styles.scss

@@ -0,0 +1,372 @@
+// src/components/chip/_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}-chip';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 8px;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, 
+              border-color 0.15s ease, opacity 0.15s ease;
+  
+  // Typography
+  @include m.typography('label-large');
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Disabled state
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  
+  // Leading icon styles
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+  
+  // Trailing icon styles
+  &-trailing-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: 8px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  
+  // Text content
+  &-text {
+    // Text truncation for long chip labels
+    @include m.truncate;
+    max-width: 150px;
+  }
+  
+  // Ripple container
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    pointer-events: none;
+    background-color: currentColor;
+    opacity: 0.12;
+  }
+  
+  // === VARIANTS ===
+  
+  // Filled chip (default)
+  &--filled {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+  }
+  
+  // Outlined chip
+  &--outlined {
+    border: 1px solid t.color('outline');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      border-color: t.color('secondary');
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+  }
+  
+  // Elevated chip
+  &--elevated {
+    background-color: t.color('surface-container-low');
+    color: t.color('on-surface');
+    @include m.elevation(1);
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+      @include m.elevation(2);
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+      @include m.elevation(1);
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+    
+    &[aria-disabled="true"] {
+      @include m.elevation(0);
+      box-shadow: none;
+    }
+  }
+  
+  // Assist chip
+  &--assist {
+    background-color: t.color('surface-container');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    .#{$component}-icon {
+      color: t.color('primary');
+    }
+  }
+  
+  // Filter chip
+  &--filter {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+      
+      // Checkmark icon for selected filter chips
+      .#{$component}-icon {
+        color: t.color('on-secondary-container');
+      }
+    }
+  }
+  
+  // Input chip
+  &--input {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    padding-right: 8px; // Less padding on the right to accommodate the trailing icon
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    .#{$component}-trailing-icon {
+      color: t.color('on-surface-variant');
+      
+      &:hover {
+        color: t.color('on-surface');
+      }
+    }
+  }
+  
+  // Suggestion chip
+  &--suggestion {
+    background-color: t.color('surface-container');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+  }
+  
+  // === SIZES ===
+  
+  &--small {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+    
+    .#{$component}-icon,
+    .#{$component}-trailing-icon {
+      width: 16px;
+      height: 16px;
+      
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    
+    .#{$component}-icon {
+      margin-right: 4px;
+    }
+    
+    .#{$component}-trailing-icon {
+      margin-left: 4px;
+    }
+  }
+  
+  &--large {
+    height: 40px;
+    padding: 0 16px;
+    font-size: 15px;
+    border-radius: 12px;
+    
+    .#{$component}-icon,
+    .#{$component}-trailing-icon {
+      width: 20px;
+      height: 20px;
+      
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    
+    .#{$component}-icon {
+      margin-right: 10px;
+    }
+    
+    .#{$component}-trailing-icon {
+      margin-left: 10px;
+    }
+  }
+  
+  // === SPECIAL CASES ===
+  
+  // For chips with only icons (no text)
+  &--icon-only {
+    padding: 0;
+    width: 32px;
+    
+    &.#{$component}--small {
+      width: 24px;
+    }
+    
+    &.#{$component}--large {
+      width: 40px;
+    }
+    
+    .#{$component}-icon {
+      margin-right: 0;
+    }
+  }
+}
+
+// === CHIP SET STYLES ===
+
+.#{$component}-set {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  
+  &--scrollable {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none; // Firefox
+    
+    &::-webkit-scrollbar {
+      display: none; // Chrome, Safari, Edge
+    }
+  }
+  
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

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