@yh-ui/components 0.1.0

package/dist/infinite-scroll/src/infinite-scroll.vue.d.ts

@@ -0,0 +1,95 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    finished?: (props: typeof __VLS_9) => any;
+} & {
+    error?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly finished: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly error: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly threshold: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly direction: {
+        readonly type: import("vue").PropType<import("./infinite-scroll").InfiniteScrollDirection>;
+        readonly default: "vertical";
+    };
+    readonly loadingText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly finishedText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly errorText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly immediateCheck: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly target: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly useObserver: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly rootMargin: {
+        readonly type: StringConstructor;
+        readonly default: "0px";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    /** 手动检查是否需要加载 */
+    check: () => void;
+    /** 重试加载 */
+    retry: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly target: string;
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly direction: import("./infinite-scroll").InfiniteScrollDirection;
+    readonly rootMargin: string;
+    readonly error: boolean;
+    readonly loading: boolean;
+    readonly finished: boolean;
+    readonly threshold: number;
+    readonly loadingText: string;
+    readonly finishedText: string;
+    readonly errorText: string;
+    readonly immediateCheck: boolean;
+    readonly useObserver: 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/input/__tests__/input-utils.test.cjs

@@ -0,0 +1,77 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _utils = require("../src/utils.cjs");
+(0, _vitest.describe)("calcTextareaHeight", () => {
+  let textarea;
+  (0, _vitest.beforeEach)(() => {
+    textarea = document.createElement("textarea");
+    _vitest.vi.spyOn(window, "getComputedStyle").mockReturnValue({
+      getPropertyValue: prop => {
+        const map = {
+          "box-sizing": "border-box",
+          "padding-top": "4",
+          "padding-bottom": "4",
+          "border-top-width": "1",
+          "border-bottom-width": "1",
+          "letter-spacing": "normal",
+          "line-height": "20px",
+          "font-family": "sans-serif",
+          "font-weight": "normal",
+          "font-size": "14px",
+          "text-rendering": "auto",
+          "text-transform": "none",
+          width: "200px",
+          "text-indent": "0px",
+          "padding-left": "8px",
+          "padding-right": "8px"
+        };
+        return map[prop] ?? "";
+      }
+    });
+    Object.defineProperty(HTMLTextAreaElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 24;
+      }
+    });
+    document.body.appendChild(textarea);
+  });
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.restoreAllMocks();
+    document.body.innerHTML = "";
+  });
+  (0, _vitest.it)("should return height string", () => {
+    const result = (0, _utils.calcTextareaHeight)(textarea);
+    (0, _vitest.expect)(result).toHaveProperty("height");
+    (0, _vitest.expect)(typeof result.height).toBe("string");
+    (0, _vitest.expect)(result.height).toMatch(/px$/);
+  });
+  (0, _vitest.it)("should return minHeight when minRows > 0", () => {
+    const result = (0, _utils.calcTextareaHeight)(textarea, 2);
+    (0, _vitest.expect)(result).toHaveProperty("minHeight");
+    (0, _vitest.expect)(result.minHeight).toMatch(/px$/);
+  });
+  (0, _vitest.it)("should handle maxRows constraint", () => {
+    const result = (0, _utils.calcTextareaHeight)(textarea, 1, 3);
+    (0, _vitest.expect)(result.height).toMatch(/px$/);
+  });
+  (0, _vitest.it)("should handle content-box sizing", () => {
+    _vitest.vi.spyOn(window, "getComputedStyle").mockReturnValue({
+      getPropertyValue: prop => {
+        if (prop === "box-sizing") return "content-box";
+        if (prop === "padding-top") return "4";
+        if (prop === "padding-bottom") return "4";
+        if (prop === "border-top-width") return "1";
+        if (prop === "border-bottom-width") return "1";
+        return "";
+      }
+    });
+    const result = (0, _utils.calcTextareaHeight)(textarea, 1);
+    (0, _vitest.expect)(result.height).toMatch(/px$/);
+  });
+  (0, _vitest.it)("should handle minRows = 0 (no minHeight)", () => {
+    const result = (0, _utils.calcTextareaHeight)(textarea, 0);
+    (0, _vitest.expect)(result.height).toMatch(/px$/);
+  });
+});

package/dist/input/__tests__/input-utils.test.d.ts

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

package/dist/input/__tests__/input-utils.test.mjs

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { calcTextareaHeight } from "../src/utils.mjs";
+describe("calcTextareaHeight", () => {
+  let textarea;
+  beforeEach(() => {
+    textarea = document.createElement("textarea");
+    vi.spyOn(window, "getComputedStyle").mockReturnValue({
+      getPropertyValue: (prop) => {
+        const map = {
+          "box-sizing": "border-box",
+          "padding-top": "4",
+          "padding-bottom": "4",
+          "border-top-width": "1",
+          "border-bottom-width": "1",
+          "letter-spacing": "normal",
+          "line-height": "20px",
+          "font-family": "sans-serif",
+          "font-weight": "normal",
+          "font-size": "14px",
+          "text-rendering": "auto",
+          "text-transform": "none",
+          width: "200px",
+          "text-indent": "0px",
+          "padding-left": "8px",
+          "padding-right": "8px"
+        };
+        return map[prop] ?? "";
+      }
+    });
+    Object.defineProperty(HTMLTextAreaElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 24;
+      }
+    });
+    document.body.appendChild(textarea);
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = "";
+  });
+  it("should return height string", () => {
+    const result = calcTextareaHeight(textarea);
+    expect(result).toHaveProperty("height");
+    expect(typeof result.height).toBe("string");
+    expect(result.height).toMatch(/px$/);
+  });
+  it("should return minHeight when minRows > 0", () => {
+    const result = calcTextareaHeight(textarea, 2);
+    expect(result).toHaveProperty("minHeight");
+    expect(result.minHeight).toMatch(/px$/);
+  });
+  it("should handle maxRows constraint", () => {
+    const result = calcTextareaHeight(textarea, 1, 3);
+    expect(result.height).toMatch(/px$/);
+  });
+  it("should handle content-box sizing", () => {
+    vi.spyOn(window, "getComputedStyle").mockReturnValue({
+      getPropertyValue: (prop) => {
+        if (prop === "box-sizing") return "content-box";
+        if (prop === "padding-top") return "4";
+        if (prop === "padding-bottom") return "4";
+        if (prop === "border-top-width") return "1";
+        if (prop === "border-bottom-width") return "1";
+        return "";
+      }
+    });
+    const result = calcTextareaHeight(textarea, 1);
+    expect(result.height).toMatch(/px$/);
+  });
+  it("should handle minRows = 0 (no minHeight)", () => {
+    const result = calcTextareaHeight(textarea, 0);
+    expect(result.height).toMatch(/px$/);
+  });
+});

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _input = _interopRequireDefault(require("../src/input.vue"));
+var _ssr = require("../../__tests__/utils/ssr.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhInput SSR", () => {
+  (0, _vitest.it)("should render correctly in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      modelValue: "test value"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-input");
+    (0, _vitest.expect)(html).toContain("test value");
+  });
+  (0, _vitest.it)("should render with placeholder in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      placeholder: "Enter text"
+    });
+    (0, _vitest.expect)(html).toContain('placeholder="Enter text"');
+  });
+  (0, _vitest.it)("should render disabled state in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      disabled: true
+    });
+    (0, _ssr.expectSSRHasClass)(html, "is-disabled");
+    (0, _vitest.expect)(html).toContain("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)(_input.default, {
+        size
+      });
+      if (size !== "default") {
+        (0, _ssr.expectSSRHasClass)(html, `yh-input--${size}`);
+      }
+    }
+  });
+  (0, _vitest.it)("should render clearable input in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      modelValue: "clearable",
+      clearable: true
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-input");
+  });
+  (0, _vitest.it)("should render prefix icon in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      prefixIcon: "search"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-input__prefix");
+  });
+  (0, _vitest.it)("should render suffix icon in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      suffixIcon: "close"
+    });
+    (0, _ssr.expectSSRHasClass)(html, "yh-input__suffix");
+  });
+  (0, _vitest.it)("should hydrate without mismatch", async () => {
+    const result = await (0, _ssr.testHydration)(_input.default, {
+      modelValue: "Hydration Test",
+      placeholder: "Enter text",
+      clearable: true
+    });
+    (0, _vitest.expect)(result.isMatch).toBe(true);
+  });
+  (0, _vitest.it)("should render textarea in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      type: "textarea",
+      modelValue: "Textarea content",
+      rows: 4
+    });
+    (0, _vitest.expect)(html).toContain("textarea");
+    (0, _vitest.expect)(html).toContain("Textarea content");
+  });
+  (0, _vitest.it)("should render maxlength in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      maxlength: 100,
+      showWordLimit: true,
+      modelValue: "test"
+    });
+    (0, _vitest.expect)(html).toContain('maxlength="100"');
+  });
+  (0, _vitest.it)("should render password input in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_input.default, {
+      type: "password",
+      showPassword: true
+    });
+    (0, _vitest.expect)(html).toContain('type="password"');
+  });
+  (0, _vitest.it)("should hydrate textarea without mismatch", async () => {
+    const result = await (0, _ssr.testHydration)(_input.default, {
+      type: "textarea",
+      modelValue: "Multi-line\ntext content",
+      rows: 5,
+      maxlength: 200,
+      showWordLimit: true
+    });
+    (0, _vitest.expect)(result.isMatch).toBe(true);
+  });
+});

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

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

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

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import Input from "../src/input.vue";
+import { renderSSR, expectSSRHasClass, testHydration } from "../../__tests__/utils/ssr.mjs";
+describe("YhInput SSR", () => {
+  it("should render correctly in SSR", async () => {
+    const html = await renderSSR(Input, { modelValue: "test value" });
+    expectSSRHasClass(html, "yh-input");
+    expect(html).toContain("test value");
+  });
+  it("should render with placeholder in SSR", async () => {
+    const html = await renderSSR(Input, { placeholder: "Enter text" });
+    expect(html).toContain('placeholder="Enter text"');
+  });
+  it("should render disabled state in SSR", async () => {
+    const html = await renderSSR(Input, { disabled: true });
+    expectSSRHasClass(html, "is-disabled");
+    expect(html).toContain("disabled");
+  });
+  it("should render different sizes in SSR", async () => {
+    const sizes = ["small", "default", "large"];
+    for (const size of sizes) {
+      const html = await renderSSR(Input, { size });
+      if (size !== "default") {
+        expectSSRHasClass(html, `yh-input--${size}`);
+      }
+    }
+  });
+  it("should render clearable input in SSR", async () => {
+    const html = await renderSSR(Input, {
+      modelValue: "clearable",
+      clearable: true
+    });
+    expectSSRHasClass(html, "yh-input");
+  });
+  it("should render prefix icon in SSR", async () => {
+    const html = await renderSSR(Input, { prefixIcon: "search" });
+    expectSSRHasClass(html, "yh-input__prefix");
+  });
+  it("should render suffix icon in SSR", async () => {
+    const html = await renderSSR(Input, { suffixIcon: "close" });
+    expectSSRHasClass(html, "yh-input__suffix");
+  });
+  it("should hydrate without mismatch", async () => {
+    const result = await testHydration(Input, {
+      modelValue: "Hydration Test",
+      placeholder: "Enter text",
+      clearable: true
+    });
+    expect(result.isMatch).toBe(true);
+  });
+  it("should render textarea in SSR", async () => {
+    const html = await renderSSR(Input, {
+      type: "textarea",
+      modelValue: "Textarea content",
+      rows: 4
+    });
+    expect(html).toContain("textarea");
+    expect(html).toContain("Textarea content");
+  });
+  it("should render maxlength in SSR", async () => {
+    const html = await renderSSR(Input, {
+      maxlength: 100,
+      showWordLimit: true,
+      modelValue: "test"
+    });
+    expect(html).toContain('maxlength="100"');
+  });
+  it("should render password input in SSR", async () => {
+    const html = await renderSSR(Input, {
+      type: "password",
+      showPassword: true
+    });
+    expect(html).toContain('type="password"');
+  });
+  it("should hydrate textarea without mismatch", async () => {
+    const result = await testHydration(Input, {
+      type: "textarea",
+      modelValue: "Multi-line\ntext content",
+      rows: 5,
+      maxlength: 200,
+      showWordLimit: true
+    });
+    expect(result.isMatch).toBe(true);
+  });
+});

package/dist/input/__tests__/input.test.cjs

@@ -0,0 +1,127 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _vue = require("vue");
+var _input = _interopRequireDefault(require("../src/input.vue"));
+var _input2 = require("../src/input.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhInput", () => {
+  (0, _vitest.it)("should render correctly", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default);
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-input");
+    (0, _vitest.expect)(wrapper.find("input").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should work with v-model", async () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        modelValue: "test",
+        "onUpdate:modelValue": val => wrapper.setProps({
+          modelValue: val
+        })
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").element.value).toBe("test");
+    await wrapper.find("input").setValue("new value");
+    (0, _vitest.expect)(wrapper.props("modelValue")).toBe("new value");
+  });
+  (0, _vitest.it)("should display placeholder", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").attributes("placeholder")).toBe("\u8BF7\u8F93\u5165\u5185\u5BB9");
+  });
+  (0, _vitest.it)("should be disabled when disabled prop is true", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        disabled: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-disabled");
+    (0, _vitest.expect)(wrapper.find("input").attributes("disabled")).toBeDefined();
+  });
+  (0, _vitest.it)("should be readonly when readonly prop is true", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        readonly: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").attributes("readonly")).toBeDefined();
+  });
+  (0, _vitest.it)("should apply size class", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        size: "large"
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-input--large");
+  });
+  (0, _vitest.it)("should show clear button when clearable", async () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        modelValue: "test",
+        clearable: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find(".yh-input__clear").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should toggle password visibility", async () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        type: "password",
+        modelValue: "password123",
+        showPassword: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").attributes("type")).toBe("password");
+    await wrapper.find(".yh-input__password").trigger("click");
+    (0, _vitest.expect)(wrapper.find("input").attributes("type")).toBe("text");
+  });
+  (0, _vitest.it)("should export valid constants", () => {
+    (0, _vitest.expect)(_input2.inputTypes).toBeTruthy();
+    (0, _vitest.expect)(_input2.inputSizes).toBeTruthy();
+    (0, _vitest.expect)(_input2.inputVariants).toBeTruthy();
+    (0, _vitest.expect)(_input2.inputStatuses).toBeTruthy();
+  });
+  (0, _vitest.it)("should show word limit count", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        modelValue: "hello",
+        maxlength: 10,
+        showWordLimit: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-input__count").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find(".yh-input__count").text()).toBe("5 / 10");
+  });
+  (0, _vitest.it)("should render textarea when type is textarea", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      props: {
+        type: "textarea"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("textarea").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find("input").exists()).toBe(false);
+  });
+  (0, _vitest.it)("should emit focus and blur events", async () => {
+    const wrapper = (0, _testUtils.mount)(_input.default);
+    await wrapper.find("input").trigger("focus");
+    (0, _vitest.expect)(wrapper.emitted("focus")).toBeTruthy();
+    await wrapper.find("input").trigger("blur");
+    (0, _vitest.expect)(wrapper.emitted("blur")).toBeTruthy();
+  });
+  (0, _vitest.it)("should render prepend and append slots", () => {
+    const wrapper = (0, _testUtils.mount)(_input.default, {
+      slots: {
+        prepend: "<span>http://</span>",
+        append: "<span>.com</span>"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-input__prepend").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find(".yh-input__append").exists()).toBe(true);
+  });
+});

package/dist/input/__tests__/input.test.d.ts

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

package/dist/input/__tests__/input.test.mjs

@@ -0,0 +1,112 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Input from "../src/input.vue";
+import { inputTypes, inputSizes, inputVariants, inputStatuses } from "../src/input.mjs";
+describe("YhInput", () => {
+  it("should render correctly", () => {
+    const wrapper = mount(Input);
+    expect(wrapper.classes()).toContain("yh-input");
+    expect(wrapper.find("input").exists()).toBe(true);
+  });
+  it("should work with v-model", async () => {
+    const wrapper = mount(Input, {
+      props: {
+        modelValue: "test",
+        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
+      }
+    });
+    expect(wrapper.find("input").element.value).toBe("test");
+    await wrapper.find("input").setValue("new value");
+    expect(wrapper.props("modelValue")).toBe("new value");
+  });
+  it("should display placeholder", () => {
+    const wrapper = mount(Input, {
+      props: { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }
+    });
+    expect(wrapper.find("input").attributes("placeholder")).toBe("\u8BF7\u8F93\u5165\u5185\u5BB9");
+  });
+  it("should be disabled when disabled prop is true", () => {
+    const wrapper = mount(Input, {
+      props: { disabled: true }
+    });
+    expect(wrapper.classes()).toContain("is-disabled");
+    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+  });
+  it("should be readonly when readonly prop is true", () => {
+    const wrapper = mount(Input, {
+      props: { readonly: true }
+    });
+    expect(wrapper.find("input").attributes("readonly")).toBeDefined();
+  });
+  it("should apply size class", () => {
+    const wrapper = mount(Input, {
+      props: { size: "large" }
+    });
+    expect(wrapper.classes()).toContain("yh-input--large");
+  });
+  it("should show clear button when clearable", async () => {
+    const wrapper = mount(Input, {
+      props: {
+        modelValue: "test",
+        clearable: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(wrapper.find(".yh-input__clear").exists()).toBe(true);
+  });
+  it("should toggle password visibility", async () => {
+    const wrapper = mount(Input, {
+      props: {
+        type: "password",
+        modelValue: "password123",
+        showPassword: true
+      }
+    });
+    expect(wrapper.find("input").attributes("type")).toBe("password");
+    await wrapper.find(".yh-input__password").trigger("click");
+    expect(wrapper.find("input").attributes("type")).toBe("text");
+  });
+  it("should export valid constants", () => {
+    expect(inputTypes).toBeTruthy();
+    expect(inputSizes).toBeTruthy();
+    expect(inputVariants).toBeTruthy();
+    expect(inputStatuses).toBeTruthy();
+  });
+  it("should show word limit count", () => {
+    const wrapper = mount(Input, {
+      props: {
+        modelValue: "hello",
+        maxlength: 10,
+        showWordLimit: true
+      }
+    });
+    expect(wrapper.find(".yh-input__count").exists()).toBe(true);
+    expect(wrapper.find(".yh-input__count").text()).toBe("5 / 10");
+  });
+  it("should render textarea when type is textarea", () => {
+    const wrapper = mount(Input, {
+      props: { type: "textarea" }
+    });
+    expect(wrapper.find("textarea").exists()).toBe(true);
+    expect(wrapper.find("input").exists()).toBe(false);
+  });
+  it("should emit focus and blur events", async () => {
+    const wrapper = mount(Input);
+    await wrapper.find("input").trigger("focus");
+    expect(wrapper.emitted("focus")).toBeTruthy();
+    await wrapper.find("input").trigger("blur");
+    expect(wrapper.emitted("blur")).toBeTruthy();
+  });
+  it("should render prepend and append slots", () => {
+    const wrapper = mount(Input, {
+      slots: {
+        prepend: "<span>http://</span>",
+        append: "<span>.com</span>"
+      }
+    });
+    expect(wrapper.find(".yh-input__prepend").exists()).toBe(true);
+    expect(wrapper.find(".yh-input__append").exists()).toBe(true);
+  });
+});