@yh-ui/components 0.1.0

package/dist/transfer/__tests__/transfer.test.mjs

@@ -0,0 +1,405 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Transfer from "../src/transfer.vue";
+import TransferPanel from "../src/transfer-panel.vue";
+const generateData = (count = 15) => {
+  const data = [];
+  for (let i = 1; i <= count; i++) {
+    data.push({
+      key: i,
+      label: `\u9009\u9879 ${i}`,
+      disabled: i % 5 === 0
+    });
+  }
+  return data;
+};
+const generateCustomData = () => {
+  return [
+    { id: 1, name: "\u5317\u4EAC", code: "BJ" },
+    { id: 2, name: "\u4E0A\u6D77", code: "SH" },
+    { id: 3, name: "\u5E7F\u5DDE", code: "GZ" },
+    { id: 4, name: "\u6DF1\u5733", code: "SZ", disabled: true }
+  ];
+};
+describe("Transfer", () => {
+  describe("\u57FA\u7840\u6E32\u67D3", () => {
+    it("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3 Transfer \u7EC4\u4EF6", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: []
+        }
+      });
+      expect(wrapper.find(".yh-transfer").exists()).toBe(true);
+      expect(wrapper.findAll(".yh-transfer-panel").length).toBe(2);
+      expect(wrapper.find(".yh-transfer__buttons").exists()).toBe(true);
+    });
+    it("\u5E94\u8BE5\u6B63\u786E\u663E\u793A\u6807\u9898", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          titles: ["\u6E90\u5217\u8868", "\u76EE\u6807\u5217\u8868"]
+        }
+      });
+      const panels = wrapper.findAll(".yh-transfer-panel__title");
+      expect(panels[0].text()).toContain("\u6E90\u5217\u8868");
+      expect(panels[1].text()).toContain("\u76EE\u6807\u5217\u8868");
+    });
+    it("\u5E94\u8BE5\u652F\u6301\u81EA\u5B9A\u4E49\u6807\u9898 props", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          leftTitle: "\u5DE6\u4FA7\u5217\u8868",
+          rightTitle: "\u53F3\u4FA7\u5217\u8868"
+        }
+      });
+      const panels = wrapper.findAll(".yh-transfer-panel__title");
+      expect(panels[0].text()).toContain("\u5DE6\u4FA7\u5217\u8868");
+      expect(panels[1].text()).toContain("\u53F3\u4FA7\u5217\u8868");
+    });
+  });
+  describe("\u6570\u636E\u7ED1\u5B9A", () => {
+    it("\u5E94\u8BE5\u6B63\u786E\u5206\u914D\u5DE6\u53F3\u4FA7\u6570\u636E", () => {
+      const data = generateData(10);
+      const wrapper = mount(Transfer, {
+        props: {
+          data,
+          modelValue: [1, 2, 3]
+        }
+      });
+      const panels = wrapper.findAllComponents(TransferPanel);
+      expect(panels[0]?.props("data")?.length).toBe(7);
+      expect(panels[1]?.props("data")?.length).toBe(3);
+    });
+    it("\u5E94\u8BE5\u652F\u6301\u5B57\u6BB5\u522B\u540D", () => {
+      const customData = generateCustomData();
+      const wrapper = mount(Transfer, {
+        props: {
+          data: customData,
+          modelValue: [1, 2],
+          props: {
+            key: "id",
+            label: "name",
+            disabled: "disabled"
+          }
+        }
+      });
+      const panels = wrapper.findAllComponents(TransferPanel);
+      expect(panels[0]?.props("data")?.length).toBe(2);
+      expect(panels[1]?.props("data")?.length).toBe(2);
+    });
+  });
+  describe("\u7A7F\u68AD\u64CD\u4F5C", () => {
+    it("\u70B9\u51FB\u9009\u9879\u5E94\u8BE5\u5207\u6362\u9009\u4E2D\u72B6\u6001", async () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(5),
+          modelValue: []
+        }
+      });
+      const items = wrapper.findAll(".yh-transfer-panel__item");
+      await items[0].trigger("click");
+      expect(items[0].classes()).toContain("is-checked");
+    });
+    it("\u5E94\u8BE5\u6B63\u786E\u89E6\u53D1\u7A7F\u68AD\u4E8B\u4EF6", async () => {
+      const onChange = vi.fn();
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(5),
+          modelValue: [],
+          "onUpdate:modelValue": (val) => {
+            wrapper.setProps({ modelValue: val });
+          },
+          onChange
+        }
+      });
+      const leftItems = wrapper.findAll(".yh-transfer-panel__item");
+      await leftItems[0].trigger("click");
+      const buttons = wrapper.findAll(".yh-transfer__button");
+      await buttons[0].trigger("click");
+      expect(onChange).toHaveBeenCalled();
+    });
+    it("\u7981\u7528\u9879\u4E0D\u5E94\u8BE5\u88AB\u9009\u4E2D", async () => {
+      const data = generateData(5);
+      data[0].disabled = true;
+      const wrapper = mount(Transfer, {
+        props: {
+          data,
+          modelValue: []
+        }
+      });
+      const items = wrapper.findAll(".yh-transfer-panel__item");
+      await items[0].trigger("click");
+      expect(items[0].classes()).not.toContain("is-checked");
+    });
+  });
+  describe("\u641C\u7D22\u8FC7\u6EE4", () => {
+    it("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u641C\u7D22\u6846", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          filterable: true
+        }
+      });
+      const filterInputs = wrapper.findAll(".yh-transfer-panel__filter-input");
+      expect(filterInputs.length).toBe(2);
+    });
+    it("\u5E94\u8BE5\u6B63\u786E\u8FC7\u6EE4\u6570\u636E", async () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(15),
+          modelValue: [],
+          filterable: true
+        }
+      });
+      const filterInput = wrapper.find(".yh-transfer-panel__filter-input");
+      await filterInput.setValue("1");
+      await nextTick();
+      const leftPanel = wrapper.findAllComponents(TransferPanel)[0];
+      const items = leftPanel.findAll(".yh-transfer-panel__item");
+      expect(items.length).toBe(7);
+    });
+    it("\u5E94\u8BE5\u652F\u6301\u81EA\u5B9A\u4E49\u8FC7\u6EE4\u65B9\u6CD5", async () => {
+      const customData = generateCustomData();
+      const filterMethod = vi.fn((query, item) => {
+        return item.code.toLowerCase().includes(query.toLowerCase());
+      });
+      const wrapper = mount(Transfer, {
+        props: {
+          data: customData,
+          modelValue: [],
+          filterable: true,
+          filterMethod,
+          props: {
+            key: "id",
+            label: "name"
+          }
+        }
+      });
+      const filterInput = wrapper.find(".yh-transfer-panel__filter-input");
+      await filterInput.setValue("BJ");
+      await nextTick();
+      expect(filterMethod).toHaveBeenCalled();
+    });
+  });
+  describe("\u5C3A\u5BF8", () => {
+    it.each(["large", "default", "small"])("\u5E94\u8BE5\u652F\u6301 %s \u5C3A\u5BF8", (size) => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          size
+        }
+      });
+      expect(wrapper.find(".yh-transfer").classes()).toContain(`yh-transfer--${size}`);
+    });
+  });
+  describe("\u7981\u7528\u72B6\u6001", () => {
+    it("\u5E94\u8BE5\u6B63\u786E\u5E94\u7528\u7981\u7528\u72B6\u6001", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          disabled: true
+        }
+      });
+      expect(wrapper.find(".yh-transfer").classes()).toContain("is-disabled");
+    });
+    it("\u7981\u7528\u72B6\u6001\u4E0B\u6309\u94AE\u5E94\u8BE5\u4E0D\u53EF\u70B9\u51FB", async () => {
+      const onChange = vi.fn();
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          disabled: true,
+          onChange
+        }
+      });
+      const buttons = wrapper.findAll(".yh-transfer__button");
+      await buttons[0].trigger("click");
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+  describe("\u76EE\u6807\u987A\u5E8F", () => {
+    it("\u5E94\u8BE5\u652F\u6301 original \u987A\u5E8F", async () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(10),
+          modelValue: [5, 1, 3],
+          targetOrder: "original"
+        }
+      });
+      const rightPanel = wrapper.findAllComponents(TransferPanel)[1];
+      const rightData = rightPanel?.props("data");
+      expect(rightData?.[0]?.key).toBe(1);
+      expect(rightData?.[1]?.key).toBe(3);
+      expect(rightData?.[2]?.key).toBe(5);
+    });
+    it("\u5E94\u8BE5\u652F\u6301 push \u987A\u5E8F", async () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(10),
+          modelValue: [5, 1, 3],
+          targetOrder: "push"
+        }
+      });
+      const rightPanel = wrapper.findAllComponents(TransferPanel)[1];
+      const rightData = rightPanel?.props("data");
+      expect(rightData?.[0]?.key).toBe(5);
+      expect(rightData?.[1]?.key).toBe(1);
+      expect(rightData?.[2]?.key).toBe(3);
+    });
+  });
+  describe("\u7A7A\u72B6\u6001", () => {
+    it("\u5E94\u8BE5\u663E\u793A\u9ED8\u8BA4\u7A7A\u72B6\u6001\u6587\u672C", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: [],
+          modelValue: []
+        }
+      });
+      const emptyTexts = wrapper.findAll(".yh-transfer-panel__empty-text");
+      expect(emptyTexts.length).toBe(2);
+      expect(emptyTexts[0].text()).toBe("\u65E0\u6570\u636E");
+    });
+    it("\u5E94\u8BE5\u652F\u6301\u81EA\u5B9A\u4E49\u7A7A\u72B6\u6001\u6587\u672C", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: [],
+          modelValue: [],
+          leftEmptyText: "\u5DE6\u4FA7\u65E0\u6570\u636E",
+          rightEmptyText: "\u53F3\u4FA7\u65E0\u6570\u636E"
+        }
+      });
+      const emptyTexts = wrapper.findAll(".yh-transfer-panel__empty-text");
+      expect(emptyTexts[0].text()).toBe("\u5DE6\u4FA7\u65E0\u6570\u636E");
+      expect(emptyTexts[1].text()).toBe("\u53F3\u4FA7\u65E0\u6570\u636E");
+    });
+  });
+  describe("\u9009\u4E2D\u72B6\u6001\u53D8\u5316\u4E8B\u4EF6", () => {
+    it("\u5E94\u8BE5\u89E6\u53D1 left-check-change \u4E8B\u4EF6", async () => {
+      const onLeftCheckChange = vi.fn();
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(5),
+          modelValue: [],
+          "onLeft-check-change": onLeftCheckChange
+        }
+      });
+      const items = wrapper.findAll(".yh-transfer-panel__item");
+      await items[0].trigger("click");
+      expect(onLeftCheckChange).toHaveBeenCalled();
+    });
+    it("\u5E94\u8BE5\u89E6\u53D1 right-check-change \u4E8B\u4EF6", async () => {
+      const onRightCheckChange = vi.fn();
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(5),
+          modelValue: [1, 2],
+          "onRight-check-change": onRightCheckChange
+        }
+      });
+      const panels = wrapper.findAllComponents(TransferPanel);
+      const rightItems = panels[1].findAll(".yh-transfer-panel__item");
+      await rightItems[0].trigger("click");
+      expect(onRightCheckChange).toHaveBeenCalled();
+    });
+  });
+  describe("\u5168\u9009\u529F\u80FD", () => {
+    it("\u70B9\u51FB\u5168\u9009\u5E94\u8BE5\u9009\u4E2D\u6240\u6709\u53EF\u9009\u9879", async () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(5),
+          modelValue: []
+        }
+      });
+      const checkAll = wrapper.find(".yh-transfer-panel__check-all");
+      await checkAll.trigger("click");
+      await nextTick();
+      const leftItems = wrapper.findAll(".yh-transfer-panel__item");
+      const checkedItems = leftItems.filter((item) => item.classes().includes("is-checked"));
+      expect(checkedItems.length).toBe(4);
+    });
+  });
+  describe("\u6309\u94AE\u6587\u6848", () => {
+    it("\u5E94\u8BE5\u6B63\u786E\u663E\u793A\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u6848", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(),
+          modelValue: [],
+          buttonTexts: ["\u79FB\u5230\u53F3\u8FB9", "\u79FB\u5230\u5DE6\u8FB9"]
+        }
+      });
+      const buttonTexts = wrapper.findAll(".yh-transfer__button__text");
+      expect(buttonTexts[0].text()).toBe("\u79FB\u5230\u53F3\u8FB9");
+      expect(buttonTexts[1].text()).toBe("\u79FB\u5230\u5DE6\u8FB9");
+    });
+  });
+  describe("\u521D\u59CB\u9009\u4E2D", () => {
+    it("\u5E94\u8BE5\u652F\u6301\u5DE6\u4FA7\u9ED8\u8BA4\u9009\u4E2D\u9879", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(10),
+          modelValue: [],
+          leftDefaultChecked: [1, 2]
+        }
+      });
+      const leftItems = wrapper.findAll(".yh-transfer-panel__item");
+      expect(leftItems[0].classes()).toContain("is-checked");
+      expect(leftItems[1].classes()).toContain("is-checked");
+    });
+    it("\u5E94\u8BE5\u652F\u6301\u53F3\u4FA7\u9ED8\u8BA4\u9009\u4E2D\u9879", () => {
+      const wrapper = mount(Transfer, {
+        props: {
+          data: generateData(10),
+          modelValue: [1, 2, 3],
+          rightDefaultChecked: [1]
+        }
+      });
+      const panels = wrapper.findAllComponents(TransferPanel);
+      const rightItems = panels[1].findAll(".yh-transfer-panel__item");
+      expect(rightItems[0].classes()).toContain("is-checked");
+    });
+  });
+});
+describe("TransferPanel", () => {
+  it("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u9762\u677F", () => {
+    const wrapper = mount(TransferPanel, {
+      props: {
+        data: generateData(5),
+        checked: [],
+        title: "\u6D4B\u8BD5\u9762\u677F"
+      }
+    });
+    expect(wrapper.find(".yh-transfer-panel").exists()).toBe(true);
+    expect(wrapper.find(".yh-transfer-panel__title").text()).toContain("\u6D4B\u8BD5\u9762\u677F");
+  });
+  it("\u5E94\u8BE5\u6B63\u786E\u663E\u793A\u7EDF\u8BA1\u4FE1\u606F", () => {
+    const wrapper = mount(TransferPanel, {
+      props: {
+        data: generateData(10),
+        checked: [1, 2, 3]
+      }
+    });
+    const count = wrapper.find(".yh-transfer-panel__count");
+    expect(count.text()).toContain("3/10");
+  });
+  it("\u865A\u62DF\u6EDA\u52A8\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3", () => {
+    const wrapper = mount(TransferPanel, {
+      props: {
+        data: generateData(100),
+        checked: [],
+        virtual: true,
+        itemHeight: 40,
+        height: 280
+      }
+    });
+    expect(wrapper.find(".yh-transfer-panel__virtual-wrapper").exists()).toBe(true);
+    const items = wrapper.findAll(".yh-transfer-panel__item");
+    expect(items.length).toBeLessThan(100);
+  });
+});

package/dist/transfer/index.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhTransfer: true,
+  YhTransferPanel: true
+};
+module.exports = exports.YhTransferPanel = exports.YhTransfer = void 0;
+var _transfer = _interopRequireDefault(require("./src/transfer.vue"));
+var _transferPanel = _interopRequireDefault(require("./src/transfer-panel.vue"));
+var _transfer2 = require("./src/transfer.cjs");
+Object.keys(_transfer2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _transfer2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _transfer2[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_transfer.default.install = app => {
+  app.component(_transfer.default.name, _transfer.default);
+  app.component(_transferPanel.default.name, _transferPanel.default);
+};
+_transferPanel.default.install = app => {
+  app.component(_transferPanel.default.name, _transferPanel.default);
+};
+const YhTransfer = exports.YhTransfer = _transfer.default;
+const YhTransferPanel = exports.YhTransferPanel = _transferPanel.default;
+module.exports = YhTransfer;

package/dist/transfer/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @yh-ui/transfer
+ * @description Transfer 穿梭框组件
+ */
+import type { Plugin } from 'vue';
+import Transfer from './src/transfer.vue';
+import TransferPanel from './src/transfer-panel.vue';
+export declare const YhTransfer: typeof Transfer & Plugin;
+export declare const YhTransferPanel: typeof TransferPanel & Plugin;
+export * from './src/transfer';
+export default YhTransfer;
+export type TransferInstance = InstanceType<typeof Transfer>;
+export type TransferPanelInstance = InstanceType<typeof TransferPanel>;

package/dist/transfer/index.mjs

@@ -0,0 +1,13 @@
+import Transfer from "./src/transfer.vue";
+import TransferPanel from "./src/transfer-panel.vue";
+Transfer.install = (app) => {
+  app.component(Transfer.name, Transfer);
+  app.component(TransferPanel.name, TransferPanel);
+};
+TransferPanel.install = (app) => {
+  app.component(TransferPanel.name, TransferPanel);
+};
+export const YhTransfer = Transfer;
+export const YhTransferPanel = TransferPanel;
+export * from "./src/transfer.mjs";
+export default YhTransfer;

package/dist/transfer/src/transfer-panel.d.vue.ts

@@ -0,0 +1,45 @@
+import type { TransferPanelProps, TransferData, TransferKey } from './transfer';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
+    option: any;
+}, __VLS_7: {
+    option: any;
+}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    empty?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TransferPanelProps, {
+    clearChecked: () => void;
+    query: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:checked": (value: TransferKey[]) => any;
+    "checked-change": (value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<TransferPanelProps> & Readonly<{
+    "onUpdate:checked"?: ((value: TransferKey[]) => any) | undefined;
+    "onChecked-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    data: TransferData[];
+    height: number;
+    size: import("./transfer").TransferSize;
+    title: string;
+    virtual: boolean;
+    itemHeight: number;
+    checked: TransferKey[];
+    filterable: boolean;
+    showAllCheckbox: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};