mtrl 0.2.6 → 0.2.7

package/src/components/fab/_styles.scss

@@ -0,0 +1,225 @@
+// src/components/fab/_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}-fab';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  
+  // FAB uses elevation in all variants
+  @include m.elevation(3);
+  
+  // Transitions
+  @include m.motion-transition(
+    transform,
+    box-shadow,
+    background-color,
+    color
+  );
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Default FAB size (56dp)
+  width: 56px;
+  height: 56px;
+  border-radius: f.get-shape('large');
+  
+  // Icon sizing
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // Size variants
+  &--small {
+    width: 40px;
+    height: 40px;
+    border-radius: f.get-shape('medium');
+    
+    .#{$component}-icon {
+      width: 24px;
+      height: 24px;
+      
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+  
+  &--default {
+    // Default is already defined in base styles
+  }
+  
+  &--large {
+    width: 96px;
+    height: 96px;
+    border-radius: f.get-shape('extra-large');
+    
+    .#{$component}-icon {
+      width: 36px;
+      height: 36px;
+      
+      svg {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
+  
+  // Color variants - primary is the default
+
+  // Primary variant (default)
+  &--primary {
+    background-color: t.color('primary-container');
+    color: t.color('on-primary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-primary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-primary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+
+  // Secondary variant
+  &--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');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Tertiary variant
+  &--tertiary {
+    background-color: t.color('tertiary-container');
+    color: t.color('on-tertiary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-tertiary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-tertiary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Surface variant
+  &--surface {
+    background-color: t.color('surface');
+    color: t.color('primary');
+    
+    &:hover {
+      @include m.state-layer(t.color('primary'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('primary'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Lowered state (when pressed)
+  &--lowered {
+    @include m.elevation(1);
+    transform: translateY(1px);
+  }
+  
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    pointer-events: none;
+    @include m.elevation(0);
+    background-color: t.alpha('on-surface', 0.12);
+    color: t.alpha('on-surface', 0.38);
+  }
+  
+  // Positioning utilities
+  &--top-right {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--top-left {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-right {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-left {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  // Optional animations
+  @keyframes fab-enter {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  &--animate-enter {
+    animation: fab-enter 0.3s f.get-motion-easing('emphasized-decelerate') forwards;
+  }
+}

package/src/components/fab/api.ts

@@ -0,0 +1,97 @@
+// src/components/fab/api.ts
+import { FabComponent } from './types';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  className: string;
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  icon: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+}
+
+/**
+ * Enhances a FAB component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the FAB component
+ */
+export const withAPI = ({ disabled, lifecycle, className }: ApiOptions) => 
+  (component: ComponentWithElements): FabComponent => ({
+    ...component as any,
+    element: component.element as HTMLButtonElement,
+    
+    getValue: () => component.element.value,
+    
+    setValue(value: string) {
+      component.element.value = value;
+      return this;
+    },
+    
+    enable() {
+      disabled.enable();
+      return this;
+    },
+    
+    disable() {
+      disabled.disable();
+      return this;
+    },
+    
+    setIcon(icon: string) {
+      component.icon.setIcon(icon);
+      return this;
+    },
+    
+    getIcon() {
+      return component.icon.getIcon();
+    },
+    
+    setPosition(position: string) {
+      // First remove any existing position classes
+      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+      positions.forEach(pos => {
+        component.element.classList.remove(`${className}--${pos}`);
+      });
+      
+      // Add new position class
+      component.element.classList.add(`${className}--${position}`);
+      return this;
+    },
+    
+    getPosition() {
+      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+      for (const pos of positions) {
+        if (component.element.classList.contains(`${className}--${pos}`)) {
+          return pos;
+        }
+      }
+      return null;
+    },
+    
+    lower() {
+      component.element.classList.add(`${className}--lowered`);
+      return this;
+    },
+    
+    raise() {
+      component.element.classList.remove(`${className}--lowered`);
+      return this;
+    },
+    
+    destroy() {
+      lifecycle.destroy();
+    }
+  });

package/src/components/fab/config.ts

@@ -0,0 +1,94 @@
+// src/components/fab/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { FabConfig } from './types';
+import { FAB_VARIANTS, FAB_SIZES } from './constants';
+
+/**
+ * Default configuration for the FAB component
+ */
+export const defaultConfig: FabConfig = {
+  variant: FAB_VARIANTS.PRIMARY,
+  size: FAB_SIZES.DEFAULT,
+  type: 'button',
+  ripple: true
+};
+
+/**
+ * Creates the base configuration for FAB component
+ * @param {FabConfig} config - User provided configuration
+ * @returns {FabConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: FabConfig = {}): FabConfig => 
+  createComponentConfig(defaultConfig, config, 'fab') as FabConfig;
+
+/**
+ * Generates element configuration for the FAB component
+ * @param {FabConfig} config - FAB configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: FabConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    type: config.type || 'button',
+    'aria-label': config.ariaLabel || (config.icon ? 'action' : undefined)
+  };
+  
+  // Add size class
+  const fabSizeClass = `${config.prefix}-fab--${config.size || FAB_SIZES.DEFAULT}`;
+  let classNames = [fabSizeClass];
+  
+  // Add animation class if specified
+  if (config.animate) {
+    classNames.push(`${config.prefix}-fab--animate-enter`);
+  }
+  
+  // Add position class if specified
+  if (config.position) {
+    classNames.push(`${config.prefix}-fab--${config.position}`);
+  }
+  
+  // Add user classes
+  if (config.class) {
+    classNames.push(config.class);
+  }
+  
+  // Only add disabled attribute if it's explicitly true
+  if (config.disabled === true) {
+    attrs.disabled = true;
+    classNames.push(`${config.prefix}-fab--disabled`);
+  }
+  
+  return createElementConfig(config, {
+    tag: 'button',
+    attrs,
+    className: classNames,
+    forwardEvents: {
+      click: (component) => !component.element.disabled,
+      focus: true,
+      blur: true
+    },
+    interactive: true
+  });
+};
+
+/**
+ * Creates API configuration for the FAB component
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp: any) => ({
+  disabled: {
+    enable: () => comp.disabled.enable(),
+    disable: () => comp.disabled.disable()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  },
+  className: comp.getClass('fab')
+});
+
+export default defaultConfig;

package/src/components/fab/constants.ts

@@ -0,0 +1,41 @@
+// src/components/fab/constants.ts
+
+/**
+ * FAB variants for styling
+ */
+export const FAB_VARIANTS = {
+  /** Primary container color with on-primary-container icons */
+  PRIMARY: 'primary',
+  /** Secondary container color with on-secondary-container icons */
+  SECONDARY: 'secondary',
+  /** Tertiary container color with on-tertiary-container icons */
+  TERTIARY: 'tertiary',
+  /** Surface color with primary color icons */
+  SURFACE: 'surface'
+};
+
+/**
+ * FAB size variants
+ */
+export const FAB_SIZES = {
+  /** Standard FAB size (56dp) */
+  DEFAULT: 'default',
+  /** Small FAB size (40dp) */
+  SMALL: 'small',
+  /** Large FAB size (96dp) */
+  LARGE: 'large'
+};
+
+/**
+ * FAB positions for fixed positioning
+ */
+export const FAB_POSITIONS = {
+  /** Top right corner */
+  TOP_RIGHT: 'top-right',
+  /** Top left corner */
+  TOP_LEFT: 'top-left',
+  /** Bottom right corner */
+  BOTTOM_RIGHT: 'bottom-right',
+  /** Bottom left corner */
+  BOTTOM_LEFT: 'bottom-left'
+};

package/src/components/fab/fab.ts

@@ -0,0 +1,67 @@
+// src/components/fab/fab.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withIcon,
+  withVariant,
+  withRipple,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { FabConfig, FabComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Floating Action Button (FAB) component
+ * 
+ * @param {FabConfig} config - FAB configuration object
+ * @returns {FabComponent} FAB component instance
+ * 
+ * @example
+ * ```typescript
+ * // Create a default FAB with a plus icon
+ * const fab = createFab({
+ *   icon: '<svg>...</svg>',
+ *   ariaLabel: 'Add new item'
+ * });
+ * 
+ * // Create a small FAB with a custom position
+ * const smallFab = createFab({
+ *   size: FAB_SIZES.SMALL,
+ *   icon: '<svg>...</svg>',
+ *   variant: 'secondary',
+ *   position: 'bottom-right'
+ * });
+ * 
+ * // Add click handler
+ * fab.on('click', () => {
+ *   console.log('FAB clicked');
+ * });
+ * ```
+ */
+const createFab = (config: FabConfig = {}): FabComponent => {
+  const fabConfig = createBaseConfig(config);
+
+  try {
+    const fab = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(fabConfig)),
+      withVariant(fabConfig),
+      withIcon(fabConfig),
+      withDisabled(fabConfig),
+      withRipple(fabConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(fabConfig);
+    
+    return fab;
+  } catch (error) {
+    console.error('FAB creation error:', error);
+    throw new Error(`Failed to create FAB: ${(error as Error).message}`);
+  }
+};
+
+export default createFab;

package/src/components/fab/index.ts

@@ -0,0 +1,4 @@
+// src/components/fab/index.ts
+export { default, default as createFab } from './fab';
+export { FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS } from './constants';
+export { FabConfig, FabComponent } from './types';