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/checkbox.test.ts DELETED Viewed

@@ -1,462 +0,0 @@
-// test/components/checkbox.test.ts
-import { describe, test, expect, mock, beforeAll, afterAll } from 'bun:test';
-import { JSDOM } from 'jsdom';
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from '../../src/components/checkbox/constants';
-// IMPORTANT: Due to potential circular dependencies in the actual checkbox component
-// we are using a mock implementation for tests. For a full implementation
-// with the actual component, see test/ts/components/checkbox.test.ts
-// 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.HTMLInputElement = window.HTMLInputElement;
-  global.Event = window.Event;
-});
-afterAll(() => {
-  // Restore original globals
-  global.document = originalGlobalDocument;
-  global.window = originalGlobalWindow;
-  // Clean up jsdom
-  window.close();
-});
-// Mock checkbox component factory
-const createCheckbox = (config: any = {}) => {
-  // Create main element
-  const element = document.createElement('div');
-  element.className = `mtrl-checkbox ${config.variant ? `mtrl-checkbox--${config.variant}` : ''}`;
-  if (config.class) {
-    element.className += ` ${config.class}`;
-  }
-  // Create input element
-  const input = document.createElement('input');
-  input.type = 'checkbox';
-  input.className = 'mtrl-checkbox-input';
-  if (config.name) {
-    input.name = config.name;
-  }
-  if (config.value) {
-    input.value = config.value;
-  }
-  if (config.checked) {
-    input.checked = true;
-    element.classList.add(`mtrl-checkbox--checked`);
-  }
-  if (config.required) {
-    input.required = true;
-  }
-  if (config.disabled) {
-    input.disabled = true;
-    element.classList.add(`mtrl-checkbox--disabled`);
-  }
-  element.appendChild(input);
-  // Create icon element
-  const icon = document.createElement('span');
-  icon.className = 'mtrl-checkbox-icon';
-  element.appendChild(icon);
-  // Create label if provided
-  let labelElement: HTMLLabelElement | null = null;
-  if (config.label) {
-    labelElement = document.createElement('label');
-    labelElement.className = 'mtrl-checkbox-label';
-    labelElement.textContent = config.label;
-    // Set label position
-    if (config.labelPosition === CHECKBOX_LABEL_POSITION.START) {
-      element.classList.add('mtrl-checkbox--label-start');
-      element.insertBefore(labelElement, element.firstChild);
-    } else {
-      element.classList.add('mtrl-checkbox--label-end');
-      element.appendChild(labelElement);
-    }
-  }
-  // Store event handlers
-  const eventHandlers: Record<string, Function[]> = {};
-  // Default configuration
-  const defaultConfig = {
-    variant: CHECKBOX_VARIANTS.FILLED,
-    labelPosition: CHECKBOX_LABEL_POSITION.END,
-    ...config
-  };
-  return {
-    element,
-    input,
-    config: defaultConfig,
-    getValue() {
-      return input.value;
-    },
-    setValue(value: string) {
-      input.value = value;
-      return this;
-    },
-    check() {
-      input.checked = true;
-      element.classList.add('mtrl-checkbox--checked');
-      return this;
-    },
-    uncheck() {
-      input.checked = false;
-      element.classList.remove('mtrl-checkbox--checked');
-      return this;
-    },
-    toggle() {
-      if (input.checked) {
-        this.uncheck();
-      } else {
-        this.check();
-      }
-      return this;
-    },
-    isChecked() {
-      return input.checked;
-    },
-    setIndeterminate(state: boolean) {
-      input.indeterminate = state;
-      if (state) {
-        element.classList.add('mtrl-checkbox--indeterminate');
-      } else {
-        element.classList.remove('mtrl-checkbox--indeterminate');
-      }
-      return this;
-    },
-    setLabel(text: string) {
-      this.config.label = text;
-      if (labelElement) {
-        labelElement.textContent = text;
-      } else if (text) {
-        labelElement = document.createElement('label');
-        labelElement.className = 'mtrl-checkbox-label';
-        labelElement.textContent = text;
-        element.appendChild(labelElement);
-      }
-      return this;
-    },
-    getLabel() {
-      return this.config.label || '';
-    },
-    enable() {
-      input.disabled = false;
-      element.classList.remove('mtrl-checkbox--disabled');
-      return this;
-    },
-    disable() {
-      input.disabled = true;
-      element.classList.add('mtrl-checkbox--disabled');
-      return this;
-    },
-    on(event: string, handler: Function) {
-      if (!eventHandlers[event]) {
-        eventHandlers[event] = [];
-      }
-      eventHandlers[event].push(handler);
-      if (event === 'change') {
-        input.addEventListener('change', handler as EventListener);
-      } else {
-        element.addEventListener(event, handler as EventListener);
-      }
-      return this;
-    },
-    off(event: string, handler: Function) {
-      if (eventHandlers[event]) {
-        eventHandlers[event] = eventHandlers[event].filter(h => h !== handler);
-      }
-      if (event === 'change') {
-        input.removeEventListener('change', handler as EventListener);
-      } else {
-        element.removeEventListener(event, handler as EventListener);
-      }
-      return this;
-    },
-    // For testing purposes - simulates emit method
-    emit(event: string, data: any) {
-      if (eventHandlers[event]) {
-        eventHandlers[event].forEach(handler => handler(data));
-      }
-    },
-    destroy() {
-      // Clean up event handlers
-      Object.entries(eventHandlers).forEach(([event, handlers]) => {
-        handlers.forEach(handler => {
-          if (event === 'change') {
-            input.removeEventListener(event, handler as EventListener);
-          } else {
-            element.removeEventListener(event, handler as EventListener);
-          }
-        });
-      });
-      // Remove from DOM
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    }
-  };
-};
-describe('Checkbox Component', () => {
-  test('should create a checkbox element', () => {
-    const checkbox = createCheckbox();
-    expect(checkbox.element).toBeDefined();
-    expect(checkbox.element.tagName).toBe('DIV');
-    expect(checkbox.element.className).toContain('mtrl-checkbox');
-  });
-  test('should create input element with type checkbox', () => {
-    const checkbox = createCheckbox();
-    const input = checkbox.input;
-    expect(input).toBeDefined();
-    expect(input.type).toBe('checkbox');
-  });
-  test('should add label content', () => {
-    const labelText = 'Accept terms';
-    const checkbox = createCheckbox({
-      label: labelText
-    });
-    expect(checkbox.config.label).toBe(labelText);
-  });
-  test('should apply variant class', () => {
-    const variant = CHECKBOX_VARIANTS.FILLED;
-    const checkbox = createCheckbox({
-      variant
-    });
-    expect(checkbox.config.variant).toBe(variant);
-  });
-  test('should use filled as default variant', () => {
-    const checkbox = createCheckbox();
-    expect(checkbox.config.variant).toBe(CHECKBOX_VARIANTS.FILLED);
-  });
-  test('should handle change events', () => {
-    const checkbox = createCheckbox();
-    const handleChange = mock(() => {});
-    checkbox.on('change', handleChange);
-    checkbox.emit('change', {});
-    expect(handleChange).toHaveBeenCalled();
-  });
-  test('should support disabled state', () => {
-    const checkbox = createCheckbox();
-    expect(typeof checkbox.disable).toBe('function');
-    expect(typeof checkbox.enable).toBe('function');
-    const initiallyEnabled = checkbox.element.hasAttribute('disabled') === false;
-    expect(initiallyEnabled).toBe(true);
-    checkbox.disable();
-    expect(checkbox.input.disabled).toBe(true);
-  });
-  test('should support checked state', () => {
-    const checkbox = createCheckbox();
-    expect(typeof checkbox.check).toBe('function');
-    expect(typeof checkbox.uncheck).toBe('function');
-    expect(typeof checkbox.toggle).toBe('function');
-    checkbox.check();
-    expect(checkbox.input.checked).toBe(true);
-    checkbox.uncheck();
-    expect(checkbox.input.checked).toBe(false);
-    checkbox.toggle();
-    expect(checkbox.input.checked).toBe(true);
-    const checkedCheckbox = createCheckbox({ checked: true });
-    expect(checkedCheckbox.config.checked).toBe(true);
-    expect(checkedCheckbox.input.checked).toBe(true);
-  });
-  test('should support indeterminate state', () => {
-    const checkbox = createCheckbox();
-    expect(typeof checkbox.setIndeterminate).toBe('function');
-    checkbox.setIndeterminate(true);
-    expect(checkbox.input.indeterminate).toBe(true);
-    checkbox.setIndeterminate(false);
-    expect(checkbox.input.indeterminate).toBe(false);
-  });
-  test('should set name attribute correctly', () => {
-    const name = 'terms';
-    const checkbox = createCheckbox({ name });
-    expect(checkbox.config.name).toBe(name);
-    expect(checkbox.input.name).toBe(name);
-  });
-  test('should set value attribute correctly', () => {
-    const value = 'accept';
-    const checkbox = createCheckbox({ value });
-    expect(checkbox.config.value).toBe(value);
-    expect(checkbox.input.value).toBe(value);
-  });
-  test('should set required attribute correctly', () => {
-    const checkbox = createCheckbox({ required: true });
-    expect(checkbox.config.required).toBe(true);
-    expect(checkbox.input.required).toBe(true);
-  });
-  test('should position label correctly', () => {
-    const startPos = CHECKBOX_LABEL_POSITION.START;
-    const startCheckbox = createCheckbox({
-      label: 'Start Label',
-      labelPosition: startPos
-    });
-    expect(startCheckbox.config.labelPosition).toBe(startPos);
-    expect(startCheckbox.element.classList.contains('mtrl-checkbox--label-start')).toBe(true);
-    const endPos = CHECKBOX_LABEL_POSITION.END;
-    const endCheckbox = createCheckbox({
-      label: 'End Label',
-      labelPosition: endPos
-    });
-    expect(endCheckbox.config.labelPosition).toBe(endPos);
-    expect(endCheckbox.element.classList.contains('mtrl-checkbox--label-end')).toBe(true);
-  });
-  test('should allow updating label', () => {
-    const initialLabel = 'Initial';
-    const checkbox = createCheckbox({
-      label: initialLabel
-    });
-    const initialLabelInConfig = checkbox.config.label;
-    expect(initialLabelInConfig).toBe(initialLabel);
-    const newLabel = 'Updated Label';
-    checkbox.setLabel(newLabel);
-    const labelElement = checkbox.element.querySelector('.mtrl-checkbox-label');
-    expect(labelElement?.textContent).toBe(newLabel);
-  });
-  test('should get label text correctly', () => {
-    const labelText = 'Test Label';
-    const checkbox = createCheckbox({
-      label: labelText
-    });
-    expect(checkbox.config.label).toBe(labelText);
-    expect(checkbox.getLabel()).toBe(labelText);
-  });
-  test('should get value correctly', () => {
-    const value = 'test-value';
-    const checkbox = createCheckbox({
-      value
-    });
-    expect(checkbox.config.value).toBe(value);
-    expect(checkbox.getValue()).toBe(value);
-  });
-  test('should set value correctly', () => {
-    const checkbox = createCheckbox();
-    const newValue = 'new-value';
-    checkbox.setValue(newValue);
-    expect(checkbox.input.value).toBe(newValue);
-  });
-  test('should include check icon', () => {
-    const checkbox = createCheckbox();
-    const iconElement = checkbox.element.querySelector('.mtrl-checkbox-icon');
-    expect(iconElement).toBeDefined();
-  });
-  test('should properly clean up resources', () => {
-    const checkbox = createCheckbox();
-    const parentElement = document.createElement('div');
-    parentElement.appendChild(checkbox.element);
-    checkbox.destroy();
-    expect(parentElement.children.length).toBe(0);
-  });
-  test('should apply custom class', () => {
-    const customClass = 'custom-checkbox';
-    const checkbox = createCheckbox({
-      class: customClass
-    });
-    expect(checkbox.element.className).toContain(customClass);
-  });
-});