npm - mtrl-addons - Versions diffs - 0.2.1 → 0.2.3 - Mend

mtrl-addons 0.2.1 → 0.2.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 (128) hide show

package/{src/components/index.ts → dist/components/index.d.ts} +0 -2
package/dist/components/vlist/config.d.ts +86 -0
package/{src/components/vlist/constants.ts → dist/components/vlist/constants.d.ts} +10 -11
package/dist/components/vlist/features/api.d.ts +7 -0
package/{src/components/vlist/features/index.ts → dist/components/vlist/features/index.d.ts} +0 -2
package/dist/components/vlist/features/selection.d.ts +6 -0
package/dist/components/vlist/features/viewport.d.ts +9 -0
package/dist/components/vlist/features.d.ts +31 -0
package/{src/components/vlist/index.ts → dist/components/vlist/index.d.ts} +1 -9
package/dist/components/vlist/types.d.ts +596 -0
package/dist/components/vlist/vlist.d.ts +29 -0
package/dist/core/compose/features/gestures/index.d.ts +86 -0
package/dist/core/compose/features/gestures/longpress.d.ts +85 -0
package/dist/core/compose/features/gestures/pan.d.ts +108 -0
package/dist/core/compose/features/gestures/pinch.d.ts +111 -0
package/dist/core/compose/features/gestures/rotate.d.ts +111 -0
package/dist/core/compose/features/gestures/swipe.d.ts +149 -0
package/dist/core/compose/features/gestures/tap.d.ts +79 -0
package/{src/core/compose/features/index.ts → dist/core/compose/features/index.d.ts} +1 -2
package/{src/core/compose/index.ts → dist/core/compose/index.d.ts} +2 -11
package/{src/core/gestures/index.ts → dist/core/gestures/index.d.ts} +1 -20
package/dist/core/gestures/longpress.d.ts +23 -0
package/dist/core/gestures/manager.d.ts +14 -0
package/dist/core/gestures/pan.d.ts +12 -0
package/dist/core/gestures/pinch.d.ts +14 -0
package/dist/core/gestures/rotate.d.ts +14 -0
package/dist/core/gestures/swipe.d.ts +20 -0
package/dist/core/gestures/tap.d.ts +12 -0
package/dist/core/gestures/types.d.ts +320 -0
package/dist/core/gestures/utils.d.ts +57 -0
package/dist/core/index.d.ts +13 -0
package/dist/core/layout/config.d.ts +33 -0
package/dist/core/layout/index.d.ts +51 -0
package/dist/core/layout/jsx.d.ts +65 -0
package/dist/core/layout/schema.d.ts +112 -0
package/dist/core/layout/types.d.ts +69 -0
package/dist/core/viewport/constants.d.ts +105 -0
package/dist/core/viewport/features/base.d.ts +14 -0
package/dist/core/viewport/features/collection.d.ts +41 -0
package/dist/core/viewport/features/events.d.ts +13 -0
package/{src/core/viewport/features/index.ts → dist/core/viewport/features/index.d.ts} +0 -7
package/dist/core/viewport/features/item-size.d.ts +30 -0
package/dist/core/viewport/features/loading.d.ts +34 -0
package/dist/core/viewport/features/momentum.d.ts +17 -0
package/dist/core/viewport/features/performance.d.ts +53 -0
package/dist/core/viewport/features/placeholders.d.ts +38 -0
package/dist/core/viewport/features/rendering.d.ts +16 -0
package/dist/core/viewport/features/scrollbar.d.ts +26 -0
package/dist/core/viewport/features/scrolling.d.ts +16 -0
package/dist/core/viewport/features/utils.d.ts +43 -0
package/dist/core/viewport/features/virtual.d.ts +18 -0
package/{src/core/viewport/index.ts → dist/core/viewport/index.d.ts} +1 -17
package/dist/core/viewport/types.d.ts +96 -0
package/dist/core/viewport/utils/speed-tracker.d.ts +22 -0
package/dist/core/viewport/viewport.d.ts +11 -0
package/{src/index.ts → dist/index.d.ts} +0 -4
package/dist/index.js +5143 -0
package/dist/index.mjs +5111 -0
package/dist/styles.css +254 -0
package/dist/styles.css.map +1 -0
package/package.json +6 -1
package/src/styles/components/_vlist.scss +234 -213
package/.cursorrules +0 -117
package/AI.md +0 -241
package/build.js +0 -201
package/scripts/analyze-orphaned-functions.ts +0 -387
package/scripts/debug/vlist-selection.ts +0 -121
package/src/components/vlist/config.ts +0 -323
package/src/components/vlist/features/api.ts +0 -322
package/src/components/vlist/features/selection.ts +0 -444
package/src/components/vlist/features/viewport.ts +0 -65
package/src/components/vlist/features.ts +0 -112
package/src/components/vlist/types.ts +0 -591
package/src/components/vlist/vlist.ts +0 -92
package/src/core/compose/features/gestures/index.ts +0 -227
package/src/core/compose/features/gestures/longpress.ts +0 -383
package/src/core/compose/features/gestures/pan.ts +0 -424
package/src/core/compose/features/gestures/pinch.ts +0 -475
package/src/core/compose/features/gestures/rotate.ts +0 -485
package/src/core/compose/features/gestures/swipe.ts +0 -492
package/src/core/compose/features/gestures/tap.ts +0 -334
package/src/core/gestures/longpress.ts +0 -68
package/src/core/gestures/manager.ts +0 -418
package/src/core/gestures/pan.ts +0 -48
package/src/core/gestures/pinch.ts +0 -58
package/src/core/gestures/rotate.ts +0 -58
package/src/core/gestures/swipe.ts +0 -66
package/src/core/gestures/tap.ts +0 -45
package/src/core/gestures/types.ts +0 -387
package/src/core/gestures/utils.ts +0 -128
package/src/core/index.ts +0 -43
package/src/core/layout/config.ts +0 -102
package/src/core/layout/index.ts +0 -168
package/src/core/layout/jsx.ts +0 -174
package/src/core/layout/schema.ts +0 -1001
package/src/core/layout/types.ts +0 -95
package/src/core/viewport/constants.ts +0 -140
package/src/core/viewport/features/base.ts +0 -73
package/src/core/viewport/features/collection.ts +0 -882
package/src/core/viewport/features/events.ts +0 -130
package/src/core/viewport/features/item-size.ts +0 -271
package/src/core/viewport/features/loading.ts +0 -263
package/src/core/viewport/features/momentum.ts +0 -260
package/src/core/viewport/features/performance.ts +0 -161
package/src/core/viewport/features/placeholders.ts +0 -335
package/src/core/viewport/features/rendering.ts +0 -568
package/src/core/viewport/features/scrollbar.ts +0 -434
package/src/core/viewport/features/scrolling.ts +0 -618
package/src/core/viewport/features/utils.ts +0 -88
package/src/core/viewport/features/virtual.ts +0 -384
package/src/core/viewport/types.ts +0 -133
package/src/core/viewport/utils/speed-tracker.ts +0 -79
package/src/core/viewport/viewport.ts +0 -246
package/test/benchmarks/layout/advanced.test.ts +0 -656
package/test/benchmarks/layout/comparison.test.ts +0 -519
package/test/benchmarks/layout/performance-comparison.test.ts +0 -274
package/test/benchmarks/layout/real-components.test.ts +0 -733
package/test/benchmarks/layout/simple.test.ts +0 -321
package/test/benchmarks/layout/stress.test.ts +0 -990
package/test/collection/basic.test.ts +0 -304
package/test/components/vlist-selection.test.ts +0 -240
package/test/components/vlist.test.ts +0 -63
package/test/core/collection/adapter.test.ts +0 -161
package/test/core/collection/collection.test.ts +0 -394
package/test/core/layout/layout.test.ts +0 -201
package/test/utils/dom-helpers.ts +0 -275
package/test/utils/performance-helpers.ts +0 -392
package/tsconfig.json +0 -20

package/test/collection/basic.test.ts DELETED Viewed

@@ -1,304 +0,0 @@
-/**
- * Basic collection tests
- *
- * Tests the core functionality of the collection system
- * including creation, data operations, and template rendering.
- */
-import { describe, test, expect, beforeEach } from "bun:test";
-import { JSDOM } from "jsdom";
-// Mock DOM environment for testing
-const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-global.document = dom.window.document;
-global.HTMLElement = dom.window.HTMLElement;
-global.requestAnimationFrame = (cb: FrameRequestCallback) => {
-  setTimeout(cb, 0);
-  return 0;
-};
-// Import our collection system
-import {
-  createCollection,
-  type CollectionItem,
-} from "../../src/core/collection";
-// Test data interface
-interface TestUser extends CollectionItem {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-// Test data
-const testUsers: TestUser[] = [
-  { id: "1", name: "John Doe", email: "john@example.com", age: 30 },
-  { id: "2", name: "Jane Smith", email: "jane@example.com", age: 25 },
-  { id: "3", name: "Bob Johnson", email: "bob@example.com", age: 35 },
-];
-describe("Collection System", () => {
-  let container: HTMLElement;
-  beforeEach(() => {
-    // Create a fresh container for each test
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-  test("creates collection with basic configuration", () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-      className: "user-list",
-      ariaLabel: "User List",
-    });
-    expect(collection.element).toBe(container);
-    expect(collection.getSize()).toBe(3);
-    expect(collection.isEmpty()).toBe(false);
-    expect(container.classList.contains("mtrl-collection")).toBe(true);
-    expect(container.classList.contains("user-list")).toBe(true);
-    expect(container.getAttribute("aria-label")).toBe("User List");
-  });
-  test("renders items with default template", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(container.children.length).toBe(3);
-    expect(container.children[0].textContent).toBe("1");
-    expect(container.children[1].textContent).toBe("2");
-    expect(container.children[2].textContent).toBe("3");
-  });
-  test("renders items with object template", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-      template: {
-        tag: "div",
-        className: "user-item",
-        children: [
-          { tag: "div", className: "user-name", textContent: "{{name}}" },
-          { tag: "div", className: "user-email", textContent: "{{email}}" },
-        ],
-      },
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(container.children.length).toBe(3);
-    const firstUser = container.children[0] as HTMLElement;
-    expect(firstUser.className).toBe("user-item");
-    expect(firstUser.children.length).toBe(2);
-    expect(firstUser.children[0].textContent).toBe("John Doe");
-    expect(firstUser.children[1].textContent).toBe("john@example.com");
-  });
-  test("renders items with string template", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-      template: "<div class='user'>{{name}} ({{email}})</div>",
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(container.children.length).toBe(3);
-    expect(container.children[0].innerHTML).toBe(
-      "<div class='user'>John Doe (john@example.com)</div>"
-    );
-  });
-  test("adds new items", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: [testUsers[0]],
-    });
-    expect(collection.getSize()).toBe(1);
-    const newUser: TestUser = {
-      id: "4",
-      name: "Alice Brown",
-      email: "alice@example.com",
-      age: 28,
-    };
-    await collection.add(newUser);
-    expect(collection.getSize()).toBe(2);
-    const items = collection.getItems();
-    expect(items.length).toBe(2);
-    expect(items[1].name).toBe("Alice Brown");
-  });
-  test("updates existing items", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    const updatedUser: TestUser = {
-      id: "1",
-      name: "John Smith",
-      email: "johnsmith@example.com",
-      age: 31,
-    };
-    await collection.update(updatedUser);
-    const user = collection.getItem("1");
-    expect(user?.name).toBe("John Smith");
-    expect(user?.email).toBe("johnsmith@example.com");
-  });
-  test("removes items", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    expect(collection.getSize()).toBe(3);
-    await collection.remove("2");
-    expect(collection.getSize()).toBe(2);
-    expect(collection.getItem("2")).toBeUndefined();
-    expect(collection.getItem("1")).toBeDefined();
-    expect(collection.getItem("3")).toBeDefined();
-  });
-  test("clears all items", () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    expect(collection.getSize()).toBe(3);
-    collection.clear();
-    expect(collection.getSize()).toBe(0);
-    expect(collection.isEmpty()).toBe(true);
-  });
-  test("filters items with query", () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    expect(collection.getSize()).toBe(3);
-    // Filter users over 30
-    collection.query((user) => user.age > 30);
-    expect(collection.getSize()).toBe(1);
-    expect(collection.getItems()[0].name).toBe("Bob Johnson");
-  });
-  test("sorts items", () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    // Sort by age ascending
-    collection.sort((a, b) => a.age - b.age);
-    const items = collection.getItems();
-    expect(items[0].name).toBe("Jane Smith"); // age 25
-    expect(items[1].name).toBe("John Doe"); // age 30
-    expect(items[2].name).toBe("Bob Johnson"); // age 35
-  });
-  test("validates items when adding", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: [],
-      validate: (user) => user.age >= 18,
-    });
-    const validUser: TestUser = {
-      id: "1",
-      name: "John Doe",
-      email: "john@example.com",
-      age: 30,
-    };
-    const invalidUser: TestUser = {
-      id: "2",
-      name: "Minor",
-      email: "minor@example.com",
-      age: 16,
-    };
-    await collection.add([validUser, invalidUser]);
-    expect(collection.getSize()).toBe(1);
-    expect(collection.getItems()[0].name).toBe("John Doe");
-  });
-  test("transforms items when adding", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: [],
-      transform: (user: any) => ({
-        ...user,
-        name: user.name.toUpperCase(),
-      }),
-    });
-    const user: TestUser = {
-      id: "1",
-      name: "John Doe",
-      email: "john@example.com",
-      age: 30,
-    };
-    await collection.add(user);
-    expect(collection.getItems()[0].name).toBe("JOHN DOE");
-  });
-  test("handles template changes", async () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: [testUsers[0]],
-    });
-    // Change template
-    collection.setTemplate({
-      tag: "div",
-      className: "new-template",
-      textContent: "User: {{name}}",
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(container.children[0].textContent).toBe("User: John Doe");
-    expect(container.children[0].className).toBe("new-template");
-  });
-  test("destroys collection properly", () => {
-    const collection = createCollection<TestUser>({
-      container,
-      items: testUsers,
-    });
-    expect(container.children.length).toBeGreaterThan(0);
-    collection.destroy();
-    expect(container.children.length).toBe(0);
-  });
-});

package/test/components/vlist-selection.test.ts DELETED Viewed

@@ -1,240 +0,0 @@
-// test/components/vlist-selection.test.ts
-import { describe, test, expect, beforeEach, afterEach } from "bun:test";
-import { createVList } from "../../src/components/vlist";
-import type { VListComponent } from "../../src/components/vlist/types";
-describe("VList Selection", () => {
-  let container: HTMLElement;
-  let vlist: VListComponent<any>;
-  beforeEach(() => {
-    // Create container
-    container = document.createElement("div");
-    container.style.height = "400px";
-    container.style.width = "300px";
-    document.body.appendChild(container);
-  });
-  afterEach(() => {
-    // Cleanup
-    if (vlist?.destroy) {
-      vlist.destroy();
-    }
-    document.body.removeChild(container);
-  });
-  test("should initialize without selection when not enabled", () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Selection methods should not be available
-    expect(vlist.selectItems).toBeUndefined();
-    expect(vlist.getSelectedItems).toBeUndefined();
-  });
-  test("should initialize with selection when enabled", () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "single",
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Selection methods should be available
-    expect(vlist.selectItems).toBeDefined();
-    expect(vlist.getSelectedItems).toBeDefined();
-    expect(vlist.clearSelection).toBeDefined();
-  });
-  test("should handle single selection mode", () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "single",
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Select first item
-    vlist.selectItems([0]);
-    expect(vlist.getSelectedIndices()).toEqual([0]);
-    expect(vlist.getSelectedItems()).toEqual([items[0]]);
-    // Select another item - should replace selection
-    vlist.selectItems([2]);
-    expect(vlist.getSelectedIndices()).toEqual([2]);
-    expect(vlist.getSelectedItems()).toEqual([items[2]]);
-  });
-  test("should handle multiple selection mode", () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "multiple",
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Select multiple items
-    vlist.selectItems([0, 2, 4]);
-    expect(vlist.getSelectedIndices().sort()).toEqual([0, 2, 4]);
-    // Deselect one item
-    vlist.deselectItems([2]);
-    expect(vlist.getSelectedIndices().sort()).toEqual([0, 4]);
-    // Clear selection
-    vlist.clearSelection();
-    expect(vlist.getSelectedIndices()).toEqual([]);
-  });
-  test("should handle click selection", async () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "single",
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Wait for render
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    // Find first item element
-    const firstItem = container.querySelector(
-      '[data-index="0"]'
-    ) as HTMLElement;
-    expect(firstItem).toBeTruthy();
-    // Click on first item
-    firstItem.click();
-    // Check selection
-    expect(vlist.getSelectedIndices()).toEqual([0]);
-    expect(firstItem.classList.contains("mtrl-list-item--selected")).toBe(true);
-  });
-  test("should emit selection events", async () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    let selectionChangeEvent: any = null;
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "single",
-        onSelectionChange: (selectedItems, selectedIndices) => {
-          selectionChangeEvent = { selectedItems, selectedIndices };
-        },
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Select an item
-    vlist.selectItems([3]);
-    // Check event was fired
-    expect(selectionChangeEvent).toBeTruthy();
-    expect(selectionChangeEvent.selectedIndices).toEqual([3]);
-    expect(selectionChangeEvent.selectedItems).toEqual([items[3]]);
-  });
-  test("should handle initial selection", () => {
-    const items = Array.from({ length: 10 }, (_, i) => ({
-      id: `item-${i}`,
-      name: `Item ${i}`,
-    }));
-    vlist = createVList({
-      container,
-      items,
-      selection: {
-        enabled: true,
-        mode: "multiple",
-        selectedIndices: [1, 3, 5],
-      },
-      template: (item) => {
-        const div = document.createElement("div");
-        div.className = "list-item";
-        div.textContent = item.name;
-        return div;
-      },
-    });
-    // Check initial selection
-    expect(vlist.getSelectedIndices().sort()).toEqual([1, 3, 5]);
-  });
-});

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

@@ -1,63 +0,0 @@
-// test/components/vlist.test.ts
-import { describe, it, expect, beforeEach } from "bun:test";
-import { JSDOM } from "jsdom";
-// Mock DOM environment for testing
-const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-global.document = dom.window.document;
-global.HTMLElement = dom.window.HTMLElement;
-global.window = dom.window as any;
-global.navigator = dom.window.navigator;
-global.requestAnimationFrame = (cb: FrameRequestCallback) => {
-  setTimeout(cb, 0);
-  return 0;
-};
-// Import VList after DOM setup
-import { createVList } from "../../src/components/vlist";
-describe("VList Component", () => {
-  let container: HTMLElement;
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-  it("should create a VList component", () => {
-    const vlist = createVList({
-      container,
-      items: ["Item 1", "Item 2", "Item 3"],
-      template: (item) => `<div>${item}</div>`,
-    });
-    expect(vlist).toBeDefined();
-    expect(vlist.element).toBeDefined();
-    expect(vlist.element.tagName).toBe("DIV");
-    expect(vlist.element.className).toContain("mtrl-vlist");
-  });
-  it("should have viewport functionality", () => {
-    const vlist = createVList({
-      container,
-      items: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
-    });
-    expect(vlist.viewport).toBeDefined();
-    expect(typeof vlist.viewport.scrollToIndex).toBe("function");
-    expect(typeof vlist.viewport.getVisibleRange).toBe("function");
-  });
-  it("should have public API methods", () => {
-    const vlist = createVList({ container });
-    expect(typeof vlist.setItems).toBe("function");
-    expect(typeof vlist.getItems).toBe("function");
-    expect(typeof vlist.scrollToIndex).toBe("function");
-    expect(typeof vlist.scrollToTop).toBe("function");
-    expect(typeof vlist.scrollToBottom).toBe("function");
-    expect(typeof vlist.getState).toBe("function");
-    expect(typeof vlist.destroy).toBe("function");
-  });
-});