@yh-ui/components 0.1.21 → 0.1.22

package/dist/table/__tests__/table.perf.test.cjs

@@ -1,231 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _vue = require("vue");
-var _table = _interopRequireDefault(require("../src/table.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const bench = (label, fn, threshold) => {
-  const t0 = performance.now();
-  fn();
-  const elapsed = performance.now() - t0;
-  console.log(`[PERF] ${label}: ${elapsed.toFixed(2)}ms  (threshold: ${threshold}ms)`);
-  return elapsed;
-};
-const CITIES = ["\u5317\u4EAC", "\u4E0A\u6D77", "\u5E7F\u5DDE", "\u6DF1\u5733", "\u676D\u5DDE", "\u6210\u90FD", "\u6B66\u6C49", "\u5357\u4EAC", "\u897F\u5B89", "\u91CD\u5E86"];
-const genRows = n => Array.from({
-  length: n
-}, (_, i) => ({
-  id: i + 1,
-  name: `\u7528\u6237 ${i}`,
-  age: 18 + i % 50,
-  city: CITIES[i % CITIES.length],
-  score: Math.round(i * 7.3 % 100 * 10) / 10,
-  active: i % 3 !== 0
-}));
-const COLUMNS = [{
-  prop: "id",
-  label: "ID",
-  width: 80,
-  sortable: true
-}, {
-  prop: "name",
-  label: "\u59D3\u540D",
-  width: 150,
-  sortable: true
-}, {
-  prop: "age",
-  label: "\u5E74\u9F84",
-  width: 100,
-  sortable: true
-}, {
-  prop: "city",
-  label: "\u57CE\u5E02",
-  width: 120
-}, {
-  prop: "score",
-  label: "\u5206\u6570",
-  width: 100,
-  sortable: true
-}, {
-  prop: "active",
-  label: "\u6D3B\u8DC3",
-  width: 80
-}];
-let ROWS_2K;
-let ROWS_500;
-let ROWS_100;
-(0, _vitest.beforeAll)(() => {
-  ROWS_2K = genRows(2e3);
-  ROWS_500 = genRows(500);
-  ROWS_100 = genRows(100);
-});
-(0, _vitest.describe)("YhTable \u865A\u62DF\u6EDA\u52A8\u6027\u80FD\u57FA\u51C6\u6D4B\u8BD5", () => {
-  (0, _vitest.it)("2k \u884C\uFF1A\u542F\u7528\u865A\u62DF\u6EDA\u52A8\u65F6\u6302\u8F7D\u5E94 < 7000ms\uFF08Happy-DOM \u57FA\u51C6\uFF09", () => {
-    let wrapper;
-    const elapsed = bench("\u521D\u59CB\u6302\u8F7D\uFF08virtualScroll=true, 2k \u884C\uFF09", () => {
-      wrapper = (0, _testUtils.mount)(_table.default, {
-        props: {
-          data: ROWS_2K,
-          columns: COLUMNS,
-          virtualScroll: true,
-          height: "400px",
-          rowHeight: 48,
-          rowKey: "id"
-        }
-      });
-    }, 7e3);
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-table");
-    (0, _vitest.expect)(elapsed).toBeLessThan(1e4);
-    wrapper.unmount();
-  }, 2e4);
-  (0, _vitest.it)("100/500/2k \u884C\uFF1A\u6302\u8F7D\u65F6\u95F4\u5E94\u7EBF\u6027\u589E\u957F\uFF08\u975E\u6307\u6570\u589E\u957F\uFF09", () => {
-    const measure = data => {
-      const t0 = performance.now();
-      const w = (0, _testUtils.mount)(_table.default, {
-        props: {
-          data,
-          columns: COLUMNS,
-          virtualScroll: true,
-          height: "400px",
-          rowHeight: 48,
-          rowKey: "id"
-        }
-      });
-      const elapsed = performance.now() - t0;
-      w.unmount();
-      return elapsed;
-    };
-    const t100 = measure(ROWS_100);
-    const t500 = measure(ROWS_500);
-    const t2k = measure(ROWS_2K);
-    console.log(`[PERF] \u6302\u8F7D\u65F6\u95F4 - 100\u884C: ${t100.toFixed(2)}ms  500\u884C: ${t500.toFixed(2)}ms  2k\u884C: ${t2k.toFixed(2)}ms`);
-    const ratio = t2k / t100;
-    console.log(`[PERF] 2k/100 \u65F6\u95F4\u589E\u957F\u6BD4: ${ratio.toFixed(2)}x`);
-    (0, _vitest.expect)(ratio).toBeLessThan(150);
-    (0, _vitest.expect)(t100).toBeLessThan(5e3);
-    (0, _vitest.expect)(t500).toBeLessThan(8e3);
-    (0, _vitest.expect)(t2k).toBeLessThan(1e4);
-  }, 3e4);
-  (0, _vitest.it)("2k \u884C\uFF1A\u6E32\u67D3 DOM \u884C\u8282\u70B9\u6570\u5E94\u8FDC\u5C11\u4E8E\u6570\u636E\u884C\u6570", async () => {
-    const wrapper = (0, _testUtils.mount)(_table.default, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await (0, _vue.nextTick)();
-    const rowNodes = wrapper.findAll("tr.yh-table__row, .yh-table__row");
-    console.log(`[PERF] \u865A\u62DF\u6EDA\u52A8 DOM \u884C\u6570: ${rowNodes.length}\uFF0C\u6570\u636E\u91CF: ${ROWS_2K.length}`);
-    (0, _vitest.expect)(rowNodes.length).toBeLessThanOrEqual(ROWS_2K.length);
-    console.log("[PERF] Happy-DOM \u73AF\u5883\uFF1A\u5BB9\u5668\u9AD8\u5EA6\u4E3A 0\uFF0C\u6E32\u67D3\u884C\u4E3A\u53EF\u80FD\u4E0E\u771F\u5B9E\u6D4F\u89C8\u5668\u4E0D\u540C\uFF0C\u9A8C\u8BC1\u7EC4\u4EF6\u6B63\u5E38\u6302\u8F7D");
-    (0, _vitest.expect)(wrapper.exists()).toBe(true);
-    wrapper.unmount();
-  }, 15e3);
-  (0, _vitest.it)("2k \u884C\uFF1A\u6392\u5E8F\u64CD\u4F5C\u5E94 < 5000ms \u5B8C\u6210\uFF08Happy-DOM \u57FA\u51C6\uFF09", async () => {
-    const wrapper = (0, _testUtils.mount)(_table.default, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await (0, _vue.nextTick)();
-    const vm = wrapper.vm;
-    if (typeof vm["sort"] === "function") {
-      const elapsed = bench("\u8C03\u7528 sort() API\uFF082k \u884C\uFF09", () => {
-        ;
-        vm["sort"]("id", "ascending");
-      }, 5e3);
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(elapsed).toBeLessThan(5e3);
-    } else {
-      const sortableHeader = wrapper.find("th[data-sortable], .yh-table__header-cell--sortable");
-      if (sortableHeader.exists()) {
-        const elapsed = bench("\u70B9\u51FB\u53EF\u6392\u5E8F\u5217\u5934\uFF082k \u884C\uFF09", () => {
-          sortableHeader.trigger("click");
-        }, 5e3);
-        await (0, _vue.nextTick)();
-        (0, _vitest.expect)(elapsed).toBeLessThan(5e3);
-      } else {
-        console.warn("[PERF] \u672A\u627E\u5230\u6392\u5E8F\u5165\u53E3\uFF0C\u8DF3\u8FC7\u6392\u5E8F\u6027\u80FD\u65AD\u8A00");
-        (0, _vitest.expect)(true).toBe(true);
-      }
-    }
-    wrapper.unmount();
-  }, 15e3);
-  (0, _vitest.it)("2k \u884C\uFF1A\u91CD\u590D\u6302\u8F7D/\u5378\u8F7D 3 \u6B21\u6027\u80FD\u5E94\u4FDD\u6301\u7A33\u5B9A", () => {
-    const ROUNDS = 3;
-    const times = [];
-    for (let r = 0; r < ROUNDS; r++) {
-      const t0 = performance.now();
-      const wrapper = (0, _testUtils.mount)(_table.default, {
-        props: {
-          data: ROWS_2K,
-          columns: COLUMNS,
-          virtualScroll: true,
-          height: "400px",
-          rowHeight: 48,
-          rowKey: "id"
-        }
-      });
-      wrapper.unmount();
-      times.push(performance.now() - t0);
-    }
-    const avg = times.reduce((a, b) => a + b, 0) / ROUNDS;
-    const max = Math.max(...times);
-    console.log(`[PERF] \u91CD\u590D\u6302\u8F7D ${ROUNDS} \u6B21 - \u5E73\u5747: ${avg.toFixed(2)}ms  \u6700\u5927: ${max.toFixed(2)}ms`);
-    console.log(`[PERF] \u5404\u8F6E\u8017\u65F6: ${times.map(t => t.toFixed(1)).join(" / ")} ms`);
-    (0, _vitest.expect)(max).toBeLessThan(12e3);
-    const degradation = times[ROUNDS - 1] / times[0];
-    console.log(`[PERF] \u6027\u80FD\u964D\u7EA7\u6BD4\uFF08\u6700\u540E/\u7B2C\u4E00\uFF09: ${degradation.toFixed(2)}x`);
-    (0, _vitest.expect)(degradation).toBeLessThan(3);
-  }, 3e4);
-  (0, _vitest.it)("2k \u884C\uFF1A\u52A8\u6001\u66FF\u6362 data\uFF08\u5168\u91CF\u5237\u65B0\uFF09\u5E94 < 8000ms\uFF08Happy-DOM \u57FA\u51C6\uFF09", async () => {
-    const wrapper = (0, _testUtils.mount)(_table.default, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await (0, _vue.nextTick)();
-    const NEW_DATA = genRows(2e3);
-    const elapsed = bench("\u5168\u91CF\u66FF\u6362 2k \u884C\u6570\u636E", () => {
-      wrapper.setProps({
-        data: NEW_DATA
-      });
-    }, 1e4);
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(elapsed).toBeLessThan(1e4);
-    wrapper.unmount();
-  }, 2e4);
-  (0, _vitest.it)("2k \u884C\uFF1A\u8868\u683C\u5E94\u6B63\u786E\u6302\u8F7D\u4E14\u7EC4\u4EF6\u4E0D\u62A5\u9519", async () => {
-    const wrapper = (0, _testUtils.mount)(_table.default, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(wrapper.exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-table");
-    const headerCells = wrapper.findAll("th, .yh-table__header-cell");
-    console.log(`[PERF] \u8868\u5934\u5217\u6570: ${headerCells.length}`);
-    wrapper.unmount();
-  }, 15e3);
-});

package/dist/table/__tests__/table.perf.test.mjs

@@ -1,225 +0,0 @@
-import { describe, it, expect, beforeAll } from "vitest";
-import { mount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import Table from "../src/table.vue";
-const bench = (label, fn, threshold) => {
-  const t0 = performance.now();
-  fn();
-  const elapsed = performance.now() - t0;
-  console.log(`[PERF] ${label}: ${elapsed.toFixed(2)}ms  (threshold: ${threshold}ms)`);
-  return elapsed;
-};
-const CITIES = ["\u5317\u4EAC", "\u4E0A\u6D77", "\u5E7F\u5DDE", "\u6DF1\u5733", "\u676D\u5DDE", "\u6210\u90FD", "\u6B66\u6C49", "\u5357\u4EAC", "\u897F\u5B89", "\u91CD\u5E86"];
-const genRows = (n) => Array.from({ length: n }, (_, i) => ({
-  id: i + 1,
-  name: `\u7528\u6237 ${i}`,
-  age: 18 + i % 50,
-  city: CITIES[i % CITIES.length],
-  score: Math.round(i * 7.3 % 100 * 10) / 10,
-  active: i % 3 !== 0
-}));
-const COLUMNS = [
-  { prop: "id", label: "ID", width: 80, sortable: true },
-  { prop: "name", label: "\u59D3\u540D", width: 150, sortable: true },
-  { prop: "age", label: "\u5E74\u9F84", width: 100, sortable: true },
-  { prop: "city", label: "\u57CE\u5E02", width: 120 },
-  { prop: "score", label: "\u5206\u6570", width: 100, sortable: true },
-  { prop: "active", label: "\u6D3B\u8DC3", width: 80 }
-];
-let ROWS_2K;
-let ROWS_500;
-let ROWS_100;
-beforeAll(() => {
-  ROWS_2K = genRows(2e3);
-  ROWS_500 = genRows(500);
-  ROWS_100 = genRows(100);
-});
-describe("YhTable \u865A\u62DF\u6EDA\u52A8\u6027\u80FD\u57FA\u51C6\u6D4B\u8BD5", () => {
-  it("2k \u884C\uFF1A\u542F\u7528\u865A\u62DF\u6EDA\u52A8\u65F6\u6302\u8F7D\u5E94 < 7000ms\uFF08Happy-DOM \u57FA\u51C6\uFF09", () => {
-    let wrapper;
-    const elapsed = bench(
-      "\u521D\u59CB\u6302\u8F7D\uFF08virtualScroll=true, 2k \u884C\uFF09",
-      () => {
-        wrapper = mount(Table, {
-          props: {
-            data: ROWS_2K,
-            columns: COLUMNS,
-            virtualScroll: true,
-            height: "400px",
-            rowHeight: 48,
-            rowKey: "id"
-          }
-        });
-      },
-      7e3
-    );
-    expect(wrapper.classes()).toContain("yh-table");
-    expect(elapsed).toBeLessThan(1e4);
-    wrapper.unmount();
-  }, 2e4);
-  it("100/500/2k \u884C\uFF1A\u6302\u8F7D\u65F6\u95F4\u5E94\u7EBF\u6027\u589E\u957F\uFF08\u975E\u6307\u6570\u589E\u957F\uFF09", () => {
-    const measure = (data) => {
-      const t0 = performance.now();
-      const w = mount(Table, {
-        props: {
-          data,
-          columns: COLUMNS,
-          virtualScroll: true,
-          height: "400px",
-          rowHeight: 48,
-          rowKey: "id"
-        }
-      });
-      const elapsed = performance.now() - t0;
-      w.unmount();
-      return elapsed;
-    };
-    const t100 = measure(ROWS_100);
-    const t500 = measure(ROWS_500);
-    const t2k = measure(ROWS_2K);
-    console.log(
-      `[PERF] \u6302\u8F7D\u65F6\u95F4 - 100\u884C: ${t100.toFixed(2)}ms  500\u884C: ${t500.toFixed(2)}ms  2k\u884C: ${t2k.toFixed(2)}ms`
-    );
-    const ratio = t2k / t100;
-    console.log(`[PERF] 2k/100 \u65F6\u95F4\u589E\u957F\u6BD4: ${ratio.toFixed(2)}x`);
-    expect(ratio).toBeLessThan(150);
-    expect(t100).toBeLessThan(5e3);
-    expect(t500).toBeLessThan(8e3);
-    expect(t2k).toBeLessThan(1e4);
-  }, 3e4);
-  it("2k \u884C\uFF1A\u6E32\u67D3 DOM \u884C\u8282\u70B9\u6570\u5E94\u8FDC\u5C11\u4E8E\u6570\u636E\u884C\u6570", async () => {
-    const wrapper = mount(Table, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await nextTick();
-    const rowNodes = wrapper.findAll("tr.yh-table__row, .yh-table__row");
-    console.log(`[PERF] \u865A\u62DF\u6EDA\u52A8 DOM \u884C\u6570: ${rowNodes.length}\uFF0C\u6570\u636E\u91CF: ${ROWS_2K.length}`);
-    expect(rowNodes.length).toBeLessThanOrEqual(ROWS_2K.length);
-    console.log(
-      "[PERF] Happy-DOM \u73AF\u5883\uFF1A\u5BB9\u5668\u9AD8\u5EA6\u4E3A 0\uFF0C\u6E32\u67D3\u884C\u4E3A\u53EF\u80FD\u4E0E\u771F\u5B9E\u6D4F\u89C8\u5668\u4E0D\u540C\uFF0C\u9A8C\u8BC1\u7EC4\u4EF6\u6B63\u5E38\u6302\u8F7D"
-    );
-    expect(wrapper.exists()).toBe(true);
-    wrapper.unmount();
-  }, 15e3);
-  it("2k \u884C\uFF1A\u6392\u5E8F\u64CD\u4F5C\u5E94 < 5000ms \u5B8C\u6210\uFF08Happy-DOM \u57FA\u51C6\uFF09", async () => {
-    const wrapper = mount(Table, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await nextTick();
-    const vm = wrapper.vm;
-    if (typeof vm["sort"] === "function") {
-      const elapsed = bench(
-        "\u8C03\u7528 sort() API\uFF082k \u884C\uFF09",
-        () => {
-          ;
-          vm["sort"]("id", "ascending");
-        },
-        5e3
-      );
-      await nextTick();
-      expect(elapsed).toBeLessThan(5e3);
-    } else {
-      const sortableHeader = wrapper.find("th[data-sortable], .yh-table__header-cell--sortable");
-      if (sortableHeader.exists()) {
-        const elapsed = bench(
-          "\u70B9\u51FB\u53EF\u6392\u5E8F\u5217\u5934\uFF082k \u884C\uFF09",
-          () => {
-            sortableHeader.trigger("click");
-          },
-          5e3
-        );
-        await nextTick();
-        expect(elapsed).toBeLessThan(5e3);
-      } else {
-        console.warn("[PERF] \u672A\u627E\u5230\u6392\u5E8F\u5165\u53E3\uFF0C\u8DF3\u8FC7\u6392\u5E8F\u6027\u80FD\u65AD\u8A00");
-        expect(true).toBe(true);
-      }
-    }
-    wrapper.unmount();
-  }, 15e3);
-  it("2k \u884C\uFF1A\u91CD\u590D\u6302\u8F7D/\u5378\u8F7D 3 \u6B21\u6027\u80FD\u5E94\u4FDD\u6301\u7A33\u5B9A", () => {
-    const ROUNDS = 3;
-    const times = [];
-    for (let r = 0; r < ROUNDS; r++) {
-      const t0 = performance.now();
-      const wrapper = mount(Table, {
-        props: {
-          data: ROWS_2K,
-          columns: COLUMNS,
-          virtualScroll: true,
-          height: "400px",
-          rowHeight: 48,
-          rowKey: "id"
-        }
-      });
-      wrapper.unmount();
-      times.push(performance.now() - t0);
-    }
-    const avg = times.reduce((a, b) => a + b, 0) / ROUNDS;
-    const max = Math.max(...times);
-    console.log(
-      `[PERF] \u91CD\u590D\u6302\u8F7D ${ROUNDS} \u6B21 - \u5E73\u5747: ${avg.toFixed(2)}ms  \u6700\u5927: ${max.toFixed(2)}ms`
-    );
-    console.log(`[PERF] \u5404\u8F6E\u8017\u65F6: ${times.map((t) => t.toFixed(1)).join(" / ")} ms`);
-    expect(max).toBeLessThan(12e3);
-    const degradation = times[ROUNDS - 1] / times[0];
-    console.log(`[PERF] \u6027\u80FD\u964D\u7EA7\u6BD4\uFF08\u6700\u540E/\u7B2C\u4E00\uFF09: ${degradation.toFixed(2)}x`);
-    expect(degradation).toBeLessThan(3);
-  }, 3e4);
-  it("2k \u884C\uFF1A\u52A8\u6001\u66FF\u6362 data\uFF08\u5168\u91CF\u5237\u65B0\uFF09\u5E94 < 8000ms\uFF08Happy-DOM \u57FA\u51C6\uFF09", async () => {
-    const wrapper = mount(Table, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await nextTick();
-    const NEW_DATA = genRows(2e3);
-    const elapsed = bench(
-      "\u5168\u91CF\u66FF\u6362 2k \u884C\u6570\u636E",
-      () => {
-        wrapper.setProps({ data: NEW_DATA });
-      },
-      1e4
-    );
-    await nextTick();
-    expect(elapsed).toBeLessThan(1e4);
-    wrapper.unmount();
-  }, 2e4);
-  it("2k \u884C\uFF1A\u8868\u683C\u5E94\u6B63\u786E\u6302\u8F7D\u4E14\u7EC4\u4EF6\u4E0D\u62A5\u9519", async () => {
-    const wrapper = mount(Table, {
-      props: {
-        data: ROWS_2K,
-        columns: COLUMNS,
-        virtualScroll: true,
-        height: "400px",
-        rowHeight: 48,
-        rowKey: "id"
-      }
-    });
-    await nextTick();
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.classes()).toContain("yh-table");
-    const headerCells = wrapper.findAll("th, .yh-table__header-cell");
-    console.log(`[PERF] \u8868\u5934\u5217\u6570: ${headerCells.length}`);
-    wrapper.unmount();
-  }, 15e3);
-});