@yh-ui/components 0.1.17 → 0.1.21

package/dist/skeleton/index.d.ts

@@ -1,7 +1,283 @@
 import Skeleton from './src/skeleton.vue';
 import SkeletonItem from './src/skeleton-item.vue';
-export declare const YhSkeleton: any;
-export declare const YhSkeletonItem: any;
+export declare const YhSkeleton: import("@yh-ui/utils").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly animated: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly rows: {
+            readonly type: NumberConstructor;
+            readonly default: 3;
+        };
+        readonly title: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly avatar: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly throttle: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+        readonly lazy: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        readonly title: boolean;
+        readonly loading: boolean;
+        readonly avatar: boolean;
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly rows: number;
+        readonly lazy: boolean;
+        readonly animated: boolean;
+        readonly throttle: number;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly animated: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly rows: {
+            readonly type: NumberConstructor;
+            readonly default: 3;
+        };
+        readonly title: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly avatar: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly throttle: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+        readonly lazy: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        readonly title: boolean;
+        readonly loading: boolean;
+        readonly avatar: boolean;
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly rows: number;
+        readonly lazy: boolean;
+        readonly animated: boolean;
+        readonly throttle: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly animated: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly rows: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly title: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly avatar: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly throttle: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly lazy: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    readonly title: boolean;
+    readonly loading: boolean;
+    readonly avatar: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly rows: number;
+    readonly lazy: boolean;
+    readonly animated: boolean;
+    readonly throttle: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        template?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
+})> & Record<string, unknown>;
+export declare const YhSkeletonItem: import("@yh-ui/utils").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        readonly variant: {
+            readonly type: import("vue").PropType<import("./index.js").SkeletonItemVariant>;
+            readonly default: "text";
+        };
+        readonly width: {
+            readonly type: import("vue").PropType<string | number>;
+        };
+        readonly height: {
+            readonly type: import("vue").PropType<string | number>;
+        };
+        readonly animated: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly round: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly sharp: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly repeat: {
+            readonly type: NumberConstructor;
+            readonly default: 1;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        readonly repeat: number;
+        readonly round: boolean;
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly variant: "button" | "caption" | "h1" | "h3" | "image" | "text" | "circle" | "rect";
+        readonly animated: boolean;
+        readonly sharp: boolean;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        readonly variant: {
+            readonly type: import("vue").PropType<import("./index.js").SkeletonItemVariant>;
+            readonly default: "text";
+        };
+        readonly width: {
+            readonly type: import("vue").PropType<string | number>;
+        };
+        readonly height: {
+            readonly type: import("vue").PropType<string | number>;
+        };
+        readonly animated: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly round: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly sharp: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly repeat: {
+            readonly type: NumberConstructor;
+            readonly default: 1;
+        };
+        readonly themeOverrides: {
+            readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+            readonly default: undefined;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        readonly repeat: number;
+        readonly round: boolean;
+        readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+        readonly variant: "button" | "caption" | "h1" | "h3" | "image" | "text" | "circle" | "rect";
+        readonly animated: boolean;
+        readonly sharp: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    readonly variant: {
+        readonly type: import("vue").PropType<import("./index.js").SkeletonItemVariant>;
+        readonly default: "text";
+    };
+    readonly width: {
+        readonly type: import("vue").PropType<string | number>;
+    };
+    readonly height: {
+        readonly type: import("vue").PropType<string | number>;
+    };
+    readonly animated: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly sharp: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly repeat: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    readonly repeat: number;
+    readonly round: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly variant: "button" | "caption" | "h1" | "h3" | "image" | "text" | "circle" | "rect";
+    readonly animated: boolean;
+    readonly sharp: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        image?: (props: {}) => any;
+    } & {
+        image?: (props: {}) => any;
+    };
+})> & Record<string, unknown>;
 export default YhSkeleton;
 export * from './src/skeleton';
 export type SkeletonInstance = InstanceType<typeof Skeleton>;

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

@@ -514,6 +514,9 @@ html.dark {
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
 }
 .yh-skeleton__header {
   margin-bottom: 20px;
@@ -528,9 +531,14 @@ html.dark {
   display: inline-block;
   vertical-align: middle;
   border-radius: var(--yh-radius-base);
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden !important;
+  position: relative;
 }
 .yh-skeleton-item--circle {
-  border-radius: 50%;
+  border-radius: 50% !important;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--rect {
@@ -550,6 +558,7 @@ html.dark {
 .yh-skeleton-item--text {
   height: 16px;
   border-radius: 8px;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--caption {
@@ -569,6 +578,7 @@ html.dark {
   width: 100px;
   height: 100px;
   color: var(--yh-text-color-placeholder);
+  overflow: hidden !important;
 }
 .yh-skeleton-item--image svg {
   opacity: 0.5;
@@ -576,6 +586,7 @@ html.dark {
 
 .yh-skeleton-item.is-round {
   border-radius: 999px;
+  overflow: hidden !important;
 }
 .yh-skeleton-item.is-sharp {
   border-radius: 0;

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

@@ -67,10 +67,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly default: undefined;
     };
 }>> & Readonly<{}>, {
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
     readonly repeat: number;
     readonly round: boolean;
-    readonly variant: "button" | "text" | "circle" | "caption" | "h1" | "h3" | "image" | "rect";
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly variant: "button" | "caption" | "h1" | "h3" | "image" | "text" | "circle" | "rect";
     readonly animated: boolean;
     readonly sharp: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/skeleton/src/skeleton.css

@@ -453,6 +453,9 @@ html.dark {
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
 }
 .yh-skeleton__header {
   margin-bottom: 20px;
@@ -467,9 +470,14 @@ html.dark {
   display: inline-block;
   vertical-align: middle;
   border-radius: var(--yh-radius-base);
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden !important;
+  position: relative;
 }
 .yh-skeleton-item--circle {
-  border-radius: 50%;
+  border-radius: 50% !important;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--rect {
@@ -489,6 +497,7 @@ html.dark {
 .yh-skeleton-item--text {
   height: 16px;
   border-radius: 8px;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--caption {
@@ -508,6 +517,7 @@ html.dark {
   width: 100px;
   height: 100px;
   color: var(--yh-text-color-placeholder);
+  overflow: hidden !important;
 }
 .yh-skeleton-item--image svg {
   opacity: 0.5;
@@ -515,6 +525,7 @@ html.dark {
 
 .yh-skeleton-item.is-round {
   border-radius: 999px;
+  overflow: hidden !important;
 }
 .yh-skeleton-item.is-sharp {
   border-radius: 0;

package/dist/skeleton/src/skeleton.vue

@@ -542,6 +542,9 @@ html.dark {
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
 }
 .yh-skeleton__header {
   margin-bottom: 20px;
@@ -556,9 +559,14 @@ html.dark {
   display: inline-block;
   vertical-align: middle;
   border-radius: var(--yh-radius-base);
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden !important;
+  position: relative;
 }
 .yh-skeleton-item--circle {
-  border-radius: 50%;
+  border-radius: 50% !important;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--rect {
@@ -578,6 +586,7 @@ html.dark {
 .yh-skeleton-item--text {
   height: 16px;
   border-radius: 8px;
+  overflow: hidden !important;
 }
 
 .yh-skeleton-item--caption {
@@ -597,6 +606,7 @@ html.dark {
   width: 100px;
   height: 100px;
   color: var(--yh-text-color-placeholder);
+  overflow: hidden !important;
 }
 .yh-skeleton-item--image svg {
   opacity: 0.5;
@@ -604,6 +614,7 @@ html.dark {
 
 .yh-skeleton-item.is-round {
   border-radius: 999px;
+  overflow: hidden !important;
 }
 .yh-skeleton-item.is-sharp {
   border-radius: 0;

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

@@ -71,10 +71,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly default: undefined;
     };
 }>> & Readonly<{}>, {
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
     readonly title: boolean;
     readonly loading: boolean;
     readonly avatar: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
     readonly rows: number;
     readonly lazy: boolean;
     readonly animated: boolean;

package/dist/sku-selector/__tests__/sku-selector.ssr.test.cjs

@@ -0,0 +1,32 @@
+"use strict";
+
+var _serverRenderer = require("@vue/server-renderer");
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _skuSelector = _interopRequireDefault(require("../src/sku-selector.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("SkuSelector SSR", () => {
+  const specs = [{
+    id: "1",
+    name: "Color",
+    values: [{
+      id: "11",
+      name: "Red"
+    }]
+  }];
+  const skus = [{
+    id: "1",
+    specValueIds: ["11"],
+    price: 100,
+    stock: 10
+  }];
+  (0, _vitest.it)("renders correctly on server", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_skuSelector.default, {
+      specs,
+      skus
+    }));
+    (0, _vitest.expect)(html).toContain("yh-sku-selector");
+    (0, _vitest.expect)(html).toContain("Color");
+    (0, _vitest.expect)(html).toContain("Red");
+  });
+});

package/dist/sku-selector/__tests__/sku-selector.ssr.test.mjs

@@ -0,0 +1,19 @@
+import { renderToString } from "@vue/server-renderer";
+import { describe, it, expect } from "vitest";
+import { h } from "vue";
+import SkuSelector from "../src/sku-selector.vue";
+describe("SkuSelector SSR", () => {
+  const specs = [{ id: "1", name: "Color", values: [{ id: "11", name: "Red" }] }];
+  const skus = [{ id: "1", specValueIds: ["11"], price: 100, stock: 10 }];
+  it("renders correctly on server", async () => {
+    const html = await renderToString(
+      h(SkuSelector, {
+        specs,
+        skus
+      })
+    );
+    expect(html).toContain("yh-sku-selector");
+    expect(html).toContain("Color");
+    expect(html).toContain("Red");
+  });
+});

package/dist/sku-selector/__tests__/sku-selector.test.cjs

@@ -0,0 +1,64 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _skuSelector = _interopRequireDefault(require("../src/sku-selector.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("SkuSelector", () => {
+  const specs = [{
+    id: "1",
+    name: "Size",
+    values: [{
+      id: "101",
+      name: "S"
+    }, {
+      id: "102",
+      name: "M"
+    }]
+  }];
+  const skus = [{
+    id: "1",
+    specValueIds: ["101"],
+    price: 100,
+    stock: 10
+  }, {
+    id: "2",
+    specValueIds: ["102"],
+    price: 200,
+    stock: 0
+  }];
+  (0, _vitest.it)("renders specs correctly", () => {
+    const wrapper = (0, _testUtils.mount)(_skuSelector.default, {
+      props: {
+        specs,
+        skus
+      }
+    });
+    (0, _vitest.expect)(wrapper.text()).toContain("Size");
+    (0, _vitest.expect)(wrapper.text()).toContain("S");
+    (0, _vitest.expect)(wrapper.text()).toContain("M");
+  });
+  (0, _vitest.it)("handles item selection", async () => {
+    const wrapper = (0, _testUtils.mount)(_skuSelector.default, {
+      props: {
+        specs,
+        skus,
+        modelValue: []
+      }
+    });
+    const items = wrapper.findAll(".yh-sku-selector__value");
+    await items[0].trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
+  });
+  (0, _vitest.it)("disables item with no stock", async () => {
+    const wrapper = (0, _testUtils.mount)(_skuSelector.default, {
+      props: {
+        specs,
+        skus
+      }
+    });
+    const items = wrapper.findAll(".yh-sku-selector__value");
+    (0, _vitest.expect)(items[1].classes()).toContain("is-disabled");
+  });
+});

package/dist/sku-selector/__tests__/sku-selector.test.mjs

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import SkuSelector from "../src/sku-selector.vue";
+describe("SkuSelector", () => {
+  const specs = [
+    {
+      id: "1",
+      name: "Size",
+      values: [
+        { id: "101", name: "S" },
+        { id: "102", name: "M" }
+      ]
+    }
+  ];
+  const skus = [
+    { id: "1", specValueIds: ["101"], price: 100, stock: 10 },
+    { id: "2", specValueIds: ["102"], price: 200, stock: 0 }
+  ];
+  it("renders specs correctly", () => {
+    const wrapper = mount(SkuSelector, {
+      props: {
+        specs,
+        skus
+      }
+    });
+    expect(wrapper.text()).toContain("Size");
+    expect(wrapper.text()).toContain("S");
+    expect(wrapper.text()).toContain("M");
+  });
+  it("handles item selection", async () => {
+    const wrapper = mount(SkuSelector, {
+      props: {
+        specs,
+        skus,
+        modelValue: []
+      }
+    });
+    const items = wrapper.findAll(".yh-sku-selector__value");
+    await items[0].trigger("click");
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("change")).toBeTruthy();
+  });
+  it("disables item with no stock", async () => {
+    const wrapper = mount(SkuSelector, {
+      props: {
+        specs,
+        skus
+      }
+    });
+    const items = wrapper.findAll(".yh-sku-selector__value");
+    expect(items[1].classes()).toContain("is-disabled");
+  });
+});

package/dist/sku-selector/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhSkuSelector: true
+};
+module.exports = exports.YhSkuSelector = void 0;
+var _utils = require("@yh-ui/utils");
+var _skuSelector = _interopRequireDefault(require("./src/sku-selector.vue"));
+var _skuSelector2 = require("./src/sku-selector.cjs");
+Object.keys(_skuSelector2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _skuSelector2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skuSelector2[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const YhSkuSelector = exports.YhSkuSelector = (0, _utils.withInstall)(_skuSelector.default);
+module.exports = YhSkuSelector;