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/navigation.test.ts ADDED Viewed

@@ -0,0 +1,186 @@
+// test/components/navigation.test.ts
+import { describe, test, expect } 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;
+// Import navigation types directly
+import type { NavigationComponent, NavItemConfig, NavItemData, NavVariant, NavPosition } from '../../src/components/navigation/types';
+// Define constants here to avoid circular dependencies
+const NAV_VARIANTS: Record<string, NavVariant> = {
+  RAIL: 'rail',
+  DRAWER: 'drawer',
+  BAR: 'bar',
+  MODAL: 'modal',
+  STANDARD: 'standard'
+};
+const NAV_POSITIONS: Record<string, NavPosition> = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom'
+};
+// Sample items for testing
+const testItems: NavItemConfig[] = [
+  {
+    id: 'home',
+    icon: '<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>',
+    label: 'Home'
+  },
+  {
+    id: 'favorites',
+    icon: '<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>',
+    label: 'Favorites'
+  },
+  {
+    id: 'settings',
+    icon: '<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>',
+    label: 'Settings'
+  }
+];
+// Create a simple mock navigation
+const createMockNavigation = (config = {}): NavigationComponent => {
+  const element = document.createElement('nav');
+  element.className = `mtrl-nav mtrl-nav--${config.variant || 'rail'}`;
+  if (config.class) {
+    element.className += ` ${config.class}`;
+  }
+  // Create basic items map
+  const items = new Map();
+  if (config.items) {
+    (config.items as NavItemConfig[]).forEach(itemConfig => {
+      const itemElement = document.createElement('button');
+      itemElement.className = 'mtrl-nav-item';
+      itemElement.dataset.id = itemConfig.id;
+      items.set(itemConfig.id, {
+        element: itemElement,
+        config: itemConfig
+      });
+    });
+  }
+  return {
+    element,
+    items,
+    config: {
+      variant: config.variant || 'rail',
+      position: config.position || 'left',
+      disabled: config.disabled || false,
+      ...config
+    },
+    addItem: () => ({ element, items, config } as any),
+    removeItem: () => ({ element, items, config } as any),
+    getItem: (id) => items.get(id),
+    getAllItems: () => Array.from(items.values()),
+    getActive: () => null,
+    getItemPath: () => [],
+    setActive: () => ({ element, items, config } as any),
+    enable: () => ({ element, items, config } as any),
+    disable: () => ({ element, items, config } as any),
+    expand: () => ({ element, items, config } as any),
+    collapse: () => ({ element, items, config } as any),
+    isExpanded: () => false,
+    toggle: () => ({ element, items, config } as any),
+    on: () => ({ element, items, config } as any),
+    off: () => ({ element, items, config } as any),
+    destroy: () => {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  } as NavigationComponent;
+};
+describe('Navigation Component', () => {
+  test('should create a navigation element', () => {
+    const nav = createMockNavigation();
+    expect(nav.element).toBeDefined();
+    expect(nav.element.tagName).toBe('NAV');
+    expect(nav.element.className).toContain('mtrl-nav');
+  });
+  test('should apply variant class', () => {
+    const variant = NAV_VARIANTS.RAIL;
+    const nav = createMockNavigation({
+      variant
+    });
+    expect(nav.config.variant).toBe(variant);
+  });
+  test('should apply position class', () => {
+    const position = NAV_POSITIONS.LEFT;
+    const nav = createMockNavigation({
+      position
+    });
+    expect(nav.config.position).toBe(position);
+  });
+  test('should add initial items', () => {
+    const nav = createMockNavigation({
+      items: testItems
+    });
+    expect(nav.items).toBeDefined();
+    expect(nav.items.size).toBe(testItems.length);
+    // Check first item details
+    const homeItem = nav.getItem('home');
+    expect(homeItem).toBeDefined();
+    expect(homeItem?.config.label).toBe('Home');
+  });
+  test('should add item dynamically', () => {
+    const nav = createMockNavigation();
+    const newItem: NavItemConfig = {
+      id: 'profile',
+      icon: '<svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>',
+      label: 'Profile'
+    };
+    expect(typeof nav.addItem).toBe('function');
+  });
+  test('should support disabled state', () => {
+    const nav = createMockNavigation();
+    expect(typeof nav.disable).toBe('function');
+    expect(typeof nav.enable).toBe('function');
+    const disabledNav = createMockNavigation({ disabled: true });
+    expect(disabledNav.config.disabled).toBe(true);
+  });
+  test('should register event handlers', () => {
+    const nav = createMockNavigation();
+    expect(typeof nav.on).toBe('function');
+    expect(typeof nav.off).toBe('function');
+  });
+  test('should apply custom class', () => {
+    const customClass = 'custom-nav';
+    const nav = createMockNavigation({
+      class: customClass
+    });
+    expect(nav.element.className).toContain(customClass);
+  });
+  test('should properly clean up resources on destroy', () => {
+    const nav = createMockNavigation();
+    const parentElement = document.createElement('div');
+    parentElement.appendChild(nav.element);
+    nav.destroy();
+    expect(parentElement.children.length).toBe(0);
+  });
+});