@yh-ui/components 0.1.10 → 0.1.15

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

@@ -4,16 +4,33 @@ import YhFormSchema from "../src/form-schema.vue";
 import { nextTick, h } from "vue";
 const YhInput = {
   name: "YhInput",
-  props: ["modelValue", "placeholder"],
-  template: `<input class="yh-input" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" />`
+  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"],
+  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("basic rendering based on schema", async () => {
+  it("\u57FA\u7840\u6E32\u67D3 - \u6309 schema \u6E32\u67D3\u8868\u5355\u9879", async () => {
     const model = { username: "ant", role: "" };
     const schema = [
       {
@@ -24,29 +41,19 @@ describe("FormSchema", () => {
       }
     ];
     const wrapper = mount(YhFormSchema, {
-      props: {
-        modelValue: model,
-        schema
-      },
-      global: {
-        components: {
-          "yh-input": YhInput
-        }
-      }
+      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("handles value updates and v-model synchronization", async () => {
+  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: { "yh-input": YhInput } }
+      props: { modelValue: model, schema },
+      global: { components: globalComponents }
     });
     const input = wrapper.find("input");
     await input.setValue("new_user");
@@ -54,7 +61,18 @@ describe("FormSchema", () => {
     const lastEmitted = wrapper.emitted("update:modelValue").slice(-1)[0][0];
     expect(lastEmitted.username).toBe("new_user");
   });
-  it("supports dynamic visibility with hidden prop", async () => {
+  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" },
       {
@@ -65,20 +83,36 @@ describe("FormSchema", () => {
       }
     ];
     const wrapper = mount(YhFormSchema, {
-      props: {
-        modelValue: { showExtra: false, extra: "" },
-        schema
-      },
-      global: { components: { "yh-input": YhInput } }
+      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 wrapper.setProps({ modelValue: { showExtra: true, extra: "visible" } });
     await nextTick();
     expect(wrapper.text()).toContain("Extra Label");
   });
-  it("supports grouped schema with collapsible sections", async () => {
+  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",
@@ -87,38 +121,28 @@ describe("FormSchema", () => {
       }
     ];
     const wrapper = mount(YhFormSchema, {
-      props: {
-        modelValue: { name: "" },
-        schema
-      }
+      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("supports asyncOptions for select components", async () => {
+  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 schema = [{ field: "type", component: "select", asyncOptions }];
     const wrapper = mount(YhFormSchema, {
-      props: {
-        modelValue: { type: "" },
-        schema
-      },
-      global: { components: { "yh-select": YhSelect } }
+      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("supports render function", () => {
+  it("render \u51FD\u6570 - \u81EA\u5B9A\u4E49\u6E32\u67D3", () => {
     const schema = [
       {
         field: "custom",
@@ -126,21 +150,217 @@ describe("FormSchema", () => {
       }
     ];
     const wrapper = mount(YhFormSchema, {
-      props: {
-        modelValue: { custom: "hello" },
-        schema
-      }
+      props: { modelValue: { custom: "hello" }, schema },
+      global: { components: globalComponents }
     });
     expect(wrapper.find(".custom-render").text()).toBe("Val: hello");
   });
-  it("expose form methods", () => {
+  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: {},
-        schema: []
+      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");
     });
-    expect(typeof wrapper.vm.validate).toBe("function");
-    expect(typeof wrapper.vm.resetFields).toBe("function");
   });
 });

package/dist/form/index.cjs

@@ -38,6 +38,18 @@ Object.keys(_formItem2).forEach(function (key) {
     }
   });
 });
+var _formSchema2 = require("./src/form-schema.cjs");
+Object.keys(_formSchema2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formSchema2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formSchema2[key];
+    }
+  });
+});
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const YhForm = exports.YhForm = (0, _utils.withInstall)(_form.default);
 const YhFormItem = exports.YhFormItem = (0, _utils.withInstall)(_formItem.default);

package/dist/form/index.d.ts

@@ -1,13 +1,12 @@
 import Form from './src/form.vue';
 import FormItem from './src/form-item.vue';
-import FormSchema from './src/form-schema.vue';
 import './src/form.scss';
 export * from './src/form';
 export * from './src/form-item';
+export * from './src/form-schema';
 export declare const YhForm: any;
 export declare const YhFormItem: any;
 export declare const YhFormSchema: any;
 export default YhForm;
 export type FormInstance = InstanceType<typeof Form>;
 export type FormItemInstance = InstanceType<typeof FormItem>;
-export type FormSchemaInstance = InstanceType<typeof FormSchema>;

package/dist/form/index.mjs

@@ -5,6 +5,7 @@ import FormSchema from "./src/form-schema.vue";
 import "./src/form.scss";
 export * from "./src/form.mjs";
 export * from "./src/form-item.mjs";
+export * from "./src/form-schema.mjs";
 export const YhForm = withInstall(Form);
 export const YhFormItem = withInstall(FormItem);
 export const YhFormSchema = withInstall(FormSchema);

package/dist/form/src/form-item.d.vue.ts

@@ -1,5 +1,6 @@
 import type { FormRule } from './form';
 import type { ValidateStatus } from './form-item';
+import { type ComponentThemeVars } from '@yh-ui/theme';
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
@@ -121,7 +122,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
 }>> & Readonly<{}>, {
     readonly disabled: boolean;
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly themeOverrides: ComponentThemeVars;
     readonly size: "small" | "default" | "large";
     readonly label: string;
     readonly error: string;

package/dist/form/src/form-item.vue

@@ -16,7 +16,9 @@ const formContext = inject(FormContextKey, null);
 const { globalSize } = useConfig();
 const { themeStyle } = useComponentTheme(
   "form-item",
-  computed(() => props.themeOverrides || formContext?.themeOverrides)
+  computed(
+    () => props.themeOverrides || formContext?.themeOverrides
+  )
 );
 const id = useId().value;
 const labelId = `yh-label-${id}`;

package/dist/form/src/form-item.vue.d.ts

@@ -1,5 +1,6 @@
 import type { FormRule } from './form';
 import type { ValidateStatus } from './form-item';
+import { type ComponentThemeVars } from '@yh-ui/theme';
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
@@ -121,7 +122,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
 }>> & Readonly<{}>, {
     readonly disabled: boolean;
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly themeOverrides: ComponentThemeVars;
     readonly size: "small" | "default" | "large";
     readonly label: string;
     readonly error: string;

package/dist/form/src/form-schema.cjs

@@ -28,7 +28,8 @@ const formSchemaProps = exports.formSchemaProps = {
     default: () => ({})
   },
   /**
-   * 栅格间隔
+   * 栅格间距（px）
+   * @default 20
    */
   gutter: {
     type: Number,