@yh-ui/components 0.1.21 → 0.1.22

package/dist/popover/__tests__/popover.test.cjs

@@ -1,107 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _vue = require("vue");
-var _index = require("../index.cjs");
-var _button = require("../../button/index.cjs");
-const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-(0, _vitest.describe)("Popover", () => {
-  const globalConfig = {
-    components: {
-      YhButton: _button.YhButton
-    }
-  };
-  (0, _vitest.it)("should render basic content correctly", async () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhPopover, {
-      props: {
-        title: "Popover Title",
-        content: "Popover Content",
-        teleported: false
-      },
-      slots: {
-        default: () => (0, _vue.h)("button", {
-          id: "trigger"
-        }, "Click me")
-      },
-      global: globalConfig
-    });
-    const trigger = wrapper.find("#trigger");
-    await trigger.trigger("click");
-    await (0, _vue.nextTick)();
-    await wait(50);
-    const popper = wrapper.find(".yh-popover__popper");
-    (0, _vitest.expect)(popper.exists()).toBe(true);
-    (0, _vitest.expect)(popper.text()).toContain("Popover Title");
-    (0, _vitest.expect)(popper.text()).toContain("Popover Content");
-  });
-  (0, _vitest.it)("should support slots for header and footer", async () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhPopover, {
-      props: {
-        teleported: false
-      },
-      slots: {
-        default: () => (0, _vue.h)("button", {
-          id: "trigger"
-        }, "Click me"),
-        header: () => (0, _vue.h)("div", {
-          class: "custom-header"
-        }, "Header Slot"),
-        footer: () => (0, _vue.h)("div", {
-          class: "custom-footer"
-        }, "Footer Slot")
-      },
-      global: globalConfig
-    });
-    await wrapper.find("#trigger").trigger("click");
-    await (0, _vue.nextTick)();
-    await wait(50);
-    (0, _vitest.expect)(wrapper.find(".custom-header").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.find(".custom-footer").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should handle different triggers", async () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhPopover, {
-      props: {
-        trigger: "hover",
-        teleported: false,
-        showAfter: 0
-      },
-      slots: {
-        default: () => (0, _vue.h)("button", {
-          id: "trigger"
-        }, "Hover me"),
-        content: () => "Hover Content"
-      },
-      global: globalConfig
-    });
-    const trigger = wrapper.find(".yh-popover");
-    await trigger.trigger("mouseenter");
-    await (0, _vue.nextTick)();
-    await wait(50);
-    (0, _vitest.expect)(wrapper.find(".yh-popover__popper").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should support width and scrollable content", async () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhPopover, {
-      props: {
-        width: 300,
-        maxHeight: 150,
-        scrollable: true,
-        teleported: false
-      },
-      slots: {
-        default: () => (0, _vue.h)("button", {
-          id: "trigger"
-        }, "Click me")
-      },
-      global: globalConfig
-    });
-    await wrapper.find("#trigger").trigger("click");
-    await (0, _vue.nextTick)();
-    await wait(50);
-    const contentDiv = wrapper.find(".yh-popover__content");
-    const styles = contentDiv.attributes("style");
-    (0, _vitest.expect)(styles).toContain("width: 300px");
-    (0, _vitest.expect)(styles).toContain("max-height: 150px");
-    (0, _vitest.expect)(styles).toContain("overflow-y: auto");
-  });
-});

package/dist/popover/__tests__/popover.test.mjs

@@ -1,93 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import { nextTick, h } from "vue";
-import { YhPopover } from "../index.mjs";
-import { YhButton } from "../../button/index.mjs";
-const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-describe("Popover", () => {
-  const globalConfig = {
-    components: {
-      YhButton
-    }
-  };
-  it("should render basic content correctly", async () => {
-    const wrapper = mount(YhPopover, {
-      props: {
-        title: "Popover Title",
-        content: "Popover Content",
-        teleported: false
-      },
-      slots: {
-        default: () => h("button", { id: "trigger" }, "Click me")
-      },
-      global: globalConfig
-    });
-    const trigger = wrapper.find("#trigger");
-    await trigger.trigger("click");
-    await nextTick();
-    await wait(50);
-    const popper = wrapper.find(".yh-popover__popper");
-    expect(popper.exists()).toBe(true);
-    expect(popper.text()).toContain("Popover Title");
-    expect(popper.text()).toContain("Popover Content");
-  });
-  it("should support slots for header and footer", async () => {
-    const wrapper = mount(YhPopover, {
-      props: {
-        teleported: false
-      },
-      slots: {
-        default: () => h("button", { id: "trigger" }, "Click me"),
-        header: () => h("div", { class: "custom-header" }, "Header Slot"),
-        footer: () => h("div", { class: "custom-footer" }, "Footer Slot")
-      },
-      global: globalConfig
-    });
-    await wrapper.find("#trigger").trigger("click");
-    await nextTick();
-    await wait(50);
-    expect(wrapper.find(".custom-header").exists()).toBe(true);
-    expect(wrapper.find(".custom-footer").exists()).toBe(true);
-  });
-  it("should handle different triggers", async () => {
-    const wrapper = mount(YhPopover, {
-      props: {
-        trigger: "hover",
-        teleported: false,
-        showAfter: 0
-      },
-      slots: {
-        default: () => h("button", { id: "trigger" }, "Hover me"),
-        content: () => "Hover Content"
-      },
-      global: globalConfig
-    });
-    const trigger = wrapper.find(".yh-popover");
-    await trigger.trigger("mouseenter");
-    await nextTick();
-    await wait(50);
-    expect(wrapper.find(".yh-popover__popper").exists()).toBe(true);
-  });
-  it("should support width and scrollable content", async () => {
-    const wrapper = mount(YhPopover, {
-      props: {
-        width: 300,
-        maxHeight: 150,
-        scrollable: true,
-        teleported: false
-      },
-      slots: {
-        default: () => h("button", { id: "trigger" }, "Click me")
-      },
-      global: globalConfig
-    });
-    await wrapper.find("#trigger").trigger("click");
-    await nextTick();
-    await wait(50);
-    const contentDiv = wrapper.find(".yh-popover__content");
-    const styles = contentDiv.attributes("style");
-    expect(styles).toContain("width: 300px");
-    expect(styles).toContain("max-height: 150px");
-    expect(styles).toContain("overflow-y: auto");
-  });
-});

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

@@ -1,20 +0,0 @@
-"use strict";
-
-var _serverRenderer = require("@vue/server-renderer");
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _price = _interopRequireDefault(require("../src/price.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("Price SSR", () => {
-  (0, _vitest.it)("renders correctly on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_price.default, {
-      value: 123.45,
-      symbol: "$",
-      precision: 2
-    }));
-    (0, _vitest.expect)(html).toContain("yh-price");
-    (0, _vitest.expect)(html).toContain("123");
-    (0, _vitest.expect)(html).toContain(".45");
-    (0, _vitest.expect)(html).toContain("$");
-  });
-});

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

@@ -1,19 +0,0 @@
-import { renderToString } from "@vue/server-renderer";
-import { describe, it, expect } from "vitest";
-import { h } from "vue";
-import Price from "../src/price.vue";
-describe("Price SSR", () => {
-  it("renders correctly on server", async () => {
-    const html = await renderToString(
-      h(Price, {
-        value: 123.45,
-        symbol: "$",
-        precision: 2
-      })
-    );
-    expect(html).toContain("yh-price");
-    expect(html).toContain("123");
-    expect(html).toContain(".45");
-    expect(html).toContain("$");
-  });
-});

package/dist/price/__tests__/price.test.cjs

@@ -1,45 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _price = _interopRequireDefault(require("../src/price.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("Price", () => {
-  (0, _vitest.it)("renders numeric values correctly", () => {
-    const wrapper = (0, _testUtils.mount)(_price.default, {
-      props: {
-        value: 123.456
-      }
-    });
-    (0, _vitest.expect)(wrapper.text()).toContain("\xA5");
-    (0, _vitest.expect)(wrapper.text()).toContain("123");
-    (0, _vitest.expect)(wrapper.text()).toContain(".46");
-  });
-  (0, _vitest.it)("customizes currency symbol", () => {
-    const wrapper = (0, _testUtils.mount)(_price.default, {
-      props: {
-        value: 10,
-        symbol: "$"
-      }
-    });
-    (0, _vitest.expect)(wrapper.text()).toContain("$");
-  });
-  (0, _vitest.it)("renders line-through style", () => {
-    const wrapper = (0, _testUtils.mount)(_price.default, {
-      props: {
-        value: 50,
-        lineThrough: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("is-line-through");
-  });
-  (0, _vitest.it)("handles small/large sizes", () => {
-    const wrapper = (0, _testUtils.mount)(_price.default, {
-      props: {
-        value: 10,
-        size: "large"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-price--large");
-  });
-});

package/dist/price/__tests__/price.test.mjs

@@ -1,42 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import Price from "../src/price.vue";
-describe("Price", () => {
-  it("renders numeric values correctly", () => {
-    const wrapper = mount(Price, {
-      props: {
-        value: 123.456
-      }
-    });
-    expect(wrapper.text()).toContain("\xA5");
-    expect(wrapper.text()).toContain("123");
-    expect(wrapper.text()).toContain(".46");
-  });
-  it("customizes currency symbol", () => {
-    const wrapper = mount(Price, {
-      props: {
-        value: 10,
-        symbol: "$"
-      }
-    });
-    expect(wrapper.text()).toContain("$");
-  });
-  it("renders line-through style", () => {
-    const wrapper = mount(Price, {
-      props: {
-        value: 50,
-        lineThrough: true
-      }
-    });
-    expect(wrapper.classes()).toContain("is-line-through");
-  });
-  it("handles small/large sizes", () => {
-    const wrapper = mount(Price, {
-      props: {
-        value: 10,
-        size: "large"
-      }
-    });
-    expect(wrapper.classes()).toContain("yh-price--large");
-  });
-});

package/dist/product-card/__tests__/product-card.ssr.test.cjs

@@ -1,21 +0,0 @@
-"use strict";
-
-var _serverRenderer = require("@vue/server-renderer");
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _productCard = _interopRequireDefault(require("../src/product-card.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("ProductCard SSR", () => {
-  const props = {
-    title: "Test Product",
-    image: "https://test.com/img.jpg",
-    price: 99.9
-  };
-  (0, _vitest.it)("renders correctly on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_productCard.default, props));
-    (0, _vitest.expect)(html).toContain("yh-product-card");
-    (0, _vitest.expect)(html).toContain("Test Product");
-    (0, _vitest.expect)(html).toContain("99");
-    (0, _vitest.expect)(html).toContain(".90");
-  });
-});

package/dist/product-card/__tests__/product-card.ssr.test.mjs

@@ -1,18 +0,0 @@
-import { renderToString } from "@vue/server-renderer";
-import { describe, it, expect } from "vitest";
-import { h } from "vue";
-import ProductCard from "../src/product-card.vue";
-describe("ProductCard SSR", () => {
-  const props = {
-    title: "Test Product",
-    image: "https://test.com/img.jpg",
-    price: 99.9
-  };
-  it("renders correctly on server", async () => {
-    const html = await renderToString(h(ProductCard, props));
-    expect(html).toContain("yh-product-card");
-    expect(html).toContain("Test Product");
-    expect(html).toContain("99");
-    expect(html).toContain(".90");
-  });
-});

package/dist/product-card/__tests__/product-card.test.cjs

@@ -1,54 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _productCard = _interopRequireDefault(require("../src/product-card.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("ProductCard", () => {
-  const props = {
-    title: "Product Title",
-    image: "https://test.com/image.jpg",
-    price: 99
-  };
-  (0, _vitest.it)("renders product information", () => {
-    const wrapper = (0, _testUtils.mount)(_productCard.default, {
-      props
-    });
-    (0, _vitest.expect)(wrapper.text()).toContain("Product Title");
-    (0, _vitest.expect)(wrapper.text()).toContain("99.00");
-    (0, _vitest.expect)(wrapper.find(".yh-product-card__image").attributes("src")).toBe("https://test.com/image.jpg");
-  });
-  (0, _vitest.it)("emits actions", async () => {
-    const wrapper = (0, _testUtils.mount)(_productCard.default, {
-      props: {
-        ...props,
-        actionText: "Add to Cart"
-      }
-    });
-    const btn = wrapper.find(".yh-product-card__action-btn");
-    await btn.trigger("click");
-    (0, _vitest.expect)(wrapper.emitted()).toHaveProperty("action");
-    await wrapper.trigger("click");
-    (0, _vitest.expect)(wrapper.emitted()).toHaveProperty("click");
-  });
-  (0, _vitest.it)("supports layout modes", () => {
-    const wrapper = (0, _testUtils.mount)(_productCard.default, {
-      props: {
-        ...props,
-        layout: "horizontal"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-product-card--horizontal");
-  });
-  (0, _vitest.it)("renders stock progress", () => {
-    const wrapper = (0, _testUtils.mount)(_productCard.default, {
-      props: {
-        ...props,
-        stockProgress: 50,
-        stockText: "Only 5 left"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-product-card__stock-area").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.text()).toContain("Only 5 left");
-  });
-});

package/dist/product-card/__tests__/product-card.test.mjs

@@ -1,53 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import ProductCard from "../src/product-card.vue";
-describe("ProductCard", () => {
-  const props = {
-    title: "Product Title",
-    image: "https://test.com/image.jpg",
-    price: 99
-  };
-  it("renders product information", () => {
-    const wrapper = mount(ProductCard, {
-      props
-    });
-    expect(wrapper.text()).toContain("Product Title");
-    expect(wrapper.text()).toContain("99.00");
-    expect(wrapper.find(".yh-product-card__image").attributes("src")).toBe(
-      "https://test.com/image.jpg"
-    );
-  });
-  it("emits actions", async () => {
-    const wrapper = mount(ProductCard, {
-      props: {
-        ...props,
-        actionText: "Add to Cart"
-      }
-    });
-    const btn = wrapper.find(".yh-product-card__action-btn");
-    await btn.trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("action");
-    await wrapper.trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("click");
-  });
-  it("supports layout modes", () => {
-    const wrapper = mount(ProductCard, {
-      props: {
-        ...props,
-        layout: "horizontal"
-      }
-    });
-    expect(wrapper.classes()).toContain("yh-product-card--horizontal");
-  });
-  it("renders stock progress", () => {
-    const wrapper = mount(ProductCard, {
-      props: {
-        ...props,
-        stockProgress: 50,
-        stockText: "Only 5 left"
-      }
-    });
-    expect(wrapper.find(".yh-product-card__stock-area").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Only 5 left");
-  });
-});

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

@@ -1,31 +0,0 @@
-"use strict";
-
-var _serverRenderer = require("@vue/server-renderer");
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _progress = _interopRequireDefault(require("../src/progress.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhProgress SSR", () => {
-  (0, _vitest.it)("should render correctly on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_progress.default, {
-      percentage: 50,
-      type: "circle",
-      color: {
-        "0%": "#f00",
-        "100%": "#00f"
-      }
-    }));
-    (0, _vitest.expect)(html).toContain("yh-progress");
-    (0, _vitest.expect)(html).toContain("svg");
-    (0, _vitest.expect)(html).toContain("linearGradient");
-    (0, _vitest.expect)(html).toContain('id="');
-  });
-  (0, _vitest.it)("should render multiple rings on server", async () => {
-    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_progress.default, {
-      percentage: [10, 20, 30],
-      type: "circle"
-    }));
-    const pathCount = (html.match(/yh-progress__circle-path/g) || []).length;
-    (0, _vitest.expect)(pathCount).toBe(3);
-  });
-});

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

@@ -1,29 +0,0 @@
-import { renderToString } from "@vue/server-renderer";
-import { describe, it, expect } from "vitest";
-import { h } from "vue";
-import YhProgress from "../src/progress.vue";
-describe("YhProgress SSR", () => {
-  it("should render correctly on server", async () => {
-    const html = await renderToString(
-      h(YhProgress, {
-        percentage: 50,
-        type: "circle",
-        color: { "0%": "#f00", "100%": "#00f" }
-      })
-    );
-    expect(html).toContain("yh-progress");
-    expect(html).toContain("svg");
-    expect(html).toContain("linearGradient");
-    expect(html).toContain('id="');
-  });
-  it("should render multiple rings on server", async () => {
-    const html = await renderToString(
-      h(YhProgress, {
-        percentage: [10, 20, 30],
-        type: "circle"
-      })
-    );
-    const pathCount = (html.match(/yh-progress__circle-path/g) || []).length;
-    expect(pathCount).toBe(3);
-  });
-});

package/dist/progress/__tests__/progress.test.cjs

@@ -1,119 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _index = require("../index.cjs");
-(0, _vitest.describe)("Progress", () => {
-  (0, _vitest.it)("should render correctly", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-progress");
-    (0, _vitest.expect)(wrapper.find(".yh-progress__inner").element.style.width).toBe("50%");
-  });
-  (0, _vitest.it)("should support different types", () => {
-    const line = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        type: "line",
-        percentage: 50
-      }
-    });
-    (0, _vitest.expect)(line.find(".yh-progress__bar").exists()).toBe(true);
-    const circle = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        type: "circle",
-        percentage: 50
-      }
-    });
-    (0, _vitest.expect)(circle.find(".yh-progress__circle").exists()).toBe(true);
-    const dashboard = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        type: "dashboard",
-        percentage: 50
-      }
-    });
-    (0, _vitest.expect)(dashboard.classes()).toContain("yh-progress--dashboard");
-  });
-  (0, _vitest.it)("should support linear gradients", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        color: {
-          "0%": "#f56c6c",
-          "100%": "#67c23a"
-        }
-      }
-    });
-    const inner = wrapper.find(".yh-progress__inner");
-    (0, _vitest.expect)(inner.element.style.backgroundImage).toContain("linear-gradient");
-  });
-  (0, _vitest.it)("should support multi-ring progress", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        type: "circle",
-        percentage: [30, 60, 90],
-        color: ["red", "green", "blue"]
-      }
-    });
-    (0, _vitest.expect)(wrapper.findAll(".yh-progress__circle-path").length).toBe(3);
-    (0, _vitest.expect)(wrapper.findAll(".yh-progress__circle-path")[0].attributes("stroke")).toBe("red");
-  });
-  (0, _vitest.it)("should show status icons", () => {
-    const success = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 100,
-        status: "success"
-      }
-    });
-    (0, _vitest.expect)(success.find("svg").exists()).toBe(true);
-    (0, _vitest.expect)(success.classes()).toContain("is-success");
-    const exception = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        status: "exception"
-      }
-    });
-    (0, _vitest.expect)(exception.classes()).toContain("is-exception");
-  });
-  (0, _vitest.it)("should support secondary percentage", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        secondaryPercentage: 80
-      }
-    });
-    const secondary = wrapper.find(".yh-progress__secondary-inner");
-    (0, _vitest.expect)(secondary.element.style.width).toBe("80%");
-  });
-  (0, _vitest.it)("should support steps", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        steps: 5
-      }
-    });
-    (0, _vitest.expect)(wrapper.findAll(".yh-progress__step-item").length).toBe(5);
-  });
-  (0, _vitest.it)("should respect text-inside", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        textInside: true,
-        strokeWidth: 20
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("is-text-inside");
-    (0, _vitest.expect)(wrapper.find(".yh-progress__innerText").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should handle custom format", () => {
-    const wrapper = (0, _testUtils.mount)(_index.YhProgress, {
-      props: {
-        percentage: 50,
-        format: p => `Value is ${p}`
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-progress__text").text()).toBe("Value is 50");
-  });
-});