mtrl 0.2.6 → 0.2.7

package/src/components/card/types.ts

@@ -27,6 +27,21 @@ export enum CardElevation {
   LEVEL4 = 4
 }
 
+/**
+ * Button configuration interface for buttons shorthand
+ * @interface ButtonConfig
+ */
+export interface ButtonConfig {
+  /** Button text */
+  text?: string;
+  /** Button variant */
+  variant?: string;
+  /** Button icon */
+  icon?: string;
+  /** Additional button properties */
+  [key: string]: any;
+}
+
 /**
  * Card configuration interface
  * @interface CardSchema
@@ -54,6 +69,19 @@ export interface CardSchema {
   mediaConfig?: CardMediaConfig;
   /** ARIA attributes for accessibility */
   aria?: CardAriaAttributes;
+  
+  // New inline configuration options
+  /** Inline header configuration (alternative to headerConfig) */
+  header?: CardHeaderConfig;
+  /** Inline content configuration (alternative to contentConfig) */
+  content?: CardContentConfig;
+  /** Inline media configuration (alternative to mediaConfig) */
+  media?: CardMediaConfig;
+  /** Inline actions configuration (alternative to actionsConfig) */
+  actions?: CardActionsConfig;
+  /** Simple buttons array for actions (will be converted to actionsConfig) */
+  buttons?: ButtonConfig[];
+
   /** Internal component name */
   componentName?: string;
   /** CSS class prefix */

package/src/components/checkbox/_styles.scss

@@ -70,8 +70,6 @@ $component: '#{base.$prefix}-checkbox';
 
   // Label position variants
   &--label-start {
-    flex-direction: row-reverse;
-
     .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;

package/src/components/datepicker/_styles.scss

@@ -0,0 +1,358 @@
+// src/components/datepicker/_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}-datepicker';
+
+.#{$component} {
+  &-container {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 280px;
+    max-width: 360px;
+  }
+  
+  &-input {
+    display: flex;
+    height: 40px;
+    width: 100%;
+    padding: 0 12px;
+    border: 1px solid t.color('outline');
+    border-radius: 4px;
+    background-color: t.color('surface');
+    color: t.color('on-surface');
+    font-family: inherit;
+    font-size: 16px;
+    line-height: 24px;
+    transition: border-color 0.2s ease;
+    cursor: pointer;
+    
+    &:hover {
+      border-color: t.color('on-surface-variant');
+    }
+    
+    &:focus {
+      outline: none;
+      border-color: t.color('primary');
+      border-width: 2px;
+      padding: 0 11px; // Adjust for increased border width
+    }
+    
+    &:disabled {
+      opacity: 0.38;
+      cursor: not-allowed;
+      border-color: t.color('outline');
+      background-color: t.alpha('on-surface', 0.04);
+    }
+  }
+  
+  &-calendar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    margin-top: 8px;
+    background-color: t.color('surface-container-high');
+    border-radius: v.shape('large');
+    box-shadow: v.elevation('level3');
+    overflow: hidden;
+    
+    &-content {
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+    }
+  }
+  
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  
+  &-month-selector,
+  &-year-selector {
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    color: t.color('on-surface-variant');
+    @include m.typography('title-small');
+    cursor: pointer;
+    border-radius: v.shape('full');
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+  }
+  
+  &-nav-controls {
+    display: flex;
+    align-items: center;
+  }
+  
+  &-prev-btn,
+  &-next-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  &-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 8px;
+  }
+  
+  &-weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    @include m.typography('body-small');
+    color: t.color('on-surface-variant');
+    font-weight: 500;
+  }
+  
+  &-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+  }
+  
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    @include m.typography('body-medium');
+    color: t.color('on-surface');
+    cursor: pointer;
+    
+    // &:hover:not(:disabled) {
+    //   background-color: t.alpha('on-surface', 0.08);
+    // }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    &.outside-month {
+      color: t.color('on-surface-variant');
+      opacity: 0.6;
+    }
+    
+    &.today {
+      position: relative;
+      &::before {
+        position: absolute;
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        content: '';
+        border: 1px solid t.color('primary');
+      }
+      
+    }
+    
+    &.selected {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+    
+    &:disabled {
+      color: t.color('on-surface-variant');
+      opacity: 0.38;
+      cursor: not-allowed;
+    }
+    
+    &.range-start,
+    &.range-end {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+    
+    &.range-middle {
+      background-color: t.alpha('primary-container', 0.18);
+      color: t.color('on-primary-container');
+      border-radius: 0;
+    }
+  }
+  
+  &-months,
+  &-years {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 16px 0;
+  }
+  
+  &-month,
+  &-year {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    border: none;
+    background: none;
+    border-radius: v.shape('medium');
+    @include m.typography('body-medium');
+    color: t.color('on-surface');
+    cursor: pointer;
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    &.selected {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+  }
+  
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 16px 8px 0;
+    margin-top: 16px;
+    
+    button {
+      margin-left: 8px;
+    }
+  }
+  
+  // Modal-specific styles
+  &-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: v.z-index('modal');
+    width: 328px;
+    max-width: 90vw;
+    
+    &-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: v.z-index('modal') - 1;
+    }
+  }
+  
+  // Full-screen modal for mobile
+  @media (max-width: 600px) {
+    &-modal {
+      width: 100%;
+      height: 100%;
+      max-width: none;
+      top: 0;
+      left: 0;
+      transform: none;
+      border-radius: 0;
+      
+      &-header {
+        height: 56px;
+        padding: 0 16px;
+        border-bottom: 1px solid t.color('outline-variant');
+      }
+    }
+  }
+  
+  // Range selection styles
+  &-range {
+    .#{$component}-days {
+      .#{$component}-day {
+        &.range-start {
+          position: relative;
+          // border-top-right-radius: 0;
+          // border-bottom-right-radius: 0;
+          &::before {
+            position: absolute;
+            content: '';
+            right: 0;
+            width: 50%;
+            height: 100%;
+            background-color: t.alpha('primary', 0.1);
+          }
+        }
+        
+        &.range-end {
+          position: relative;
+          // border-top-left-radius: 0;
+          // border-bottom-left-radius: 0;
+          &::before {
+            position: absolute;
+            content: '';
+            left: 0;
+            width: 50%;
+            height: 100%;
+            background-color: t.alpha('primary', 0.1);
+          }
+        }
+      }
+    }
+  }
+  
+  // Animation
+  &-animate {
+    .#{$component}-calendar {
+      animation: datepicker-fade-in 0.2s ease;
+    }
+  }
+}
+
+// Animations
+@keyframes datepicker-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/datepicker/api.ts

@@ -0,0 +1,272 @@
+// src/components/datepicker/api.ts
+import { DatePickerComponent } from './types';
+import { 
+  formatDate, 
+  parseDate,
+  isSameDay,
+  generateCalendarDates,
+  addMonths,
+  addYears 
+} from './utils';
+import { DATEPICKER_VIEWS, DATEPICKER_SELECTION_MODES } from './constants';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  events: {
+    on: (event: string, handler: Function) => any;
+    off: (event: string, handler: Function) => any;
+    emit: (event: string, data: any) => any;
+  };
+}
+
+/**
+ * Enhances a datepicker component with API methods
+ * @param {object} state - Current state of the datepicker
+ * @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 DatePicker component
+ */
+export const withAPI = (state: any, { disabled, lifecycle, events }: ApiOptions) => 
+  (component: any): DatePickerComponent => {
+    // Calendar navigation API
+    const calendar = {
+      goToDate(date: Date): void {
+        const validDate = parseDate(date);
+        if (!validDate) return;
+        
+        state.currentMonth = validDate.getMonth();
+        state.currentYear = validDate.getFullYear();
+        
+        // Update calendar view
+        state.updateCalendar();
+      },
+      
+      nextMonth(): void {
+        const newDate = addMonths(new Date(state.currentYear, state.currentMonth, 1), 1);
+        state.currentMonth = newDate.getMonth();
+        state.currentYear = newDate.getFullYear();
+        
+        // Update calendar view
+        state.updateCalendar();
+      },
+      
+      prevMonth(): void {
+        const newDate = addMonths(new Date(state.currentYear, state.currentMonth, 1), -1);
+        state.currentMonth = newDate.getMonth();
+        state.currentYear = newDate.getFullYear();
+        
+        // Update calendar view
+        state.updateCalendar();
+      },
+      
+      nextYear(): void {
+        state.currentYear += 1;
+        
+        // Update calendar view
+        state.updateCalendar();
+      },
+      
+      prevYear(): void {
+        state.currentYear -= 1;
+        
+        // Update calendar view
+        state.updateCalendar();
+      },
+      
+      showDayView(): void {
+        state.currentView = DATEPICKER_VIEWS.DAY;
+        state.updateCalendar();
+      },
+      
+      showMonthView(): void {
+        state.currentView = DATEPICKER_VIEWS.MONTH;
+        state.updateCalendar();
+      },
+      
+      showYearView(): void {
+        state.currentView = DATEPICKER_VIEWS.YEAR;
+        state.updateCalendar();
+      },
+      
+      getCurrentView(): string {
+        return state.currentView;
+      }
+    };
+    
+    return {
+      ...component as any,
+      element: component.element,
+      input: state.input,
+      calendar,
+      
+      open(): DatePickerComponent {
+        state.isOpen = true;
+        state.render();
+        events.emit('open', { value: this.getValue() });
+        return this;
+      },
+      
+      close(): DatePickerComponent {
+        state.isOpen = false;
+        state.render();
+        events.emit('close', { value: this.getValue() });
+        return this;
+      },
+      
+      getValue(): Date | [Date, Date] | null {
+        if (!state.selectedDate) return null;
+        
+        // Range selection
+        if (state.selectionMode === DATEPICKER_SELECTION_MODES.RANGE && state.rangeEndDate) {
+          return [new Date(state.selectedDate), new Date(state.rangeEndDate)];
+        }
+        
+        // Single selection
+        return new Date(state.selectedDate);
+      },
+      
+      setValue(value: Date | string | [Date | string, Date | string]): DatePickerComponent {
+        // Handle range selection
+        if (Array.isArray(value) && state.selectionMode === DATEPICKER_SELECTION_MODES.RANGE) {
+          const start = parseDate(value[0]);
+          const end = parseDate(value[1]);
+          
+          if (start && end) {
+            state.selectedDate = start;
+            state.rangeEndDate = end;
+            
+            // Ensure start date is before end date
+            if (start > end) {
+              state.selectedDate = end;
+              state.rangeEndDate = start;
+            }
+            
+            // Update input value
+            state.updateInputValue();
+            
+            // Update calendar if it's open
+            if (state.isOpen) {
+              // Set current month/year to the start date's month/year
+              state.currentMonth = state.selectedDate.getMonth();
+              state.currentYear = state.selectedDate.getFullYear();
+              state.updateCalendar();
+            }
+            
+            events.emit('change', { 
+              value: this.getValue(), 
+              formattedValue: this.getFormattedValue() 
+            });
+          }
+          
+          return this;
+        }
+        
+        // Handle single date selection
+        const parsedDate = parseDate(value as Date | string);
+        if (parsedDate) {
+          state.selectedDate = parsedDate;
+          state.rangeEndDate = null;
+          
+          // Update input value
+          state.updateInputValue();
+          
+          // Update calendar if it's open
+          if (state.isOpen) {
+            state.currentMonth = parsedDate.getMonth();
+            state.currentYear = parsedDate.getFullYear();
+            state.updateCalendar();
+          }
+          
+          events.emit('change', { 
+            value: this.getValue(), 
+            formattedValue: this.getFormattedValue() 
+          });
+        }
+        
+        return this;
+      },
+      
+      getFormattedValue(): string {
+        if (!state.selectedDate) return '';
+        
+        // Range selection
+        if (state.selectionMode === DATEPICKER_SELECTION_MODES.RANGE && state.rangeEndDate) {
+          const startStr = formatDate(state.selectedDate, state.dateFormat);
+          const endStr = formatDate(state.rangeEndDate, state.dateFormat);
+          return `${startStr} - ${endStr}`;
+        }
+        
+        // Single selection
+        return formatDate(state.selectedDate, state.dateFormat);
+      },
+      
+      clear(): DatePickerComponent {
+        state.selectedDate = null;
+        state.rangeEndDate = null;
+        state.updateInputValue();
+        
+        if (state.isOpen) {
+          state.updateCalendar();
+        }
+        
+        events.emit('change', { value: null, formattedValue: '' });
+        return this;
+      },
+      
+      enable(): DatePickerComponent {
+        disabled.enable();
+        return this;
+      },
+      
+      disable(): DatePickerComponent {
+        disabled.disable();
+        return this;
+      },
+      
+      setMinDate(date: Date | string): DatePickerComponent {
+        const parsedDate = parseDate(date);
+        if (parsedDate) {
+          state.minDate = parsedDate;
+          
+          // Update calendar if it's open
+          if (state.isOpen) {
+            state.updateCalendar();
+          }
+        }
+        return this;
+      },
+      
+      setMaxDate(date: Date | string): DatePickerComponent {
+        const parsedDate = parseDate(date);
+        if (parsedDate) {
+          state.maxDate = parsedDate;
+          
+          // Update calendar if it's open
+          if (state.isOpen) {
+            state.updateCalendar();
+          }
+        }
+        return this;
+      },
+      
+      destroy(): void {
+        lifecycle.destroy();
+      },
+      
+      on(event: string, handler: Function): DatePickerComponent {
+        events.on(event, handler);
+        return this;
+      },
+      
+      off(event: string, handler: Function): DatePickerComponent {
+        events.off(event, handler);
+        return this;
+      }
+    };
+  };