@ql-web/view-report 1.0.2 → 1.0.4

package/view-report.umd.js

@@ -1 +1,578 @@
-(function(h,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],r):(h=typeof globalThis<"u"?globalThis:h||self,r(h["view-report"]={},h.VueDemi))})(this,(function(h,r){"use strict";function D(l,e,t,a,f,v,m,i){var s=typeof l=="function"?l.options:l;return e&&(s.render=e,s.staticRenderFns=t,s._compiled=!0),v&&(s._scopeId="data-v-"+v),{exports:l,options:s}}const Y=r.defineComponent({name:"MyButton",props:{text:{type:String,default:"默认按钮"},color:{type:String,default:"#409eff"}},setup(l,{emit:e}){return{handleClick:()=>{e("click","按钮被点击")}}}});var P=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)},x=[],S=D(Y,P,x,!1,null,"d19bd5c3");const k=S.exports;class d{static formatDate(e){if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";const t=e.getFullYear(),a=String(e.getMonth()+1).padStart(2,"0"),f=String(e.getDate()).padStart(2,"0");return`${t}-${a}-${f}`}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=[],f=this.getFirstDayOfMonth(e),v=this.getLastDayOfMonth(e),i=this.getDayOfWeek(f);for(let c=i;c>0;c--){const u=new Date(f.getTime()-c*24*60*60*1e3);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!1,isSelected:this.formatDate(u)===t})}const s=v.getDate();for(let c=1;c<=s;c++){const u=new Date(e.getFullYear(),e.getMonth(),c);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!0,isSelected:this.formatDate(u)===t})}const y=42-a.length;for(let c=1;c<=y;c++){const u=new Date(v.getTime()+c*24*60*60*1e3);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!1,isSelected:this.formatDate(u)===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 N=r.defineComponent({name:"ViewDatePicker",props:{value:{type:String,default:()=>d.formatDate(new Date)},modelValue:{type:String,default:()=>d.formatDate(new Date)}},emits:["input","update:modelValue","change"],setup(l,{emit:e}){const t=r.ref(null),a=r.ref(null),f=r.ref(null),v=r.ref(!1),m=r.ref({}),i=r.ref(new Date().getFullYear()),s=r.ref(new Date().getMonth()+1),y=r.ref(""),c=r.ref(""),u=r.ref("date"),p=r.ref(d.getDecadeStart(new Date(i.value,s.value-1))),R=r.computed(()=>{const n=d.generateDecadeYears(p.value);return Array.isArray(n)?n:[]}),O=r.computed(()=>{const n=p.value,o=n+9;return`${n}年-${o}年`}),I=r.computed(()=>{const n=new Date(i.value,s.value-1,1),o=d.generateMonthPanel(n,c.value);return Array.isArray(o)?o:[]}),M=()=>{const n=r.isVue2?l.value:l.modelValue;if(n){c.value=n;const o=new Date(n);isNaN(o.getTime())||(i.value=o.getFullYear(),s.value=o.getMonth()+1,p.value=d.getDecadeStart(o))}else{const o=new Date;c.value=d.formatDate(o),i.value=o.getFullYear(),s.value=o.getMonth()+1,p.value=d.getDecadeStart(o)}};r.watch(()=>[l.value,l.modelValue],()=>{M()},{immediate:!0,deep:!0});const b=()=>{if(!a.value||!f.value)return;const n=a.value.getBoundingClientRect(),o=t.value.getBoundingClientRect();m.value={position:"absolute",top:`${n.bottom-o.top+4}px`,left:`${n.left-o.left}px`,zIndex:9999,width:"322px"}},A=()=>{v.value=!v.value,v.value&&(setTimeout(()=>b(),0),u.value="date")},W=()=>{p.value=d.getDecadeStart(new Date(i.value,s.value-1)),u.value="year"},B=()=>{u.value="month"},z=n=>{i.value=n,u.value="month"},j=n=>{s.value=n,u.value="date"},U=n=>{c.value=n.formatDate,i.value=n.date.getFullYear(),s.value=n.date.getMonth()+1,r.isVue2?e("input",c.value):e("update:modelValue",c.value),e("change",{date:n.date,formatDate:c.value}),v.value=!1},q=()=>{i.value-=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},G=()=>{s.value===1?(s.value=12,i.value-=1):s.value-=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},H=()=>{s.value===12?(s.value=1,i.value+=1):s.value+=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},J=()=>{i.value+=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},K=()=>{p.value=d.getNextDecade(p.value)},Q=()=>{p.value=d.getPrevDecade(p.value)},X=n=>{c.value=n.target.value},Z=(n,o)=>{if(!n||!o)return!1;if(o.contains(n)||n.classList.contains("year-item")||n.classList.contains("month-item"))return!0;let g=n;for(;g.parentElement;){if(g=g.parentElement,g===o)return!0;if(g.tagName==="BODY")break}return!1},T=n=>{const o=Z(n.target,t.value);v.value&&t.value&&!o&&(v.value=!1,u.value="date")},w=()=>{v.value&&b()};return r.onMounted(()=>{M(),document.addEventListener("click",T),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w)}),r.onUnmounted(()=>{document.removeEventListener("click",T),window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",w)}),{pickerWrapper:t,dateInput:a,datePanel:f,panelVisible:v,panelStyle:m,currentYear:i,currentMonth:s,hoverDate:y,displayDate:c,panelType:u,decadeYears:R,panelDates:I,togglePanel:A,openYearPanel:W,openMonthPanel:B,selectDecadeYear:z,selectTargetMonth:j,selectDate:U,switchToPrevYear:q,switchToPrevMonth:G,switchToNextMonth:H,switchToNextYear:J,handleInput:X,getDecadeStartAndEnd:O,switchToPrevTenYears:Q,switchToNextTenYears:K}}});var F=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,f){return t("div",{key:f,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(v){return e.selectDate(a)},mouseenter:function(v){e.hoverDate=a.formatDate},mouseleave:function(v){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(f){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(f){return e.selectTargetMonth(a)}}},[e._v(" "+e._s(a)+"月 ")])}),0):e._e()])])])},V=[function(){var l=this,e=l._self._c;return l._self._setupProxy,e("div",{staticClass:"picker-week-header"},[e("div",{staticClass:"week-item"},[l._v("日")]),e("div",{staticClass:"week-item"},[l._v("一")]),e("div",{staticClass:"week-item"},[l._v("二")]),e("div",{staticClass:"week-item"},[l._v("三")]),e("div",{staticClass:"week-item"},[l._v("四")]),e("div",{staticClass:"week-item"},[l._v("五")]),e("div",{staticClass:"week-item"},[l._v("六")])])}],$=D(N,F,V,!1,null,"e6885493");const C=$.exports,E=[k,C],_=l=>{E.forEach(e=>{l.component(e.name,e)})};typeof window<"u"&&window.Vue&&_(window.Vue);const L={install:_};h.MyButton=k,h.ViewDatePicker=C,h.default=L,h.install=_,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue-demi"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue-demi", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["view-report"] = {}, global.VueDemi, global.Vue));
+})(this, (function(exports2, vueDemi, vue) {
+  "use strict";
+  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 = vueDemi.defineComponent({
+    name: "MyButton",
+    // 必须声明 name，用于全局注册
+    props: {
+      text: {
+        type: String,
+        default: "默认按钮"
+      },
+      color: {
+        type: String,
+        default: "#409eff"
+      }
+    },
+    setup(props, { emit }) {
+      const handleClick = () => {
+        emit("click", "按钮被点击");
+      };
+      return { handleClick };
+    }
+  });
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("button", {
+      class: "my-button",
+      style: vue.normalizeStyle({ background: _ctx.color }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createTextVNode(vue.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(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(date) {
+      return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    /**
+     * 获取指定日期所在月份的最后一天
+     * @param {Date} date 基准日期
+     * @returns {Date} 月份最后一天
+     */
+    static getLastDayOfMonth(date) {
+      return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    }
+    /**
+     * 获取日期对应的星期数（周日=0，周六=6）
+     * @returns {number} 星期数
+     */
+    static getDayOfWeek(date) {
+      return date.getDay();
+    }
+    /**
+     * 上一个月（支持跨年，如2026-01 → 2025-12）
+     * @returns {Date} 上月日期
+     */
+    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(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(date) {
+      return new Date(date.getFullYear() - 1, date.getMonth(), 1);
+    }
+    /**
+     * 下一年（直接切换年份，如2025 → 2026）
+     * @returns {Date} 下年同月日期
+     */
+    static getNextYear(date) {
+      return new Date(date.getFullYear() + 1, date.getMonth(), 1);
+    }
+    /**
+     * 生成6行7列的日期面板数据（42个，自动补充跨月/跨年日期）
+     * @returns {Array} 42个日期对象的数组（6*7）
+     */
+    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 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 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 panel;
+    }
+    // ========== 新增十年跨度相关方法（不改动原有逻辑） ==========
+    /**
+     * 获取当前年份所在的十年区间起始年份
+     * @param {Date} date 基准日期
+     * @returns {number} 十年起始年份（如2026 → 2020）
+     */
+    static getDecadeStart(date) {
+      const year = date.getFullYear();
+      return Math.floor(year / 10) * 10;
+    }
+    /**
+     * 获取下一个十年区间起始年份
+     * @param {number} decadeStart 当前十年起始年份
+     * @returns {number} 下一个十年起始年份（如2020 → 2030）
+     */
+    static getNextDecade(decadeStart) {
+      return decadeStart + 10;
+    }
+    /**
+     * 获取上一个十年区间起始年份
+     * @param {number} decadeStart 当前十年起始年份
+     * @returns {number} 上一个十年起始年份（如2020 → 2010）
+     */
+    static getPrevDecade(decadeStart) {
+      return decadeStart - 10;
+    }
+    /**
+     * 生成十年跨度的年份数组（如2020-2029）
+     * @param {number} decadeStart 十年起始年份
+     * @returns {Array} 十年年份数组
+     */
+    static generateDecadeYears(decadeStart) {
+      return Array.from({ length: 10 }, (_, i) => decadeStart + i);
+    }
+  }
+  const _sfc_main = vueDemi.defineComponent({
+    name: "ViewDatePicker",
+    // Vue2兼容：props定义（vue-demi已适配）
+    props: {
+      value: {
+        // Vue2的v-model绑定值（兼容Vue3的modelValue）
+        type: String,
+        default: () => DateUtils.formatDate(/* @__PURE__ */ new Date())
+      },
+      modelValue: {
+        // Vue3的v-model绑定值
+        type: String,
+        default: () => DateUtils.formatDate(/* @__PURE__ */ new Date())
+      }
+    },
+    // Vue2/Vue3兼容：emits定义
+    emits: ["input", "update:modelValue", "change"],
+    setup(props, { emit }) {
+      const pickerWrapper = vueDemi.ref(null);
+      const dateInput = vueDemi.ref(null);
+      const datePanel = vueDemi.ref(null);
+      const panelVisible = vueDemi.ref(false);
+      const panelStyle = vueDemi.ref({});
+      const currentYear = vueDemi.ref((/* @__PURE__ */ new Date()).getFullYear());
+      const currentMonth = vueDemi.ref((/* @__PURE__ */ new Date()).getMonth() + 1);
+      const hoverDate = vueDemi.ref("");
+      const displayDate = vueDemi.ref("");
+      const panelType = vueDemi.ref("date");
+      const decadeStart = vueDemi.ref(DateUtils.getDecadeStart(new Date(currentYear.value, currentMonth.value - 1)));
+      const decadeYears = vueDemi.computed(() => {
+        const years = DateUtils.generateDecadeYears(decadeStart.value);
+        return Array.isArray(years) ? years : [];
+      });
+      const getDecadeStartAndEnd = vueDemi.computed(() => {
+        const start = decadeStart.value;
+        const end = start + 9;
+        return `${start}年-${end}年`;
+      });
+      const panelDates = vueDemi.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 = vueDemi.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 now = /* @__PURE__ */ new Date();
+          displayDate.value = DateUtils.formatDate(now);
+          currentYear.value = now.getFullYear();
+          currentMonth.value = now.getMonth() + 1;
+          decadeStart.value = DateUtils.getDecadeStart(now);
+        }
+      };
+      vueDemi.watch(
+        () => [props.value, props.modelValue],
+        () => {
+          initDisplayDate();
+        },
+        { immediate: true, deep: true }
+      );
+      const calcPanelPosition = () => {
+        if (!dateInput.value || !datePanel.value) return;
+        const inputRect = dateInput.value.getBoundingClientRect();
+        const wrapperRect = pickerWrapper.value.getBoundingClientRect();
+        panelStyle.value = {
+          position: "absolute",
+          top: `${inputRect.bottom - wrapperRect.top + 4}px`,
+          left: `${inputRect.left - wrapperRect.left}px`,
+          zIndex: 9999,
+          width: `322px`
+        };
+      };
+      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 (vueDemi.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;
+        }
+        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();
+      };
+      vueDemi.onMounted(() => {
+        initDisplayDate();
+        document.addEventListener("click", handleViewReportClickOutside);
+        window.addEventListener("scroll", handleViewReportResizes, true);
+        window.addEventListener("resize", handleViewReportResizes);
+      });
+      vueDemi.onUnmounted(() => {
+        document.removeEventListener("click", handleViewReportClickOutside);
+        window.removeEventListener("scroll", handleViewReportResizes, true);
+        window.removeEventListener("resize", handleViewReportResizes);
+      });
+      return {
+        pickerWrapper,
+        dateInput,
+        datePanel,
+        panelVisible,
+        panelStyle,
+        currentYear,
+        // 仅暴露currentYear/currentMonth
+        currentMonth,
+        hoverDate,
+        displayDate,
+        panelType,
+        decadeYears,
+        panelDates,
+        togglePanel,
+        openYearPanel,
+        openMonthPanel,
+        selectDecadeYear,
+        selectTargetMonth,
+        selectDate,
+        switchToPrevYear,
+        switchToPrevMonth,
+        switchToNextMonth,
+        switchToNextYear,
+        handleInput,
+        getDecadeStartAndEnd,
+        switchToPrevTenYears,
+        switchToNextTenYears
+      };
+    }
+  });
+  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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        vue.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),
+        vue.createElementVNode("span", {
+          class: "date-icon",
+          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+        }, "📅")
+      ]),
+      vue.withDirectives(vue.createElementVNode("div", {
+        ref: "datePanel",
+        class: "date-picker-dropdown",
+        style: vue.normalizeStyle(_ctx.panelStyle)
+      }, [
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn year-btn prev-year",
+              onClick: _cache[3] || (_cache[3] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+            }, "«"),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[4] || (_cache[4] = (...args) => _ctx.switchToPrevMonth && _ctx.switchToPrevMonth(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("span", {
+                onClick: _cache[5] || (_cache[5] = (...args) => _ctx.openYearPanel && _ctx.openYearPanel(...args)),
+                class: "clickable-year"
+              }, vue.toDisplayString(_ctx.currentYear) + "年", 1),
+              vue.createElementVNode("span", {
+                onClick: _cache[6] || (_cache[6] = (...args) => _ctx.openMonthPanel && _ctx.openMonthPanel(...args)),
+                class: "clickable-month"
+              }, vue.toDisplayString(_ctx.currentMonth) + "月", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[7] || (_cache[7] = (...args) => _ctx.switchToNextMonth && _ctx.switchToNextMonth(...args))
+            }, ">"),
+            vue.createElementVNode("button", {
+              class: "toggle-btn year-btn next-year",
+              onClick: _cache[8] || (_cache[8] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+            }, "»")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "date"]
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_7, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[9] || (_cache[9] = (...args) => _ctx.switchToPrevTenYears && _ctx.switchToPrevTenYears(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_8, [
+              vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(_ctx.getDecadeStartAndEnd) + "年", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[10] || (_cache[10] = (...args) => _ctx.switchToNextTenYears && _ctx.switchToNextTenYears(...args))
+            }, ">")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "year"]
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[11] || (_cache[11] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_11, [
+              vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(_ctx.currentYear) + "年", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[12] || (_cache[12] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+            }, ">")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "month"]
+          ]),
+          _ctx.panelType === "date" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+            _cache[14] || (_cache[14] = vue.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)),
+            vue.createElementVNode("div", _hoisted_14, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.panelDates, (item, index2) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  class: vue.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 = "")
+                }, vue.toDisplayString(item.date.getDate()), 43, _hoisted_15);
+              }), 128))
+            ])
+          ])) : _ctx.panelType === "year" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.decadeYears, (year) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["year-item", { "selected": year === _ctx.currentYear }]),
+                key: year,
+                onClick: ($event) => _ctx.selectDecadeYear(year)
+              }, vue.toDisplayString(year) + "年 ", 11, _hoisted_17);
+            }), 128))
+          ])) : _ctx.panelType === "month" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [
+            (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(12, (month) => {
+              return vue.createElementVNode("div", {
+                class: vue.normalizeClass(["month-item", { "selected": month === _ctx.currentMonth }]),
+                key: month,
+                onClick: ($event) => _ctx.selectTargetMonth(month)
+              }, vue.toDisplayString(month) + "月 ", 11, _hoisted_19);
+            }), 64))
+          ])) : vue.createCommentVNode("", true)
+        ])
+      ], 4), [
+        [vue.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);
+    });
+  };
+  if (typeof window !== "undefined" && window.Vue) {
+    install(window.Vue);
+  }
+  const index = { install };
+  exports2.MyButton = MyButton;
+  exports2.ViewDatePicker = ViewDatePicker;
+  exports2.default = index;
+  exports2.install = install;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+}));