@ql-web/view-report 1.0.0

package/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "@ql-web/view-report",
+	"version": "1.0.0",
+	"description": "报告查看",
+	"main": "view-report.es.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"devDependencies": {
+		"vue-demi": "^0.14.7"
+	},
+	"peerDependencies": {
+		"vue-demi": "^0.14.7"
+	},
+	"files": [
+		"view-report.js",
+		"view-report.umd.js",
+		"view-report.css",
+		"vite.svg"
+	],
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}

package/view-report.css

@@ -0,0 +1 @@
+.my-button[data-v-d19bd5c3]{border:none;padding:8px 16px;color:#fff;border-radius:4px;cursor:pointer}.my-button[data-v-d19bd5c3]:hover{opacity:.9}.view-date-picker-wrapper[data-v-a05e5b32]{position:relative;width:100%;max-width:280px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.native-input-wrapper[data-v-a05e5b32]{position:relative;width:100%}.native-input[data-v-a05e5b32]{width:100%;height:36px;padding:0 12px 0 15px;border:1px solid #e6e6e6;border-radius:4px;font-size:14px;color:#333;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;cursor:pointer}.native-input[data-v-a05e5b32]::-webkit-input-placeholder{color:#999}.native-input[data-v-a05e5b32]::-moz-placeholder{color:#999}.native-input[data-v-a05e5b32]:-ms-input-placeholder{color:#999}.native-input[data-v-a05e5b32]::-ms-input-placeholder{color:#999}.native-input[data-v-a05e5b32]::placeholder{color:#999}.native-input[data-v-a05e5b32]:hover{border-color:#c0c4cc}.native-input[data-v-a05e5b32]:focus{border-color:#409eff}.date-icon[data-v-a05e5b32]{position:absolute;right:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:16px;color:#999;cursor:pointer}.date-picker-dropdown[data-v-a05e5b32]{background:#fff;border:1px solid #e6e6e6;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box}.bod-mb[data-v-a05e5b32]{margin:15px}.picker-header[data-v-a05e5b32]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:12px;padding:0 4px}.toggle-btn[data-v-a05e5b32]{border:none;background:transparent;cursor:pointer;font-size:14px;color:#666;width:28px;height:28px;line-height:28px;text-align:center;border-radius:4px;padding:0}.toggle-btn[data-v-a05e5b32]:hover{background-color:#f5f5f5}.year-btn[data-v-a05e5b32]{font-size:12px}.current-month[data-v-a05e5b32]{font-size:14px;font-weight:500;color:#303133}.clickable-year[data-v-a05e5b32],.clickable-month[data-v-a05e5b32]{cursor:pointer;padding:2px 4px;border-radius:2px}.clickable-year[data-v-a05e5b32]:hover,.clickable-month[data-v-a05e5b32]:hover{color:#409eff;background-color:#ecf5ff}.picker-week-header[data-v-a05e5b32]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:4px}.week-item[data-v-a05e5b32]{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;font-size:12px;color:#909399;height:28px;line-height:28px}.picker-panel[data-v-a05e5b32]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.date-item[data-v-a05e5b32]{width:calc(100% / 7);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;margin:2px 0}.not-current-month[data-v-a05e5b32]{color:#c0c4cc}.selected[data-v-a05e5b32]{color:#fff!important;background-color:#409eff!important}.hover[data-v-a05e5b32]{background-color:#ecf5ff}.year-item[data-v-a05e5b32]{display:inline-block;width:calc(20% - 4px);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;border-radius:4px;color:#303133;margin:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.year-item[data-v-a05e5b32]:hover{background-color:#ecf5ff}.year-item.selected[data-v-a05e5b32]{background-color:#409eff;color:#fff}.month-item[data-v-a05e5b32]{display:inline-block;width:calc(25% - 4px);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;border-radius:4px;color:#303133;margin:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.month-item[data-v-a05e5b32]:hover{background-color:#ecf5ff}.month-item.selected[data-v-a05e5b32]{background-color:#409eff;color:#fff}

package/view-report.es.js

@@ -0,0 +1,359 @@
+import { defineComponent as b, getCurrentInstance as j, ref as h, computed as y, watch as q, onMounted as G, onUnmounted as H } from "vue-demi";
+function Y(r, e, t, a, i, d, w, p) {
+  var f = typeof r == "function" ? r.options : r;
+  return e && (f.render = e, f.staticRenderFns = t, f._compiled = !0), d && (f._scopeId = "data-v-" + d), {
+    exports: r,
+    options: f
+  };
+}
+const J = b({
+  name: "MyButton",
+  // 必须声明 name，用于全局注册
+  props: {
+    text: {
+      type: String,
+      default: "默认按钮"
+    },
+    color: {
+      type: String,
+      default: "#409eff"
+    }
+  },
+  setup(r, { emit: e }) {
+    return { handleClick: () => {
+      e("click", "按钮被点击");
+    } };
+  }
+});
+var K = 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);
+}, Q = [], X = /* @__PURE__ */ Y(
+  J,
+  K,
+  Q,
+  !1,
+  null,
+  "d19bd5c3"
+);
+const Z = X.exports;
+class c {
+  /**
+   * 格式化日期为 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"), i = String(e.getDate()).padStart(2, "0");
+    return `${t}-${a}-${i}`;
+  }
+  /**
+   * 获取指定日期所在月份的第一天
+   * @param {Date} date 基准日期
+   * @returns {Date} 月份第一天
+   */
+  static getFirstDayOfMonth(e) {
+    return new Date(e.getFullYear(), e.getMonth(), 1);
+  }
+  /**
+   * 获取指定日期所在月份的最后一天
+   * @param {Date} date 基准日期
+   * @returns {Date} 月份最后一天
+   */
+  static getLastDayOfMonth(e) {
+    return new Date(e.getFullYear(), e.getMonth() + 1, 0);
+  }
+  /**
+   * 获取日期对应的星期数（周日=0，周六=6）
+   * @returns {number} 星期数
+   */
+  static getDayOfWeek(e) {
+    return e.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);
+  }
+  /**
+   * 下一个月（支持跨年，如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);
+  }
+  /**
+   * 上一年（直接切换年份，如2026 → 2025）
+   * @returns {Date} 上年同月日期
+   */
+  static getPrevYear(e) {
+    return new Date(e.getFullYear() - 1, e.getMonth(), 1);
+  }
+  /**
+   * 下一年（直接切换年份，如2025 → 2026）
+   * @returns {Date} 下年同月日期
+   */
+  static getNextYear(e) {
+    return new Date(e.getFullYear() + 1, e.getMonth(), 1);
+  }
+  /**
+   * 生成6行7列的日期面板数据（42个，自动补充跨月/跨年日期）
+   * @returns {Array} 42个日期对象的数组（6*7）
+   */
+  static generateMonthPanel(e, t = "") {
+    const a = [], i = this.getFirstDayOfMonth(e), d = this.getLastDayOfMonth(e), p = this.getDayOfWeek(i);
+    for (let s = p; s > 0; s--) {
+      const u = new Date(i.getTime() - s * 24 * 60 * 60 * 1e3);
+      a.push({
+        date: u,
+        formatDate: this.formatDate(u),
+        isCurrentMonth: !1,
+        isSelected: this.formatDate(u) === t
+      });
+    }
+    const f = d.getDate();
+    for (let s = 1; s <= f; s++) {
+      const u = new Date(e.getFullYear(), e.getMonth(), s);
+      a.push({
+        date: u,
+        formatDate: this.formatDate(u),
+        isCurrentMonth: !0,
+        isSelected: this.formatDate(u) === t
+      });
+    }
+    const o = 42 - a.length;
+    for (let s = 1; s <= o; s++) {
+      const u = new Date(d.getTime() + s * 24 * 60 * 60 * 1e3);
+      a.push({
+        date: u,
+        formatDate: this.formatDate(u),
+        isCurrentMonth: !1,
+        isSelected: this.formatDate(u) === t
+      });
+    }
+    return a;
+  }
+  // ========== 新增十年跨度相关方法（不改动原有逻辑） ==========
+  /**
+   * 获取当前年份所在的十年区间起始年份
+   * @param {Date} date 基准日期
+   * @returns {number} 十年起始年份（如2026 → 2020）
+   */
+  static getDecadeStart(e) {
+    const t = e.getFullYear();
+    return Math.floor(t / 10) * 10;
+  }
+  /**
+   * 获取下一个十年区间起始年份
+   * @param {number} decadeStart 当前十年起始年份
+   * @returns {number} 下一个十年起始年份（如2020 → 2030）
+   */
+  static getNextDecade(e) {
+    return e + 10;
+  }
+  /**
+   * 获取上一个十年区间起始年份
+   * @param {number} decadeStart 当前十年起始年份
+   * @returns {number} 上一个十年起始年份（如2020 → 2010）
+   */
+  static getPrevDecade(e) {
+    return e - 10;
+  }
+  /**
+   * 生成十年跨度的年份数组（如2020-2029）
+   * @param {number} decadeStart 十年起始年份
+   * @returns {Array} 十年年份数组
+   */
+  static generateDecadeYears(e) {
+    return Array.from({ length: 10 }, (t, a) => e + a);
+  }
+}
+const ee = b({
+  name: "ViewDatePicker",
+  // Vue2兼容：props定义（vue-demi已适配）
+  props: {
+    value: {
+      // Vue2的v-model绑定值（兼容Vue3的modelValue）
+      type: String,
+      default: () => c.formatDate(/* @__PURE__ */ new Date())
+    },
+    modelValue: {
+      // Vue3的v-model绑定值
+      type: String,
+      default: () => c.formatDate(/* @__PURE__ */ new Date())
+    }
+  },
+  // Vue2/Vue3兼容：emits定义
+  emits: ["input", "update:modelValue", "change"],
+  setup(r, { emit: e }) {
+    const t = j(), a = !!t && !!t.proxy && !t.vnode, i = h(null), d = h(null), w = h(null), p = h(!1), f = h({}), o = h((/* @__PURE__ */ new Date()).getFullYear()), s = h((/* @__PURE__ */ new Date()).getMonth() + 1), u = h(""), g = h(""), m = h("date"), v = h(c.getDecadeStart(new Date(o.value, s.value - 1))), x = y(() => {
+      const n = c.generateDecadeYears(v.value);
+      return Array.isArray(n) ? n : [];
+    }), P = y(() => {
+      const n = v.value, l = n + 9;
+      return `${n}年-${l}年`;
+    }), S = y(() => {
+      const n = new Date(o.value, s.value - 1, 1), l = c.generateMonthPanel(n, g.value);
+      return Array.isArray(l) ? l : [];
+    }), k = () => {
+      const n = a ? r.value : r.modelValue;
+      if (n) {
+        g.value = n;
+        const l = new Date(n);
+        isNaN(l.getTime()) || (o.value = l.getFullYear(), s.value = l.getMonth() + 1, v.value = c.getDecadeStart(l));
+      } else {
+        const l = /* @__PURE__ */ new Date();
+        g.value = c.formatDate(l), o.value = l.getFullYear(), s.value = l.getMonth() + 1, v.value = c.getDecadeStart(l);
+      }
+    };
+    q(
+      () => [r.value, r.modelValue],
+      () => {
+        k();
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const C = () => {
+      if (!d.value || !w.value) return;
+      const n = d.value.getBoundingClientRect(), l = i.value.getBoundingClientRect();
+      f.value = {
+        position: "absolute",
+        top: `${n.bottom - l.top + 4}px`,
+        left: `${n.left - l.left}px`,
+        zIndex: 9999,
+        width: "322px"
+      };
+    }, N = () => {
+      p.value = !p.value, p.value && (setTimeout(() => C(), 0), m.value = "date");
+    }, F = () => {
+      v.value = c.getDecadeStart(new Date(o.value, s.value - 1)), m.value = "year";
+    }, V = () => {
+      m.value = "month";
+    }, $ = (n) => {
+      o.value = n, m.value = "month";
+    }, E = (n) => {
+      s.value = n, m.value = "date";
+    }, L = (n) => {
+      g.value = n.formatDate, o.value = n.date.getFullYear(), s.value = n.date.getMonth() + 1, e(a ? "input" : "update:modelValue", g.value), e("change", {
+        date: n.date,
+        formatDate: g.value
+      }), p.value = !1;
+    }, R = () => {
+      o.value -= 1, v.value = c.getDecadeStart(new Date(o.value, s.value - 1));
+    }, I = () => {
+      s.value === 1 ? (s.value = 12, o.value -= 1) : s.value -= 1, v.value = c.getDecadeStart(new Date(o.value, s.value - 1));
+    }, O = () => {
+      s.value === 12 ? (s.value = 1, o.value += 1) : s.value += 1, v.value = c.getDecadeStart(new Date(o.value, s.value - 1));
+    }, A = () => {
+      o.value += 1, v.value = c.getDecadeStart(new Date(o.value, s.value - 1));
+    }, W = () => {
+      v.value = c.getNextDecade(v.value);
+    }, z = () => {
+      v.value = c.getPrevDecade(v.value);
+    }, B = (n) => {
+      g.value = n.target.value;
+    }, U = (n, l) => {
+      if (!n || !l) return !1;
+      if (l.contains(n) || n.classList.contains("year-item") || n.classList.contains("month-item")) return !0;
+      let D = n;
+      for (; D.parentElement; ) {
+        if (D = D.parentElement, D === l)
+          return !0;
+        if (D.tagName === "BODY") break;
+      }
+      return !1;
+    }, M = (n) => {
+      const l = U(n.target, i.value);
+      p.value && i.value && !l && (p.value = !1, m.value = "date");
+    }, _ = () => {
+      p.value && C();
+    };
+    return G(() => {
+      k(), document.addEventListener("click", M), window.addEventListener("scroll", _, !0), window.addEventListener("resize", _);
+    }), H(() => {
+      document.removeEventListener("click", M), window.removeEventListener("scroll", _, !0), window.removeEventListener("resize", _);
+    }), {
+      pickerWrapper: i,
+      dateInput: d,
+      datePanel: w,
+      panelVisible: p,
+      panelStyle: f,
+      currentYear: o,
+      // 仅暴露currentYear/currentMonth
+      currentMonth: s,
+      hoverDate: u,
+      displayDate: g,
+      panelType: m,
+      decadeYears: x,
+      panelDates: S,
+      togglePanel: N,
+      openYearPanel: F,
+      openMonthPanel: V,
+      selectDecadeYear: $,
+      selectTargetMonth: E,
+      selectDate: L,
+      switchToPrevYear: R,
+      switchToPrevMonth: I,
+      switchToNextMonth: O,
+      switchToNextYear: A,
+      handleInput: B,
+      getDecadeStartAndEnd: P,
+      switchToPrevTenYears: z,
+      switchToNextTenYears: W
+    };
+  }
+});
+var te = 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, i) {
+    return t("div", { key: i, 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(d) {
+      return e.selectDate(a);
+    }, mouseenter: function(d) {
+      e.hoverDate = a.formatDate;
+    }, mouseleave: function(d) {
+      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(i) {
+      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(i) {
+      return e.selectTargetMonth(a);
+    } } }, [e._v(" " + e._s(a) + "月 ")]);
+  }), 0) : e._e()])])]);
+}, ae = [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("六")])]);
+}], ne = /* @__PURE__ */ Y(
+  ee,
+  te,
+  ae,
+  !1,
+  null,
+  "a05e5b32"
+);
+const se = ne.exports, re = [Z, se], T = (r) => {
+  re.forEach((e) => {
+    r.component(e.name, e);
+  });
+};
+typeof window < "u" && window.Vue && T(window.Vue);
+const oe = { install: T };
+export {
+  Z as MyButton,
+  se as ViewDatePicker,
+  oe as default,
+  T as install
+};

package/view-report.umd.js

@@ -0,0 +1 @@
+(function(h,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],o):(h=typeof globalThis<"u"?globalThis:h||self,o(h["view-report"]={},h.VueDemi))})(this,(function(h,o){"use strict";function C(r,e,t,a,u,p,y,f){var g=typeof r=="function"?r.options:r;return e&&(g.render=e,g.staticRenderFns=t,g._compiled=!0),p&&(g._scopeId="data-v-"+p),{exports:r,options:g}}const P=o.defineComponent({name:"MyButton",props:{text:{type:String,default:"默认按钮"},color:{type:String,default:"#409eff"}},setup(r,{emit:e}){return{handleClick:()=>{e("click","按钮被点击")}}}});var S=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)},N=[],F=C(P,S,N,!1,null,"d19bd5c3");const M=F.exports;class i{static formatDate(e){if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";const t=e.getFullYear(),a=String(e.getMonth()+1).padStart(2,"0"),u=String(e.getDate()).padStart(2,"0");return`${t}-${a}-${u}`}static getFirstDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}static getLastDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}static getDayOfWeek(e){return e.getDay()}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 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 getPrevYear(e){return new Date(e.getFullYear()-1,e.getMonth(),1)}static getNextYear(e){return new Date(e.getFullYear()+1,e.getMonth(),1)}static generateMonthPanel(e,t=""){const a=[],u=this.getFirstDayOfMonth(e),p=this.getLastDayOfMonth(e),f=this.getDayOfWeek(u);for(let s=f;s>0;s--){const v=new Date(u.getTime()-s*24*60*60*1e3);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!1,isSelected:this.formatDate(v)===t})}const g=p.getDate();for(let s=1;s<=g;s++){const v=new Date(e.getFullYear(),e.getMonth(),s);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!0,isSelected:this.formatDate(v)===t})}const c=42-a.length;for(let s=1;s<=c;s++){const v=new Date(p.getTime()+s*24*60*60*1e3);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!1,isSelected:this.formatDate(v)===t})}return a}static getDecadeStart(e){const t=e.getFullYear();return Math.floor(t/10)*10}static getNextDecade(e){return e+10}static getPrevDecade(e){return e-10}static generateDecadeYears(e){return Array.from({length:10},(t,a)=>e+a)}}const V=o.defineComponent({name:"ViewDatePicker",props:{value:{type:String,default:()=>i.formatDate(new Date)},modelValue:{type:String,default:()=>i.formatDate(new Date)}},emits:["input","update:modelValue","change"],setup(r,{emit:e}){const t=o.getCurrentInstance(),a=!!t&&!!t.proxy&&!t.vnode,u=o.ref(null),p=o.ref(null),y=o.ref(null),f=o.ref(!1),g=o.ref({}),c=o.ref(new Date().getFullYear()),s=o.ref(new Date().getMonth()+1),v=o.ref(""),m=o.ref(""),w=o.ref("date"),d=o.ref(i.getDecadeStart(new Date(c.value,s.value-1))),O=o.computed(()=>{const n=i.generateDecadeYears(d.value);return Array.isArray(n)?n:[]}),A=o.computed(()=>{const n=d.value,l=n+9;return`${n}年-${l}年`}),W=o.computed(()=>{const n=new Date(c.value,s.value-1,1),l=i.generateMonthPanel(n,m.value);return Array.isArray(l)?l:[]}),T=()=>{const n=a?r.value:r.modelValue;if(n){m.value=n;const l=new Date(n);isNaN(l.getTime())||(c.value=l.getFullYear(),s.value=l.getMonth()+1,d.value=i.getDecadeStart(l))}else{const l=new Date;m.value=i.formatDate(l),c.value=l.getFullYear(),s.value=l.getMonth()+1,d.value=i.getDecadeStart(l)}};o.watch(()=>[r.value,r.modelValue],()=>{T()},{immediate:!0,deep:!0});const Y=()=>{if(!p.value||!y.value)return;const n=p.value.getBoundingClientRect(),l=u.value.getBoundingClientRect();g.value={position:"absolute",top:`${n.bottom-l.top+4}px`,left:`${n.left-l.left}px`,zIndex:9999,width:"322px"}},B=()=>{f.value=!f.value,f.value&&(setTimeout(()=>Y(),0),w.value="date")},z=()=>{d.value=i.getDecadeStart(new Date(c.value,s.value-1)),w.value="year"},j=()=>{w.value="month"},U=n=>{c.value=n,w.value="month"},q=n=>{s.value=n,w.value="date"},G=n=>{m.value=n.formatDate,c.value=n.date.getFullYear(),s.value=n.date.getMonth()+1,e(a?"input":"update:modelValue",m.value),e("change",{date:n.date,formatDate:m.value}),f.value=!1},H=()=>{c.value-=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},J=()=>{s.value===1?(s.value=12,c.value-=1):s.value-=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},K=()=>{s.value===12?(s.value=1,c.value+=1):s.value+=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},Q=()=>{c.value+=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},X=()=>{d.value=i.getNextDecade(d.value)},Z=()=>{d.value=i.getPrevDecade(d.value)},ee=n=>{m.value=n.target.value},te=(n,l)=>{if(!n||!l)return!1;if(l.contains(n)||n.classList.contains("year-item")||n.classList.contains("month-item"))return!0;let _=n;for(;_.parentElement;){if(_=_.parentElement,_===l)return!0;if(_.tagName==="BODY")break}return!1},x=n=>{const l=te(n.target,u.value);f.value&&u.value&&!l&&(f.value=!1,w.value="date")},D=()=>{f.value&&Y()};return o.onMounted(()=>{T(),document.addEventListener("click",x),window.addEventListener("scroll",D,!0),window.addEventListener("resize",D)}),o.onUnmounted(()=>{document.removeEventListener("click",x),window.removeEventListener("scroll",D,!0),window.removeEventListener("resize",D)}),{pickerWrapper:u,dateInput:p,datePanel:y,panelVisible:f,panelStyle:g,currentYear:c,currentMonth:s,hoverDate:v,displayDate:m,panelType:w,decadeYears:O,panelDates:W,togglePanel:B,openYearPanel:z,openMonthPanel:j,selectDecadeYear:U,selectTargetMonth:q,selectDate:G,switchToPrevYear:H,switchToPrevMonth:J,switchToNextMonth:K,switchToNextYear:Q,handleInput:ee,getDecadeStartAndEnd:A,switchToPrevTenYears:Z,switchToNextTenYears:X}}});var $=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,u){return t("div",{key:u,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(p){return e.selectDate(a)},mouseenter:function(p){e.hoverDate=a.formatDate},mouseleave:function(p){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(u){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(u){return e.selectTargetMonth(a)}}},[e._v(" "+e._s(a)+"月 ")])}),0):e._e()])])])},E=[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("六")])])}],L=C(V,$,E,!1,null,"a05e5b32");const b=L.exports,R=[M,b],k=r=>{R.forEach(e=>{r.component(e.name,e)})};typeof window<"u"&&window.Vue&&k(window.Vue);const I={install:k};h.MyButton=M,h.ViewDatePicker=b,h.default=I,h.install=k,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>