@yh-ui/components 0.1.21 → 0.1.22

package/dist/select/__tests__/select.test.mjs

@@ -1,345 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import { nextTick, h } from "vue";
-import Select from "../src/select.vue";
-describe("YhSelect", () => {
-  const options = [
-    { value: "option1", label: "\u9009\u9879\u4E00" },
-    { value: "option2", label: "\u9009\u9879\u4E8C" },
-    { value: "option3", label: "\u9009\u9879\u4E09" },
-    { value: "option4", label: "\u9009\u9879\u56DB", disabled: true },
-    { value: "option5", label: "\u9009\u9879\u4E94" }
-  ];
-  it("should render correctly", () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    expect(wrapper.classes()).toContain("yh-select");
-    expect(wrapper.find("input").exists()).toBe(true);
-  });
-  it("should work with v-model in single mode", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        modelValue: "option1",
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    expect(wrapper.find(".yh-select__selected-value").text()).toBe("\u9009\u9879\u4E00");
-  });
-  it("should work with v-model in multiple mode", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    const tags = wrapper.findAll(".yh-select__tag");
-    expect(tags.length).toBe(2);
-  });
-  it("should display placeholder when no value", () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        modelValue: void 0,
-        placeholder: "\u8BF7\u9009\u62E9"
-      }
-    });
-    const input = wrapper.find("input");
-    expect(input.attributes("placeholder")).toBe("\u8BF7\u9009\u62E9");
-  });
-  it("should be disabled when disabled prop is true", () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        disabled: true
-      }
-    });
-    expect(wrapper.classes()).toContain("is-disabled");
-    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
-  });
-  it("should apply size class", () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        size: "large"
-      }
-    });
-    expect(wrapper.classes()).toContain("yh-select--large");
-  });
-  it("should apply small size class", () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        size: "small"
-      }
-    });
-    expect(wrapper.classes()).toContain("yh-select--small");
-  });
-  it("should show clear button when clearable and has value", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        modelValue: "option1",
-        clearable: true
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await nextTick();
-    expect(wrapper.find(".yh-select__clear").exists()).toBe(true);
-  });
-  it("should clear value when clear button is clicked", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        modelValue: "option1",
-        clearable: true,
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await nextTick();
-    await wrapper.find(".yh-select__clear").trigger("click");
-    expect(wrapper.emitted("clear")).toBeTruthy();
-    expect(wrapper.props("modelValue")).toBeUndefined();
-  });
-  it("should clear all values in multiple mode", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        clearable: true,
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await nextTick();
-    await wrapper.find(".yh-select__clear").trigger("click");
-    expect(wrapper.emitted("clear")).toBeTruthy();
-    expect(wrapper.props("modelValue")).toEqual([]);
-  });
-  it("should toggle dropdown on click", async () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    await wrapper.trigger("click");
-    expect(wrapper.emitted("visible-change")).toBeTruthy();
-    expect(wrapper.emitted("visible-change")[0]).toEqual([true]);
-  });
-  it("should select option on click", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("click");
-    await nextTick();
-    const optionElements = wrapper.findAll(".yh-select__option");
-    if (optionElements.length > 0) {
-      await optionElements[0].trigger("click");
-      expect(wrapper.emitted("change")).toBeTruthy();
-    }
-  });
-  it("should not select disabled option", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("click");
-    await nextTick();
-    const disabledOption = wrapper.find(".yh-select__option.is-disabled");
-    if (disabledOption.exists()) {
-      await disabledOption.trigger("click");
-      expect(wrapper.props("modelValue")).toBeUndefined();
-    }
-  });
-  it("should remove tag in multiple mode", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    const closeBtn = wrapper.find(".yh-select__tag-close");
-    if (closeBtn.exists()) {
-      await closeBtn.trigger("click");
-      expect(wrapper.emitted("remove-tag")).toBeTruthy();
-    }
-  });
-  it("should collapse tags when collapseTags is true", () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2", "option3"],
-        collapseTags: true,
-        maxCollapseTags: 1
-      }
-    });
-    const tags = wrapper.findAll(".yh-select__tag");
-    expect(tags.length).toBe(2);
-    expect(tags[1].text()).toContain("+2");
-  });
-  it("should filter options when filterable", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        filterable: true
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("\u9009\u9879\u4E00");
-    await nextTick();
-    expect(wrapper.emitted()).toBeTruthy();
-  });
-  it("should navigate with arrow keys", async () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    await wrapper.find("input").trigger("keydown", { key: "ArrowDown" });
-    expect(wrapper.emitted("visible-change")).toBeTruthy();
-  });
-  it("should close dropdown on Escape", async () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").trigger("keydown", { key: "Escape" });
-    expect(wrapper.emitted("visible-change").pop()).toEqual([false]);
-  });
-  it("should select option on Enter", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").trigger("keydown", { key: "ArrowDown" });
-    await wrapper.find("input").trigger("keydown", { key: "Enter" });
-    expect(wrapper.emitted("change")).toBeTruthy();
-  });
-  it("should create new option when allowCreate is true", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        filterable: true,
-        allowCreate: true,
-        modelValue: [],
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("\u65B0\u9009\u9879");
-    await wrapper.find("input").trigger("keydown", { key: "Enter" });
-    expect(wrapper.emitted("change")).toBeTruthy();
-  });
-  it("should call remoteMethod when remote is true", async () => {
-    const remoteMethod = vi.fn();
-    const wrapper = mount(Select, {
-      props: {
-        options: [],
-        filterable: true,
-        remote: true,
-        remoteMethod
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("test");
-    await nextTick();
-    expect(remoteMethod).toHaveBeenCalledWith("test");
-  });
-  it("should enable virtual scroll when virtualScroll is true", () => {
-    const manyOptions = Array.from({ length: 1e3 }, (_, i) => ({
-      value: `option${i}`,
-      label: `\u9009\u9879 ${i}`
-    }));
-    const wrapper = mount(Select, {
-      props: {
-        options: manyOptions,
-        virtualScroll: true,
-        height: 274,
-        itemHeight: 34
-      }
-    });
-    expect(wrapper.props("virtualScroll")).toBe(true);
-  });
-  it("should have correct ARIA attributes", () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    const input = wrapper.find("input");
-    expect(input.attributes("role")).toBe("combobox");
-    expect(input.attributes("aria-expanded")).toBeDefined();
-  });
-  it("should emit focus and blur events", async () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    await wrapper.find("input").trigger("focus");
-    expect(wrapper.emitted("focus")).toBeTruthy();
-    await wrapper.find("input").trigger("blur");
-    await new Promise((resolve) => setTimeout(resolve, 200));
-    expect(wrapper.emitted("blur")).toBeTruthy();
-  });
-  it("should expose focus and blur methods", () => {
-    const wrapper = mount(Select, {
-      props: { options }
-    });
-    const vm = wrapper.vm;
-    expect(typeof vm.focus).toBe("function");
-    expect(typeof vm.blur).toBe("function");
-  });
-  it("should respect multipleLimit", async () => {
-    const wrapper = mount(Select, {
-      props: {
-        options,
-        multiple: true,
-        multipleLimit: 2,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      }
-    });
-    await wrapper.trigger("click");
-    await nextTick();
-    const optionElements = wrapper.findAll(".yh-select__option");
-    if (optionElements.length > 2) {
-      await optionElements[2].trigger("click");
-      expect(wrapper.props("modelValue").length).toBe(2);
-    }
-  });
-  it("should work with slot mode (YhOption)", async () => {
-    const { YhOption } = await import("../index.mjs");
-    const wrapper = mount(Select, {
-      props: {
-        modelValue: "v1",
-        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
-      },
-      slots: {
-        default: () => [
-          h(YhOption, { value: "v1", label: "L1" }),
-          h(YhOption, { value: "v2", label: "L2", disabled: true })
-        ]
-      },
-      global: {
-        components: { YhOption }
-      }
-    });
-    await wrapper.trigger("click");
-    await nextTick();
-    expect(wrapper.find(".yh-select__selected-value").text()).toBe("L1");
-    wrapper.unmount();
-  });
-});

package/dist/skeleton/__tests__/skeleton.ssr.test.cjs

@@ -1,81 +0,0 @@
-"use strict";
-
-var _serverRenderer = require("@vue/server-renderer");
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _skeleton = _interopRequireDefault(require("../src/skeleton.vue"));
-var _skeletonItem = _interopRequireDefault(require("../src/skeleton-item.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhSkeleton SSR", () => {
-  (0, _vitest.it)("should render basic structure on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeleton.default, {
-      loading: true,
-      rows: 3,
-      animated: true
-    }));
-    (0, _vitest.expect)(html).toContain("yh-skeleton");
-    (0, _vitest.expect)(html).toContain("is-animated");
-    (0, _vitest.expect)(html).toContain("yh-skeleton-item");
-  });
-  (0, _vitest.it)("should render complex structure on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeleton.default, {
-      loading: true,
-      avatar: true,
-      title: true,
-      rows: 2
-    }));
-    (0, _vitest.expect)(html).toContain("yh-skeleton-item--circle");
-    (0, _vitest.expect)(html).toContain("yh-skeleton-item--h3");
-    const items = html.match(/yh-skeleton-item--text/g) || [];
-    (0, _vitest.expect)(items.length).toBe(2);
-  });
-  (0, _vitest.it)("should render content when loading is false", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeleton.default, {
-      loading: false
-    }, {
-      default: () => (0, _vue.h)("div", {
-        id: "real-content"
-      }, "Real Data")
-    }));
-    (0, _vitest.expect)(html).not.toContain("yh-skeleton-item");
-    (0, _vitest.expect)(html).toContain('id="real-content"');
-    (0, _vitest.expect)(html).toContain("Real Data");
-  });
-  (0, _vitest.it)("should render template slot correctly on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeleton.default, {
-      loading: true
-    }, {
-      template: () => (0, _vue.h)(_skeletonItem.default, {
-        variant: "image",
-        style: {
-          width: "100px"
-        }
-      })
-    }));
-    (0, _vitest.expect)(html).toContain("yh-skeleton-item");
-    (0, _vitest.expect)(html).toContain("yh-skeleton-item--image");
-    (0, _vitest.expect)(html).toContain("width:100px");
-  });
-});
-(0, _vitest.describe)("YhSkeletonItem SSR", () => {
-  (0, _vitest.it)("should render different variants on server", async () => {
-    const variants = ["circle", "rect", "button", "image"];
-    for (const variant of variants) {
-      const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeletonItem.default, {
-        variant
-      }));
-      (0, _vitest.expect)(html).toContain(`yh-skeleton-item--${variant}`);
-    }
-  });
-  (0, _vitest.it)("should support styles and rounds on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skeletonItem.default, {
-      variant: "rect",
-      width: 100,
-      height: 50,
-      round: true
-    }));
-    (0, _vitest.expect)(html).toContain("width:100px");
-    (0, _vitest.expect)(html).toContain("height:50px");
-    (0, _vitest.expect)(html).toContain("is-round");
-  });
-});

package/dist/skeleton/__tests__/skeleton.ssr.test.mjs

@@ -1,83 +0,0 @@
-import { renderToString } from "@vue/server-renderer";
-import { describe, it, expect } from "vitest";
-import { h } from "vue";
-import YhSkeleton from "../src/skeleton.vue";
-import YhSkeletonItem from "../src/skeleton-item.vue";
-describe("YhSkeleton SSR", () => {
-  it("should render basic structure on server", async () => {
-    const html = await renderToString(
-      h(YhSkeleton, {
-        loading: true,
-        rows: 3,
-        animated: true
-      })
-    );
-    expect(html).toContain("yh-skeleton");
-    expect(html).toContain("is-animated");
-    expect(html).toContain("yh-skeleton-item");
-  });
-  it("should render complex structure on server", async () => {
-    const html = await renderToString(
-      h(YhSkeleton, {
-        loading: true,
-        avatar: true,
-        title: true,
-        rows: 2
-      })
-    );
-    expect(html).toContain("yh-skeleton-item--circle");
-    expect(html).toContain("yh-skeleton-item--h3");
-    const items = html.match(/yh-skeleton-item--text/g) || [];
-    expect(items.length).toBe(2);
-  });
-  it("should render content when loading is false", async () => {
-    const html = await renderToString(
-      h(
-        YhSkeleton,
-        { loading: false },
-        {
-          default: () => h("div", { id: "real-content" }, "Real Data")
-        }
-      )
-    );
-    expect(html).not.toContain("yh-skeleton-item");
-    expect(html).toContain('id="real-content"');
-    expect(html).toContain("Real Data");
-  });
-  it("should render template slot correctly on server", async () => {
-    const html = await renderToString(
-      h(
-        YhSkeleton,
-        { loading: true },
-        {
-          template: () => h(YhSkeletonItem, { variant: "image", style: { width: "100px" } })
-        }
-      )
-    );
-    expect(html).toContain("yh-skeleton-item");
-    expect(html).toContain("yh-skeleton-item--image");
-    expect(html).toContain("width:100px");
-  });
-});
-describe("YhSkeletonItem SSR", () => {
-  it("should render different variants on server", async () => {
-    const variants = ["circle", "rect", "button", "image"];
-    for (const variant of variants) {
-      const html = await renderToString(h(YhSkeletonItem, { variant }));
-      expect(html).toContain(`yh-skeleton-item--${variant}`);
-    }
-  });
-  it("should support styles and rounds on server", async () => {
-    const html = await renderToString(
-      h(YhSkeletonItem, {
-        variant: "rect",
-        width: 100,
-        height: 50,
-        round: true
-      })
-    );
-    expect(html).toContain("width:100px");
-    expect(html).toContain("height:50px");
-    expect(html).toContain("is-round");
-  });
-});

package/dist/skeleton/__tests__/skeleton.test.cjs

@@ -1,72 +0,0 @@
-"use strict";
-
-var _testUtils = require("@vue/test-utils");
-var _vitest = require("vitest");
-var _skeleton = _interopRequireDefault(require("../src/skeleton.vue"));
-var _skeletonItem = _interopRequireDefault(require("../src/skeleton-item.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhSkeleton", () => {
-  (0, _vitest.it)("should render correct number of rows", () => {
-    const wrapper = (0, _testUtils.mount)(_skeleton.default, {
-      props: {
-        loading: true,
-        rows: 5
-      }
-    });
-    const items = wrapper.findAll(".yh-skeleton-item--text");
-    (0, _vitest.expect)(items.length).toBe(5);
-  });
-  (0, _vitest.it)("should show avatar when props set", () => {
-    const wrapper = (0, _testUtils.mount)(_skeleton.default, {
-      props: {
-        loading: true,
-        avatar: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-skeleton-item--circle").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should hidden when loading is false", () => {
-    const wrapper = (0, _testUtils.mount)(_skeleton.default, {
-      props: {
-        loading: false
-      },
-      slots: {
-        default: '<div class="real-content">Data</div>'
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-skeleton").exists()).toBe(false);
-    (0, _vitest.expect)(wrapper.find(".real-content").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should handle throttle correctly", async () => {
-    _vitest.vi.useFakeTimers();
-    const wrapper = (0, _testUtils.mount)(_skeleton.default, {
-      props: {
-        loading: true,
-        throttle: 500
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-skeleton").exists()).toBe(false);
-    _vitest.vi.advanceTimersByTime(501);
-    await wrapper.vm.$nextTick();
-    (0, _vitest.expect)(wrapper.find(".yh-skeleton").exists()).toBe(true);
-    _vitest.vi.useRealTimers();
-  });
-});
-(0, _vitest.describe)("YhSkeletonItem", () => {
-  (0, _vitest.it)("should apply variant class", () => {
-    const wrapper = (0, _testUtils.mount)(_skeletonItem.default, {
-      props: {
-        variant: "button"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-skeleton-item--button");
-  });
-  (0, _vitest.it)("should repeat correctly", () => {
-    const wrapper = (0, _testUtils.mount)(_skeletonItem.default, {
-      props: {
-        repeat: 3
-      }
-    });
-    (0, _vitest.expect)(wrapper.findAll(".yh-skeleton-item").length).toBe(3);
-  });
-});

package/dist/skeleton/__tests__/skeleton.test.mjs

@@ -1,65 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, it, expect, vi } from "vitest";
-import YhSkeleton from "../src/skeleton.vue";
-import YhSkeletonItem from "../src/skeleton-item.vue";
-describe("YhSkeleton", () => {
-  it("should render correct number of rows", () => {
-    const wrapper = mount(YhSkeleton, {
-      props: {
-        loading: true,
-        rows: 5
-      }
-    });
-    const items = wrapper.findAll(".yh-skeleton-item--text");
-    expect(items.length).toBe(5);
-  });
-  it("should show avatar when props set", () => {
-    const wrapper = mount(YhSkeleton, {
-      props: {
-        loading: true,
-        avatar: true
-      }
-    });
-    expect(wrapper.find(".yh-skeleton-item--circle").exists()).toBe(true);
-  });
-  it("should hidden when loading is false", () => {
-    const wrapper = mount(YhSkeleton, {
-      props: {
-        loading: false
-      },
-      slots: {
-        default: '<div class="real-content">Data</div>'
-      }
-    });
-    expect(wrapper.find(".yh-skeleton").exists()).toBe(false);
-    expect(wrapper.find(".real-content").exists()).toBe(true);
-  });
-  it("should handle throttle correctly", async () => {
-    vi.useFakeTimers();
-    const wrapper = mount(YhSkeleton, {
-      props: {
-        loading: true,
-        throttle: 500
-      }
-    });
-    expect(wrapper.find(".yh-skeleton").exists()).toBe(false);
-    vi.advanceTimersByTime(501);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find(".yh-skeleton").exists()).toBe(true);
-    vi.useRealTimers();
-  });
-});
-describe("YhSkeletonItem", () => {
-  it("should apply variant class", () => {
-    const wrapper = mount(YhSkeletonItem, {
-      props: { variant: "button" }
-    });
-    expect(wrapper.classes()).toContain("yh-skeleton-item--button");
-  });
-  it("should repeat correctly", () => {
-    const wrapper = mount(YhSkeletonItem, {
-      props: { repeat: 3 }
-    });
-    expect(wrapper.findAll(".yh-skeleton-item").length).toBe(3);
-  });
-});

package/dist/sku-selector/__tests__/sku-selector.ssr.test.cjs

@@ -1,32 +0,0 @@
-"use strict";
-
-var _serverRenderer = require("@vue/server-renderer");
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _skuSelector = _interopRequireDefault(require("../src/sku-selector.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("SkuSelector SSR", () => {
-  const specs = [{
-    id: "1",
-    name: "Color",
-    values: [{
-      id: "11",
-      name: "Red"
-    }]
-  }];
-  const skus = [{
-    id: "1",
-    specValueIds: ["11"],
-    price: 100,
-    stock: 10
-  }];
-  (0, _vitest.it)("renders correctly on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skuSelector.default, {
-      specs,
-      skus
-    }));
-    (0, _vitest.expect)(html).toContain("yh-sku-selector");
-    (0, _vitest.expect)(html).toContain("Color");
-    (0, _vitest.expect)(html).toContain("Red");
-  });
-});