@yh-ui/components 0.1.0

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

@@ -0,0 +1,133 @@
+import { type UploadFile, type UploadRawFile, type UploadRequestOptions } from './upload';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_9: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_25: {
+    file: any;
+}, __VLS_43: {
+    file: any;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    trigger?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    tip?: (props: typeof __VLS_17) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    file?: (props: typeof __VLS_25) => any;
+} & {
+    'file-icon'?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly fileList: {
+        readonly type: import("vue").PropType<UploadFile[]>;
+        readonly default: () => never[];
+    };
+    readonly accept: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly action: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly method: {
+        readonly type: StringConstructor;
+        readonly default: "POST";
+    };
+    readonly headers: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly data: {
+        readonly type: import("vue").PropType<Record<string, unknown>>;
+        readonly default: () => {};
+    };
+    readonly name: {
+        readonly type: StringConstructor;
+        readonly default: "file";
+    };
+    readonly multiple: BooleanConstructor;
+    readonly drag: BooleanConstructor;
+    readonly showFileList: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly limit: NumberConstructor;
+    readonly autoUpload: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly listType: {
+        readonly type: import("vue").PropType<"text" | "picture" | "picture-card">;
+        readonly default: "text";
+    };
+    readonly withCredentials: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly httpRequest: {
+        readonly type: import("vue").PropType<(options: UploadRequestOptions) => Promise<unknown> | void>;
+    };
+    readonly beforeUpload: {
+        readonly type: import("vue").PropType<(file: UploadRawFile) => boolean | Promise<boolean | Blob>>;
+    };
+    readonly beforeRemove: {
+        readonly type: import("vue").PropType<(file: UploadFile, fileList: UploadFile[]) => boolean | Promise<boolean>>;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly maxSize: NumberConstructor;
+    readonly thumbnailRequest: {
+        readonly type: import("vue").PropType<(file: UploadRawFile) => Promise<string> | string>;
+    };
+    readonly directory: BooleanConstructor;
+    readonly showDownload: BooleanConstructor;
+    readonly triggerPosition: {
+        readonly type: import("vue").PropType<"top" | "bottom" | "left" | "right">;
+        readonly default: "top";
+    };
+    readonly fileIcon: import("vue").PropType<string | ((file: UploadFile) => string)>;
+    readonly crossorigin: {
+        readonly type: import("vue").PropType<"" | "anonymous" | "use-credentials">;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    triggerInput: () => void;
+    handleRemove: (file: UploadFile) => Promise<void>;
+    handlePreview: (file: UploadFile) => void;
+    handleDownload: (file: UploadFile) => Promise<void>;
+    handleFiles: (files: File[]) => Promise<void>;
+    submit: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly name: string;
+    readonly data: Record<string, unknown>;
+    readonly drag: boolean;
+    readonly multiple: boolean;
+    readonly action: string;
+    readonly method: string;
+    readonly fileList: UploadFile[];
+    readonly accept: string;
+    readonly headers: Record<string, string>;
+    readonly showFileList: boolean;
+    readonly autoUpload: boolean;
+    readonly listType: "text" | "picture" | "picture-card";
+    readonly withCredentials: boolean;
+    readonly directory: boolean;
+    readonly showDownload: boolean;
+    readonly triggerPosition: "top" | "bottom" | "left" | "right";
+}, {}, {}, {}, 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/waterfall/__tests__/waterfall.ssr.test.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _serverRenderer = require("@vue/server-renderer");
+var _vue = require("vue");
+var _index = require("../index.cjs");
+(0, _vitest.describe)("Waterfall SSR", () => {
+  (0, _vitest.it)("should render correctly on server", async () => {
+    const items = [{
+      id: 1,
+      title: "Item 1"
+    }, {
+      id: 2,
+      title: "Item 2"
+    }];
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_index.YhWaterfall, {
+      items,
+      cols: 2
+    }, {
+      default: ({
+        item
+      }) => (0, _vue.h)("div", item.title)
+    }));
+    (0, _vitest.expect)(html).toContain("yh-waterfall");
+    (0, _vitest.expect)(html).toContain("yh-waterfall__column");
+    (0, _vitest.expect)(html).toContain("Item 1");
+    (0, _vitest.expect)(html).toContain("Item 2");
+  });
+  (0, _vitest.it)("should handle zero items safely", async () => {
+    const html = await (0, _serverRenderer.renderToString)((0, _vue.h)(_index.YhWaterfall, {
+      items: [],
+      cols: 3
+    }));
+    (0, _vitest.expect)(html).toContain("yh-waterfall");
+    (0, _vitest.expect)(html).toContain("yh-waterfall__empty");
+    (0, _vitest.expect)(html).toContain("\u6682\u65E0\u6570\u636E");
+  });
+});

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

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

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

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { renderToString } from "@vue/server-renderer";
+import { h } from "vue";
+import { YhWaterfall } from "../index.mjs";
+describe("Waterfall SSR", () => {
+  it("should render correctly on server", async () => {
+    const items = [
+      { id: 1, title: "Item 1" },
+      { id: 2, title: "Item 2" }
+    ];
+    const html = await renderToString(
+      h(
+        YhWaterfall,
+        {
+          items,
+          cols: 2
+        },
+        {
+          default: ({ item }) => h("div", item.title)
+        }
+      )
+    );
+    expect(html).toContain("yh-waterfall");
+    expect(html).toContain("yh-waterfall__column");
+    expect(html).toContain("Item 1");
+    expect(html).toContain("Item 2");
+  });
+  it("should handle zero items safely", async () => {
+    const html = await renderToString(
+      h(YhWaterfall, {
+        items: [],
+        cols: 3
+      })
+    );
+    expect(html).toContain("yh-waterfall");
+    expect(html).toContain("yh-waterfall__empty");
+    expect(html).toContain("\u6682\u65E0\u6570\u636E");
+  });
+});

package/dist/waterfall/__tests__/waterfall.test.cjs

@@ -0,0 +1,122 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _index = require("../index.cjs");
+var _vue = require("vue");
+class ResizeObserverMock {
+  observe = _vitest.vi.fn();
+  unobserve = _vitest.vi.fn();
+  disconnect = _vitest.vi.fn();
+}
+_vitest.vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+(0, _vitest.describe)("Waterfall", () => {
+  const items = [{
+    id: 1,
+    title: "Card 1",
+    height: 200
+  }, {
+    id: 2,
+    title: "Card 2",
+    height: 300
+  }, {
+    id: 3,
+    title: "Card 3",
+    height: 150
+  }, {
+    id: 4,
+    title: "Card 4",
+    height: 400
+  }];
+  (0, _vitest.it)("should render correctly with default props", () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-waterfall");
+    (0, _vitest.expect)(wrapper.findAll(".yh-waterfall__column").length).toBe(2);
+  });
+  (0, _vitest.it)("should support responsive columns", async () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items,
+        cols: {
+          xs: 1,
+          sm: 2,
+          md: 3,
+          lg: 4
+        },
+        responsive: true
+      }
+    });
+    const vm = wrapper.vm;
+    vm.containerWidth = 800;
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.findAll(".yh-waterfall__column").length).toBe(3);
+    vm.containerWidth = 600;
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.findAll(".yh-waterfall__column").length).toBe(2);
+  });
+  (0, _vitest.it)("should use shortest column algorithm", async () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items,
+        cols: 2,
+        heightProperty: "height",
+        gap: 10
+      }
+    });
+    await (0, _vue.nextTick)();
+    const columns = wrapper.findAll(".yh-waterfall__column");
+    (0, _vitest.expect)(columns[0].findAll(".yh-waterfall__item").length).toBe(2);
+    (0, _vitest.expect)(columns[1].findAll(".yh-waterfall__item").length).toBe(2);
+  });
+  (0, _vitest.it)("should handle image load and update layout", async () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items
+      }
+    });
+    const vm = wrapper.vm;
+    const initialWidth = vm.containerWidth;
+    Object.defineProperty(wrapper.element, "offsetWidth", {
+      value: 1024,
+      configurable: true
+    });
+    const img = document.createElement("img");
+    const event = new Event("load", {
+      bubbles: true
+    });
+    Object.defineProperty(event, "target", {
+      value: img
+    });
+    wrapper.element.dispatchEvent(event);
+    await (0, _vue.nextTick)();
+    await new Promise(r => setTimeout(r, 20));
+    (0, _vitest.expect)(vm.containerWidth).toBe(1024);
+  });
+  (0, _vitest.it)("should handle loading states", async () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items: [],
+        loading: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.findAll(".yh-waterfall__item--skeleton").length).toBeGreaterThan(0);
+    await wrapper.setProps({
+      loading: false
+    });
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find(".yh-waterfall__empty").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should support Refresh Overlay", async () => {
+    const wrapper = (0, _testUtils.mount)(_index.YhWaterfall, {
+      props: {
+        items,
+        loading: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-waterfall__refresh-overlay").exists()).toBe(true);
+  });
+});

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

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

package/dist/waterfall/__tests__/waterfall.test.mjs

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { YhWaterfall } from "../index.mjs";
+import { nextTick } from "vue";
+class ResizeObserverMock {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+}
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+describe("Waterfall", () => {
+  const items = [
+    { id: 1, title: "Card 1", height: 200 },
+    { id: 2, title: "Card 2", height: 300 },
+    { id: 3, title: "Card 3", height: 150 },
+    { id: 4, title: "Card 4", height: 400 }
+  ];
+  it("should render correctly with default props", () => {
+    const wrapper = mount(YhWaterfall, {
+      props: { items }
+    });
+    expect(wrapper.classes()).toContain("yh-waterfall");
+    expect(wrapper.findAll(".yh-waterfall__column").length).toBe(2);
+  });
+  it("should support responsive columns", async () => {
+    const wrapper = mount(YhWaterfall, {
+      props: {
+        items,
+        cols: { xs: 1, sm: 2, md: 3, lg: 4 },
+        responsive: true
+      }
+    });
+    const vm = wrapper.vm;
+    vm.containerWidth = 800;
+    await nextTick();
+    expect(wrapper.findAll(".yh-waterfall__column").length).toBe(3);
+    vm.containerWidth = 600;
+    await nextTick();
+    expect(wrapper.findAll(".yh-waterfall__column").length).toBe(2);
+  });
+  it("should use shortest column algorithm", async () => {
+    const wrapper = mount(YhWaterfall, {
+      props: {
+        items,
+        cols: 2,
+        heightProperty: "height",
+        gap: 10
+      }
+    });
+    await nextTick();
+    const columns = wrapper.findAll(".yh-waterfall__column");
+    expect(columns[0].findAll(".yh-waterfall__item").length).toBe(2);
+    expect(columns[1].findAll(".yh-waterfall__item").length).toBe(2);
+  });
+  it("should handle image load and update layout", async () => {
+    const wrapper = mount(YhWaterfall, {
+      props: { items }
+    });
+    const vm = wrapper.vm;
+    const initialWidth = vm.containerWidth;
+    Object.defineProperty(wrapper.element, "offsetWidth", { value: 1024, configurable: true });
+    const img = document.createElement("img");
+    const event = new Event("load", { bubbles: true });
+    Object.defineProperty(event, "target", { value: img });
+    wrapper.element.dispatchEvent(event);
+    await nextTick();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(vm.containerWidth).toBe(1024);
+  });
+  it("should handle loading states", async () => {
+    const wrapper = mount(YhWaterfall, {
+      props: { items: [], loading: true }
+    });
+    expect(wrapper.findAll(".yh-waterfall__item--skeleton").length).toBeGreaterThan(0);
+    await wrapper.setProps({ loading: false });
+    await nextTick();
+    expect(wrapper.find(".yh-waterfall__empty").exists()).toBe(true);
+  });
+  it("should support Refresh Overlay", async () => {
+    const wrapper = mount(YhWaterfall, {
+      props: { items, loading: true }
+    });
+    expect(wrapper.find(".yh-waterfall__refresh-overlay").exists()).toBe(true);
+  });
+});

package/dist/waterfall/index.cjs

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

package/dist/waterfall/index.d.ts

@@ -0,0 +1,8 @@
+export declare const YhWaterfall: any;
+export default YhWaterfall;
+export * from './src/waterfall';
+/** 泛型组件无法直接使用 InstanceType，手动定义暴露 API */
+export interface WaterfallInstance {
+    /** 触发重新布局 */
+    layout: () => void;
+}

package/dist/waterfall/index.mjs

@@ -0,0 +1,5 @@
+import { withInstall } from "@yh-ui/utils";
+import Waterfall from "./src/waterfall.vue";
+export const YhWaterfall = withInstall(Waterfall);
+export default YhWaterfall;
+export * from "./src/waterfall.mjs";

package/dist/waterfall/src/waterfall.cjs

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.waterfallProps = void 0;
+const waterfallProps = exports.waterfallProps = {
+  /** 数据源 */
+  items: {
+    type: Array,
+    default: () => []
+  },
+  /** 列数，支持响应式对象 { xs, sm, md, lg, xl } */
+  cols: {
+    type: [Number, Object],
+    default: 2
+  },
+  /** 间距 (px) */
+  gap: {
+    type: Number,
+    default: 16
+  },
+  /** 是否开启入场动画 */
+  animation: {
+    type: Boolean,
+    default: true
+  },
+  /** 动画延迟基数 (ms) */
+  delay: {
+    type: Number,
+    default: 100
+  },
+  /** 节点的唯一标识字段 */
+  rowKey: {
+    type: String,
+    default: "id"
+  },
+  /** 是否自动监听容器宽度变化 */
+  responsive: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否处于加载状态 */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  /** 用于平衡布局的高度字段名 (若不提供则采用轮询算法) */
+  heightProperty: {
+    type: String,
+    default: "height"
+  },
+  /** 内部图片的选择器，用于在图片加载后自动计算布局 */
+  imgSelector: {
+    type: String,
+    default: "img"
+  },
+  /** 主题覆盖变量 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};