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

@@ -1,400 +0,0 @@
-// test/components/textfield.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.HTMLInputElement = dom.window.HTMLInputElement;
-global.HTMLTextAreaElement = dom.window.HTMLTextAreaElement;
-global.Event = dom.window.Event;
-global.CustomEvent = dom.window.CustomEvent;
-// Import types directly to avoid circular dependencies
-import type {
-  TextfieldComponent,
-  TextfieldConfig,
-  TextfieldVariant,
-  TextfieldTypes,
-  TextfieldSize
-} from '../../src/components/textfield/types';
-// Define constants here to avoid circular dependencies
-const TEXTFIELD_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-const TEXTFIELD_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-} as const;
-const TEXTFIELD_TYPES = {
-  TEXT: 'text',
-  PASSWORD: 'password',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  TEL: 'tel',
-  URL: 'url',
-  SEARCH: 'search',
-  MULTILINE: 'multiline'
-} as const;
-// Create a mock textfield implementation
-const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
-  // Create base element
-  const element = document.createElement('div');
-  element.className = `mtrl-textfield ${config.class || ''}`;
-  // Add variant class if provided
-  if (config.variant) {
-    element.classList.add(`mtrl-textfield--${config.variant}`);
-  }
-  // Add size class if provided
-  if (config.size) {
-    element.classList.add(`mtrl-textfield--${config.size}`);
-  }
-  // Create input element
-  const input = document.createElement(config.type === TEXTFIELD_TYPES.MULTILINE ? 'textarea' : 'input') as HTMLInputElement | HTMLTextAreaElement;
-  input.className = 'mtrl-textfield-input';
-  if (input instanceof HTMLInputElement) {
-    input.type = config.type || TEXTFIELD_TYPES.TEXT;
-  }
-  input.value = config.value || '';
-  input.placeholder = config.placeholder || '';
-  if (config.name) input.name = config.name;
-  if (config.maxLength) input.maxLength = config.maxLength;
-  if (config.required) input.required = true;
-  if (config.disabled) input.disabled = true;
-  element.appendChild(input);
-  // Create label if provided
-  let label: HTMLLabelElement | null = null;
-  if (config.label) {
-    label = document.createElement('label');
-    label.className = 'mtrl-textfield-label';
-    label.textContent = config.label;
-    element.appendChild(label);
-  }
-  // Event handlers
-  const eventHandlers: Record<string, EventListener[]> = {};
-  // Create the textfield component instance
-  const textfield: TextfieldComponent = {
-    element,
-    input,
-    config,
-    getValue: () => input.value,
-    setValue: (value: string) => {
-      input.value = value || '';
-      return textfield;
-    },
-    setLabel: (text: string) => {
-      if (label) {
-        label.textContent = text;
-      }
-      return textfield;
-    },
-    getLabel: () => label?.textContent || '',
-    setAttribute: (name: string, value: string) => {
-      input.setAttribute(name, value);
-      return textfield;
-    },
-    getAttribute: (name: string) => input.getAttribute(name),
-    removeAttribute: (name: string) => {
-      input.removeAttribute(name);
-      return textfield;
-    },
-    on: (event: string, handler: Function) => {
-      const listener = handler as EventListener;
-      if (!eventHandlers[event]) {
-        eventHandlers[event] = [];
-      }
-      eventHandlers[event].push(listener);
-      input.addEventListener(event, listener);
-      return textfield;
-    },
-    off: (event: string, handler: Function) => {
-      const listener = handler as EventListener;
-      input.removeEventListener(event, listener);
-      if (eventHandlers[event]) {
-        eventHandlers[event] = eventHandlers[event].filter(h => h !== listener);
-      }
-      return textfield;
-    },
-    enable: () => {
-      input.disabled = false;
-      element.classList.remove('mtrl-textfield--disabled');
-      return textfield;
-    },
-    disable: () => {
-      input.disabled = true;
-      element.classList.add('mtrl-textfield--disabled');
-      return textfield;
-    },
-    destroy: () => {
-      // Clean up event listeners
-      Object.entries(eventHandlers).forEach(([event, handlers]) => {
-        handlers.forEach(handler => {
-          input.removeEventListener(event, handler);
-        });
-      });
-      // Clear handlers
-      Object.keys(eventHandlers).forEach(key => {
-        eventHandlers[key] = [];
-      });
-      // Remove from DOM if attached
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    }
-  };
-  return textfield;
-};
-describe('Textfield Component', () => {
-  test('should create a textfield element', () => {
-    const textfield = createTextfield();
-    expect(textfield.element).toBeDefined();
-    expect(textfield.element.tagName).toBe('DIV');
-    expect(textfield.element.className).toContain('mtrl-textfield');
-  });
-  test('should apply variant class', () => {
-    // Test filled variant
-    const filledTextField = createTextfield({
-      variant: TEXTFIELD_VARIANTS.FILLED
-    });
-    expect(filledTextField.element.className).toContain('mtrl-textfield--filled');
-    // Test outlined variant
-    const outlinedTextField = createTextfield({
-      variant: TEXTFIELD_VARIANTS.OUTLINED
-    });
-    expect(outlinedTextField.element.className).toContain('mtrl-textfield--outlined');
-  });
-  test('should apply size class', () => {
-    // Test small size
-    const smallTextField = createTextfield({
-      size: TEXTFIELD_SIZES.SMALL
-    });
-    expect(smallTextField.element.className).toContain('mtrl-textfield--small');
-    // Test large size
-    const largeTextField = createTextfield({
-      size: TEXTFIELD_SIZES.LARGE
-    });
-    expect(largeTextField.element.className).toContain('mtrl-textfield--large');
-  });
-  test('should set initial value', () => {
-    const initialValue = 'Hello World';
-    const textfield = createTextfield({
-      value: initialValue
-    });
-    expect(textfield.getValue()).toBe(initialValue);
-  });
-  test('should update value', () => {
-    const textfield = createTextfield();
-    const newValue = 'Updated Value';
-    textfield.setValue(newValue);
-    expect(textfield.getValue()).toBe(newValue);
-  });
-  test('should set and get label', () => {
-    const initialLabel = 'Username';
-    const textfield = createTextfield({
-      label: initialLabel
-    });
-    expect(textfield.getLabel()).toBe(initialLabel);
-    // Update label
-    const newLabel = 'New Label';
-    textfield.setLabel(newLabel);
-    expect(textfield.getLabel()).toBe(newLabel);
-  });
-  test('should handle attributes', () => {
-    const textfield = createTextfield();
-    // Set attribute
-    textfield.setAttribute('data-test', 'test-value');
-    expect(textfield.getAttribute('data-test')).toBe('test-value');
-    // Remove attribute
-    textfield.removeAttribute('data-test');
-    expect(textfield.getAttribute('data-test')).toBeNull();
-  });
-  test('should support disabled state', () => {
-    // Create initially enabled
-    const textfield = createTextfield();
-    // Check API methods
-    expect(typeof textfield.disable).toBe('function');
-    expect(typeof textfield.enable).toBe('function');
-    // Disable and check state
-    textfield.disable();
-    expect(textfield.input.disabled).toBe(true);
-    // Enable and check state
-    textfield.enable();
-    expect(textfield.input.disabled).toBe(false);
-    // Test initially disabled through config
-    const disabledTextfield = createTextfield({ disabled: true });
-    expect(disabledTextfield.input.disabled).toBe(true);
-  });
-  test('should support different input types', () => {
-    // Test regular text input
-    const textInput = createTextfield({
-      type: TEXTFIELD_TYPES.TEXT
-    });
-    if (textInput.input instanceof HTMLInputElement) {
-      expect(textInput.input.type).toBe('text');
-    }
-    // Test password input
-    const passwordInput = createTextfield({
-      type: TEXTFIELD_TYPES.PASSWORD
-    });
-    if (passwordInput.input instanceof HTMLInputElement) {
-      expect(passwordInput.input.type).toBe('password');
-    }
-    // Test email input
-    const emailInput = createTextfield({
-      type: TEXTFIELD_TYPES.EMAIL
-    });
-    if (emailInput.input instanceof HTMLInputElement) {
-      expect(emailInput.input.type).toBe('email');
-    }
-    // Test multiline input (textarea)
-    const multilineInput = createTextfield({
-      type: TEXTFIELD_TYPES.MULTILINE
-    });
-    expect(multilineInput.input.tagName).toBe('TEXTAREA');
-  });
-  test('should register event handlers', () => {
-    const textfield = createTextfield();
-    // Create a mock handler
-    const mockHandler = mock(() => {});
-    // Register handler
-    textfield.on('input', mockHandler);
-    // Trigger an input event
-    const inputEvent = new Event('input');
-    textfield.input.dispatchEvent(inputEvent);
-    // Check that handler was called
-    expect(mockHandler.mock.calls.length).toBeGreaterThan(0);
-    // Unregister handler and trigger again
-    textfield.off('input', mockHandler);
-    textfield.input.dispatchEvent(inputEvent);
-    // Handler call count should not increase
-    expect(mockHandler.mock.calls.length).toBe(1);
-  });
-  test('should apply custom class', () => {
-    const customClass = 'custom-textfield';
-    const textfield = createTextfield({
-      class: customClass
-    });
-    expect(textfield.element.className).toContain(customClass);
-  });
-  test('should set placeholder', () => {
-    const placeholder = 'Enter text here';
-    const textfield = createTextfield({
-      placeholder
-    });
-    expect(textfield.input.placeholder).toBe(placeholder);
-  });
-  test('should set required attribute', () => {
-    const textfield = createTextfield({
-      required: true
-    });
-    expect(textfield.input.required).toBe(true);
-  });
-  test('should set name attribute', () => {
-    const name = 'username';
-    const textfield = createTextfield({
-      name
-    });
-    expect(textfield.input.name).toBe(name);
-  });
-  test('should set maxLength attribute', () => {
-    const maxLength = 50;
-    const textfield = createTextfield({
-      maxLength
-    });
-    expect(textfield.input.maxLength).toBe(maxLength);
-  });
-  test('should properly clean up resources on destroy', () => {
-    const textfield = createTextfield();
-    const parentElement = document.createElement('div');
-    parentElement.appendChild(textfield.element);
-    // Destroy the component
-    textfield.destroy();
-    // Check if element was removed
-    expect(parentElement.children.length).toBe(0);
-  });
-});