@ql-web/view-report 1.0.2 → 1.0.4

package/view-report.es.js

@@ -1,12 +1,13 @@
-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
-  };
-}
-const G = M({
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, isVue2 } from "vue-demi";
+import { createElementBlock, openBlock, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createCommentVNode, vShow, createStaticVNode, Fragment, renderList, normalizeClass } from "vue";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$1 = defineComponent({
   name: "MyButton",
   // 必须声明 name，用于全局注册
   props: {
@@ -19,126 +20,133 @@ 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))];
-  })], 2);
-}, J = [], K = /* @__PURE__ */ b(
-  G,
-  H,
-  J,
-  !1,
-  null,
-  "d19bd5c3"
-);
-const Q = K.exports;
-class v {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", {
+    class: "my-button",
+    style: normalizeStyle({ background: _ctx.color }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createTextVNode(toDisplayString(_ctx.text), 1)
+    ], true)
+  ], 4);
+}
+const MyButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-d19bd5c3"]]);
+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 +154,423 @@ 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);
+      }
+      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));
+    };
+    const switchToPrevMonth = () => {
+      if (currentMonth.value === 1) {
+        currentMonth.value = 12;
+        currentYear.value -= 1;
+      } else {
+        currentMonth.value -= 1;
       }
-      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();
+      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 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,
-  null,
-  "e6885493"
-);
-const ae = te.exports, ne = [Q, ae], Y = (r) => {
-  ne.forEach((e) => {
-    r.component(e.name, e);
+const _hoisted_1 = {
+  class: "view-date-picker-wrapper",
+  ref: "pickerWrapper"
+};
+const _hoisted_2 = { class: "native-input-wrapper" };
+const _hoisted_3 = ["value"];
+const _hoisted_4 = { class: "date-picker-panel" };
+const _hoisted_5 = { class: "picker-header" };
+const _hoisted_6 = { class: "current-month" };
+const _hoisted_7 = { class: "picker-header" };
+const _hoisted_8 = { class: "current-month" };
+const _hoisted_9 = { class: "clickable-year" };
+const _hoisted_10 = { class: "picker-header" };
+const _hoisted_11 = { class: "current-month" };
+const _hoisted_12 = { class: "clickable-year" };
+const _hoisted_13 = {
+  key: 0,
+  class: "bod-mb"
+};
+const _hoisted_14 = { class: "picker-panel" };
+const _hoisted_15 = ["onClick", "onMouseenter"];
+const _hoisted_16 = {
+  key: 1,
+  class: "bod-mb"
+};
+const _hoisted_17 = ["onClick"];
+const _hoisted_18 = {
+  key: 2,
+  class: "bod-mb"
+};
+const _hoisted_19 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("input", {
+        ref: "dateInput",
+        type: "text",
+        value: _ctx.displayDate,
+        onInput: _cache[0] || (_cache[0] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+        placeholder: "请选择日期",
+        readonly: "",
+        class: "native-input",
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+      }, null, 40, _hoisted_3),
+      createElementVNode("span", {
+        class: "date-icon",
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+      }, "📅")
+    ]),
+    withDirectives(createElementVNode("div", {
+      ref: "datePanel",
+      class: "date-picker-dropdown",
+      style: normalizeStyle(_ctx.panelStyle)
+    }, [
+      createElementVNode("div", _hoisted_4, [
+        withDirectives(createElementVNode("div", _hoisted_5, [
+          createElementVNode("button", {
+            class: "toggle-btn year-btn prev-year",
+            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+          }, "«"),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.switchToPrevMonth && _ctx.switchToPrevMonth(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("span", {
+              onClick: _cache[5] || (_cache[5] = (...args) => _ctx.openYearPanel && _ctx.openYearPanel(...args)),
+              class: "clickable-year"
+            }, toDisplayString(_ctx.currentYear) + "年", 1),
+            createElementVNode("span", {
+              onClick: _cache[6] || (_cache[6] = (...args) => _ctx.openMonthPanel && _ctx.openMonthPanel(...args)),
+              class: "clickable-month"
+            }, toDisplayString(_ctx.currentMonth) + "月", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[7] || (_cache[7] = (...args) => _ctx.switchToNextMonth && _ctx.switchToNextMonth(...args))
+          }, ">"),
+          createElementVNode("button", {
+            class: "toggle-btn year-btn next-year",
+            onClick: _cache[8] || (_cache[8] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+          }, "»")
+        ], 512), [
+          [vShow, _ctx.panelType == "date"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_7, [
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[9] || (_cache[9] = (...args) => _ctx.switchToPrevTenYears && _ctx.switchToPrevTenYears(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("span", _hoisted_9, toDisplayString(_ctx.getDecadeStartAndEnd) + "年", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[10] || (_cache[10] = (...args) => _ctx.switchToNextTenYears && _ctx.switchToNextTenYears(...args))
+          }, ">")
+        ], 512), [
+          [vShow, _ctx.panelType == "year"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_10, [
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[11] || (_cache[11] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_11, [
+            createElementVNode("span", _hoisted_12, toDisplayString(_ctx.currentYear) + "年", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[12] || (_cache[12] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+          }, ">")
+        ], 512), [
+          [vShow, _ctx.panelType == "month"]
+        ]),
+        _ctx.panelType === "date" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          _cache[14] || (_cache[14] = createStaticVNode('<div class="picker-week-header" data-v-e6885493><div class="week-item" data-v-e6885493>日</div><div class="week-item" data-v-e6885493>一</div><div class="week-item" data-v-e6885493>二</div><div class="week-item" data-v-e6885493>三</div><div class="week-item" data-v-e6885493>四</div><div class="week-item" data-v-e6885493>五</div><div class="week-item" data-v-e6885493>六</div></div>', 1)),
+          createElementVNode("div", _hoisted_14, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.panelDates, (item, index2) => {
+              return openBlock(), createElementBlock("div", {
+                class: normalizeClass(["date-item", {
+                  "not-current-month": !item.isCurrentMonth,
+                  "selected": item.formatDate === _ctx.displayDate,
+                  "hover": _ctx.hoverDate === item.formatDate && item.formatDate !== _ctx.displayDate
+                }]),
+                key: index2,
+                onClick: ($event) => _ctx.selectDate(item),
+                onMouseenter: ($event) => _ctx.hoverDate = item.formatDate,
+                onMouseleave: _cache[13] || (_cache[13] = ($event) => _ctx.hoverDate = "")
+              }, toDisplayString(item.date.getDate()), 43, _hoisted_15);
+            }), 128))
+          ])
+        ])) : _ctx.panelType === "year" ? (openBlock(), createElementBlock("div", _hoisted_16, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.decadeYears, (year) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(["year-item", { "selected": year === _ctx.currentYear }]),
+              key: year,
+              onClick: ($event) => _ctx.selectDecadeYear(year)
+            }, toDisplayString(year) + "年 ", 11, _hoisted_17);
+          }), 128))
+        ])) : _ctx.panelType === "month" ? (openBlock(), createElementBlock("div", _hoisted_18, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(12, (month) => {
+            return createElementVNode("div", {
+              class: normalizeClass(["month-item", { "selected": month === _ctx.currentMonth }]),
+              key: month,
+              onClick: ($event) => _ctx.selectTargetMonth(month)
+            }, toDisplayString(month) + "月 ", 11, _hoisted_19);
+          }), 64))
+        ])) : createCommentVNode("", true)
+      ])
+    ], 4), [
+      [vShow, _ctx.panelVisible]
+    ])
+  ], 512);
+}
+const ViewDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e6885493"]]);
+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
 };