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

mtrl 0.3.1 → 0.3.3

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 (162) hide show

package/.env +15 -0
package/CONTRIBUTING.md +62 -23
package/DOCS.md +3 -3
package/README.md +43 -20
package/TESTING.md +128 -18
package/dist/index.js +14865 -0
package/git-user-stats.js +545 -0
package/index.ts +9 -67
package/package.json +8 -3
package/src/components/badge/api.ts +15 -1
package/src/components/badge/badge.ts +43 -4
package/src/components/badge/config.ts +40 -8
package/src/components/badge/index.ts +64 -3
package/src/components/badge/types.ts +175 -33
package/src/components/button/api.ts +63 -1
package/src/components/button/button.ts +39 -3
package/src/components/button/config.ts +21 -4
package/src/components/button/index.ts +26 -1
package/src/components/button/types.ts +7 -1
package/src/components/card/api.ts +78 -9
package/src/components/card/card.ts +58 -3
package/src/components/card/config.ts +41 -11
package/src/components/card/features.ts +39 -12
package/src/components/card/index.ts +84 -19
package/src/components/card/types.ts +218 -29
package/src/components/carousel/carousel.ts +92 -28
package/src/components/carousel/constants.ts +107 -21
package/src/components/carousel/index.ts +31 -13
package/src/components/checkbox/checkbox.ts +83 -16
package/src/components/checkbox/index.ts +43 -1
package/src/components/checkbox/types.ts +219 -32
package/src/components/chips/api.ts +194 -0
package/src/components/{chip → chips/chip}/api.ts +42 -2
package/src/components/chips/chip/chip.ts +131 -0
package/src/components/{chip → chips/chip}/config.ts +3 -3
package/src/components/chips/chip/index.ts +3 -0
package/src/components/chips/chips.md +481 -0
package/src/components/chips/chips.ts +75 -0
package/src/components/chips/config.ts +109 -0
package/src/components/chips/constants.ts +61 -0
package/src/components/chips/features/chip-items.ts +33 -0
package/src/components/chips/features/container.ts +77 -0
package/src/components/chips/features/controller.ts +448 -0
package/src/components/chips/features/index.ts +5 -0
package/src/components/chips/features/label.ts +108 -0
package/src/components/chips/index.ts +11 -0
package/src/components/chips/schema.ts +61 -0
package/src/components/{chip → chips}/types.ts +203 -92
package/src/components/dialog/dialog.ts +99 -16
package/src/components/dialog/index.ts +97 -1
package/src/components/dialog/types.ts +375 -69
package/src/components/divider/config.ts +90 -6
package/src/components/divider/divider.ts +32 -2
package/src/components/divider/features.ts +26 -0
package/src/components/divider/index.ts +30 -0
package/src/components/divider/types.ts +86 -9
package/src/components/extended-fab/api.ts +53 -1
package/src/components/extended-fab/config.ts +29 -1
package/src/components/extended-fab/extended-fab.ts +28 -0
package/src/components/extended-fab/index.ts +36 -0
package/src/components/extended-fab/types.ts +458 -13
package/src/components/fab/api.ts +42 -2
package/src/components/fab/config.ts +29 -1
package/src/components/fab/fab.ts +16 -2
package/src/components/fab/index.ts +35 -0
package/src/components/fab/types.ts +374 -10
package/src/components/list/api.ts +12 -2
package/src/components/list/config.ts +21 -0
package/src/components/list/features.ts +6 -0
package/src/components/list/index.ts +56 -1
package/src/components/list/list-item.ts +46 -2
package/src/components/list/list.ts +73 -2
package/src/components/list/types.ts +172 -0
package/src/components/list/utils.ts +26 -2
package/src/components/menu/api.ts +217 -20
package/src/components/menu/config.ts +27 -0
package/src/components/menu/features/visibility.ts +55 -6
package/src/components/menu/index.ts +64 -0
package/src/components/menu/menu-item.ts +46 -3
package/src/components/menu/menu.ts +77 -1
package/src/components/menu/types.ts +404 -39
package/src/components/navigation/nav-item.ts +13 -2
package/src/components/sheet/config.ts +1 -2
package/src/components/sheet/features/gestures.ts +1 -1
package/src/components/sheet/features/position.ts +1 -2
package/src/components/sheet/features/state.ts +1 -1
package/src/components/sheet/index.ts +10 -2
package/src/components/sheet/sheet.ts +1 -2
package/src/components/sheet/types.ts +29 -1
package/src/components/slider/api.ts +1 -1
package/src/components/slider/config.ts +1 -1
package/src/components/slider/features/controller.ts +1 -1
package/src/components/slider/features/handlers.ts +1 -1
package/src/components/slider/features/states.ts +1 -1
package/src/components/slider/index.ts +12 -5
package/src/components/slider/schema.ts +1 -1
package/src/components/slider/types.ts +31 -0
package/src/components/tabs/tab-api.ts +1 -1
package/src/components/tabs/types.ts +1 -1
package/src/components/tooltip/api.ts +6 -2
package/src/components/tooltip/config.ts +9 -28
package/src/components/tooltip/index.ts +10 -1
package/src/components/tooltip/types.ts +38 -3
package/src/core/dom/create.ts +57 -51
package/src/index.ts +129 -31
package/src/styles/abstract/_mixins.scss +23 -9
package/src/styles/abstract/_variables.scss +14 -4
package/src/styles/components/_card.scss +1 -1
package/src/styles/components/_chip.scss +323 -113
package/src/styles/components/_tabs.scss +1 -1
package/src/styles/themes/_autumn.scss +3 -0
package/CLAUDE.md +0 -33
package/src/components/checkbox/constants.ts +0 -37
package/src/components/chip/chip-set.ts +0 -225
package/src/components/chip/chip.ts +0 -118
package/src/components/chip/constants.ts +0 -28
package/src/components/chip/index.ts +0 -12
package/src/components/list/constants.ts +0 -116
package/src/components/sheet/constants.ts +0 -20
package/src/components/slider/constants.ts +0 -32
package/src/components/tooltip/constants.ts +0 -27
package/test/components/badge.test.ts +0 -545
package/test/components/bottom-app-bar.test.ts +0 -303
package/test/components/button.test.ts +0 -233
package/test/components/card.test.ts +0 -560
package/test/components/carousel.test.ts +0 -951
package/test/components/checkbox.test.ts +0 -462
package/test/components/chip.test.ts +0 -692
package/test/components/datepicker.test.ts +0 -1124
package/test/components/dialog.test.ts +0 -990
package/test/components/divider.test.ts +0 -412
package/test/components/extended-fab.test.ts +0 -672
package/test/components/fab.test.ts +0 -561
package/test/components/list.test.ts +0 -365
package/test/components/menu.test.ts +0 -718
package/test/components/navigation.test.ts +0 -186
package/test/components/progress.test.ts +0 -567
package/test/components/radios.test.ts +0 -699
package/test/components/search.test.ts +0 -1135
package/test/components/segmented-button.test.ts +0 -732
package/test/components/sheet.test.ts +0 -641
package/test/components/slider.test.ts +0 -1220
package/test/components/snackbar.test.ts +0 -461
package/test/components/switch.test.ts +0 -452
package/test/components/tabs.test.ts +0 -1369
package/test/components/textfield.test.ts +0 -400
package/test/components/timepicker.test.ts +0 -592
package/test/components/tooltip.test.ts +0 -630
package/test/components/top-app-bar.test.ts +0 -566
package/test/core/dom.attributes.test.ts +0 -148
package/test/core/dom.classes.test.ts +0 -152
package/test/core/dom.events.test.ts +0 -243
package/test/core/emitter.test.ts +0 -141
package/test/core/ripple.test.ts +0 -99
package/test/core/state.store.test.ts +0 -189
package/test/core/utils.normalize.test.ts +0 -61
package/test/core/utils.object.test.ts +0 -120
package/test/setup.js +0 -371
package/test/setup.ts +0 -451
package/tsconfig.json +0 -22
package/typedoc.json +0 -28
package/typedoc.simple.json +0 -14

package/test/components/switch.test.ts DELETED Viewed

@@ -1,452 +0,0 @@
-// test/components/switch.test.ts
-import { describe, test, expect, mock } from 'bun:test';
-import { JSDOM } from 'jsdom';
-// Set up JSDOM
-const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
-global.document = dom.window.document;
-global.window = dom.window;
-global.Element = dom.window.Element;
-global.HTMLElement = dom.window.HTMLElement;
-global.Event = dom.window.Event;
-global.CustomEvent = dom.window.CustomEvent;
-// Import types directly to avoid circular dependencies
-import type {
-  SwitchComponent,
-  SwitchConfig,
-  SwitchLabelPosition
-} from '../../src/components/switch/types';
-// Define constants here to avoid circular dependencies
-const SWITCH_LABEL_POSITION = {
-  START: 'start',
-  END: 'end'
-} as const;
-// Create a mock switch implementation
-const createMockSwitch = (config: SwitchConfig = {}): SwitchComponent => {
-  // Default configuration
-  const defaultConfig: SwitchConfig = {
-    label: '',
-    labelPosition: 'end',
-    checked: false,
-    disabled: false,
-    required: false,
-    prefix: 'mtrl',
-    componentName: 'switch'
-  };
-  // Merge with user configuration
-  const mergedConfig = {
-    ...defaultConfig,
-    ...config
-  };
-  // Create main element
-  const element = document.createElement('div');
-  element.className = `${mergedConfig.prefix}-switch`;
-  // Add custom class if provided
-  if (mergedConfig.class) {
-    element.className += ` ${mergedConfig.class}`;
-  }
-  // Create input element
-  const input = document.createElement('input');
-  input.type = 'checkbox';
-  input.className = `${mergedConfig.prefix}-switch-input`;
-  input.checked = Boolean(mergedConfig.checked);
-  input.disabled = Boolean(mergedConfig.disabled);
-  input.required = Boolean(mergedConfig.required);
-  if (mergedConfig.name) {
-    input.name = mergedConfig.name;
-  }
-  if (mergedConfig.value) {
-    input.value = mergedConfig.value;
-  }
-  // Create track element
-  const track = document.createElement('div');
-  track.className = `${mergedConfig.prefix}-switch-track`;
-  // Create thumb element
-  const thumb = document.createElement('div');
-  thumb.className = `${mergedConfig.prefix}-switch-thumb`;
-  track.appendChild(thumb);
-  // Create label if provided
-  let labelElement: HTMLLabelElement | null = null;
-  if (mergedConfig.label) {
-    labelElement = document.createElement('label');
-    labelElement.className = `${mergedConfig.prefix}-switch-label`;
-    labelElement.textContent = mergedConfig.label;
-    // Position the label appropriately
-    if (mergedConfig.labelPosition) {
-      element.classList.add(`${mergedConfig.prefix}-switch--label-${mergedConfig.labelPosition}`);
-    }
-  }
-  // Add elements to main element
-  if (labelElement && mergedConfig.labelPosition === 'start') {
-    element.appendChild(labelElement);
-  }
-  element.appendChild(input);
-  element.appendChild(track);
-  if (labelElement && mergedConfig.labelPosition !== 'start') {
-    element.appendChild(labelElement);
-  }
-  // Create supporting text element if provided
-  let supportingTextElement: HTMLElement | null = null;
-  if (mergedConfig.supportingText) {
-    supportingTextElement = document.createElement('div');
-    supportingTextElement.className = `${mergedConfig.prefix}-switch-helper`;
-    supportingTextElement.textContent = mergedConfig.supportingText;
-    if (mergedConfig.error) {
-      supportingTextElement.classList.add(`${mergedConfig.prefix}-switch-helper--error`);
-      element.classList.add(`${mergedConfig.prefix}-switch--error`);
-    }
-    element.appendChild(supportingTextElement);
-  }
-  // Event handlers
-  const eventHandlers: Record<string, Function[]> = {};
-  // Create the label manager
-  const label = {
-    setText: (text: string) => {
-      if (labelElement) {
-        labelElement.textContent = text;
-      }
-      mergedConfig.label = text;
-      return label;
-    },
-    getText: () => {
-      if (labelElement) {
-        return labelElement.textContent || '';
-      }
-      return mergedConfig.label || '';
-    },
-    getElement: () => {
-      return labelElement as HTMLElement;
-    }
-  };
-  // Create the switch instance
-  const switchComp: SwitchComponent = {
-    element,
-    input,
-    config: mergedConfig,
-    supportingTextElement,
-    getValue: () => input.value,
-    setValue: (value: string) => {
-      input.value = value;
-      return switchComp;
-    },
-    check: () => {
-      input.checked = true;
-      return switchComp;
-    },
-    uncheck: () => {
-      input.checked = false;
-      return switchComp;
-    },
-    toggle: () => {
-      input.checked = !input.checked;
-      return switchComp;
-    },
-    isChecked: () => input.checked,
-    setLabel: (text: string) => {
-      mergedConfig.label = text;
-      if (labelElement) {
-        labelElement.textContent = text;
-      } else if (text) {
-        labelElement = document.createElement('label');
-        labelElement.className = `${mergedConfig.prefix}-switch-label`;
-        labelElement.textContent = text;
-        element.appendChild(labelElement);
-      }
-      return switchComp;
-    },
-    getLabel: () => {
-      if (labelElement) {
-        return labelElement.textContent || '';
-      }
-      return '';
-    },
-    setSupportingText: (text: string, isError = false) => {
-      if (!supportingTextElement) {
-        supportingTextElement = document.createElement('div');
-        supportingTextElement.className = `${mergedConfig.prefix}-switch-helper`;
-        element.appendChild(supportingTextElement);
-      }
-      supportingTextElement.textContent = text;
-      supportingTextElement.classList.toggle(`${mergedConfig.prefix}-switch-helper--error`, isError);
-      element.classList.toggle(`${mergedConfig.prefix}-switch--error`, isError);
-      return switchComp;
-    },
-    removeSupportingText: () => {
-      if (supportingTextElement && supportingTextElement.parentNode) {
-        supportingTextElement.remove();
-        supportingTextElement = null;
-      }
-      return switchComp;
-    },
-    on: (event: string, handler: Function) => {
-      if (!eventHandlers[event]) {
-        eventHandlers[event] = [];
-      }
-      eventHandlers[event].push(handler);
-      return switchComp;
-    },
-    off: (event: string, handler: Function) => {
-      if (!eventHandlers[event]) return switchComp;
-      eventHandlers[event] = eventHandlers[event].filter(h => h !== handler);
-      return switchComp;
-    },
-    emit: (event: string, data: any = {}) => {
-      if (!eventHandlers[event]) return;
-      eventHandlers[event].forEach(handler => handler(data));
-    },
-    enable: () => {
-      input.disabled = false;
-      element.classList.remove(`${mergedConfig.prefix}-switch--disabled`);
-      return switchComp;
-    },
-    disable: () => {
-      input.disabled = true;
-      element.classList.add(`${mergedConfig.prefix}-switch--disabled`);
-      return switchComp;
-    },
-    destroy: () => {
-      // Clear event handlers
-      Object.keys(eventHandlers).forEach(key => {
-        eventHandlers[key] = [];
-      });
-      // Remove from DOM if attached
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    }
-  };
-  return switchComp;
-};
-describe('Switch Component', () => {
-  test('should create a switch element', () => {
-    const switchComp = createMockSwitch();
-    expect(switchComp.element).toBeDefined();
-    expect(switchComp.element.tagName).toBe('DIV');
-    expect(switchComp.element.className).toContain('mtrl-switch');
-  });
-  test('should create input element with type checkbox', () => {
-    const switchComp = createMockSwitch();
-    // Check for input through direct property
-    expect(switchComp.input).toBeDefined();
-    expect(switchComp.input.type).toBe('checkbox');
-  });
-  test('should apply custom class', () => {
-    const customClass = 'custom-switch';
-    const switchComp = createMockSwitch({
-      class: customClass
-    });
-    expect(switchComp.element.className).toContain(customClass);
-  });
-  test('should add label content through config', () => {
-    const labelText = 'Toggle me';
-    const switchComp = createMockSwitch({
-      label: labelText
-    });
-    // Check config has label
-    expect(switchComp.config.label).toBe(labelText);
-  });
-  test('should position label correctly', () => {
-    // Test if the configuration is stored correctly
-    const startPos = SWITCH_LABEL_POSITION.START;
-    const startSwitch = createMockSwitch({
-      label: 'Label at Start',
-      labelPosition: startPos
-    });
-    // Check label position in config
-    expect(startSwitch.config.labelPosition).toBe(startPos);
-    // Check class is applied
-    expect(startSwitch.element.className).toContain('mtrl-switch--label-start');
-    // Default position (end)
-    const endSwitch = createMockSwitch({
-      label: 'Label at End'
-    });
-    expect(endSwitch.element.className).toContain('mtrl-switch--label-end');
-  });
-  test('should handle change events', () => {
-    const switchComp = createMockSwitch();
-    const handleChange = mock(() => {});
-    // Check if the event handler is registered
-    switchComp.on('change', handleChange);
-    // Simulate change by calling the emit method if it exists
-    if (switchComp.emit) {
-      switchComp.emit('change', {});
-      expect(handleChange).toHaveBeenCalled();
-    }
-  });
-  test('should support disabled state', () => {
-    const switchComp = createMockSwitch();
-    // Check API methods
-    expect(typeof switchComp.disable).toBe('function');
-    expect(typeof switchComp.enable).toBe('function');
-    // Test the API methods without making assumptions about implementation
-    switchComp.disable();
-    switchComp.enable();
-    // Test initially disabled through config
-    const disabledSwitch = createMockSwitch({ disabled: true });
-    expect(disabledSwitch.config.disabled).toBe(true);
-  });
-  test('should support checked state', () => {
-    // Check API methods
-    const switchComp = createMockSwitch();
-    expect(typeof switchComp.check).toBe('function');
-    expect(typeof switchComp.uncheck).toBe('function');
-    expect(typeof switchComp.toggle).toBe('function');
-    // Initial unchecked state
-    const uncheckedSwitch = createMockSwitch();
-    expect(uncheckedSwitch.config.checked).toBeFalsy();
-    // Initial checked state
-    const checkedSwitch = createMockSwitch({ checked: true });
-    expect(checkedSwitch.config.checked).toBe(true);
-    // Verify methods execute without errors
-    switchComp.check();
-    switchComp.uncheck();
-    switchComp.toggle();
-  });
-  test('should set name attribute correctly', () => {
-    const name = 'theme-toggle';
-    const switchComp = createMockSwitch({ name });
-    // Check config
-    expect(switchComp.config.name).toBe(name);
-  });
-  test('should set value attribute correctly', () => {
-    const value = 'dark-mode';
-    const switchComp = createMockSwitch({ value });
-    // Check config
-    expect(switchComp.config.value).toBe(value);
-  });
-  test('should set required attribute correctly', () => {
-    const switchComp = createMockSwitch({ required: true });
-    // Check config
-    expect(switchComp.config.required).toBe(true);
-  });
-  test('should allow updating label', () => {
-    const initialLabel = 'Initial Label';
-    const switchComp = createMockSwitch({
-      label: initialLabel
-    });
-    // Check initial label in config
-    expect(switchComp.config.label).toBe(initialLabel);
-    // Check setLabel method exists
-    expect(typeof switchComp.setLabel).toBe('function');
-    // Update label
-    const newLabel = 'Updated Label';
-    switchComp.setLabel(newLabel);
-    // Check if label was updated
-    expect(switchComp.getLabel()).toBe(newLabel);
-  });
-  test('should include track and thumb elements', () => {
-    const switchComp = createMockSwitch();
-    // Check for track - it might be directly accessible or through the DOM
-    const hasTrack = switchComp.element.querySelector('.mtrl-switch-track') !== null;
-    expect(hasTrack).toBe(true);
-  });
-  test('should have value getter and setter', () => {
-    const switchComp = createMockSwitch();
-    // Check API methods
-    expect(typeof switchComp.getValue).toBe('function');
-    expect(typeof switchComp.setValue).toBe('function');
-    // Set a value
-    const testValue = 'test-value';
-    switchComp.setValue(testValue);
-    // Check value
-    expect(switchComp.getValue()).toBe(testValue);
-  });
-  test('should properly clean up resources', () => {
-    const switchComp = createMockSwitch();
-    const parentElement = document.createElement('div');
-    parentElement.appendChild(switchComp.element);
-    // Destroy should remove the element and clean up resources
-    switchComp.destroy();
-    expect(parentElement.children.length).toBe(0);
-  });
-});