npm - mtrl - Versions diffs - 0.2.9 → 0.3.1 - Mend

mtrl 0.2.9 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/CLAUDE.md +33 -0
package/package.json +3 -1
package/src/components/button/button.ts +34 -5
package/src/components/navigation/index.ts +4 -1
package/src/components/navigation/system/core.ts +302 -0
package/src/components/navigation/system/events.ts +240 -0
package/src/components/navigation/system/index.ts +184 -0
package/src/components/navigation/system/mobile.ts +278 -0
package/src/components/navigation/system/state.ts +77 -0
package/src/components/navigation/system/types.ts +364 -0
package/src/components/navigation/types.ts +33 -0
package/src/components/slider/config.ts +2 -2
package/src/components/slider/features/controller.ts +1 -25
package/src/components/slider/features/handlers.ts +0 -1
package/src/components/slider/features/range.ts +7 -7
package/src/components/slider/{structure.ts → schema.ts} +2 -13
package/src/components/slider/slider.ts +3 -2
package/src/components/snackbar/index.ts +7 -1
package/src/components/snackbar/types.ts +25 -0
package/src/components/switch/api.ts +16 -0
package/src/components/switch/config.ts +1 -18
package/src/components/switch/features.ts +198 -0
package/src/components/switch/index.ts +6 -1
package/src/components/switch/switch.ts +3 -3
package/src/components/switch/types.ts +27 -2
package/src/components/textfield/index.ts +7 -1
package/src/components/textfield/types.ts +36 -0
package/src/core/composition/features/dom.ts +26 -14
package/src/core/composition/features/icon.ts +18 -18
package/src/core/composition/features/index.ts +3 -2
package/src/core/composition/features/label.ts +16 -17
package/src/core/composition/features/layout.ts +47 -0
package/src/core/composition/index.ts +4 -4
package/src/core/layout/README.md +350 -0
package/src/core/layout/array.ts +181 -0
package/src/core/layout/create.ts +55 -0
package/src/core/layout/index.ts +26 -0
package/src/core/layout/object.ts +124 -0
package/src/core/layout/processor.ts +58 -0
package/src/core/layout/result.ts +85 -0
package/src/core/layout/types.ts +125 -0
package/src/core/layout/utils.ts +136 -0
package/src/styles/abstract/_variables.scss +28 -0
package/src/styles/components/_switch.scss +133 -69
package/src/styles/components/_textfield.scss +9 -16
package/test/components/badge.test.ts +545 -0
package/test/components/bottom-app-bar.test.ts +303 -0
package/test/components/button.test.ts +233 -0
package/test/components/card.test.ts +560 -0
package/test/components/carousel.test.ts +951 -0
package/test/components/checkbox.test.ts +462 -0
package/test/components/chip.test.ts +692 -0
package/test/components/datepicker.test.ts +1124 -0
package/test/components/dialog.test.ts +990 -0
package/test/components/divider.test.ts +412 -0
package/test/components/extended-fab.test.ts +672 -0
package/test/components/fab.test.ts +561 -0
package/test/components/list.test.ts +365 -0
package/test/components/menu.test.ts +718 -0
package/test/components/navigation.test.ts +186 -0
package/test/components/progress.test.ts +567 -0
package/test/components/radios.test.ts +699 -0
package/test/components/search.test.ts +1135 -0
package/test/components/segmented-button.test.ts +732 -0
package/test/components/sheet.test.ts +641 -0
package/test/components/slider.test.ts +1220 -0
package/test/components/snackbar.test.ts +461 -0
package/test/components/switch.test.ts +452 -0
package/test/components/tabs.test.ts +1369 -0
package/test/components/textfield.test.ts +400 -0
package/test/components/timepicker.test.ts +592 -0
package/test/components/tooltip.test.ts +630 -0
package/test/components/top-app-bar.test.ts +566 -0
package/test/core/dom.attributes.test.ts +148 -0
package/test/core/dom.classes.test.ts +152 -0
package/test/core/dom.events.test.ts +243 -0
package/test/core/emitter.test.ts +141 -0
package/test/core/ripple.test.ts +99 -0
package/test/core/state.store.test.ts +189 -0
package/test/core/utils.normalize.test.ts +61 -0
package/test/core/utils.object.test.ts +120 -0
package/test/setup.ts +451 -0
package/tsconfig.json +2 -2
package/src/components/navigation/system-types.ts +0 -124
package/src/components/navigation/system.ts +0 -776
package/src/components/snackbar/constants.ts +0 -26
package/src/core/composition/features/structure.ts +0 -22
package/src/core/layout/index.js +0 -95
package/src/core/structure.ts +0 -288
package/test/components/button.test.js +0 -170
package/test/components/checkbox.test.js +0 -238
package/test/components/list.test.js +0 -105
package/test/components/menu.test.js +0 -385
package/test/components/navigation.test.js +0 -227
package/test/components/snackbar.test.js +0 -234
package/test/components/switch.test.js +0 -186
package/test/components/textfield.test.js +0 -314
package/test/core/emitter.test.js +0 -141
package/test/core/ripple.test.js +0 -66

package/test/components/timepicker.test.ts ADDED Viewed

@@ -0,0 +1,592 @@
+// test/components/timepicker.test.ts
+import { describe, test, expect, mock, beforeAll, afterAll } from 'bun:test';
+import { JSDOM } from 'jsdom';
+// Setup jsdom environment
+let dom: JSDOM;
+let window: Window;
+let document: Document;
+let originalGlobalDocument: any;
+let originalGlobalWindow: any;
+beforeAll(() => {
+  // Create a new JSDOM instance
+  dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+    url: 'http://localhost/',
+    pretendToBeVisual: true
+  });
+  // Get window and document from jsdom
+  window = dom.window;
+  document = window.document;
+  // Store original globals
+  originalGlobalDocument = global.document;
+  originalGlobalWindow = global.window;
+  // Set globals to use jsdom
+  global.document = document;
+  global.window = window;
+  global.Element = window.Element;
+  global.HTMLElement = window.HTMLElement;
+  global.HTMLButtonElement = window.HTMLButtonElement;
+  global.Event = window.Event;
+});
+afterAll(() => {
+  // Restore original globals
+  global.document = originalGlobalDocument;
+  global.window = originalGlobalWindow;
+  // Clean up jsdom
+  window.close();
+});
+// Import only the types we need from the component
+import {
+  TimePickerComponent,
+  TimePickerConfig,
+  TimeValue,
+  TIME_PICKER_TYPE,
+  TIME_PICKER_ORIENTATION,
+  TIME_FORMAT,
+  TIME_PERIOD
+} from '../../src/components/timepicker/types';
+// Create a mock implementation of the timepicker component
+const createMockTimePicker = (config: TimePickerConfig = {}): TimePickerComponent => {
+  // Create the main container element
+  const element = document.createElement('div');
+  element.className = `mtrl-time-picker ${config.class || ''}`;
+  // Create modal element
+  const modalElement = document.createElement('div');
+  modalElement.className = 'mtrl-time-picker-modal';
+  modalElement.style.display = 'none';
+  // Create dialog element
+  const dialogElement = document.createElement('div');
+  dialogElement.className = [
+    'mtrl-time-picker-dialog',
+    `mtrl-time-picker-dialog--${config.type || TIME_PICKER_TYPE.DIAL}`,
+    `mtrl-time-picker-dialog--${config.orientation || TIME_PICKER_ORIENTATION.VERTICAL}`,
+    `mtrl-time-picker-dialog--${config.format || TIME_FORMAT.AMPM}`
+  ].join(' ');
+  // Append dialog to modal
+  modalElement.appendChild(dialogElement);
+  // Append modal to document body
+  document.body.appendChild(modalElement);
+  // Parse initial time value or use current time
+  let timeValue: TimeValue;
+  if (config.value) {
+    const parts = config.value.split(':');
+    const hours = parseInt(parts[0], 10);
+    const minutes = parseInt(parts[1], 10);
+    const seconds = parts[2] ? parseInt(parts[2], 10) : 0;
+    timeValue = {
+      hours,
+      minutes,
+      seconds,
+      period: hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM
+    };
+  } else {
+    // Default to current time
+    const now = new Date();
+    timeValue = {
+      hours: now.getHours(),
+      minutes: now.getMinutes(),
+      seconds: config.showSeconds ? now.getSeconds() : 0,
+      period: now.getHours() >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM
+    };
+  }
+  // Track state
+  let isOpen = !!config.isOpen;
+  let currentType = config.type || TIME_PICKER_TYPE.DIAL;
+  let currentFormat = config.format || TIME_FORMAT.AMPM;
+  let currentOrientation = config.orientation || TIME_PICKER_ORIENTATION.VERTICAL;
+  let currentTitle = config.title || '';
+  // Event handlers
+  const eventHandlers: Record<string, Function[]> = {};
+  // Update modal visibility based on isOpen state
+  const updateVisibility = () => {
+    modalElement.style.display = isOpen ? 'block' : 'none';
+    if (isOpen) {
+      modalElement.classList.add('active');
+      dialogElement.classList.add('active');
+      element.classList.add('mtrl-time-picker--open');
+    } else {
+      modalElement.classList.remove('active');
+      dialogElement.classList.remove('active');
+      element.classList.remove('mtrl-time-picker--open');
+    }
+  };
+  // Set initial visibility
+  updateVisibility();
+  // Format the time value as a string
+  const formatTimeValue = (): string => {
+    const { hours, minutes, seconds } = timeValue;
+    const use24HourFormat = currentFormat === TIME_FORMAT.MILITARY;
+    // Helper function to pad numbers with leading zeros
+    const padZero = (num: number): string => {
+      return num.toString().padStart(2, '0');
+    };
+    if (use24HourFormat) {
+      if (config.showSeconds) {
+        return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds || 0)}`;
+      }
+      return `${padZero(hours)}:${padZero(minutes)}`;
+    } else {
+      // Convert to 12-hour format for display
+      let displayHours = hours % 12;
+      if (displayHours === 0) {
+        displayHours = 12;
+      }
+      if (config.showSeconds) {
+        return `${padZero(displayHours)}:${padZero(minutes)}:${padZero(seconds || 0)} ${timeValue.period}`;
+      }
+      return `${padZero(displayHours)}:${padZero(minutes)} ${timeValue.period}`;
+    }
+  };
+  // Emit event helper
+  const emitEvent = (eventName: string, data?: any) => {
+    if (eventHandlers[eventName]) {
+      eventHandlers[eventName].forEach(handler => {
+        handler(data);
+      });
+    }
+    // Call appropriate callback if provided
+    switch (eventName) {
+      case 'change':
+        if (config.onChange) config.onChange(formatTimeValue());
+        break;
+      case 'open':
+        if (config.onOpen) config.onOpen();
+        break;
+      case 'close':
+        if (config.onClose) config.onClose();
+        break;
+      case 'confirm':
+        if (config.onConfirm) config.onConfirm(formatTimeValue());
+        break;
+      case 'cancel':
+        if (config.onCancel) config.onCancel();
+        break;
+    }
+  };
+  const timePickerObj = {
+    element,
+    modalElement,
+    dialogElement,
+    isOpen,
+    open() {
+      if (isOpen) return this;
+      isOpen = true;
+      this.isOpen = true; // Update the public property too
+      updateVisibility();
+      emitEvent('open');
+      return this;
+    },
+    close() {
+      if (!isOpen) return this;
+      isOpen = false;
+      this.isOpen = false; // Update the public property too
+      updateVisibility();
+      emitEvent('close');
+      return this;
+    },
+    toggle() {
+      return isOpen ? this.close() : this.open();
+    },
+    getValue() {
+      return formatTimeValue();
+    },
+    getTimeObject() {
+      return { ...timeValue };
+    },
+    setValue(time: string) {
+      try {
+        const parts = time.split(':');
+        const hours = parseInt(parts[0], 10);
+        const minutes = parseInt(parts[1], 10);
+        const seconds = parts[2] ? parseInt(parts[2], 10) : 0;
+        if (
+          isNaN(hours) || hours < 0 || hours > 23 ||
+          isNaN(minutes) || minutes < 0 || minutes > 59 ||
+          isNaN(seconds) || seconds < 0 || seconds > 59
+        ) {
+          throw new Error('Invalid time format');
+        }
+        timeValue = {
+          hours,
+          minutes,
+          seconds,
+          period: hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM
+        };
+        emitEvent('change', formatTimeValue());
+      } catch (error) {
+        console.error('Error setting time value:', error);
+      }
+      return this;
+    },
+    setType(type: TIME_PICKER_TYPE) {
+      if (currentType === type) return this;
+      // Update class
+      dialogElement.classList.remove(`mtrl-time-picker-dialog--${currentType}`);
+      dialogElement.classList.add(`mtrl-time-picker-dialog--${type}`);
+      currentType = type;
+      return this;
+    },
+    getType() {
+      return currentType;
+    },
+    setFormat(format: TIME_FORMAT) {
+      if (currentFormat === format) return this;
+      // Update class
+      dialogElement.classList.remove(`mtrl-time-picker-dialog--${currentFormat}`);
+      dialogElement.classList.add(`mtrl-time-picker-dialog--${format}`);
+      currentFormat = format;
+      emitEvent('change', formatTimeValue());
+      return this;
+    },
+    getFormat() {
+      return currentFormat;
+    },
+    setOrientation(orientation: TIME_PICKER_ORIENTATION) {
+      if (currentOrientation === orientation) return this;
+      // Update class
+      dialogElement.classList.remove(`mtrl-time-picker-dialog--${currentOrientation}`);
+      dialogElement.classList.add(`mtrl-time-picker-dialog--${orientation}`);
+      currentOrientation = orientation;
+      return this;
+    },
+    getOrientation() {
+      return currentOrientation;
+    },
+    setTitle(title: string) {
+      currentTitle = title;
+      // If there's a title element, update it
+      const titleElement = dialogElement.querySelector('.mtrl-time-picker-title');
+      if (titleElement) {
+        titleElement.textContent = title;
+      }
+      return this;
+    },
+    getTitle() {
+      return currentTitle;
+    },
+    destroy() {
+      // Close if open
+      if (isOpen) {
+        this.close();
+      }
+      // Remove from DOM
+      if (modalElement.parentNode) {
+        modalElement.parentNode.removeChild(modalElement);
+      }
+      // Clean up event handlers
+      Object.keys(eventHandlers).forEach(event => {
+        eventHandlers[event] = [];
+      });
+    },
+    on(event: string, handler: Function) {
+      if (!eventHandlers[event]) {
+        eventHandlers[event] = [];
+      }
+      eventHandlers[event].push(handler);
+      return this;
+    },
+    off(event: string, handler: Function) {
+      if (eventHandlers[event]) {
+        eventHandlers[event] = eventHandlers[event].filter(h => h !== handler);
+      }
+      return this;
+    }
+  };
+  return timePickerObj;
+};
+describe('TimePicker Component', () => {
+  test('should create a time picker component', () => {
+    const timePicker = createMockTimePicker();
+    expect(timePicker.element).toBeDefined();
+    expect(timePicker.modalElement).toBeDefined();
+    expect(timePicker.dialogElement).toBeDefined();
+    expect(timePicker.isOpen).toBe(false);
+  });
+  test('should initialize with custom time value', () => {
+    const timePicker = createMockTimePicker({
+      value: '14:30'
+    });
+    expect(timePicker.getValue()).toBe('02:30 PM');
+    const timeObject = timePicker.getTimeObject();
+    expect(timeObject.hours).toBe(14);
+    expect(timeObject.minutes).toBe(30);
+    expect(timeObject.period).toBe(TIME_PERIOD.PM);
+  });
+  test('should initialize in 24-hour format', () => {
+    const timePicker = createMockTimePicker({
+      value: '14:30',
+      format: TIME_FORMAT.MILITARY
+    });
+    expect(timePicker.getValue()).toBe('14:30');
+    const timeObject = timePicker.getTimeObject();
+    expect(timeObject.hours).toBe(14);
+    expect(timeObject.minutes).toBe(30);
+  });
+  test('should toggle open/close state', () => {
+    const timePicker = createMockTimePicker();
+    // Initial state is closed
+    expect(timePicker.isOpen).toBe(false);
+    expect(timePicker.modalElement.style.display).toBe('none');
+    // Open the time picker
+    timePicker.open();
+    expect(timePicker.isOpen).toBe(true);
+    expect(timePicker.modalElement.style.display).toBe('block');
+    expect(timePicker.modalElement.classList.contains('active')).toBe(true);
+    // Close the time picker
+    timePicker.close();
+    expect(timePicker.isOpen).toBe(false);
+    expect(timePicker.modalElement.classList.contains('active')).toBe(false);
+    // Toggle should open it again
+    timePicker.toggle();
+    expect(timePicker.isOpen).toBe(true);
+    // Toggle again should close it
+    timePicker.toggle();
+    expect(timePicker.isOpen).toBe(false);
+  });
+  test('should set and get time values', () => {
+    const timePicker = createMockTimePicker();
+    // Set a new time
+    timePicker.setValue('09:45');
+    expect(timePicker.getValue()).toBe('09:45 AM');
+    const timeObject = timePicker.getTimeObject();
+    expect(timeObject.hours).toBe(9);
+    expect(timeObject.minutes).toBe(45);
+    expect(timeObject.period).toBe(TIME_PERIOD.AM);
+    // Set an afternoon time
+    timePicker.setValue('16:20');
+    expect(timePicker.getValue()).toBe('04:20 PM');
+    const pmTimeObject = timePicker.getTimeObject();
+    expect(pmTimeObject.hours).toBe(16);
+    expect(pmTimeObject.minutes).toBe(20);
+    expect(pmTimeObject.period).toBe(TIME_PERIOD.PM);
+  });
+  test('should change time picker type', () => {
+    const timePicker = createMockTimePicker({
+      type: TIME_PICKER_TYPE.DIAL
+    });
+    expect(timePicker.getType()).toBe(TIME_PICKER_TYPE.DIAL);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--dial')).toBe(true);
+    // Change to INPUT type
+    timePicker.setType(TIME_PICKER_TYPE.INPUT);
+    expect(timePicker.getType()).toBe(TIME_PICKER_TYPE.INPUT);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--input')).toBe(true);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--dial')).toBe(false);
+  });
+  test('should change time format', () => {
+    const timePicker = createMockTimePicker({
+      value: '14:30',
+      format: TIME_FORMAT.AMPM
+    });
+    expect(timePicker.getFormat()).toBe(TIME_FORMAT.AMPM);
+    expect(timePicker.getValue()).toBe('02:30 PM');
+    // Change to 24-hour format
+    timePicker.setFormat(TIME_FORMAT.MILITARY);
+    expect(timePicker.getFormat()).toBe(TIME_FORMAT.MILITARY);
+    expect(timePicker.getValue()).toBe('14:30');
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--24h')).toBe(true);
+  });
+  test('should change orientation', () => {
+    const timePicker = createMockTimePicker({
+      orientation: TIME_PICKER_ORIENTATION.VERTICAL
+    });
+    expect(timePicker.getOrientation()).toBe(TIME_PICKER_ORIENTATION.VERTICAL);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--vertical')).toBe(true);
+    // Change to horizontal orientation
+    timePicker.setOrientation(TIME_PICKER_ORIENTATION.HORIZONTAL);
+    expect(timePicker.getOrientation()).toBe(TIME_PICKER_ORIENTATION.HORIZONTAL);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--horizontal')).toBe(true);
+    expect(timePicker.dialogElement.classList.contains('mtrl-time-picker-dialog--vertical')).toBe(false);
+  });
+  test('should set and get title', () => {
+    const initialTitle = 'Select Time';
+    const timePicker = createMockTimePicker({
+      title: initialTitle
+    });
+    expect(timePicker.getTitle()).toBe(initialTitle);
+    // Update the title
+    const newTitle = 'Choose Departure Time';
+    timePicker.setTitle(newTitle);
+    expect(timePicker.getTitle()).toBe(newTitle);
+  });
+  test('should handle event callbacks', () => {
+    const changeHandler = mock(() => {});
+    const openHandler = mock(() => {});
+    const closeHandler = mock(() => {});
+    const timePicker = createMockTimePicker();
+    // Register event handlers
+    timePicker.on('change', changeHandler);
+    timePicker.on('open', openHandler);
+    timePicker.on('close', closeHandler);
+    // Trigger events
+    timePicker.open();
+    expect(openHandler).toHaveBeenCalled();
+    timePicker.setValue('10:15');
+    expect(changeHandler).toHaveBeenCalled();
+    timePicker.close();
+    expect(closeHandler).toHaveBeenCalled();
+    // Remove an event handler
+    timePicker.off('change', changeHandler);
+    changeHandler.mockClear();
+    // The handler should no longer be called
+    timePicker.setValue('11:30');
+    expect(changeHandler).not.toHaveBeenCalled();
+  });
+  test('should trigger config callbacks', () => {
+    const onChangeMock = mock(() => {});
+    const onOpenMock = mock(() => {});
+    const onCloseMock = mock(() => {});
+    const timePicker = createMockTimePicker({
+      onChange: onChangeMock,
+      onOpen: onOpenMock,
+      onClose: onCloseMock
+    });
+    // Trigger events
+    timePicker.open();
+    expect(onOpenMock).toHaveBeenCalled();
+    timePicker.setValue('09:30');
+    expect(onChangeMock).toHaveBeenCalledWith('09:30 AM');
+    timePicker.close();
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+  test('should handle time with seconds when showSeconds is true', () => {
+    const timePicker = createMockTimePicker({
+      value: '14:30:45',
+      showSeconds: true
+    });
+    expect(timePicker.getValue()).toBe('02:30:45 PM');
+    const timeObject = timePicker.getTimeObject();
+    expect(timeObject.hours).toBe(14);
+    expect(timeObject.minutes).toBe(30);
+    expect(timeObject.seconds).toBe(45);
+    // Update time with seconds
+    timePicker.setValue('08:15:30');
+    expect(timePicker.getValue()).toBe('08:15:30 AM');
+  });
+  test('should cleanup properly when destroyed', () => {
+    const timePicker = createMockTimePicker();
+    const modalElement = timePicker.modalElement;
+    // Add to document
+    document.body.appendChild(timePicker.element);
+    // Verify modal is in the document
+    expect(document.body.contains(modalElement)).toBe(true);
+    // Destroy the component
+    timePicker.destroy();
+    // Verify modal was removed
+    expect(document.body.contains(modalElement)).toBe(false);
+  });
+});