mtrl 0.2.2 → 0.2.4

package/src/components/dialog/index.ts

@@ -0,0 +1,15 @@
+// src/components/dialog/index.ts
+export { default } from './dialog';
+export { 
+  DIALOG_SIZES, 
+  DIALOG_ANIMATIONS, 
+  DIALOG_FOOTER_ALIGNMENTS, 
+  DIALOG_EVENTS 
+} from './constants';
+export { 
+  DialogConfig, 
+  DialogComponent, 
+  DialogButton, 
+  DialogEvent, 
+  DialogConfirmOptions 
+} from './types';

package/src/components/dialog/types.ts

@@ -0,0 +1,221 @@
+// src/components/dialog/types.ts
+import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+
+/**
+ * Configuration interface for the Dialog component
+ */
+export interface DialogConfig {
+  /** Dialog title text */
+  title?: string;
+  
+  /** Dialog subtitle text */
+  subtitle?: string;
+  
+  /** Dialog content (text or HTML) */
+  content?: string;
+  
+  /** Whether to show close button in header */
+  closeButton?: boolean;
+  
+  /** CSS class to add to dialog */
+  class?: string;
+  
+  /** Dialog size variant */
+  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+  
+  /** Dialog animation variant */
+  animation?: keyof typeof DIALOG_ANIMATIONS | DIALOG_ANIMATIONS;
+  
+  /** Footer buttons alignment */
+  footerAlignment?: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS;
+  
+  /** Whether dialog is initially open */
+  open?: boolean;
+  
+  /** Whether to close when clicking overlay */
+  closeOnOverlayClick?: boolean;
+  
+  /** Whether to close when Escape key is pressed */
+  closeOnEscape?: boolean;
+  
+  /** Whether dialog should be modal (prevent interaction with background) */
+  modal?: boolean;
+  
+  /** Whether to focus the first focusable element when opened */
+  autofocus?: boolean;
+  
+  /** Whether to trap focus within dialog when opened */
+  trapFocus?: boolean;
+  
+  /** Parent element to append dialog to (defaults to document.body) */
+  container?: HTMLElement;
+  
+  /** Footer buttons configuration */
+  buttons?: DialogButton[];
+  
+  /** Whether to show a divider between header and content */
+  headerDivider?: boolean;
+  
+  /** Whether to show a divider between content and footer */
+  footerDivider?: boolean;
+  
+  /** Dialog z-index (defaults to 1000) */
+  zIndex?: number;
+  
+  /** Duration of open/close animations in ms */
+  animationDuration?: number;
+  
+  /** Event handlers for dialog events */
+  on?: {
+    [key in keyof typeof DIALOG_EVENTS]?: (event: DialogEvent) => void;
+  };
+}
+
+/**
+ * Dialog button configuration
+ */
+export interface DialogButton {
+  /** Button text */
+  text: string;
+  
+  /** Button variant (uses button component variants) */
+  variant?: string;
+  
+  /** Button color */
+  color?: string;
+  
+  /** Button size */
+  size?: string;
+  
+  /** Button onclick handler */
+  onClick?: (event: MouseEvent, dialog: DialogComponent) => void | boolean;
+  
+  /** Close dialog when button is clicked */
+  closeDialog?: boolean;
+  
+  /** Autofocus this button when dialog opens */
+  autofocus?: boolean;
+  
+  /** Additional button attributes */
+  attrs?: Record<string, any>;
+}
+
+/**
+ * Dialog event object
+ */
+export interface DialogEvent {
+  /** Dialog component instance */
+  dialog: DialogComponent;
+  
+  /** Original event if applicable */
+  originalEvent?: Event;
+  
+  /** Whether to prevent the default action */
+  preventDefault: () => void;
+  
+  /** Whether default action was prevented */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Dialog component interface
+ */
+export interface DialogComponent {
+  /** Dialog element */
+  element: HTMLElement;
+  
+  /** Dialog overlay element */
+  overlay: HTMLElement;
+  
+  /** Opens the dialog */
+  open: () => DialogComponent;
+  
+  /** Closes the dialog */
+  close: () => DialogComponent;
+  
+  /** Toggles dialog open/closed state */
+  toggle: (open?: boolean) => DialogComponent;
+  
+  /** Checks if dialog is open */
+  isOpen: () => boolean;
+  
+  /** Sets dialog title */
+  setTitle: (title: string) => DialogComponent;
+  
+  /** Gets dialog title */
+  getTitle: () => string;
+  
+  /** Sets dialog subtitle */
+  setSubtitle: (subtitle: string) => DialogComponent;
+  
+  /** Gets dialog subtitle */
+  getSubtitle: () => string;
+  
+  /** Sets dialog content */
+  setContent: (content: string) => DialogComponent;
+  
+  /** Gets dialog content */
+  getContent: () => string;
+  
+  /** Adds a button to the dialog footer */
+  addButton: (button: DialogButton) => DialogComponent;
+  
+  /** Removes a button by index or text */
+  removeButton: (indexOrText: number | string) => DialogComponent;
+  
+  /** Gets all footer buttons */
+  getButtons: () => DialogButton[];
+  
+  /** Sets footer alignment */
+  setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => DialogComponent;
+  
+  /** Sets dialog size */
+  setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => DialogComponent;
+  
+  /** Adds event listener */
+  on: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  
+  /** Removes event listener */
+  off: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  
+  /** Gets dialog header element */
+  getHeaderElement: () => HTMLElement | null;
+  
+  /** Gets dialog content element */
+  getContentElement: () => HTMLElement | null;
+  
+  /** Gets dialog footer element */
+  getFooterElement: () => HTMLElement | null;
+  
+  /** Creates a confirmation dialog with Yes/No buttons */
+  confirm: (options?: DialogConfirmOptions) => Promise<boolean>;
+  
+  /** Destroys the dialog and removes it from DOM */
+  destroy: () => void;
+}
+
+/**
+ * Options for confirmation dialog
+ */
+export interface DialogConfirmOptions {
+  /** Confirmation title */
+  title?: string;
+  
+  /** Confirmation message */
+  message: string;
+  
+  /** Confirm button text */
+  confirmText?: string;
+  
+  /** Cancel button text */
+  cancelText?: string;
+  
+  /** Confirm button variant */
+  confirmVariant?: string;
+  
+  /** Cancel button variant */
+  cancelVariant?: string;
+  
+  /** Dialog size */
+  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+}

package/src/components/progress/_styles.scss

@@ -23,7 +23,7 @@ $component: '#{base.$prefix}-progress';
   &--linear {
     width: 100%;
     height: 4px; // Default height
-    
+    border-radius: 2px;
     .#{$component}-track {
       position: absolute;
       top: 0;
@@ -31,6 +31,7 @@ $component: '#{base.$prefix}-progress';
       width: 100%;
       height: 100%;
       background-color: t.color('surface-container-highest');
+      border-radius: 2px;
     }
     
     .#{$component}-buffer {
@@ -41,6 +42,7 @@ $component: '#{base.$prefix}-progress';
       width: 0;
       background-color: t.alpha('primary', 0.4);
       transition: width 0.3s ease;
+      border-radius: 2px;
     }
     
     .#{$component}-indicator {
@@ -51,6 +53,7 @@ $component: '#{base.$prefix}-progress';
       width: 0;
       background-color: t.color('primary');
       transition: width 0.3s ease;
+      border-radius: 2px;
     }
     
     // Indeterminate animation for linear progress
@@ -62,6 +65,7 @@ $component: '#{base.$prefix}-progress';
       .#{$component}-indicator {
         width: 30%;
         animation: linear-indeterminate 2s infinite;
+        border-radius: 2px;
       }
     }
     
@@ -99,6 +103,7 @@ $component: '#{base.$prefix}-progress';
       stroke-dasharray: 283; // 2*PI*45
       stroke-dashoffset: 283;
       transition: stroke-dashoffset 0.3s ease;
+      stroke-linecap: round;
     }
     
     // Indeterminate animation for circular progress
@@ -128,6 +133,8 @@ $component: '#{base.$prefix}-progress';
       .#{$component}-track,
       .#{$component}-indicator {
         stroke-width: 3;
+        border-radius: 1px;
+        linecap: round
       }
     }
   }
@@ -152,6 +159,11 @@ $component: '#{base.$prefix}-progress';
     &.#{$component}--linear {
       height: 8px;
       
+      .#{$component}-track,
+      .#{$component}-indicator {
+        border-radius: 4px;
+      }
+
       .#{$component}-label {
         font-size: 14px;
         top: 12px;

package/src/components/progress/api.ts

@@ -59,7 +59,7 @@ export const withAPI = (options: ApiOptions) =>
       if (!options.state.isIndeterminate()) {
         const percent = (value / options.value.getMax()) * 100;
         
-        if (component.getClass('progress').includes('linear')) {
+        if (component.element.classList.contains(`${component.getClass('progress')}--linear`)) {
           component.indicatorElement.style.width = `${percent}%`;
         } else {
           // Circular progress calculation
@@ -91,7 +91,7 @@ export const withAPI = (options: ApiOptions) =>
     setBuffer(value: number) {
       options.buffer.setBuffer(value);
       
-      if (component.getClass('progress').includes('linear')) {
+      if (component.element.classList.contains(`${component.getClass('progress')}--linear`)) {
         const bufferElement = component.element.querySelector(`.${component.getClass('progress')}-buffer`);
         if (bufferElement) {
           const percent = (value / options.value.getMax()) * 100;

package/src/components/progress/progress.ts

@@ -37,7 +37,7 @@ const createCircularProgressDOM = (baseClass: string) => {
   track.setAttribute('r', '45');
   track.setAttribute('fill', 'none');
   track.setAttribute('stroke-width', '6');
-  track.className = `${baseClass}-track`;
+  track.setAttribute('class', `${baseClass}-track`); // FIXED: use setAttribute instead of className
   
   const indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
   indicator.setAttribute('cx', '48');
@@ -45,7 +45,7 @@ const createCircularProgressDOM = (baseClass: string) => {
   indicator.setAttribute('r', '45');
   indicator.setAttribute('fill', 'none');
   indicator.setAttribute('stroke-width', '6');
-  indicator.className = `${baseClass}-indicator`;
+  indicator.setAttribute('class', `${baseClass}-indicator`); // FIXED: use setAttribute instead of className
   
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('viewBox', `0 0 ${size} ${size}`);

package/src/components/progress/types.ts

@@ -49,6 +49,9 @@ export interface ProgressComponent {
   /** The indicator element */
   indicatorElement: HTMLElement;
   
+  /** The buffer element (for linear variant) */
+  bufferElement?: HTMLElement;
+  
   /** The label element (if enabled) */
   labelElement?: HTMLElement;
   

package/src/components/radios/_styles.scss

@@ -0,0 +1,232 @@
+// src/components/radios/_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}-radios';
+
+.#{$component} {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  
+  // Vertical layout (default)
+  &--vertical {
+    flex-direction: column;
+    
+    .#{$component}-item {
+      margin-bottom: 12px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  
+  // Horizontal layout
+  &--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    
+    .#{$component}-item {
+      margin-right: 16px;
+      
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  
+  // Disabled state
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  
+  // Radio item
+  &-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+      
+      .#{$component}-label {
+        cursor: not-allowed;
+      }
+    }
+  }
+  
+  // Radio input
+  &-input {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    margin: 0;
+    padding: 0;
+    
+    // Focus styles
+    &:focus ~ .#{$component}-label .#{$component}-ripple {
+      background-color: t.alpha('primary', 0.12);
+    }
+    
+    // Checked styles
+    &:checked ~ .#{$component}-label {
+      .#{$component}-circle {
+        border-color: t.color('primary');
+        border-width: 1.5px;
+        
+        &:after {
+          transform: translate(-50%, -50%) scale(1);
+          opacity: 1;
+        }
+      }
+    }
+    
+    // Disabled styles
+    &:disabled ~ .#{$component}-label {
+      .#{$component}-circle {
+        border-color: t.alpha('on-surface', 0.38);
+        
+        &:after {
+          background-color: t.alpha('on-surface', 0.38);
+        }
+      }
+      
+      .#{$component}-text {
+        color: t.alpha('on-surface', 0.38);
+      }
+    }
+  }
+  
+  // Radio label
+  &-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px 0;
+    height: 48px;
+    
+    // Typography for label
+    @include m.typography('body-medium');
+    
+    &--before {
+      flex-direction: row-reverse;
+      
+      .#{$component}-text {
+        margin-right: 12px;
+        margin-left: 0;
+      }
+    }
+  }
+  
+  // Radio control
+  &-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+  }
+  
+  // Radio circle
+  &-circle {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border: 1.5px solid t.color('outline');
+    border-radius: 50%;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease;
+    
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: t.color('primary');
+      opacity: 0;
+      transition: transform 0.15s ease, opacity 0.15s ease;
+    }
+  }
+  
+  // Ripple effect
+  &-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    transition: background-color 0.15s ease;
+    
+    // Apply ripple effect on hover
+    .#{$component}-input:not(:disabled) ~ .#{$component}-label:hover & {
+      background-color: t.alpha('primary', 0.08);
+    }
+  }
+  
+  // Radio text
+  &-text {
+    margin-left: 8px;
+    line-height: 1.2;
+  }
+  
+  // Size variants
+  &--small {
+    .#{$component}-control {
+      width: 36px;
+      height: 36px;
+    }
+    
+    .#{$component}-circle {
+      width: 18px;
+      height: 18px;
+      
+      &:after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+    
+    .#{$component}-label {
+      font-size: 13px;
+      height: 36px;
+    }
+  }
+  
+  &--large {
+    .#{$component}-control {
+      width: 48px;
+      height: 48px;
+    }
+    
+    .#{$component}-circle {
+      width: 24px;
+      height: 24px;
+      
+      &:after {
+        width: 14px;
+        height: 14px;
+      }
+    }
+    
+    .#{$component}-label {
+      font-size: 16px;
+      height: 48px;
+    }
+  }
+}

package/src/components/radios/api.ts

@@ -0,0 +1,100 @@
+// src/components/radios/api.ts
+import { RadiosComponent } from './types';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithRadio {
+  element: HTMLElement;
+  radios: any[];
+  getValue: () => string;
+  setValue: (value: string) => any;
+  getSelected: () => any;
+  addOption: (option: any) => any;
+  removeOption: (value: string) => any;
+  enable: () => any;
+  disable: () => any;
+  enableOption: (value: string) => any;
+  disableOption: (value: string) => any;
+  getClass: (name: string) => string;
+  events: {
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+  };
+}
+
+/**
+ * Enhances a radios 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 Radios component
+ */
+export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
+  (component: ComponentWithRadio): RadiosComponent => ({
+    ...component as any,
+    element: component.element,
+    radios: component.radios,
+    
+    getValue: () => component.getValue(),
+    
+    setValue(value: string) {
+      component.setValue(value);
+      return this;
+    },
+    
+    getSelected: () => component.getSelected(),
+    
+    addOption(option) {
+      component.addOption(option);
+      return this;
+    },
+    
+    removeOption(value: string) {
+      component.removeOption(value);
+      return this;
+    },
+    
+    enable() {
+      disabled.enable();
+      return this;
+    },
+    
+    disable() {
+      disabled.disable();
+      return this;
+    },
+    
+    enableOption(value: string) {
+      component.enableOption(value);
+      return this;
+    },
+    
+    disableOption(value: string) {
+      component.disableOption(value);
+      return this;
+    },
+    
+    on(event: string, handler: Function) {
+      component.events.on(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function) {
+      component.events.off(event, handler);
+      return this;
+    },
+    
+    destroy() {
+      // First destroy all radio items
+      component.radios.forEach(radio => radio.destroy());
+      // Then destroy the component
+      lifecycle.destroy();
+    }
+  });