@yh-ui/components 0.1.21 → 0.1.22

package/dist/form/__tests__/form-schema.test.mjs

@@ -1,366 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, it, expect, vi } from "vitest";
-import YhFormSchema from "../src/form-schema.vue";
-import { nextTick, h } from "vue";
-const YhInput = {
-  name: "YhInput",
-  props: ["modelValue", "placeholder", "disabled"],
-  template: `<input class="yh-input" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" :disabled="disabled" />`
-};
-const YhSelect = {
-  name: "YhSelect",
-  props: ["modelValue", "options", "loading"],
-  template: `<select class="yh-select" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)"><option v-for="opt in options" :key="opt.value" :value="opt.value">{{opt.label}}</option></select>`
-};
-const YhSwitch = {
-  name: "YhSwitch",
-  props: ["modelValue"],
-  template: `<input type="checkbox" class="yh-switch" :checked="modelValue" @change="$emit('update:modelValue', $event.target.checked)" />`
-};
-const YhButton = {
-  name: "YhButton",
-  props: ["type", "text", "disabled"],
-  emits: ["click"],
-  template: `<button class="yh-button" :disabled="disabled" @click="$emit('click')"><slot /></button>`
-};
-const globalComponents = {
-  "yh-input": YhInput,
-  "yh-select": YhSelect,
-  "yh-switch": YhSwitch,
-  "yh-button": YhButton
-};
-describe("FormSchema", () => {
-  it("\u57FA\u7840\u6E32\u67D3 - \u6309 schema \u6E32\u67D3\u8868\u5355\u9879", async () => {
-    const model = { username: "ant", role: "" };
-    const schema = [
-      {
-        field: "username",
-        label: "Username",
-        component: "input",
-        props: { placeholder: "Enter username" }
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: model, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.find(".yh-form").exists()).toBe(true);
-    const input = wrapper.find("input");
-    expect(input.attributes("placeholder")).toBe("Enter username");
-  });
-  it("\u53CC\u5411\u7ED1\u5B9A - v-model \u540C\u6B65\u66F4\u65B0", async () => {
-    const model = { username: "" };
-    const schema = [{ field: "username", component: "input" }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: model, schema },
-      global: { components: globalComponents }
-    });
-    const input = wrapper.find("input");
-    await input.setValue("new_user");
-    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
-    const lastEmitted = wrapper.emitted("update:modelValue").slice(-1)[0][0];
-    expect(lastEmitted.username).toBe("new_user");
-  });
-  it("change \u4E8B\u4EF6 - \u89E6\u53D1 change \u5E76\u5305\u542B field \u548C val", async () => {
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { name: "" }, schema: [{ field: "name", component: "input" }] },
-      global: { components: globalComponents }
-    });
-    await wrapper.find("input").setValue("test");
-    const changeEvents = wrapper.emitted("change");
-    expect(changeEvents.length).toBeGreaterThan(0);
-    expect(changeEvents[0][0]).toBe("name");
-    expect(changeEvents[0][1]).toBe("test");
-  });
-  it("\u52A8\u6001\u663E\u9690 - hidden \u51FD\u6570\u652F\u6301\u8054\u52A8", async () => {
-    const schema = [
-      { field: "showExtra", component: "input" },
-      {
-        field: "extra",
-        label: "Extra Label",
-        component: "input",
-        hidden: (m) => !m.showExtra
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { showExtra: false, extra: "" }, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.text()).not.toContain("Extra Label");
-    await wrapper.setProps({ modelValue: { showExtra: true, extra: "visible" } });
-    await nextTick();
-    expect(wrapper.text()).toContain("Extra Label");
-  });
-  it("\u52A8\u6001\u8054\u52A8 - required \u548C rules \u652F\u6301\u4F20\u5165\u51FD\u6570\u8BA1\u7B97", async () => {
-    const schema = [
-      { field: "type", component: "input" },
-      {
-        field: "reason",
-        component: "input",
-        required: (model) => model.type === "other",
-        rules: (model) => {
-          return model.type === "other" ? [{ min: 5, message: "\u81F3\u5C11 5 \u4E2A\u5B57\u7B26", trigger: "blur" }] : [];
-        }
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { type: "normal", reason: "" }, schema },
-      global: { components: globalComponents }
-    });
-    const reasonItem = wrapper.findAll(".yh-form-item")[1];
-    expect(reasonItem.classes()).not.toContain("is-required");
-    await wrapper.setProps({ modelValue: { type: "other", reason: "" } });
-    expect(reasonItem.classes()).toContain("is-required");
-  });
-  it("\u5206\u7EC4\u6E32\u67D3 - \u5C55\u793A group title \u5E76\u652F\u6301\u6298\u53E0", async () => {
-    const schema = [
-      {
-        title: "Basic Info",
-        items: [{ field: "name", component: "input" }],
-        collapsible: true
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { name: "" }, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.find(".yh-form-schema__group-title").text()).toContain("Basic Info");
-    await wrapper.find(".yh-form-schema__group-title").trigger("click");
-    expect(wrapper.find(".yh-form-schema__group").classes()).toContain("is-collapsed");
-  });
-  it("\u5F02\u6B65\u9009\u9879 - asyncOptions \u81EA\u52A8\u52A0\u8F7D\u5E76\u6CE8\u5165", async () => {
-    const asyncOptions = vi.fn().mockResolvedValue([{ label: "Option A", value: "a" }]);
-    const schema = [{ field: "type", component: "select", asyncOptions }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { type: "" }, schema },
-      global: { components: globalComponents }
-    });
-    await nextTick();
-    await nextTick();
-    await nextTick();
-    expect(asyncOptions).toHaveBeenCalled();
-    const options = wrapper.findAll("option");
-    expect(options.length).toBeGreaterThan(0);
-  });
-  it("render \u51FD\u6570 - \u81EA\u5B9A\u4E49\u6E32\u67D3", () => {
-    const schema = [
-      {
-        field: "custom",
-        render: (m) => h("div", { class: "custom-render" }, `Val: ${m.custom}`)
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { custom: "hello" }, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.find(".custom-render").text()).toBe("Val: hello");
-  });
-  it("\u66B4\u9732 API - validate/resetFields/clearValidate/getModel/setFieldValue", () => {
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: {}, schema: [] },
-      global: { components: globalComponents }
-    });
-    const vm = wrapper.vm;
-    expect(typeof vm.validate).toBe("function");
-    expect(typeof vm.resetFields).toBe("function");
-    expect(typeof vm.clearValidate).toBe("function");
-    expect(typeof vm.getModel).toBe("function");
-    expect(typeof vm.setFieldValue).toBe("function");
-  });
-  it("getModel - \u8FD4\u56DE\u5F53\u524D\u5B8C\u6574 model \u5FEB\u7167", async () => {
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { city: "BJ" }, schema: [{ field: "city", component: "input" }] },
-      global: { components: globalComponents }
-    });
-    const model = wrapper.vm.getModel();
-    expect(model.city).toBe("BJ");
-  });
-  it("setFieldValue - \u52A8\u6001\u66F4\u65B0\u5355\u5B57\u6BB5\u503C", async () => {
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { city: "" }, schema: [{ field: "city", component: "input" }] },
-      global: { components: globalComponents }
-    });
-    wrapper.vm.setFieldValue("city", "SH");
-    await nextTick();
-    const emitted = wrapper.emitted("update:modelValue");
-    const last = emitted[emitted.length - 1][0];
-    expect(last.city).toBe("SH");
-  });
-  it("required \u7B80\u5199 - \u81EA\u52A8\u6DFB\u52A0\u5FC5\u586B\u89C4\u5219\u5E76\u89E6\u53D1\u6821\u9A8C", async () => {
-    const schema = [{ field: "name", label: "\u59D3\u540D", component: "input", required: true }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { name: "" }, schema },
-      global: { components: globalComponents }
-    });
-    let isValid = true;
-    try {
-      isValid = await wrapper.vm.validate();
-    } catch (_) {
-      isValid = false;
-    }
-    expect(isValid).toBe(false);
-  });
-  it("type divider - \u6E32\u67D3\u5206\u9694\u7EBF", () => {
-    const schema = [{ type: "divider", label: "\u57FA\u672C\u4FE1\u606F", field: "_d" }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: {}, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.find(".yh-form-schema__divider").exists()).toBe(true);
-    expect(wrapper.find(".yh-form-schema__divider-label").text()).toBe("\u57FA\u672C\u4FE1\u606F");
-  });
-  it("type text - \u53EA\u8BFB\u663E\u793A\u5B57\u6BB5\u503C", () => {
-    const schema = [{ type: "text", label: "\u59D3\u540D", field: "name" }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { name: "Alice" }, schema },
-      global: { components: globalComponents }
-    });
-    expect(wrapper.find(".yh-form-schema__text-value").text()).toBe("Alice");
-  });
-  it("type text - emptyValue \u7A7A\u6001\u5360\u4F4D\u7B26", async () => {
-    const schema = [
-      { type: "text", label: "\u7535\u8BDD", field: "phone", emptyValue: "\u6682\u65E0" },
-      { type: "text", label: "\u5730\u5740", field: "addr" }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { phone: null, addr: void 0 }, schema },
-      global: { components: globalComponents }
-    });
-    await nextTick();
-    const items = wrapper.findAll(".yh-form-schema__text-value");
-    expect(items[0].text()).toBe("\u6682\u65E0");
-    expect(items[1].text()).toBe("-");
-  });
-  it("defaultValue - \u672A\u8BBE\u7F6E\u5B57\u6BB5\u65F6\u586B\u5145\u9ED8\u8BA4\u503C", async () => {
-    const schema = [{ field: "city", component: "input", defaultValue: "Beijing" }];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: {}, schema },
-      global: { components: globalComponents }
-    });
-    await nextTick();
-    const emitted = wrapper.emitted("update:modelValue");
-    expect(emitted).toBeTruthy();
-    const last = emitted[emitted.length - 1][0];
-    expect(last.city).toBe("Beijing");
-  });
-  it("disabled \u51FD\u6570 - \u6839\u636E model \u52A8\u6001\u7981\u7528\u5B57\u6BB5", async () => {
-    const schema = [
-      { field: "toggle", component: "switch" },
-      {
-        field: "target",
-        component: "input",
-        disabled: (m) => !m.toggle
-      }
-    ];
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { toggle: false, target: "" }, schema },
-      global: { components: globalComponents }
-    });
-    const input = wrapper.find('input[type="text"], input:not([type="checkbox"])').element;
-    expect(input.disabled).toBe(true);
-  });
-  it("\u5916\u90E8 modelValue \u66F4\u65B0 - localModel \u540C\u6B65\u54CD\u5E94", async () => {
-    const wrapper = mount(YhFormSchema, {
-      props: { modelValue: { name: "old" }, schema: [{ field: "name", component: "input" }] },
-      global: { components: globalComponents }
-    });
-    await wrapper.setProps({ modelValue: { name: "new" } });
-    await nextTick();
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("new");
-  });
-  describe("type list - \u52A8\u6001\u589E\u51CF\u5217\u8868", () => {
-    const listSchema = [
-      { field: "name", label: "\u59D3\u540D", component: "input" },
-      { field: "phone", label: "\u7535\u8BDD", component: "input" }
-    ];
-    it("\u521D\u59CB\u6E32\u67D3 - \u6309\u5DF2\u6709\u5217\u8868\u6570\u636E\u6E32\u67D3\u884C", async () => {
-      const schema = [
-        { field: "contacts", label: "\u8054\u7CFB\u4EBA", type: "list", listSchema, listProps: {} }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: {
-          modelValue: {
-            contacts: [
-              { name: "Alice", phone: "111" },
-              { name: "Bob", phone: "222" }
-            ]
-          },
-          schema
-        },
-        global: { components: globalComponents }
-      });
-      await nextTick();
-      expect(wrapper.findAll(".yh-form-schema__list-row").length).toBe(2);
-    });
-    it("\u6DFB\u52A0\u5217\u8868\u9879 - \u70B9\u51FB\u6DFB\u52A0\u6309\u94AE\u589E\u52A0\u4E00\u884C", async () => {
-      const schema = [
-        { field: "contacts", label: "\u8054\u7CFB\u4EBA", type: "list", listSchema, listProps: {} }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: { modelValue: { contacts: [] }, schema },
-        global: { components: globalComponents }
-      });
-      await wrapper.find(".yh-form-schema__list-add").trigger("click");
-      await nextTick();
-      const emitted = wrapper.emitted("update:modelValue");
-      const last = emitted[emitted.length - 1][0];
-      expect(last.contacts.length).toBe(1);
-    });
-    it("\u5220\u9664\u5217\u8868\u9879 - \u70B9\u51FB\u5220\u9664\u6309\u94AE\u79FB\u9664\u5BF9\u5E94\u884C", async () => {
-      const schema = [
-        { field: "contacts", label: "\u8054\u7CFB\u4EBA", type: "list", listSchema, listProps: {} }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: { modelValue: { contacts: [{ name: "Alice", phone: "111" }] }, schema },
-        global: { components: globalComponents }
-      });
-      await nextTick();
-      await wrapper.find(".yh-form-schema__list-delete").trigger("click");
-      await nextTick();
-      const emitted = wrapper.emitted("update:modelValue");
-      const last = emitted[emitted.length - 1][0];
-      expect(last.contacts.length).toBe(0);
-    });
-    it("max \u9650\u5236 - \u8D85\u51FA\u6700\u5927\u6570\u91CF\u65F6\u7981\u7528\u6DFB\u52A0\u6309\u94AE", async () => {
-      const schema = [
-        { field: "contacts", label: "\u8054\u7CFB\u4EBA", type: "list", listSchema, listProps: { max: 1 } }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: { modelValue: { contacts: [{ name: "Alice", phone: "111" }] }, schema },
-        global: { components: globalComponents }
-      });
-      await nextTick();
-      const addBtn = wrapper.find(".yh-form-schema__list-add");
-      expect(addBtn.attributes("disabled")).toBeDefined();
-    });
-    it("min \u9650\u5236 - \u672A\u8FBE\u5230\u6700\u5C0F\u6570\u91CF\u65F6\u7981\u7528\u5220\u9664\u6309\u94AE", async () => {
-      const schema = [
-        { field: "contacts", label: "\u8054\u7CFB\u4EBA", type: "list", listSchema, listProps: { min: 1 } }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: { modelValue: { contacts: [{ name: "Alice", phone: "111" }] }, schema },
-        global: { components: globalComponents }
-      });
-      await nextTick();
-      const delBtn = wrapper.find(".yh-form-schema__list-delete");
-      expect(delBtn.attributes("disabled")).toBeDefined();
-    });
-    it("addButtonText - \u81EA\u5B9A\u4E49\u6DFB\u52A0\u6309\u94AE\u6587\u6848", async () => {
-      const schema = [
-        {
-          field: "contacts",
-          label: "\u8054\u7CFB\u4EBA",
-          type: "list",
-          listSchema,
-          listProps: { addButtonText: "\u65B0\u589E\u8054\u7CFB\u4EBA" }
-        }
-      ];
-      const wrapper = mount(YhFormSchema, {
-        props: { modelValue: { contacts: [] }, schema },
-        global: { components: globalComponents }
-      });
-      expect(wrapper.find(".yh-form-schema__list-add").text()).toContain("\u65B0\u589E\u8054\u7CFB\u4EBA");
-    });
-  });
-});

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

@@ -1,74 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _form = _interopRequireDefault(require("../src/form.vue"));
-var _formItem = _interopRequireDefault(require("../src/form-item.vue"));
-var _input = _interopRequireDefault(require("../../input/src/input.vue"));
-var _ssr = require("../../__tests__/utils/ssr.cjs");
-var _vue = require("vue");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhForm SSR", () => {
-  (0, _vitest.it)("should render form correctly in SSR", async () => {
-    const html = await (0, _ssr.renderSSR)(_form.default, {
-      model: {
-        name: ""
-      },
-      labelWidth: "100px"
-    }, {
-      default: () => (0, _vue.h)(_formItem.default, {
-        label: "Name",
-        prop: "name"
-      }, {
-        default: () => (0, _vue.h)(_input.default, {
-          modelValue: ""
-        })
-      })
-    });
-    (0, _ssr.expectSSRHasClass)(html, "yh-form");
-    (0, _vitest.expect)(html).toContain("Name");
-  });
-  (0, _vitest.it)("should render inline form in SSR", async () => {
-    const html = await (0, _ssr.renderSSR)(_form.default, {
-      layout: "inline",
-      model: {}
-    });
-    (0, _ssr.expectSSRHasClass)(html, "yh-form--inline");
-  });
-  (0, _vitest.it)("should render different label positions in SSR", async () => {
-    const positions = ["left", "right", "top"];
-    for (const pos of positions) {
-      const html = await (0, _ssr.renderSSR)(_form.default, {
-        labelPosition: pos,
-        model: {}
-      });
-      (0, _ssr.expectSSRHasClass)(html, `yh-form--label-${pos}`);
-    }
-  });
-  (0, _vitest.it)("should hydrate form without mismatch", async () => {
-    const result = await (0, _ssr.testHydration)(_form.default, {
-      model: {
-        test: "123"
-      }
-    }, {
-      default: () => (0, _vue.h)(_formItem.default, {
-        label: "Test",
-        prop: "test"
-      }, {
-        default: () => (0, _vue.h)(_input.default, {
-          modelValue: "123"
-        })
-      })
-    });
-    (0, _vitest.expect)(result.isMatch).toBe(true);
-  });
-  (0, _vitest.it)("should render validation states in SSR", async () => {
-    const html = await (0, _ssr.renderSSR)(_formItem.default, {
-      label: "Email",
-      error: "Invalid email",
-      showMessage: true,
-      validateStatus: "error"
-    });
-    (0, _ssr.expectSSRHasClass)(html, "is-error");
-    (0, _vitest.expect)(html).toContain("Invalid email");
-  });
-});

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

@@ -1,73 +0,0 @@
-import { describe, it, expect } from "vitest";
-import Form from "../src/form.vue";
-import FormItem from "../src/form-item.vue";
-import Input from "../../input/src/input.vue";
-import { renderSSR, expectSSRHasClass, testHydration } from "../../__tests__/utils/ssr.mjs";
-import { h } from "vue";
-describe("YhForm SSR", () => {
-  it("should render form correctly in SSR", async () => {
-    const html = await renderSSR(
-      Form,
-      {
-        model: { name: "" },
-        labelWidth: "100px"
-      },
-      {
-        default: () => h(
-          FormItem,
-          { label: "Name", prop: "name" },
-          {
-            default: () => h(Input, { modelValue: "" })
-          }
-        )
-      }
-    );
-    expectSSRHasClass(html, "yh-form");
-    expect(html).toContain("Name");
-  });
-  it("should render inline form in SSR", async () => {
-    const html = await renderSSR(Form, {
-      layout: "inline",
-      model: {}
-    });
-    expectSSRHasClass(html, "yh-form--inline");
-  });
-  it("should render different label positions in SSR", async () => {
-    const positions = ["left", "right", "top"];
-    for (const pos of positions) {
-      const html = await renderSSR(Form, {
-        labelPosition: pos,
-        model: {}
-      });
-      expectSSRHasClass(html, `yh-form--label-${pos}`);
-    }
-  });
-  it("should hydrate form without mismatch", async () => {
-    const result = await testHydration(
-      Form,
-      {
-        model: { test: "123" }
-      },
-      {
-        default: () => h(
-          FormItem,
-          { label: "Test", prop: "test" },
-          {
-            default: () => h(Input, { modelValue: "123" })
-          }
-        )
-      }
-    );
-    expect(result.isMatch).toBe(true);
-  });
-  it("should render validation states in SSR", async () => {
-    const html = await renderSSR(FormItem, {
-      label: "Email",
-      error: "Invalid email",
-      showMessage: true,
-      validateStatus: "error"
-    });
-    expectSSRHasClass(html, "is-error");
-    expect(html).toContain("Invalid email");
-  });
-});