@yh-ui/components 0.1.0

package/dist/date-picker/__tests__/date-picker-extended.test.mjs

@@ -0,0 +1,455 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick, ref } from "vue";
+import DatePicker from "../src/date-picker.vue";
+import MonthTable from "../src/month-table.vue";
+import YearTable from "../src/year-table.vue";
+import QuarterTable from "../src/quarter-table.vue";
+import DateTable from "../src/date-table.vue";
+import dayjs from "dayjs";
+import { zhCn } from "@yh-ui/locale";
+vi.mock("@yh-ui/hooks", async () => {
+  const actual = await vi.importActual("@yh-ui/hooks");
+  return {
+    ...actual,
+    useNamespace: (name) => {
+      const b = (suffix) => suffix ? `yh-${name}-${suffix}` : `yh-${name}`;
+      return {
+        b,
+        e: (element) => `${b()}__${element}`,
+        m: (modifier) => `${b()}--${modifier}`,
+        em: (element, modifier) => `${b()}__${element}--${modifier}`,
+        is: (state, value) => {
+          if (value === void 0) return `is-${state}`;
+          return value ? `is-${state}` : "";
+        }
+      };
+    },
+    useFormItem: () => ({
+      form: null,
+      formItem: null,
+      validate: vi.fn()
+    }),
+    useId: () => "test-id",
+    useLocale: () => ({
+      t: (key) => key,
+      locale: ref(zhCn),
+      lang: ref("zh-cn")
+    }),
+    useConfig: () => ({
+      globalSize: ref("default"),
+      globalLocale: ref(zhCn)
+    }),
+    useZIndex: () => ({
+      currentZIndex: ref(2e3),
+      nextZIndex: () => 2e3
+    })
+  };
+});
+describe("YhDatePicker Extended", () => {
+  beforeEach(() => {
+    Element.prototype.getBoundingClientRect = vi.fn(() => ({
+      width: 220,
+      height: 40,
+      top: 100,
+      left: 100,
+      bottom: 140,
+      right: 320,
+      x: 100,
+      y: 100,
+      toJSON: () => {
+      }
+    }));
+  });
+  describe("Other picker types", () => {
+    it("should support month type", async () => {
+      const value = ref(null);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "month",
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => value.value = val,
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      expect(wrapper.findComponent(MonthTable).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      expect(value.value).not.toBeNull();
+    });
+    it("should support year type", async () => {
+      const wrapper = mount(DatePicker, {
+        props: { type: "year", panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.findComponent(YearTable).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    });
+    it("should support quarter type", async () => {
+      const value = ref(null);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "quarter",
+          panelOnly: true,
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => value.value = val
+        }
+      });
+      await nextTick();
+      expect(wrapper.findComponent(QuarterTable).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      expect(value.value).not.toBeNull();
+    });
+  });
+  describe("Range pickers", () => {
+    it("should support daterange type", async () => {
+      const value = ref([null, null]);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "daterange",
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => value.value = val,
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[10].trigger("click");
+      await nextTick();
+      await cells[20].trigger("click");
+      await nextTick();
+      expect(value.value.length).toBe(2);
+    });
+    it("should support monthrange type", async () => {
+      const wrapper = mount(DatePicker, {
+        props: { type: "monthrange", panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.findComponent(MonthTable).exists()).toBe(true);
+    });
+  });
+  describe("Navigation & View Switching", () => {
+    it("should switch between views", async () => {
+      const wrapper = mount(DatePicker, { props: { panelOnly: true } });
+      await nextTick();
+      expect(wrapper.findComponent(DateTable).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await nextTick();
+      expect(wrapper.findComponent(MonthTable).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await nextTick();
+      expect(wrapper.findComponent(YearTable).exists()).toBe(true);
+    });
+  });
+  describe("DateTable extra coverage", () => {
+    it("should support week selection mode", async () => {
+      const value = ref(null);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "week",
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => value.value = val,
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      const cell = wrapper.find(".yh-date-picker__cell.is-current-month");
+      await cell.trigger("click");
+      expect(value.value).not.toBeNull();
+    });
+    it("should support cellRender prop", async () => {
+      const cellRender = (date) => {
+        return { text: "custom", className: "custom-cell-class" };
+      };
+      const wrapper = mount(DatePicker, {
+        props: { cellRender, panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.find(".custom-cell-class").exists()).toBe(true);
+      expect(wrapper.find(".custom-cell-class").text()).toBe("custom");
+    });
+    it("should handle range selection hovering", async () => {
+      const value = ref(null);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "daterange",
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => {
+            value.value = val;
+            wrapper.setProps({ modelValue: val });
+          },
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[10].trigger("click");
+      await nextTick();
+      await cells[15].trigger("mouseenter");
+      await nextTick();
+      expect(wrapper.find(".is-in-range").exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__table").trigger("mouseleave");
+      await nextTick();
+      expect(wrapper.find(".is-in-range").exists()).toBe(false);
+    });
+  });
+  describe("Footer & Presets", () => {
+    it("should handle presets", async () => {
+      const presets = [{ label: "Today", value: /* @__PURE__ */ new Date() }];
+      const wrapper = mount(DatePicker, {
+        props: { presets, panelOnly: true }
+      });
+      await nextTick();
+      const presetBtn = wrapper.find(".yh-date-picker__preset-item");
+      await presetBtn.trigger("click");
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    });
+    it("should support datetime type", async () => {
+      const wrapper = mount(DatePicker, {
+        props: { type: "datetime", panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.find(".yh-date-picker__footer").exists()).toBe(true);
+    });
+    it("should handle footer confirm button", async () => {
+      const onConfirm = vi.fn();
+      const wrapper = mount(DatePicker, {
+        props: { type: "daterange", onConfirm, panelOnly: true }
+      });
+      await nextTick();
+      const confirmBtn = wrapper.find(".yh-date-picker__footer-btn--confirm");
+      await confirmBtn.trigger("click");
+      expect(onConfirm).toHaveBeenCalled();
+    });
+  });
+  describe("Navigation & Miscellaneous", () => {
+    it("should handle navigation buttons", async () => {
+      const wrapper = mount(DatePicker, { props: { panelOnly: true } });
+      await nextTick();
+      const prevYearBtn = wrapper.find(".yh-date-picker__header-btns--double-left");
+      const nextYearBtn = wrapper.find(".yh-date-picker__header-btns--double-right");
+      const prevMonthBtn = wrapper.find(".yh-date-picker__header-btns--left");
+      const nextMonthBtn = wrapper.find(".yh-date-picker__header-btns--right");
+      if (prevYearBtn.exists()) await prevYearBtn.trigger("click");
+      if (nextYearBtn.exists()) await nextYearBtn.trigger("click");
+      if (prevMonthBtn.exists()) await prevMonthBtn.trigger("click");
+      if (nextMonthBtn.exists()) await nextMonthBtn.trigger("click");
+      expect(wrapper.findComponent(DateTable).exists()).toBe(true);
+    });
+    it("should handle clear action", async () => {
+      const onUpdateModelValue = vi.fn();
+      const value = /* @__PURE__ */ new Date();
+      const wrapper = mount(DatePicker, {
+        props: {
+          modelValue: value,
+          clearable: true,
+          "onUpdate:modelValue": (val) => onUpdateModelValue(val)
+        }
+      });
+      await nextTick();
+      const clearBtn = wrapper.find(".yh-date-picker__clear");
+      if (clearBtn.exists()) {
+        await clearBtn.trigger("click");
+        expect(onUpdateModelValue).toHaveBeenCalledWith(null);
+      }
+    });
+    it("should handle disabled dates", async () => {
+      const disabledDate = (date) => date.getTime() < Date.now();
+      const wrapper = mount(DatePicker, {
+        props: { disabledDate, panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.find(".is-disabled").exists()).toBe(true);
+    });
+    it("should support firstDayOfWeek prop", async () => {
+      const wrapper = mount(DatePicker, {
+        props: { firstDayOfWeek: 1, panelOnly: true }
+      });
+      await nextTick();
+      const header = wrapper.findAll(".yh-date-picker__table th");
+      expect(header[0].text()).toBe("datepicker.weeks.mon");
+    });
+    it("should handle reverse range selection", async () => {
+      const value = ref([null, null]);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "daterange",
+          orderOnConfirm: true,
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => value.value = val,
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[20].trigger("click");
+      await nextTick();
+      await wrapper.setProps({ modelValue: value.value });
+      await nextTick();
+      await cells[10].trigger("click");
+      await nextTick();
+      expect(dayjs(value.value[0]).isBefore(value.value[1])).toBe(true);
+    });
+    it("should handle reverse range selection without orderOnConfirm", async () => {
+      const value = ref([null, null]);
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "daterange",
+          orderOnConfirm: false,
+          modelValue: value.value,
+          "onUpdate:modelValue": (val) => {
+            value.value = val;
+            wrapper.setProps({ modelValue: val });
+          },
+          panelOnly: true
+        }
+      });
+      await nextTick();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[20].trigger("click");
+      await nextTick();
+      await cells[10].trigger("click");
+      await nextTick();
+      expect(value.value[1]).toBeNull();
+    });
+  });
+  describe("View Drilling", () => {
+    it("should drill down from year to date view", async () => {
+      const wrapper = mount(DatePicker, { props: { type: "date", panelOnly: true } });
+      await nextTick();
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await nextTick();
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await nextTick();
+      await wrapper.find(".yh-date-picker__cell").trigger("click");
+      await nextTick();
+      expect(wrapper.findComponent(MonthTable).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__cell").trigger("click");
+      await nextTick();
+      expect(wrapper.findComponent(DateTable).exists()).toBe(true);
+    });
+  });
+  describe("Selected states in tables", () => {
+    it("should show selected state in month/year/quarter tables", async () => {
+      const date = new Date(2024, 5, 15);
+      const monthWrapper = mount(MonthTable, { props: { date, selectedDate: date } });
+      expect(monthWrapper.find(".is-selected").exists()).toBe(true);
+      const yearWrapper = mount(YearTable, { props: { date, selectedDate: date } });
+      expect(yearWrapper.find(".is-selected").exists()).toBe(true);
+      const quarterWrapper = mount(QuarterTable, { props: { date, selectedDate: date } });
+      expect(quarterWrapper.find(".is-selected").exists()).toBe(true);
+    });
+    it("should show range states in month/year tables", async () => {
+      const from = new Date(2024, 0, 1);
+      const to = new Date(2024, 11, 31);
+      const date = new Date(2024, 5, 1);
+      const rangeState = { from, to, hovering: null };
+      const monthWrapper = mount(MonthTable, { props: { date, rangeState } });
+      expect(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const yearWrapper = mount(YearTable, { props: { date, rangeState } });
+      expect(yearWrapper.find(".is-range-start").exists()).toBe(true);
+    });
+  });
+  describe("Component Props & UI", () => {
+    it("should handle status prop", () => {
+      const wrapper = mount(DatePicker, { props: { status: "error" } });
+      expect(wrapper.classes()).toContain("yh-date-picker--error");
+    });
+    it("should respect disabled and readonly props", async () => {
+      const wrapper = mount(DatePicker, { props: { disabled: true } });
+      await wrapper.trigger("click");
+      expect(wrapper.find(".yh-date-picker__panel").exists()).toBe(false);
+      const wrapper2 = mount(DatePicker, { props: { readonly: true } });
+      await wrapper2.trigger("click");
+      expect(wrapper2.find(".yh-date-picker__panel").exists()).toBe(false);
+    });
+    it("should render custom icons", async () => {
+      const wrapper = mount(DatePicker, {
+        props: { prefixIcon: "calendar", clearIcon: "close", modelValue: /* @__PURE__ */ new Date() }
+      });
+      await wrapper.trigger("mouseenter");
+      await nextTick();
+      expect(wrapper.find(".yh-date-picker__icon").exists()).toBe(true);
+      expect(wrapper.find(".yh-date-picker__clear").exists()).toBe(true);
+    });
+    it("should handle valueFormat", async () => {
+      let emittedValue = null;
+      const wrapper = mount(DatePicker, {
+        props: {
+          type: "date",
+          valueFormat: "YYYY/MM/DD",
+          "onUpdate:modelValue": (val) => emittedValue = val
+        }
+      });
+      await nextTick();
+      const vm = wrapper.vm;
+      vm.handleSelect(new Date(2024, 0, 1));
+      await nextTick();
+      expect(emittedValue).toBe("2024/01/01");
+    });
+  });
+  describe("Outside interactions", () => {
+    it("should close on outside click", async () => {
+      const wrapper = mount(DatePicker, { props: { teleported: false } });
+      const vm = wrapper.vm;
+      vm.visible = true;
+      await nextTick();
+      const event = new MouseEvent("click", { bubbles: true });
+      document.dispatchEvent(event);
+      await nextTick();
+      expect(vm.visible).toBe(false);
+    });
+    it("should handle position update when opened", async () => {
+      const wrapper = mount(DatePicker, { props: { teleported: true } });
+      const vm = wrapper.vm;
+      vm.visible = true;
+      await nextTick();
+      expect(vm.dropdownStyle).toBeDefined();
+    });
+  });
+  describe("Pre-selected states and input display", () => {
+    it("should show pre-selected week", async () => {
+      const date = new Date(2024, 5, 15);
+      const wrapper = mount(DatePicker, {
+        props: { type: "week", modelValue: date, panelOnly: true }
+      });
+      await nextTick();
+      expect(wrapper.find(".is-selected").exists()).toBe(true);
+    });
+    it("should show pre-selected range in date/month/quarter tables", async () => {
+      const from = new Date(2024, 0, 1);
+      const to = new Date(2024, 6, 1);
+      const modelValue = [from, to];
+      const dateWrapper = mount(DatePicker, {
+        props: { type: "daterange", modelValue, panelOnly: true }
+      });
+      await nextTick();
+      expect(dateWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const monthWrapper = mount(DatePicker, {
+        props: { type: "monthrange", modelValue, panelOnly: true }
+      });
+      await nextTick();
+      expect(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const quarterWrapper = mount(DatePicker, {
+        props: { type: "quarterrange", modelValue, panelOnly: true }
+      });
+      await nextTick();
+      expect(quarterWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+    });
+    it("should display formatted range in inputs", async () => {
+      const from = new Date(2024, 0, 1);
+      const to = new Date(2024, 0, 2);
+      const wrapper = mount(DatePicker, {
+        props: { type: "daterange", modelValue: [from, to] }
+      });
+      await nextTick();
+      const inputs = wrapper.findAll(".yh-date-picker__range-input");
+      expect(inputs[0].element.getAttribute("value")).toBe("2024-01-01");
+      expect(inputs[1].element.getAttribute("value")).toBe("2024-01-02");
+    });
+  });
+});

package/dist/date-picker/__tests__/date-picker.ssr.test.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _serverRenderer = require("@vue/server-renderer");
+var _datePicker = _interopRequireDefault(require("../src/date-picker.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhDatePicker SSR", () => {
+  (0, _vitest.it)("\u670D\u52A1\u7AEF\u6E32\u67D3\u4E0D\u5E94\u62A5\u9519\u4E14\u751F\u6210\u6B63\u786E\u7ED3\u6784", async () => {
+    const app = (0, _vue.createSSRApp)({
+      render: () => (0, _vue.h)(_datePicker.default)
+    });
+    const html = await (0, _serverRenderer.renderToString)(app);
+    (0, _vitest.expect)(html).toContain("yh-date-picker");
+    (0, _vitest.expect)(html).toContain("input");
+    (0, _vitest.expect)(html).not.toContain("yh-date-picker__panel");
+  });
+  (0, _vitest.it)("SSR \u521D\u59CB\u503C\u6E32\u67D3", async () => {
+    const app = (0, _vue.createSSRApp)(_datePicker.default, {
+      modelValue: "2024-01-01",
+      format: "YYYY-MM-DD"
+    });
+    const html = await (0, _serverRenderer.renderToString)(app);
+    (0, _vitest.expect)(html).toContain('value="2024-01-01"');
+  });
+});

package/dist/date-picker/__tests__/date-picker.ssr.test.d.ts

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

package/dist/date-picker/__tests__/date-picker.ssr.test.mjs

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { createSSRApp, h } from "vue";
+import { renderToString } from "@vue/server-renderer";
+import DatePicker from "../src/date-picker.vue";
+describe("YhDatePicker SSR", () => {
+  it("\u670D\u52A1\u7AEF\u6E32\u67D3\u4E0D\u5E94\u62A5\u9519\u4E14\u751F\u6210\u6B63\u786E\u7ED3\u6784", async () => {
+    const app = createSSRApp({
+      render: () => h(DatePicker)
+    });
+    const html = await renderToString(app);
+    expect(html).toContain("yh-date-picker");
+    expect(html).toContain("input");
+    expect(html).not.toContain("yh-date-picker__panel");
+  });
+  it("SSR \u521D\u59CB\u503C\u6E32\u67D3", async () => {
+    const app = createSSRApp(DatePicker, {
+      modelValue: "2024-01-01",
+      format: "YYYY-MM-DD"
+    });
+    const html = await renderToString(app);
+    expect(html).toContain('value="2024-01-01"');
+  });
+});

package/dist/date-picker/__tests__/date-picker.test.cjs

@@ -0,0 +1,170 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _vue = require("vue");
+var _datePicker = _interopRequireDefault(require("../src/date-picker.vue"));
+var _locale = require("@yh-ui/locale");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_vitest.vi.mock("@yh-ui/hooks", async () => {
+  const actual = await _vitest.vi.importActual("@yh-ui/hooks");
+  return {
+    ...actual,
+    useNamespace: name => ({
+      b: suffix => suffix ? `yh-${name}-${suffix}` : `yh-${name}`,
+      e: element => `yh-${name}__${element}`,
+      m: modifier => `yh-${name}--${modifier}`,
+      em: (element, modifier) => `yh-${name}__${element}--${modifier}`,
+      is: (state, value) => value !== false ? `is-${state}` : ""
+    }),
+    useFormItem: () => ({
+      form: null,
+      formItem: null,
+      validate: _vitest.vi.fn()
+    }),
+    useId: () => "test-id",
+    useLocale: () => ({
+      t: key => key,
+      locale: (0, _vue.ref)(_locale.zhCn),
+      lang: (0, _vue.ref)("zh-cn")
+    }),
+    useConfig: () => ({
+      globalSize: (0, _vue.ref)("default"),
+      globalLocale: (0, _vue.ref)(_locale.zhCn)
+    }),
+    useZIndex: () => ({
+      currentZIndex: (0, _vue.ref)(2e3),
+      nextZIndex: () => 2e3
+    })
+  };
+});
+(0, _vitest.describe)("YhDatePicker", () => {
+  (0, _vitest.beforeEach)(() => {
+    Element.prototype.getBoundingClientRect = _vitest.vi.fn(() => ({
+      width: 220,
+      height: 40,
+      top: 100,
+      left: 100,
+      bottom: 140,
+      right: 320,
+      x: 100,
+      y: 100,
+      toJSON: () => {}
+    }));
+  });
+  (0, _vitest.describe)("\u57FA\u7840\u6E32\u67D3", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u57FA\u7840\u7EC4\u4EF6", () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default);
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker").exists()).toBe(true);
+      (0, _vitest.expect)(wrapper.find("input").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u4E0D\u540C\u5C3A\u5BF8", () => {
+      const wrapperLarge = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          size: "large"
+        }
+      });
+      (0, _vitest.expect)(wrapperLarge.find(".yh-date-picker").classes()).toContain("yh-date-picker--large");
+      const wrapperSmall = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          size: "small"
+        }
+      });
+      (0, _vitest.expect)(wrapperSmall.find(".yh-date-picker").classes()).toContain("yh-date-picker--small");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u7981\u7528\u72B6\u6001", () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          disabled: true
+        }
+      });
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker").classes()).toContain("is-disabled");
+    });
+  });
+  (0, _vitest.describe)("\u4EA4\u4E92\u903B\u8F91", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u80FD\u591F\u6253\u5F00/\u5173\u95ED\u9762\u677F", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          teleported: false
+        }
+      });
+      await wrapper.trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__panel").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5355\u9009\u65E5\u671F\u5E94\u8BE5\u66F4\u65B0\u503C\u5E76\u5173\u95ED\u9762\u677F", async () => {
+      const value = (0, _vue.ref)(null);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val,
+          teleported: false
+        }
+      });
+      await wrapper.trigger("click");
+      await (0, _vue.nextTick)();
+      const cell = wrapper.find(".yh-date-picker__cell.is-current-month");
+      await cell.trigger("click");
+      (0, _vitest.expect)(value.value).not.toBeNull();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__panel").exists()).toBe(false);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u6E05\u7A7A\u529F\u80FD", async () => {
+      const value = (0, _vue.ref)(/* @__PURE__ */new Date());
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          modelValue: value.value,
+          clearable: true,
+          "onUpdate:modelValue": val => value.value = val
+        }
+      });
+      await wrapper.trigger("mouseenter");
+      await (0, _vue.nextTick)();
+      const clearBtn = wrapper.find(".yh-date-picker__clear");
+      await clearBtn.trigger("click");
+      (0, _vitest.expect)(value.value).toBeNull();
+    });
+  });
+  (0, _vitest.describe)("\u5468\u671F\u5BFC\u822A", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u6708\u4EFD\u5207\u6362", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          teleported: false
+        }
+      });
+      await wrapper.trigger("click");
+      await (0, _vue.nextTick)();
+      const initialHeader = wrapper.find(".yh-date-picker__header-label").text();
+      const nextBtn = wrapper.findAll(".yh-date-picker__header-btns")[3];
+      await nextBtn.trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__header-label").text()).not.toBe(initialHeader);
+    });
+  });
+  (0, _vitest.describe)("\u9AD8\u7EA7\u7279\u6027", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 presets \u5FEB\u6377\u9879", async () => {
+      const presets = [{
+        label: "\u6D4B\u8BD5\u9879",
+        value: /* @__PURE__ */new Date()
+      }];
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          presets,
+          teleported: false
+        }
+      });
+      await wrapper.trigger("click");
+      await (0, _vue.nextTick)();
+      const presetBtn = wrapper.find(".yh-date-picker__presets button");
+      (0, _vitest.expect)(presetBtn.text()).toBe("\u6D4B\u8BD5\u9879");
+    });
+    (0, _vitest.it)("\u8303\u56F4\u6A21\u5F0F\u7684\u57FA\u672C\u6E32\u67D3", () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange"
+        }
+      });
+      (0, _vitest.expect)(wrapper.findAll(".yh-date-picker__range-input").length).toBe(2);
+    });
+  });
+});

package/dist/date-picker/__tests__/date-picker.test.d.ts

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