@yh-ui/components 0.1.0

package/dist/progress/src/progress.vue.d.ts

@@ -0,0 +1,199 @@
+declare var __VLS_1: {
+    percentage: any;
+}, __VLS_3: {
+    percentage: any;
+}, __VLS_5: {
+    percentage: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly type: {
+        readonly type: import("vue").PropType<import("./progress").ProgressType>;
+        readonly default: "line";
+    };
+    readonly percentage: {
+        readonly type: import("vue").PropType<number | number[]>;
+        readonly default: 0;
+    };
+    readonly secondaryPercentage: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly status: {
+        readonly type: import("vue").PropType<import("./progress").ProgressStatus>;
+    };
+    readonly strokeWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly textInside: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 126;
+    };
+    readonly showText: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly color: {
+        readonly type: import("vue").PropType<string | ((p: number) => string) | string[] | Record<string, string>>;
+        readonly default: "";
+    };
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly animated: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly defineBackgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly format: {
+        readonly type: import("vue").PropType<(percentage: number) => string>;
+    };
+    readonly strokeLinecap: {
+        readonly type: import("vue").PropType<"butt" | "round" | "square">;
+        readonly default: "round";
+    };
+    readonly striped: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly stripedFlow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly indeterminate: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly duration: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly steps: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly type: {
+        readonly type: import("vue").PropType<import("./progress").ProgressType>;
+        readonly default: "line";
+    };
+    readonly percentage: {
+        readonly type: import("vue").PropType<number | number[]>;
+        readonly default: 0;
+    };
+    readonly secondaryPercentage: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly status: {
+        readonly type: import("vue").PropType<import("./progress").ProgressStatus>;
+    };
+    readonly strokeWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly textInside: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 126;
+    };
+    readonly showText: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly color: {
+        readonly type: import("vue").PropType<string | ((p: number) => string) | string[] | Record<string, string>>;
+        readonly default: "";
+    };
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly animated: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly defineBackgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly format: {
+        readonly type: import("vue").PropType<(percentage: number) => string>;
+    };
+    readonly strokeLinecap: {
+        readonly type: import("vue").PropType<"butt" | "round" | "square">;
+        readonly default: "round";
+    };
+    readonly striped: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly stripedFlow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly indeterminate: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly duration: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly steps: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly type: "circle" | "line" | "dashboard";
+    readonly width: number;
+    readonly color: string | string[] | Record<string, string> | ((p: number) => string);
+    readonly icon: string;
+    readonly strokeLinecap: "round" | "butt" | "square";
+    readonly strokeWidth: number;
+    readonly duration: number;
+    readonly indeterminate: boolean;
+    readonly steps: number;
+    readonly percentage: number | number[];
+    readonly secondaryPercentage: number;
+    readonly textInside: boolean;
+    readonly showText: boolean;
+    readonly animated: boolean;
+    readonly defineBackgroundColor: string;
+    readonly striped: boolean;
+    readonly stripedFlow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/radio/__tests__/radio-button.test.cjs

@@ -0,0 +1,99 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _vue = require("vue");
+var _radioGroup = _interopRequireDefault(require("../src/radio-group.vue"));
+var _radioButton = _interopRequireDefault(require("../src/radio-button.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhRadioButton", () => {
+  (0, _vitest.it)("renders properly", () => {
+    const wrapper = (0, _testUtils.mount)(_radioButton.default, {
+      props: {
+        label: "Option 1",
+        value: "1"
+      }
+    });
+    (0, _vitest.expect)(wrapper.text()).toContain("Option 1");
+  });
+  (0, _vitest.it)("works with RadioGroup", async () => {
+    const modelValue = (0, _vue.ref)("1");
+    const wrapper = (0, _testUtils.mount)(_radioGroup.default, {
+      props: {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": async val => {
+          modelValue.value = val;
+          await wrapper.setProps({
+            modelValue: val
+          });
+        }
+      },
+      slots: {
+        default: () => [
+        // @ts-ignore
+        (0, _vue.h)(_radioButton.default, {
+          value: "1",
+          label: "Option 1"
+        }),
+        // @ts-ignore
+        (0, _vue.h)(_radioButton.default, {
+          value: "2",
+          label: "Option 2"
+        })]
+      }
+    });
+    const radios = wrapper.findAll(".yh-radio-button");
+    (0, _vitest.expect)(radios.length).toBe(2);
+    (0, _vitest.expect)(radios[0].classes()).toContain("is-checked");
+    (0, _vitest.expect)(radios[1].classes()).not.toContain("is-checked");
+    await radios[1].find("input").trigger("change");
+    (0, _vitest.expect)(modelValue.value).toBe("2");
+    (0, _vitest.expect)(radios[0].classes()).not.toContain("is-checked");
+    (0, _vitest.expect)(radios[1].classes()).toContain("is-checked");
+  });
+  (0, _vitest.it)("disabled state", async () => {
+    const wrapper = (0, _testUtils.mount)(_radioGroup.default, {
+      props: {
+        modelValue: "1",
+        disabled: true
+      },
+      slots: {
+        default: () => [
+        // @ts-ignore
+        (0, _vue.h)(_radioButton.default, {
+          value: "1",
+          label: "Option 1"
+        }),
+        // @ts-ignore
+        (0, _vue.h)(_radioButton.default, {
+          value: "2",
+          label: "Option 2"
+        })]
+      }
+    });
+    const radios = wrapper.findAll(".yh-radio-button");
+    (0, _vitest.expect)(radios[0].classes()).toContain("is-disabled");
+    (0, _vitest.expect)(radios[0].find("input").element.disabled).toBe(true);
+  });
+  (0, _vitest.it)("custom colors", async () => {
+    const wrapper = (0, _testUtils.mount)(_radioGroup.default, {
+      props: {
+        modelValue: "1",
+        fill: "#ff0000",
+        textColor: "#00ff00"
+      },
+      slots: {
+        default: () => [
+        // @ts-ignore
+        (0, _vue.h)(_radioButton.default, {
+          value: "1",
+          label: "Option 1"
+        })]
+      }
+    });
+    await (0, _vue.nextTick)();
+    const label = wrapper.find("label");
+    (0, _vitest.expect)(label.attributes("style")).toContain("--yh-radio-button-checked-bg-color: #ff0000");
+    (0, _vitest.expect)(label.attributes("style")).toContain("--yh-radio-button-checked-text-color: #00ff00");
+  });
+});

package/dist/radio/__tests__/radio-button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/radio/__tests__/radio-button.test.mjs

@@ -0,0 +1,83 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import { ref, nextTick } from "vue";
+import YhRadioGroup from "../src/radio-group.vue";
+import YhRadioButton from "../src/radio-button.vue";
+describe("YhRadioButton", () => {
+  it("renders properly", () => {
+    const wrapper = mount(YhRadioButton, {
+      props: {
+        label: "Option 1",
+        value: "1"
+      }
+    });
+    expect(wrapper.text()).toContain("Option 1");
+  });
+  it("works with RadioGroup", async () => {
+    const modelValue = ref("1");
+    const wrapper = mount(YhRadioGroup, {
+      props: {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": async (val) => {
+          modelValue.value = val;
+          await wrapper.setProps({ modelValue: val });
+        }
+      },
+      slots: {
+        default: () => [
+          // @ts-ignore
+          h(YhRadioButton, { value: "1", label: "Option 1" }),
+          // @ts-ignore
+          h(YhRadioButton, { value: "2", label: "Option 2" })
+        ]
+      }
+    });
+    const radios = wrapper.findAll(".yh-radio-button");
+    expect(radios.length).toBe(2);
+    expect(radios[0].classes()).toContain("is-checked");
+    expect(radios[1].classes()).not.toContain("is-checked");
+    await radios[1].find("input").trigger("change");
+    expect(modelValue.value).toBe("2");
+    expect(radios[0].classes()).not.toContain("is-checked");
+    expect(radios[1].classes()).toContain("is-checked");
+  });
+  it("disabled state", async () => {
+    const wrapper = mount(YhRadioGroup, {
+      props: {
+        modelValue: "1",
+        disabled: true
+      },
+      slots: {
+        default: () => [
+          // @ts-ignore
+          h(YhRadioButton, { value: "1", label: "Option 1" }),
+          // @ts-ignore
+          h(YhRadioButton, { value: "2", label: "Option 2" })
+        ]
+      }
+    });
+    const radios = wrapper.findAll(".yh-radio-button");
+    expect(radios[0].classes()).toContain("is-disabled");
+    expect(radios[0].find("input").element.disabled).toBe(true);
+  });
+  it("custom colors", async () => {
+    const wrapper = mount(YhRadioGroup, {
+      props: {
+        modelValue: "1",
+        fill: "#ff0000",
+        textColor: "#00ff00"
+      },
+      slots: {
+        default: () => [
+          // @ts-ignore
+          h(YhRadioButton, { value: "1", label: "Option 1" })
+        ]
+      }
+    });
+    await nextTick();
+    const label = wrapper.find("label");
+    expect(label.attributes("style")).toContain("--yh-radio-button-checked-bg-color: #ff0000");
+    expect(label.attributes("style")).toContain("--yh-radio-button-checked-text-color: #00ff00");
+  });
+});
+import { h } from "vue";

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

@@ -0,0 +1,132 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _radio = _interopRequireDefault(require("../src/radio.vue"));
+var _radioButton = _interopRequireDefault(require("../src/radio-button.vue"));
+var _radioGroup = _interopRequireDefault(require("../src/radio-group.vue"));
+var _ssr = require("../../__tests__/utils/ssr.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhRadio SSR", () => {
+  (0, _vitest.it)("should render correctly in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radio.default, {
+      modelValue: "option1",
+      label: "option1"
+    }, {
+      default: () => "Radio Label"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio");
+    (0, _vitest.expect)(html).toContain("Radio Label");
+  });
+  (0, _vitest.it)("should render checked state in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radio.default, {
+      modelValue: "selected",
+      label: "selected",
+      value: "selected"
+    }, {
+      default: () => "Selected"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "is-checked");
+  });
+  (0, _vitest.it)("should render unchecked state in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radio.default, {
+      modelValue: "other",
+      label: "selected"
+    }, {
+      default: () => "Not Selected"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio");
+  });
+  (0, _vitest.it)("should render disabled state in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radio.default, {
+      modelValue: "",
+      label: "option",
+      disabled: true
+    }, {
+      default: () => "Disabled"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "is-disabled");
+  });
+  (0, _vitest.it)("should render different sizes in SSR", async () => {
+    const sizes = ["small", "default", "large"];
+    for (const size of sizes) {
+      const html = await (0, _ssr.renderSSR)(_radio.default, {
+        modelValue: "",
+        label: "test",
+        size
+      }, {
+        default: () => `Size ${size}`
+      });
+      if (size !== "default") {
+        (0, _ssr.expectSSRHasClass)(html, `yh-radio--${size}`);
+      }
+    }
+  });
+  (0, _vitest.it)("should render border style in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radio.default, {
+      modelValue: "",
+      label: "bordered",
+      border: true
+    }, {
+      default: () => "Bordered"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "is-bordered");
+  });
+  (0, _vitest.it)("should hydrate without mismatch", async () => {
+    const result = await (0, _ssr.testHydration)(_radio.default, {
+      modelValue: "test",
+      label: "test"
+    }, {
+      default: () => "Hydration Test"
+    });
+    (0, _vitest.expect)(result.isMatch).toBe(true);
+  });
+});
+(0, _vitest.describe)("YhRadioButton SSR", () => {
+  (0, _vitest.it)("should render button style in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radioButton.default, {
+      modelValue: "button1",
+      label: "button1"
+    }, {
+      default: () => "Button Radio"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio-button");
+  });
+  (0, _vitest.it)("should render checked button in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radioButton.default, {
+      modelValue: "active",
+      label: "active",
+      value: "active"
+    }, {
+      default: () => "Active Button"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "is-checked");
+  });
+});
+(0, _vitest.describe)("YhRadioGroup SSR", () => {
+  (0, _vitest.it)("should render group correctly in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radioGroup.default, {
+      modelValue: "option1"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio-group");
+  });
+  (0, _vitest.it)("should hydrate group without mismatch", async () => {
+    const result = await (0, _ssr.testHydration)(_radioGroup.default, {
+      modelValue: "option2"
+    });
+    (0, _vitest.expect)(result.isMatch).toBe(true);
+  });
+  (0, _vitest.it)("should render group with size in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radioGroup.default, {
+      modelValue: "",
+      size: "large"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio-group--large");
+  });
+  (0, _vitest.it)("should render disabled group in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_radioGroup.default, {
+      modelValue: "",
+      disabled: true
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-radio-group");
+  });
+});

package/dist/radio/__tests__/radio.ssr.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,165 @@
+import { describe, it, expect } from "vitest";
+import Radio from "../src/radio.vue";
+import RadioButton from "../src/radio-button.vue";
+import RadioGroup from "../src/radio-group.vue";
+import { renderSSR, expectSSRHasClass, testHydration } from "../../__tests__/utils/ssr.mjs";
+describe("YhRadio SSR", () => {
+  it("should render correctly in SSR", async () => {
+    const html = await renderSSR(
+      Radio,
+      {
+        modelValue: "option1",
+        label: "option1"
+      },
+      {
+        default: () => "Radio Label"
+      }
+    );
+    expectSSRHasClass(html, "yh-radio");
+    expect(html).toContain("Radio Label");
+  });
+  it("should render checked state in SSR", async () => {
+    const html = await renderSSR(
+      Radio,
+      {
+        modelValue: "selected",
+        label: "selected",
+        value: "selected"
+      },
+      {
+        default: () => "Selected"
+      }
+    );
+    expectSSRHasClass(html, "is-checked");
+  });
+  it("should render unchecked state in SSR", async () => {
+    const html = await renderSSR(
+      Radio,
+      {
+        modelValue: "other",
+        label: "selected"
+      },
+      {
+        default: () => "Not Selected"
+      }
+    );
+    expectSSRHasClass(html, "yh-radio");
+  });
+  it("should render disabled state in SSR", async () => {
+    const html = await renderSSR(
+      Radio,
+      {
+        modelValue: "",
+        label: "option",
+        disabled: true
+      },
+      {
+        default: () => "Disabled"
+      }
+    );
+    expectSSRHasClass(html, "is-disabled");
+  });
+  it("should render different sizes in SSR", async () => {
+    const sizes = ["small", "default", "large"];
+    for (const size of sizes) {
+      const html = await renderSSR(
+        Radio,
+        {
+          modelValue: "",
+          label: "test",
+          size
+        },
+        {
+          default: () => `Size ${size}`
+        }
+      );
+      if (size !== "default") {
+        expectSSRHasClass(html, `yh-radio--${size}`);
+      }
+    }
+  });
+  it("should render border style in SSR", async () => {
+    const html = await renderSSR(
+      Radio,
+      {
+        modelValue: "",
+        label: "bordered",
+        border: true
+      },
+      {
+        default: () => "Bordered"
+      }
+    );
+    expectSSRHasClass(html, "is-bordered");
+  });
+  it("should hydrate without mismatch", async () => {
+    const result = await testHydration(
+      Radio,
+      {
+        modelValue: "test",
+        label: "test"
+      },
+      {
+        default: () => "Hydration Test"
+      }
+    );
+    expect(result.isMatch).toBe(true);
+  });
+});
+describe("YhRadioButton SSR", () => {
+  it("should render button style in SSR", async () => {
+    const html = await renderSSR(
+      RadioButton,
+      {
+        modelValue: "button1",
+        label: "button1"
+      },
+      {
+        default: () => "Button Radio"
+      }
+    );
+    expectSSRHasClass(html, "yh-radio-button");
+  });
+  it("should render checked button in SSR", async () => {
+    const html = await renderSSR(
+      RadioButton,
+      {
+        modelValue: "active",
+        label: "active",
+        value: "active"
+      },
+      {
+        default: () => "Active Button"
+      }
+    );
+    expectSSRHasClass(html, "is-checked");
+  });
+});
+describe("YhRadioGroup SSR", () => {
+  it("should render group correctly in SSR", async () => {
+    const html = await renderSSR(RadioGroup, {
+      modelValue: "option1"
+    });
+    expectSSRHasClass(html, "yh-radio-group");
+  });
+  it("should hydrate group without mismatch", async () => {
+    const result = await testHydration(RadioGroup, {
+      modelValue: "option2"
+    });
+    expect(result.isMatch).toBe(true);
+  });
+  it("should render group with size in SSR", async () => {
+    const html = await renderSSR(RadioGroup, {
+      modelValue: "",
+      size: "large"
+    });
+    expectSSRHasClass(html, "yh-radio-group--large");
+  });
+  it("should render disabled group in SSR", async () => {
+    const html = await renderSSR(RadioGroup, {
+      modelValue: "",
+      disabled: true
+    });
+    expectSSRHasClass(html, "yh-radio-group");
+  });
+});