@yh-ui/components 0.1.0

package/dist/autocomplete/__tests__/autocomplete.test.mjs

@@ -0,0 +1,263 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Autocomplete from "../src/autocomplete.vue";
+describe("YhAutocomplete", () => {
+  const suggestions = [
+    { value: "vue" },
+    { value: "react" },
+    { value: "angular" },
+    { value: "svelte" }
+  ];
+  const fetchSuggestions = (query, cb) => {
+    const results = query ? suggestions.filter((item) => item.value.toLowerCase().includes(query.toLowerCase())) : suggestions;
+    cb(results);
+  };
+  it("should render correctly", () => {
+    const wrapper = mount(Autocomplete);
+    expect(wrapper.classes()).toContain("yh-autocomplete");
+    expect(wrapper.find("input").exists()).toBe(true);
+  });
+  it("should work with v-model", async () => {
+    const wrapper = mount(Autocomplete, {
+      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(Autocomplete, {
+      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(Autocomplete, {
+      props: { disabled: true }
+    });
+    expect(wrapper.classes()).toContain("is-disabled");
+    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+  });
+  it("should apply size class", () => {
+    const wrapper = mount(Autocomplete, {
+      props: { size: "large" }
+    });
+    expect(wrapper.classes()).toContain("yh-autocomplete--large");
+  });
+  it("should apply small size class", () => {
+    const wrapper = mount(Autocomplete, {
+      props: { size: "small" }
+    });
+    expect(wrapper.classes()).toContain("yh-autocomplete--small");
+  });
+  it("should show clear button when clearable and has value", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        modelValue: "test",
+        clearable: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(wrapper.find(".yh-autocomplete__clear").exists()).toBe(true);
+  });
+  it("should clear value when clear button is clicked", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        modelValue: "test",
+        clearable: true,
+        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    await wrapper.find(".yh-autocomplete__clear").trigger("click");
+    expect(wrapper.emitted("clear")).toBeTruthy();
+    expect(wrapper.props("modelValue")).toBe("");
+  });
+  it("should emit focus and blur events", async () => {
+    const wrapper = mount(Autocomplete);
+    await wrapper.find("input").trigger("focus");
+    expect(wrapper.emitted("focus")).toBeTruthy();
+    await wrapper.find("input").trigger("blur");
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(wrapper.emitted("blur")).toBeTruthy();
+  });
+  it("should emit input event when typing", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
+      }
+    });
+    await wrapper.find("input").setValue("test");
+    expect(wrapper.emitted("input")).toBeTruthy();
+    expect(wrapper.emitted("input")[0]).toEqual(["test"]);
+  });
+  it("should call fetchSuggestions on input", async () => {
+    const mockFetch = vi.fn((query, cb) => cb(suggestions));
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: mockFetch,
+        debounce: 0,
+        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await wrapper.find("input").setValue("v");
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(mockFetch).toHaveBeenCalled();
+  });
+  it("should trigger suggestions on focus when triggerOnFocus is true", async () => {
+    const mockFetch = vi.fn((query, cb) => cb(suggestions));
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: mockFetch,
+        triggerOnFocus: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(mockFetch).toHaveBeenCalled();
+  });
+  it("should navigate down with ArrowDown key", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions,
+        triggerOnFocus: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    await wrapper.find("input").trigger("keydown", { key: "ArrowDown" });
+    await wrapper.find("input").trigger("keydown", { key: "ArrowDown" });
+    expect(wrapper.emitted()).toBeTruthy();
+  });
+  it("should close dropdown on Escape key", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions,
+        triggerOnFocus: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    await wrapper.find("input").trigger("keydown", { key: "Escape" });
+    expect(wrapper.emitted()).toBeTruthy();
+  });
+  it("should have correct ARIA attributes", () => {
+    const wrapper = mount(Autocomplete);
+    const input = wrapper.find("input");
+    expect(input.attributes("role")).toBe("combobox");
+    expect(input.attributes("aria-autocomplete")).toBe("list");
+  });
+  it("should render prepend and append slots", () => {
+    const wrapper = mount(Autocomplete, {
+      slots: {
+        prepend: "<span>http://</span>",
+        append: "<span>.com</span>"
+      }
+    });
+    expect(wrapper.find(".yh-autocomplete__prepend").exists()).toBe(true);
+    expect(wrapper.find(".yh-autocomplete__append").exists()).toBe(true);
+  });
+  it("should render custom suggestion slot", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions,
+        triggerOnFocus: true
+      },
+      slots: {
+        default: ({ item }) => `Custom: ${item.value}`
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(wrapper.emitted()).toBeTruthy();
+  });
+  it("should expose focus and blur methods", () => {
+    const wrapper = mount(Autocomplete);
+    const vm = wrapper.vm;
+    expect(typeof vm.focus).toBe("function");
+    expect(typeof vm.blur).toBe("function");
+    expect(typeof vm.close).toBe("function");
+    expect(typeof vm.highlight).toBe("function");
+  });
+  it("should highlight first item when highlightFirstItem is true", async () => {
+    const mockFetch = vi.fn((query, cb) => cb(suggestions));
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: mockFetch,
+        highlightFirstItem: true,
+        triggerOnFocus: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(wrapper.vm.highlightedIndex).toBe(0);
+  });
+  it("should support custom valueKey", async () => {
+    const customSuggestions = [{ id: 1, name: "vue" }];
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: (q, cb) => cb(customSuggestions),
+        valueKey: "name",
+        triggerOnFocus: true,
+        teleported: false
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    const items = wrapper.findAll(".yh-autocomplete__suggestion");
+    expect(items[0].text()).toBe("vue");
+  });
+  it("should scroll to highlighted item", async () => {
+    const manySuggestions = Array.from({ length: 20 }, (_, i) => ({ value: `item ${i}` }));
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: (q, cb) => cb(manySuggestions),
+        triggerOnFocus: true,
+        teleported: false
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    const vm = wrapper.vm;
+    vm.highlight(15);
+    await nextTick();
+    expect(vm.highlightedIndex).toBe(15);
+  });
+  it("should render loading and empty slots", async () => {
+    const wrapper = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: (q, cb) => {
+        },
+        teleported: false
+      },
+      slots: {
+        loading: '<div class="custom-loading">Loading...</div>'
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await wrapper.find("input").setValue("a");
+    await nextTick();
+    expect(wrapper.find(".custom-loading").exists()).toBe(true);
+    const wrapperEmpty = mount(Autocomplete, {
+      props: {
+        fetchSuggestions: (q, cb) => cb([]),
+        teleported: false
+      },
+      slots: {
+        empty: '<div class="custom-empty">No Data</div>'
+      }
+    });
+    await wrapperEmpty.find("input").trigger("focus");
+    await wrapperEmpty.find("input").setValue("a");
+    await nextTick();
+    expect(wrapperEmpty.find(".custom-empty").exists()).toBe(true);
+  });
+});

package/dist/autocomplete/index.cjs

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

package/dist/autocomplete/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Autocomplete Component
+ * @description 自动补全输入框组件导出
+ */
+import Autocomplete from './src/autocomplete.vue';
+export declare const YhAutocomplete: any;
+export default YhAutocomplete;
+export * from './src/autocomplete';
+export type AutocompleteInstance = InstanceType<typeof Autocomplete>;

package/dist/autocomplete/index.mjs

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

package/dist/autocomplete/src/autocomplete.cjs

@@ -0,0 +1 @@
+"use strict";