@ql-web/view-report 1.0.2 → 1.0.3

package/view-report.es.js

@@ -1,12 +1,20 @@
-import { defineComponent as M, ref as h, computed as w, watch as U, onMounted as j, onUnmounted as q, isVue2 as C } from "vue-demi";
-function b(r, e, t, a, p, u, g, c) {
-  var s = typeof r == "function" ? r.options : r;
-  return e && (s.render = e, s.staticRenderFns = t, s._compiled = !0), u && (s._scopeId = "data-v-" + u), {
-    exports: r,
-    options: s
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, isVue2 } from "vue-demi";
+function normalizeComponent(scriptExports, render3, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render3) {
+    options.render = render3;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  return {
+    exports: scriptExports,
+    options
   };
 }
-const G = M({
+const _sfc_main$1 = defineComponent({
   name: "MyButton",
   // 必须声明 name，用于全局注册
   props: {
@@ -19,126 +27,138 @@ const G = M({
       default: "#409eff"
     }
   },
-  setup(r, { emit: e }) {
-    return { handleClick: () => {
-      e("click", "按钮被点击");
-    } };
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click", "按钮被点击");
+    };
+    return { handleClick };
   }
 });
-var H = function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("button", { staticClass: "my-button", style: { background: e.color }, on: { click: e.handleClick } }, [e._t("default", function() {
-    return [e._v(e._s(e.text))];
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("button", { staticClass: "my-button", style: { background: _vm.color }, on: { "click": _vm.handleClick } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.text))];
   })], 2);
-}, J = [], K = /* @__PURE__ */ b(
-  G,
-  H,
-  J,
-  !1,
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   "d19bd5c3"
 );
-const Q = K.exports;
-class v {
+const MyButton = __component__$1.exports;
+class DateUtils {
   /**
    * 格式化日期为 YYYY-MM-DD 格式
    * @param {Date} date 日期对象
    * @returns {string} 格式化后的日期字符串
    */
-  static formatDate(e) {
-    if (!e || !(e instanceof Date) || isNaN(e.getTime())) return "";
-    const t = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), p = String(e.getDate()).padStart(2, "0");
-    return `${t}-${a}-${p}`;
+  static formatDate(date) {
+    if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
   }
   /**
    * 获取指定日期所在月份的第一天
    * @param {Date} date 基准日期
    * @returns {Date} 月份第一天
    */
-  static getFirstDayOfMonth(e) {
-    return new Date(e.getFullYear(), e.getMonth(), 1);
+  static getFirstDayOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
   }
   /**
    * 获取指定日期所在月份的最后一天
    * @param {Date} date 基准日期
    * @returns {Date} 月份最后一天
    */
-  static getLastDayOfMonth(e) {
-    return new Date(e.getFullYear(), e.getMonth() + 1, 0);
+  static getLastDayOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
   }
   /**
    * 获取日期对应的星期数（周日=0，周六=6）
    * @returns {number} 星期数
    */
-  static getDayOfWeek(e) {
-    return e.getDay();
+  static getDayOfWeek(date) {
+    return date.getDay();
   }
   /**
    * 上一个月（支持跨年，如2026-01 → 2025-12）
    * @returns {Date} 上月日期
    */
-  static getPrevMonth(e) {
-    const t = e.getMonth() === 0 ? e.getFullYear() - 1 : e.getFullYear(), a = e.getMonth() === 0 ? 11 : e.getMonth() - 1;
-    return new Date(t, a, 1);
+  static getPrevMonth(date) {
+    const year = date.getMonth() === 0 ? date.getFullYear() - 1 : date.getFullYear();
+    const month = date.getMonth() === 0 ? 11 : date.getMonth() - 1;
+    return new Date(year, month, 1);
   }
   /**
    * 下一个月（支持跨年，如2025-12 → 2026-01）
    * @returns {Date} 下月日期
    */
-  static getNextMonth(e) {
-    const t = e.getMonth() === 11 ? e.getFullYear() + 1 : e.getFullYear(), a = e.getMonth() === 11 ? 0 : e.getMonth() + 1;
-    return new Date(t, a, 1);
+  static getNextMonth(date) {
+    const year = date.getMonth() === 11 ? date.getFullYear() + 1 : date.getFullYear();
+    const month = date.getMonth() === 11 ? 0 : date.getMonth() + 1;
+    return new Date(year, month, 1);
   }
   /**
    * 上一年（直接切换年份，如2026 → 2025）
    * @returns {Date} 上年同月日期
    */
-  static getPrevYear(e) {
-    return new Date(e.getFullYear() - 1, e.getMonth(), 1);
+  static getPrevYear(date) {
+    return new Date(date.getFullYear() - 1, date.getMonth(), 1);
   }
   /**
    * 下一年（直接切换年份，如2025 → 2026）
    * @returns {Date} 下年同月日期
    */
-  static getNextYear(e) {
-    return new Date(e.getFullYear() + 1, e.getMonth(), 1);
+  static getNextYear(date) {
+    return new Date(date.getFullYear() + 1, date.getMonth(), 1);
   }
   /**
    * 生成6行7列的日期面板数据（42个，自动补充跨月/跨年日期）
    * @returns {Array} 42个日期对象的数组（6*7）
    */
-  static generateMonthPanel(e, t = "") {
-    const a = [], p = this.getFirstDayOfMonth(e), u = this.getLastDayOfMonth(e), c = this.getDayOfWeek(p);
-    for (let o = c; o > 0; o--) {
-      const i = new Date(p.getTime() - o * 24 * 60 * 60 * 1e3);
-      a.push({
-        date: i,
-        formatDate: this.formatDate(i),
-        isCurrentMonth: !1,
-        isSelected: this.formatDate(i) === t
+  static generateMonthPanel(currentDate, selectedDate = "") {
+    const panel = [];
+    const firstDay = this.getFirstDayOfMonth(currentDate);
+    const lastDay = this.getLastDayOfMonth(currentDate);
+    const firstDayWeek = this.getDayOfWeek(firstDay);
+    const prevMonthDaysCount = firstDayWeek;
+    for (let i = prevMonthDaysCount; i > 0; i--) {
+      const prevDay = new Date(firstDay.getTime() - i * 24 * 60 * 60 * 1e3);
+      panel.push({
+        date: prevDay,
+        formatDate: this.formatDate(prevDay),
+        isCurrentMonth: false,
+        isSelected: this.formatDate(prevDay) === selectedDate
       });
     }
-    const s = u.getDate();
-    for (let o = 1; o <= s; o++) {
-      const i = new Date(e.getFullYear(), e.getMonth(), o);
-      a.push({
-        date: i,
-        formatDate: this.formatDate(i),
-        isCurrentMonth: !0,
-        isSelected: this.formatDate(i) === t
+    const currentMonthDays = lastDay.getDate();
+    for (let i = 1; i <= currentMonthDays; i++) {
+      const currentDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
+      panel.push({
+        date: currentDay,
+        formatDate: this.formatDate(currentDay),
+        isCurrentMonth: true,
+        isSelected: this.formatDate(currentDay) === selectedDate
       });
     }
-    const D = 42 - a.length;
-    for (let o = 1; o <= D; o++) {
-      const i = new Date(u.getTime() + o * 24 * 60 * 60 * 1e3);
-      a.push({
-        date: i,
-        formatDate: this.formatDate(i),
-        isCurrentMonth: !1,
-        isSelected: this.formatDate(i) === t
+    const needNextDays = 42 - panel.length;
+    for (let i = 1; i <= needNextDays; i++) {
+      const nextDay = new Date(lastDay.getTime() + i * 24 * 60 * 60 * 1e3);
+      panel.push({
+        date: nextDay,
+        formatDate: this.formatDate(nextDay),
+        isCurrentMonth: false,
+        isSelected: this.formatDate(nextDay) === selectedDate
       });
     }
-    return a;
+    return panel;
   }
   // ========== 新增十年跨度相关方法（不改动原有逻辑） ==========
   /**
@@ -146,214 +166,306 @@ class v {
    * @param {Date} date 基准日期
    * @returns {number} 十年起始年份（如2026 → 2020）
    */
-  static getDecadeStart(e) {
-    const t = e.getFullYear();
-    return Math.floor(t / 10) * 10;
+  static getDecadeStart(date) {
+    const year = date.getFullYear();
+    return Math.floor(year / 10) * 10;
   }
   /**
    * 获取下一个十年区间起始年份
    * @param {number} decadeStart 当前十年起始年份
    * @returns {number} 下一个十年起始年份（如2020 → 2030）
    */
-  static getNextDecade(e) {
-    return e + 10;
+  static getNextDecade(decadeStart) {
+    return decadeStart + 10;
   }
   /**
    * 获取上一个十年区间起始年份
    * @param {number} decadeStart 当前十年起始年份
    * @returns {number} 上一个十年起始年份（如2020 → 2010）
    */
-  static getPrevDecade(e) {
-    return e - 10;
+  static getPrevDecade(decadeStart) {
+    return decadeStart - 10;
   }
   /**
    * 生成十年跨度的年份数组（如2020-2029）
    * @param {number} decadeStart 十年起始年份
    * @returns {Array} 十年年份数组
    */
-  static generateDecadeYears(e) {
-    return Array.from({ length: 10 }, (t, a) => e + a);
+  static generateDecadeYears(decadeStart) {
+    return Array.from({ length: 10 }, (_, i) => decadeStart + i);
   }
 }
-const X = M({
+const _sfc_main = defineComponent({
   name: "ViewDatePicker",
   // Vue2兼容：props定义（vue-demi已适配）
   props: {
     value: {
       // Vue2的v-model绑定值（兼容Vue3的modelValue）
       type: String,
-      default: () => v.formatDate(/* @__PURE__ */ new Date())
+      default: () => DateUtils.formatDate(/* @__PURE__ */ new Date())
     },
     modelValue: {
       // Vue3的v-model绑定值
       type: String,
-      default: () => v.formatDate(/* @__PURE__ */ new Date())
+      default: () => DateUtils.formatDate(/* @__PURE__ */ new Date())
     }
   },
   // Vue2/Vue3兼容：emits定义
   emits: ["input", "update:modelValue", "change"],
-  setup(r, { emit: e }) {
-    const t = h(null), a = h(null), p = h(null), u = h(!1), g = h({}), c = h((/* @__PURE__ */ new Date()).getFullYear()), s = h((/* @__PURE__ */ new Date()).getMonth() + 1), D = h(""), o = h(""), i = h("date"), d = h(v.getDecadeStart(new Date(c.value, s.value - 1))), T = w(() => {
-      const n = v.generateDecadeYears(d.value);
-      return Array.isArray(n) ? n : [];
-    }), x = w(() => {
-      const n = d.value, l = n + 9;
-      return `${n}年-${l}年`;
-    }), P = w(() => {
-      const n = new Date(c.value, s.value - 1, 1), l = v.generateMonthPanel(n, o.value);
-      return Array.isArray(l) ? l : [];
-    }), _ = () => {
-      const n = C ? r.value : r.modelValue;
-      if (n) {
-        o.value = n;
-        const l = new Date(n);
-        isNaN(l.getTime()) || (c.value = l.getFullYear(), s.value = l.getMonth() + 1, d.value = v.getDecadeStart(l));
+  setup(props, { emit }) {
+    const pickerWrapper = ref(null);
+    const dateInput = ref(null);
+    const datePanel = ref(null);
+    const panelVisible = ref(false);
+    const panelStyle = ref({});
+    const currentYear = ref((/* @__PURE__ */ new Date()).getFullYear());
+    const currentMonth = ref((/* @__PURE__ */ new Date()).getMonth() + 1);
+    const hoverDate = ref("");
+    const displayDate = ref("");
+    const panelType = ref("date");
+    const decadeStart = ref(DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1)));
+    const decadeYears = computed(() => {
+      const years = DateUtils.generateDecadeYears(decadeStart.value);
+      return Array.isArray(years) ? years : [];
+    });
+    const getDecadeStartAndEnd = computed(() => {
+      const start = decadeStart.value;
+      const end = start + 9;
+      return `${start}年-${end}年`;
+    });
+    const panelDates = computed(() => {
+      const currentDateTemp = new Date(currentYear.value, currentMonth.value - 1, 1);
+      const dates = DateUtils.generateMonthPanel(currentDateTemp, displayDate.value);
+      return Array.isArray(dates) ? dates : [];
+    });
+    const initDisplayDate = () => {
+      const initValue = isVue2 ? props.value : props.modelValue;
+      if (initValue) {
+        displayDate.value = initValue;
+        const date = new Date(initValue);
+        if (!isNaN(date.getTime())) {
+          currentYear.value = date.getFullYear();
+          currentMonth.value = date.getMonth() + 1;
+          decadeStart.value = DateUtils.getDecadeStart(date);
+        }
       } else {
-        const l = /* @__PURE__ */ new Date();
-        o.value = v.formatDate(l), c.value = l.getFullYear(), s.value = l.getMonth() + 1, d.value = v.getDecadeStart(l);
+        const now = /* @__PURE__ */ new Date();
+        displayDate.value = DateUtils.formatDate(now);
+        currentYear.value = now.getFullYear();
+        currentMonth.value = now.getMonth() + 1;
+        decadeStart.value = DateUtils.getDecadeStart(now);
       }
     };
-    U(
-      () => [r.value, r.modelValue],
+    watch(
+      () => [props.value, props.modelValue],
       () => {
-        _();
+        initDisplayDate();
       },
-      { immediate: !0, deep: !0 }
+      { immediate: true, deep: true }
     );
-    const y = () => {
-      if (!a.value || !p.value) return;
-      const n = a.value.getBoundingClientRect(), l = t.value.getBoundingClientRect();
-      g.value = {
+    const calcPanelPosition = () => {
+      if (!dateInput.value || !datePanel.value) return;
+      const inputRect = dateInput.value.getBoundingClientRect();
+      const wrapperRect = pickerWrapper.value.getBoundingClientRect();
+      panelStyle.value = {
         position: "absolute",
-        top: `${n.bottom - l.top + 4}px`,
-        left: `${n.left - l.left}px`,
+        top: `${inputRect.bottom - wrapperRect.top + 4}px`,
+        left: `${inputRect.left - wrapperRect.left}px`,
         zIndex: 9999,
-        width: "322px"
+        width: `322px`
       };
-    }, S = () => {
-      u.value = !u.value, u.value && (setTimeout(() => y(), 0), i.value = "date");
-    }, N = () => {
-      d.value = v.getDecadeStart(new Date(c.value, s.value - 1)), i.value = "year";
-    }, F = () => {
-      i.value = "month";
-    }, V = (n) => {
-      c.value = n, i.value = "month";
-    }, $ = (n) => {
-      s.value = n, i.value = "date";
-    }, E = (n) => {
-      o.value = n.formatDate, c.value = n.date.getFullYear(), s.value = n.date.getMonth() + 1, e(C ? "input" : "update:modelValue", o.value), e("change", {
-        date: n.date,
-        formatDate: o.value
-      }), u.value = !1;
-    }, L = () => {
-      c.value -= 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
-    }, R = () => {
-      s.value === 1 ? (s.value = 12, c.value -= 1) : s.value -= 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
-    }, I = () => {
-      s.value === 12 ? (s.value = 1, c.value += 1) : s.value += 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
-    }, O = () => {
-      c.value += 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
-    }, A = () => {
-      d.value = v.getNextDecade(d.value);
-    }, W = () => {
-      d.value = v.getPrevDecade(d.value);
-    }, z = (n) => {
-      o.value = n.target.value;
-    }, B = (n, l) => {
-      if (!n || !l) return !1;
-      if (l.contains(n) || n.classList.contains("year-item") || n.classList.contains("month-item")) return !0;
-      let f = n;
-      for (; f.parentElement; ) {
-        if (f = f.parentElement, f === l)
-          return !0;
-        if (f.tagName === "BODY") break;
+    };
+    const togglePanel = () => {
+      panelVisible.value = !panelVisible.value;
+      if (panelVisible.value) {
+        setTimeout(() => calcPanelPosition(), 0);
+        panelType.value = "date";
+      }
+    };
+    const openYearPanel = () => {
+      decadeStart.value = DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1));
+      panelType.value = "year";
+    };
+    const openMonthPanel = () => {
+      panelType.value = "month";
+    };
+    const selectDecadeYear = (year) => {
+      currentYear.value = year;
+      panelType.value = "month";
+    };
+    const selectTargetMonth = (month) => {
+      currentMonth.value = month;
+      panelType.value = "date";
+    };
+    const selectDate = (item) => {
+      displayDate.value = item.formatDate;
+      currentYear.value = item.date.getFullYear();
+      currentMonth.value = item.date.getMonth() + 1;
+      if (isVue2) {
+        emit("input", displayDate.value);
+      } else {
+        emit("update:modelValue", displayDate.value);
       }
-      return !1;
-    }, k = (n) => {
-      const l = B(n.target, t.value);
-      u.value && t.value && !l && (u.value = !1, i.value = "date");
-    }, m = () => {
-      u.value && y();
+      emit("change", {
+        date: item.date,
+        formatDate: displayDate.value
+      });
+      panelVisible.value = false;
+    };
+    const switchToPrevYear = () => {
+      currentYear.value -= 1;
+      decadeStart.value = DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1));
     };
-    return j(() => {
-      _(), document.addEventListener("click", k), window.addEventListener("scroll", m, !0), window.addEventListener("resize", m);
-    }), q(() => {
-      document.removeEventListener("click", k), window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
-    }), {
-      pickerWrapper: t,
-      dateInput: a,
-      datePanel: p,
-      panelVisible: u,
-      panelStyle: g,
-      currentYear: c,
+    const switchToPrevMonth = () => {
+      if (currentMonth.value === 1) {
+        currentMonth.value = 12;
+        currentYear.value -= 1;
+      } else {
+        currentMonth.value -= 1;
+      }
+      decadeStart.value = DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1));
+    };
+    const switchToNextMonth = () => {
+      if (currentMonth.value === 12) {
+        currentMonth.value = 1;
+        currentYear.value += 1;
+      } else {
+        currentMonth.value += 1;
+      }
+      decadeStart.value = DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1));
+    };
+    const switchToNextYear = () => {
+      currentYear.value += 1;
+      decadeStart.value = DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1));
+    };
+    const switchToNextTenYears = () => {
+      decadeStart.value = DateUtils.getNextDecade(decadeStart.value);
+    };
+    const switchToPrevTenYears = () => {
+      decadeStart.value = DateUtils.getPrevDecade(decadeStart.value);
+    };
+    const handleInput = (e) => {
+      displayDate.value = e.target.value;
+    };
+    const isElementInContainer = (el, container) => {
+      if (!el || !container) return false;
+      if (container.contains(el)) return true;
+      if (el.classList.contains("year-item")) return true;
+      if (el.classList.contains("month-item")) return true;
+      let currentEl = el;
+      while (currentEl.parentElement) {
+        currentEl = currentEl.parentElement;
+        if (currentEl === container) {
+          return true;
+        }
+        if (currentEl.tagName === "BODY") break;
+      }
+      return false;
+    };
+    const handleViewReportClickOutside = (e) => {
+      const isInWrapper = isElementInContainer(e.target, pickerWrapper.value);
+      if (panelVisible.value && pickerWrapper.value && !isInWrapper) {
+        panelVisible.value = false;
+        panelType.value = "date";
+      }
+    };
+    const handleViewReportResizes = () => {
+      if (panelVisible.value) calcPanelPosition();
+    };
+    onMounted(() => {
+      initDisplayDate();
+      document.addEventListener("click", handleViewReportClickOutside);
+      window.addEventListener("scroll", handleViewReportResizes, true);
+      window.addEventListener("resize", handleViewReportResizes);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleViewReportClickOutside);
+      window.removeEventListener("scroll", handleViewReportResizes, true);
+      window.removeEventListener("resize", handleViewReportResizes);
+    });
+    return {
+      pickerWrapper,
+      dateInput,
+      datePanel,
+      panelVisible,
+      panelStyle,
+      currentYear,
       // 仅暴露currentYear/currentMonth
-      currentMonth: s,
-      hoverDate: D,
-      displayDate: o,
-      panelType: i,
-      decadeYears: T,
-      panelDates: P,
-      togglePanel: S,
-      openYearPanel: N,
-      openMonthPanel: F,
-      selectDecadeYear: V,
-      selectTargetMonth: $,
-      selectDate: E,
-      switchToPrevYear: L,
-      switchToPrevMonth: R,
-      switchToNextMonth: I,
-      switchToNextYear: O,
-      handleInput: z,
-      getDecadeStartAndEnd: x,
-      switchToPrevTenYears: W,
-      switchToNextTenYears: A
+      currentMonth,
+      hoverDate,
+      displayDate,
+      panelType,
+      decadeYears,
+      panelDates,
+      togglePanel,
+      openYearPanel,
+      openMonthPanel,
+      selectDecadeYear,
+      selectTargetMonth,
+      selectDate,
+      switchToPrevYear,
+      switchToPrevMonth,
+      switchToNextMonth,
+      switchToNextYear,
+      handleInput,
+      getDecadeStartAndEnd,
+      switchToPrevTenYears,
+      switchToNextTenYears
     };
   }
 });
-var Z = function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [t("div", { staticClass: "native-input-wrapper" }, [t("input", { ref: "dateInput", staticClass: "native-input", attrs: { type: "text", placeholder: "请选择日期", readonly: "" }, domProps: { value: e.displayDate }, on: { input: e.handleInput, click: e.togglePanel } }), t("span", { staticClass: "date-icon", on: { click: e.togglePanel } }, [e._v("📅")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: e.panelStyle }, [t("div", { staticClass: "date-picker-panel" }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn year-btn prev-year", on: { click: e.switchToPrevYear } }, [e._v("«")]), t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevMonth } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year", on: { click: e.openYearPanel } }, [e._v(e._s(e.currentYear) + "年")]), t("span", { staticClass: "clickable-month", on: { click: e.openMonthPanel } }, [e._v(e._s(e.currentMonth) + "月")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextMonth } }, [e._v(">")]), t("button", { staticClass: "toggle-btn year-btn next-year", on: { click: e.switchToNextYear } }, [e._v("»")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevTenYears } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.getDecadeStartAndEnd) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextTenYears } }, [e._v(">")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevYear } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.currentYear) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextYear } }, [e._v(">")])]), e.panelType === "date" ? t("div", { staticClass: "bod-mb" }, [e._m(0), t("div", { staticClass: "picker-panel" }, e._l(e.panelDates, function(a, p) {
-    return t("div", { key: p, staticClass: "date-item", class: {
-      "not-current-month": !a.isCurrentMonth,
-      selected: a.formatDate === e.displayDate,
-      hover: e.hoverDate === a.formatDate && a.formatDate !== e.displayDate
-    }, on: { click: function(u) {
-      return e.selectDate(a);
-    }, mouseenter: function(u) {
-      e.hoverDate = a.formatDate;
-    }, mouseleave: function(u) {
-      e.hoverDate = "";
-    } } }, [e._v(" " + e._s(a.date.getDate()) + " ")]);
-  }), 0)]) : e.panelType === "year" ? t("div", { staticClass: "bod-mb" }, e._l(e.decadeYears, function(a) {
-    return t("div", { key: a, staticClass: "year-item", class: { selected: a === e.currentYear }, on: { click: function(p) {
-      return e.selectDecadeYear(a);
-    } } }, [e._v(" " + e._s(a) + "年 ")]);
-  }), 0) : e.panelType === "month" ? t("div", { staticClass: "bod-mb" }, e._l(12, function(a) {
-    return t("div", { key: a, staticClass: "month-item", class: { selected: a === e.currentMonth }, on: { click: function(p) {
-      return e.selectTargetMonth(a);
-    } } }, [e._v(" " + e._s(a) + "月 ")]);
-  }), 0) : e._e()])])]);
-}, ee = [function() {
-  var r = this, e = r._self._c;
-  return r._self._setupProxy, e("div", { staticClass: "picker-week-header" }, [e("div", { staticClass: "week-item" }, [r._v("日")]), e("div", { staticClass: "week-item" }, [r._v("一")]), e("div", { staticClass: "week-item" }, [r._v("二")]), e("div", { staticClass: "week-item" }, [r._v("三")]), e("div", { staticClass: "week-item" }, [r._v("四")]), e("div", { staticClass: "week-item" }, [r._v("五")]), e("div", { staticClass: "week-item" }, [r._v("六")])]);
-}], te = /* @__PURE__ */ b(
-  X,
-  Z,
-  ee,
-  !1,
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [_c("div", { staticClass: "native-input-wrapper" }, [_c("input", { ref: "dateInput", staticClass: "native-input", attrs: { "type": "text", "placeholder": "请选择日期", "readonly": "" }, domProps: { "value": _vm.displayDate }, on: { "input": _vm.handleInput, "click": _vm.togglePanel } }), _c("span", { staticClass: "date-icon", on: { "click": _vm.togglePanel } }, [_vm._v("📅")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: _vm.panelStyle }, [_c("div", { staticClass: "date-picker-panel" }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn year-btn prev-year", on: { "click": _vm.switchToPrevYear } }, [_vm._v("«")]), _c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevMonth } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year", on: { "click": _vm.openYearPanel } }, [_vm._v(_vm._s(_vm.currentYear) + "年")]), _c("span", { staticClass: "clickable-month", on: { "click": _vm.openMonthPanel } }, [_vm._v(_vm._s(_vm.currentMonth) + "月")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextMonth } }, [_vm._v(">")]), _c("button", { staticClass: "toggle-btn year-btn next-year", on: { "click": _vm.switchToNextYear } }, [_vm._v("»")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevTenYears } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.getDecadeStartAndEnd) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextTenYears } }, [_vm._v(">")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevYear } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.currentYear) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextYear } }, [_vm._v(">")])]), _vm.panelType === "date" ? _c("div", { staticClass: "bod-mb" }, [_vm._m(0), _c("div", { staticClass: "picker-panel" }, _vm._l(_vm.panelDates, function(item, index2) {
+    return _c("div", { key: index2, staticClass: "date-item", class: {
+      "not-current-month": !item.isCurrentMonth,
+      "selected": item.formatDate === _vm.displayDate,
+      "hover": _vm.hoverDate === item.formatDate && item.formatDate !== _vm.displayDate
+    }, on: { "click": function($event) {
+      return _vm.selectDate(item);
+    }, "mouseenter": function($event) {
+      _vm.hoverDate = item.formatDate;
+    }, "mouseleave": function($event) {
+      _vm.hoverDate = "";
+    } } }, [_vm._v(" " + _vm._s(item.date.getDate()) + " ")]);
+  }), 0)]) : _vm.panelType === "year" ? _c("div", { staticClass: "bod-mb" }, _vm._l(_vm.decadeYears, function(year) {
+    return _c("div", { key: year, staticClass: "year-item", class: { "selected": year === _vm.currentYear }, on: { "click": function($event) {
+      return _vm.selectDecadeYear(year);
+    } } }, [_vm._v(" " + _vm._s(year) + "年 ")]);
+  }), 0) : _vm.panelType === "month" ? _c("div", { staticClass: "bod-mb" }, _vm._l(12, function(month) {
+    return _c("div", { key: month, staticClass: "month-item", class: { "selected": month === _vm.currentMonth }, on: { "click": function($event) {
+      return _vm.selectTargetMonth(month);
+    } } }, [_vm._v(" " + _vm._s(month) + "月 ")]);
+  }), 0) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns = [function() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "picker-week-header" }, [_c("div", { staticClass: "week-item" }, [_vm._v("日")]), _c("div", { staticClass: "week-item" }, [_vm._v("一")]), _c("div", { staticClass: "week-item" }, [_vm._v("二")]), _c("div", { staticClass: "week-item" }, [_vm._v("三")]), _c("div", { staticClass: "week-item" }, [_vm._v("四")]), _c("div", { staticClass: "week-item" }, [_vm._v("五")]), _c("div", { staticClass: "week-item" }, [_vm._v("六")])]);
+}];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   "e6885493"
 );
-const ae = te.exports, ne = [Q, ae], Y = (r) => {
-  ne.forEach((e) => {
-    r.component(e.name, e);
+const ViewDatePicker = __component__.exports;
+const components = [MyButton, ViewDatePicker];
+const install = (app) => {
+  components.forEach((component) => {
+    app.component(component.name, component);
   });
 };
-typeof window < "u" && window.Vue && Y(window.Vue);
-const re = { install: Y };
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+const index = { install };
 export {
-  Q as MyButton,
-  ae as ViewDatePicker,
-  re as default,
-  Y as install
+  MyButton,
+  ViewDatePicker,
+  index as default,
+  install
 };