@yh-ui/components 0.1.0

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

@@ -0,0 +1,581 @@
+"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 _monthTable = _interopRequireDefault(require("../src/month-table.vue"));
+var _yearTable = _interopRequireDefault(require("../src/year-table.vue"));
+var _quarterTable = _interopRequireDefault(require("../src/quarter-table.vue"));
+var _dateTable = _interopRequireDefault(require("../src/date-table.vue"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+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 => {
+      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: _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 Extended", () => {
+  (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)("Other picker types", () => {
+    (0, _vitest.it)("should support month type", async () => {
+      const value = (0, _vue.ref)(null);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "month",
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      (0, _vitest.expect)(value.value).not.toBeNull();
+    });
+    (0, _vitest.it)("should support year type", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "year",
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_yearTable.default).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
+    });
+    (0, _vitest.it)("should support quarter type", async () => {
+      const value = (0, _vue.ref)(null);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "quarter",
+          panelOnly: true,
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_quarterTable.default).exists()).toBe(true);
+      const cell = wrapper.find(".yh-date-picker__cell");
+      await cell.trigger("click");
+      (0, _vitest.expect)(value.value).not.toBeNull();
+    });
+  });
+  (0, _vitest.describe)("Range pickers", () => {
+    (0, _vitest.it)("should support daterange type", async () => {
+      const value = (0, _vue.ref)([null, null]);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[10].trigger("click");
+      await (0, _vue.nextTick)();
+      await cells[20].trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(value.value.length).toBe(2);
+    });
+    (0, _vitest.it)("should support monthrange type", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "monthrange",
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("Navigation & View Switching", () => {
+    (0, _vitest.it)("should switch between views", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_yearTable.default).exists()).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("DateTable extra coverage", () => {
+    (0, _vitest.it)("should support week selection mode", async () => {
+      const value = (0, _vue.ref)(null);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "week",
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val,
+          panelOnly: true
+        }
+      });
+      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();
+    });
+    (0, _vitest.it)("should support cellRender prop", async () => {
+      const cellRender = date => {
+        return {
+          text: "custom",
+          className: "custom-cell-class"
+        };
+      };
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          cellRender,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-cell-class").exists()).toBe(true);
+      (0, _vitest.expect)(wrapper.find(".custom-cell-class").text()).toBe("custom");
+    });
+    (0, _vitest.it)("should handle range selection hovering", async () => {
+      const value = (0, _vue.ref)(null);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          modelValue: value.value,
+          "onUpdate:modelValue": val => {
+            value.value = val;
+            wrapper.setProps({
+              modelValue: val
+            });
+          },
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[10].trigger("click");
+      await (0, _vue.nextTick)();
+      await cells[15].trigger("mouseenter");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".is-in-range").exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__table").trigger("mouseleave");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".is-in-range").exists()).toBe(false);
+    });
+  });
+  (0, _vitest.describe)("Footer & Presets", () => {
+    (0, _vitest.it)("should handle presets", async () => {
+      const presets = [{
+        label: "Today",
+        value: /* @__PURE__ */new Date()
+      }];
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          presets,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const presetBtn = wrapper.find(".yh-date-picker__preset-item");
+      await presetBtn.trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
+    });
+    (0, _vitest.it)("should support datetime type", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "datetime",
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__footer").exists()).toBe(true);
+    });
+    (0, _vitest.it)("should handle footer confirm button", async () => {
+      const onConfirm = _vitest.vi.fn();
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          onConfirm,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const confirmBtn = wrapper.find(".yh-date-picker__footer-btn--confirm");
+      await confirmBtn.trigger("click");
+      (0, _vitest.expect)(onConfirm).toHaveBeenCalled();
+    });
+  });
+  (0, _vitest.describe)("Navigation & Miscellaneous", () => {
+    (0, _vitest.it)("should handle navigation buttons", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          panelOnly: true
+        }
+      });
+      await (0, _vue.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");
+      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
+    });
+    (0, _vitest.it)("should handle clear action", async () => {
+      const onUpdateModelValue = _vitest.vi.fn();
+      const value = /* @__PURE__ */new Date();
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          modelValue: value,
+          clearable: true,
+          "onUpdate:modelValue": val => onUpdateModelValue(val)
+        }
+      });
+      await (0, _vue.nextTick)();
+      const clearBtn = wrapper.find(".yh-date-picker__clear");
+      if (clearBtn.exists()) {
+        await clearBtn.trigger("click");
+        (0, _vitest.expect)(onUpdateModelValue).toHaveBeenCalledWith(null);
+      }
+    });
+    (0, _vitest.it)("should handle disabled dates", async () => {
+      const disabledDate = date => date.getTime() < Date.now();
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          disabledDate,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".is-disabled").exists()).toBe(true);
+    });
+    (0, _vitest.it)("should support firstDayOfWeek prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          firstDayOfWeek: 1,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const header = wrapper.findAll(".yh-date-picker__table th");
+      (0, _vitest.expect)(header[0].text()).toBe("datepicker.weeks.mon");
+    });
+    (0, _vitest.it)("should handle reverse range selection", async () => {
+      const value = (0, _vue.ref)([null, null]);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          orderOnConfirm: true,
+          modelValue: value.value,
+          "onUpdate:modelValue": val => value.value = val,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[20].trigger("click");
+      await (0, _vue.nextTick)();
+      await wrapper.setProps({
+        modelValue: value.value
+      });
+      await (0, _vue.nextTick)();
+      await cells[10].trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)((0, _dayjs.default)(value.value[0]).isBefore(value.value[1])).toBe(true);
+    });
+    (0, _vitest.it)("should handle reverse range selection without orderOnConfirm", async () => {
+      const value = (0, _vue.ref)([null, null]);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          orderOnConfirm: false,
+          modelValue: value.value,
+          "onUpdate:modelValue": val => {
+            value.value = val;
+            wrapper.setProps({
+              modelValue: val
+            });
+          },
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
+      await cells[20].trigger("click");
+      await (0, _vue.nextTick)();
+      await cells[10].trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(value.value[1]).toBeNull();
+    });
+  });
+  (0, _vitest.describe)("View Drilling", () => {
+    (0, _vitest.it)("should drill down from year to date view", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "date",
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await (0, _vue.nextTick)();
+      await wrapper.find(".yh-date-picker__header-label").trigger("click");
+      await (0, _vue.nextTick)();
+      await wrapper.find(".yh-date-picker__cell").trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
+      await wrapper.find(".yh-date-picker__cell").trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("Selected states in tables", () => {
+    (0, _vitest.it)("should show selected state in month/year/quarter tables", async () => {
+      const date = new Date(2024, 5, 15);
+      const monthWrapper = (0, _testUtils.mount)(_monthTable.default, {
+        props: {
+          date,
+          selectedDate: date
+        }
+      });
+      (0, _vitest.expect)(monthWrapper.find(".is-selected").exists()).toBe(true);
+      const yearWrapper = (0, _testUtils.mount)(_yearTable.default, {
+        props: {
+          date,
+          selectedDate: date
+        }
+      });
+      (0, _vitest.expect)(yearWrapper.find(".is-selected").exists()).toBe(true);
+      const quarterWrapper = (0, _testUtils.mount)(_quarterTable.default, {
+        props: {
+          date,
+          selectedDate: date
+        }
+      });
+      (0, _vitest.expect)(quarterWrapper.find(".is-selected").exists()).toBe(true);
+    });
+    (0, _vitest.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 = (0, _testUtils.mount)(_monthTable.default, {
+        props: {
+          date,
+          rangeState
+        }
+      });
+      (0, _vitest.expect)(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const yearWrapper = (0, _testUtils.mount)(_yearTable.default, {
+        props: {
+          date,
+          rangeState
+        }
+      });
+      (0, _vitest.expect)(yearWrapper.find(".is-range-start").exists()).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("Component Props & UI", () => {
+    (0, _vitest.it)("should handle status prop", () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          status: "error"
+        }
+      });
+      (0, _vitest.expect)(wrapper.classes()).toContain("yh-date-picker--error");
+    });
+    (0, _vitest.it)("should respect disabled and readonly props", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          disabled: true
+        }
+      });
+      await wrapper.trigger("click");
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__panel").exists()).toBe(false);
+      const wrapper2 = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          readonly: true
+        }
+      });
+      await wrapper2.trigger("click");
+      (0, _vitest.expect)(wrapper2.find(".yh-date-picker__panel").exists()).toBe(false);
+    });
+    (0, _vitest.it)("should render custom icons", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          prefixIcon: "calendar",
+          clearIcon: "close",
+          modelValue: /* @__PURE__ */new Date()
+        }
+      });
+      await wrapper.trigger("mouseenter");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__icon").exists()).toBe(true);
+      (0, _vitest.expect)(wrapper.find(".yh-date-picker__clear").exists()).toBe(true);
+    });
+    (0, _vitest.it)("should handle valueFormat", async () => {
+      let emittedValue = null;
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "date",
+          valueFormat: "YYYY/MM/DD",
+          "onUpdate:modelValue": val => emittedValue = val
+        }
+      });
+      await (0, _vue.nextTick)();
+      const vm = wrapper.vm;
+      vm.handleSelect(new Date(2024, 0, 1));
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(emittedValue).toBe("2024/01/01");
+    });
+  });
+  (0, _vitest.describe)("Outside interactions", () => {
+    (0, _vitest.it)("should close on outside click", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          teleported: false
+        }
+      });
+      const vm = wrapper.vm;
+      vm.visible = true;
+      await (0, _vue.nextTick)();
+      const event = new MouseEvent("click", {
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(vm.visible).toBe(false);
+    });
+    (0, _vitest.it)("should handle position update when opened", async () => {
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          teleported: true
+        }
+      });
+      const vm = wrapper.vm;
+      vm.visible = true;
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(vm.dropdownStyle).toBeDefined();
+    });
+  });
+  (0, _vitest.describe)("Pre-selected states and input display", () => {
+    (0, _vitest.it)("should show pre-selected week", async () => {
+      const date = new Date(2024, 5, 15);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "week",
+          modelValue: date,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".is-selected").exists()).toBe(true);
+    });
+    (0, _vitest.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 = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          modelValue,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(dateWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const monthWrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "monthrange",
+          modelValue,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+      const quarterWrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "quarterrange",
+          modelValue,
+          panelOnly: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(quarterWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
+    });
+    (0, _vitest.it)("should display formatted range in inputs", async () => {
+      const from = new Date(2024, 0, 1);
+      const to = new Date(2024, 0, 2);
+      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
+        props: {
+          type: "daterange",
+          modelValue: [from, to]
+        }
+      });
+      await (0, _vue.nextTick)();
+      const inputs = wrapper.findAll(".yh-date-picker__range-input");
+      (0, _vitest.expect)(inputs[0].element.getAttribute("value")).toBe("2024-01-01");
+      (0, _vitest.expect)(inputs[1].element.getAttribute("value")).toBe("2024-01-02");
+    });
+  });
+});

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

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